@font-face {
   font-family:'Merriwheather-Bold';    
   src: url(/static/fonts/Merriweather-Bold.ttf) format('truetype');
}
@font-face {
   font-family:'Merriwheather-Regular';    
   src: url(/static/fonts/Merriweather-Regular.ttf) format('truetype');
}
@font-face {
   font-family:'Merriwheather-Light';    
   src: url(/static/fonts/Merriweather-Light.ttf) format('truetype');
}
@font-face {
   font-family:'Roboto-Bold';    
   src: url(/static/fonts/Roboto-Bold.ttf) format('truetype');
}
@font-face {
   font-family:'Roboto-Regular';    
   src: url(/static/fonts/Roboto-Regular.ttf) format('truetype');
}
@font-face {
   font-family:'Roboto-Light';    
   src: url(/static/fonts/Roboto-Light.ttf) format('truetype');
}
@font-face{
    font-family:"Dax W01 Bold";
    src:url("/static/fonts/cdf95fd0-9d1f-4daa-82ea-b25dbd236444.woff2") format("woff2"),url("/static/fonts/a7bdb1d5-35e0-4e9a-a581-75a95390fdf6.woff") format("woff");
}
@font-face{
    font-family:"Dax W01 Xbold";
    src:url("/static/fonts/fe92d3d5-c003-4ba9-b697-cdf3c5aa7b6d.woff2") format("woff2"),url("/static/fonts/88611036-0800-43a9-8bde-f48d72c1e39c.woff") format("woff");
}

body {
    background: url('/static/img/savebaramforest/bg-pattern-01.png');    
}

html, body {
    height: 100%;    
    color: #312E29;
    font-family:'Roboto-Regular', sans-serif;    
}

/* primary */
.black {
    color: #000000;
}

.grey {
    color: #F4F4F3;
}

.grey-bg {
    background: #F4F4F3;
}

.darkgrey-bg {
    background: #929189;
}

footer {
    background: #fff;
    box-shadow:0 0 30px #00000014;
    padding:50px 0;
}

footer ul {
    padding:0;
    margin:0;
    list-style-type:none;
}

