@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

* {
		box-sizing:border-box;
		webkit-box-sizing:border-box; 
		webkit-font-smoothing: antialiased;
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
		max-width: 1920px;
	   
}
/* ---- MENU ---- */
.nav {

}
.menu {
	display: flex;
	justify-content: space-between;
	margin: 10px;
	padding-right: 4em;
	padding-left: 2em;
	z-index: auto;
	
	}
.menu li ul {
	width: 100px;
  	background: white;
	opacity: 0.5;
	display: none;
	border-radius: 0.5em;
	
	text-align: center;

	
	}
.menu li:hover ul { /* Display First Sub Menu */
	
	display: flex;
	flex-flow: column wrap;
	justify-content: center;


	
	}
.menu li:hover ul ul { /* Hide Second Sub Menu until ready */
  	display: none;

	}
.menu li ul li:hover ul { /* Hide Second Sub Menu until ready */
  	display: flex;
	width: auto;
	height: auto;
	position: relative;
	
	}
.logopos {}
.menu li a {
 	z-index: 2;
	color: black;
	text-shadow: 3 3 10 grey;
	}

.submenu li a {
 	z-index: 3;
	color: black;
	text-shadow: 3 3 10 grey;
	text-align: center;
	align-content: center;
	flex-flow: column wrap;
	}

/* ---- grid ---- */
.imagenes
{ width:100%;
  height:100%; 
  object-fit:cover;
	border-radius: .5em;}
.videos{
	width:auto;
  height:auto; 
  object-fit: fill;
	border-radius: .5em;
	
}
.grid {
	display: flex;
    flex-direction: row;
    justify-content: space-between;
 /* max-width: 1024px; */
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */
.textgrid {
	color: aliceblue;
	pointer-events: none;
	width: 100%;
	display: flex;
 	justify-content: center;
	align-items: center;
}

.textgrid a {

	font-size: 1.25em;

}

.grid-item {
    float: left;
    width: 150px;
    height: 150px;
}
.box {	
	border-radius: 0.5em;
    border: 1px solid rgba(18,25,37,1.00);
}

.grid-item:hover {
 	cursor: pointer;
	opacity: .75;
	
}

.grid-item--width2 { width: 300px;
object-fit: fill;}
.grid-item--height2 { height: 300px;
object-fit: fill;}

.grid-item--large {
  width: 480px;
  height: 480px;
  
}

/* about */
.contenedor {
	display: flex;
	flex-direction: column;
	background: rgba(201,201,201,0.5);
	width: 1420px;
	height: auto;
  	margin-left:2em;	
	border: 0,1px solid rgba(17,18,26,1.00);
	border-radius: 10px;
	font-family: "Gill Sans";
	color: aliceblue;
	

}

.contenedor p {	

	font-size: 3em;
	text-align: center;
	padding-top: 10px;
}
.contenedor p1 {


	padding-bottom: 10px;
	font-size: 2em;
	text-align: center;
}

.timeline{	
	
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 10px;
}
.timeline t	{
	background: rgba(201,201,201,0.5);
	margin: auto auto;
	font-size: 1.2em;	
	min-width: 150px;
	width: auto;
	height: 200px;
	padding-top: 10px;
	border: 1px solid rgba(17,18,26,1.00);
	border-radius: 10px;
	text-align: center;}
.iconos {
	display: flex;
	flex-flow: row wrap;
	margin: 10px 10px 10px 10px;
	padding-top: 30px;
	justify-content: center;
}
.icono1 {
	

	margin: 2px 2px 2px 2px;
	padding-left: 2px;
	padding-right: 2px;
	height: 100px;
	width: 100px;
	object-fit: fill;
}

.color{
	
	background: #193843
}
.color1{background: #1c2541}
.color2{background: #e64a41}
.color3{background: #5a32a3}
.color4{background:#532c3e}
.color5{background: #5bc0be}
.color6{background:#eae0d6}
	

/* footter */


a {
    text-decoration: none;
    color: #fff;
}
p > a:hover{
    color: #d9d9d9;
    text-decoration:  underline;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin:  1% 0 1% 0;
}
._12 {
    font-size: 1.2em;
}
._14 {
    font-size: 1.4em;
}
ul {
    padding:0;
    list-style: none;
}
.footer-social-icons {
    width: auto;
	display: flex; 
	padding-left: 130px;
	flex-direction: row;
	justify-content: flex-start;
    margin: 0 0;
	padding-top: 20px;
	padding-bottom: 50px;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:10px 14px;
    o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-facebook:hover {
    background-color: #3d5b99;
}
.fa-twitter {
    padding:10px 12px;
    o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-twitter:hover {
    background-color: #00aced;
}
.fa-instagram {
    padding:10px 14px;
    o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-instagram:hover {
    background-color: #eb8231;
}
.fa-youtube {
    padding:10px 14px;
    o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-youtube:hover {
    background-color: #e64a41;
}
.fa-linkedin {
    padding:10px 14px;
    o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-linkedin:hover {
    background-color: #0073a4;
}
.fa-github {
    padding:10px 14px;
    o-transition:.5s;
    ms-transition:.5s;
    moz-transition:.5s;
    webkit-transition:.5s;
    transition: .5s;
    background-color: #322f30;
}
.fa-github:hover {
    background-color: #5a32a3;
}
@media screen and (min-width: 327px ){
	.grid {
  	max-width: 320px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;}
	.menu {max-width: 320px;}
	.contenedor {max-width: 320px;
	}}
@media screen and (min-width: 480px){
	.grid {max-width: 480px;}
	.menu {max-width: 480px;}
	.contenedor {max-width: 480px;
	}}
@media screen and (min-width: 600px) {
	.grid {max-width: 600px;}
	.menu {max-width: 600px;}
	.contenedor {max-width: 600px;
	}
}

@media screen and (min-width: 800px) {
	.grid {max-width: 800px;}
	.menu {max-width: 800px;}
	.contenedor {max-width: 800px;}
	
	}
@media screen and (min-width: 1024px){
	.grid {max-width: 1024px;}
	.menu {max-width: 1024px;}
}
@media screen and (min-width: 1280px){
	.grid {max-width: 1280px;}
	.menu {max-width: 1280px;}
	.contenedor {max-width: 1280px;}
	.timeline {flex-wrap: nowrap}
}
@media screen and (min-width: 1460px){
	.grid {max-width: 1460px;}
	.menu {max-width: 1460px;}
	.proceso {max-width: 1460px;}
	.contenedor {max-width: 1460px;}
}
@media screen and (min-width: 1920px){
	.grid {max-width: 1920px;}
	.menu {max-width: 1920px;}
	.contenedor {max-width: 1920px;}}