@import url('https://fonts.googleapis.com/css?family=Istok+Web:400,700&display=swap');

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;	
}

html {
	scroll-behavior: smooth;	
	
}

body {	
	margin: 0;
	padding: 0;
	padding-top: 100px;	
	flex-wrap: wrap;
	font-family: 'Istok Web', sans-serif;
}

/* inicio menu */

a {
	text-decoration: none;
}

ul {
	list-style-type: none;
	margin:0;
	padding:0;
}

nav {
	position: fixed;
	width: 100%;
	z-index: 1;	
	top:0;
	background-color: rgba(255, 255, 255, 0.3);
	padding: 16px 0;
	
}

nav .container{
	display: flex;
	justify-content: space-between;
	align-content: center;
}

#logo {
	height: 30px;
}

.container {
	width: 95%;
	margin: 0 auto;
	text-align: center;
}

.container img {
	cursor: pointer;
}

#menu-icon {
	height: 30px;		
}


#menu {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: 30%;
	z-index: 10;
	background-color: #2c2f32;
	text-align: center;
}


#menu li a {
	display: block;
	color: white;
	background-color: #444543;
	padding: 16px 15px;
	margin-bottom: 16px;
	font-weight: 700;
}

#menu.active {
	display: block;

}

#exit {
	padding: 16px 0;
}

#exit img {
	height: 20px;
	cursor: pointer;
}

/* final menu */



h2 { 
	padding: 20px;
	text-align: center;
	font-size: 25px;
	text-transform: uppercase;
		
}

.portafolio {
	background-color: #2c2f32;
	width: 100%;
	padding: 20px;
	margin: 20px 0;
	text-align: center;
}

.portafolio h2 {
	color: white;
}

.portafolio img {
	width: 300px;
	padding: 20px;	
}

.nosotros {	
	padding: 0;
	margin: 0;	
	text-align: center;	
}


.nosotros img {	
	height: 70px;
			
}

.nosotros p{
	font-size: 13px;
	padding: 20px;	
}

/* inicio equipo */

.team {	
	padding: 20px;
	
}


.equipo {
	width: 100%;		
	text-align: center;
	margin: 20px 0;
	
}


.equipouno, .equipodos {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;	
	margin: 10px;	

}


.equipos {
    margin: 5px 30px;
    -webkit-perspective: 800;
    perspective: 800;
    
}

.card {
    width: 220px;
    height: 280px;       
    text-align: center; 
    position: relative;
    transform-style: preserve-3d; 
    transition: .7s ease;
  
}

.card img {
	height: 100%;
			
}



.font, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}


.font {
   padding: 5px; 
    
}


.back {
    background-color:  #2c2f32;
    transform: rotateY(180deg);
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	color: white;
	text-transform: uppercase;
	font-size: 12px;
		
}

.back span {
	color: #ff842a;
	font-size: 15px;
	
}

.equipos:hover .card {
    transform: rotateY(180deg);
   
}

/* termino equipo*/

.servicio {
	padding: 20px;
	background-color: #2c2f32;
	text-align: center;		
}


.servicio h2 {
	color: white;
}


.services {
	padding: 20px 0;
	
}

.services img {
	height: 200px;
	padding: 0 0 20px 0;
}


.services li{
	padding: 10px 0;
	margin: 0 20px;
	font-size: 10px;
	color: white;	
	text-transform: uppercase;	
	font-weight: 700;
	
}

.clientes {
	padding: 20px;
	text-align: center;
	justify-content: space-around;
}


.clientes img {
	width: 120px;
	padding: 10px;
}

/* inicio pie */

.food {
	flex-wrap: wrap;
	color: white;
	padding: 20px;
	display: flex;
	justify-content: space-around;
	align-content: center;
	text-align: center;
	background-color: #2c2f32;

}

.contacto {
	font-size: 15px;
}

.food a {
	color:white;
}

.contacto h3 {
	font-size: 20px;
	text-transform: uppercase;
	padding: 10px;
}

.redes {
	text-align: center;
	padding: 20px;
	
}

.redes .logo-2 {
	width: 40%;
	padding: 20px 0;
}

.rrss a {
	padding: 0 10px;
}


.derechos {
	color:white;
	background-color: #2c2f32;
	text-align: center;
	padding: 20px;
	font-size: 12px;
	text-transform: uppercase;
}

/* termino pie */

/* inicio slider */


.slider {
    width: 95%;
    margin: auto;
    overflow: hidden;

}

.slider ul {
    display: flex;
    padding: 0;
    width: 400%;
	animation: change 16s infinite alternate;	
    animation-timing-function: ease-in;   
}

.slider li {
    width: 100%;
    list-style-type: none;
}

.slider img {
    width: 100%;
    height: 100%;
}


@keyframes change {
    0% { margin-left: 0%;}
    20% { margin-left: 0%;}

    25% { margin-left: -100%;}
    45% { margin-left: -100%;}

    50% { margin-left: -200%;}
    70% { margin-left: -200%;}

    75% { margin-left: -300%;}
    100% { margin-left: -300%;}
}

/* fin slider*/


@media only screen and (min-width:780px) {	

	.hide-desktop {
		display: none;
	}

	#logo {
		height: 45px;
	}
	
	#menu {
		position: inherit;
		display: flex;
		justify-content: flex-end;
		background-color: inherit;
	}

	#menu.active {
		display: flex;
	}

	#menu li a {
		padding: 0;
		margin: 16px 10px;
		background-color: inherit;
		color: #2c2f32;		

	}

	.portacero {	
		display: flex;	
		justify-content: space-around;
	}


	.portafolio img {
		width: 400px;
		
	}

	

	.nosotro {
		padding: 20px ;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.nosotro img {
		height: 100px;
	}

	.nosotro p{
		text-align: left;
		padding: 0 30px;
		font-size: 15px;		
		width: 460px;		
	}	
	
	
	.services {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap; 

	}


	.services img {
		height: 300px;
	
	}

	.services ul {
	text-align: justify;

	}

	.services li {
		font-size: 15px;
	}

	.clientes img {
		width: 200px;
		padding: 20px;
		
	}
}