/* ============================ Cabeçalho ============================ */
.header {
	/*
	=== Variaveis do cabeçalho ===
	=== obs: Algumas podem estar orientadas pelas variaveis globais do front ===
	=== Favor manter a ordem das variaveis locais deste componente. :) ===
	*/

	--logo-size : 250px;

	/* Densidade principal */
	--container-content-header-width: 95%;
	--container-content-header-height: 120px;
	--grow-logo: 2;
	--grow-tools: 8;

	/* Densidade da barra tools */
	--tools-vertical: 30%; /* relação com --busca-vertical */
	--grow-logado: 3;
	--grow-links: 7;

	/* Densidade da barra busca */
	--busca-vertical: 70%; /* relação com --tools-vertical */
	--grow-busca: 9;
	--grow-carrinho: 1;

	position: relative;
}

@media(max-width: 680px){
	.macrobox-busca{
		flex-direction: column;
	}
}

.header.carrinho {
	--container-content-header-height: 67px;
}

.login-page .container-tools .macrobox-busca {
    display: none;
}

.login-page #menu {
    display: none;
}

/* ====== Fixed ====== */

.spaceHeadTop{
    height: 120px;
    display:none;
}

.spaceHeadTop .fixed{
    height: 120px;
    display:block;
}

.fixed /* Fixed, macro classe aplicada ao cabeçalho que acontece quando o cabeçalho some da visão do usuário. */
{
	--container-content-header-height: 70px;
	--busca-vertical: 100%;
}

.fixed{
	position: fixed;
	width: 100%;
	z-index: 200;
	box-shadow: 0 5px 15px rgba(0,0,0,0.1);

	animation: animate_navbar 0.4s;

}
.fixed .macrocontainer-header{
}

.fixed .container-logo img {
	height: 35px;
}

.fixed #headerMain {
}

.fixed 	.macrobox-infos{
	display: none;
}

.fixed .navbar-editoraFoco{
}


/* The animation code */
@keyframes animate_navbar {
	from {top: -200px;}
	to {top: 0px;}
}

/* ====== Fim Fixed ====== */


	#headerMain {
		background-color: var(--fc-bg-color-secondary);
		min-height: var(--container-content-header-height);
	}

	.macrocontainer-header{
		display: flex;
		flex-wrap: nowrap;
		width: var(--container-content-header-width);
        min-height: var(--container-content-header-height);
		background-color: var(--fc-bg-color-secondary);
		margin: auto;
		padding: 10px;

	}
    .macrocontainer-header > div{
        padding: 5px;
    }

	/* ====== Container Logo ====== */
	.container-logo{
		flex-grow: var(--grow-logo);

		/* Align */
		display: flex;
		align-items: center;
		justify-content: center;
	}
	/* ====== Fim Container Logo ====== */


	/* ====== Container tools ====== */
	.container-tools{
		flex-grow: var(--grow-tools);

	}
		/*  Bloco Infos  */
		.macrobox-infos{
			display: flex;
			flex-wrap: nowrap;
			height: var(--tools-vertical);

		}
			.box-logado{
				flex-grow: var(--grow-logado);

                /* Align */
                display: flex;
                align-items: flex-end;
                justify-content: left;

			}
			.box-links{
				flex-grow: var(--grow-links);
                display: flex;
                flex-wrap: nowrap;
                justify-content: center;

                /* Align */
                align-items: center;


			}

			.box-links > div{
			    text-align: center;

			}


			.box-links a{

			    color: #333333;

                -webkit-transition: all 0.3s ease-out;
                -moz-transition: all 0.3s ease-out;
                -o-transition: all 0.3s ease-out;
                transition: all 0.3s ease-out;
			}

			.box-links a:hover{
                color: var(--fc-color-main);
                text-decoration: none;
                opacity: 0.8;

            }
		/* Fim Bloco Infos  */


		/*  Bloco Busca  */
		.macrobox-busca{
			display: flex;
			flex-wrap: nowrap;
			height: var(--busca-vertical);
			justify-content: space-between;
		}
			.box-busca{
				flex-grow: var(--grow-busca);

                /* Align */
                display: flex;
                align-items: center;
                justify-content: center;
			}
			.box-carrinho{
				flex-grow: var(--grow-carrinho);
                /* Align */
                padding-left: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
			}

			.box-carrinho i{
				color: var(--fc-color-main);
				cursor: pointer;
				  -webkit-transition: all 0.3s ease-out;
                    -moz-transition: all 0.3s ease-out;
                    -o-transition: all 0.3s ease-out;
                    transition: all 0.3s ease-out;
			}
			.box-carrinho i:hover{
			    color: #3956b1;
			}
			.box-carrinho .badge{
			    background-color: #ff0000;
			}

		 /*  Fim Bloco Busca  */

	/* ====== Fim Container tools ====== */


	/* ====== Media Screens ====== */
	/* Small devices*/
	@media (max-width: 576px) {
	.container-logo > a > img{
    	    height: 35px;
    	}

	}

    /* Medium devices */
    @media (max-width: 768px) {
        .macrocontainer-header, .macrobox-infos{
            flex-direction: column;
        }

        .box-logado{
            flex-grow: var(--grow-logado);
            /* Align */
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 10px;
        }

        .box-links{
            //display: none;
            align-items: center;
            justify-content: center;
            padding-bottom: 10px;
        }

        .box-carrinho{
            position: absolute;
            top:0px;
            right: 7px;
            top: 7px;
        }
        .box-carrinho i{
             color: #8f8f8f;
             font-size: 25px;
        }

		.fixed .navbar-editoraFoco{
			display: block;
		}
     }

    /* Large devices */
    @media (max-width: 992px) {}

    /* Extra large devices */
    @media (max-width: 1280px) {
        .macrocontainer-header{
                width: 100%;
        }

       .item-contato{
        display:none;
       }
     }
    /* ====== Fim Media Screens ====== */


	/* ============================ Fim Cabeçalho ============================ */