.btn-primary {
    background-color: #7A8B27;
    border: none;
    box-shadow: 3px 3px 5px #322f2a80;
    padding: 12px 20px;
    border-radius: 0;
    color: #fff;
    font-family: "Dax W01 Bold";
    font-size: 21px;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover:active,
.btn-primary:hover:focus,
.social .fa-paper-plane:hover,
.keyvisual .counter > a:hover {
    background-color: #57631C !important;
    text-decoration: none;
}

.social {
   margin:0 auto;
   text-align: center;
   align-items: center;
}

a {  
    transition: 0.1s ease-in-out !important;
}

a,
a:hover {
    color: #7A8B27;
}

svg, img, video {
    max-width:100%;
}

.img-fluid {
    width:100%;
}

.img-wrapper {
   padding-bottom:66%;
   background-position:center;
   background-size:cover;
}

/*
/* Light: 300
/* Medium: 500
/* Semi-Bold: 600
/* Extra-Bold: 800
*/

b, strong {
    font-family:'Roboto-Bold';
    font-weight: normal;
}

body {
    font-size: 17px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Dax W01 Bold";
}

h1 {
    font-size: 30px;    
    margin-bottom: 20px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 20px;
}

h4 {
    font-size: 18px;
}

form > .form-group:last-child {
    margin-bottom:0;
    padding-left: 0;
}

.lead {
    font-family: "Dax W01 Bold";
    font-size: 17px;
}

/* Custom Validation */

.custom-control-input.is-valid ~ .custom-control-label,
.was-validated .custom-control-input:valid ~ .custom-control-label {
    color: inherit;
}

.custom-control-input.is-valid:checked ~ .custom-control-label::before,
.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before,
.was-validated .custom-control-input:valid ~ .custom-control-label::before{
    border-color:#929189;
    background-color: #fff;
    box-shadow: none;
}

.form-control.is-valid, .was-validated .form-control:valid {
    border-color: #929189 !important;    
    background:none;
    box-shadow: none !important;
}


/* carousel */
.carousel {
    margin-left:50px;
    margin-right:50px;
}

.carousel-control-next,
.carousel-control-prev {
    width: 120px;
    opacity: 1;
    z-index: 0;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-image:url('/static/img/arrow-next.svg');
    width: 20px;
    height: 40px;
}

.carousel-control-next:hover .carousel-control-next-icon {
    /* prepend: brightness(0) saturate(100%) if svg is white */
    filter: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(19%) hue-rotate(22deg) brightness(91%) contrast(98%);
}

.carousel-control-prev-icon {
    transform: rotate(180deg);
}

.carousel-teaser {
    margin:0;
}

.carousel-teaser .carousel-control-prev,
.carousel-teaser .carousel-control-next { 
    width:70px;
}

/* padding + margin */
.pb-5, .py-5 {
    padding-bottom: 120px !important;
}
.pt-5, .py-5 {
    padding-top: 120px !important;
}
.mb-5, .my-5 {
    margin-bottom: 120px !important;
}
.mt-5, .my-5 {
    margin-top: 120px !important;
}

.pb-4, .py-4 {
    padding-bottom: 60px !important;
}
.pt-4, .py-4 {
    padding-top: 60px !important;
}
.mb-4, .my-4 {
    margin-bottom: 60px !important;
}
.mt-4, .my-4 {
    margin-top: 60px !important;
}

.pb-3, .py-3 {
    padding-bottom: 30px !important;
}
.pt-3, .py-3 {
    padding-top: 30px !important;
}
.mb-3, .my-3 {
    margin-bottom: 30px !important;
}
.mt-3, .my-3 {
    margin-top: 30px !important;    
}

.cc-window {
    background:#312E29 !important;
}

.cc-message {
    margin:0 !important;
    padding:8px 12px;
}

.cc-link {
    padding:0 !important;
}

.cc-btn {
    background:#BDBDB8 !important;
    color:#312E29 !important;
    padding:8px !important;
}

.cc-btn:hover {
    text-decoration:none;
    background:#cfcfcf !important;
}

.cc-window {
    flex-direction: column !important;
    align-items: stretch;
}

.cc-compliance {
    width:100%;
}

/* nav */
.navbar {
    padding: 15px 0;
    font-size: 17px;
    font-family: "Dax W01 Bold";
}


.navbar a,
.news-result a,
footer a {
    color: #312E29;
}

.navbar a:hover,
.news-result a:hover,
.nav-item.selected a,
a.fas {
    text-decoration:none;    
    color:#73951C;
}

.lang-switcher .divider {
    margin:0 10px;
    width: 2px;
    height: 24px;
    background: #000;
}

.lang-switcher {
   display: flex;
    align-items: center;
}

.logo {
    height: 100px;
}

.keyvisual {
    position:
    relative;
}

.keyvisual .counter {
    font-family: "Dax W01 Bold";
    font-size: 19px;
    padding: 5px 15px;
    background:#fff;
}

.keyvisual .counter > a {
    font-family: "Dax W01 Bold";
    background: #7A8B27;
    color: #fff;
    font-size: 24px;
    box-shadow: 5px 5px 10px #322f2abf;
    padding: 3px 15px;
    margin-top:15px;
    display:inline-block;
}

.keyvisual .count-wrapper {
   position:
   relative;
   font-size: 38px;
   margin-right: 8px;
}

.keyvisual .count {
      height: 50px;
}

.keyvisual .count.hide {
    opacity:0;
}

.keyvisual .count.show {
    position: absolute;
    bottom: 0;
    right: 0;
}

.count-inline {
    font-size:28px;
}

.social .col:first-child {
   padding-right:0;
}

.social .col:last-child {
   padding-left:0;
}

.social .fa-paper-plane,
.social .fa-whatsapp {
    border-radius: 5px;
    padding: 8px 18px;    
    background: #7A8B27;
    color: #ffffff;
    box-shadow: 3px 3px 5px #322f2a80;
}

.modal-content {
   border:none;
   border-radius: 5px;
}

.catcher {
   font-family:"Dax W01 Xbold";
   color: #fff;
   position: absolute;
   left: 10%;
   font-size: 22px;
   text-transform: uppercase;
   top: 25px;
}

.catcher span {
   background:#312E29;
   transform: rotate(-10deg);
   position: absolute;
   padding: 6px 20px;
   white-space: nowrap;
   box-shadow: 5px 5px 10px #322f2abf;
}

.catcher > .extra {
   font-family:
   "Dax W01 Bold";
   background: #7A8B27;
   color: #312E29;
   transform: rotate(10deg);
   left: 0;
   top: -35px;
   font-size: 22px;
}

.img-shadow {
    box-shadow: 8px 8px 12px #322f2a33;
}

.supporter {
   display:none;
}

.contact-plus {
    display: flex;
    flex-wrap: wrap;
}

/*
.bg {
    opacity:.1;
    height:100%;
    position:absolute;
    width:100%;
    background: url('/static/img/savebaramforest/bg-pattern.png');
    z-index: -1;
}
*/




@media (min-width: 1400px) { 
    
}

@media (min-width: 1200px) {    
    
}

@media (min-width: 992px) { 
    
}

@media (max-width: 991px) {  
    /* padding + margin */
    .pb-5, .py-5 {
        padding-bottom: 60px !important;
    }
    .pt-5, .py-5 {
        padding-top: 60px !important;
    }
    .mb-5, .my-5 {
        margin-bottom: 60px !important;
    }
    .mt-5, .my-5 {
        margin-top: 60px !important;
    }

    .pb-4, .py-4 {
        padding-bottom: 40px !important;
    }
    .pt-4, .py-4 {
        padding-top: 40px !important;
    }
    .mb-4, .my-4 {
        margin-bottom: 40px !important;
    }
    .mt-4, .my-4 {
        margin-top: 40px !important;
    }

    .pb-3, .py-3 {
        padding-bottom: 20px !important;
    }
    .pt-3, .py-3 {
        padding-top: 20px !important;
    }
    .mb-3, .my-3 {
        margin-bottom: 20px !important;
    }
    .mt-3, .my-3 {
        margin-top: 20px !important;    
    }        
}

@media (max-width: 767px) {
    #menu-wrapper {
        background: hsl(0deg 0% 0% / 80%);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
    }

    #menu-wrapper a {
       color:#fff;
       padding: 5px 0;
       font-size: 34px;
    }

    #menu-wrapper ul {
         flex-direction: column;
         text-align: center;
         padding: 60px 15px;
         height: 100vh;
         flex-wrap: nowrap;
    }

    #menu-wrapper .nav-item {
         margin: 0 auto;
         display: flex;
    }

   #menu-wrapper .fa-times {
      color:#fff;
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 32px;
      cursor: pointer;
   }

   .navbar-toggler {
      font-size:32px;
      border: none;
      padding: 0;
      margin-left: 20px;
      margin-right: 5px;
   }
   
   #menu-wrapper a:hover {
      color:#73951C;
   }

   .contact-plus {
      margin-bottom:40px;
   }

   .form-group {
      width:100%;
   }

   .news-result .img-wrapper {
      margin-bottom:30px;
   }
    
}
    

