@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html{height: 100%;overflow: hidden;}
body{
	margin:0;
	height: 100%;
	overflow-x: hidden;
	background: url(../images/inicio_borroso.png);
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	max-width:100%;
	font-family: "Open Sans";
}

header{
	background: white url(../images/inicio.jpg) no-repeat;
    background-size: cover;
    height: 850px;
	/*background: url(images/inicio.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #006622;
	display: block;
	max-width: 100%;
    max-height: 100%;
    height: 100%;*/
}
#foto1{
	visibility: hidden;
	display:none;
}
#foto2{
	visibility: visible;
	display:block;
}
#foto3{
	visibility: hidden;
	display:none;
}
#foto4{
	visibility: visible;
	display:block;
}
.banderas{
	float: righ;
}
ul, ol {
	list-style:none;
}
.container{
	content:"";
	display:table;
	clear:both
	border:0

}
.third{
	height: auto;
	float:left;
	width:30%;
	padding-left: 20px;
	padding-top: 5%;
}
.third1{
	float:left;
	width: 35%;
	padding-top: 5%;
}
.third2{
	float:left;
	max-width: 40%;
  height: auto;
	padding-top: 2%;
}
.third3{
	float:left;
	width:60%
}
.third4{
	float:left;
	width:50%
}
.wrapper{
	overflow-x: hidden;
	height: 100%;


}
.avatar{
	width: 170px;
	height: 170px;
	border-radius: 50%;
	margin: 0;
}
.logomain{
	float:left;
	padding-left: 18%;
	margin:0%;
	margin-top: 30px;
	width:180px;
	height: 180px;

}
.content{
	padding-right:15px;
	padding-left:15px;
	margin-right:auto;
	margin-left:auto;

	display: block;
	clear:left;

	background-color: #484D5A;
	color: #fff;
	padding: 3% 5% 3% 5%;
	text-align: left;
}
p{
	text-align: justify;
	font-family: "Times New Roman", Times, serif;

}
p>em{
	text-align:center;
	display:inline-block;
	vertical-align:middle;
	line-height:normal;
	padding-left: 50px;
	padding-right: 50px;
}
a>em{
	text-align:right;
}
.nav{width: 100%;
	float:left;

	margin: 0;
	padding-left: 18%;
	padding-right: 18%;
	background-color: #66cc00;
	position: relative;
	display: inline-block;
}

img.imort{
	float: left;
	vertical-align: middle;
}
.fundador{
	float: right;
	width: 70%;
}
.nav .submenu{
		background-color: #80ff00;
		border-top: 1px solid #66cc00;
	}

.nav > li {

		float:left
		;
		width:auto;

	}

.nav li a {
		background-color:#66cc00;
		color:#fff;

		padding:10px 12px;
		display:block;
		text-decoration: none;
		text-align: left;
	}


.nav li a:hover {

		background-color: #59b300;
		text-decoration: none;
	}


.nav li ul {
		display:none;
		position:absolute;
		min-width:140px;
		text-decoration: none;
	}


.nav li:hover > ul {
		display:block;
		float: top;
}


.nav li ul li {
		position:relative;
}


.nav li ul li ul {
		right:-140px;
		top:0px;
	}



#login1{
		background-color: #ff3300
	}
#login1:hover{
		background-color: #cc2900
	}
li a {
		display: block;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		color:white;

	}

li a:hover {
		background-color:#434343;
	}

#NAME{
		color:#ff9900;
		line-height: 100px;
		font-weight: bold;
		text-shadow: 2px 2px 4px #000000;
		margin:0;
		padding-top: 40px;

	}
.icon{
	width: 5%;
}
.imgart {

		height: 100%;
		width: 100%;
		float: right;
		margin: 0px 15px 15px 0px;


	}
.figarticulo{
		height: 100%;
		float: left;
	}

.figavatar{
		float:left;
		margin-left:10px;}


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

.articulo{

				text-align: left;
				display: block;
				min-height: 300px;

			}