@media (min-width: 768px){
	.fixed .navbar-editoraFoco{
		display: none;
	}
}



	/* ====== Menu Responsivo ====== */
	/*.navbar-editoraFoco{
		background-color: var(--fc-color-main) !important;
		border-radius: 0px !important;
		border: 0px !important;
		font-weight: bold;
        margin-bottom: 0px !important;
        min-height: 0px;

    }

    .navbar-editoraFoco .navbar-toggle{
        position: absolute;
        top: -168px;
        float: left;
		z-index: 1000;
    }

	.fixed .navbar-editoraFoco .navbar-toggle{
		position: absolute;
		top: -120px;
		float: left;
		z-index: 1000;
	}

    .navbar-editoraFoco .icon-bar{
        height: 3px;
        background-color: #8f8f8f !important;
    }

	.navbar-default .navbar-collapse, .navbar-default .navbar-form {
		border-color: #dcdde0;
		padding: 0px;
	}

	.navbar-editoraFoco .nav{
		background: transparent;
	}

	.center-navbar{

		margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.list-menu{
		 display: flex;
		 flex-wrap: nowrap;
		 height: 100%;

	}

	.list-menu  div{
		font-family: 'Roboto', sans-serif;
		font-size: 13px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20%;
		height: 50px;
		background-color: transparent;
		text-align: center;
		cursor: pointer;
		color:#ffffff;
		-webkit-transition: all 0.3s;
		transition: all 0.3s;
	}

	.list-menu  div:hover{
	  background-color: #ffffff;
	  padding-bottom: 10px;
	  color:#333333 !important;
    }

    .list-menu div a{
        display: block;
        width: 200px;
        height:100%;
        color: #ffffff;

        display: flex;
        align-items: center;
        justify-content: center;

    }

    .list-menu div:hover a{
     color:#333333;



    }

        .list-menu div:hover a:hover{
         text-decoration: none;

        }


*/
    /* ====== Fim Menu Responsivo ====== */



	/* ---- LOGO ---- */

	#logo {
		width: var(--logo-size);
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100%;
		float: left;
	}

	#logo img {
		max-width: calc(var(--logo-size) - 50px);
	}




	/* ---- HEADER INFO ----*/

	#headerInfo {
		padding: 0 60px 20px 30px;
		height: 100%;
		width: calc(100% - var(--logo-size));
		float: left;
	}

	.header-info-row {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 50%;


	}



	.header-info-row a:hover,click,active,visited {

		color:#777777;
		text-decoration: none;
	}


	.header-info-row a {
		color: #333333;
		text-decoration: none;

	}

	#loginRegistro {

	}

	#loginRegistro a {
		text-decoration: underline;
	}

	.header-info-row .header-links a {
		margin: 0 10px;
	}

	/* ---- HEADER BUSCA ----*/

	#headerBusca {
		float: left;
		width: 100%;
		padding-right: 0px;
	}


	 .busca_input{
		width: 80%;
		height: 50px;

	}

	::placeholder {
		font-family: 'Roboto', sans-serif;

	}

	.bt-search{
		background-color: #fff;
		width: auto;
		/*height: 50px !important;*/
	}

	#btnMeuCarrinho {
		min-width: 180px;
	}

	/* ---- HEADER NAV ----*/


/*	.fc-nav-categoria {
		position: relative;
		list-style-type: none;
		padding: 10px 30px;
	}

	.fc-nav-categoria a {
		text-decoration: none;
		font-weight: var(--fc-font-weight-strong);
		color: #4a4a4a;
	}

	.fc-nav-categoria:hover {
		cursor: pointer;
		background-color: var(--fc-color-main);
	}

	.fc-nav-categoria:hover > a {
		color: initial;
	}

	.fc-nav-categoria:hover > .fc-nav-dropdown {
		visibility: visible;
	}

	.fc-nav-dropdown {
		visibility: hidden;
		display: flex;
		align-items: center;
		flex-flow: column;
		position: absolute;
		list-style-type: none;
		width: 100%;
		padding: 0;
		left: 0;
		top: 40px;
		background-color: var(--fc-bg-color-secondary);
		z-index: 100;
	}

	.fc-nav-dropdown > li {
		padding: 5px 0;
		width: 100%;
		text-align: center;
		vertical-align: middle;
	}

	.fc-nav-dropdown > li:first-of-type {
		margin-top: 5px;
	}

	.fc-nav-dropdown > li:last-of-type {
		margin-bottom: 5px;
	}

	.fc-nav-dropdown > li:hover {
		background-color: var(--fc-color-main);
	}

	.fc-nav-dropdown > li:hover > a {
		color : var(--fc-color-on-bg-color-main);
	}





*/





