@charset "utf-8";
/*

Original Author: Derek Dombek
Date Created:08-22-19
Version:main styles
Date Last Modified:10-16-19
Modified by:Derek Dombek
Modification log: made the mobile and table versions more up-to-date. added a lot of styling
for my new Past Details Page look. add flex, hover effects, while custom adding those features to each media query.

 
*/


@media (max-width: 641px) and (min-width:100px) {
      
      html {
        
        background-color: #e5f3f5;
        background: linear-gradient(
              to bottom,
              rgba(206, 206, 206, 0),
              rgba(10,5,10, 30)
            ),url(../images/IMG_1183.jpg);
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: cover; 
        margin: 0;
        padding:0;
        height: 100%;
        box-sizing: border-box;
        font-family: 'Open Sans';
        font-weight: normal;
        letter-spacing: 1px;
      }


      body {
       
        margin: 0;
        font-family: 'Open Sans';
        font-weight: normal;
      }


      #outerwrap {
        margin-top: 100px;
      }
      .mainlogo {
        z-index: 500;
        display: block;
        position: fixed;
        float: left;
        height: 100px;
        width: 150px;
        top: -10px;
        left: 20px;
      }
      
      div#countdown {
        font-size: 30px;
        margin-bottom: 4%;
        
  
      }
      div#countdown span {
        color: blue;
  
      }
      .secondMain p {
        font-size: 20px;
  
      }

      h1 {
        color: white;
        text-align: center;
        font-family: 'Open Sans';
        font-weight: normal;
        text-transform: none;
      }
      #booknowwriting h1{
        color: #c8b082;
        margin-top: 2px;
      }
      #booknowwriting {
        border: 2px solid #000000;
        border-radius: 30px;
        width: 50%;
        margin: auto auto;
        padding-left: 5%;
        padding-right: 5%;
        padding-bottom: 40px;
        padding-top: 20px;
        color: #c8b082
      }

      #border-bottom {
        margin-left: 30%;
        margin-right: 30%;
        border-bottom: 2px solid #000000;
      }
      .hamburger span a img {
        width: 40px;
        height: 40px;
        padding-top: 1%;
      }
      .hamburger {
        visibility: visible !important;
        margin: 27px 10% 25px 0;
        float: right;
        position: relative;
        display: block;
        top: 5%;
      }
  
      nav.hamburger-content li {
        padding: 4px;
        border: 1px solid #c8b082;
        border-radius: 5px;
        background-color: #c8b082;
        margin-bottom: 4px;
      }
  
      .hamburger-content a {
        text-decoration: none;
        color: black;
      }
  
      .hamburger-content {
        display: none;
        position: absolute;
        min-width: 100px;
        left: -31px;
        z-index: 1;
        text-align: center;
        border-radius: 5px;
      }

      .hamburger-content a:hover {
        color: white;
      }
  
      .hamburger:hover .hamburger-content {
        display: block;
      }
  
      .topbar {
        background-color: rgba(51, 51, 51, 0.959);
        position: fixed; 
        top: 0;
        left: 0;
        height: 100px;
        width: 100%;
        margin-bottom: 0 ;
        z-index: 400;
        transition: .1s;
        box-shadow: 5px 5px 50px rgb(0, 0, 0);
      }



      #main-menu a {
        visibility:hidden;
        box-sizing: border-box;
        float: right;
        
        color: #c8b082;  
        text-align: center;
        padding-top: 0;
        padding: 20px 30px;
        padding-bottom: 20px;
        margin-right: 20px;
        margin-top: 0;
        text-decoration: none;
      
      }
      

      #main-menu a:hover {
        background: #ddd;
        color: black;
        
        border-radius: 4px;
      }

      #main-menu #bookbuttontopbar a {
        background: #555555;
        color: white;
        text-align: center;
        padding-top: 0;
        padding: 20px 30px;
        padding-bottom: 20px;
        margin-right: 20px;
        margin-top: 0;
        text-decoration: none;
        border-radius: 4px;
      }

      .bookmainbutton {

        background: #555555;
        text-align: center;
        margin: 13px auto;
        width: 30%;
        padding: 20px 30px;
        border-radius: 4px;
      }
      
      .bookmainbutton a {
        color: white;
        text-align: center;
        text-decoration: none;
      }
