@font-face {
    font-family: "Optima";
    src: url("../fonts/Optima-Regular.ttf");
}
@font-face {
    font-family: "Baskerville";
    src: url("../fonts/BaskervilleMTStd-Regular.otf");
}
@font-face {
    font-family: "Baskerville Bold";
    src: url("../fonts/BaskervilleMTStd-Bold.otf");
}
@font-face {
    font-family: "Baskerville BoldItalic";
    src: url("../fonts/BaskervilleMTStd-BoldIt.otf");
}
@font-face {
    font-family: "Baskerville Italic";
    src: url("../fonts/BaskervilleMTStd-Italic.otf");
}
@font-face {
    font-family: "Baskerville SemiBold";
    src: url("../fonts/BaskervilleMTStd-SemiBd.otf");
}
@font-face {
    font-family: "Baskerville SemiBoldItalic";
    src: url("../fonts/BaskervilleMTStd-SemiBdIt.otf");
}
html{
  font-size: 16px;
}


body{
  background: #000;
}
*, *::after, *::before {
  font-family: Baskerville;
  color: #fff;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome and Opera */
  -webkit-user-drag: none;
  -webkit-app-region: no-drag;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
input, input::after, input::before {
  -webkit-touch-callout: initial; /* iOS Safari */
  -webkit-user-select: initial; /* Safari */
   -khtml-user-select: initial; /* Konqueror HTML */
     -moz-user-select: initial; /* Firefox */
      -ms-user-select: initial; /* Internet Explorer/Edge */
          user-select: initial; /* Non-prefixed version, currently
                                supported by Chrome and Opera */
  -webkit-user-drag: initial;
  -webkit-app-region: initial;
  -webkit-user-drag: initial;
  -khtml-user-drag: initial;
  -moz-user-drag: initial;
  -o-user-drag: initial;
  user-drag: initial;
}
img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}
h1,h2,h3{
  font-family: Optima;
  color: #fff;
}
h4,h5,h6{
  font-family: Baskerville Bold;
  color: #fff;
}
li{
  list-style-type: none;
}
hr{
  border: 1px solid #938057;
}
a{
  color: #938057;
}
a:hover{
  text-decoration: none;
}
a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}
.hidden{
  display: none !important;
}
button:active, button:focus {
  outline: 0;
  background: none;
}
button{
  background: none;
  border-radius: 10rem;
  font-size: 0.8rem;
  border: 1px solid #938057;
  padding: 0.2rem 0.6rem;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  white-space: nowrap;
}
button.small{
  padding: 0.1rem 1.25rem;
  font-size: 1rem;
}
button img{
  height: 0.5rem;
  top: -0.15rem;
  position: relative;
  width: auto;
}
button.float-left img{
  margin-right: 10px;
}
button.float-right img{
  margin-left: 10px;
}
button:not(:focus):hover {
  cursor: pointer;
  background: #938057;
}


.NextPrevContainer{
  height: 2rem;
  float: right;
  overflow: hidden;
  padding: 3px;
  z-index: 10;
}
.NextPrevContainer div{
  width: 2rem;
  height: 100%;
  float: right;
  position: relative;
}
.NextPrevContainer img{
  position: absolute;
  display: block;
  height: 100%;
  right: 0;
  opacity: 1;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
  border-radius: 50%;
  background: #93805700;
}
.NextPrevContainer div.disabled img{
  opacity: 0.3 !important;
  background: #93805700 !important;
}
.NextPrevContainer .btnNext.disabled{
  left: 0 !important;
}
.NextPrevContainer .btnPrev.disabled{
  right: 0 !important;
}
.NextPrevContainer .btnNext{
  margin-left: 30px;
}
.NextPrevContainer .btnNext img{
  left: 0;
}
.NextPrevContainer .btnNext:hover img{
  left: 3px;
  background: #938057;
}
.NextPrevContainer .btnPrev:hover img{
  right: 3px;
  background: #938057;
}



article p{
  font-size: 1rem;
}
article h1{
  font-size: 2rem;
}
article h5{
  font-weight: normal;
  font-size: 0.8rem;
  font-family: Baskerville;
  color: #938057;
}
.shadow{
  /* text-shadow: -2px -2px 5px rgba(0,0,0,0.5), 2px -2px 5px rgba(0,0,0,0.5), -2px 2px 5px rgba(0,0,0,0.5), 2px 2px 5px rgba(0,0,0,0.5); */
    /* font-weight: 600; */
}

