/*---------------- Everything --------------------*/





*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}



body {
    font-family: 'Alegreya', serif;
    font-size: 1.3em;
    opacity: 1;
    transition: 1s opacity;
}



body.fade-out {
    opacity: 0;
    transition: none;
}









/*---------------- Layout --------------------*/




.container {
  display: grid;
  grid-template-areas:
'top'
'grey'
'content'
'grey2'
'footer';
 grid-template-rows: 350px 30px auto 30px 325px;
}


/*has no grey bars*/

.container2 {
  display: grid;
  grid-template-areas:
'top'
'content'
'footer';
 grid-template-rows: 350px auto 325px;
}





.top {
  grid-area: top;
  display: grid;
  grid-template-areas: 'title' 'menu';
  justify-content: center;
  align-content: center;
  grid-gap: 15px;
  z-index: 2;
  background-color: #fff;
}





.content {
  grid-area: content;
  display: grid;
  margin: 0;
  justify-content: center;
  align-content:center;
  position:relative;
  z-index: 1;
  text-align: center;
  background-color: #efefef;
  width: 100%;
}




.footer {
  grid-area: footer;
  display: grid;
  grid-template-areas: 'location' 'contact';
  justify-content: center;
  align-content: center;
  text-align: center;
  font-family: 'Source Sans Pro', sans-serif;
  padding:8% 0 8.5% 0;
  color: #333;
  word-spacing: 1px;
  grid-gap: 15px;
  background-color: #fff;
}



.grey {
  background-color: #ababab;
  grid-area: grey;
  height:30px;
}


.grey2 {
  background-color: #ababab;
  grid-area: grey2;
}







/* -------------------- Links -------------------- */


a img {
    border:none;
    outline:none;
}


a:link {
    text-decoration: none;
    color: grey;
    border:none;
    outline:none;

}

a:visited {
    text-decoration: none;
    color: grey;
}

a:hover {
    text-decoration: none;
    color: #444;
    font-weight: bold;
}

a:active {
    text-decoration: none;
    color: black;
}

.current {
    color: #444;
    font-weight: bold;
    text-decoration: underline;
}


a.contactLink {
    color: #000;
    font-weight: bold;
}

a.contactLink:hover {
    color: #444;
}





a.normal:link {
    text-decoration: none;
    color: #000;
    font-weight: bold;

}

a.normal:visited {
    text-decoration: none;
    color: black;
}

a.normal:hover {
    text-decoration: none;
    color: #555;
    font-weight: bold;
}

a.normal:active {
    text-decoration: none;
    color: black;
}









a.rise:link {
    text-decoration: none;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    font-weight: normal;
    text-shadow: 2px 2px 2px #000;
}

a.rise:visited {
    text-decoration: none;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    font-weight: normal;
}


a.rise:hover {
    text-decoration: none;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    font-weight: normal;
}


a.rise:active {
    text-decoration: none;
    color: #fff;
    background-color: transparent;
    font-weight: normal;
}










.dropdown {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 100px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    text-transform: none;
    margin-top:60px;
    font-weight: normal;
}

.dropdown-content a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}





a.phone:link {
    text-decoration: none;
    color: #444;
    border:none;
    outline:none;

}

a.phone:visited {
    text-decoration: none;
    color: #444;
}

a.phone:hover {
    text-decoration: none;
    color: grey;
    font-weight: bold;
}

a.phone:active {
    text-decoration: none;
    color: #444;
}


/*---------------- Top of Page --------------------*/




.title {
  grid-area: title;
  display: grid;
  justify-content: center;
  align-content: center;
  text-align:center;
}


.menu {
  grid-area: menu;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 25px;
  display: grid;
  justify-content: center;
  align-content: center;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  padding:2px;
}





.logo
 {
    width: 70%;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 102px;
}










/*---------------- Home Page --------------------*/








.containerHome {
  display: grid;
  height: 100vh;
  grid-template-areas:
'menu1 menu1'
'grey1 grey1'
'top1 top1'
'grey grey'
'pics pics'
'footer footer';
 grid-template-rows: 13% 4% 80% 4% auto 10%;
}







.menu1 {
  grid-area: menu1;
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-gap: 50px;
  justify-content: center;
  align-content: center;
  text-transform: uppercase;
  font-size: 1em;
  font-family: 'Source Sans Pro', sans-serif;
  z-index:2;
  padding:20px;
  width: 100%;
  background-color: #fff;
  position: fixed;
}







.submenu {
  display: grid;
  justify-content: center;
  align-content: center;
}





.top1 {
  grid-area: top1;
  display: grid;
  justify-content: center;
  align-content: center;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  grid-gap: 10px;
  overflow: hidden;
  background-color: #ababab;
}






.grey1 {
  grid-area: grey1;
  display: grid;
  background-color: #efefef;
}







.pics_row1 {
  background-color: #efefef;
  grid-area: pics;
  grid-gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)  );
  justify-content: space-evenly;
  align-content: center;
  margin-bottom:50px;
  padding:50px 0 50px 0;
}



.overlap {
  display: grid;
  grid-column: 1;
  grid-row: 1;
  justify-content: center;
  align-content: center;
}


