html, body{
    height: 100%;
    width: 100%;
}

* {
    -webkit-overflow-scrolling: touch;
}

body{
    background-color: #D9D9D9;
    background-image: url('../images/bg_clouds.jpg');
    background-position: center center;
    background-size: cover;
}
body>section{width: 100%; height: 100%; overflow: hidden;display: none; position: relative;}
body.intro>section#intro,
body.home>section#home,
body.pages>section#pages{display: block;}

section#pages{overflow-y: scroll;}

button *{transition: all ease-in-out .2s;}

.btn_round{color: #7B1910; border: 1px solid #7B1910; line-height: 60px; border-radius: 30px; display: inline-block; padding: 0 60px;}
.btn_round:hover{text-decoration: none; color: #7B1910;}
@media (max-width: 767.98px) {
  .btn_round{line-height: 40px;}
}

* {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
  -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
  outline: none !important;
} 

#intro .wrapper{width:100%; height: 100%; position: absolute; transition: all ease-in-out 1.5s;}
#intro .wrapper.out{transform: scale(1.2);}
#intro .wrapper>img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -70%);}
#intro #scene{z-index: 1;width: 100%; height: 100%;}
#intro #scene>div{width: 100%; height: 100%;}
#intro #scene .background{position: absolute; transition: all ease-in-out 1.3s;}
#intro #scene .bg1{left: auto; right:-40%; top:20%; opacity: .9;}
#intro .wrapper.out #scene .bg1{transform: translate(70%, -70%);}
#intro #scene .bg2{top: 5%;left: 1%;}
#intro .wrapper.out #scene .bg2{transform: translate(-100%, -100%);}
#intro #scene .bg3{bottom: 10%;top: auto; left:50px;}
#intro .wrapper.out #scene .bg3{transform: translate(-70%, 70%);}

#mainContent{height: 100%; overflow: hidden;}

a.skipIntro{background-color: #949494; display: inline-block; height: 50px; line-height: 50px; padding: 0 60px; border-radius: 50px; color: #FFF;position: absolute;left: 50%;bottom: 250px;transform: translateX(-50%);}
a.skipIntro:hover{background-color: #E8AB6D; text-decoration: none;}
@media (max-width: 767.98px) {
  #intro .wrapper > img{width: 60%;}
  #intro #scene .background{transform: scale(.3);}
  #intro #scene .bg1{ top: -30%;right: auto;left: -180%;}
  #intro #scene .bg2 {top: 35%; left: -130%;}
  #intro #scene .bg3{bottom: 40px;right: -30%;}
  a.skipIntro{padding: 0 40px;bottom: 180px;}
}

.menuContainer,
.contentContainer{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.contentContainer{overflow-y: scroll;}

nav{height: 100vh;background-color: #FFF;padding: 30px;transition: all ease-in-out .3s;transform: translateX(-10%);opacity: 0;position: sticky;top: 0;}
nav.in{transform: translateX(0);opacity: 1;}
nav .btn_radio{background-color: #E8AB6D; color: #FFF;height: 60px;width: 100%;border-radius: 30px;border: none;margin: 20px 0;font-size: 20px;cursor: pointer;position: relative;}
nav .btn_radio i{display: inline-block;font-size: 23px;margin-bottom: 10px;font-family: "Font Awesome 5 Free";font-weight: 700;-moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;text-rendering: auto;position: absolute;left: 5px;background-color: #fff;width: 50px;height: 50px;border-radius: 50%;top: 5px;line-height: 50px;text-align: center;color: #E8AB6D;}
nav .btn_radio.paused i::before{content: "\f04b";}
nav .btn_radio.playing i::before{content: "\f04c";}
nav ul{list-style: none; padding: 0; margin: 0;border-top: 1px solid #E2E2E2;}
nav ul li{display: block; width: 100%;}
nav ul li a{display: inline-block; width: 100%; color: #171717; line-height: 40px; height: 40px; border-bottom: 1px solid #E2E2E2;padding-left: 40%;text-align: left;}
nav ul li a:hover{color: #7B1910; text-decoration: none;}

footer{
    background-color: #FFF;
    bottom: 0;
    height: 80px;
    position: fixed;
    text-align: center;
    width: 100%;
    transition: transform ease-in-out .3s;
    transform: translateY(160px);
}
footer .btn_radio{
    background-color: #FFF;
    border: 10px solid #FFF;
    border-radius: 50%;
    color: #FFF;
    cursor: pointer;
    height: 160px;
    width: 160px;
    position: absolute;
    bottom: 0;
    left: 50%;
    padding: 0;
    transform: translateX(-50%);
}
footer .btn_radio .wrapper{border: 1px solid #E8AB6D;width: 100%; height: 100%; border-radius: 50%;padding: 10px;}
footer .btn_radio .inner{background-color: #E8AB6D;width: 100%;height: 100%;border-radius: 50%;display: flex;flex-direction: column;justify-content: center;}
footer .btn_radio i{display: block; font-size: 28px; margin-bottom: 10px;font-family: "Font Awesome 5 Free";font-weight: 700;-moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;}
footer .btn_radio.paused i::before{content: "\f04b";}
footer .btn_radio.playing i::before{content: "\f04c";}
footer .btn_radio:hover .wrapper{border: 1px solid #7B1910;}
footer .btn_radio:hover .inner{background-color: #7B1910;}
body.intro footer,
body.home footer{transform: translateY(0);}
@media (max-width: 767.98px) {
  footer{height: 60px;}
  footer .btn_radio{height: 120px; width: 120px;font-size: 12px;}
  footer .btn_radio i{font-size: 20px;}
}

.sldAnimate{
	opacity: 0;
	-webkit-transition: transform .9s ease-in-out 0s, opacity .7s ease-in-out .2s;
    -moz-transition: transform .9s ease-in-out 0s, opacity .7s ease-in-out .2s;
    -o-transition: transform .9s ease-in-out 0s, opacity .7s ease-in-out .2s;
    transition: transform .9s ease-in-out 0s, opacity .7s ease-in-out .2s;
    transform: translateX(50px);
}
.sldAnimate.on{opacity: 1;transform: translateX(0px);}

.flex-container{display: flex;flex-direction: column;align-items: center;justify-content: center;}

#mainPromo li{padding: 80px; height: 100%;align-items: center;display: flex;}
#mainPromo li .promo_img{max-width: 80%;}
#mainPromo li h2{font-family: 'Playfair Display', serif; font-size: 50px; margin-bottom: 80px; margin-top: 40px;width: 100%;}
#mainPromo li .social{margin-top: 40px;}
#mainPromo li .social a{line-height: 42px; width: 42px; height: 42px; margin-right: 5px; background-color: #FFF; border-radius: 50%; text-align: center;color: #000;}
#mainPromo li .social a:hover{color: #7B1910;}

.lSAction > a{font-family: "Font Awesome 5 Free";font-weight: 700;-moz-osx-font-smoothing: grayscale;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;font-size: 44px;height: 42px;color: #7B1910 !important; opacity: 1;}
.lSAction > .lSPrev{left: 20px;}
.lSAction > .lSPrev::before{content: "\f053";}
.lSAction > .lSNext{right: 20px;}
.lSAction > .lSNext::before{content: "\f054";}
@media (max-width: 767.98px) {
  #mainPromo li{padding: 0;}
  #mainPromo li h2{font-size: 28px; text-align: center; margin: 20px 0;}
  #mainPromo li .promo_img{max-width: 60%;}
  #mainPromo li .promoContent{text-align: center;}
  #mainPromo li .social{margin-top: 20px;}
}

.singlePost{background-color: #FFF;border-radius: 30px; margin: 15px 0;}
.singlePost .img{position: relative;display: inline-block;width: 100%;}
.singlePost .img>img{width: 100%; border-radius: 30px 30px 0 0;}
.singlePost .img.video::after{content: "";position: absolute; background-image: url('../images/btn_play.png');background-repeat: no-repeat;left: 50%;top: 50%;height: 82px;width: 82px;transform: translate(-50%, -50%);opacity: .6;}
.singlePost .img.video:hover::after{opacity: 1;}
.singlePost .content{font-size:14px;padding: 20px;}
.singlePost .content .social{text-align: right;}
.singlePost .content .social a{color: #000; margin-right: 5px;}
.singlePost .content .social a:hover{color: #7b1910;}
.singlePost .content h2{font-size: 22px;font-weight: 600;}
.singlePost .content article{overflow: hidden;}
.singlePost .content [data-readmore-toggle] {color: #A7A7A7; margin-bottom: 20px; display: inline-block;}
.singlePost a.anim-object{opacity: 1; color: #E8AB6D;}

.singleBook{background-color: #FFF; margin: 15px 0;box-shadow: 0 1px 2px 0 rgba(0,0,0,0.10); padding-top: 10px; padding-bottom: 10px;}
.singleBook h2{font-size: 16px; font-weight: bold; margin: 10px 0;}
.singleBook p{font-size: 14px; color: #A7A7A7; margin: 0;}
.singleBook a{display: inline-block; line-height: 70px; height: 70px; margin-left: 20px; opacity: .7;}
.singleBook a:hover{opacity: 1;}

@media (max-width: 767.98px) {
  .singleBook .col-md-2{text-align: center !important;}
}


.loadMore{
  display: block;
  border: 1px solid #212529;
  color: #212529;
  margin: 15px 0;
  text-align: center;
  padding: 10px;
  border-radius: 18px;
}
.loadMore:hover{
  color: #212529;
  text-decoration: none;
}
.lmLoader {
  font-size: 10px;
  /*margin: 50px auto;*/
  text-indent: -9999em;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ff2600;
  background: -moz-linear-gradient(left, #999 10%, rgba(55,55,55, 0) 42%);
  background: -webkit-linear-gradient(left, #999 10%, rgba(55,55,55, 0) 42%);
  background: -o-linear-gradient(left, #999 10%, rgba(55,55,55, 0) 42%);
  background: -ms-linear-gradient(left, #999 10%, rgba(55,55,55, 0) 42%);
  background: linear-gradient(to right, #999 10%, rgba(55,55,55, 0) 42%);
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  margin: 15px auto;
}
.lmLoader:before {
  width: 50%;
  height: 50%;
  background: #999;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: '';
}
.lmLoader:after {
  background: #e0e0e0;
  width: 85%;
  height: 85%;
  border-radius: 50%;
  content: '';
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
@-webkit-keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load3 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.contact{display: flex;justify-content: center;height: 100vh;flex-direction: column;padding: 20px 0;}
.contact .support {background-color:#FFF;padding: 30px;width: 100%;border-radius: 10px;margin-bottom: 30px;}
.contact form{background-color: #FFF; padding: 30px; width: 100%; border-radius: 10px;}
.contact h2{font-size: 24px; font-weight: 200; text-align: center; opacity: .5;}
.contact .form-control{border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #A7A7A7; border-radius: 0; padding-left: 0;}
.contact button{height: 50px; line-height: 50px; border: 1px solid #282828; color: #282828; background-color: transparent; cursor: pointer; padding: 0 40px; margin-top: 30px; border-radius: 5px;}
.contact button:hover{color: #7b1910; border-color: #7b1910;}

textarea:focus, 
textarea.form-control:focus, 
input.form-control:focus, 
input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
input[type=number]:focus, 
[type=text].form-control:focus, 
[type=password].form-control:focus, 
[type=email].form-control:focus, 
[type=tel].form-control:focus, 
[contenteditable].form-control:focus {
  box-shadow: inset 0 -1px 0 #ddd;
}





@media (max-width: 767.98px) {
  .mobile_nav{
    background: #fff;
    text-align: right;
    padding: .5rem 1rem;
    position: fixed;
    width: 100%;
    z-index: 9999;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
  }
  .mobile_nav i{font-size: 30px;}
  .offcanvas-collapse {
    position: fixed;
    top: 48px; /* Height of navbar */
    bottom: 0;
    left: 100%;
    width: 100%;
    padding: 0;
    overflow-y: auto;
    visibility: hidden;
    background-color: #343a40;
    transition: visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out;
    transition: transform .3s ease-in-out, visibility .3s ease-in-out, -webkit-transform .3s ease-in-out;
    z-index: 999;
  }
  .offcanvas-collapse.open {
    visibility: visible;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  .offcanvas-collapse nav{text-align: center;}
  .offcanvas-collapse nav img{width: 30%;}
  .contact{display: block;height: auto;}
  body.pages .container{padding-top: 50px;}
}





.anim-object {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    opacity: 0;
}
.anim-object.active {
    display: inline-block;
    z-index: 905;
    opacity: 1;
}

.scale-in-hor-center {
	-webkit-animation: scale-in-hor-center 0.5s cubic-bezier(0.445, 0.050, 0.550, 0.950) ;
	        animation: scale-in-hor-center 0.5s cubic-bezier(0.445, 0.050, 0.550, 0.950) ;
}
@-webkit-keyframes scale-in-hor-center {
    0% {
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
      opacity: 1;
    }
  }
  @keyframes scale-in-hor-center {
    0% {
      -webkit-transform: scaleX(0);
              transform: scaleX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: scaleX(1);
              transform: scaleX(1);
      opacity: 1;
    }
  }

.slide-out-fwd-top {
	-webkit-animation: slide-out-fwd-top 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-fwd-top 0.4s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-out-fwd-top {
    0% {
      -webkit-transform: translateZ(1) translateY(0);
              transform: translateZ(1) translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(600px) translateY(-300px);
              transform: translateZ(600px) translateY(-300px);
      opacity: 0;
    }
  }
  @keyframes slide-out-fwd-top {
    0% {
      -webkit-transform: translateZ(1) translateY(0);
              transform: translateZ(1) translateY(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateZ(600px) translateY(-300px);
              transform: translateZ(600px) translateY(-300px);
      opacity: 0;
    }
  }

.roll-in-right {
	-webkit-animation: roll-in-right 0.6s ease-out both;
	        animation: roll-in-right 0.6s ease-out both;
}
@-webkit-keyframes roll-in-right {
    0% {
      -webkit-transform: translateX(800px) rotate(540deg);
              transform: translateX(800px) rotate(540deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0) rotate(0deg);
              transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
  }
  @keyframes roll-in-right {
    0% {
      -webkit-transform: translateX(800px) rotate(540deg);
              transform: translateX(800px) rotate(540deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0) rotate(0deg);
              transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
  }

.roll-out-right {
	-webkit-animation: roll-out-right 0.6s ease-in both;
	        animation: roll-out-right 0.6s ease-in both;
}
@-webkit-keyframes roll-out-right {
    0% {
      -webkit-transform: translateX(0) rotate(0deg);
              transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px) rotate(540deg);
              transform: translateX(1000px) rotate(540deg);
      opacity: 0;
    }
  }
  @keyframes roll-out-right {
    0% {
      -webkit-transform: translateX(0) rotate(0deg);
              transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(1000px) rotate(540deg);
              transform: translateX(1000px) rotate(540deg);
      opacity: 0;
    }
  }

.fade-in-right {
	-webkit-animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-right 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-right {
    0% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-right {
    0% {
      -webkit-transform: translateX(50px);
              transform: translateX(50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}

.fade-in-left {
	-webkit-animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	        animation: fade-in-left 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}
@-webkit-keyframes fade-in-left {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
  }
  @keyframes fade-in-left {
    0% {
      -webkit-transform: translateX(-50px);
              transform: translateX(-50px);
      opacity: 0;
    }
    100% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
}

.fade-out-right {
	-webkit-animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: fade-out-right 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
 @-webkit-keyframes fade-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
}
@keyframes fade-out-right {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
  }
}

  

  
.slide-out-left {
	-webkit-animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: slide-out-left 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
@-webkit-keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
  }
  @keyframes slide-out-left {
    0% {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      opacity: 1;
    }
    100% {
      -webkit-transform: translateX(-1000px);
              transform: translateX(-1000px);
      opacity: 0;
    }
  }