/*       
      table, tbody, thead, tfoot, th, tr, td {
        display: block;
      } */
   
      .firstMain {
      align-content: center; 

      font-family: 'Open Sans';
      }

      .pastdetailslogotop {
        position: inherit;
        
        margin: auto auto;
      }
      section#section1.thirdMain {
        z-index: 600;
        background-color: black;
        margin: auto auto;
        width: 100%;
        text-align: center;
        padding-top: 100px;
        padding-bottom: 50px;
        box-shadow: 5px 5px 40px rgb(0, 0, 0);
      }

      .secondMainBlog {
        z-index: 600;
        background-color: rgba(51, 51, 51, 0.959);
        width: 100%;
        color: white;
        padding-top: 100px;
        padding-bottom: 100px;
        box-shadow: 5px 5px 40px rgb(0, 0, 0);
        justify-content: center;
      }
      .blogContainer {
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
      }
      .galleryContainerBlog {
        width: 70%;
        padding: 20px;
        justify-content: center;
        border-radius: 10px;
        border: 2px solid #000000;
      }
      .galleryContainerBlog p {
        padding-top: 20px;
        margin: auto;
        width: 80%;
        padding-left: 30px;
        word-wrap: break-word;
      }
      .galleryContainerBlog ol {
        width: 80%;
        margin: auto;
      }
    
      .recentPostsContainerBlog {
        margin: auto;
      }
    
      .recentPostsContainerBlog p {
        text-align: center;
        padding-bottom: 20px;
        padding-top: 20px;
      }
      
      .recentPosts {
        padding: 40px;
        margin: auto;
        display: flex;
        text-align: center;
        flex-direction: column;
        border-radius: 10px;
        border: 2px solid #000000;
        word-wrap: break-word;
      }

      .recentPosts a {
        text-decoration: none;
        color: #c8b082;
      }
    
      .recentPosts a:hover {
        text-decoration: none;
        color: white;
      }

      .secondMain {
        z-index: 600;
        background-color: rgba(51, 51, 51, 0.959);
        margin: auto;
        width: 100%;
        color: white;
        padding-top: 100px;
        padding-bottom: 100px;
        box-shadow: 5px 5px 40px rgb(0, 0, 0);
      }

      .faqContainer {
        margin: auto;
        display: flex;
        flex-direction: column;
        width: 90%;
      }
    
      .faqAccordion {
        background-color: #eee;
        color: #444;
        cursor: pointer;
        padding: 18px;
        border: none;
        outline: none;
        font-size: 15px;
        margin: 20px;
      }
      
      .active, .faqAccordion:hover {
        background-color: #ccc; 
      }
      
      .faqPanel {
        padding: 0 18px;
        display: none;
        overflow: hidden;
      }

      .galleryContainer {
        width: 70%;
        margin: auto;
        display: flex;
        padding: 20px;
        flex-wrap: wrap;
        justify-content: center;
        border-radius: 10px;
        border: 2px solid #000000;
      }
      .galleryContainer .imgBox img{
        max-width: 100%;
        max-height: 100%;
        height: 350px;
        margin: 20px;
      
      }

      .folioContainer {
        width: 100%;
        position: center;
        margin: auto;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
      }
      .folioContainer .box {
        background-color: whitesmoke;
        position: relative;
        width: 300px;
        height: 199px;
        
        margin: 15px;
        box-sizing: border-box;
        display: inline-block;
        box-shadow: 3px 3px 10px rgb(0, 0, 0);
        border-radius: 10px;
      }
      .folioContainer .box .imgBox img{
        max-width: 100%;
        max-height: 100%;
        height: 200px;
        -webkit-transition: .5s; /* Safari */
      -webkit-transition-timing-function: ease-out; /* Safari */
      transition: .5s;
      transition-timing-function: ease-out;
      border-radius: 10px;
      }
      .folioContainer .box:hover .imgBox img{
        opacity: .2;
      }
      
      .folioContainer .box .projectTitle {
        position: absolute;
        top: 50px;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        font-weight: 200;
        -webkit-transition: .5s;
        -webkit-transition-timing-function: ease-in;
        transition: .3s;
        transition-timing-function: ease-in;
        bottom: 40px;
      }
      div.content p {
        font-size: 25px;
      }
      div.content {
        margin: auto;
        text-align: center;
        padding-left: 20px;
        padding-right: 20px;
        color: black;
      }
      div.content2 {
        margin: auto;
      }
      .folioContainer .box:hover .projectTitle {
        opacity: 5;
      }
      .folioContainer .box .projectTitle .content .postDate {
        color: rgb(226, 134, 59);
        padding-top: 10px;
        font-size: 15px;
      }
      
      .folioContainer .box .projectTitle .content2 button {
        background-color: #555555; /* Green */
      border: none;
      color: white;
      padding: 16px 32px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      margin: 4px 2px;
      -webkit-transition-duration: 0.4s; /* Safari */
      transition-duration: 0.4s;
      cursor: pointer;
      border-radius: 4px;
      
    }
    
    .folioContainer .box .projectTitle .content2 button:hover {
      background-color: #9e9e9e;
      color: black;
    }
      .thirdsection{
        margin-top: 40px;
      }
      /*contact form*/
      .fieldset { 
        display: block;
        margin-left: 2px;
        margin-right: 2px;
        padding-top: 0.35em;
        padding-bottom: 0.625em;
        padding-left: 0.75em;
        padding-right: 0.75em;
        border: 2px groove;
      }

      .radiocontainer {
        margin-left: 15%;
      }
      
      .radiocontainer label {
        color: rgb(211, 135, 135)
      }
      .checkcontainer label {
        color: rgb(211, 135, 135)
      }

      .contactbox{
        width: 80%;
        margin: auto auto;
        background:rgba(51, 51, 51, 0.801);
        color: #fff;


        box-shadow: 2px 2px 80px rgb(0, 0, 0);
        border-radius: 60px;
        box-sizing: border-box;
        padding: 5% 5%;
      }


      .contactbox h1{
        margin: 0;
        padding: 0 0 20px;
        text-align: center;
        font-size: 22px;
      }

      .contactbox p.name, p.email {
        display: none;
      }
      textarea {
        width: 70%;
        
      }

      .contactbox input {
        width: 50%;
        margin-bottom: 20px;
        font-family: 'Open Sans';
      }

      .contactbox input[type="text"], input[type="email"] {
        border: none;
        border-bottom: 1px solid #fff;
        background: transparent;
        outline: none;
        height: 40px;
        font-family: 'Open Sans';
        color: #fff;
        font-size: 16px;
        
      }
      ::placeholder {
        padding-left: 30%;
      }

      .contactbox textarea[type="comment"] {
        font-family: 'Open Sans';
        font-size: 16px;
      }
      .contactbox input[type="submit"] {
        border: none;
        outline: none;
        height: 40px;
        background: #000000;
        color: #fff;
        font-size: 18px;
        border-radius: 20px;
      }
      .contactbox input[type="submit"]:hover {
        cursor: pointer;
        background: rgb(226, 134, 59);
        color: #000;
      }

      #lowertext {
        font-size: 10px;
        font-family: 'Open Sans';
      }
      
      /*end contact form*/

      #sectionborder {
        color: #c8b082;
        border: 2px solid #000000;
        border-radius: 30px;
        width: 80%;
        margin: auto auto;
        padding: 20px;
      }

      #sectionborder p {
        margin: 13px auto;
        width: 80%;
        text-align: center;
      }
      
      .box .imgBox {
        position: relative;
        max-width: 100%;
      }
      .box .projectTitle {
        position: absolute;
      }

      li {
        padding-top: 0;
        margin-top: 0;
      }
      .my-picture {
        
        display: none !important;
        
      }

      .my-picture-medium {
        
        width: 500px;
        margin: auto auto;
        transition: transform .7s;
        
      }

      footer {
        position: absolute;
        padding-bottom: 2rem;
        padding-top: 7rem;
        right: 0;
        left: 0;
        text-align: center;
        color: white;
        text-decoration: none;
        
        background-color: rgba(51, 51, 51, 0.959);
        
      }

      footer a {
        text-decoration: none;
        color: white;
      }
      .copyright {
        color: rgb(126, 145, 218);
        
      }

      .copyright:hover {
        text-decoration: underline;
      }

      .containerbackground {
        position: absolute;
        padding-bottom: 2rem;
        padding-top: 1rem;
        right: 0;
        left: 0;
        text-align: center;
        border-radius: 15px;
        width: 160px;
        height: 5px;
        margin: auto;
        bottom: 125px;
      }
      
      .instalogo {
        position: absolute;
    
        right: 0;
        left: 0;
        text-align: center;
        height: 100px;
        width: 53px;
        height: 50px;
        margin: auto auto -125px;
        bottom: 128px;
      }
      
      .linkedinlogo {
        position: absolute;

        right: 0;
        left: 0;
        text-align: center;
        height: 100px;
        width: 35px;
        height: 35px;
        margin: auto auto -125px;
        bottom: 135px;
      }
      
      .githublogo {
        position: absolute;

        right: 0;
        left: 99px;
        text-align: center;
        height: 100px;
        width: 35px;
        height: 35px;
        margin: auto auto -125px;
        bottom: 135px;
      }

      .instalogo:hover {
        opacity: 0.3;
      }
      .linkedinlogo:hover {
        opacity: 0.3;
      }
      .githublogo:hover {
        opacity: 0.3;
      }

      tbody {
        color: white;
      }
      .priceCarButton2door {
        transition: transform .7s;
        border: solid white;
        height: 150px;
        margin: 0 auto 10px;
      }
      
      .priceCarButton2door:hover {
        cursor: pointer;
      }
        
        .myClass2door {
          border: solid #c8b082;
          -ms-transform: scale(0.9); /* IE 9 */
          -webkit-transform: scale(0.9); /* Safari 3-8 */
          transform: scale(0.9); 
        }
      
        .priceCarButton4door {
          transition: transform .7s;
          border: solid white;
          height: 150px;
          margin: 0 auto 10px;
        }
        .priceCarButton4door:hover {
          cursor: pointer;
        }
      
        .myClass4door {
          border: solid #c8b082;
          -ms-transform: scale(0.9); /* IE 9 */
          -webkit-transform: scale(0.9); /* Safari 3-8 */
          transform: scale(0.9); 
        }
        .priceCarButtonPickup {
          transition: transform .7s;
          border: solid white;
          height: 150px;
          margin: 0 auto 10px;
        }
      
        .priceCarButtonPickup:hover {
          cursor: pointer;
        }
        .myClassPickup {
          border: solid #c8b082;
          -ms-transform: scale(0.9); /* IE 9 */
          -webkit-transform: scale(0.9); /* Safari 3-8 */
          transform: scale(0.9); 
        }
        .priceCarButtonSuv {
          transition: transform .7s;
          border: solid white;
          height: 150px;
          margin: 0 auto 10px;
        }
      
        .priceCarButtonSuv:hover {
          cursor: pointer;
        }
        .myClassSuv {
          border: solid #c8b082;
          -ms-transform: scale(0.9); /* IE 9 */
          -webkit-transform: scale(0.9); /* Safari 3-8 */
          transform: scale(0.9); 
        }
        .priceCarButtonVan {
          transition: transform .7s;
          border: solid white;
          height: 150px;
          margin: 0 auto 10px;
        }
      
        .priceCarButtonVan:hover {
          cursor: pointer;
        }
        .myClassVan {
          border: solid #c8b082;
          -ms-transform: scale(0.9); /* IE 9 */
          -webkit-transform: scale(0.9); /* Safari 3-8 */
          transform: scale(0.9); 
        }
      
        .vehicleSelectorTitle {
          text-align: center;
          margin: auto;
          width: 80%;
          color: white;
        }
    
        .menulogocontainercarprice {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: auto;
        }
      
        .menulogocontainercarprice div {
          padding: 20px;
        }
      .menulogocontainer {
        
        /* top: 10%; */
        display: flex;
        /* justify-content: center; */
        flex-direction: column;
        align-items: center;
        /* align-content: center; */
        /* margin-bottom: 15%; */
      }

      

      .menucontainer {
        display: none;
        justify-content: space-around;
        margin-left: 10px;
        margin-bottom: 80px;
      }
      .pastdetailslogo {
        
  
        transition: transform .7s;
        width: 100px;
        height: 100px;
        margin: 0 auto 20px;
            }
            .pastdetailslogo:hover {
              -ms-transform: scale(1.5); /* IE 9 */
              -webkit-transform: scale(1.5); /* Safari 3-8 */
              transform: scale(1.5); 
            }
    
      
      .booknowlogo {
            
      
        transition: transform .7s;
        width: 100px;
        height: 100px;
        margin: 0 auto 10px;
            }
            .booknowlogo:hover {
              -ms-transform: scale(1.5); /* IE 9 */
              -webkit-transform: scale(1.5); /* Safari 3-8 */
              transform: scale(1.5); 
            }
    
      
      .packageslogo {
            
      
        transition: transform .7s;
        width: 100px;
        height: 100px;
        margin: 0 auto 60px;
            }
            .packageslogo:hover {
              -ms-transform: scale(1.5); /* IE 9 */
              -webkit-transform: scale(1.5); /* Safari 3-8 */
              transform: scale(1.5); 
            }
    

      .pastdetails {
        color: white;
      }

      .booknow {
        color: white;
      }

      .packages {
        color: white;
      }
    }
/*Break Point*/