hr{
				clear: both;
			}

h1{padding-left: 35%;}
#title .content{
	padding: 0px;
}
#title{
				margin: 0;
    			padding: 10px;
				background-color: #43334D;
				width : 100%;
				display: block;
			}

#footermain{
				margin-bottom: 0;
				height: 5%;
				background-color: #333333;

				text-align: center;
				display: block;
			}

#footermain p{

				padding-left: 35%;
				float: left;
				color: #fff;
}

.social{
				float:left;
				width:8%;

				}

.sociallink{
	width:30%;
	height: 50%;
}


@media screen and (max-width: 1525px ) and (min-width: 1425px) {header{height: 700px}}
@media screen and (max-width: 1425px ) and (min-width: 800px) {header{height: 480px} #footermain p{padding-left: 15%;}}
@media screen and (max-width: 1001px ) and (min-width: 800px) {#foto3{	visibility: visible;display:block;} #foto4{visibility: hidden;	display:none;} #third5{float:right;width:100%}}

@media screen and (max-width: 800px ) and (min-width: 480px) {
				.content{

					margin-left: 3%;
					margin-right: 3%;

					padding: 3% 5% 3% 5%;
					text-align: left;
				}
				.third{
					float:right;
					width:100%
				}
				.third1{
					float: right;
					width: 100%;
				}
				.third2 {
					max-width: 100%;
				}
				.third4 {
					width: 100%;
					text-align: center;
				}
				.figarticulo{
					position:relative;
    				float: left;
				}
				#footermain{
					display: block;
					margin: 0;
					height: 4%;
					text-align: left;
					width: 100%;
				}
				#footermain p{
					padding-left: 10%;
					margin: 0;
				}
				.logomain{
					display: none;
				}
				#foto1{
					visibility: visible;
					display:block;
				}
				#foto2{
					visibility: hidden;
					display:none;
				}
				#foto3{
					visibility: visible;
					display:block;
				}
				#foto4{
					visibility: hidden;
					display:none;
				}
				header{height: 220px}
				#NAME{
					padding-top: 10px;
					padding-left: 20%
				}
				.figarticulo{
					max-width: 100%;
				}
				.imgart{
					max-width: 100%;
					max-width: 100%;
				}
				.third{
					float: left;
					width: 100%;
				}
				.third1{
					float: left;
					width: 100%;
				}
				.third2{
					float: left;
					width: 100%;
				}
				.third3{
					float: left;
					width: 100%;
				}
			}


@media screen and (max-width: 480px ) {

				.content{


					margin: 0;

					padding: 3% 5% 3% 5%;
					text-align: left;
				}
				#footermain{
					display: block;
					margin: 0;
					height: 15%;
					text-align: left;
					width: 100%;
				}
				#footermain p, #footermain a{
					float: left;
					margin: 0;
					padding-left: 5%;


				}
				#foto1{
					visibility: visible;
					display:block;
				}
				#foto2{
					visibility: hidden;
					display:none;
				}
				#foto3{
					visibility: visible;
					display:block;
				}
				#foto4{
					visibility: hidden;
					display:none;
				}
				#footermain p{
					width: 60%;
				}
				.logomain{
					display: none;
				}
				header{height: 200px}
				#NAME{

					padding: 5%;
					padding-left: 10px;
					line-height: 80%;
				}
				.imgart {

					height: 80%;
					width:100%;
					float: right;
					margin: 0px 15px 15px 0px;


				}
				.nav{
					display: inline-block;
					padding: 0%;
				}
				.third{
					float:right;
					width:100%
				}
				.third1{
					float: right;
					width: 100%;
				}
				.third2 {
					max-width: 100%;
				}
				.third3 {
					width: 100%;
				}
				.figarticulo{
					position:relative;
    				float: left;
				}
				.fundador{
					float: right;
					width: 80%;
				}



}

@media (min-width:768px){.content{width:750px}}
@media (min-width:992px){.content{width:970px}}
@media (min-width:1200px){.content{width:1170px}}