html {
  scroll-behavior: smooth;
}
  

 
  <style type="text/css">
  
  
  
  
  
<!--
-->
.Estilo10 {
	font-size: 120px;
	color: #000000;
}
.Estilo11 {font-size: 50px}

.div-1 {
        background-color: #ABBAEA;
    }

 body {background-color: #f0e9f8;
       } 
       
 </style>
  

body {
  text-align: center;	        }

 #main {
   min-height: auto;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row wrap;
           flex-flow: row wrap;   }
		   

     #main section{
   min-height: auto;
   margin: 0px;
   padding: 0px;
   display: -webkit-flex;
   display:         flex;
   -webkit-flex-flow: row wrap;
           flex-flow: row wrap;
   }
   
     #main > section  {
   margin: 3px;
   padding: 3px;
   -webkit-flex: 1 1 60%;
           flex: 1 1 60%;
   -webkit-order: 1;
           order: 1;
   }
  
     #main > section > article {
   margin: 1px;
   padding: 2px;
   text-align: center;
   background-color: #FFFFFF;
   min-height: auto;
   max-height: 100%
      border: 1px solid #FAEBD7;
   box-shadow: 1px 1px 2px black;
   border-radius: 5pt;
   -webkit-flex: 5 1 15%;
           flex: 5 1 15%;
   -webkit-order: 2;
           order: 2;   }
           
           
   #main > section > article2 {
   margin: 3px;
   padding: 1px;
   text-align: center;
   min-height: auto;
   max-height: 100%;
   -webkit-flex: 2 1 30%;
           flex: 2 1 30%;
   -webkit-order: 2;
           order: 2;   }
           
   
  #main > aside {
   float:right;
   text-align: center;
   align: top;
   margin: 3px;
   padding: 3px;
     -webkit-flex: 2 1 30%;
           flex: 2 1 30%;
   -webkit-order: 3;
           order: 3;   }
           
 header {
   display: block;
   margin: 6px;
   padding: 5px;
   width:100%
   min-height: auto;
   max-height: 100%
   }
  
footer {
   display: block;
   text-align: center;
   margin: 6px;
   padding: 5px;
   width:100%
   min-height: auto;
   max-height: 100%   }
 
#main > blog {
   margin: 6px;
   padding: 5px;
    border: 1px solid #FAEBD7;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 5;
           order: 5;   }
  
#main > redes {
   margin: 6px;
   text-align: center;
   padding: 5px;
   -webkit-flex: 1 6 30%;
           flex: 1 6 30%;
   -webkit-order: 6;
           order: 6;   }

.fix   {
position:fixed;
    }
  
a:link {
	color: #00008B;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #666666;
}
  
  
.modal-contenido{
  width:700px;
  top: 20px;
  padding: 10px 20px;
  margin: 2% auto;
  position: relative;
}
.modal{
  background-color: rgba(203, 169, 245,.95);
  position: fixed;
  
  top:0;
  right:0;
  bottom:0;
  left:0;
  opacity:0;
  pointer-events:none;
  transition: all 1s;
}

#miModal:target{
  opacity:1;
  pointer-events:auto;
}


   
.EstiloencabezadoA {font-size: 55px;  font-family: 'Comfortaa', cursive; margin: 8px; text-align:center }
.EstiloencabezadoB {font-size: 50px; font-family: 'Great Vibes'; margin: 0px; text-align:center }
.EstiloencabezadoB1 {font-size: 50px; font-family: 'Great Vibes'; margin: 0px; text-align:center }
.EstiloencabezadoB2 {font-size: 50px; font-family: 'Great Vibes', cursive; margin: 1px; text-align: center }

.EstiloencabezadoC {font-size: 18px; font-family: 'Comfortaa', cursive; margin: 15px; text-align:left }
.EstiloencabezadoC1 {font-size: 16px; font-family: 'Comfortaa', cursive; margin: 15px; text-align:left }

.Estilo1b {font-size: 24px; font-family: 'Comfortaa', cursive; margin: 15px; text-align:center }

.Estilo1 {font-size: 16px; 	font-family: 'Comfortaa', cursive; margin: 8px; text-align:center }
.Estilo2 {font-size: 40px; font-family: 'Tangerine', cursive; margin: 4px; text-align:center }
.Estilo3 {font-size: 22px; 	font-family: 'Comfortaa', cursive; margin: 8px; text-align:left }
.Estilo4 {font-size: 60px; font-family: 'Tangerine', cursive; margin: 4px; text-align:left }
.Estilo5 {font-size: 25px; 	font-family: 'Comfortaa', cursive; margin: 1px; text-align:center;}
.Estilo6 {font-size: 25px; 	font-family: 'Comfortaa', cursive; margin: 15px; text-align:left;}
.Estilo12 {
	color: #ff0000;
	font-weight: bold;
font-size: 20px; 
font-family: 'Comfortaa'; 
margin: 0px; text-align:left }
.Estilo14 {	
	font-weight: bold;
font-size: 18px; 
font-family: 'Comfortaa'; 
margin: 0px; text-align:left }
.Estilo15 {font-family: 'Comfortaa'; margin: 0px; text-align:left; font-size: 20px;}





       .apagado {
       display: none ;
}
.sinborde {
      outline: none;
    background-color: #dfe;
    border: 0;
  }

