* {
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-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:auto;

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

}
.img_01 {

background-image: url("../img/works/bag.jpg");
height: 100vh;
}
.img_02 {

background-image: url("../img/works/ba2.png");
height: 100vh;
}
.img_03 {

background-image: url("../img/works/ba3.png");
height: 100vh;
}
.img_04 {

background-image: url("../img/works/ba4.png");
height: 100vh;
}

@media (max-width: 980px){

 .smallscreen {
  display: block;
  background-color:#efefef;
  }
 .right {
	margin-top:50px;
    padding: 0em 0em;
    background-size: 100% auto;
    background-position: 0 50%;
 }
 .left {
	margin: 0em 0em;
    padding: 0em;
    background-size: 100% auto;
    background-position: 0% 50%;
 }
 .center {
    padding: 4em 1.8em 0em 1.8em;
    background-image: none;
   }
 .contenido1{
  height:auto;
  }
  .img_02 {
	background-color: #efefef;
}  
  .img_03 {
	background-color: #efefef;
}

 }
 
@media (max-width: 768px)/*@media (max-width: 50rem)800px*/ {
  .smallscreen {
  display: block;
 }
  .right {
	margin-top:0px;
    padding: 0em 0em;
	margin: 0em 0em;
    background-image: none;
}
  .left {
    margin: 0em 0em;
	margin: 0em 0em;
    background-size: 100% auto;
    background-position: 0% 60%;
   }  
   
   .center {
    padding: 4em 1.8em 1em 1.8em;
    background-image: none;
	font-size: 1.2em;
   }
  .contenido1{
  height:auto;
  }
  .img_02 {
	background-color: #efefef;
}  
  .img_03 {
	background-color: #efefef;
}
  
}
@media (max-width: 360px){

  .smallscreen {
  display: block;
 }
  .right {
	margin: 0em 0em;
    padding: 4em 0em;
    background-image: none;
}
  .left {
	margin: 0em 0em;
    background-size: 100% auto;
    background-position: 0% 60%;
   }  
   .center {
	padding: 1em 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;
 }
}