.rise {
z-index:1;
color: #fff;
font-size: 2em;

}









.topping
 {
    display: grid;
    position: relative;
    align-content: center;
    width: 100%;
    min-width:800px;
    overflow: hidden;
    grid-area: 1 / 1 / 2 / 2;
}



.videoWrapper {
    position: relative;
}


.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.heading
    {
    grid-area: 1 / 1 / 2 / 2;
  display: grid;
  justify-content: center;
  align-content: center;
}



.over
    {
    z-index: 1;
    width:100%;
    min-width:500px;
}



.titlesize
    {
    width:100%;
    padding:50px;
}






video.loading {
  background: black url(/images/loader.gif) no-repeat center center;
}









/*  ----------------- Films ----------------------*/



.white {
  margin:100px 0 100px 0;
  max-width: 70vw;
  min-width: 700px;
}



.responsive_vid {
  position:relative;
  padding:56.25% 0 0 0;
}



.button2
    {
    display:grid;
    justify-content: center;
    color: #fff;
    font-weight: normal;
    padding:20px;
    margin: 70px 40% 0 40%;
    min-width: 175px;
    background-color: #888;
    border-radius: 3px;
    text-align: center;
    -webkit-transition: background-color 0.5s;
}

.button2:hover {
    background-color:#aaa;
    font-weight: normal;
}






/*  ----------------- Photos ----------------------*/





.gallery
 {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)  );
  justify-content: space-evenly;
  align-content: center;
  width: 90vw;
  padding:100px 2% 100px 2%;
}




.block
 {
    min-width: 200px;
    margin: 2%;
    border-style: none;
    display:inline-block;
}



.round
{
  border-radius: 3px;}







.pics_row {
  background-color: #efefef;
  grid-area: pics;
  grid-gap: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)  );
  justify-content: space-evenly;
  align-content: center;
  margin-bottom:50px;
  padding:50px 0 50px 0;
}




/*  ----------------- Info ----------------------*/




.info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)  );
  justify-content: center;
  align-content: center;
  grid-gap: 20px;
  width: 90vw;
  padding:6.75% 5% 6.75% 5%;
}



.pics {
  display: grid;
  justify-content: center;
  grid-template-areas: 1fr;
}




.textblock {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 50px;
  margin: 50px;
  min-width: 500px;
  border-radius: 3px;
}







/*  ----------------- About ----------------------*/




.about {
 display: grid;
 background-image: url("images/yellow.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 background-position:100% 30%;
 justify-content: center;
 align-content: center;
 grid-template-columns: 1fr 1fr;
}



.textblock1 {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 50px;
  margin: 150px;
  min-width: 500px;
  border-radius: 3px;
  text-align: left;
}



.mid {
  text-align: center;
}



/*  ----------------- Reviews ----------------------*/







.reviews {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  background-image: url("images/bow.jpg");
  background-size: cover;
  background-position: center top;
  background-attachment:fixed;
  background-repeat: no-repeat;
  padding: 6% 0 13% 0;
  justify-content: center;
  align-content: center;
  z-index: -10;
}





.quote {
    font-family: 'Alegreya', serif;
    font-size: 1.2em;
}

.by {
    font-family: 'Alegreya', serif;
    margin: 10px;
    font-size: 1.2em;
    color: #000;
    font-weight: bold;
}



.textblock2 {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 50px;
  min-width: 500px;
  border-radius: 3px;
}






/*  ----------------- Pricing ----------------------*/






.pricing {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 background-image: url("images/purple.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 background-position: top center;
 justify-content: center;
 align-content: center;
 padding: 50px;
}





/*  ----------------- Contact ----------------------*/




.contactBlock {
 display: grid;
 grid-template-columns: 1fr 2fr 1fr;
 background-image: url("images/hold.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 background-position: top center;
 justify-content: center;
 align-content: center;
 padding: 50px;
}



.textblock3 {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 100px;
  margin: 50px;
  min-width: 500px;
  border-radius: 3px;
}


/* ---------------- Footer ----------------------- */




.contact
 {
    grid-area: contact;
    font-size: .9em;
    color: #333;
}



.location
 {
    grid-area: location;
    padding-top: 5px;
}



.icon
 {
    width: 35px;
    opacity: .45;
}



.icon:hover {
  opacity: .7;
}


/* ---------------- Mobile ----------------------- */



.M
 {
  display: none;
}




/*  ----------------- Laptop ----------------------*/



@media only all and (max-width: 1080px)

   {

     .title {
      display:none;
     }

     .container {
       display: grid;
       grid-template-areas:
     'top'
     'grey'
     'content'
     'grey2'
     'footer';
      grid-template-rows: auto 30px auto 30px 325px;
     }

     .container2 {
       display: grid;
       grid-template-areas:
     'top'
     'content'
     'footer';
      grid-template-rows: auto auto 325px;
     }


    .top{
    padding:25px;
    }


     .sticky {
       position: relative;
     }

     .menucase {
       grid-area: menucase;
       display: grid;
       grid-template-areas: 'menu' 'culur';
     }


/*  ------ LT home page-------*/

.menu1 {
  position:  fixed;
}


   }