/* -----------------------------------------------------------------------------------
	
	CUSTOM MAGAZINE STYLE

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

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,500,700&display=swap');


/*------------------------
STRUCTURE & MENU 
------------------------*/
nav#main-nav ul > li > a {
	font-weight: 300;
	font-size: 18px;
	line-height: 26px;
	}
	nav#main-nav > ul > li ul.sub-menu li a {
	font-weight: 300;
	font-size: 18px;
	line-height: 25px;
}

#menu:not(.classic) nav#main-nav > ul > li {
	margin: 1em 0;
	display: block;
	padding: 0;
	position: relative;
	-webkit-transform: translateY(45px);
  	-moz-transform: translateY(45px);
  	-ms-transform: translateY(45px);
  	-o-transform: translateY(45px);
  	transform: translateY(45px);
	-webkit-transition: all 499ms cubic-bezier(0.4, 0.1, 0.000, 1.0);
	   -moz-transition: all 499ms cubic-bezier(0.4, 0.1, 0.000, 1.0);
		 -o-transition: all 499ms cubic-bezier(0.4, 0.1, 0.000, 1.0);
			transition: all 499ms cubic-bezier(0.4, 0.1, 0.000, 1.0);
	opacity: 0;
	visibility: hidden;
	text-align: right;
} 
a, .supn{
	color: #f59300;
	-webkit-transition: all 0.2s;
    transition: all 0.2s;
}
a:hover {
    color: #ff8600;
}
header, footer {
	height: 10%;
}
#footer .footer-inner {
    padding: 0; 
}
#footer {
	margin-bottom: 40px;
	padding-top: 20px;
    text-align: center;
}
#page-content, #hero-and-body {
	width: 100%;
    height: 80%;
}

.loading-end #page-content {
    min-height: 100%; 
}

/*------------------------
HOME SLIDES 
------------------------*/
#page-body section{
	background-color: white;
}
.slide{
	-ms-display: flex;
	display: flex;
	/* alineacion vertical */
	align-items: center;
}
.cover, .card{
	float: left;
}
.cover{
	width: 50%;
	height: 100%;
	margin-right: 20px;
}
	.img-cover{
		height: 100%;
		object-fit: cover;
		object-position: center;
	}
.card {
	width: 40%;
}
.card-title {
	margin-bottom: .2em;
}
.card-description{
	font-weight: 400;
}


/*------------------------
ARTICLES STYLES
------------------------*/
.fixed { position: fixed !important;}
#heder, .header-inner{ 
	background-color: white;
}
.header-inner {
	padding: 80px 0 34px 0 !important;
}
#hero #page-title {
    padding-bottom: 0;
}
#hero {
	margin-top: 12em;
}
#blog-single{
	font-size: 18px;
	line-height: 1.9;
}
#blog-single p{
	margin: 40px 0;
}
#blog-single img {
    vertical-align: middle;
    border-style: none;
}
h4 {
	font-weight: 400;
}
.img-l {
    float: left;
    margin: 1em 1em 1em -4em;
}
.img-r {
    float: right;
    margin: 1em -4em 1em 1em;
}
.pimg{
	padding: 1em 2em;
}
.meta-author {
    font-size: 20px;
}
.supn, sup {
	position: relative;
    font-size: 85%;
    line-height: 0;
    vertical-align: baseline;
    top: -0.3em;
    font-weight: bolder;
    text-decoration: none;
}
blockquote{
	padding-left: 50px;
	font-size: 18px;
	line-height: 30px;
	color: #f59300;
	letter-spacing: -.1px;
}
blockquote div{
	margin: 12px 0;
}
#footnotes {
	font-size: 13px;
	margin: 40px 0 80px;
}
.photonote{
	font-size: 14px;
	font-style: italic;
}
.team-infos h4, .team-infos h5 {
    margin-bottom: .3rem;
    padding: 0 65px 0 0;
}
.team-member {
	padding-bottom: 1.3rem;
}


@media only screen and (max-width: 680px) {
	#page-content, #hero-and-body {
		width: 100%;
		height: 85%;
		overflow: hidden;
	}
	#hero {
		margin-top: 6em;
	}
	.slide {
		display: block;
	}
	.cover, .card{
		width: 100%;
		float: none;
	}
	.cover{
		height: 45%;
	}
	.img-cover {
		height: 100%;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	h1 {
		font-size: 44px;
		line-height: 52px;
	}
	h2 {
		font-size: 24px;
		line-height: 32px;
		padding-bottom: 10px;
	}
	h4, .h4 {
		font-size: 16px;
		line-height: 24px;
	}
		
}