/*
  Name: Studio Le Fort
  Date: October 2024
  Description: Studio Le Fort
  Version: 8.0
  Author: Mike Smith
*/

/**********  IMPORTS  **********/


/**********  FONTS  **********/


/**********  GLOBAL  **********/

* {
  margin: 0;
  padding: 0;
}

html,body {
  height: auto;
  height: 100%;
  min-height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: Open Sans, sans-serif;
  font-size: 18px;

  font-family: 'Fauna One', serif;
  font-size: 16px;  

  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 24px;
}

footer {
  color: #555555;
}

h1 {
  font-family: Cormorant, sans-serif;
  font-size: 64px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 76px;
  letter-spacing: 0.15em;
  color: #eeeeee;
  text-align: center;
}

h2 {
  font-family: Forum,serif;
  font-size: 36px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 46px;
  color: #aa7c2d;
  text-align: center;
}

h3 {
  font-family: Forum,serif;
  font-size: 20px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 26px;
}

h4 {
  font-family: Forum,serif;
  font-size: 24px;
  font-style: bold;
  font-variant: normal;
  font-weight: 900;
  line-height: 36px;
  color: #aa7c2d;
}

p {
  font-family: Forum,serif;
  font-size: 18px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 24px;
}

blockquote {
  font-family: Open Sans, sans-serif;
  font-size: 21px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 30px;
}

pre {
  font-family: Open Sans, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 18.5667px;
}

img {
  display: block;
}

header {
  background-color: #ffffff;
}

.responsive {
  width: 100%;
  height: auto;
}

.icons{
    display:inline-block;
    width: 50px; 
    height: 46px; 
   }

table {
  font-family: Open Sans, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;

  font-size: 100%;
  font-family: Open Sans, sans-serif;
  font-size: 18px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 20px;
}

th {
  font-size: 26px;
  font-style: bold;
  font-variant: normal;
  font-weight: 500;
  line-height: 42px;
}
 
table.foot {
  padding: 0px; 
  border: 0px;
}


A         {color: #333333; font-size: 100%; font-family: Open Sans, sans-serif; font-size: 18px; line-height: 24px; font-style: normal; font-variant: normal; font-weight: 400; TEXT-DECORATION: none; border: 0;}
A:link    {COLOR: #333333; font-size: 100%; font-family: Open Sans, sans-serif; font-size: 18px; line-height: 24px; font-style: normal; font-variant: normal; font-weight: 400; TEXT-DECORATION: none; border: 0;}
A:visited {COLOR: #333333; font-size: 100%; font-family: Open Sans, sans-serif; font-size: 18px; line-height: 24px; font-style: normal; font-variant: normal; font-weight: 400; TEXT-DECORATION: none; border: 0;}
A:active  {COLOR: #333333; font-size: 100%; font-family: Open Sans, sans-serif; font-size: 18px; line-height: 24px; font-style: normal; font-variant: normal; font-weight: 400; TEXT-DECORATION: none; border: 0;}
A:hover   {COLOR: #aa7c2d; font-size: 100%; font-family: Open Sans, sans-serif; font-size: 18px; line-height: 24px; font-style: normal; font-variant: normal; font-weight: 400; TEXT-DECORATION: none; border: 0;}




/**********  MAIN BODY  **********/

div.indexwrap {
  position: relative;
  margin: 0px auto;
  top: 0px;
  text-align: top;
  width: 100%;
  background-color: #ffffff; 
}

div.textblackwrap {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #000000; 
}

div.textwhitewrap {
  position: relative;
  top: 0;
  width: 100%;
  background-color: #ffffff; 
  z-index: 0;
}

div.h20 {
  position: relative;
  top: 0;
  height: 20px; 
}

div.h50 {
  position: relative;
  top: 0;
  height: 50px; 
}

div.h100 {
  position: relative;
  top: 0;
  height: 100px; 
}

div.port_img {
  height: auto;
  float: left;
  background-color: #000000; 
  margin-left:   10%;
  margin-right:  10%;

  padding-top: 30px;
  padding-bottom: 30px;
}

div.srv_left {
  margin-left:  10%;
  margin-right: 10%;
  margin-top: 50px;
  margin-bottom: 50px;
  color: #aa7c2d;
}

div.srv_right {
  margin-right: 10%;
  margin-top: 50px;
  margin-bottom: 50px;
}

div.srv_img {
  background-color: #000000; 
  margin-left:  10%;
  margin-right: 10%;
}

div.srv_tit {
  background-color: #000000; 
  margin-left:  10%;
  margin-right: 10%;
  margin-top: 20px;
  color: white;
  font-family: Forum,serif;
  font-style: normal;
  font-variant: normal;
  font-size: 46px;
  font-weight: 400;
  line-height: 56px;
  text-align: center;
}

div.srv_txt {
  background-color: #000000; 
  margin-left:  10%;
  margin-right: 10%;
  margin-top: 10px;
  color: white;
  font-family: Forum,serif;
  font-style: normal;
  font-variant: normal;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

div.srv_lst {
  background-color: #000000; 
  margin-left:  20%;
  margin-right: 20%;
  margin-top: 10px;
  margin-bottom: 50px;
  color: white;
  font-family: Forum,serif;
  font-style: normal;
  font-variant: normal;
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
}

/**********  CENTER VERTICALLY  **********/

.vcontainer {
  height: 200px;
  position: relative;

}

.vcenter {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  color: #ffffff;
}



/**********  SIDE NAV - STATIC  **********/

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #222;
  background: rgba(0, 0, 0, 0.3);
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  color: #ffffff;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #aa7c2d;
}


.sidenav a.derek{
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-family: Open Sans, sans-serif;
  font-size: 14px;
  color: #ff0000;
  display: block;
  transition: 0.3s;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#main {
  transition: margin-left .5s;
  padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 14px;}
}

.btn_menu {
  overflow: hidden;
  position: fixed;
  top: 30px;
  left: 30px;
}


/**********  TOP NAV - STATIC **********/

.navbar {
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  font-size: 14px;
  z-index: 998;
}

.navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 24px 12px;
  text-decoration: none;
  font-size: 14px;
}

.navbar a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #aa7c2d;
}

.topmenuleft {
  padding: 24px 100px;
}

.topmenuright {
  float: right;
}

/*Clearfix needed to keep images within the DIV it is contained in...*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/**********  SLIDESHOW FADE  **********/

* {box-sizing: border-box;}
body {font-family: Open Sans, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/**********  ZOOM IMAGE  **********/

.zoom {
  background-color: white;
  transition: transform .2s;
  margin: 0 auto;
  width: 90%;
  text-align: center;
}

.zoom img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
}

.zoom:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

/**********  PARALLEX  **********/


.pximg_1, .pximg_2, .pximg_3 {
  position: relative;
  opacity: 0.75;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}
.pximg_1 {
  background-image: url("./images/parallax_globe_sm.jpg");
  min-height: 100%;
}

.pximg_2 {
  background-image: url("./images/parallax_eb.jpg");
  min-height: 400px;
}

.pximg_3 {
  background-image: url("./images/parallax_cm.jpg");
  min-height: 400px;
}


.pxtext {
  font-family: Forum,serif;
  font-size: 62px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 74px;
  letter-spacing: 0.15em;
  color: #fff;
  text-align: center;
}

.pxtextsm {
  font-family: Forum,serif;
  font-size: 26px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: 0.15em;
  color: #fff;
  text-align: center;
}

.caption {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  color: #000;
}

.caption span.captionborder {
  background-color: #111;
  color: #f7f7f7;
  padding: 18px;
  font-family: Forum,serif;
  font-size: 26px;
  letter-spacing: 10px;
}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1024px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
  }
}

