/*=============================================
GLOBAL
=============================================*/

*{
	margin:0px;
	padding:0px;
	list-style: none;
	text-decoration: none;
	font-family: sans-serif;
	box-sizing: border-box;
}

.contenedor{
	position:relative;
	margin:auto;
	width:100%;
	height: auto;
}

.fila{
	position:relative;
	margin:auto;
	width:100%;
	height: auto;
	clear:both;
	display:table;
}

[class*="col-"]{
	float:left;
	/*border:1px solid black;*/
	padding:10px;
}

/*=============================================
SECCION 1
=============================================*/

header #logo{
	font-family: 'Kaushan Script', cursive;
	font-size:50px;
	text-align:center;
	line-height:60px;
}

header center p{
	text-align: center;
	width:42px;
	line-height:42px;
	border-radius:100%;	
	background:#ccc;
	color:white;
}

header center#icono1 p{
	background:blue;
}

header center#icono2 p{
	background:green;
}

header center#icono3 p{
	background:red;
}

/*=============================================
SECCION 2
=============================================*/

nav ul li{
	padding:10px;
	text-align:center;	
}

nav ul li a{
	display: block;
	background:rgba(100,0,255,1);
	font-family: 'Kaushan Script', cursive;
	color:white;
	line-height:48px;	
}

nav ul li a:hover{
	background:rgba(100,0,255,.4);
}

nav ul li a:active{
	background:rgba(255,0,100,1);
}

/*=============================================
SECCION 3
=============================================*/

#seccion3 center{
	padding:20px;
}

#seccion3 img{	
	border-radius:100%;
	width:200px;
	height:200px;
	padding:10px;
}

#seccion3 h1{
	font-family: 'Kaushan Script', cursive;
	font-size:40px;
	padding:10px;
}

#seccion3 p{
	padding:10px;
}

/*=============================================
SECCION 4
=============================================*/

#seccion4 aside ul li{
	
	background:#aaa;
	padding:10px;
	margin:2px 10px;
	list-style:square;
	list-style-position:inside;
	list-style-image:url(../img/lista.png);

}

#seccion4 article h1{
	font-family: 'Kaushan Script', cursive;
	font-size:40px;
	margin:20px;
}

#seccion4 article p img{
	float:left;
	margin-right:20px;
}

#seccion4 article p {
	margin:5px 20px;
	font-size:14px;
	text-align:justify;
}

#seccion4 aside#der h1{
	line-height:50px;
	text-align:center;
	background:rgba(100,0,255,1);
	color:white;
	margin-bottom:5px;
}

#seccion4 aside#der input{
	width:100%;
	padding:10px;
	margin:5px 0;
}

#seccion4 aside#der input[type="text"]{
	background:url(../img/usuario.png);
	background-repeat:no-repeat;
	background-position:right;
	background-size:contain;
}
	
#seccion4 aside#der input[type="password"]{
	background:url(../img/password.png);
	background-repeat:no-repeat;
	background-position:right;
	background-size:contain;
}
	
#seccion4 aside#der input[type="submit"]{
	background:rgba(100,0,100,.5);
	border:0;
}

/*=============================================
SECCION 5
=============================================*/

footer{
	padding:20px 10px;
}

footer div{
	background:rgba(100,0,255,1);
	text-align:center;
	line-height:50px;
	color:white;
}

/*=============================================
PANTALLA DE ESCRITORIO GRANDE - LARGE (lg) - revisamos en portatil o pc
=============================================*/

@media(min-width:1200px){

	.col-lg-12{width:100%;}
	.col-lg-11{width:91.66666667%;}
	.col-lg-10{width:83.33333333%;}
	.col-lg-9{width:75%;}
	.col-lg-8{width:66.66666667%;}
	.col-lg-7{width:58.33333333%;}
	.col-lg-6{width:50%;}
	.col-lg-5{width:41.66666667%;}
	.col-lg-4{width: 33.33333333%;}
	.col-lg-3{width: 25%;}
	.col-lg-2 {width: 16.66666667%;}
	.col-lg-1 {width: 8.33333333%;}
	.col-lg-0 {display:none;}

	#seccion4 article p img{
		width:50%;
	}

}

/*=============================================
PANTALLA DE ESCRITORIO MEDIANO - MEDIUM (md) - revisamos en tablet horizontal 1024px
=============================================*/

@media(max-width:1199px) and (min-width:992px){

	.col-md-12{width:100%;}
	.col-md-11{width:91.66666667%;}
	.col-md-10{width:83.33333333%;}
	.col-md-9{width:75%;}
	.col-md-8{width:66.66666667%;}
	.col-md-7{width:58.33333333%;}
	.col-md-6{width:50%;}
	.col-md-5{width:41.66666667%;}
	.col-md-4{width: 33.33333333%;}
	.col-md-3{width: 25%;}
	.col-md-2{width: 16.66666667%;}
	.col-md-1{width: 8.33333333%;}
	.col-md-0 {display:none;}

	#seccion4 article p img{
		width:60%;
	}
}

/*=============================================
PANTALLA DE TABLET - SMALL (sm) - revisamos en tablet vertical 768px
=============================================*/

@media(max-width:991px) and (min-width:768px){

	.col-sm-12{width:100%;}
	.col-sm-11{width:91.66666667%;}
	.col-sm-10{width:83.33333333%;}
	.col-sm-9{width:75%;}
	.col-sm-8{width:66.66666667%;}
	.col-sm-7{width:58.33333333%;}
	.col-sm-6{width:50%;}
	.col-sm-5{width:41.66666667%;}
	.col-sm-4{width: 33.33333333%;}
	.col-sm-3{width: 25%;}
	.col-sm-2{width: 16.66666667%;}
	.col-sm-1{width: 8.33333333%;}
	.col-sm-0 {display:none;}
	
	#seccion4 article p img{
		width:100%;
		margin-bottom: 20px;
	}
}

/*=============================================
PANTALLA DE PHONES - EXTRA SMALL (xs) - revisamos en movil horizontal 480px o vertical 320px
=============================================*/

@media(max-width:767px){

	.col-xs-12{width:100%;}
	.col-xs-11{width:91.66666667%;}
	.col-xs-10{width:83.33333333%;}
	.col-xs-9{width:75%;}
	.col-xs-8{width:66.66666667%;}
	.col-xs-7{width:58.33333333%;}
	.col-xs-6{width:50%;}
	.col-xs-5{width:41.66666667%;}
	.col-xs-4{width: 33.33333333%;}
	.col-xs-3{width: 25%;}
	.col-xs-2{width: 16.66666667%;}
	.col-xs-1{width: 8.33333333%;}
	.col-xs-0 {display:none;}

	#seccion4 article p img{
		width:100%;
		margin-bottom: 20px;
	}

}