/*************************/
/********* HEADER *********/
/*************************/
html, body{min-width: 336px;}
body.inicio #top { position: fixed; background-color: transparent; left: 0; top: 0; width: 100%; z-index: 1000;
	-webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    -ms-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
#top {background-color: #222; padding: 10px 20px; width: 100%; height: 63px; border-bottom: none; z-index: 101; position: relative;}

#top .logo_n{display: none;}
#top.header-n .logo_b{display: none;}
#top.header-n .logo_n{display: block;}
body.inicio #top.active{background-color: rgba(0,0,0,0.65);}
body.inicio #top.active.header-n .logo_b{display: block;}
body.inicio #top.active.header-n .logo_n{display: none;}
#top menu { padding-top: 60px; position: fixed; right: -320px; opacity: 0; right: -120px; visibility: hidden; top: 0; width: 100%; max-width: 320px; height: 100%; background-color: #000; overflow-x: hidden; z-index: 102;
    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease;
    -moz-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease;
    -o-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease;
    -ms-transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease;
    transition: opacity 0.3s ease, visibility 0.3s ease, right 0.3s ease;
}
#top menu ul > li { display: block; width: 100%; margin-bottom: 0;}
#top menu ul > li > a { display: block; color: #fff; font-size: 15px; border-bottom: 1px solid #313030; padding-top: 13px; padding-bottom: 13px; padding-left: 20px; padding-right: 20px; text-align: left;
    -webkit-transition: border-color 0.3s ease, padding-bottom 0.3s ease;
    -moz-transition: border-color 0.3s ease, padding-bottom 0.3s ease;
    -o-transition: border-color 0.3s ease, padding-bottom 0.3s ease;
    -ms-transition: border-color 0.3s ease, padding-bottom 0.3s ease;
    transition: border-color 0.3s ease, padding-bottom 0.3s ease;
}

