/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

@font-face {
font-family: "CircularStdbold";
src: url("../fonts/CircularStd-Bold.eot");
src: url("../fonts/CircularStd-Bold.eot") format("embedded-opentype"),
url("../fonts/CircularStd-Bold.svg") format("svg"),
url("../fonts/CircularStd-Bold.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "GaramondItalic";
src: url("../fonts/garamond-italic.eot");
src: url("../fonts/garamond-italic.eot") format("embedded-opentype"),
url("../fonts/garamond-italic.svg") format("svg"),
url("../fonts/garamond-italic.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "CircularStdBook";
src: url("../fonts/CircularStd-Book.eot");
src: url("../fonts/CircularStd-Book.eot") format("embedded-opentype"),
url("../fonts/CircularStd-Book.svg") format("svg"),
url("../fonts/CircularStd-Book.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "BrandonGrotesque-Black";
src: url("../fonts/BrandonGrotesque-Black.eot");
src: url("../fonts/BrandonGrotesque-Black.eot") format("embedded-opentype"),
url("../fonts/BrandonGrotesque-Black.svg") format("svg"),
url("../fonts/BrandonGrotesque-Black.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "BrandonGrotesque-Medium";
src: url("../fonts/BrandonGrotesque-Medium.eot");
src: url("../fonts/BrandonGrotesque-Medium.eot") format("embedded-opentype"),
url("../fonts/BrandonGrotesque-Medium.svg") format("svg"),
url("../fonts/BrandonGrotesque-Medium.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "BrandonGrotesque-RegularItalic";
src: url("../fonts/BrandonGrotesque-RegularItalic.eot");
src: url("../fonts/BrandonGrotesque-RegularItalic.eot") format("embedded-opentype"),
url("../fonts/BrandonGrotesque-RegularItalic.svg") format("svg"),
url("../fonts/BrandonGrotesque-RegularItalic.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}


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

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






/* Media */
/************************* Tiny devices (smart phones, < 768px and up) */

@media(max-width:767px) {

    .imagem-logo{
        display: block;
        background-image: url(../images/hungersauce-logo-mobile.png);
        width: 58px;
        height: 27px;
    }

    .top-nav-logo {
        display: block;
        background-image: url(../images/hungersauce-logo-mobile.png);
        width: 58px;
        height: 27px;
    }

    /* cowndown */



    h2{
        font-size: 14pt !important;
        text-align: center !important;
    }





    .numbers-cowntdown{
        display: none;
    }
   

    /* menu centralizado no celular */

    .navbar-nav li a {
        text-align: center !important;
    }


    /* alterando icone do twitter e facebook */


    /*home image */
     .imagem-home{
        
        height: 450px !important;
        background: url(../images/imagem-home-mobile.png) no-repeat center center !important; 



    }

     .intro-section {

    padding: 90px 0 70px 0 !important;

    }

    .donate-button{
        display: block !important;
    }

    .buy-divider{
        display: none;
    }


    .about-text{
        padding: 40px 10% !important;
    }



}


@media(min-width:767px) {
    .navbar {
        padding: 51px 0 37px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    /* Actions when scroll */

    .top-nav-collapse {
        padding: 5px 0 ;
    }

    .top-nav-logo {
        display: block;
        background-image: url(../images/hungersauce-logo-small.png);
        width: 58px;
        height: 50px;
    }

    
    


 /* mudando tamanho do p */

}

/*//////////////////////// Small devices (tablets, 768px and up) */
@media(min-width:768px) {
    
    /*Logo*/

    .imagem-logo{
        display: block;
        background-image: url(../images/hungersauce-logo.png);
        width: 118px;
        height: 50px;
    }

    .navbar-brand {
        float: left;
        height: auto;
        padding: 0 22px;
    }

    /* Itens de menu, distancias */
    .navbar-nav>li>a {
        padding-top: 30px;
        padding-bottom: 0px;
        margin-left: 12px;
        margin-right: 12px;
        padding-left: 0;
        padding-right: 0;

    }

    #firstmenu{
        margin-left: 0px;
    }

    #twitter{
        margin-left: 50px !important;
        margin-right: 10px !important;
        
    }

    #facebook{
        margin-left: 15px !important;
        margin-right: 20px !important;
    }


    /*image home */
    .imagem-home{

        height: 450px !important;

    }

    .numbers-cowntdown-mobile{
            display: none;
        }

    .numbers-cowntdown{
        font-size: 20pt !important;
    }


}






/* Medium devices (desktops, 992px and up) */
@media(min-width:992px) {
    /* ----- About text ------ */

    .about-text{
        padding-left: 10% !important;
        padding-right: 10% !important;
    }

    /* Itens de menu, distancias */
    .navbar-nav>li>a {
        padding-top: 30px;
        padding-bottom: 0px;
        margin-left: 60px;
        margin-right: 22px;
        padding-left: 0;
        padding-right: 0;

    }

    #firstmenu{
        margin-left: 0px;
    }

    /*image home */
    .imagem-home{

        height: 650px !important;

    }

    .buy-rotulo{
        padding:  30% 0px !important;
    }


    /*---- contdown ----*/

    .numbers-cowntdown{
        font-size: 22pt !important;
    }




}

/* Large devices (large desktops, 1200px and up) */
@media(min-width:1200px) {



    .navbar-nav>li>a {
        padding-top: 30px;
        padding-bottom: 0px;
        margin-left: 110px;
        margin-right: 22px;
        padding-left: 0;
        padding-right: 0;

    }

    /* ----- About text ------ */

    .about-text{
        padding-left: 20% !important;
        padding-right: 20% !important;
    }


    .imagem-home{

        height: 600px !important;

    }


    /*------------ About video  -----------*/

    .buy-rotulo{
        padding:  20% 0px !important;
    }


    /*---- contdown ----*/

    .numbers-cowntdown{
        font-size: 28pt !important;
    }


    
}

@media(min-width:1400px) {



    .imagem-home{
        max-width: 1300px !important;
        height: 800px !important;    
        display: inline-block !important;
        text-align: center !important;

    }


    .buy-rotulo{
        padding:  10% 0px !important;
    }



    
}


h1{
   font: 15pt 'Crimson Text', serif;,Arial,sans-serif;
   font-style: italic;
}

h2{
   font: 28pt BrandonGrotesque-Black,Helvetica,Arial,sans-serif;
}

h3{
    font: 13pt BrandonGrotesque-Black,Helvetica,Arial,sans-serif;
}

p{
    font: 13pt BrandonGrotesque-Medium,Helvetica,Arial,sans-serif;
}

.divider{
    display: inline-block;
    text-align: center;
    width: 10px;
    border: 1px solid #fff;
    margin-bottom: 10px;
}

/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */


.intro-section {
    padding-top: 200px;
    text-align: center;



    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e6e7e8+0,bcbec0+71,e6e7e8+100 */
    background: #e6e7e8; /* Old browsers */
    background: -moz-linear-gradient(top, #e6e7e8 0%, #bcbec0 71%, #e6e7e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6e7e8), color-stop(71%,#bcbec0), color-stop(100%,#e6e7e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #e6e7e8 0%,#bcbec0 71%,#e6e7e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #e6e7e8 0%,#bcbec0 71%,#e6e7e8 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #e6e7e8 0%,#bcbec0 71%,#e6e7e8 100%); /* IE10+ */
    background: linear-gradient(to bottom, #e6e7e8 0%,#bcbec0 71%,#e6e7e8 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6e7e8', endColorstr='#e6e7e8',GradientType=0 ); /* IE6-9 */


}



.imagem-home{
    display: block;
    position: relative;
    width: 100%;
    height: 1000px;
    min-height: auto;
    text-align: center;
    color: #fff;
    background: url(../images/imagem-home.png) no-repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}



/*-------------------- Cowntdown  --------*/

.countdown-section{
    background-color: #fff;
    color: #000;
}

.numbers-cowntdown-mobile{
    font: 15pt BrandonGrotesque-Black,Helvetica,Arial,sans-serif;
    color: #000;
    background-color: #fff;
    margin: 20px 0px;
    text-align: center;
}

.numbers-cowntdown{
    font: 27pt BrandonGrotesque-Black,Helvetica,Arial,sans-serif ;
    color: #000;
    background-color: #fff;
    margin: 20px 0px;
    text-align: center;
}



/*-----------------------------------------*/




.about-section {
    padding: 70px 0px;
    text-align: center;
    background: #000;
    color: #fff;
}

.bg-about{
    height: 100%;
}

.about-text{
    padding:  10% 0px;
}

.about-video{
    padding-top: 10%;
    padding-bottom: 0px;
   
}

.title-about{
    display: inline-block;
    text-align: center;
    padding-bottom: 20px;
}

/* Button */

.btn-default {
    margin-top: 50px;
    color: #000;
    background-color: #fff;
    border-color: #fff;
}

.btn-group-lg>.btn, .btn-lg {
    padding: 14px 22px;
    font: 15pt CircularStdbold,Helvetica,Arial,sans-serif;
    text-transform:  uppercase;
    line-height: 1.3333333;
    border-radius: 16px;
}











.content-section {
    /*height: 100%;*/
    padding-top: 0px;
    text-align: center;
    background: #F6F6F6;
}

.icons{
    padding: 70px 0px;
}

.icon{
    padding: 40px 20px;
}

.icon-image{
    display: inline-block;
    text-align: center;
    padding-bottom: 0px;
}


/*------ Buy section -----------------------------------*/

.buy-section{
    padding: 70px 0px;
    text-align: center;
}

.buy-divider{
    background: url(../images/divider-buy.png) no-repeat center center;
    width: auto;
    height: 28px;
    margin: 20px 0; 
}

.buy-section h2{
    font-size: 20pt;
}

.buy-section h2 span{
    font-size: 15pt;
}

.buy-rotulo{
    padding:  10% 0px;
}

.social-button{
    margin: 5px 0;
}

.space{
    height: 10px;
}

.donate-button{
    display: none;
    padding: 20px 0;
}


.tnc-text{
    padding: 0 10%;
}




/*------------ gorta ---------------*/
.gorta-section{
    background: #F6F6F6;
    padding: 70px 0;
}


.gorta-text{
    font: 13pt BrandonGrotesque-RegularItalic,Helvetica,Arial,sans-serif;
    padding: 0 10%;
}

.gorta-margin{
    padding: 60px 0;
}


.col-md-6{
    padding: 0;
}

.gorta-section p{
    text-align: center;
    padding-top: 20px;
}

.gorta-section a {
    color: #000;
    text-decoration: underline;
}

.gorta-logo{
    text-align: center !important;
}

footer{
    background-color: #000;
    color: #fff;
    text-align: center;
}




/*! Retirando bordas das grides centrais */

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
    position: relative;
    min-height: 1px;
    padding-right: 0px; 
    padding-left: 0px; 
}


/* retirando margem das rows */

.row {
    margin-right: 0px;
    margin-left: 0px;
}

/* font menu */

.page-scroll{
    font: 11pt CircularStdbold,Helvetica,Arial,sans-serif;
    text-transform:  uppercase;
    
}

.navbar-default .navbar-nav>li>a {
    color: #000;
}






/* color menu */

.navbar-default {
    background-color: #fff;
    border-color: #fff;
}

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover {
    color: #666;
    background-color: #fff;
}




/* toogle menu */
.navbar-default .navbar-toggle {
    border-style: none;
    border-color: #ddd; 
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #000;
}