@media (max-width: 1020px) and (min-width:641px) {



    html {
      font-family: 'Open Sans';
      font-weight: normal;
      background-color: #000000;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-size: cover; 
      margin: 0;
      padding:0;
      height: 100%;
      box-sizing: border-box;
      
    }


    body {
      margin: 0;
      font-family: 'Open Sans';
      font-weight: normal;
    }


    #outerwrap {
      margin-top: 110px;
    }
    .mainlogo {
      
    z-index: 500;
    display: block;
    position: fixed;
    float: left;
    height: 150px;
    width: 200px;
    top: -19px;
    left: 10px;
    }
    div#countdown {
      font-size: 30px;
      margin-bottom: 4%;
      

    }
    div#countdown span {
      color: blue;

    }
    .secondMain p {
      font-size: 20px;

    }

    h1 {
      color: white;
      text-align: center;
      font-family: 'Open Sans';
      font-weight: normal;
      text-transform: none;
      margin-top: 80px;
    }

    #border-bottom {
      margin-left: 30%;
      margin-right: 30%;
      border-bottom: 2px solid #000000;
    }
    .hamburger span a img {
      width: 40px;
      height: 40px;
    }
    .hamburger {
      visibility: visible !important;
      margin: 45px 10% 25px 0;
      float: right;
      position: relative;
      display: block;
      top: 5%;
    }
    nav.hamburger-content li {
      padding: 4px;
      border: 1px solid #c8b082;
      border-radius: 5px;
      background-color: #c8b082;
      margin-bottom: 4px;
    }

    .hamburger-content a {
      text-decoration: none;
      color: black;
    }

    .hamburger-content {
      display: none;
      position: absolute;
      min-width: 100px;
      left: -31px;
      z-index: 1;
      text-align: center;
      border-radius: 5px;
    }

    .hamburger-content a:hover {
      color: white;
    }

    .hamburger:hover .hamburger-content {
      display: block;
    }
    .topbar {
      background-color: rgba(51, 51, 51, 0.959);
      position: fixed; 
      top: 0;
      left: 0;
      width: 100%;
      padding-bottom: 25px;
      padding-top: 3px;
      z-index: 400;
      transition: .1s;
      box-shadow: 5px 5px 50px rgb(0, 0, 0);
    }
    #booknowwriting h1{
      color: #c8b082;
      margin-top: 2px;
    }
    #booknowwriting {
      border: 2px solid #000000;
      border-radius: 30px;
      width: 50%;
      margin: auto auto;
      padding-left: 5%;
      padding-right: 5%;
      padding-bottom: 40px;
      padding-top: 20px;
      color: #c8b082
    }


    #main-menu a {
      visibility:hidden !important;
      box-sizing: border-box;
      float: right;
      
      color: #c8b082;  
      text-align: center;
      padding-top: 0;
      padding: 20px 30px;
      padding-bottom: 20px;
      margin-right: 20px;
      margin-top: 0;
      text-decoration: none;
    
      
    }


    #main-menu a:hover {
      background: #ddd;
      color: black;
      
      border-radius: 4px;
    }

    #main-menu #bookbuttontopbar a {
      background: #555555;
      color: white;
      text-align: center;
      padding-top: 0;
      padding: 20px 30px;
      padding-bottom: 20px;
      margin-right: 20px;
      margin-top: 0;
      text-decoration: none;
      border-radius: 4px;
    }

    .bookmainbutton {

      background: #555555;
      text-align: center;
      margin: 13px auto;
      width: 10%;
      padding: 20px 30px;
      border-radius: 4px;
    }
    
    .bookmainbutton a {
      color: white;
      text-align: center;
      text-decoration: none;
    }
    
    /* table, tbody, thead, tfoot, th, tr, td {
      display: block;
    } */
 

    .firstMain {
    align-content: center; 

    font-family: 'Open Sans';
    padding-top: 1px;
    padding-left: 50px;
    padding-right: 50px;
    }

    .pastdetailslogotop {
      position: inherit;
      
      margin: auto auto;
    }
    
    section#section1.thirdMain {
      z-index: 600;
      background-color: black;
      margin: auto auto;
      width: 100%;
      text-align: center;
      padding-top: 100px;
      padding-bottom: 50px;
      box-shadow: 5px 5px 40px rgb(0, 0, 0);
    }

    .secondMainBlog {
      z-index: 600;
      background-color: rgba(51, 51, 51, 0.959);
      width: 100%;
      color: white;
      padding-top: 100px;
      padding-bottom: 100px;
      box-shadow: 5px 5px 40px rgb(0, 0, 0);
      justify-content: center;
    }
    .blogContainer {
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      width: 90%;
    }
    .galleryContainerBlog {
      width: 50%;
      padding: 20px;
      justify-content: center;
      border-radius: 10px;
      border: 2px solid #000000;
    }
    .galleryContainerBlog p {
      padding-top: 20px;
      margin: auto;
      width: 80%;
      padding-left: 30px;
      word-wrap: break-word;
    }
    .galleryContainerBlog ol {
      width: 80%;
      margin: auto;
    }
  
    .recentPostsContainerBlog {
      margin: auto;
      width: 35%;
    }
  
    .recentPostsContainerBlog p {
      text-align: center;
      padding-bottom: 20px;
    }
    
    .recentPosts {
      padding: 40px;
      margin: auto;
      display: flex;
      text-align: center;
      flex-direction: column;
      border-radius: 10px;
      border: 2px solid #000000;
      word-wrap: break-word;
    }

    .recentPosts a {
      text-decoration: none;
      color: #c8b082;
    }
  
    .recentPosts a:hover {
      text-decoration: none;
      color: white;
    }

    .secondMain {
      z-index: 600;
      background-color: rgba(51, 51, 51, 0.959);
      margin: auto;
      width: 100%;
      color: white;
      padding-top: 100px;
      padding-bottom: 100px;
      box-shadow: 5px 5px 40px rgb(0, 0, 0);
    }

    .faqContainer {
      margin: auto;
      display: flex;
      flex-direction: column;
      width: 60%;
    }
  
    .faqAccordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      border: none;
      outline: none;
      font-size: 15px;
      margin: 20px;
    }
    
    .active, .faqAccordion:hover {
      background-color: #ccc; 
    }
    
    .faqPanel {
      padding: 0 18px;
      display: none;
      overflow: hidden;
    }

    .galleryContainer {
      width: 70%;
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      justify-content: center;
      border-radius: 10px;
      border: 2px solid #000000;
    }
    .galleryContainer .imgBox img{
      max-width: 100%;
      max-height: 100%;
      height: 350px;
      margin: 20px;
    
    }
    .folioContainer {
      width: 100%;
      position: center;
      margin: auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }
    .folioContainer .box {
      background-color: whitesmoke;
      position: relative;
      width: 300px;
      height: 199px;
      
      margin: 15px;
      box-sizing: border-box;
      display: inline-block;
      box-shadow: 3px 3px 10px rgb(0, 0, 0);
      border-radius: 10px;
    }
    .folioContainer .box .imgBox img{
      max-width: 100%;
      max-height: 100%;
      height: 200px;
      -webkit-transition: .5s; /* Safari */
    -webkit-transition-timing-function: ease-out; /* Safari */
    transition: .5s;
    transition-timing-function: ease-out;
    border-radius: 10px;
    }
    .folioContainer .box:hover .imgBox img{
      opacity: .2;
    }
    
    .folioContainer .box .projectTitle {
      position: absolute;
      top: 50px;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      font-weight: 200;
      -webkit-transition: .5s;
      -webkit-transition-timing-function: ease-in;
      transition: .3s;
      transition-timing-function: ease-in;
      bottom: 40px;
    }
    div.content p {
      font-size: 25px;
    }
    div.content {
      margin: auto;
      text-align: center;
      padding-left: 20px;
      padding-right: 20px;
      color: black;
    }
    div.content2 {
      margin: auto;
    }
    .folioContainer .box:hover .projectTitle {
      opacity: 5;
    }
    .folioContainer .box .projectTitle .content .postDate {
      color: rgb(226, 134, 59);
      padding-top: 10px;
      font-size: 15px;
    }
    
    .folioContainer .box .projectTitle .content2 button {
      background-color: #555555; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    border-radius: 4px;
    
  }
  
  .folioContainer .box .projectTitle .content2 button:hover {
    background-color: #9e9e9e;
    color: black;
  }
    .thirdsection{
      margin-top: 80px;
    }
    /*contact form*/
    .radiocontainer {
      margin-left: 15%;
    }
    label {
      color: rgb(211, 135, 135)
    }

    .contactbox{
      width: 60%;
      margin: auto auto;
      background:rgba(51, 51, 51, 0.801);
      color: #fff;
    

      box-shadow: 2px 2px 80px rgb(0, 0, 0);
      border-radius: 60px;
      box-sizing: border-box;
      padding: 5% 5%;
    }


    .contactbox h1{
      margin: 0;
      padding: 0 0 20px;
      text-align: center;
      font-size: 22px;
    }

    .contactbox p{
      margin: 0;
      padding: 0;
    }
    textarea {
      width: 70%;
      
    }

    .contactbox input {
      width: 50%;
      margin-bottom: 20px;
      font-family: 'Open Sans';
    }

    .contactbox input[type="text"], input[type="email"] {
      border: none;
      border-bottom: 1px solid #fff;
      background: transparent;
      outline: none;
      height: 40px;
      font-family: 'Open Sans';
      color: #fff;
      font-size: 16px;
    }

    .contactbox textarea[type="comment"] {
      font-family: 'Open Sans';
      font-size: 16px;
    }
    .contactbox input[type="submit"] {
      border: none;
      outline: none;
      height: 40px;
      background: #000000;
      color: #fff;
      font-size: 18px;
      width:25%;
      border-radius: 20px;
    }
    .contactbox input[type="submit"]:hover {
      cursor: pointer;
      background: rgb(226, 134, 59);
      color: #000;
    }

    #lowertext {
      font-size: 10px;
      font-family: 'Open Sans';
    }
    /*end contact form*/

    #sectionborder {
      color: #c8b082;
      border: 2px solid #000000;
      border-radius: 30px;
      width: 80%;
      margin: auto auto;
      padding: 20px;
    }

    #sectionborder p {
      margin: 13px auto;
      width: 80%;
      text-align: center;
    }



    li {
      padding-top: 0;
      margin-top: 0;
    }
    .my-picture {
      
      width: 500px;
      margin: auto auto;
      transition: transform .7s;
      
      
    }
    .my-picture:hover {
      -ms-transform: scale(1.5); /* IE 9 */
      -webkit-transform: scale(1.5); /* Safari 3-8 */
      transform: scale(1.5); 
    }

    .my-picture-medium {
        
      display: none !important;
    }

    footer {
      position: absolute;
      padding-bottom: 2rem;
      padding-top: 7rem;
      right: 0;
      left: 0;
      text-align: center;
      color: white;
      text-decoration: none;
      
      background-color: rgba(51, 51, 51, 0.959);
      
    }

    footer a {
      text-decoration: none;
      color: white;
    }
    .copyright {
      color: rgb(126, 145, 218);
      
    }

    .copyright:hover {
      text-decoration: underline;
    }

    .containerbackground {
      position: absolute;
      padding-bottom: 2rem;
      padding-top: 1rem;
      right: 0;
      left: 0;
      text-align: center;
      border-radius: 15px;
      width: 160px;
      height: 5px;
      margin: auto;
      bottom: 125px;
    }
    
    .instalogo {
      position: absolute;
  
      right: 0;
      left: 0;
      text-align: center;
      height: 100px;
      width: 53px;
      height: 50px;
      margin: auto auto -125px;
      bottom: 128px;
    }
    
    .linkedinlogo {
      position: absolute;

      right: 0;
      left: 0;
      text-align: center;
      height: 100px;
      width: 35px;
      height: 35px;
      margin: auto auto -125px;
      bottom: 135px;
    }
    
    .githublogo {
      position: absolute;

      right: 0;
      left: 99px;
      text-align: center;
      height: 100px;
      width: 35px;
      height: 35px;
      margin: auto auto -125px;
      bottom: 135px;
    }


    .instalogo:hover {
      opacity: 0.3;
    }
    .linkedinlogo:hover {
      opacity: 0.3;
    }
    .githublogo:hover {
      opacity: 0.3;
    }


    tbody {
      color: white;
    }
    .priceCarButton2door {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
    
    .priceCarButton2door:hover {
      cursor: pointer;
    }
      
      .myClass2door {
        border: solid #c8b082;
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari 3-8 */
        transform: scale(0.9); 
      }
    
      .priceCarButton4door {
        transition: transform .7s;
        border: solid white;
        height: 150px;
        margin: 0 auto 10px;
      }
      .priceCarButton4door:hover {
        cursor: pointer;
      }
    
      .myClass4door {
        border: solid #c8b082;
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari 3-8 */
        transform: scale(0.9); 
      }
      .priceCarButtonPickup {
        transition: transform .7s;
        border: solid white;
        height: 150px;
        margin: 0 auto 10px;
      }
    
      .priceCarButtonPickup:hover {
        cursor: pointer;
      }
      .myClassPickup {
        border: solid #c8b082;
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari 3-8 */
        transform: scale(0.9); 
      }
      .priceCarButtonSuv {
        transition: transform .7s;
        border: solid white;
        height: 150px;
        margin: 0 auto 10px;
      }
    
      .priceCarButtonSuv:hover {
        cursor: pointer;
      }
      .myClassSuv {
        border: solid #c8b082;
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari 3-8 */
        transform: scale(0.9); 
      }
      .priceCarButtonVan {
        transition: transform .7s;
        border: solid white;
        height: 150px;
        margin: 0 auto 10px;
      }
    
      .priceCarButtonVan:hover {
        cursor: pointer;
      }
      .myClassVan {
        border: solid #c8b082;
        -ms-transform: scale(0.9); /* IE 9 */
        -webkit-transform: scale(0.9); /* Safari 3-8 */
        transform: scale(0.9); 
      }
    
      .vehicleSelectorTitle {
        text-align: center;
        margin: auto;
        width: 80%;
        color: white;
      }
  
      .menulogocontainercarprice {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: auto;
      }
    
      .menulogocontainercarprice div {
        padding: 20px;
      }

    .menulogocontainer {
      display: flex;
      justify-content: space-around;
      margin-bottom: 15%;
      
    }


    .menucontainer {
      display: flex;
      justify-content: space-around;
      margin-left: 10px;
      margin-bottom: 50px;
    }
    .pastdetailslogo {
        
  
      transition: transform .7s;
      width: 200px;
      height: 200px;
      margin: 0 auto;
          }
          .pastdetailslogo:hover {
            -ms-transform: scale(1.5); /* IE 9 */
            -webkit-transform: scale(1.5); /* Safari 3-8 */
            transform: scale(1.5); 
          }
  
    
    .booknowlogo {
          
    
      transition: transform .7s;
      width: 200px;
      height: 200px;
      margin: 0 auto;
          }
          .booknowlogo:hover {
            -ms-transform: scale(1.5); /* IE 9 */
            -webkit-transform: scale(1.5); /* Safari 3-8 */
            transform: scale(1.5); 
          }
  
    
    .packageslogo {
          
    
      transition: transform .7s;
      width: 200px;
      height: 200px;
      margin: 0 auto;
          }
          .packageslogo:hover {
            -ms-transform: scale(1.5); /* IE 9 */
            -webkit-transform: scale(1.5); /* Safari 3-8 */
            transform: scale(1.5); 
          }
  

    .pastdetails {
      color: white;
    }

    .booknow {
      color: white;
    }

    .packages {
      color: white;
    }
}
@media (max-width: 1440px) and (min-width: 1020px) {

  html {
    font-family: 'Open Sans';
    font-weight: normal;
    background-color: #000000;
    /* background: linear-gradient(
      to bottom,
      rgba(206, 206, 206, 0),
      rgba(10,5,10, 30)
    ),url(../images/IMG_0645.jpg); */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0;
    padding:0;
    height: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
  }


  body {
    margin: 0;
    font-family: 'Open Sans';
    font-weight: normal;
  }

  #outerwrap {
    margin-top: 110px;
  }
  .mainlogo {
    z-index: 500;
    display: block;
    position: fixed;
    float: left;
    height: 150px;
    width: 200px;
    top: -34px;
    left: 5px;
  }
  /*clock styles*/
    div#countdown {
      font-size: 30px;
      margin-bottom: 4%;
      

    }
    div#countdown span {
      color: blue;

    }
    .secondMain p {
      font-size: 20px;

    }
    

  h1 {
    color: white;
    font-size: 50px;
    text-align: center;
    font-family: 'Open Sans';
    font-weight: normal;
    text-transform: none;
    margin-top: 80px;
  }

  #border-bottom {
    margin-left: 30%;
    margin-right: 30%;
    border-bottom: 2px solid #000000;
  }
  .hamburger {
    display: none !important;
    margin-left: 50%;
    position: relative;
    display: inline-block;
    
  }
  nav.hamburger-content li {
    padding: 4px;
    border: 1px solid #c8b082;
    border-radius: 5px;
    background-color: #c8b082;
    margin-bottom: 4px;
  }
  .hamburger a {
    text-decoration: none;
  }

  .hamburger-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    
  }
  #booknowwriting h1{
    color: #c8b082;
    margin-top: 2px;
  }
  #booknowwriting {
    border: 2px solid #000000;
    border-radius: 30px;
    width: 50%;
    margin: auto auto;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 40px;
    padding-top: 20px;
    color: #c8b082
  }
  .hamburger:hover .hamburger-content {
    display: block;
  }

  .topbar {
    background-color: rgba(51, 51, 51, 0.959);
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 29px;
    padding-top: 29px;
    z-index: 400;
    transition: .1s;
    box-shadow: 5px 5px 50px rgb(0, 0, 0);
  }



  #main-menu a {
    visibility:visible;
    box-sizing: border-box;
    float: right;
    
    color: #c8b082;  
    text-align: center;
    padding-top: 0;
    padding: 20px 30px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    text-decoration: none;
  
    
  }


  #main-menu a:hover {
    background: #ddd;
    color: black;
    
    border-radius: 4px;
  }

  #main-menu #bookbuttontopbar a {
    background: #555555;
    color: white;
    text-align: center;
    padding-top: 0;
    padding: 20px 30px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    text-decoration: none;
    border-radius: 4px;
  }

  .bookmainbutton {

    background: #555555;
    text-align: center;
    margin: 13px auto;
    width: 10%;
    padding: 20px 30px;
    border-radius: 4px;
  }
  
  .bookmainbutton a {
    color: white;
    text-align: center;
    text-decoration: none;
  }

  .firstMain {
  align-content: center; 

  font-family: 'Open Sans';
  padding-top: 1px;
  padding-left: 50px;
  padding-right: 50px;
  }

  .pastdetailslogotop {
    position: inherit;
    
    margin: auto auto;
  }
  
  section#section1.thirdMain {
    z-index: 600;
    background-color: black;
    margin: auto auto;
    width: 100%;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
    box-shadow: 5px 5px 40px rgb(0, 0, 0);
  }

  .secondMainBlog {
    z-index: 600;
    background-color: rgba(51, 51, 51, 0.959);
    width: 100%;
    color: white;
    padding-top: 100px;
    padding-bottom: 100px;
    box-shadow: 5px 5px 40px rgb(0, 0, 0);
    justify-content: center;
  }
  .blogContainer {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    width: 90%;
  }
  .galleryContainerBlog {
    width: 60%;
    padding: 20px;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #000000;
  }
  .galleryContainerBlog p {
    padding-top: 20px;
    margin: auto;
    width: 80%;
    padding-left: 30px;
    word-wrap: break-word;
  }
  .galleryContainerBlog ol {
    width: 80%;
    margin: auto;
  }

  .recentPostsContainerBlog {
    margin: auto;
    width: 30%;
  }

  .recentPostsContainerBlog p {
    text-align: center;
    padding-bottom: 20px;
  }
  
  .recentPosts {
    padding: 40px;
    margin: auto;
    display: flex;
    text-align: center;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid #000000;
    word-wrap: break-word;
  }

  .recentPosts a {
    text-decoration: none;
    color: #c8b082;
  }

  .recentPosts a:hover {
    text-decoration: none;
    color: white;
  }

  .secondMain {
    z-index: 600;
    background-color: rgba(51, 51, 51, 0.959);
    margin: auto;
    width: 100%;
    color: white;
    padding-top: 100px;
    padding-bottom: 100px;
    box-shadow: 5px 5px 40px rgb(0, 0, 0);
  }

  .faqContainer {
    margin: auto;
    display: flex;
    flex-direction: column;
    width: 60%;
  }

  .faqAccordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    border: none;
    outline: none;
    font-size: 15px;
    margin: 20px;
  }
  
  .active, .faqAccordion:hover {
    background-color: #ccc; 
  }
  
  .faqPanel {
    padding: 0 18px;
    display: none;
    overflow: hidden;
  }

  .galleryContainer {
    width: 70%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #000000;
  }
  .galleryContainer .imgBox img{
    max-width: 100%;
    max-height: 100%;
    height: 350px;
    margin: 20px;
  
  }
  .folioContainer {
    width: 100%;
    position: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .folioContainer .box {
    background-color: whitesmoke;
    position: relative;
    width: 300px;
    height: 199px;
    
    margin: 15px;
    box-sizing: border-box;
    display: inline-block;
    box-shadow: 3px 3px 10px rgb(0, 0, 0);
    border-radius: 10px;
  }
  .folioContainer .box .imgBox img{
    max-width: 100%;
    max-height: 100%;
    height: 200px;
    -webkit-transition: .5s; /* Safari */
  -webkit-transition-timing-function: ease-out; /* Safari */
  transition: .5s;
  transition-timing-function: ease-out;
  border-radius: 10px;
  }
  .folioContainer .box:hover .imgBox img{
    opacity: .2;
  }
  
  .folioContainer .box .projectTitle {
    position: absolute;
    top: 50px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-weight: 200;
    -webkit-transition: .5s;
    -webkit-transition-timing-function: ease-in;
    transition: .3s;
    transition-timing-function: ease-in;
    bottom: 40px;
  }
  div.content p {
    font-size: 25px;
  }
  div.content {
    margin: auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    color: black;
  }
  div.content2 {
    margin: auto;
  }
  .folioContainer .box:hover .projectTitle {
    opacity: 5;
  }
  .folioContainer .box .projectTitle .content .postDate {
    color: rgb(226, 134, 59);
    padding-top: 10px;
    font-size: 15px;
  }
  
  .folioContainer .box .projectTitle .content2 button {
    background-color: #555555; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
  
}

.folioContainer .box .projectTitle .content2 button:hover {
  background-color: #9e9e9e;
  color: black;
}
  .thirdsection{
    margin-top: 80px;
  }
  /*contact form*/
  .radiocontainer {
    margin-left: 15%;
  }
  
  label {
    color: rgb(211, 135, 135)
  }
  .contactbox{
    width: 60%;
    margin: auto auto;
    background:rgba(51, 51, 51, 0.801);
    color: #fff;
  

    box-shadow: 2px 2px 80px rgb(0, 0, 0);
    border-radius: 60px;
    box-sizing: border-box;
    padding: 5% 5%;
  }


  .contactbox h1{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
  }

  .contactbox p{
    margin: 0;
    padding: 0;
  }
  textarea {
    width: 70%;
    
  }

  .contactbox input {
    width: 50%;
    margin-bottom: 20px;
    font-family: 'Open Sans';
  }

  .contactbox input[type="text"], input[type="email"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    font-family: 'Open Sans';
    color: #fff;
    font-size: 16px;
  }

  .contactbox textarea[type="comment"] {
    font-family: 'Open Sans';
    font-size: 16px;
  }
  .contactbox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #000000;
    color: #fff;
    font-size: 18px;
    width:25%;
    border-radius: 20px;
  }
  .contactbox input[type="submit"]:hover {
    cursor: pointer;
    background: rgb(226, 134, 59);
    color: #000;
  }

  #lowertext {
    
    font-size: 10px;
    font-family: 'Open Sans';
  }
  /*end contact form*/

  #sectionborder {
    color: #c8b082;
    border: 2px solid #000000;
    border-radius: 30px;
    width: 80%;
    margin: auto auto;
    padding: 20px;
  }

  #sectionborder p {
    margin: 13px auto;
    width: 80%;
    text-align: center;
  }



  li {
    padding-top: 0;
    margin-top: 0;
  }
  .my-picture {
    
    width: 500px;
    margin: auto auto;
    transition: transform .7s;
    
    
  }
  .my-picture:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }

  .my-picture-medium {
        
    display: none !important;
  }

  footer {
    position: absolute;
    padding-bottom: 2rem;
    padding-top: 1rem;
    right: 0;
    left: 0;
    text-align: center;
    color: white;
    text-decoration: none;
    
    background-color: rgba(0, 0, 0, 0.445);
    
  }

  footer a {
    text-decoration: none;
    color: white;
  }
  .copyright {
    color: rgb(126, 145, 218);
    
  }

  .copyright:hover {
    text-decoration: underline;
  }

  .containerbackground {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-around;
    position: fixed;
    border-radius: 15px;
    width: 48px;
    padding-left: 12px;
    background-color: gray;
    left: 92%;
    bottom: 40%;
    height: 150px;
}

