*{
    margin:0;
    padding:0;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
body {
	background-color: #FFF;
	font-size:0.9em;
}
.red-link {
    color: red;
  }
  
aside,header,section#Contenedor,section#Contenido,footer{
	background-color:#0FC0EC;
	margin: .3em auto;
	padding:.5em;
	vertical-align:top;
	width:98%;
	}
aside, section#Contenido{
	display:inline-block;
	background-color:#688ae2;
	min-height:200px;
	width:73%;
	}
aside{
	text-align:center;	
	width:25%;
	}
footer{
	text-align:center;
	color:#2D0CAA;
	font-size:.7em;
	}	
header{
	font-size:.8em;
	color:#FFF;
    background: url("../img/gotas.jpg");
		}

h1{
	font-family: 'Play', sans-serif;
	}
	
.subTitulos{
	font-family: 'Play', sans-serif;
	font-size:4em;
	color:#FFFACD;
	font-style:italic;
	}

#LogoTipo{
	margin-left:10em;}

nav{
    width:90%;
    margin:1em auto;
    max-width:1000px;
    background: #ffffff;
    z-index: 10; 
}

nav ul {
    overflow: hidden;
	list-style: none;  
    padding:  0 10.2em;
}

nav ul li {
    float:  left;
}

nav ul li a{
    color: #000;
    padding: 1.5em;
    display: block; 
    text-decoration: none;
}

nav ul li span{
    margin-right: .5em;   
}

nav ul li a:hover{
    background:  #2D0CAA;   
    border:double;
}
.ImgRotando{
	 transform:rotateX(0deg);
	 transition-property: transform;
	 transition-duration: 5s;
	}
.ImgRotando:hover {
	transform:rotateX(10000deg);
	}
.iconoRS{
	transform:scale(1.5,1.5);
	transition:transform 1s;
}
.iconoRS:hover{
	transform:scale(1.8,1.8);
}	
.Menu_barras{
    display: none;
}
/*El siguiente CSS se aplica si la pantalla tiene un ancho máximo de 720px o menos*/
@media only screen and (max-width: 720px) {
	#LogoTipo{
		margin-left:2em;
		width: 8em;
		height: 8em;
		}
	.subTitulos{
	font-size:3em;
	}
    nav{
        width: 60%;
        height: 100%;
        left: -120%;
        margin:0;
        position:  fixed;
    }
   
    nav ul li{
        display: block; 
        float:none;
        border-bottom:1px solid rgba(255,255,255,.3);
    }

    .Menu_barras {
        display:block;
        width: 100%;
        background:#ccc;     
    }

    .Menu_barras .btn-menu{
        display:block;  
        padding:1.5em;
		background: #375476;
        color:#fff;
        text-decoration:none;
        font-weight:bold;
        font-size: 1.2em;
        -webkit-box-sizing:border-box;
        -moz-box-sizing:border-box;
        box-sizing:border-box;
    }

    .Menu_barras span{
        float: right;
        font-size:2em;  
    }
	footer{
    font-size:1.5em;
    color:#fff;
    }
/*Para darte una idea de los colores que pueden combinar te aconsejo que utilices el siguiente enlace:
	- https://encycolorpedia.es/005388
*/
}