* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    font-family: 'Roboto Condensed', sans-serif;
}
 .social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
	.social ul {
		list-style: none;
	}
 
	.social ul li a {
		display: inline-block;
		color:#fff;
		background: #000;
		padding: 5px 5px;
		text-decoration: none;
		-webkit-transition:all 500ms ease;
		-o-transition:all 500ms ease;
		transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
	}
 
	.social ul li .icon-facebook {background:linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%);} /* Establecemos los colores de cada red social, aprovechando su class */
	.social ul li .icon-instagram {background: linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%);}
	.social ul li .icon-googleplus {background: linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%);}
	.social ul li .icon-pinterest {background:linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%) ;}
	.social ul li .icon-mail {background:linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%);}
 
	.social ul li a:hover {
		background:linear-gradient(to right, rgba(253,227,221,1) 0%, rgba(247,208,192,1) 40%, rgba(245,194,178,1) 55%, rgba(248,201,171,1) 62%, rgba(253,211,161,1) 72%, rgba(246,175,167,1) 100%)  ; /* Cambiamos el fondo cuando el usuario pase el mouse */
		padding: 10px 15px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
	}
.contenedor {
	background:black;
	width:90%;
	max-width:1000px;
	margin:auto;
 
	/* Flexbox */
	display:flex;
	flex-flow:row wrap;
}
 
body {
	background:linear-gradient(to right, rgba(253,227,221,1) 0%, rgba(247,208,192,1) 40%, rgba(245,194,178,1) 55%, rgba(248,201,171,1) 62%, rgba(253,211,161,1) 72%, rgba(246,175,167,1) 100%) ;
}
img{
    max-width: 100%;
}
h2{color:#aeaba4}
header {
    
	background: linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%);
	width:100%;
	padding:20px;
 
	/* Flexbox */
	display: flex;
	justify-content:space-between;
	align-items:center;
 
	flex-direction:row;
	flex-wrap:wrap;
    
   
}
 
header .logo {
	color:red;
	font-size:30px;
    letter-spacing: 10px;
    font-size: 1.3em;
}
 
header .logo img {
	width:50px;
	vertical-align: top;
}
 
header .logo a {
	color:#fff;
	text-decoration: none;
	line-height:50px;
}
 
header nav {
    
	width:50%;
	/* Flexbox */
 
	display:flex;
	flex-wrap:wrap;
	align-items:center;
}
 
header nav a {
	background:;
	color:#fff;
	text-align: center;
	text-decoration: none;
	padding:10px;
        
   transition: all 0.4s linear;
    border-radius: 5px;
 
	/* Flexbox */
	flex-grow:1;
}
 
header nav a:hover {
	background:linear-gradient(to right, rgba(253,227,221,1) 0%, rgba(247,208,192,1) 40%, rgba(245,194,178,1) 55%, rgba(248,201,171,1) 62%, rgba(253,211,161,1) 72%, rgba(246,175,167,1) 100%) ;;
}
.main h2{
    font-style:normal;
    page-break-after: auto
}
.main {
	background:#fff;
	padding:20px;
 
	flex:1 1 70%;
	/*flex:1;*/
}
 
.main article {
	margin-bottom: 20px;
	padding-bottom:20px;
	border-bottom:1px solid #eaeaea;
}
 
.main article:nth-last-child(1){
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom:none;
}
 
aside {
	background:white;
	padding:20px;
	/*FLEX*/
	flex:1 1 30%;
	/*flex:0 0 300px;*/
 
	display: flex;
	flex-wrap:wrap;
	flex-direction:column;
	justify-content:flex-star flex-end;
}
 
aside .widget {
	background: rosybrown;
	height:150px;
	margin:10px;
}
.footer {
    color:red;
	
 
	
}
.footer p {
    color:aliceblue;
	background:linear-gradient(to right, rgba(221,245,253,1) 0%, rgba(192,227,247,1) 40%, rgba(178,225,245,1) 55%, rgba(171,213,248,1) 62%, rgba(161,196,253,1) 72%, rgba(167,233,246,1) 100%);
	width: 100%;
	padding:20px;
 
	/* Flexbox */
	display: flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
 
.contenedor2{
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 4% 2%;
    box-sizing: border-box;
    
}

.caja{
    
    flex: 1;
    overflow: hidden;
    margin: 8px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.20);
    line-height: 0;
    transition: all 600ms;
}

.caja > img{
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: all 300ms;
}

.caja > span{
    font-size: 35px;
    font-family: sans-serif;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
}

.caja:hover{
    flex: 50%;
}

.caja:hover > img{
    width: 100%;
    height: 100%;
}

article a{
    text-decoration: none;
    padding: 2px;
    
    font-size: 14px;
    color: #ffffff;
    background:linear-gradient(to right, rgba(253,227,221,1) 0%, rgba(247,208,192,1) 40%, rgba(245,194,178,1) 55%, rgba(248,201,171,1) 62%, rgba(253,211,161,1) 72%, rgba(246,175,167,1) 100%) ;
    border-radius: 2px;
   
    }
 
@media screen and (max-width: 800px) {
	.contenedor {
		flex-direction:column;
	}
    .widget{
        width: 30%;
    }
	header {
		flex-direction:column;
		padding:0;
	}
 
	header .logo {
		margin:20px 0;
	}
 
	header nav {
		width: 100%;
	}
 
	aside {
		flex-direction:row;
		flex:0;
	}
 
	aside .widget {
		flex-grow:0;
	}

 
@media screen and (max-width: 600px) {
	aside {
		flex-direction:column;
	}
    
 .widget{
     width: 60%;}
	footer {
        
		justify-content:space-around;
	}
    aside {
		flex-direction:row;
		flex:0;
	}
 
	aside .widget {
		flex-grow:1;
	}
}
    .icon-arrow-left:before {
  content: "\e900";
}
    a span{
        color:aqua;
    }
     
    
   
.contenedor2{
    display: flex;
    width: 100%;
    height: 100vh;
    padding: 4% 2%;
    box-sizing: border-box;
    
}

.caja{
    
    flex: 1;
    overflow: hidden;
    margin: 8px;
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.20);
    line-height: 0;
    transition: all 600ms;
    
}

.caja > img{
    width: 200%;
    height: calc(100% - 10vh);
    object-fit: cover;
    transition: all 300ms;
}

.caja > span{
    font-size: 35px;
    font-family: sans-serif;
    display: block;
    text-align: center;
    height: 10vh;
    line-height: 2.6;
}

.caja:hover{
    flex: 50%;
}

.caja:hover > img{
    width: 100%;
    height: 100%;
}