/* .containerbackground {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  position: fixed;
  border-radius: 15px;
  width: 48px;
  padding-left: 12px;
  background-color: gray;
  opacity: .3;
  left: 1320px;
  bottom: 380px;
  height: 150px;
}

.instalogo {
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-around;
height: 50px;
width: 53px;
z-index: 1500;
position: fixed;
left: 1323px;
bottom: 477px;
}

.linkedinlogo {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  height: 34px;
  width: 36px;
  position: fixed;
  left: 1332px;
  bottom: 437px;
}

.githublogo {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  z-index: 1000;
  height: 35px;
  width: 37px;
  position: fixed;
  left: 1332px;
  bottom: 391px;
} */

.containerbackground {
  position: absolute;
  padding-bottom: 2rem;
  padding-top: 1rem;
  right: 0;
  left: 0;
  text-align: center;
  border-radius: 15px;
  width: 160px;
  height: 5px;
  margin: auto;
  bottom: 125px;
}

.instalogo {
  position: absolute;

  right: 0;
  left: 0;
  text-align: center;
  height: 100px;
  width: 53px;
  height: 50px;
  margin: auto auto -125px;
  bottom: 128px;
}

.linkedinlogo {
  position: absolute;

  right: 0;
  left: 0;
  text-align: center;
  height: 100px;
  width: 35px;
  height: 35px;
  margin: auto auto -125px;
  bottom: 135px;
}

