*{margin:0px ; padding:0px; border:0px ; box-sizing: border-box ; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, figure {display:block;}
@font-face { font-family: Handwriting ;  
                 src:local("LHANDW.eot"),
                 url(fonts/LHANDW.eot),  
                 url(fonts/LHANDW.eot?#iefix) format("embedded-opentype"); }    /* EOT file for IE */

@font-face { font-family: Handwriting ;  
               src:local("LHANDW.TTF"), url(fonts/LHANDW.TTF) format("truetype"); }               /* TTF file for CSS3 browsers */
p {color:black; font-family: tahoma, arial ; font-size:15px ; text-align:justify;  padding:20px ;}
h1 {font-family: tahoma ; font-size:19px ; color: #8b0000 ;}
h2 {font-family: tahoma ; font-size:15px ; font-weight: 200; color:#8b0000;}
h3 {font-family: tahoma ; font-size:15px ; font-weight: 200; color:#023859 ;}
h4 {font-family: tahoma ; font-size:15px ; font-weight: 200; color:#023859 ; border-bottom:1px solid rgba(100,100,100,.5) ; }
a {font-size: 14px ; text-decoration:none ;}

body { width:100% ;  font-family:  arial; background: #e8edec;  }
#global {margin:auto ; width:90% ; }

header { width:100% ; height:91px ; position:fixed; top:0; left:0 ;  border-top:1px solid rgba(100,100,100,.5) ;  z-index:2 ; display:flex ; flex-flow: row ; background: #f5fafa  ;}                                                              
  #redes { color:#999 ; height:30px ; margin-top:10px ;  order: 3 ;  flex: 1 1 200px ; }  
  #logo { margin: 10px 20px; order: 1; flex: 1 1 200px ; } 
  h2 {margin: 30px 600px; order: 2 ; flex: 3 3 900px ;  }
  .menu_bar, .fotos {display:none ; } 

                        /*inicio navegador*/
#navegador {width:100% ;  height:45px ; position:fixed; top:91px; left:0 ; border-top: 1px solid rgba(100,100,100,.5) ; background: #ecf1f1  ;  
              z-index:2 ; display:flex ;  border-bottom:1px solid rgba(100,100,100,.5) ; } 

  nav>ul {margin-left: 200px ;  }
  nav ul li {position:relative ; display:inline-block;  }            
  nav ul li a {color:   #8b0000 ;   font-size:15px ; display:block ;  text-decoration:none ; padding:5px 10px ; } 
  nav ul li a:hover {color:  #023859  ; border-bottom:2px solid #023859 ;  }
  nav ul li a span {margin:7px ; }      
  nav ul li:hover .children {display:block; } 
  nav ul li .children {display: none ; position:absolute;  width: 150px ; z-index:100 ;  background: #dce3e2;  } 
  nav ul li .children a:hover {color: #023859 ; }
  nav ul li .children li {border-bottom:5px solid rgba (255,255,255,.5);  display:block ; }

                        /*fin navegador*/

#main {margin:150px auto; width:100% ; height:auto ; display:flex ; flex-flow: row;  }
     .pdf {color: red;  }
     .pdf:hover {color: #023859  ; font-weight: bold ; }

     #izquierda {  order: 1 ; margin: 30px 0 0 10% ;  padding:30px 0 ;  flex: 1 1 60% ; display:flex ; flex-direction: column ;   }
     #titulo { color: #8b0000 ; margin-left: 100px ; font-variant:small-caps; order: 1 ; }
     #texto1  {width:100% ; margin: 0 10px; order: 2; }
     #texto2 {width:100% ; margin: 0 10px; order: 4; }

     .fotos  {  display:none; order: 3; }
     #texto1 p, #texto2 p {  padding:20px; }
     table {border: 3px solid brown ; width:95% ; border-collapse: collapse ;  font-size:15px ; }
     th, td {border: 1px solid red ; text-align:center ; height:30px ;  }

     #texto1 a, #texto3 a {  margin-left : 350px ; }
     .button {  position: relative;  display: inline-block;  border-radius: 0.35em;  color: #fff !important; 
		text-decoration: none;  padding: 0.75em 2.5em 0.75em 2.5em;   background-color: #8ebebc;  border: 0;  cursor: pointer;
		
		transition: background-color 0.35s ease-in-out;
		-moz-transition: background-color 0.35s ease-in-out;
		-webkit-transition: background-color 0.35s ease-in-out;
		-ms-transition: background-color 0.35s ease-in-out;    }

      .button:hover {  background-color:  #9ececc ; }
      .button:active { background-color:  #7eaeac ; }


    #animacion {  order: 2 ; margin-top: 30px ;  flex: 1 1 40% ; display:flex ; flex-direction: column ; height:500px; }
       #video { width:100% ; margin: 0 10px; }
      .objeto  {padding: 5% 20% ; height:90% ; }
      .objeto img {width: 90% ; margin: 20% 0; }  


      #slider {  margin: 5px ; width:100% ;  height:auto  ; }
	  #texto3 h1 { margin-left: 350px ;}
      #texto3 p { margin: 10px 250px  ;  }


footer {width:100% ; position:fixed; bottom:0; left:0 ; height:40px ; border-top:1px solid rgba(100,100,100,.5) ; background:#f5f5dc ; display:flex ; flex-direction: column ; } 
   #pieuno {height:10px ; }
   #piedos {height:30px ; }
   #pieuno p {font-size:12px ; text-align:center ; color:#696969 ; padding:2px ;}
   #piedos p {font-size:11px ; color:#696969 ; float:right ; margin-right:40px ; padding:0 ;}          
                                

@media screen and (max-width: 1500px) {
     nav { flex: 1 ;  padding: 8px 0 ; margin-left:5%;  width:100% ; }
 }


@media screen and (max-width: 800px) {
    #main {flex-direction:column ;}
    header, #izquierda, #animacion .fotos {order:0 ;}
    #redes , #piedos , .objeto {display:none ;}
    #global {width:100% ;   }

    header {height: 71px ; background: #f5fafa  ;  }
    p {font-size:14px ;}
    h1 {margin-bottom: 10px  ;  font-size: 17px ; width:70% ; text-align:center ;}
    .pdf {font-size: 13px ; text-align:left ; }
	
    .menu_bar {  display:block; height:50px ; width:100%;  position: fixed; top: 0 ;  }
    .menu_bar .bt-menu { display:block; padding:30px 20px 0 10px; text-decoration:none ; font-size: 16px ; }
    .menu_bar span {  font-size: 20px;  padding: 10px ; }
    
      #logo {height: 2px  ; width:40% ; margin-left:70% }
      #logo img {height: 55px ;}

      #navegador { margin:0 ; height: 0px ; top:71px; border-bottom:none ;  background:   #81918E; }  
      nav {width:40% ; position:fixed; right:100% ; margin-left: 0; height: 200px ;  background: #CCCCCC ;}
      nav>ul {margin-left: auto ; }
      nav ul li {display:block ; border-bottom:1px solid rgba(220,220,220,.5) ;  }
      nav ul li .children {position:relative; width:100% ; }
      nav ul li:hover .children {display:none ;}
      nav ul li a { font-size: 14px ;} 
 
    #main {height: 1500px ;  width:100% ;  }

	   #titulo {margin-left: 50px}
       #texto1 p {width:75% ; padding: 10px ; }
       #texto2 p {width:75% ; padding: 10px ;}
	   #texto3 h1 { margin-left: 50px ;}
	   #texto3 p {width:75% ; padding: 10px ; margin-left: 50px ;}
	   #texto1 a, #texto3 a {  margin-left : 100px ; }
	   
       table {font-size:12px ;width:75% ; }
      .fotos { display:block;  width:70% ;  } 
      .fotos img { width: 100% ; padding:10px 20% ;}


    footer {height:40px ;}
      a {font-size: 15px ;}
      #pieuno p {font-size:10px ;}
  }