@font-face {
font-family: raleway;
src: url('../fuentes/Raleway-Italic-VariableFont_wght.ttf');
}

@font-face {
font-family: waltograph;
src: url('../fuentes/waltograph.otf');
}

@font-face {
font-family: sophiascript;
src: url('../fuentes/sophiascript.ttf');
}

@font-face {
font-family: didot;
src: url('../fuentes/TheanoDidot-Regular.ttf');
}

@font-face {
font-family: agent;
src: url('../fuentes/AgentOrange.ttf');
}

@font-face {
font-family: arial-narrow;
src: url('../fuentes/arial-narrow.ttf');
}

@font-face {
font-family: HARRYP_;
src: url('../fuentes/HARRYP__.TTF');
}

@font-face {
font-family: chinacat_reg;
src: url('../fuentes/chinrg__.ttf');
}

@font-face {
font-family: chinacat_fina;
src: url('../fuentes/chint__.ttf');
}

body{
    	background-image:url("../images/im.png");
    	background-size: 100% 100%;
    	overflow-x: hidden;
    	overflow-y: hidden;
    	border:1px solid black;
	font-family:raleway;
    	width:98%;
    	height:100%;
   	margin:0;
    	border:0;
    	padding: 0;
    	text-align: center;
}

@media only screen and (max-width:768px){


    .container{display:none}
    .content{display:none}
    .menu_c{display:none}
    .sidebar_c{display:none}
    .sub_menu_c{display:none}
    .menu_logo{display:none}
    .invisible{display:none}
    .menu{display:none}
    #desp{display:none}
    #despues{display:none}
    #infor{display:none}
    #divi1{display:none}
    #divi2{display:none}
    #divi3{display:none}
    #izquierda{display:none}
    #menu{display:none}
    #na_b{display:none}


    .menu_prin{
        width:80%; 
        margin-left:9%; 
        height:75%;
        margin-top: 0%;
        margin-bottom:1%;
        padding-top:1%;
        padding-bottom:3%;
        padding-left:1%;
        border:1px solid rgba(100,100,100,0.5);
        z-index:1000000;
        overflow-y:auto;
        }

    
    /* Estilos comunes */
    .header_mov {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      font-size:1.8rem;
      font-style:italic;
      top: 0;
      left: 0;
      right: 0;
      bottom:90%;
          background-color:transparent;

      background-size: 100% 100%;
      padding: 1%;
    }
    
    .pie{
    	position:absolute;
    	padding-bottom: 1%;
    	float:bottom;
    	width:100%;
    	height:3%;
    	bottom:0;
    	z-index:101;
    	    background-color:transparent;

    	background-size:100%;
     }


      /* Oculta el nav en la parte izquiera */
      .nav_mov {
        position: fixed;
        top: 10%;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to right, rgba(15,25,111,0.8) 1%,rgba(255,255,255,1) 100%);
        transform: translateX(-100vw);
        transition: 1.2s;
      }

      /* Muestra el nav */
      .nav_show {
        position: fixed;
        top: 10%;
        left: 0;
        right: 0;
        bottom: 0;
        height:90%;
        background: linear-gradient(to right, rgba(15,25,111,0.8) 0.5%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%);
        transform: translateX(0vw);
        color:black;
        transition: 1.2s;
        z-index:1000000;
      }

      .nav_button {
      	background-color:rgba(200,200,200,1);	
      	font-size:25px;
        text-align: left;
        width:60%;
        box-shadow: 1px 1px 5px;
        transition: 1.5s;
      }
      
      .nav_oc {
      	background-color:rgba(240,240,240,1);	
      	font-size:25px;
        text-align: left;
        border-radius:70%;
        width:60%;
        box-shadow: 1px 1px 5px;
        transition: 1.5s;
      }

      .nav_ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .nav_ul {
        display: block;
        padding-top: 3%;
        font-size: 1rem;
        text-align: left;
        text-decoration: none;
        color: black;
      }
      
      .lin {
        text-decoration:none;
        padding-top: 0.2rem;
        font-size: 1.1rem;
        text-align: left;
      	color: black;
      }
      
      .lin1 {
        text-decoration:none;
        padding-top: 0.2rem;
        font-size: 1.1rem;
        text-align: left;
      	color: black;
      }
      
      .lin1:hover {
        text-decoration:none;
        padding-top: 0rem;
        font-size: 1rem;
        text-align: left;
      	color: black;
      	opacity:1;
      	margin-left:2%;
      	background-color:beige;
      	border-radius:5px;
        transform: translateY(3in);
        transition: 1.5s;
      }
      
      
      .nav_item{
              padding-top: 1%;
      }
     
      /* botón abrir cerrar */
      a.target-burger{
            width: 3.250em;
            height: 3.250em;
            position: absolute;
            display: block;
            .transition(0.5s);
            &:hover{
                cursor: pointer;
                .opacity(0.45);
            }
            &.toggled{
                ul.buns{
                    li.bun{
                        -webkit-transform: rotate(45deg) translateZ(0);
                        transform: rotate(45deg) translateZ(0);
                        &:last-child{
                            -webkit-transform: rotate(-45deg) translateZ(0);
                            transform: rotate(-45deg) translateZ(0);
                        }
                    }
                }
            }
            ul.buns{
                width: 1.625em;
                height: 1.625em;
                list-style: none;
                margin: -1.625em/2 0 0 -1.625em/2;
                padding: 0;
                position: absolute;
                top: 0%;
                left: 0%;
                -webkit-transition: -webkit-transform 1s cubic-bezier(.23,1,.32,1),color 1s cubic-bezier(.23,1,.32,1);
                transition: transform 1s cubic-bezier(.23,1,.32,1),color 1s cubic-bezier(.23,1,.32,1);
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                color: #fff;
                li.bun{
                    width: 100%;
                    height: 2px;
                    background-color: #fff;
                    position: absolute;
                    top: 0%;
                    margin-top: -.75px;
                    -webkit-transform: translateY(-3.75px) translateZ(0);
                    transform: translateY(-3.75px) translateZ(0);
                    -webkit-transition: -webkit-transform 1s cubic-bezier(.23,1,.32,1),background-color 1s cubic-bezier(.23,1,.32,1);
                    transition: transform 1s cubic-bezier(.23,1,.32,1),background-color 1s cubic-bezier(.23,1,.32,1);
                    &:last-child{
                        -webkit-transform: translateY(3.75px) translateZ(0);
                        transform: translateY(3.75px) translateZ(0);
                    }
                }
            }
        }
      
}

