@charset "UTF-8";

/*********************************
font-family: 'Open Sans', sans-serif;
font-family: 'Droid Serif', serif;
******************************************/
html, body {
	font-family: 'Open Sans', sans-serif;
	
}

html, body { }
html {
	
}
body { padding-top: 3.3em;
/*background-color:#f2f2f2;*/
/*background-color:#eeeded;*/
background-color:#eceff1;
	
 }

.title-video-container { }

.large-only { display: none; }

.small-only { display: block; }

.grey-background { background-color: #f2f2f2; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.text-center { text-align: center; }

a, a:hover, a:visited {
	color: inherit;
	text-decoration: none;
}

img {
	width: 100%;
	max-width: 100%
}

video { width: 100%; }
audio {
	display:block;
	width: 100%;
	max-width: 100%;
}
img.pdf-icon { }

.row { max-width: 100%; }

.gridContainer {
	width: 100%;
	margin: 0 auto;
	padding: 1em;
		
}
.gridContainer.first {
	position:relative;
	margin-top: 2em;
		z-index:100;
}
.panel {
	background-color: #fff;
	padding: 1.2em;
	margin-top: 0;
	margin-bottom: 1em;
}
.white-panel {
	background-color: rgba(255,255,255,1);
}
.shadow {
	box-shadow: 0px 0px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	
}

.shadow-big {
	margin: 2em 0;
	box-shadow: 4px 7px 25px 0px rgba(0,0,0,0.56);
}



header {
	height: 3.5em;
	z-index: 999;
	background-color: #1B9EAF;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0 0 4px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.28);
	
}

.logo-container { }

.logo-container a {
	padding: 1em;
	display: block;
	width: 100%;
	height: 100%;
}

.logo {
	height: 1.7em;
	width: auto;
}

.more-articles {
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	height: 3.5em;
	border-left: 1px solid #ddd;
	line-height: 3.5em;
	display: inline-block;
	text-align: left;
	padding: 0 1em;
	color: #B6B6B6;
}

.more-articles:hover {
	background-color: #ff6b00;
	color: rgba(255,255,255,1);
}

.more-articles h6 {
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: 400;
}

.more-articles h6 span {
	font-size: 1.5em;
	line-height: 0em;
}


footer {
	font-size: 80%;
	width: 100%;
	padding: 5em 0;
	background-color: #C9C9C9;
}
footer .gridContainer {
	background-color: inherit;
	box-shadow: none;
}
.cover-image {
	position:relative;
	z-index: 99;
}
.social {
	position:fixed;
	left:auto;
	top:auto;
	right: 1em;
	bottom: 1em;
	z-index: 1;
}
.social a {
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
	display: inline-block;
	background-color: rgba(211,211,211,1.00);
	color: #fff;
	/*padding: 0 .3em;*/
	height: 2.5em;
	width: 2.5em;
	margin: 0;
	line-height: 2.5em;
	font-size: 1.5em;
	text-align: center;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
	
	border-radius: 100%;
	margin-right: .3em;
}
.social > a:hover {
	/*padding: 0 1em;*/
	
	
}
a.facebook-icon { background-color : #3B5998; }

a.twitter-icon { background-color : #55acee; }

h1 {
	margin-bottom: .2em;
	font-family: 'Droid Serif', serif;
	font-size: 3em;
	font-weight: 400;
}

h2 {
	font-family: 'Droid Serif', serif;
	margin-top: 2em;
	color: #1B9EAF;
	font-weight: 600;
	font-size: 1.5em;
	margin-bottom: .3em;;
}

h3.graphic-header {
	font-size: 2.5em;
	margin-bottom: -.3em;
	padding-bottom: 0;
}

.autors { margin-bottom: 2em; }

h4 {
	margin: 0;
	font-size: 1.1em;
	margin-bottom: .2em;
	font-weight: 400;
	color: #1B9EAF;
}

h4 span {
	font-size: .9em;
	color: #6D6D6D;
}

p {
	color: #444;
	font-size: 1.1em;
	line-height: 1.5em;
	margin: 0;
	margin-bottom: 1em;
}
p.q {
	color:#1B9EAF;
	font-style:italic;

}
p.a {
	
}
p i {
	font-style: italic;
	color: #1B9EAF;
	
}

.intro p {
	color: #323232;
	font-family: 'Droid Serif', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 1.4em;
}

p strong {
	color: #1B9EAF;
	font-weight: 400;
	font-size: 1.3em;
}

blockquote {
	border-left: 4px solid #ddd;
	padding: .5em 1em;
	margin: 2em 0;
}


blockquote.panel {
	border-left: none;
}

blockquote.panel figcaption {
	font-size: .8em;
	padding: .5em;
	color: #5d5d5d;
}

blockquote h5 {
	font-family: 'Droid Serif', serif;
	font-size: 1.1em;
	color: #1B9EAF;
	margin: 0;
	margin-bottom: .5em;
}

blockquote p {
	font-family: 'Droid Serif', serif;
	margin: 0;
	font-style: italic;
	color: #747474;
	font-size: .9em;
	line-height: 1.7em;
}

blockquote a {
	font-family: 'Open Sans', sans-serif;
	color: #1B9EAF;
	text-decoration: none;
	font-style: normal;
}

blockquote a {
	font-family: 'Open Sans', sans-serif;
	color: #1B9EAF;
	text-decoration: none;
	font-style: normal;
}

cite {
	color: #1B9EAF;
	font-family: 'Droid Serif', serif;
	font-style: italic;
	font-size: .9em;
	margin-top: .5em;
}

.framed {
	margin: 1em auto;
	padding: .5em;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
	
}


aside .shadow-big {
	margin: 0;	
}
figure {
	margin: 0;
	padding: 0;
}

figure .shadow { margin: .5em 0; }

figcaption {
	font-size: .8em;
	padding: 1em;
	color: #5d5d5d;
}

figcaption a {
	font-family: 'Open Sans', sans-serif;
	color: #1B9EAF;
	text-decoration: none;
	font-style: normal;
}

/* responsive iframe */
.video-container {
	position: relative;
	padding-bottom: 52.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.letter  {
	padding: 2em;
	font-family: 'Lora', serif;
	font-style: italic;
}
.letter p {
	font-family: 'Lora', serif;
	font-style: italic;
}
.margin {
	margin-bottom: 2em;
}
/****** Mobile Layout: 641px and below. ********************/

html, body { font-size: 95%; }

/***** Tablet Layout: min-width 641px and max-width 1024px. Inherits styles from: Mobile Layout. *********/
@media only screen and (min-width: 40.063em) {

html, body { font-size: 100%; }
body {
  background-size: cover;
}
.gridContainer { width: 90%;
	padding-bottom: 4em;

 }
}

/* Desktop Layout: min-width 1025px and max-width 1440px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 64.063em) {

html, body { font-size: 100%; }

.row { max-width: 100%; }

.gridContainer {
	width: 85%;
	max-width: 1232px;
	padding-bottom: 2em;
	
}

.gridContainer.first {
	position:relative;
	margin-top: -5em;
		z-index:100;
}

.margin {
	margin-bottom: 2em;
}

.large-only { display: block; }

.small-only { display: none; }

.more-articles { }

.more-articles:hover { padding: 0 4em; }
.social {
	position:fixed;
	left: 0;
	top: 200px;
	right:auto;
	bottom: auto;
	z-index: 1;
}
.social a {
	display: block;
	height: 2em;
	width: 1.5em;
	line-height: 2em;
	font-size: 1.5em;
	box-shadow: none;
	
	border-radius: 0px;
	margin-right: .3em;
}
.social > a:hover {
	/*padding: 0 1em;*/
	width: 2.5em;
	
}




}

/*************************************
		 aditional style
**************************************/
.dark-background {
	background-color: #000;
	padding: 7em 0;
}
.panel {
	transition: all .3s ease;
}
.hoverable:hover {
	box-shadow: 4px 7px 25px 0px rgba(0,0,0,0.56);
}