.githublogo {
  position: absolute;

  right: 0;
  left: 99px;
  text-align: center;
  height: 100px;
  width: 35px;
  height: 35px;
  margin: auto auto -125px;
  bottom: 135px;
}


  .instalogo:hover {
    opacity: 0.3;
  }
  .linkedinlogo:hover {
    opacity: 0.3;
  }
  .githublogo:hover {
    opacity: 0.3;
  }


  tbody {
    color: white;
  }
  .priceCarButton2door {
    transition: transform .7s;
    border: solid white;
    height: 150px;
    margin: 0 auto 10px;
  }
  
  .priceCarButton2door:hover {
    cursor: pointer;
  }
    
    .myClass2door {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
  
    .priceCarButton4door {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
    .priceCarButton4door:hover {
      cursor: pointer;
    }
  
    .myClass4door {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
    .priceCarButtonPickup {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
  
    .priceCarButtonPickup:hover {
      cursor: pointer;
    }
    .myClassPickup {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
    .priceCarButtonSuv {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
  
    .priceCarButtonSuv:hover {
      cursor: pointer;
    }
    .myClassSuv {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
    .priceCarButtonVan {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
  
    .priceCarButtonVan:hover {
      cursor: pointer;
    }
    .myClassVan {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
  
    .vehicleSelectorTitle {
      text-align: center;
      margin: auto;
      width: 80%;
      color: white;
    }

    .menulogocontainercarprice {
      display: flex;
      justify-content:center;
      margin: 0;
    }
  
    .menulogocontainercarprice div {
      padding: 10px;
    }
  .menulogocontainer {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15%;
    
  }


  .menucontainer {
    display: flex;
    justify-content: space-around;
    margin-left: 10px;
    margin-bottom: 50px;
  }
  .pastdetailslogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .pastdetailslogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  
  .booknowlogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .booknowlogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  
  .packageslogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .packageslogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  .pastdetails {
    color: white;
  }

  .booknow {
    color: white;
  }

  .packages {
    color: white;
  }
}

@media (max-width: 1700px) and (min-width: 1440px) {


  html {
    font-family: 'Open Sans';
    font-weight: normal;
    background-color: #000000;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0;
    padding:0;
    height: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
  }


  body {
    margin: 0;
    font-family: 'Open Sans';
    font-weight: normal;
  }

  #outerwrap {
    margin-top: 110px;
  }
  .mainlogo {
    z-index: 500;
    display: block;
    position: fixed;
    float: left;
    height: 150px;
    width: 200px;
    top: -34px;
    left: 5px;
  }
  /*clock styles*/
    div#countdown {
      font-size: 30px;
      margin-bottom: 4%;
      

    }
    div#countdown span {
      color: #7cbad9;

    }
    .secondMain p {
      font-size: 20px;

    }
    

  h1 {
    color: white;
    font-size: 50px;
    text-align: center;
    font-family: 'Open Sans';
    font-weight: normal;
    text-transform: none;
    margin-top: 80px;
  }

  #border-bottom {
    margin-left: 30%;
    margin-right: 30%;
    border-bottom: 2px solid #000000;
  }
  .hamburger {
    display: none !important;
    margin-left: 50%;
    position: relative;
    display: inline-block;
    
  }
  nav.hamburger-content li {
    padding: 4px;
    border: 1px solid #c8b082;
    border-radius: 5px;
    background-color: #c8b082;
    margin-bottom: 4px;
  }
  .hamburger a {
    text-decoration: none;
  }

  .hamburger-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    
  }
  #booknowwriting h1{
    color: #c8b082;
    margin-top: 2px;
  }
  #booknowwriting {
    border: 2px solid #000000;
    border-radius: 30px;
    width: 50%;
    margin: auto auto;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 40px;
    padding-top: 20px;
    color: #c8b082
  }
  .hamburger:hover .hamburger-content {
    display: block;
  }

  .topbar {
    background-color: rgba(51, 51, 51, 0.959);
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 29px;
    padding-top: 29px;
    z-index: 400;
    transition: .4s;
    box-shadow: 5px 5px 50px rgb(0, 0, 0);
  }



  #main-menu a {
    visibility:visible;
    box-sizing: border-box;
    float: right;
    
    color: #c8b082;  
    text-align: center;
    padding-top: 0;
    padding: 20px 30px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    text-decoration: none;
  
    
  }


  #main-menu a:hover {
    background: #ddd;
    color: #c8b082;
    
    border-radius: 4px;
  }

  #main-menu #bookbuttontopbar a {
    background: #555555;
    color: white;
    text-align: center;
    padding-top: 0;
    padding: 20px 30px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    text-decoration: none;
    border-radius: 4px;
  }

  .bookmainbutton {

    background: #555555;
    text-align: center;
    margin: 13px auto;
    width: 10%;
    padding: 20px 30px;
    border-radius: 4px;
  }
  
  .bookmainbutton a {
    color: white;
    text-align: center;
    text-decoration: none;
  }

  .firstMain {
  align-content: center; 

  font-family: 'Open Sans';
  padding-top: 1px;
  padding-left: 50px;
  padding-right: 50px;
  }

  .pastdetailslogotop {
    position: inherit;
    
    margin: auto auto;
  }
  section#section1.thirdMain {
    z-index: 600;
    background-color: black;
    margin: auto auto;
    width: 100%;
    text-align: center;
    padding-top: 100px;
    padding-bottom: 50px;
    box-shadow: 5px 5px 40px rgb(0, 0, 0);
  }
  .secondMainBlog {
    z-index: 600;
    background-color: rgba(51, 51, 51, 0.959);
    width: 100%;
    color: white;
    padding-top: 100px;
    padding-bottom: 100px;
    box-shadow: 5px 5px 40px rgb(0, 0, 0);
    justify-content: center;
  }
  .blogContainer {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    width: 90%;
  }
  .galleryContainerBlog {
    width: 70%;
    padding: 20px;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #000000;
  }
  .galleryContainerBlog p {
    padding-top: 20px;
    margin: auto;
    width: 80%;
    padding-left: 30px;
    word-wrap: break-word;
  }
  .galleryContainerBlog ol {
    width: 80%;
    margin: auto;
  }
  .recentPostsContainerBlog {
    margin: auto;
    width: 20%;
  }

  .recentPostsContainerBlog p {
    text-align: center;
    padding-bottom: 20px;
  }
  
  .recentPosts {
    padding: 40px;
    margin: auto;
    display: flex;
    text-align: center;
    flex-direction: column;
    border-radius: 10px;
    border: 2px solid #000000;
    word-wrap: break-word;
  }

  .recentPosts a {
    text-decoration: none;
    color: #c8b082;
  }

  .recentPosts a:hover {
    text-decoration: none;
    color: white;
  }

  .secondMain {
    z-index: 600;
    background-color: rgba(51, 51, 51, 0.959);
    margin: auto;
    width: 100%;
    color: white;
    padding-top: 100px;
    padding-bottom: 100px;
    box-shadow: 5px 5px 40px rgb(0, 0, 0);
  }

  .faqContainer {
    margin: auto;
    display: flex;
    flex-direction: column;
    width: 60%;
  }

  .faqAccordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    border: none;
    outline: none;
    font-size: 15px;
    margin: 20px;
  }
  
  .active, .faqAccordion:hover {
    background-color: #ccc; 
  }
  
  .faqPanel {
    padding: 0 18px;
    display: none;
    overflow: hidden;
  }

  .galleryContainer {
    width: 70%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    justify-content: center;
    border-radius: 10px;
    border: 2px solid #000000;
  }
  .galleryContainer .imgBox img{
    max-width: 100%;
    max-height: 100%;
    height: 350px;
    margin: 20px;
  
  }
  .folioContainer {
    width: 100%;
    position: center;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .folioContainer .box {
    background-color: whitesmoke;
    position: relative;
    width: 300px;
    height: 199px;
    
    margin: 15px;
    box-sizing: border-box;
    display: inline-block;
    box-shadow: 3px 3px 10px rgb(0, 0, 0);
    border-radius: 10px;
  }
  .folioContainer .box .imgBox img{
    max-width: 100%;
    max-height: 100%;
    height: 200px;
    -webkit-transition: .5s; /* Safari */
  -webkit-transition-timing-function: ease-out; /* Safari */
  transition: .5s;
  transition-timing-function: ease-out;
  border-radius: 10px;
  }
  .folioContainer .box:hover .imgBox img{
    opacity: .2;
  }
  
  .folioContainer .box .projectTitle {
    position: absolute;
    top: 50px;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    font-weight: 200;
    -webkit-transition: .5s;
    -webkit-transition-timing-function: ease-in;
    transition: .3s;
    transition-timing-function: ease-in;
    bottom: 40px;
  }
  div.content p {
    font-size: 25px;
  }
  div.content {
    margin: auto;
    text-align: center;
    padding-left: 20px;
    padding-right: 20px;
    color: black;
  }
  div.content2 {
    margin: auto;
  }
  .folioContainer .box:hover .projectTitle {
    opacity: 5;
  }
  .folioContainer .box .projectTitle .content .postDate {
    color: rgb(226, 134, 59);
    padding-top: 10px;
    font-size: 15px;
  }
  
  .folioContainer .box .projectTitle .content2 button {
    background-color: #555555; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  border-radius: 4px;
  
}

.folioContainer .box .projectTitle .content2 button:hover {
  background-color: #9e9e9e;
  color: black;
}
  .thirdsection{
    margin-top: 80px;
  }
  /*contact form*/
  .radiocontainer {
    margin-left: 15%;
  }
  
  label {
    color: rgb(211, 135, 135)
  }
  .contactbox{
    width: 60%;
    margin: auto auto;
    background:rgba(51, 51, 51, 0.801);
    color: #c8b082;
  

    box-shadow: 2px 2px 80px rgb(0, 0, 0);
    border-radius: 60px;
    box-sizing: border-box;
    padding: 5% 5%;
  }


  .contactbox h1{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
  }

  .contactbox p{
    margin: 0;
    padding: 0;
  }
  textarea {
    width: 70%;
    
  }

  .contactbox input {
    width: 50%;
    margin-bottom: 20px;
    font-family: 'Open Sans';
  }

  .contactbox input[type="text"], input[type="email"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    font-family: 'Open Sans';
    color: #c8b082;
    font-size: 16px;
  }

  .contactbox textarea[type="comment"] {
    font-family: 'Open Sans';
    font-size: 16px;
  }
  .contactbox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #000000;
    color: #c8b082;
    font-size: 18px;
    width:25%;
    border-radius: 20px;
  }
  .contactbox input[type="submit"]:hover {
    cursor: pointer;
    background: rgb(226, 134, 59);
    color: #c8b082;
  }

  #lowertext {
    
    font-size: 10px;
    font-family: 'Open Sans';
  }
  /*end contact form*/

  #sectionborder {
    color: #c8b082;
    border: 2px solid #000000;
    border-radius: 30px;
    width: 80%;
    margin: auto auto;
    padding: 20px;
  }

  #sectionborder p {
    margin: 13px auto;
    width: 20%;
    text-align: center;
  }



  li {
    padding-top: 0;
    margin-top: 0;
  }
  .my-picture {
    
    width: 500px;
    margin: auto auto;
    transition: transform .7s;
    
    
  }
  .my-picture:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }

  .my-picture-medium {
        
    display: none !important;
  }

  footer {
    position: absolute;
    padding-bottom: 2rem;
    padding-top: 7rem;
    right: 0;
    left: 0;
    text-align: center;
    color: white;
    text-decoration: none;
    
    background-color: rgba(51, 51, 51, 0.959);
    
  }

  footer a {
    text-decoration: none;
    color: white;
  }
  .copyright {
    color: rgb(126, 145, 218);
    
  }

  .copyright:hover {
    text-decoration: underline;
  }

  .containerbackground {
    position: absolute;
    padding-bottom: 2rem;
    padding-top: 1rem;
    right: 0;
    left: 0;
    text-align: center;
    border-radius: 15px;
    width: 160px;
    height: 5px;
    margin: auto;
    bottom: 125px;
  }
  
  .instalogo {
    position: absolute;

    right: 0;
    left: 0;
    text-align: center;
    height: 100px;
    width: 53px;
    height: 50px;
    margin: auto auto -125px;
    bottom: 128px;
  }
  
  .linkedinlogo {
    position: absolute;

    right: 99px;
    left: 0;
    text-align: center;
    height: 100px;
    width: 35px;
    height: 35px;
    margin: auto auto -125px;
    bottom: 135px;
  }
  
  .githublogo {
    position: absolute;

    right: 0;
    left: 99px;
    text-align: center;
    height: 100px;
    width: 35px;
    height: 35px;
    margin: auto auto -125px;
    bottom: 135px;
  }


  .instalogo:hover {
    opacity: 0.3;
  }
  .linkedinlogo:hover {
    opacity: 0.3;
  }
  .githublogo:hover {
    opacity: 0.3;
  }

  tbody {
    color: white;
    height: 60%;
  }
  .priceCarButton2door {
    transition: transform .7s;
    border: solid white;
    height: 150px;
    margin: 0 auto 10px;
  }
  
  .priceCarButton2door:hover {
    cursor: pointer;
  }
    
    .myClass2door {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
  
    .priceCarButton4door {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
    .priceCarButton4door:hover {
      cursor: pointer;
    }
  
    .myClass4door {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
    .priceCarButtonPickup {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
  
    .priceCarButtonPickup:hover {
      cursor: pointer;
    }
    .myClassPickup {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
    .priceCarButtonSuv {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
  
    .priceCarButtonSuv:hover {
      cursor: pointer;
    }
    .myClassSuv {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
    .priceCarButtonVan {
      transition: transform .7s;
      border: solid white;
      height: 150px;
      margin: 0 auto 10px;
    }
  
    .priceCarButtonVan:hover {
      cursor: pointer;
    }
    .myClassVan {
      border: solid #c8b082;
      -ms-transform: scale(0.9); /* IE 9 */
      -webkit-transform: scale(0.9); /* Safari 3-8 */
      transform: scale(0.9); 
    }
  
    .vehicleSelectorTitle {
      text-align: center;
      margin: auto;
      width: 80%;
      color: white;
    }

    .menulogocontainercarprice {
      display: flex;
      justify-content:center;
      margin: 0;
    }
  
    .menulogocontainercarprice div {
      padding: 10px;
    }
  .menulogocontainer {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15%;
    
  }

  .menucontainer {
    display: flex;
    justify-content: space-around;
    margin-left: 10px;
    margin-bottom: 50px;
  }
  .pastdetailslogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .pastdetailslogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  
  .booknowlogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .booknowlogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  
  .packageslogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .packageslogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  .pastdetails {
    color: white;
  }

  .booknow {
    color: white;
  }

  .packages {
    color: white;
  }
}

@media (min-width: 1700px) {

  body {
    margin: 0;
    font-family: 'Open Sans';
    font-weight: normal;
  }

  html {
    font-family: 'Open Sans';
    font-weight:lighter;
    background-color: #000000;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    margin: 0;
    padding:0;
    height: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
  }



  #outerwrap {
    margin-top: 110px;
  }
  .mainlogo {
    z-index: 500;
    display: block;
    position: fixed;
    float: left;
    height: 150px;
    width: 200px;
    top: -34px;
    left: 5px;
  }
  /*clock styles*/
    div#countdown {
      font-size: 30px;
      margin-bottom: 4%;
      

    }
    div#countdown span {
      color: blue;

    }
    .secondMain p {
      font-size: 20px;

    }
    

  h1 {
    color: white;
    font-size: 50px;
    text-align: center;
    font-family: 'Open Sans';
    font-weight: normal;
    text-transform: none;
    margin-top: 80px;
  }

  #border-bottom {
    margin-left: 30%;
    margin-right: 30%;
    border-bottom: 2px solid #000000;
  }
  .hamburger {
    display: none !important;
    margin-left: 50%;
    position: relative;
    display: inline-block;
    
  }
  .hamburger a {
    text-decoration: none;
  }

  .hamburger-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
    
  }
  #booknowwriting h1{
    color: #c8b082;
    margin-top: 2px;
  }
  #booknowwriting {
    border: 2px solid #000000;
    border-radius: 30px;
    width: 50%;
    margin: auto auto;
    padding-left: 5%;
    padding-right: 5%;
    padding-bottom: 40px;
    padding-top: 20px;
    color: #c8b082
  }
  .hamburger:hover .hamburger-content {
    display: block;
  }

  .topbar {
    background-color: rgba(51, 51, 51, 0.959);
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    padding-bottom: 29px;
    padding-top: 29px;
    z-index: 400;
    transition: .1s;
    box-shadow: 5px 5px 50px rgb(0, 0, 0);
  }



  #main-menu a {
    visibility:visible;
    box-sizing: border-box;
    float: right;
    
    color: #c8b082;  
    text-align: center;
    padding-top: 0;
    padding: 20px 30px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    text-decoration: none;
  
    
  }


  #main-menu a:hover {
    background: #ddd;
    color: #c8b082;
    
    border-radius: 4px;
  }

  #main-menu #bookbuttontopbar a {
    background: #555555;
    color: white;
    text-align: center;
    padding-top: 0;
    padding: 20px 30px;
    padding-bottom: 20px;
    margin-right: 20px;
    margin-top: 0;
    text-decoration: none;
    border-radius: 4px;
  }

