@font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/* 16px = 12pt = 100% = 1em (ancho de la M mayuscula) */

p { 
  font-family: 'open_sansregular', Arial, sans-serif;
  size: 1em  
}

  @font-face {
    font-family: 'open_sanssemibold';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Semibold-webfont.woff') format('woff'),
         url('OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('OpenSans-Italic-webfont.eot');
    src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Italic-webfont.woff') format('woff'),
         url('OpenSans-Italic-webfont.ttf') format('truetype'),
         url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
text-align: left;
margin: 0%;
background-color: lightgray;
}

#cajaheader{
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:18%;
margin-top: 2%;
}


#logo{
margin-top: -23%;

}


#principal{
text-align: left; 
margin:auto;
width: 60%;
height:100%;

}

#menuhorizontal {
float:center;
width:100%;
padding:0px;
margin-left:31%;
margin-top: -20%;
list-style-type:none;
}
#menuhorizontal a {
float:center;
width:100px;
text-decoration:none;
text-align:center;
color:#000;
padding:5px 30px;
border-bottom-right-radius: 20px;
}
#menuhorizontal a:hover {
background-color:#e2781d

}
#menuhorizontal li {
display:inline;
}

#gif{
float: right;
/*margin-left: 5%;*/
margin-top: 15%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);

}

#redsocial{
float:left;
margin-right: 15%;
margin-top: -10%;
}

#contenido{
width: 100%;
}

#columnas{
width:85%;
}

#articulo1{
width: 60%;
float: left;
margin-top: 0%;
font-size: 1em;


}

#articulo2{
width:60%;
float:left;
font-size: 1em;
margin-right:5%;
}

em {
   font-family: 'open_sansitalic'; Arial italic; sans-serif italic;
}

strong{
  font-family: 'OpenSans-Semibold', Arial semibold, sans-serif semibold;
 }

h3{
  font-family:'OpenSans-Semibold', Arial semibold, sans-serif semibold;
  color: #00675C;
}


footer{
width: 90%;
float: left;
margin-top:6%;
margin-bottom: 3%;
margin-left:5%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:-5%;
margin-top: 2%;

}

@media all and (min-width: 1px) and (max-width: 320px) {
    @font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

p { 
  font-family: 'open_sansregular', Arial, sans-serif;
  size: 1em  
}

  @font-face {
    font-family: 'open_sanssemibold';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Semibold-webfont.woff') format('woff'),
         url('OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('OpenSans-Italic-webfont.eot');
    src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Italic-webfont.woff') format('woff'),
         url('OpenSans-Italic-webfont.ttf') format('truetype'),
         url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
text-align: left;
margin: 0%;
background-color: lightgray;
}

#cajaheader{
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:18%;
margin-top: 2%;
}


#logo{
margin-top: -23%;

}


#principal{
text-align: left; 
margin:auto;
width: 60%;
height:100%;

}

#menuhorizontal {
float:center;
width:100%;
padding:0px;
margin-left:31%;
margin-top: -20%;
list-style-type:none;
}
#menuhorizontal a {
float:center;
width:100px;
text-decoration:none;
text-align:center;
color:#000;
padding:5px 30px;
border-bottom-right-radius: 20px;
}
#menuhorizontal a:hover {
background-color:#e2781d

}
#menuhorizontal li {
display:inline;
}

#gif{
float: right;
margin-left: 5%;
margin-top: 15%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);

}

#redsocial{
float:left;
margin-right: 15%;
margin-top: -10%;
}

#contenido{
width: 100%;
}

#columnas{
width:85%;
}

#articulo1{
width: 60%;
float: left;
margin-top: 0%;
font-size: 1em;


}

#articulo2{
width:60%;
float:left;
font-size: 1em;
margin-right:5%;
}

em {
   font-family: 'open_sansitalic'; Arial italic; sans-serif italic;
}

strong{
  font-family: 'OpenSans-Semibold', Arial semibold, sans-serif semibold;
 }

h3{
  font-family:'OpenSans-Semibold', Arial semibold, sans-serif semibold;
  color: #00675C;
}
    
footer{
width: 90%;
float: left;
margin-top:6%;
margin-bottom: 3%;
margin-left:5%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:-5%;
margin-top: 2%;

}    
    
}