.d-desktop{
  display: block;
}
.d-mobile{
  display: none;
}




header{
  width: 100%;
  position: fixed;
  z-index: 100;
  padding: 5vh 0;
  background-image: url("/res/header-background.png");
  background-repeat: repeat-x;
  background-size: contain;
  pointer-events: none;
}
header .wrapper{
  width: 80%;
  height: 10vh;
  /* min-width: 320px;
  max-width: 960px; */
  margin: 0 auto;
}
header .logoContainer{
  float: left;
  height: 5vh;
  overflow: hidden;
}
header .menuButtonContainer{
  float: right;
  position: relative;
}
header img{
  width: 100%;
  /* max-width: 40px;
  min-width: 25px; */
  height: 4vh;
  width: auto;
  pointer-events: initial;
  display: block;
}
header #logo{
  margin-top: 0vh;
  transition: 0.3s ease;
  opacity: 1;
}
header .logoContainer.scrolled #logo{
  margin-top: -4vh;  
  opacity: 0;
}
header #logotype{
  height: 1.75vh;
  margin-top: 1vh;
  opacity: 0;
  transition: 0.3s ease;
}
header .logoContainer.scrolled #logotype{
  opacity: 1;
}
header .menuButtonContainer img{
  position: absolute;
  right: 0;
  opacity: 1;
  transform: scale(1,1);
  /* max-width: 30px;
  min-width: 20px; */
}
/* header .menuButtonContainer img:hover{
  transform: scale(1.1,1.1);
} */

