/* Framote Stylesheet
======================

Feel free to copy, distribute or do the fuck you want with this CSS code.

*/


@font-face {
    font-family: 'Sosa';
    src: url('lib/sosa/sosa.eot');
    src: url('lib/sosa/sosa.eot?#iefix') format('embedded-opentype'),
         url('lib/sosa/sosa.ttf') format('truetype'),
         url('lib/sosa/sosa.svg#sosa') format('svg');
    font-weight: normal;
    font-style: normal;
}

body{
	font-family:"Metrophobic",Helvetica, Arial, sans-serif;
	color:#333;
	background:#333;
	margin:0;
	padding:0;
	font-size:1em;
}

.content{
	width:960px;
	margin:0 auto;
	padding:10px;
	position:relative;
}

header{
	background-color:#069;
	color:#fff;
	border-bottom:1px solid #AAA;
}
header .content{
	padding-top:20px;
	padding-bottom:20px;
}
header #logo{height:50px; padding-top:5px;}

section{background:#fff; overflow:hidden;}
footer{color:#fff; padding:5px 0;}

#intro .fit{
	line-height:100%;
	text-align:center;
	text-shadow: 2px 2px 0px rgba(204, 204, 204, 1);
}

/*nav menu*/
header nav{
	position:absolute;
	right:10px;
	top:25px;
}
header nav a{
	display:inline-block;
	color:#fff;
	padding:0.5em 1em;
	border-radius:5px;
	margin-left:0.5em;
}
header nav a:hover{
	background-color:#1a3651;
}
header nav a .sosa{font-size:200%;}
header nav a .menu_label{margin-left:0.2em;}


/*structure*/
.column{
	width:47%;
	margin-right:5%;
	display:inline-block;
	vertical-align:top;
}
.column h1{border-bottom:1px solid #069;}
.column p{text-align:justify;}

.column.bar{
	margin-right:2.5%;
	padding-right:2.5%;
}
.separate.bar{
	border-right:1px solid #1a3651;
}

.final,.final.bar{
	margin-right:0; 
	padding-right:0;
}
.bar.separate.third{width:62%;}
.bar.final.third{width:32%;}


h1,h2,h3,h4,h5,h6{
	color:#1a3651;
	font-weight:normal;
}

h1 .sosa{
	background:#069;
	color:#fff;
	padding: 2.4%;
	border-radius: 50px;
	margin:0 0.2em;
	font-weight:normal;
}

a{
	text-decoration:none;
	color:#069;
}
footer a{
	color:#AAA;
}
footer .social{
	background-color:#AAA;
	color:#fff;
	padding: 0.4em;
	border-radius: 50%;
	margin:0 0 0 0.5em;
	font-size:130%;
}
a:hover{
	background-color:#069;
	color:#fff;
}
img{
	border:none;
}

/*Classes*/
.sosa{font-family:"Sosa", sans-serif;}
.center{text-align:center !important;}
.f_right{float:right;}
.f_left{float:left;}

.light{color:#AAA;}

.portada{
	font-size:300%;
	margin:0.33em 0;
}


@media screen and (max-width: 1024px) {
	.content{
		width:auto;
		margin:0 5%;
		padding:1% 0;
	}
}
@media screen and (max-width: 640px) {
	header nav a{margin-left:0.2em;}
	header nav a .menu_label{display:none;}

	.portada{font-size:250%;}
	
	.bar.separate.third,.bar.final.third,.column{
		margin-right:0;
		margin-left:0;
		padding-right:0;
		padding-left:0;
		width:auto !important;
		border:none;
		display:block;
		clear:both;
	}
}
@media screen and (max-width: 480px) {
	.portada{font-size:200%;}
	
	header .content{
		padding-top:10px;
		padding-bottom:10px;
	}
	header #logo{
		max-width:55%;
		height:auto;
	}
	header nav{
		margin-top:0em;
		top:15px;
	}
	header nav a{
		padding:0.3em;
	}
	header nav a .sosa{font-size:175%;}
	
	footer{text-align:center;}
	.sociaLinks{
		display:block;
		padding:20px 0;
	}
	.f_right{float:none;}
	
	.not_mobile{display:none;}
}
@media screen and (max-width: 320px) {
	.portada{font-size:170%;}
	
	header nav{
		top:10px;
		right:0;
	}
}