@font-face{font-family: BrandonBold; src: url('../fonts/brandonbld.otf');}
*{margin: 0; padding: 0; box-sizing: border-box; font-size: 100%; font-weight: normal; font-family: Roboto, Helvetica,Arial,Lucida,sans-serif; font-style: normal; letter-spacing: 0.7px; font-size: 100%; font-weight: normal;}
input,select,textarea,button{background-color:transparent;resize:none;border:0;-webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;outline-offset:0;}
input::-webkit-inner-spin-button{display: none;}
button{cursor: pointer;}
a{text-decoration: none;}
.click, a{cursor:pointer; -webkit-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color:rgba(0,0,0,0);outline:0;outline-offset:0;}
:root{
    --bg: #FFFFFF;
    --bg2: #FFEFE7;
    --txt: #333037;
    --color1: #FFCDB2;
    --color2: #FFB4A2;
    --color3: #E5989B;
    --color4: #B5838D;
    --color5: #6D6875;
}
::-webkit-scrollbar{width: 7px;}
::-webkit-scrollbar-track{background: transparent; border-radius: 5px;}
::-webkit-scrollbar-thumb{background: var(--color4); border-radius: 10px;}
html, body{width: 100%; height: 1px; min-height: 100%;}
body{background-color: var(--bg); overflow-x: hidden;}
body *{color: var(--txt);}
input:-webkit-autofill{
    -webkit-box-shadow:0 0 0 50px var(--bg) inset;
    -webkit-text-fill-color: var(--color5);
}
.font-brand{font-family: BrandonBold, sans-serif;}
/************************************************************/
/************************************************************/
.header{position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 70px; background-color: var(--bg); padding: 0 30px; transition: 0.3s;}
.header{-webkit-box-shadow: 0px 2px 5px -1px rgba(109,104,117,1);
    -moz-box-shadow: 0px 2px 5px -1px rgba(109,104,117,1);
    box-shadow: 0px 2px 5px -1px rgba(109,104,117,1);}
.header-hidden{top: -80px;}
.a-logo{display: block; float: left; width: 66px; height: 66px; background-image: url('../img/logo.png'); background-repeat: no-repeat; background-position: center; background-size: 120%; border: 0px solid var(--color4); border-radius: 50%; margin-top: 2px;}
.a-donate{display: block; float: right; color: var(--bg); background-color: var(--color4); font-size: 18px; width: 120px; height: 40px; text-align: center; line-height: 40px; border-radius: 25px; transition: 0.3s; margin-top: 15px; margin-right: 10px;}
.a-donate:hover{background-color: var(--color3);}
#btn-head-nav{float: right; width: 40px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 70%; background-image: url('../img/menu.svg');}
/************************************************************/
/************************************************************/
.nav{position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; transition: 0.3s;}
.nav-hidden{left: 100%;}
#nav-back{float: left; width: 77%; height: 100%;}
.nav-cont{float: left; width: 23%; height: 100%; background-color: var(--bg); -webkit-box-shadow: -2px 1px 5px -1px rgba(109,104,117,1);
    -moz-box-shadow: -2px 1px 5px -1px rgba(109,104,117,1);
    box-shadow: -2px 1px 5px -1px rgba(109,104,117,1);}
.nav-head{width: 100%; height: 70px;}
#btn-nav-cancel{float: right; width: 40px; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 60%; background-image: url('../img/cancel.svg'); margin-right: 30px;}
.nav-a-list{width: 100%; border-top: 1px solid var(--color1); list-style-type: none; text-align: right; padding-right: 30px;}
.nav-a-list a{color: var(--txt); font-size: 1.5vw; line-height: 2; transition: 0.3s;}
.nav-a-list a:hover{color: var(--color5);}
/************************************************************/
section, footer{position: relative; float: left; width: 100%;}
/************************************************************/
.s{height: auto; padding: 70px 0;}
.b-width{margin: 0 auto; width: 91%;}
.s-bg-1{background-color: var(--color1);}
.s-bg-2{background-color: var(--bg2);}
.s-bg-3{background-color: var(--bg);}
.s-bg-4{background-color: #fde5d8;}
/************************************************************/
/************************************************************/
footer{background-color: var(--color5); padding: 50px 0 10px;}
.b-width-footer{margin: 0 auto; width: 91%;}
footer *{color: var(--bg2);}
.b-footer-soc{width: 100%;}
.b-footer-soc .fa-soc{display: inline-block; width: 4%; background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 9px;}
.b-footer-soc .fa-soc::after{content: ""; display: block; padding-bottom: 100%;}
.b-footer-soc .fa-inst{background-image: url('../img/fa-inst.svg?v=0111');}
.b-footer-soc .fa-fb{background-image: url('../img/fa-fb.svg?v=01');}
.b-footer-soc .fa-utb{background-image: url('../img/fa-utb.svg?v=01');}
footer ul{width: 100%; padding: 30px 0 20px 0; list-style-type: none;}
footer ul a{line-height: 1.6; font-size: 1.5vw; margin-right: 20px;}
footer ul a i{float: left; width: 2.4%; background-repeat: no-repeat; background-position: center; background-size: cover; margin-right: 10px;}
footer ul a i::after{content: ""; display: block; padding-bottom: 100%;}
footer ul i.fa-whatsapp{background-image: url('../img/fa-whatsapp.svg?v=1');}
footer ul i.fa-email{background-image: url('../img/fa-email.svg?v=1');}
footer a:hover{text-decoration: underline;}
.p-copyright, .a-legal{font-size: 1.2vw;}
/************************************************************/
/************************************************************/
@media only screen and (max-width: 767px){
    /*** for Mobile devices ***/
    ::-webkit-scrollbar{width: 0;}
    /************************************************************/
    /************************************************************/
    .header{padding: 0 10px;}
    #nav-back{width: 30%;}
    .nav-cont{width: 70%;}
    .nav-a-list a{font-size: 5vw;}
    /************************************************************/
    .s{height: auto; padding: 40px 0;}
    .b-width{margin: 0 auto; width: calc(100% - 20px);}
    /************************************************************/
    /************************************************************/
    footer{padding: 40px 0 10px;}
    .b-width-footer{margin: 0 auto; width: calc(100% - 20px);}
    .b-footer-soc .fa-soc{width: 12%;}
    footer ul{padding: 30px 0 20px 0;}
    footer ul li{padding-bottom: 10px;}
    footer ul a{font-size: 4vw; line-height: 1.6;}
    footer ul a i{width: 7%; margin-right: 10px;}
    .p-copyright, .a-legal{font-size: 3.5vw;}
}