.bookmainbutton {

  background: #555555;
  text-align: center;
  margin: 13px auto;
  width: 10%;
  padding: 20px 30px;
  border-radius: 4px;
}

.bookmainbutton a {
  color: white;
  text-align: center;
  text-decoration: none;
}

  .firstMain {
  align-content: center; 

  font-family: 'Open Sans';
  padding-top: 1px;
  padding-left: 50px;
  padding-right: 50px;
  }

  .pastdetailslogotop {
    position: inherit;
    
    margin: auto auto;
  }
  
section#section1.thirdMain {
  z-index: 600;
  background-color: black;
  margin: auto auto;
  width: 100%;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 50px;
  box-shadow: 5px 5px 40px rgb(0, 0, 0);
}

.secondMainBlog {
  z-index: 600;
  background-color: rgba(51, 51, 51, 0.959);
  width: 100%;
  color: white;
  padding-top: 100px;
  padding-bottom: 100px;
  box-shadow: 5px 5px 40px rgb(0, 0, 0);
  justify-content: center;
}
.blogContainer {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
}
.galleryContainerBlog {
  width: 70%;
  padding: 20px;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #000000;
}
.galleryContainerBlog p {
  padding-top: 20px;
  margin: auto;
  width: 80%;
  padding-left: 30px;
  word-wrap: break-word;
}
.galleryContainerBlog ol {
  width: 80%;
  margin: auto;
}