.btn-menu-responsive-close { position: absolute; right: 20px; top: 20px;}
.btn-search-responsive { display: none; background: #FFA000; color: #fff; font-size: 1.2em;}
.btn-search-responsive i {}
.btn-search-responsive:hover, .btn-search-responsive.active{color: #fff;background-color: #FFC107;}

.search-header {background: #fff; height: 42px; width: 180px; border-radius: 4px; position: relative;}
.search-header form {height: 100%;}
.search-text { width: 100%; height: 100%; background: transparent; border: 1px solid transparent !important; padding-left: 30px; padding-right: 10px; color: black !important; font: inherit; -webkit-appearance: none !important;}
.lens { position: absolute; left: 10px; top: 0; bottom: 0; padding-bottom: 1px;}

.btn-menu { position: absolute; right: 16px; top: 0; bottom: 0; margin: auto; height: 100%;}
.btn-menu a {width: 33px;height: 20px;}
body.inicio #top.header-n .btn-menu a svg rect{fill: #000;
	-webkit-transition: fill 0.3s ease;
    -moz-transition: fill 0.3s ease;
    -o-transition: fill 0.3s ease;
    -ms-transition: fill 0.3s ease;
    transition: fill 0.3s ease;
	}
body.inicio #top.header-n.active .btn-menu a svg rect{fill: #fff;}

.main-nav {float: right; margin-right: 20px; margin-right: 0; padding-right: 44px;}
.perfil .main-nav{padding-right: 0;}
/*.perfil .main-nav, .Noticia .main-nav, .Reportaje .main-nav, .Entrevista .main-nav {padding-right: 0;}*/
.template-editor .main-nav{padding-right: 0;}
.main-nav--item { position: relative; float: left; margin-bottom: 0; margin-left: 10px;}
.main-nav--button { display: inline-block; height: 40px; line-height: 41px; padding: 0 15px;text-transform: uppercase; color: #ccc; background: #111; background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; border: 1px solid transparent;}
.main-nav--select {box-shadow: inset 2px 2px 5px #000; border-color: #444;}
.main-nav--select:after { display: inline-block; content: ''; width: 7px; height: 4px; margin-left: 10px; vertical-align: middle; background: url('iconos/arrow.png');}
.main-nav--menu {position: absolute; z-index: 4; width: 420px; top: 100%; right: -4px; margin-top: -4px;}

.button.button-publisher{background-color: rgb(255,77,109);}
.button.button-publisher:hover{background-color: rgb(255,77,109);}
.main-nav--button-publish{background-color: rgb(46, 197, 113);height: 42px;line-height: 42px;}
.main-nav--button-publish:hover{background-color: rgb(46, 197, 113);}
.main-nav--button-exit{background-color: rgb(255, 84, 115);}
.main-nav--button-exit:hover{background-color: rgb(255, 84, 115);}

#site-logo, #site-status > p {display: inline-block;}
#site-logo{position: relative;}
#site-logo img{width: 190px; display: block;}

#site-status {margin: 0 0 0 10px; white-space: nowrap; padding: 5px 15px; border: 2px solid #fff;
    border-radius: 3px; color: #fff;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-webkit-transition: background-color 0.3s ease, border-color 0.3s ease;
    -moz-transition: background-color 0.3s ease, border-color 0.3s ease;
    -o-transition: background-color 0.3s ease, border-color 0.3s ease;
    -ms-transition: background-color 0.3s ease, border-color 0.3s ease;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
#site-status p {white-space: nowrap; margin-bottom: 0; font-size: 12px; font-weight: bold;}
body.inicio #top.header-n #site-status{border-color: #000; color: #000;}
body.inicio #top.header-n.active #site-status{border-color: #fff; color: #fff;}

#site-status.active { opacity: 1; left: 100%;}
#site-status:before { display: none; content: ''; position: absolute; width: 5px; height: 9px; top: 50%; left: -4px; margin-top: -5px; background: url('../icons/status-arrow.png');}

.social-sharer-header{margin-left: 10px;}
.social-sharer-header a{padding: 5px 5px 4px; color: #fff; margin-left: 5px; line-height: 1em; position: relative;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
}
.social-sharer-header a.f{background-color: #3b5998;}
.social-sharer-header a.r{background-color: #ff920a;}
.social-sharer-header a.t{background-color: #55acee;}
.social-sharer-header a:hover{opacity: 0.9;}
.social-sharer-header a:active{top: 1px;}

@media only screen and (max-width: 1023px){
	.main-nav .main-nav--item.onmenu .btn-txt, .button.edit .btn-txt{
		display: none !important;
	}
	.button i{
		margin-right: 0;
	}
	.main-nav--button-publish i, .btn-search-responsive i{margin-right: 0;}
	.main-nav--item{margin-left: 6px;}
	.btn-search-responsive{display: inline-block;}
	.search-header{ opacity: 0; visibility: hidden; position: fixed; height: 56px;  top: 73px; left: 0; width: 100%; border-radius: 0;
	    box-shadow: 0 4px 6px rgba(0,0,0,0.3); z-index: 101;
	    -webkit-transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
	    -moz-transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
	    -o-transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
	    -ms-transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
	    transition: opacity 0.3s ease, visibility 0.3s ease, top 0.3s ease;
	}


	.search-header.active{top: 63px; opacity: 1; visibility: visible;}
	.search-text{padding-left: 42px; font-size: 1.2em;}
	.lens{font-size: 1.5em; left: 11px;}

}
@media only screen and (max-width: 767px){
	#site-logo{
		position: relative;
		width: 30px;
		overflow: hidden;
		height: 100%;

	}
	#site-logo img{
		width: 170px;
	    position: absolute;
	    left: 0;
	    top: 0;
	    bottom: 0;
	    margin: auto;
	    max-width: none;
	}

	#site-status{display: none !important;}


	input[type="search"] {
	  box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  -webkit-box-sizing: border-box;
	  font-size: 1.2em;
	}
}
@media only screen and (max-width: 480px){
	.main-nav--button-publish {
		height: 30px;
    line-height: 30px;
	}
}
@media only screen and (max-width: 450px){

}