body{
    background-color: #dddddd;
    font-family: Tahoma, Arial, sans-serif;
    margin: 0px;
    color:#252525 ;
    font-size: 20px;
}

a{
    color: inherit;
    text-decoration: none;
    font-size:inherit;
    font-weight: inherit;
    display: inline-block;
}

ul{
    list-style-type: none;
    margin:0px;
    padding:0px;
}

ol{
    list-style-type: disc;
}

button{
        color:unset;
        background-color: unset;
}

img{
    max-width: 100%;
    object-fit: cover;
}

h1{
    font-size: 1.4em;
}

h2{
    font-size: 1.25em;
}

h3{
    font-size: 1em;
}


input, textarea, select{
    font-size: 1em;
    border: 1px solid #707070;
    border-radius: 10px;
    padding: 8px 10px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    margin: 5px 0;
    height: 2em;
    color:#707070;
    vertical-align: middle;
}

input[type=checkbox]{
    font-size: unset;
    width: 1em;
}


    /*Classes*/

    .advantages{
        grid-template-columns: 1fr;
        gap: 30px;
        align-items: center;
        text-align: center;
        background-image: url("../img/background-advantage-flagstone.jpg");
        background-size: contain;
        background-repeat: round;
    }

    .inquiry{
        background-image: url("../img/background-inquiry-flagstone.jpg");
        background-size: contain;
        background-repeat: round;
    }
    
    .inquiry > div {
        grid-template-columns: 1fr;
    }
    
    .inquiry aside{
        text-align: center;
    }

    /* Animation*/
    .animate-fast{
        transition: 0.1s ease;
    }

    .animate-slow{
        transition: 0.5s ease;
    }

    

    /* colours */
    .active{
        background-color: #a00000;
    }

    .white{
        color:white;
    }

    .white-on-white{
        background-color: white;
        color:white;
    }

    .white-on-red{
        background-color: #c20000;
        color:white;
    }

    .white-on-light-gray{
        background-color: #707070;
        color: white;
    }

    .white-on-dark-gray{
        background-color: #252525;
        color:white;
    }

    .dark-gray{
        color:#252525;
        background-color:inherit;
    }
    
    .dark-gray-on-white{
        background-color: white;
        color:#252525;
    }

    .dark-gray-on-light-gray{
        background-color: #cccccc;
        color:#252525;    
    }
    
    .light-gray{
        color:#707070;
    }

    .light-gray-on-white{
        background-color: white;
        color: #707070;
    }
    


    /* padding */
    .pad-sm{
        padding: 2vw 5vw;
    }
    
    .pad-sm-lr{
        padding: 0px 5vw;
    }

    .pad-md{
        padding: 30px 50px;
    }

    .pad-half-xl{
        padding: 30px 50px;
    }

    .pad-lg{
        padding: 30px 40px;
    }

    .pad-xl{
        padding: 30px 50px;
    }





    /* Grid Layout*/
    .grid{
        display: grid;
    }

    .columns1{
        grid-template-columns: 1fr;
    }







    /* Buttons */
    .button{
        cursor: pointer;
        border-radius: 9px;
        padding:10px 15px;
        width:fit-content;
        height: fit-content;
        font-weight: bold;
        border:none;
    }



/* hand held devices*/
@media screen and (max-width: 1100px){

    .title{
        background-image: unset !important;
    }

    .container{
        padding-top: 75px; /* height of header */
    }

    .hide-handheld{
        display: none;
    }
}

/* tablet portrait, smartphone only */
@media screen and (max-width: 850px){
    .advantages > span{
        display: none;
    }   
}

/* tablet portrait only */
@media screen and (min-width:601px) and (max-width:850px){
    .advantages{
        padding-left: 160px;
        padding-right: 160px;
    }
}

/* tablet only */
@media screen and (min-width:701px) and (max-width:1100px){
    .container{
        margin: 0px 10%;
    }

    .inquiry > div {
        text-align: center;
    }
}


/* tablet and up*/
@media screen and (min-width:701px){
    h1{
        font-size: 1.7em;
    }
    
    h2{
        font-size: 1.25em;
    }
    
    h3{
        font-size: 1em;
    }
}

/*Desktop and tablet landscape only*/
@media screen and (min-width: 851px){
    .advantages{
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/*Desktop only*/
@media screen and (min-width: 1101px){

    .title{
        background-position: right;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .title > div{
        width:35%;
    }

    .inquiry > div{
        grid-template-columns: 1fr 1fr;

    }

    .inquiry aside{
        background-image: url("../img/background-inquiry-red.png");
        background-position: right;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: #252525;
        position: relative;

    }

    .inquiry aside > div{
        position: absolute; 
        right: 0; 
        left: 3vw;      
        top:50%;
        transform: translate(0, -50%);
        
    }

    .active{
        background-color:unset;
    }

    .columns2{
        grid-template-columns: 1fr 1fr;
    }

    .column-gap-lg{
        column-gap: 5.85vw /* same as pad-half-xl*/
    }

    .pad-sm{
        padding: 3vw 3.6vw;
    }

    .pad-sm-lr{
        padding: 0px 3.6vw;
    }

    .pad-md{
        padding: 40px 4.7vw;
    }

    .pad-half-xl{
        padding: 40px 5.85vw;
    }

    .pad-lg{
        padding: 30px 6.5vw;
    }

    .pad-xl{
        padding: 40px 11.7vw;
    }

    .container{
        padding-top: 125px; /* height of header */
    }

    .hide-desktop{
        display: none;
    }
}

/* big screens */
@media screen and (min-width: 1950px){
    .container{
        margin: 0px 15%;
    }

    .pad-md{
        padding: 40px 2.7vw;
    }

    .pad-lg{
        padding: 40px 4.2vw
    }
}