@media only screen and (min-width:768px) and (max-width:1200px){


    .container{display:none}
    .content{display:none}
    .menu_c{display:none}
    .sidebar_c{display:none}
    .sub_menu_c{display:none}
    .menu_logo{display:none}
    .invisible{display:none}
    .menu{display:none}
    #desp{display:none}
    #despues{display:none}
    #infor{display:none}
    #divi1{display:none}
    #divi2{display:none}
    #divi3{display:none}
    #izquierda{display:none}
    #menu{display:none}
    #na_b{display:none}
    a.target-burger{display:none}


    .menu_prin{
        width:80%; 
        margin-left:9%; 
        height:75%;
        margin-top: 0%;
        margin-bottom:1%;
        padding-top:1%;
        padding-bottom:3%;
        padding-left:1%;
        border:1px solid rgba(100,100,100,0.5);
        z-index:1000000;
        overflow-y:auto;
        }
    
    /* Estilos comunes */
    .header_mov {
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: fixed;
      font-size:1.8rem;
      font-style:italic;
      top: 0;
      left: 0;
      right: 0;
      bottom:90%;
          background-color:transparent;

      background-size: 100% 100%;
      padding: 1%;
    }
    
    .pie{
    	position:absolute;
    	padding-bottom: 1%;
    	float:bottom;
    	width:100%;
    	height:3%;
    	bottom:0;
    	z-index:101;
    	    background-color:transparent;

    	background-size:100%;
     }

      /* Oculta el nav en la parte izquiera */
      .nav_mov {
        position: fixed;
        top: 0%;
        left: 20%;
	width:60%;
	height:0;
        background: linear-gradient(to right, rgba(15,25,111,0.8) 1%,rgba(255,255,255,1) 100%);
        opacity:0;
        transition: 1.2s;
      }

      /* Muestra el nav */
      .nav_show {
        position: fixed;
        top: 15%;
        left: 20%;
        right: 20%;
        bottom: 10%;
        height:75%;
        background: linear-gradient(to right, rgba(15,25,111,0.8) 0.5%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%);
        transform: translateX(0vw);
        color:black;
        border-radius: 5px 5px 5px 5px;
        box-shadow: 5px 5px 15px rgba(100,100,100,0.5);
        transition: 1.2s;
        z-index:1000000;
      }

      .nav_button {
      	background-color:rgba(200,200,200,1);	
      	font-size:25px;
        text-align: left;
        width:60%;
        box-shadow: 1px 1px 5px;
        transition: 1.5s;
      }
      
      .nav_oc {
      	background-color:rgba(240,240,240,1);	
      	font-size:25px;
        text-align: left;
        border-radius:70%;
        width:60%;
        box-shadow: 1px 1px 5px;
        transition: 1.5s;
      }

      .nav_ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .nav_ul {
        display: block;
        padding-top: 3%;
        font-size: 1rem;
        text-align: left;
        text-decoration: none;
        color: black;
      }
      
      .lin {
        text-decoration:none;
        padding-top: 0rem;
        font-size: 1rem;
        text-align: left;
      	color: black;
        transform: translateY(3in);
      	opacity:0.2;
        
      }
     
      .lin1 {
        text-decoration:none;
        padding-top: 0rem;
        font-size: 1rem;
        text-align: left;
      	color: black;
      	opacity:1;
        transform: translateY(3in);
        transition: 1.5s;
      }
      
      .lin1:hover {
        text-decoration:none;
        padding-top: 0rem;
        font-size: 1rem;
        text-align: left;
      	color: black;
      	opacity:1;
      	margin-left:2%;
      	background-color:beige;
      	border-radius:5px;
        transform: translateY(3in);
        transition: 1.5s;
      }
      
      .lin1:hover {
        text-decoration:none;
        padding-top: 0rem;
        font-size: 1rem;
        text-align: left;
      	color: black;
      	opacity:1;
      	margin-left:2%;
      	background-color:beige;
      	border-radius:5px;
        transform: translateY(3in);
        transition: 1.5s;
      }
      
      
      .nav_item{
              padding-top: 1%;
              transform: translateX(10vw);
              transition: 1.5s;
      }
      
      .nav_item_des{
              padding-top: 1%;
              transform: translateX(0vw);
              transition: 1.5s;
      }      
     
      /* botón abrir cerrar*/
      a.target-burger{
            top:-5;
            right:3;
            width: 3.250em;
            height: 3.250em;
            position: absolute;
            display: block;
            .transition(0.5s);
            &:hover{
                cursor: pointer;
                .opacity(0.45);
            }
            &.toggled{
                ul.buns{
                    li.bun{
                        -webkit-transform: rotate(45deg) translateZ(0);
                        transform: rotate(45deg) translateZ(0);
                        &:last-child{
                            -webkit-transform: rotate(-45deg) translateZ(0);
                            transform: rotate(-45deg) translateZ(0);
                        }
                    }
                }
            }
            ul.buns{
                width: 1.625em;
                height: 1.625em;
                list-style: none;
                margin: -1.625em/2 0 0 -1.625em/2;
                padding: 0;
                position: absolute;
                top: 0%;
                left: 0%;
                -webkit-transition: -webkit-transform 1s cubic-bezier(.23,1,.32,1),color 1s cubic-bezier(.23,1,.32,1);
                transition: transform 1s cubic-bezier(.23,1,.32,1),color 1s cubic-bezier(.23,1,.32,1);
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                color: #fff;
                li.bun{
                    width: 100%;
                    height: 2px;
                    background-color: #fff;
                    position: absolute;
                    top: 0%;
                    margin-top: -.75px;
                    -webkit-transform: translateY(-3.75px) translateZ(0);
                    transform: translateY(-3.75px) translateZ(0);
                    -webkit-transition: -webkit-transform 1s cubic-bezier(.23,1,.32,1),background-color 1s cubic-bezier(.23,1,.32,1);
                    transition: transform 1s cubic-bezier(.23,1,.32,1),background-color 1s cubic-bezier(.23,1,.32,1);
                    &:last-child{
                        -webkit-transform: translateY(3.75px) translateZ(0);
                        transform: translateY(3.75px) translateZ(0);
                    }
                }
            }
        }

}