.menu_icon_bar {
	margin: 15% auto;
	display: block;
	width: 45px;
	height: 45px;
	position: relative;
	display: block;
	width: 1.5em;
	height: 0.25em;
	background: #8f8f8f;
	border-radius: 3px;
	cursor: pointer;
	transition: transform .2s ease;

}
.menu_icon_bar:before, .menu_icon_bar:after {
	border-radius: 3px;
	transition: transform .3s ease;
}
.menu_icon_bar:before {
	content: '';
	display: block;
	position: absolute;
	width: 1.5em;
	height: 0.25em;
	top: -0.5em;
	background: #8f8f8f;
}
.menu_icon_bar:after {
	content: '';
	display: block;
	position: absolute;
	width: 1.5em;
	height: 0.25em;
	top: 0.5em;
	background: #8f8f8f;
}
.menu_icon_bar.close {
	width: 50px;
	height: 50px;
	margin: 15% auto;
	left: 27px;
	top: 10px;
	position: relative;
	display: block;
	width: 0;
	height: 0;
	opacity:1;
	background: transparent;
	transform: rotate(-180deg) scale(0.95);

}
.menu_icon_bar.close:before, .menu_icon_bar.close:after {
	transition: transform .3s ease;
}
.menu_icon_bar.close:before {
	content: '';
	display: block;
	position: absolute;
	width: 1.5em;
	height: 0.25em;
	top: 0;
	background: var(--fc-color-main);
	transform: rotate(-45deg);
}
.menu_icon_bar.close:after {
	content: '';
	display: block;
	position: absolute;
	width: 1.5em;
	height: 0.25em;
	top: 0;
	background: var(--fc-color-main);
	transform: rotate(45deg);
}

/* NOVO MENU DE CATEGORIAS E SUB CATEGORIAS */

.seta-cima{
    transform: rotate(0deg) !important;
    transition: all 0.6s;
}

.seta-baixo{
    transform: rotate(180deg) !important;
    transition: all 0.6s;
}

.navbar-editoraFoco{
        background-color: #0f4788;
        margin: 0px;
        padding: 0px;
 }
@media (min-width: 768px) {

  .navbar-collapse.collapse {
    display: flex !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
  }
}

.navbar-collapse.collapse{
  justify-content: space-between !important;
   width: 100%;
   align-items: center;
   padding:0px;
   background-color:#0f4788;

}

.navbar{
  margin:0px;
  padding:0px;
}

#menuEditoraFoco .nav-link{
  color:#ffffff;
   text-decoration:none;
}

.nav-item{
  display:relative;
  padding:10px;
  flex:1;
  text-align:center;
  -webkit-transition: all 0.3s;
	transition: all 0.3s;
	flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
     text-decoration:none;
}
.nav-item:hover{
    background-color: #ffffff;
	padding-bottom: 15px !important;
    padding-top:5px;
	color:#333333 ;
	text-decoration:none;
}

.dropdown:hover, .dropdown .nav-link:hover{

    background-color:#ffffff;
    padding-bottom: 10px !important;
    padding-top:10px;
    text-decoration:none;
 }

.nav-item:hover .nav-link{
     color:#333333 !important;
  }

.dropdown-menu {
  background: #0f4788;
  width:100%;
  border:0px;
  border-radius:0px;
  margin:0px;
  padding:10px;
  text-align: center;

}


.open>.dropdown-menu{
  animation: 0.4s animate_subcategoria;
  display: flex;
      flex-direction: column;
}

.dropdown-item{
    padding: 10px;
    color:#fff;
}

.dropdown-item:hover{
    color:#fff;

}

@keyframes animate_subcategoria {
	from {top: -5px;opacity:0}
	to {top: 40px; opacity:1}
}

.navbar-header{
	top: 10px;
}

@media (max-width: 768px){
		.navbar-editoraFoco .nav{
			font-size:15px;
		}

        .nav-item{
            width:100vw;
        }

		.navbar-editoraFoco > .navbar-collapse.collapse.in {
		    display:flex;
		    flex-direction: column;
		}

		.open>.dropdown-menu{
		    position:relative;
		    background:#fff;
		    border:none;
		    box-shadow: none;
		    color:#0f4788;
  		}

  		.dropdown-menu a{
  		    color:#0f4788;
  		}

        @keyframes animate_subcategoria {
        	from {top: -5px;opacity:0}
        	to {top: 5px; opacity:1}
        }


	}