* {
box-sizing: border-box;

}
img {
max-width: 100%;
height: auto;
}
h4,h5,h6 {
font-family: 'Roboto';
line-height: 1.5em;
}

h4 {
font-size: 0.8em;
padding-bottom:1.4em;
color:#1E1E1E;
letter-spacing:3px;
text-transform: uppercase;
}
h5 {
font-size: 1.125em;
margin: 1.313em 0;
}
h6 {
font-size: 1em;
margin: 0.75em 0;
}

.smallscreen {
display: none;
}
.contenido {
color: #4B4B4B;
width:100%;
text-align:center;
}

.contenido1 {
color: #262626;
background-size:auto;
background-attachment: fixed;
background-repeat: no-repeat;
}


.center {
padding: 8em 8em 8em 8em;
background-position: 0 50%;
font-size: 1.4em;
line-height:1.6em;
font-weight: 300;
}

.right {
padding: 0;
background-position: 50% 50%;
background-size: auto;

}
.left {
padding: 1.618em 50% 3.236em 6.472em;
background-position: 100% 50%;

}
.img_01 {
background-color: #ccc;
background-image: url("../img/works/dea2.png");
height: 100vh;
}
.img_02 {
background-color: #FFF;
background-image: url("");

}
.img_03 {
background-color: #ccc;
background-image: url("../img/works/dea2_2.png");
height: 100vh;
}
.img_04 {
background-color: #FFF;
background-image: url("");
}

.cm1{
	display: block;
	float: left;
	width: 25%;
	background-color: #a1b603;
	height: 300px;
	color: white;
	padding:12% 6% 8% 8%;
	}
.cm2{
	display: block;
	background-image: url("../img/works/d1.png");
	background-color:#efefef;
	float: left;
	width: 25%;
	height: 300px;
	}
.cm3{
	display: block;
	float: left;
	width: 25%;
	background-color: #57554c;
	height: 300px;
	color: white;
	padding:12% 6% 8% 8%;
	
	}
.cm4{
	display: block;
	background-image: url("../img/works/d2.png");
	background-color:#efefef;
	float: left;
	width: 25%;
	height: 300px;
	}
.cm5{
	display: block;
	text-align:center;
	background-color:#efefef;
	float: left;
	width: 100%;
	height: 256px;
	}
	

@media (max-width: 980px){

.cm1,.cm2,.cm3,.cm4 {
  width:50%;
  background-repeat: no-repeat;
  background-position: center;
 }
 .cm5{
	height: 50px;
	}
 .smallscreen {
  display: block;
  }
 .right {
	margin-top:100px;
    padding: 0em 0em;
    background-size: 100% auto;
    background-position: 0 60%;
 }
 .left {
    padding: 1.618em 40% 1.618em 3.236em;
    background-size: 39% auto;
    background-position: 100% 60%;
 }
 .center {
    padding: 4em 1.8em 0em 1.8em;
    background-image: none;
	font-size: 1.2em;
   }
 .contenido1{
  height:auto;
  }
 }
 
@media (max-width: 768px)/*@media (max-width: 50rem)800px*/ {
.cm1,.cm2,.cm3,.cm4 {
  width:50%;
 }
	
  .smallscreen {
  display: block;
 }
  .right {
	margin-top:100px;
    padding: 0em 0em;
    background-image: none;
}
  .left {
    padding: 1.618em 3.236em;
    background-image: none;
   }  
   
   .center {
    padding: 4em 1.8em 0em 1.8em;
    background-image: none;
	font-size: 1.2em;
   }
  .contenido1{
  height:auto;
  }
   
}
@media (max-width: 360px){
.cm1,.cm2,.cm3,.cm4 {
  width:350px;
  height:300px;
 }
  .smallscreen {
  display: block;
 }
  .right {
	margin-top:100px;
    padding: 0em 0em;
    background-image: none;
}
  .left {
    padding: 1.618em 3.236em;
    background-image: none;
   }  
   
   .center {
	 padding: 1.6em 1.8em;
    background-image: none;
	font-size: 1.2em;
   }
  .contenido1{
  height:auto;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
  html {
 min-width: 12rem;
 }
}