.recentPostsContainerBlog {
  margin: auto;
  width: 20%;
}

.recentPostsContainerBlog p {
  text-align: center;
  padding-bottom: 20px;
}

.recentPosts {
  padding: 40px;
  margin: auto;
  display: flex;
  text-align: center;
  flex-direction: column;
  border-radius: 10px;
  border: 2px solid #000000;
  word-wrap: break-word;
}

.recentPosts a {
  text-decoration: none;
  color: #c8b082;
}

.recentPosts a:hover {
  text-decoration: none;
  color: white;
}

.secondMain {
  z-index: 600;
  background-color: rgba(51, 51, 51, 0.959);
  margin: auto;
  width: 100%;
  color: white;
  padding-top: 100px;
  padding-bottom: 100px;
  box-shadow: 5px 5px 40px rgb(0, 0, 0);
}

.faqContainer {
  margin: auto;
  display: flex;
  flex-direction: column;
  width: 60%;
}

.faqAccordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  border: none;
  outline: none;
  font-size: 15px;
  margin: 20px;
}

.active, .faqAccordion:hover {
  background-color: #ccc; 
}

.faqPanel {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}

.galleryContainer {
  width: 70%;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #000000;
}
.galleryContainer .imgBox img{
  max-width: 100%;
  max-height: 100%;
  height: 350px;
  margin: 20px;

}

