/* -----------------------------
   colours used
   -----------------------------
    #2f2554 Dark Purple
    #4c328e Mid Purple
    #ae77af Pink

    use this syntax for variables var(--pink)

*/

:root {
    --darkpurple: #2f2554;
    --midpurple: #4c328e;
    --pink: #ae77af;
  }

/* -----------------------------
   fonts
   -----------------------------  */

   @font-face {
       src: url(../fonts/OpenSans.ttf);
       font-family: OpenSans;
       
    }
   

   body {
    width: 100%;
    height:100%;
    margin: 0px auto;
    padding:0px; 
    color:#444;
    font-family: 'OpenSans',sans-serif;
    font-size: 1em;
    line-height: 1.4em;
}

p{
    
    padding-bottom: 1.5em;
    
}
header {
    /* Keeps page container centered on the page when larger than 1024 */
    max-width: 1024px;
    margin: 0px auto;
    
}
footer {
    color:white;
}

.line {
    border-bottom: 10px solid var(--midpurple);
    width:33%;
  }

h1 {
    font-size: 2.8em;
    line-height: 1.2em;
    padding-bottom:0.5em;
    font-family: 'OpenSans',sans-serif;
    color:var(--darkpurple); 
}
h2 {
    font-size: 1.8em;
    padding-bottom:1em;
    text-transform: uppercase;
    font-weight:100;
    font-family: 'OpenSans',sans-serif;
}
h3 {
    font-size: 1.5em;
    padding-top:0.5em;
    padding-bottom:0.5em;
    font-weight: 300;
}
h4{
    font-size: 1.2em;
}

.hero {
    width: 100%;
    background-image: url(../images/car1.jpg);
    height: 400px;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
  }
.hero2 {
    background-image: url(../images/car2.jpg);
  }
  .hero3 {
    background-image: url(../images/car3.jpg);
  }
  .hero4 {
    background-image: url(../images/car4.jpg);
  }

#logo{
    display:block;
    float: left;
    padding:0.5em 1em 0em 0.5em;
    width:8em;
    font-family: 'Lobster', cursive;
    font-size: 2em;
     
}

#logo a{
    text-decoration: none;
    color:var(--midpurple); 

}

nav {
    display:flex;
    justify-content: flex-end;
    /* float: right; */

}
.container-full {
    width: 100%;
    margin: 0px auto;
    padding:0px; 
    /* border:thin red solid; */
}
.container-1024 {
    /* Keeps page container centered on the page when larger than 1024 */
    max-width: 1024px;
    margin: 0px auto;
    padding:4em 2em;
    /* border:thin green solid; */
}
.grey {
    background-color: #efefef;
}
.pink {
    background-color: #ae77af;

}
.darkpurple {
    background: rgb(2,0,36);
    background: linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(48,41,83,1) 35%, rgba(68,61,119,1) 100%);
}
.midpurple {
    background-color:#4c328e;

}
.accentBar {
    background-image: url(../images/car-bg-dark.svg);
    background-position:right;
    background-size:25%;
    background-repeat: repeat;
    height:8em;
    border: solid 1px grey;
    /* opacity: 0.8; */

}
.accentPic {
    background-image: url(../images/car-bg-dark.svg);
    background-position:right;
    background-size:auto;
    background-repeat: repeat;
    opacity: 0.8;

}
.accentPicUpper {
    background-image: url(../images/accent-top-06.svg);
    background-position:-10em -10em;
    background-size:auto;
    background-repeat: no-repeat;

}

.outlined {
    border: thin solid #efefef;
}



div.clear{
    clear:both;
}
nav ul {
    list-style: none;
}
nav a {
    display: block;
    font-weight: bold;
    padding: 0.8em 2em;
}
nav a:link,
nav a:visited,
nav a:hover {

    color:var(--darkpurple);
    font-weight:500;
    text-decoration: none;
    
    
}





/* ====================================
    Desktop Widths
    ==================================== */
nav #menu {
    display: none;
}
nav ul {
    display: flex;
    padding: 0;
    margin: 0 auto;
}
nav li {
    flex: auto;
    /* border-top:0.2em solid transparent; */
}
nav li.active a{
    background-color:#efefef;
    /* border-top:0.2em solid #4c328e; */
    /* font-weight: bold; */
}
.active {
    background-color:#efefef;

}
nav a {
    text-align: center;
}

article {
    display:block;
    float:left;
    /* On desktop, articles are 50% and float */
    width:40%;
    border:thin solid lightgrey;
    padding: 1.5em;
    margin: 1em;
}
article h3{
    margin-top:2px;
    padding-top:0px;
}
aside {
    display:block;
    float:right;
    overflow:hidden;
    /* On desktop, articles are 50% and float */
    width:40%;
    /* padding:1em; */
}
.accentline{
    width: 30px;
    display: inline-block;
    border-top: 2px solid #4c328e;
    position: relative;
    height:1em;
    /* padding-bottom:0.8em; */
    
}
aside img {
    /* Resize img to fit article */
    width:100%;
    padding:0px;
}
.intro{
    display:block;
    float:left;
    width:80%;
    /* padding:1em; */

 }
