@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');
        

#wrapper{
  position:relative;
  width:100%;
  min-height:450px;
  overflow:hidden;
  z-index: 1;
  border:0px solid black;
  background-image:url('../SiteAssets/Pleca.png');
}

.layer{
  position:absolute;
  width:100vw;
  min-height:450px;
  overflow:hidden;
  border:0px solid black;
}

.layer .content-wrap{
  position:absolute;
  width:100vw;
  min-height:450px;
}

.layer .content-body{
  width:30%;
 position:absolute;
  top:3%;
 /* transform: translateY(-50%);*/
}

.bottom{
  background: #BABABA;
  z-index:101;
}
p
{
	 font-family: Roboto, "sans-serif;";

}
.titRojo
{
margin-left: 18%; 
font-size:18pt;    
text-align: initial;
}
.tex
{
margin-left: 6%;
    font-size: 16pt;    
text-align: initial;
}
.tex1
{
display:none;
margin-left: 7%;
    font-size: 16pt;    
text-align: initial;
}


.bottom .content-body{
  right:10%;
}

.top{
  background: #E6282A;
  color:#fff;
  z-index:102;
  width:500vw;
  -webkit-box-shadow: inset -19px -1px 22px -14px rgba(0,0,0,0.51);
-moz-box-shadow: inset -19px -1px 22px -14px rgba(0,0,0,0.51);
box-shadow: inset -19px -1px 22px -14px rgba(0,0,0,0.51);
}

.top .content-body{
  left:6%;
  color:#fff;
    font-family: Roboto, "sans-serif;";
  
}
.skewed .top{
  transform: skew(-30deg);
 /* transform: skew(-20deg);*/
  margin-left:-1100px;
  width:calc(30vw + 1160px);
 /* width:calc(30vw + 1000px);*/
}

.skewed .top .content-wrap{
  transform: skew(30deg);
  margin-left:1000px;
}
.imgencab
{
	width:70%;
}
   .gris
   {
    position: absolute;
 width: 60%;
height: 120px;
    margin-left: 35%;
    border-radius: 40px;
    position: absolute;
    top: 200px;
    z-index: 23;
    padding: 21px;
    color: #fff;
  

}

.Brojos
{
  /*opacity: 0;*/
	background-color: #E6282A;
    width: 80%;
    font-size: 22px;
    font-weight: 600;
    padding: 8px;
}

.Brojos a
{
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    color:#ffff;}


.Brojos a:visited
{
	color: #ffffff;
	text-decoration: none;
	
}
/*-----------------------------2-------------------*/
.imgencab2
{
	width:70%;
	opacity: 0;
}

  .gris2
   {
    position: absolute;
 width: 60%;
height: 120px;
    margin-left: 35%;
    border-radius: 40px;
    position: absolute;
    top: 200px;
    z-index: 30;
    padding: 21px;
    color: #fff;
  

}

.Brojos2
{
  /*opacity: 0;*/
	background-color: #E6282A;
    width: 80%;
    font-size: 22px;
    font-weight: 600;
    padding: 8px;
    opacity: 0;
}

.Brojos2 a
{
    font-size: 22px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;}


.Brojos2 a:visited
{
	color: #ffffff;
	text-decoration: none;
	opacity: 0;
	
}

 .mas
 {
	background-color: #fff;
    width: 25%;
    color: #E6282A;
    border-radius: 40px;
    font-size: 20px;
    padding: 7px;
}
.top .content-body2 {
    left: 36%;
    color: #fff;
}
.layer .content-body2 {
    width: 60%;
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    }
    .impo
{       background: #4B4A4C;
    width: 45%;
    height: 120px;
    margin-left: 43%;
    border-radius: 40px;
    position: absolute;
    top: 525px;
    z-index: 23;
    padding: 21px;
   
    }
   .impo p
{
font-size:22px;
 color: #fff;
} 
/*-----------------------------------------letras maquina de escribir-----------------------------*/ 
 
.titulomaquina
{
width:25%; 
padding-right: 14px; 
top: 730px; 
position: absolute; 
align-content: end;
text-align: end;
color: #E6282A; 
font-size:25px; 
height: 163px;
border-right: 0.15em solid #E6282A;
}
.escribir{

	width:98%;
	 padding-left: 25%; 
	 padding-top: 85px; 
	 position: absolute; 
	 margin-left: 20px;  
}
.escribir2{
display:none;
	width:98%;
	 padding-left: 25%; 
	 padding-top: 85px; 
	 position: absolute; 
	 margin-left: 20px;  
}

.css-typing p {
  border-right: .15em solid #E6282A;
  font-family: Roboto, "sans-serif;";
  font-size: 24px;
  white-space: nowrap;
  overflow: hidden;
}
.css-typing p:nth-child(1) {
  width: 90%;
  -webkit-animation: type 4s steps(40, end);
  animation: type 4s steps(40, end);
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 90%;
  opacity: 0;
  -webkit-animation: type2 4s steps(40, end);
  animation: type2 4s steps(40, end);
  -webkit-animation-delay: 2s;
  animation-delay: 4s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 90%;
  opacity: 0;
  -webkit-animation: type3 4s steps(40, end), blink .5s step-end infinite alternate;
  animation: type3 4s steps(40, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 4s;
  animation-delay: 8s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(4) {
  width: 100%;
  opacity: 0;
  -webkit-animation: type4 4s steps(40, end), blink .5s step-end infinite alternate;
  animation: type3 4s steps(40, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 10s;
  animation-delay: 12s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.css-typing p:nth-child(5) {
  width: 15%;
  opacity: 0;
  -webkit-animation: type5 2s steps(40, end), blink .5s step-end infinite alternate;
  animation: type3 2s steps(40, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 16s;
  animation-delay: 16s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid #E6282A;
  }
  100% {
    border: none;
  }
}

@-webkit-keyframes type {
  0% {
    width: 0;
  }
  99.9% {
    border-right: .15em solid #E6282A;
  }
  100% {
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #E6282A;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid orange;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: tranparent;
  }
}

@media (min-width: 100px) and (max-width: 1700px) {

.layer .content-body
{
	    width: 33%;
}
.top .content-body {
    left: 8%;
    }
    
    .layer .content-body
    {
	top:4%;
	
}
.titRojo
{
margin-left: 15%; 
font-size:16pt;    
text-align: initial;
}

.tex
{
display:none;
margin-left: 8%; 
font-size:12pt;    
text-align: initial;
}
.tex1
{
display:block;
margin-left: 10%; 
font-size:12pt;    
text-align: initial;
}


.mas
{
width:30%;
/*	font-size: 17px;*/
}
    .gris
    {
	top: 278px;
	    margin-left: 39%;
	        padding: 13px;

}
.imgencab {
   width: 120px;
}
.imgencab2 {
   width: 120px;
   opacity:0;
}

.Brojos
{
	    font-size: 18px;
	    
}
.Brojos2{
	    font-size: 18px;
	     opacity:0;
	    
	    
}

.impo {
    width: 58%;
    margin-left: 34%;
    }
    .impo p {
    font-size: 19px;
    }
.titulomaquina
{
	    width: 17%;
    padding-right: 14px;
    font-size: 19px;
}
.escribir
{

display:none;
	width: 100%;
    padding-left: 16%;
    padding-top: 68px;
}
.escribir2
{    display: inherit;
	width: 100%;
    padding-left: 16%;
    padding-top: 58px;
}

.css-typing p {
font-size:20px;
}
}
/*
@media (min-width: 100px) and (max-width: 1000px) {

.layer .content-body
{
	    width: 50%;
}