.folioContainer {
  width: 100%;
  position: center;
  margin: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.folioContainer .box {
  background-color: whitesmoke;
  position: relative;
  width: 300px;
  height: 199px;
  
  margin: 15px;
  box-sizing: border-box;
  display: inline-block;
  box-shadow: 3px 3px 10px rgb(0, 0, 0);
  border-radius: 10px;
}
.folioContainer .box .imgBox img{
  max-width: 100%;
  max-height: 100%;
  height: 200px;
  -webkit-transition: .5s; /* Safari */
-webkit-transition-timing-function: ease-out; /* Safari */
transition: .5s;
transition-timing-function: ease-out;
border-radius: 10px;
}
.folioContainer .box:hover .imgBox img{
  opacity: .2;
}

.folioContainer .box .projectTitle {
  position: absolute;
  top: 50px;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  font-weight: 200;
  -webkit-transition: .5s;
  -webkit-transition-timing-function: ease-in;
  transition: .3s;
  transition-timing-function: ease-in;
  bottom: 40px;
}
div.content p {
  font-size: 25px;
}
div.content {
  margin: auto;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
  color: black;
}
div.content2 {
  margin: auto;
}
.folioContainer .box:hover .projectTitle {
  opacity: 5;
}
.folioContainer .box .projectTitle .content .postDate {
  color: rgb(226, 134, 59);
  padding-top: 10px;
  font-size: 15px;
}

.folioContainer .box .projectTitle .content2 button {
  background-color: #555555; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
border-radius: 4px;

}

.folioContainer .box .projectTitle .content2 button:hover {
background-color: #9e9e9e;
color: black;
}

  .thirdsection{
    margin-top: 80px;
  }
  /*contact form*/
  .radiocontainer {
    margin-left: 15%;
  }
  
  label {
    color: rgb(211, 135, 135)
  }
  .contactbox{
    width: 60%;
    margin: auto auto;
    background:rgba(51, 51, 51, 0.801);
    color: #c8b082;
  

    box-shadow: 2px 2px 80px rgb(0, 0, 0);
    border-radius: 60px;
    box-sizing: border-box;
    padding: 5% 5%;
  }


  .contactbox h1{
    margin: 0;
    padding: 0 0 20px;
    text-align: center;
    font-size: 22px;
  }

  .contactbox p{
    margin: 0;
    padding: 0;
  }
  textarea {
    width: 70%;
    
  }

  .contactbox input {
    width: 50%;
    margin-bottom: 20px;
    font-family: 'Raleway', sans-serif;
  }

  .contactbox input[type="text"], input[type="email"] {
    border: none;
    border-bottom: 1px solid #fff;
    background: transparent;
    outline: none;
    height: 40px;
    font-family: 'Open Sans';
    color: #c8b082;
    font-size: 16px;
  }

  .contactbox textarea[type="comment"] {
    font-family: 'Open Sans';
    font-size: 16px;
  }
  .contactbox input[type="submit"] {
    border: none;
    outline: none;
    height: 40px;
    background: #000000;
    color: #c8b082;
    font-size: 18px;
    width:25%;
    border-radius: 20px;
  }
  .contactbox input[type="submit"]:hover {
    cursor: pointer;
    background: rgb(226, 134, 59);
    color: #c8b082;
  }

  #lowertext {
    
    font-size: 10px;
    font-family: 'Open Sans';
  }
  /*end contact form*/

  #sectionborder {
    color: #c8b082;
    border: 2px solid #000000;
    border-radius: 30px;
    width: 80%;
    margin: auto auto;
    padding: 20px;
  }

  #sectionborder p {
    margin: 13px auto;
    width: 20%;
    text-align: center;
  }



  li {

    padding-top: 0;
    margin-top: 0;
  }
  .my-picture {
    
    width: 500px;
    margin: auto auto;
    transition: transform .7s;
    
    
  }
  .my-picture:hover {
    -ms-transform: scale(1.5); /* IE 9 */
    -webkit-transform: scale(1.5); /* Safari 3-8 */
    transform: scale(1.5); 
  }

  .my-picture-medium {
        
    display: none !important;
  }

  footer {
    position: absolute;
    padding-bottom: 2rem;
    padding-top: 7rem;
    right: 0;
    left: 0;
    text-align: center;
    color: white;
    text-decoration: none;
    
    background-color: rgba(51, 51, 51, 0.959);
    
  }

  footer a {
    text-decoration: none;
    color: white;
  }
  .copyright {
    color: rgb(126, 145, 218);
    
  }

  .copyright:hover {
    text-decoration: underline;
  }

  .containerbackground {
    position: absolute;
    padding-bottom: 2rem;
    padding-top: 1rem;
    right: 0;
    left: 0;
    text-align: center;
    border-radius: 15px;
    width: 160px;
    height: 5px;
    margin: auto;
    bottom: 125px;
  }
  
  .instalogo {
    position: absolute;

    right: 0;
    left: 0;
    text-align: center;
    height: 100px;
    width: 53px;
    height: 50px;
    margin: auto auto -125px;
    bottom: 128px;
  }
  
  .linkedinlogo {
    position: absolute;

    right: 0;
    left: 0;
    text-align: center;
    height: 100px;
    width: 35px;
    height: 35px;
    margin: auto auto -125px;
    bottom: 135px;
  }
  
  .githublogo {
    position: absolute;

    right: 0;
    left: 99px;
    text-align: center;
    height: 100px;
    width: 35px;
    height: 35px;
    margin: auto auto -125px;
    bottom: 135px;
  }


  .instalogo:hover {
    opacity: 0.2;
  }
  .linkedinlogo:hover {
    opacity: 0.2;
  }
  .githublogo:hover {
    opacity: 0.2;
  }
  .vehicleSelectorTitle {
    text-align: center;
    margin: auto;
    width: 80%;
    color: white;
  }

tbody {
  color: white;
}
.priceCarButton2door {
  transition: transform .7s;
  border: solid white;
  height: 150px;
  margin: 0 auto 10px;
}

.priceCarButton2door:hover {
  cursor: pointer;
}
  
  .myClass2door {
    border: solid #c8b082;
    -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari 3-8 */
    transform: scale(0.9); 
  }

  .priceCarButton4door {
    transition: transform .7s;
    border: solid white;
    height: 150px;
    margin: 0 auto 10px;
  }
  .priceCarButton4door:hover {
    cursor: pointer;
  }

  .myClass4door {
    border: solid #c8b082;
    -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari 3-8 */
    transform: scale(0.9); 
  }
  .priceCarButtonPickup {
    transition: transform .7s;
    border: solid white;
    height: 150px;
    margin: 0 auto 10px;
  }

  .priceCarButtonPickup:hover {
    cursor: pointer;
  }
  .myClassPickup {
    border: solid #c8b082;
    -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari 3-8 */
    transform: scale(0.9); 
  }
  .priceCarButtonSuv {
    transition: transform .7s;
    border: solid white;
    height: 150px;
    margin: 0 auto 10px;
  }

  .priceCarButtonSuv:hover {
    cursor: pointer;
  }
  .myClassSuv {
    border: solid #c8b082;
    -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari 3-8 */
    transform: scale(0.9); 
  }
  .priceCarButtonVan {
    transition: transform .7s;
    border: solid white;
    height: 150px;
    margin: 0 auto 10px;
  }

  .priceCarButtonVan:hover {
    cursor: pointer;
  }
  .myClassVan {
    border: solid #c8b082;
    -ms-transform: scale(0.9); /* IE 9 */
    -webkit-transform: scale(0.9); /* Safari 3-8 */
    transform: scale(0.9); 
  }

    .menulogocontainercarprice {
      display: flex;
      justify-content:center;
      margin: 0;
    }
  
    .menulogocontainercarprice div {
      padding: 10px;
    }
  .menulogocontainer {
    display: flex;
    justify-content: space-around;
    margin-bottom: 15%;
    
  }


  .menucontainer {
    display: flex;
    justify-content: space-around;
    margin-left: 10px;
    margin-bottom: 50px;
  }
  .pastdetailslogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .pastdetailslogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  
  .booknowlogo {
        
  
    transition: transform .7s;
    width: 150px;
    height: 150px;
    margin: 0 auto;
        }
        .booknowlogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

        .content2 button {
          background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 16px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 20px;
        -webkit-transition-duration: 0.4s; /* Safari */
        transition-duration: 0.4s;
        cursor: pointer;
        border-radius: 4px;
        
      }
      .content2 button {
        background-color: #555555;
        border: 2px solid #555555;
        left: 20px;
      }
      .content2 button:hover {
        color: black;
        background-color: white;
      }
  
  .packageslogo {
        
  
    transition: transform .7s;
    width: 200px;
    height: 200px;
    margin: 0 auto;
        }
        .packageslogo:hover {
          -ms-transform: scale(1.5); /* IE 9 */
          -webkit-transform: scale(1.5); /* Safari 3-8 */
          transform: scale(1.5); 
        }

  .pastdetails {
    color: white;
  }

  .booknow {
    color: white;
  }

  .packages {
    color: white;
  }
}