@font-face {
    font-family: Brandon;
    src: url("../fonts/BRANDON_REG.OTF") format("opentype");
}

@font-face {
    font-family: Brandon;
    font-weight: bold;
    src: url("../fonts/BRANDON_BLD.OTF") format("opentype");
}
@font-face {
    font-family: BrandonGrotesque;
    src: url("../fonts/BRANDON-GROTESQUE.OTF") format("opentype");
}

@font-face {
    font-family: BrandonGrotesque;
    font-weight: bold;
    src: url("../fonts/BRANDONGROTESQUE-BLACKITALIC.TTF") format("opentype");
}

body.homepage{
    background: url(../img/BG.png) fixed repeat-x;
    background-size: contain;
    padding: 1em 3em;
    padding-bottom:0;
    text-transform: uppercase;
    font-family: Brandon, arial, sans-serif;
}
h1, h3{
    color:#fff;
    text-align:center;
    font-weight: bold;
}
h1{
    font-size: 3.5em;
}
h3{
    font-size: 1.5em;
}
img{max-width:100%;}

#main_logo_box{
    max-width: 300px;
    text-align: center;
    margin-bottom: -3.8em;
}
#main_logo_box .tag-line{
    color:#ffeaac;
    font-size: 1em;
    font-weight: bold;
}

.balloon-box{
    padding-top:5em;
}
.balloon-box img{
    max-width:50%;
}

.butterfly-box{
    padding-top:0em;
    margin-top: -10em;
}
.butterfly-box img{
    max-width:90%;
}
.form-box{
    background:transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 0.5em 1em;
    display: block;
    width: 100%;
}
select.form-box{
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffeaac%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .85em auto, 100%;
    text-transform: uppercase;
}
select.form-box::-ms-expand {
  display: none;
}
select.form-box option{
    background:#ffeaac;
    color: #000;
}


.form-box::placeholder{
    text-transform: uppercase;
    color: #fff;
}
.form-btn{
    background:#ffeaac;
    border: 2px solid #fff;
    color: #000;
    padding: 0.5em 1em;
    display: block;
    width: 100%;
    text-transform: uppercase;
}

.footer-box{
    color: #fff;
    text-align: center;
}
.footer-box img{
    max-width:6em;
}
.footer-box a{
    color:#fff;
}
.footer-box .social a{
    font-size: 1.5em;
    padding: 0.3em;
}

.bird-box{
    padding-top:0em;
}
.bird-box img{
    max-width:50%;
}

.people-box{
    padding-top:0em;
}
.people-box img{
    max-width:50%;
}

/* PWA installation tab*/
.installPWA-wrapper, .facebookInApp-wrapper, .allownotification-wrapper{
    background: #ffffffbf;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    align-items: center;
    z-index: 2;
    position: inherit;
}

.facebookInApp-wrapper{
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
}
   
#install-pwa,#install-noti{
    background: linear-gradient(135deg, #ffb347 0%, #ff6b35 100%);
    color: #FFFFFF;
    font-weight: 600;
    padding: 5px;
    border-radius: 6px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
}
#close-pwa-tab, #close-facebookApp-tab,#close-allow-noti{
    font-weight: 600;
    margin-right: 20px;
}
#install-pwa:hover, #install-pwa:active,#install-noti:hover, #install-noti:active{
    background-color: #e44ae4;
}
#addToHS-txt{
    font-size: 12px;
    font-weight: 600;
    padding: 10px;
}
/*END PWA */

@media (max-width: 800px) {
    body.homepage{
        padding: 0.5em;
    }
    #main_logo_box{
        margin-bottom:2em;
    }
    h1{
    font-size: 1.5em;
    }
    h3{
        font-size: 1em;
    }

}