.img-banner {
display:block;
width:100%;
max-width:100%; 
cursor:pointer; 
object-fit: cover;
}

.tip{
z-index:7000;
}

.img-blog{
    cursor:pointer;
}

#wrapper{
background-color:red;
position:relative;
width:100%;
min-height:50vw;

/*min-height:55vw;*/
overflow:hidden;  
}

.layer{
background-color:yellow;
position:absolute;
width:100vw;
min-height:55vw;
overflow:hidden;
}

.content-wrap{
background-color:green;
position:absolute;
width:100vw;
min-height:55vw;
}
        
.top{        
z-index:2;
}

.handle{
position:absolute;
height:100%;
display:block;
background-color:orange;
width:5px;
left:50%;
z-index:2;
}    
            
.skewed .handle{        
top:50%;
transform:rotate(30deg) translateY(-50%);
height:200%;
transform-origin:top;
}

.skewed .top{
transform:skew(-30deg);
margin-left:-1000px;
width: calc(55vw + 1000px);
}

.skewed .top .content-wrap{
transform:skew(30deg);
margin-left:1000px;
}
.estiloblog{
text-align:center;
background-color:steelblue;
}
ol > li{
color:orange;
font-size:26px;
text-decoration:underline;
}
.textpos{
padding:10px;
font-family:sans-serif;
background-color:rgb(245, 245, 245);
}



/**************************************************/


.titulo-blog{
background-color:rgba(240, 140, 9, 0.856);
color:white;
padding:10px;

}

.container{
  
 width:100%;
 margin:auto;
    
 
 } /*el que le da tamaño a los bloques*/
    
  .container--flex {
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;/*alinea eje horizontal*/
  align-items:flex-start; /*alinea eje vertical*/
  } /*el que hace los bloques flex*/
    
    .column{
    
    /*align-items:flex-start;
    width:100%;*/
    margin-bottom:10px;
    
    
    }
    
    .column--50{
    
    align-items:flex-start;
    width:50%;
    margin-bottom:20px;
        
    }

/*------------Estilos de Banner-------------*/

.cover{
width:100%;
min-height:100vh;
background:rgba(0,0,0,0.85);
position:fixed;    
top:0;
left:0;
z-index:30000000;
display:none;
}

.contenidocover{

display:flex;
justify-content:center;
align-items:center;
height:100vh;

}

.img-modal{

width:100%;

}


.boton-cover{
position:absolute;
top:10px;
right:10px;
color:white;
width:30px;
height:30px;
border-radius: 50%;
cursor:pointer;
background:#FBA919;
line-height:30px;
text-align:center;
}


.modal--open{
display:block;
}


.main{
padding:20px;
margin-top:4px;
text-align:center;
background-color:rgb(194, 185, 185);
box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

    
    
.boton-blog{
display:inline-block;
background:#FBA919;
text-decoration:none;
border-style:solid;
padding:5px;
border-radius:10%;
width:80px;
height:50px;
line-height:30px;
border-color:white;
    
}

.estiloblog{
margin-top:10px;
border-style:solid;
border-color:#FBA919;
padding:2px;
border-radius:10px;
color:white;
}

a:visited{

   /* color:white;
    border-color:white;*/

}


.textbannerprincipal{
display:none;
}


@media (min-width:720px){

.container{ 
width:80%;
margin:auto;            
}

.column--50{   
align-items:flex-start;
width:50%;
margin-bottom:0px;       
}

.column--50-25 {
width:31%;
}        

.img-modal{
width:60%; 
}

.main{
position:relative;
top:-50px;
z-index:6000000;     
}

.textbannerprincipal{
    display:block;
    
        top:80px;
        
        
}

}


@media (min-width:1020px){


.carrusel-container{
background-color:transparent;
}

.main{
position:relative;
top:-110px;
z-index:6000000;     
width:90%;
margin:auto;
}
        
.textbannerprincipal{
top:180px;
}


.capa{

color:#FBA919;
}

.capa1{
    color:white;
}

.capa2{

    color:#FBA919;
}


.capa3{

  
    background-color:white;
    color:#FBA919;
  

}

}


@media (min-width:1320px){


#wrapper{    
background-color:red; 
top:-150px; 
transform:scaleY(0.8) scaleX(0.8);  
} 

.textbannerprincipal{
top:280px;
}



}