.quickfacts{
    display: flex;
    justify-content: space-evenly;
    flex-grow: 0;
    flex-shrink: 0;
    display:block;
    float:right;
    overflow:hidden;
    /* border: thin solid green; */
    /* On desktop, articles are 50% and float */
    width:40%;
    /* padding:1em; */

 }
 .quickfacts article{
    /* margin: 0em 1em; */
    display:block;
    float:left;
    padding: 1em;
    width: 40%;
    text-align: center;
    /* border: thin solid green; */
 }
 .quickfacts article h3{
    font-size:1.5em;
 }

  .gallery-grid {
    display: grid;
    /* border: thin solid #efefef; */
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto; /* 120px high */
 }

 .photo {
    overflow:hidden;
    margin:5px;
    max-height: 118px;
    cursor: pointer;
 
 }
 
 .photo img{
    overflow:hidden;
    width:100%;
    transition: 2s all;
 }

 .photo img:hover {	
    transform: scale(1.2);
 }

 .BW img {
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
    
 }
 .BW img:hover  {
    -webkit-filter: grayscale(0%);
 }
 



 .pros-cons {
    column-count: 3;
    column-gap: 40px;
    column-rule-width: 1px;
    vertical-align: top;
    /* border: thin solid #efefef; */

 }
 .pros-cons h2 {
    column-span: all;
    line-height: 1.2em;
 }
 


 /* ====================================
    Form Styles f
    ==================================== */

 .formContainer {
     display:block;
     float:right;
     width: 40%;
    /* margin: 8% auto; */
    /* min-height: 60%; */
    /* box-shadow: 0 2px 16px rgba(146, 145, 145, 0.3); */
    background:#efefef;
    padding: 2em;
    /* box-sizing: border-box; */
    /* border-radius: 8px; */
    margin:1em;
    /* border:thin solid lightgrey; */
}
.formInput {
    display: block;
    margin: 10px 0px 15px 0px;
    padding: 8px;
    width: 100%;
    height: 5%;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-size: 1em;
}
.TA {
    display: block;
    margin: 5px 0px 5px 0px;
    padding: 8px;
    width: 100%;
    height: 4em;
    box-sizing: border-box;
    border: none;
    outline: none;
    font-size: 1em;
    
}
label {
    font-size: 1.1em;
}
.submitButton {
    background: var(--darkpurple);
    color: white;
    margin: 10px 0px;
    width: 100%;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 500;
    padding: 12px 8px;
}
.halfButton {
    /* background:#4c328e; */
    color: white;
    margin: 10px 0px;
    width: 50%;
    border: none;
    border-radius: 4px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 500;
    font-size: 1.1em;
    padding: 16px 8px;
}
.faqContainer{
    display:block;
    float:left;
    width:50%;
}
.faqContainer h4{
    /* font-size: 1.5em; */
    padding:0.5em 0;
}

.overlay {
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.3); 
    cursor: pointer; 
  }

.overlay-text{
    /* position: absolute;
    top: 50%;
    left: 50%; */
    font-size: 1em;
    color: white;
    /* transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%); */
  }



/* ====================================
    Styles for small width screens
    ==================================== */
@media screen and (max-width: 50em) {

    nav #menu {
    display: block;
    text-align: right;
    background-image: url(../images/pancake-menu-black.svg);
    background-size: 1.2em;
    background-position: 0.6em 0.7em;
    background-repeat: no-repeat;
    /* border:thin red solid; */
    padding-left: 40px;
    }
    nav {
    height: auto;
    }
    nav li {
    display: block;
    background-color: #efefef;
    }
    nav ul {
    display: block;
    border:thin solid #efefef;
    margin-left: -199em;
    position: fixed;
    width: 100%;
    }
    nav a {
    text-align: left;
    padding-left: 40px; 
    }
    /* ======================
    Dropdown Style
    ====================== */
    nav.present ul {
    display: block;
    margin-left: -100px;
    }
    nav.present #menu {
        background-image: url('../images/x-menu.svg');
        background-size: 1.2em;
        background-position: 0.6em 0.7em;
        background-repeat: no-repeat;
        padding-left: 40px;
    }

    aside, article {
        display:block;
        /* On mobile, articles and asides are full width */
        width:100%;
        
    }
    .gallery article{
        width: 45%;

     }
    .quickfacts{
        /* On mobile, quickfacts articles go to 2 up */
        flex-wrap: wrap;
         width: 100%;
         
         margin:0px;
         padding:0px;
         /* border: thin solid green; */

     }
    .quickfacts article{
        /* On mobile, quickfacts articles go to 2 up */
        flex-wrap: wrap;
        /* border: thin solid red; */
        justify-content: space-evenly;
        
     }
     .halfButton {
        /* ain't half no more! */       
        width: 100%;

    }
    .faqContainer{
        display:block;
        width:100%;
    }
    .formContainer{
        display:block;
        width:80%;



    }

    .pros-cons {
        column-count: 1;

     }

    /* ======================
    Gallery grid goes to 2 columns on mobile
    ====================== */

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


}