* {
box-sizing: border-box;

}
img {
max-width: 100%;
height: auto;
}

h4,h5,h6 {
font-family: 'Roboto';
line-height: 1.4rem;
}

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: 1.618em 50% 3.236em 6.472em;
background-position: 50% 50%;
background-size: 90% auto;

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

}
.img_01 {

background-image: url("../img/works/cnarvaez.png");
height: 100vh;
}
.img_02 {
background-color: #FFF;
background-image: url("../img/works/crisnarvaez1.png");
height: 100vh;
}
.img_03 {
background-color: #FFF;
background-image: url("../img/works/crisnarvaez2.png");
height: 100vh;
}
.img_04 {
background-color: #FFF;
background-image: url("");
}
.cm1,.cm2,.cm3,.cm4,.cm5,.cm6,.cm7{
	display: block;
	float: left;
	font-family:'courier';
	}
.cm1{
	width: 50%;
	background-color: #c41130;
	height: 300px;
	color: white;
	padding:10% 6% 8% 8%;
	}
.cm2{
	padding-top:2rem;
	background-image: url("../img/works/cris1.png");
	
	width: 25%;
	height: 270px;
	}
.cm3{
	width: 50%;
	background-color: #241a04;
	height: 300px;
	color: white;
	padding:10% 6% 8% 8%;
	}
.cm4{
	padding-top:2rem;
	background-image: url("../img/works/cris2.png");
	background-color:#fff;
	width: 25%;
	height: 270px;
	}
.cm5{
	text-align:center;
	background-color:#efefef;
	width: 100%;
	height: 256px;
	}
.cm6{
	text-align:center;
	padding-top:2rem;
	background-image: url("../img/works/cnlogov.jpg");
	background-repeat:no-repeat;
	background-color:#fff;
	width: 25%;
	height: 270px;
	}
.cm7{
	background-color:#0D0D0D;
	text-align:center;
	background-image: url("../img/works/cnjean.jpg");
	background-repeat:no-repeat;
	width: 25%;
	height: 270px;
	}


@media (max-width: 980px){

.cm1,.cm2,.cm3,.cm4,.cm6,.cm7{
  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 {
	 margin: 2em 0em;
    padding: 0em;
    background-size: 100% auto;
    background-position: 0% 60%;
 }
 .center {
    padding: 4em 1.8em 0em 1.8em;
    background-image: none;
	font-size: 1.2em;
   }
 .contenido1{
  height:auto;
  }
  .img_02 {
	background-color: #efefef;
}  
  .img_03 {
	background-color: #efefef;
}
 .cm4{
   border-top: 1px dotted grey;
	  }
 }
 
@media (max-width: 768px)/*@media (max-width: 50rem)800px*/ {
.cm1,.cm2,.cm3,.cm4,.cm6,.cm7{
  width:50%;
 }	
  .smallscreen {
  display: block;
 }
  .right {
	margin-top:100px;
    padding: 0em 0em;
    background-image: none;
}
  .left {
    margin: 2em 0em;
    background-size: 100% auto;
    background-position: 0% 60%;
   }  
   
   .center {
    padding: 4em 1.8em 0em 1.8em;
    background-image: none;
	font-size: 1.2em;
   }
  .contenido1{
  height:auto;
  }
  .img_02 {
	background-color: #efefef;
}  
  .img_03 {
	background-color: #efefef;
}
   .cm4{
   border-top: 1px dotted grey;
	  } 
}
@media (max-width: 360px){
.cm1,.cm2,.cm3,.cm4,.cm6,.cm7{
  width:350px;
  height:300px;
 }
 .cm4{
   border-top: 1px dotted grey;
	  }
  .smallscreen {
  display: block;
 }
  .right {
	margin: 2em 0em;
    padding: 0em 0em;
    background-image: none;
}
  .left {
	margin: 2em 0em;
    background-size: 100% auto;
    background-position: 0% 60%;
   }  
   .center {
	padding: 0.6em 1.8em;
    background-image: none;
	font-size: 1.1em;
   }
  .contenido1{
  height:auto;
  }
  .contenido{
  height:22rem;
  }
  
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px){
  html {
 min-width: 12rem;
 }
}