@media all and (min-width: 321px) and (max-width: 640px) {
    @font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

p { 
  font-family: 'open_sansregular', Arial, sans-serif;
  size: 1em  
}

  @font-face {
    font-family: 'open_sanssemibold';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Semibold-webfont.woff') format('woff'),
         url('OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('OpenSans-Italic-webfont.eot');
    src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Italic-webfont.woff') format('woff'),
         url('OpenSans-Italic-webfont.ttf') format('truetype'),
         url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
text-align: left;
margin: 0%;
background-color: lightgray;
}

#cajaheader{
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:18%;
margin-top: 2%;
}


#logo{
margin-top: -23%;

}


#principal{
text-align: left; 
margin:auto;
width: 60%;
height:100%;

}

#menuhorizontal {
float:center;
width:100%;
padding:0px;
margin-left:31%;
margin-top: -20%;
list-style-type:none;
}
#menuhorizontal a {
float:center;
width:100px;
text-decoration:none;
text-align:center;
color:#000;
padding:5px 30px;
border-bottom-right-radius: 20px;
}
#menuhorizontal a:hover {
background-color:#e2781d

}
#menuhorizontal li {
display:inline;
}

#gif{
float: right;
margin-left: 5%;
margin-top: 15%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);

}

#redsocial{
float:left;
margin-right: 15%;
margin-top: -10%;
}

#contenido{
width: 100%;
}

#columnas{
width:85%;
}

#articulo1{
width: 60%;
float: left;
margin-top: 0%;
font-size: 1em;


}

#articulo2{
width:60%;
float:left;
font-size: 1em;
margin-right:5%;
}

em {
   font-family: 'open_sansitalic'; Arial italic; sans-serif italic;
}

strong{
  font-family: 'OpenSans-Semibold', Arial semibold, sans-serif semibold;
 }

h3{
  font-family:'OpenSans-Semibold', Arial semibold, sans-serif semibold;
  color: #00675C;
}
    
footer{
width: 90%;
float: left;
margin-top:6%;
margin-bottom: 3%;
margin-left:5%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:-5%;
margin-top: 2%;

}    
    
}

@media all and (min-width: 641px) {
    @font-face {
    font-family: 'open_sansregular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Regular-webfont.woff') format('woff'),
         url('OpenSans-Regular-webfont.ttf') format('truetype'),
         url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

p { 
  font-family: 'open_sansregular', Arial, sans-serif;
  size: 1em  
}

  @font-face {
    font-family: 'open_sanssemibold';
    src: url('OpenSans-Semibold-webfont.eot');
    src: url('OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Semibold-webfont.woff') format('woff'),
         url('OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'open_sansitalic';
    src: url('OpenSans-Italic-webfont.eot');
    src: url('OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('OpenSans-Italic-webfont.woff') format('woff'),
         url('OpenSans-Italic-webfont.ttf') format('truetype'),
         url('OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
text-align: left;
margin: 0%;
background-color: lightgray;
}

#cajaheader{
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:18%;
margin-top: 2%;
}


#logo{
margin-top: -23%;

}


#principal{
text-align: left; 
margin:auto;
width: 60%;
height:100%;

}

#menuhorizontal {
float:center;
width:100%;
padding:0px;
margin-left:31%;
margin-top: -20%;
list-style-type:none;
}
#menuhorizontal a {
float:center;
width:100px;
text-decoration:none;
text-align:center;
color:#000;
padding:5px 30px;
border-bottom-right-radius: 20px;
}
#menuhorizontal a:hover {
background-color:#e2781d

}
#menuhorizontal li {
display:inline;
}

#gif{
float: right;
margin-left: 5%;
margin-top: 15%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);

}

#redsocial{
float:left;
margin-right: 15%;
margin-top: -10%;
}

#contenido{
width: 100%;
}

#columnas{
width:85%;
}

#articulo1{
width: 60%;
float: left;
margin-top: 0%;
font-size: 1em;


}

#articulo2{
width:60%;
float:left;
font-size: 1em;
margin-right:5%;
}

em {
   font-family: 'open_sansitalic'; Arial italic; sans-serif italic;
}

strong{
  font-family: 'OpenSans-Semibold', Arial semibold, sans-serif semibold;
 }

h3{
  font-family:'OpenSans-Semibold', Arial semibold, sans-serif semibold;
  color: #00675C;
}
    
footer{
width: 90%;
float: left;
margin-top:6%;
margin-bottom: 3%;
margin-left:5%;
box-shadow: 20px 20px 20px rgb(248, 160, 40);
background-color:#006a55;  
width:960px;
height:200px;
padding:10px;
margin-left:-5%;
margin-top: 2%;

}    
    
}