*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

main{
    width: 100%;
    height: auto;
    background: white;
    position: absolute;
}

.content-all{
    width: 100%;
    max-width: 100%;
    min-width: 700px;
    background: white;
    margin: auto;
    margin-top: 0px;
    border: 2px solid white;
}

header{
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: white;
}

.menux {
    width: 100%;
    font-family: calibri; 
    border-bottom-style: solid;
    border-width: 1px;
    border-color: blue;
    float: left;
}


article{
    padding: 40px;
}

.content-all label{
    position: fixed;
    width: 300px;
    max-width: 1000px;
    top: 14px;
    color: gray;
    cursor: pointer;
    z-index: 10;
    
}

.content-all h2{
    position: fixed;
    width: 100%;
    max-width: 100%;
    top: -5px;
    font-size: 26px;
    text-align: left;
    border-bottom-style: solid;
    border-width: 1px;
    border-color: blue;
    
}



.parrafo1{
    color: gray;
    margin-top: 10px;
    letter-spacing: 2px;
}


.parrafo2{
    color: gray;
    margin-top: 30px;
    letter-spacing: 1px;
}


.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*="col"] {
  float: left;
  padding: 15px;
  
}

.xrow {
    margin-top: 10px; 
    text-align:center;  
    border-width: 2px; 
    border-color: Lavender ; 
    border-style: solid; 
    border-style:solid;
    cursor:pointer;
}

.xrow:hover {
  border-color: silver ;  
}

.xrow::after {
  content: "";
  clear: both;
  display: block;
}

[class*="xcol"] {
  float: left;
  padding: 5px;
  
}




.botones {
  padding: 15px;
  width: 100%;
  margin-top: 30px;
  text-align:center;
  min-width: 300px;
  min-height: 180px;
  border-width: 3px; border-color: silver; border-style: dashed; border-style:solid;
  background: #eeeeee;
  
}





footer {
    
    vertical-align: top;
    text-align: center;
    color: black;
    margin-top: 30px;
    letter-spacing: 1px;
    border-top-style: solid;
    border-width: 1px;
    border-color: blue;
    color: #0a7bb0;
    
}

col2:hover{
   cursor: pointer; 
}

.titulo {
    text-align: center; 
    margin-top: 12px;
    color: #0a7bb0;
}
  



@media only screen and (orientation : landscape) {
  header { height: 120px;}
  .botonmenu {height: 70px;margin-top: 0px;}
  label {font-size: 40px; margin-top: -10px;}
  [class=logosuperior] {height:  100px;}
  .menu {margin-top: 25px;}
  .menu li { font-size: 30px;}
  .membrete {padding: 20px; border-spacing: 20px; text-align: center; font-size: 30px;margin-top: 10px;color: #0a7bb0;}
  .titulo {text-align: center; font-size: 35px;margin-top: -8px;color: #0a7bb0;}
  .parrafo1 , .parrafo2{ font-size: 20px;}
  .botonera {column-count:2;}
  .fotosinfo {column-count:3;}
  footer {font-size: 16px;}
  .vfooter {font-size: 16px;}
  .col1 {width: 40%;}
  .col2 {width: 30%;}
  .col3 {width: 30%;}
  
  
}


@media only screen and (orientation : portrait) {
  header { height: 140px;}
  .botonmenu { height:  90px;}
  label {font-size: 60px;  }
  [class=logosuperior] { height:  40px; }
  .menu {margin-top: 40px;}
  .menu li { font-size: 45px;}
  .membrete {padding: 20px; border-spacing: 20px; text-align: center; font-size: 40px;margin-top: 12px;color: #0a7bb0;}
  .titulo {text-align: center; font-size: 50px;margin-top: 12px;color: #0a7bb0;}
  .parrafo1 , .parrafo2 {font-size: 35px;}
  .botonera {column-count:1;}
  .fotosinfo {column-count:2;}
  footer {font-size: 40px;}
  .vfooter {font-size: 60px;}
  .col1 {width: 100%;}
  .col2 {width: 100%;}
  .col3 {width: 100%;}
  
  
}