/* Cucco Header - responsivo 
    08/05/2017
    ver na url: https://tableless.com.br/header-responsivo-somente-com-css/
*/ 


/* Top navigation of the site */

div.topHeader {
	width: calc(100% - 5px);                       /* div.top{} 100%  19/03/2017*/
	margin-bottom: 10px;
	padding: 4px 0;
	display: inline-block;
	background: url(../images/bkgTop.jpg);
        background-size: contain;
	-moz-box-shadow: 0 3px 5px #CCCCCC;
	-webkit-box-shadow: 0 3px 5px #CCCCCC;
	box-shadow: 0 3px 5px #CCCCCC;
}


div.wrapperHeader {
        width: 100%;                                /* incluido em 05/04/2017*/
        max-width: 960px;                           /* width=960px 19/03/2017*/
	margin: 0 auto;
}


div.navHeader {
	float: right;
	width: 60%;           /* div.top div.nav{} 687px/960px;71.5625% 19/03/2017*/
        max-height: 49px;
	font-size: 0.8em;
	color: #FFF;
	margin-top: 2px;
        margin-right: 4px;
        margin-bottom: 2px;
        display: inline-block;
}
div.navHeader div.txtAcesseCom {
    float:  right; 
    margin-top: 7px;
}

div.topHeader div.brandHeader {
	float: left;
	width: 28.4375%;                            /* div.top div.brand{} 273px/960px; 19/03/2017*/
    left: 0;
}

div.topHeader div.brandHeader a {
	display: block;
	background: url(../images/cucco.png) no-repeat;
	width: 165px;
	height: 46px;
	float: left;    
}

div.topHeader div.mainPageHeader{
    float: left;
    color: white;
    display: none;
    margin-top: 9px;
    margin-left: 10px;
}

div.topHeader div.mainPageHeader a:hover{
    color: orange;
}


.nomeHeader {
	display: block;
	float: left;
	padding: 8px 12px;
	border-radius:5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	-webkit-border-radius: 5px 0 0 5px;
}
div.txtAcesseCom {
    color: #5aafc9;
    text-decoration: underline;
    float: right;
    margin-top: 7px;
    margin-left: 10px;
}

div.navHeader a.btnEntrar {
	color: #FFF;
	margin-left: 20px;
	margin-top: 3px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	text-decoration: none!important;
	background: url(../images/bkgBtnLogin.jpg);
	display: block;
	float: right;
	cursor: pointer;
	padding: 8px 16px;
	border-left: 1px solid #C08D1E;
	border-right: 1px solid #C08D1E;
}

div.navHeader a.btnEntrar:hover {
	color: #000;
}

.loggedMenuHeader {
	float: right;
}

.setaBtn {
	margin-left: -3px;
	border-left: 1px solid #E1982E;
	border-radius:0px 5px 5px 0px;
	-moz-border-radius: 0px 5px 5px 0px;
	-webkit-border-radius: 0px 5px 5px 0px;
	height: 29px;
}

.seta {
	float: right;
	border-right: none;
	display: block;
	width: 8px;
	margin: 13px 12px!important;
	padding: 0;
	height: 4px;
	background: url(../images/btnLoginSeta.jpg) no-repeat;
}

ul.logMenuHeader{
    float: right;
}

ul.logMenu {
	display: none;
    float: right;
        position: absolute;
        background: url(../images/bkgUserMenu.png);
    padding-top: 6px!important;
	margin-top: 25px!important;
 
	height: 130px;
        z-index: 989;
        border-radius: 0px 0px 12px 12px;  
	-moz-border-radius: 0px 0px 12px 12px;
	-webkit-border-radius: 0px 0px 12px 12px;        
}

ul.logMenu li {
	clear: both;
	display: block;
	height: 25px!important;         /* 41px*/
}

ul.logMenu li a {
	width: 129px;
	display: block;
	text-decoration: none;
	color: #FFF;
	padding: 5px 12px!important;
	margin-left: 1px;
}

ul.logMenu li a:hover {
	background: #EEA000;
	text-decoration: none!important;
}

div.contemFB {
    margin-top: 3px;
    margin-left:0px;
    height: 73px;
}

div.contemFB div.wrapperFB {
	background: url(../images/bkgTop.jpg) no-repeat;
        background-size: cover;
        border-radius:         3px 3px 3px 3px;  
	-moz-border-radius:    3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;        
        width: 190px;
        height: 29px;
        float: right;
}
div.wrapperFB div.btnContemFB {
        background-size: contain;
        background: url(../images/facebookIcone27.png) no-repeat; 
        float: left;
        height: 27px;
        width: 28px;
}
div.contemFB div.wrapperFB div.entrarUsandoFB {
        float: right;
        font-size: 0.8em;
        margin-top: 8px;
        padding-right: 3px;
        color: white;
        width: 147px;
        text-align: right;
}

div.contemFB .wrapperFB:hover {
	-moz-box-shadow:    3px 5px 12px black;
	-webkit-box-shadow: 3px 5px 12px black;
	box-shadow:         3px 5px 12px black;  /* #CCCCCC;         h-offset v-offset blur*/
	/*background: url(../images/bkgTop-copia.jpg);*/
}
div.contemFB div.wrapperFB .entrarUsandoFB:hover {
    color: orange;
}
div.contemFB h6, h6.cadastrarSe{
    font-family: "Avenir Next", Arial, Verdana, sans-serif;
    font-size:   0.9em;
}
.naoPostaremos{
    font-family: "Avenir Next", Arial, Verdana, sans-serif;
    font-size: 0.6em;
    float: right;
}
div.fbOuBtn {
    font-family: "Avenir Next", Arial, Verdana, sans-serif;
    font-size: 0.8em;
}

div.tracoHrLeft {
    width: 38%;      /* 120px;*/
    float: left;
    margin-right: 10px;
}
div.tracoHrRight {
    width: 38%;         /* 120px; */
    float: right;
    margin-left: 5px;
}

@media only screen and (min-width: 961px){
    ul.logMenu {
            margin-left: 423px;                               /* 521px; 535px/687px  class=nav*/
    }
}
@media only screen and (max-width: 960px){
    ul.logMenu {
            right: 1.1%;                                /* 1.3333%; 535px/687px  class=nav*/
    }
}

@media only screen and (max-width: 780px){          /* 21/03/2017  iPad 768px x 1024px */
    div.navHeader{
        right: -4px;
     }
    .nomeHeader {
        width: 140px;
        height: 14px;
        font-size: 0.8em;
        right: 0;
        float: left;
    }
}

@media only screen and (max-width: 540px){ 
     div.txtAcesseCom {
         display: none;
     } 
}

@media only screen and (max-width: 480px){        
    div.brandHeader a {
         background-size: contain;                   /* incluido 03/04/2017*/
         width: 100px;                /* div.top div.brand a{}165px;/273px=60.43956% do div.brand */
         margin-top: 9px;
    }
    div.navHeader a.btnEntrar {
	margin-left: 5px;
	padding: 8px 6px;
    }
    div.loggedMenuHeader a.loginButton {
	width: 10px;
        border-left: none;
    }

    div.contemFB h6, h6.cadastrarSe{
        font-size:   0.8em;
    }
    
}

@media only screen and (max-width: 420px){
    .nomeHeader {
        width: 120px;
    }
    
}