.marketV {
      width: 90%;}
      
.baner {width:100%;}

.foto {
      width:25%;
	  border: 1px; 
	  color: transparent;
}

      
.baner0 { width:100%;
	           opacity: 0;
}

ul {
  list-style-type: none;  
  font-family: "Libre+Baskerville", Times, serif;
  font-size: 40px;
  text-align: center;
  padding: 15;
}
li {
  display: inline; 
  padding: 20px;
}

.V {
 display: none;}


@media all and (max-width: 600px) {
 
 
#main > section > article {
 
   text-align: center;
   min-height: auto;
   max-height: 100%
   -webkit-flex: 1 1 40%;
           flex: 1 1 40%;
   -webkit-order: 2;
           order: 2;   } 
 
   #main > section > article2 {
   margin: 1px;
   padding: 1px;
   text-align: center;
   min-height: auto;
   max-height: 100%;
    -webkit-flex: 1 1 35%;
           flex: 1 1 35%;
   -webkit-order: 2;
           order: 2;   }
           
           
 .EstiloencabezadoA {font-size: 32px;  font-family: 'Comfortaa', cursive; margin: 8px; text-align:center  }
.EstiloencabezadoB {font-size: 24px; font-family: 'Great Vibes', cursive; margin: 1px; text-align: left; }
.EstiloencabezadoB1 {font-size: 33px; font-family: 'Tangerine', cursive; margin: 1px; text-align: center; }
.EstiloencabezadoB2 {font-size: 30px; font-family: 'Great Vibes', cursive; margin: 1px; text-align: center; }
.Estilo1b {font-size: 16px; font-family: 'Comfortaa', cursive; margin: 15px; text-align:left }

.EstiloencabezadoC {font-size: 16px; font-family: 'Comfortaa', cursive; margin: 10px; text-align: left }
.EstiloencabezadoC1 {font-size: 14px; font-family: 'Comfortaa', cursive; margin: 15px; text-align:left }

.Estilo1 {font-size: 13px; 	font-family: 'Comfortaa', cursive; margin: 8px; text-align:center }
.Estilo2 {font-size:35px; font-family: 'Tangerine', cursive; margin: 4px; text-align:center }
.Estilo3 {font-size: 16px; 	font-family: 'Comfortaa', cursive; margin: 8px; text-align:left }
.Estilo4 {font-size: 35px; font-family: 'Tangerine', cursive; margin: 4px; text-align:left }
.Estilo5 {font-size: 16px; 	font-family: 'Comfortaa', cursive; margin: 1px; text-align:center;}
.Estilo6 {font-size: 16px; 	font-family: 'Comfortaa', cursive; margin: 10px; text-align:left;}

.Estilo12 {
	color: #ff0000;
	font-weight: bold;
font-size: 18px; 
font-family: 'Comfortaa'; 
margin: 0px; text-align:left }
.Estilo14 {	
	font-weight: bold;
font-size: 16px; 
font-family: 'Comfortaa'; 
margin: 0px; text-align:left }
.Estilo15 {font-family: 'Comfortaa'; margin: 0px; text-align:left; font-size: 20px;}



 
 
 ul {
  list-style-type: none;  
  font-family: "Libre+Baskerville", Times, serif;
  font-size: 30px;
  text-align: center;
  padding: 0px;}
  
li {  display:block;
  padding: 5px; }

     .V {
 display: block;
}
    .H {
 display: none !important;
}

#main > aside, section {  
    -webkit-order: 5;
            order: 5;   }
#main > nav, #main > aside, header, footer {
    min-height: 20px;
    max-height: 100%;
   }


.foto {
      width:48%;
}


.portada {
      width:22%;
    
}
.marketV {
      width: 40%;}
      
.baner { width:100%;
	      content:url("BannerCelular.jpg");
     
      }
     
      
      
.baner0 { width:100%;
	      content:url("BannerCelular.jpg");
      opacity: 0;
}



	      

  
      .Estilo2 {font-size: 24px}
    .Estilo3 {font-size: 24}
   
   
a:link {
	color: #666666;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #666666;
}
a:hover {
	text-decoration: none;
	color: #999999;
}
a:active {
	text-decoration: none;
	color: #666666;
}