/**********  OVERLAY  **********/

.overlayouter {
  position: relative;
  width: 100%;
}

.overlayimage {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.overlayouter:hover .overlay {
  opacity: 0.7;
}

.overlaytext {
  color: white;
  font-family: Forum,serif;
  font-size: 46px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 56px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
}

.overlaytext2 {
  color: white;
  font-family: Forum,serif;
  font-size: 32px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 36px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
}



/**********  BLOCKOVERLAY  **********/

.blockovercontainer {
  position: relative;
  font-family: Forum,serif;
}

.blockovertext {
  position: absolute;
  bottom: 20px;
  right: 20px;
  color: black;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-family: Forum,serif;
  font-size: 20px;
}

.btn {
  border: none;
  background-color: #aa7c2d;
  color: white;
  padding: 7px 14px;
  font-size: 1em;
  font-family: Forum,serif;
  cursor: pointer;
}

.info {
  border-color: #000000;
  color: #000000;
}

.info:hover {
  background: white;
  color: black;
}



/**********  MODAL BACKGROUND  **********/


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #dddddd;
  padding-top: 50px;
}

/* Modal Content/Box */
.modal-content {
  background-color: #333333;
  margin: 10% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid #888;
  width: 60%; /* Could be more or less, depending on screen size */
}

/* Style the horizontal ruler */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
 
/* The Modal Close Button (x) */
.close {
  position: absolute;
  right: 22%;
  top: 26%;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}



/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}



/**********  QUARTER THIRD HALF TWOTHIRD THREEQUARTER  **********/

.w3-container:after,.w3-container:before,.w3-row:after,.w3-row:before{content:"";display:table;clear:both}
.w3-half,.w3-third,.w3-thirdmod,.w3-twothird,.w3-threequarter,.w3-quarter,.w3-fifth{float:left;width:100%}
.w3-paddall {padding:12px}


@media only screen and (max-width: 768px) {
.w3-third{width:100%}
.w3-twothird{width:100%}
.w3-fifth{width:100%}
}

@media only screen and (min-width: 768px) {
.w3-fifth{display: block;}
}

@media only screen and (min-width: 992px) {
.w3-fifth{display: block;}
.w3-fifth{width:20%}
.w3-quarter{width:24.99999%}
.w3-third{width:33.3333333333%}
.w3-half{width:49.99999%}
.w3-twothird{width:66.66666666666%}
.w3-threequarter{width:74.99999%}
}

.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-fifth,.w3-row-padding>.w3-col{padding:0 8px}


/**********  MEDIA RESIZE FOR MOBILE  **********/

.w3-thirdmob{float:left;width:33.3333333333%;}

@media only screen and (min-width: 992px) {
.screenMob{display: none;}
.topmenuiconhide{display: none;}
}

@media only screen and (max-width: 992px) {
.topmenurightinner{display: none;}
.screenComp{display: none;}
.screenMob{display: block;}

h1 {font-family: Cormorant, sans-serif; font-size: 36px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 46px; color: #717171; text-align: center;}
h2 {font-family: Cormorant, sans-serif; font-size: 26px; font-style: normal; font-variant: normal; font-weight: 400; line-height: 36px; color: #717171; text-align: center;}

.pxtext { font-size: 26px; line-height: 26px;}
.caption span.captionborder {padding: 12px; font-size: 15px; letter-spacing: 5px;}



}






/**********  FOOTER  **********/




/**********  LINKS  **********/

	


/**********  PALETTE  **********/


.cellback {
  background-color: #370007;  
}

.cellbackold {
  background-color: #370007;  
}

.celllogo {
  background-color: #b79050;  
}

.celllogo {
  background-color: #dab172;  
}

.celltextmain {
  background-color: #d1d1d1;  
}

.celltextlink {
  background-color: #b79050;  
}