@media (min-width: 768px) {  
    .social {
       width: 60%;     
    }  
    
   h1 {
       font-size: 38px;
       line-height: 50px;
       margin-bottom: 20px;
   }
   
   h2 {
       font-size: 28px;
   }
   
   h3 {
       font-size: 22px;
   }
   
   h4 {
       font-size: 20px;
   }
   
    .cc-window {
       flex-direction: row !important;
    }

    .cc-compliance {
        width:auto;
    }

    .keyvisual .counter {
       position: absolute;
       top: 20%;
       right: 10%;       
       border-radius:5px;       
   }

   .supporter {
      padding: 14px 0;
      justify-content: space-evenly;
      display: flex;
      background: #312E29;
      color: #fff;
      font-size: 14px;
      align-items: center;
      font-family: "Dax W01 Bold";
      box-shadow: 0 0 20px rgb(0 0 0 / 15%);
   }
   
   .supporter img {
       height: 25px;
       filter: grayscale(1);
   }

   .catcher {      
      font-size: 38px;      
   }

   .catcher > .extra {      
      font-size: 34px;
      left: 370px;
      top: 50px;      
   }

   .keyvisual .counter > a {       
       transform: rotate(-5deg);
       right: -10%;
       top: 80%;
       font-size: 28px;
       position: absolute;   
       margin-top:0;
   }

   .keyvisual .counter {    
      padding: 5px 20px 13px;   
   }

   .btn-skew {
       transform: rotate(-5deg);
   }

   .navbar {
      padding:30px 0;          
      font-size: 19px;   
   }
   
   .lang-switcher {
       order:1;
   }
   
   #menu-wrapper {
      margin-left: 15px;
   }

   #menu-wrapper .fa-times {
       display:none;
   }

   nav .nav-item {
       margin-left: 40px;
   }

   .form-group {
      width:50%;
      padding-right: 15px;
      padding-left: 15px;
   }
   
   .form-group:nth-child(2n+1) {
      padding-left:0;
   }
   
   .form-group:nth-child(2n+2) {
      padding-right:0;
   }
      
   .form-group:nth-child(11),
   .form-group:nth-child(12){
      width: 100%;
      padding: 0;
   }
   
   .form-group:first-of-type {
      width:50%;
      margin-right:50%;
      padding-left:0;
      padding-right:15px;
   }

   .lead {   
       font-size: 19px;
   }   
}


@media (min-width: 576px) { 
    .modal-dialog {
       max-width:66%;
    }
}

@media (max-width: 575px) { 
    body {
        overflow-wrap: break-word;
    }
}