aside{
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 90;
  transform: scale(0,0);
  /* -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease; */
  -webkit-animation: FadeOut 0.3s forwards;
  -moz-animation: FadeOut 0.3s forwards;
  -o-animation: FadeOut 0.3s forwards;
  animation: FadeOut 0.3s forwards;


}
aside.active{
  -webkit-animation: FadeIn 0.3s forwards;
  -moz-animation: FadeIn 0.3s forwards;
  -o-animation: FadeIn 0.3s forwards;
  animation: FadeIn 0.3s forwards;
}
aside .sideImageContainer{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 90;
  background: rgba(0,0,0,0);
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
aside.active .sideImageContainer{
  width: 60%;
  background: rgba(0,0,0,0.5);
}
aside .sideImageContainer .sideImage{
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-size: cover;
  background-position: center;
  -webkit-transition: 1s ease;
  -o-transition: 1s ease;
  transition: 1s ease;
}
aside .sideImageContainer .sideImage.active{
  opacity: 1;
  -webkit-transition: 0s ease;
  -o-transition: 0s ease;
  transition: 0s ease;
  z-index: 91;
}
aside.active .sideImageContainer .sideImage.active{
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
aside .sideImageContainer .sideImage .overlay{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
}
aside .sideNavContainer{
  right: -100%;
  width: 45%;
  height: 100%;
  position: absolute;
  z-index: 95;
  background: #000;
  opacity: 0;
  padding: 15vh 0 0 5rem;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
aside.active .sideNavContainer{
  opacity: 1;
  right: 0%;
}
aside nav li{
  font-size: 2.2rem;
  font-family: Optima;
  letter-spacing: 0.2rem;
  margin-bottom: 5px;
  color: #ffffff;
  -webkit-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
aside nav li:hover{
  margin-left: 10px;
  color: #938057;
}
aside .contactContainer {
  position: relative;
  bottom: 20px;
  width: 80%;
  letter-spacing: 1px;
}
aside .contactContainer ul{
  margin-top: 45px;
  padding: 0;
  width: 75%;
}
aside .contactContainer ul.phoneEmail{
  width: 100%;
}
aside .contactContainer ul.socialMedia li{
  display: inline-block;
  width: 33%;
}
aside .contactContainer ul li{
  color: #938057;
  font-size: 0.8rem;
  margin-bottom: 0.25rem;
  font-family: Baskerville;
  line-height: 1.6rem;
}
aside .contactContainer ul li a:hover{
  color: #d5b46c;
}

aside .contactContainer .inputSubscribeContainer{
  font-size: 0.8rem;
  margin-top: 35px;
}
aside .contactContainer .inputSubscribeContainer .inputSubscribe{
  background: none;
  border: none;
  border-bottom: 1px solid #938057;
  margin-right: 50%;
}
aside .contactContainer .inputSubscribeContainer .inputSubscribe input{
  background: none;
  border: none;
  color: #fff;
  width: calc(100% - 30px);
  letter-spacing: 1px;
  outline: none !important;
  margin-top: 5px;
  padding: 5px 0;
}
aside .contactContainer .inputSubscribeContainer .inputSubscribe input::placeholder{
  color: #ffffff50;
}
aside .contactContainer .inputSubscribeContainer .inputSubscribe img{
  height: 15px;
  width: auto;
  top: 10px;
  position: relative;
  display: block;
  float: right;
}

aside .copyright{
  color: #938057;
  font-size: 0.7rem !important;
  font-style: italic;
}


aside .scalingContainer{
  transform-origin: top left;
  transform: scale(1, 1);
  padding-bottom: 10%;
}


.col-md-7.col-1, .col-md-7.col-2, .col-md-7.col-3, .col-md-7.col-4,
.col-md-7.col-5, .col-md-7.col-6, .col-md-7.col-7, .col-md-7.col-8,
.col-md-7.col-9, .col-md-7.col-10, .col-md-7.col-11, .col-md-7.col-12
{
  width: 58.333333%;
  max-width: 58.333333%;
  flex: 0 0 58.333333%;
  -ms-flex: 0 0 58.333333%;
}
.col-md-6.col-1, .col-md-6.col-2, .col-md-6.col-3, .col-md-6.col-4,
.col-md-6.col-5, .col-md-6.col-6, .col-md-6.col-7, .col-md-6.col-8,
.col-md-6.col-9, .col-md-6.col-10, .col-md-6.col-11, .col-md-6.col-12
{
  width: 50%;
  max-width: 50%;
  flex: 0 0 50%;
  -ms-flex: 0 0 50%;
}
.col-md-5.col-1, .col-md-5.col-2, .col-md-5.col-3, .col-md-5.col-4,
.col-md-5.col-5, .col-md-5.col-6, .col-md-5.col-7, .col-md-5.col-8,
.col-md-5.col-9, .col-md-5.col-10, .col-md-5.col-11, .col-md-5.col-12
{
  width: 41.666667%;
  max-width: 41.666667%;
  flex: 0 0 41.666667%;
  -ms-flex: 0 0 41.666667%;
}
.col-md-4.col-1, .col-md-4.col-2, .col-md-4.col-3, .col-md-4.col-4,
.col-md-4.col-5, .col-md-4.col-6, .col-md-4.col-7, .col-md-4.col-8,
.col-md-4.col-9, .col-md-4.col-10, .col-md-4.col-11, .col-md-4.col-12
{
  width: 33.333333%;
  max-width: 33.333333%;
  flex: 0 0 33.333333%;
  -ms-flex: 0 0 33.333333%;
}



/* MOBILE BREAKDOWN*/
@media (min-width: 0px) and (max-width: 767px) and (orientation: portrait),
(min-width: 0px) and (max-width: 479px) and (orientation: landscape) , (orientation: portrait)
 {
   /* COL */
  .col-12.col-md-1, .col-12.col-md-2, .col-12.col-md-3, .col-12.col-md-4,
  .col-12.col-md-5, .col-12.col-md-6, .col-12.col-md-7, .col-12.col-md-8,
  .col-12.col-md-9, .col-12.col-md-10, .col-12.col-md-11, .col-12.col-md-12{
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    -ms-flex: 0 0 100%;
  }
  .col-8.col-md-1, .col-8.col-md-2, .col-8.col-md-3, .col-8.col-md-4,
  .col-8.col-md-5, .col-8.col-md-6, .col-8.col-md-7, .col-8.col-md-8,
  .col-8.col-md-9, .col-8.col-md-10, .col-8.col-md-11, .col-8.col-md-12{
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-6.col-md-1, .col-6.col-md-2, .col-6.col-md-3, .col-6.col-md-4,
  .col-6.col-md-5, .col-6.col-md-6, .col-6.col-md-7, .col-6.col-md-8,
  .col-6.col-md-9, .col-6.col-md-10, .col-6.col-md-11, .col-6.col-md-12{
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  aside nav li{
    font-size: 2.5rem;
  }
  .d-desktop{
    display: none;
  }
  .d-mobile{
    display: block;
  }

  aside .sideNavContainer{
    width: 100%;
    padding: 15vh 0 0 10%;
  }

  aside .contactContainer {
    margin-top: 4rem;
    position: relative;
    width: 95%;
  }

  aside .contactContainer *{
    font-size: 0.9rem !important;
  }
  aside .contactContainer .copyright{
    font-size: 0.7rem !important;
  }
  aside .contactContainer .inputSubscribeContainer .inputSubscribe{
    margin-right: 30%;
  }
  aside .contactContainer .inputSubscribeContainer .inputSubscribe input{
    width: calc(100% - 30px);
  }

  aside .contactContainer ul {
    width: 100%;
  }

  .NextPrevContainer div img{
    opacity: 0.7 !important;
    background: #93805700 !important;
    left: 0 !important;
    right: 0 !important;
  }
  /* .NextPrevContainer .btnNext img{
    left: 0 !important;
  }
  .NextPrevContainer .btnPrev img{
    right: 0 !important;
  } */

}




/* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  html{
    font-size: 17px;
  }
}

/* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  html{
    font-size: 16px;
  }
}

/* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px*/
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  html{
    font-size: 16px;
  }
  aside .sideNavContainer{
    width: 60%;
  }
}

/*  ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px*/
@media (min-width: 481px) and (max-width: 767px) {
  html{
    font-size: 15px;
  }
}

/*  ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
  html{
    font-size: 15px;
  }
}










/* HIGH RES */
/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 2561px){
  html{
    font-size: 30px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 2201px)  and (max-width: 2560px) {
  html{
    font-size: 28px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 2049px)  and (max-width: 2200px) {
  html{
    font-size: 26px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1921px)  and (max-width: 2048px) {
  html{
    font-size: 24px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1601px)  and (max-width: 1920px) {
  html{
    font-size: 22px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1441px)  and (max-width: 1600px) {
  html{
    font-size: 20px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1367px)  and (max-width: 1440px) {
  html{
    font-size: 19px;
  }
}

/* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px)  and (max-width: 1366px) {
  html{
    font-size: 18px;
  }
}







@-webkit-keyframes FadeOut {
  0%   { opacity: 1; transform: scale(1,1);}
  99%   { opacity: 0; transform: scale(1,1);}
  100% { opacity: 0; transform: scale(0,0);}
}
@-moz-keyframes FadeOut {
  0%   { opacity: 1; transform: scale(1,1);}
  99%   { opacity: 0; transform: scale(1,1);}
  100% { opacity: 0; transform: scale(0,0);}
}
@-o-keyframes FadeOut {
  0%   { opacity: 1; transform: scale(1,1);}
  99%   { opacity: 0; transform: scale(1,1);}
  100% { opacity: 0; transform: scale(0,0);}
}
@keyframes FadeOut {
  0%   { opacity: 1; transform: scale(1,1);}
  99%   { opacity: 0; transform: scale(1,1);}
  100% { opacity: 0; transform: scale(0,0);}
}

@-webkit-keyframes FadeIn {
  0%   { opacity: 0; transform: scale(0,0);}
  1%   { opacity: 1; transform: scale(1,1);}
  100% { opacity: 1; transform: scale(1,1);}
}
@-moz-keyframes FadeIn {
  0%   { opacity: 0; transform: scale(0,0);}
  1%   { opacity: 1; transform: scale(1,1);}
  100% { opacity: 1; transform: scale(1,1);}
}
@-o-keyframes FadeIn {
  0%   { opacity: 0; transform: scale(0,0);}
  1%   { opacity: 1; transform: scale(1,1);}
  100% { opacity: 1; transform: scale(1,1);}
}
@keyframes FadeIn {
  0%   { opacity: 0; transform: scale(0,0);}
  1%   { opacity: 1; transform: scale(1,1);}
  100% { opacity: 1; transform: scale(1,1);}
}