@media only screen and (min-width:1200px) {
 a:link {color: white;  font-family: Open Sans, Sans-serif; text-decoration: none }
 a:hover {color:red ; font-size: 16pt; font-family: arial; text-decoration: none }
 a:visited {color: grey; font-size: 16pt; font-family: arial; text-decoration: none }
 .tituloMenu a:link { color: #fffbd5; font-size: large; font-family: didot; text-decoration: none;margin-left:8%; white-space: nowrap;}
 .tituloMenu a:hover { color: #000000; font-size: large; transition: 0.2s; font-family: didot; text-decoration: none;margin-left:8%;white-space: nowrap; }
 .opcion a:link { color: #fffbd5; font-size: medium; font-family: raleway; text-decoration: none;margin-left:10%; }
 .opcion a:hover { color: #000000; font-size: medium; transition: 0.2s;font-family: raleway; text-decoration: none;margin-left:12%; }
 .sub_opcion a:link { color: #fffbd5; font-size: medium; font-family: Times; text-decoration: none;margin-left:22%; }
 .sub_opcion a:hover { color: #000000; font-size: medium;transition: 0.2s; font-family: Times; text-decoration: none; margin-left: 20%; }
 .but{float:left;padding-left:1%;}
 .sn{float:left;padding-left:1%;}
.but_prin{
	border-radius:15%;
	border-width:2px;
	font-family:raleway;
	border-color:black;
	padding-top: 0.5%;
	padding-bottom: 0.5%;
	background: linear-gradient(180deg, #adccb3, white);
}

#divi1{
  width:90%;
  margin-left:5%;
  margin-top:5%;
  position: absolute;
  overflow:auto;
  height:88%;
  z-index:1;
}

.header_mov{display:none;}
.nav_mov{display:none;}

.sidebar_c{display:none;}
.container{display:none;}
.nav_mov{display:none;}

.menu_logo{
    position:absolute;
    padding-top: 1%;
    width:100%;
    height:10%;
    top:0;
    z-index:101;
    background-color:transparent;
    background-size:100% 100%;
    color:black;    
}

    .hijo{
    	position:absolute;
    	width:100%;
    	top:20%;
    }

.pie{
    position:absolute;
    padding-bottom: 1%;
    float:bottom;
    width:100%;
    height:3%;
    bottom:0;
    z-index:101;
    background-color:transparent;
    background-size:100%;
}

#desp1{
	padding: 2%;
	margin-top:13%;
}

.first{
	padding-top: 1%;
	line-height: 120%;
	font:  oblique 105% cursive;
}

.menuInvisible{
	display:none;}

.menuVisto{
	display:none;
}

.menuVisto li{
    display:none;
}

#botonMenu{
 	display:none;
}

/*-----------------------------------------------------------------------------------*/
/*	MENU
/*-----------------------------------------------------------------------------------*/

#header {
	float:right;
	position:relative;
	margin-right: 10%;
	background-color:transparent;
	padding-top:-1%;
}

#header_mod3{display:none;}ul, ol {
	list-style:none;
	text-decoration: none;
}

#izq{
	width:100%;
	position:relative;
	float:left;
	letter-spacing: 10px;
	margin-top:-1%;
	text-align:center;
}

.nav > li {
	display:inline-block;
  	text-align: left;
}

.nav > li > a{
	text-decoration:none;
	font-size:20pt;
	margin-left:10pt;
	color: #cccccc;
	padding-left:15pt;
	padding-rigth:15pt;
}
.nav li ul {
	display:none;
	position:absolute;
	min-width:300px;
	padding-top:20px;
	padding-bottom:20px;
	border-radius:10px;
	color:black;
    	background-color:rgba(15,25,111,0.8);
	padding-left:2px;
	padding-right:15px;
	box-shadow:5px 5px 25px grey;
}
.nav li:hover > ul {
	display:block;
}
.nav li ul li {
	position:relative;
	padding-top:1.5%;
}
.nav li a:hover {
	color:black;
	border-radius:10px;
	background-color: beige;
}
.header_mod3{
	display:none;
}

}