/* ============================================ */
/* CSS By http://nerdweb.com.br */
/* ============================================ */

/*--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--*/
/* --== HEADER =============================================-- */
header {width:100%;height:auto;float:left;padding:0px 40px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;z-index:998;}
.header-bg-full {background:rgba(0, 0, 0, 1);transition:0.1s;}
.header-bg-small {background:rgba(0, 0, 0, 0.95);transition:0.3s;}
header .center-header {max-width:1280px;width:100%;height:auto;display:flex;flex-direction:row;justify-content:center;align-items:center;}

/* --== LOGO ==-- */
header .center-header .logo {width:280px;height:auto;float:left;display:block;position:relative;z-index:100;cursor:pointer;}
header .center-header .logo h1 {width:auto;height:auto;float:left;display:flex;}
header .center-header .logo a {width:auto;height:auto;float:left;display:flex;}
header .center-header .logo img {width:100%;height:auto;padding:10px;}
header .center-header .logo .logo-full {max-width:250px;margin:10px 0px;transition:0.1s;}
header .center-header .logo .logo-small {max-width:220px;margin:4px 0px;transition:0.3s;}

/* --== NAV ==-- */
header .center-header .box-nav {width:calc(100% - 280px);height:auto;float:left;display:flex;position:relative;}
header .center-header .box-nav .nav-web {width:calc(100% - 180px);height:auto;float:left;display:flex;align-items:center;}
header .center-header .box-nav .nav-web ul {width:100%;height:auto;float:left;display:flex;flex-direction:row;justify-content:flex-end;align-items:center;}
header .center-header .box-nav .nav-web ul li {width:auto;height:auto;float:left;margin:0px 15px 0px 0px;display:block;}
header .center-header .box-nav .nav-web ul li:nth-last-child(1) {margin-right:0px;}
header .center-header .box-nav .nav-web ul li:first-child {margin-left:0px;}
header .center-header .box-nav .nav-web ul li a {width:auto;height:auto;font-size:13px;color:#FFFFFF;line-height:50px;font-weight:500;cursor:pointer;transition:0.2s;}
header .center-header .box-nav .nav-web ul li a:hover {color:#FFA800;}
header .center-header .box-nav .nav-sites {width:auto;max-width:170px;height:auto;float:right;display:flex;align-items:center;}
header .center-header .box-nav .nav-sites ul {width:auto;height:auto;float:left;display:block;}
header .center-header .box-nav .nav-sites ul li {width:auto;height:auto;float:left;margin:0px 20px;display:block;border:1px solid #ffc700;background-image:linear-gradient(45deg, #FFA800 50%, transparent 50%);background-position:100%;background-size:400%;transition:background 250ms ease-in-out;transition:0.3s;}
header .center-header .box-nav .nav-sites ul li:nth-last-child(1) {margin-right:0px;}
header .center-header .box-nav .nav-sites ul li a {width:auto;height:auto;font-size:13px;color:#FFFFFF;line-height:40px;font-weight:500;padding:0px 25px;cursor:pointer;transition:0.2s;}
header .center-header .box-nav .nav-sites ul li:hover {border:1px solid #FFA800;background-position:0;transition:0.3s;}
header .center-header .box-nav .nav-sites ul li:hover a {color:#000000;}
header .center-header .box-nav .container {width:auto;height:auto;}
header .center-header .box-nav .menu-mobile {width:auto;height:auto;font-size:30px;line-height:30px;color:#FFFFFF;float:right;display:none;cursor:pointer;}
header .center-header .box-nav .menu-mobile:hover {color:#FFA800;}

/* MENU MOBILE Overlay style */
header .overlay {width:100%;height:100%;top:0;left:0;position:fixed;z-index:999;}

/* MENU MOBILE Overlay closing cross */
header .overlay .overlay-close {width:40px;height:40px;position:absolute;right:20px;top:20px;overflow:hidden;border:none;background:url(../img/cross.png) no-repeat center center;text-indent:200%;color:transparent;outline:none;z-index:100;}
header .overlay .overlay-close:hover {background:url(../img/cross-hover.png) no-repeat center center;}

/* MENU MOBILE Menu style */
header .overlay nav {text-align:center;position:relative;top:50%;height:60%;-webkit-transform:translateY(-50%);transform:translateY(-50%);}
header .overlay ul {list-style:none;padding:0;margin:0 auto;display:inline-block;height:100%;position:relative;}
header .overlay ul li {display:block;height:20%;height:calc(100% / 5);min-height:54px;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
header .overlay ul li a {font-size:30px;font-weight:300;display:block;color:#fff;-webkit-transition:color 0.2s;transition:color 0.2s;}
header .overlay ul li a:hover,
header .overlay ul li a:focus {color:#FFA800;}

/* MENU MOBILE Effects */
header .overlay-contentpush {background:rgba(0, 0, 0, 0.9);visibility:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform:translateX(-100%);transform:translateX(-100%);-webkit-transition:-webkit-transform 0.5s,visibility 0s 0.5s;transition:transform 0.5s,visibility 0s 0.5s;}

header .overlay-contentpush.open {visibility:visible;-webkit-transform:translateX(0%);transform: translateX(0%);-webkit-transition:-webkit-transform 0.5s;transition:transform 0.5s;}


/*--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--*/
/* --== MEDIA 950px ========================================-- */
@media all and (max-width:950px){
/* --== MENU ==-- */
header {padding:0px 20px;}
header .center-header {justify-content:space-between;}
header .center-header .box-nav {width:calc(100% - 185px);display:block;align-items:flex-end;}
header .center-header .box-nav .menu-mobile {display:flex;}
header .center-header .box-nav .nav-web {display:none;}
header .center-header .box-nav .nav-sites {display:none;}
}

/*--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--*/
/* --== MEDIA 500px ========================================-- */
@media all and (max-width:500px){
/* --== MENU MOBILE - MENU ==-- */
header .overlay ul li a {font-size:22px;}
}

/*--=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--*/
/* --== MEDIA - MENU MOBILE HEIGHT =========================-- */
@media screen and (max-height:30.5em) {
header .overlay nav {height:70%;font-size:34px;}
header .overlay ul li {min-height:34px;}
}


/* ============================================ */
/* CSS By http://nerdweb.com.br */
/* ============================================ */