/*
	rojo: #E72A53
	verde: #9DC53B
	amarillo: #EFDA45
	naranja: #F0984A
	azul: #3EB2E5
*/

/* Reseteamos el margen de html y body*/
html,body {
	margin: 0;
}
body {
	background-image: url("/assets/img/background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	/* background-size: 100% 100%; */
	/* background-position: center; */
	background-position: 0% 25%;
	font-family: Verdana, sans-serif;
}
a {
	color: white;
	text-decoration: none;
}
.content {
    height: 100vh;
    display: flex;
    align-items: normal;
    justify-content: center;
    margin-top: 100px;
}
.center {
	/* border: 1px solid yellow; */
    width: 55%;
    height: 60%;
    text-align:center;
    color: white;
}
.logo img{
    width: 100%;
    /* max-width: 450px; */
    max-width: 306px;
    height: auto;
    margin-bottom: 120px;
}

.boxes {
	font-size: 26px;
	text-align: center;
	text-shadow: 2px 2px #000;
}

	.boxes .side-left, .boxes .side-center, .boxes .side-right {
		float: left;
		width: 33%;
	}
	.boxes .side-left {
		margin-left: 5px;
	}
	.side-bottom {
		clear:  both;
		width:  100%;
	}

	.rojo, .verde, .amarillo, .naranja, .azul, .marron {
		position: relative;
		z-index: 5;
		padding: 50px 0 50px 0;
		margin-bottom: 20px;
		width: auto;
		height: 5px;

		display: flex;
		align-items: center;
		justify-content: center;
	}
	.amarillo {
		height: 130px;
		margin: 0 20px 0 20px;
	}
	.rojo::before, .verde::before, .amarillo::before, .naranja::before, .azul::before, .marron::before {
	    content: "";
	    position: absolute;
	    z-index: -1;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #dedede;
	    opacity: 0.35;
	}
	.rojo:hover::before { 		background-color: #E72A53; }
	.verde:hover::before { 		background-color: #9DC53B; }
	.amarillo:hover::before { 	background-color: #EFDA45; }
	.naranja:hover::before { 	background-color: #F0984A; }
	.azul:hover::before { 		background-color: #3EB2E5; }
	.marron:hover::before { 	background-color: brown;   }

	.caja-proyecto::before   {
	    transition: all 0.5s ease-in-out;
	    -moz-transition: all 0.5s ease-in-out;
	    -webkit-transition: all 0.5s ease-in-out;
	}

.clear-both {
	clear:both;
}

.slogan h1{
	font-weight: normal;
	margin-top: 90px;
	margin-bottom: 50px;
	line-height: 30px;
	font-size: 20px;
}

.link {
	text-decoration: underline;
}
.link:hover {
	color: #F09E20;
}

.only-mobile {
	display: none;
}


@media (min-width: 1292px) and (max-width: 1705px)   {

	.boxes {
		font-size: 23px;
	}

}

@media (max-width: 1292px) {

	.center {
		width: 400px;
    	height: 85%;
	}

	.boxes .side-left, .boxes .side-center, .boxes .side-right {
		width: 400px;
	}
	.boxes .side-left {
		margin-left: 0;
	}

	.rojo, .verde, .amarillo, .naranja, .azul, .marron {
		padding: 20px 0 20px 0;
		height: 120px !important;
	}

	.amarillo {
		margin-left: 0;
		margin-right: 0;
		height: auto;
	}
	.naranja {
		/* margin-top: 20px; */
	}

	.slogan h1{
		font-size: 20px;
	}

	.only-mobile {
		display: inline;
	}
	.only-mobile .caja-proyecto {
		margin-bottom: 20px;
	}
	.side-center {
		display: none;
	}

}