@import 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i';
@import 'https://fonts.googleapis.com/css?family=Bungee+Shade';

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    min-height: 100vh;
}


a {
    text-decoration: none;
}

header {
    background: -webkit-linear-gradient(left, rgba(80,244,231,1) 0%, rgba(73,255,164,1) 100%);
    
    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 90%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    
    height: 111vh;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    padding-bottom: 2em;
        
}

nav {
    background: #475DC1;
    padding-bottom: .7em;
    -webkit-clip-path: polygon(0 0%, 100% 0, 100% 65%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
    min-height: 10%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;

    
}

#cont_nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-flex: 1;
    
    -ms-flex: 1;
    
    flex: 1;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    
    margin: 1em;
    max-width: 960px;
}

#navegador {
    display: none;
}


#barras img {
    width: 1.6em;
    height: auto;
}

#barras {
    width: 20%;
    text-align: center;
}


#opciones {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
    background-color: #475DC1;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 200%;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    z-index: 10;
    
    list-style: none;
}

#opciones:target {
    left: 0;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}


#opciones li {
     text-align: center;
     padding: .2em .4em .2em .4em;
     width: 100%;
      }



#logo {
     -webkit-box-flex: 5;
     -ms-flex: 5;
     flex: 5;
     text-align: left;  
    -webkit-box-align: center;  
    -ms-flex-align: center;  
    -ms-grid-row-align: center;  
    align-items: center;
    margin-top: .2em;
    
}

#cerrar_menu img {
    width: 3em;
    height: auto;
}

#cerrar_menu {
    
}

#opciones li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: white;
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 2em;
}

#opciones li:hover {
    background-color: coral;
    width: 100%;
    -webkit-animation-name: nav_over;
    -webkit-animation-duration: 2s;
    }

@-webkit-keyframes nav_over {
    from {color: white;
    }
    to {color: aqua;
   }
}

#cerrar_menu a{
    text-align: right;
    width: auto;
}

#cerrar_menu {
    -webkit-box-flex: 0;
    -ms-flex: 0;
    flex: 0;
    width: auto;
    }

#cerrar_menu:hover {
    background-color: none;
}


#nombrefoto {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;

    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
    width: 98%;
    max-width: 960px;
}

#foto {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    margin: 0% 0em 0em 0em;
    padding: 0 1em 0 1em;

}

#foto img {
    display: block;
    max-width: 100%;
    margin: auto;
    border-radius: 50em;
    border: solid 0.3em;
    border-color: white;
}

#name {width: 98%;}


h1 {
    color:white;
    font-family: 'Bungee Shade', cursive;
    text-align: center;
    font-size: 10vw;
    line-height: 1.2;
    padding: 0.4em 0.6em;
    width: 100%;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin: 0;
    }


/* Esto es para el indicador de scroll down*/

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 1vh;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

@-webkit-keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}

/* De acá en más es todo del header para abajo*/


main {
    max-width: 960px;
    margin: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    
    width: 100%;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
}


h2 {
    font-family: 'Roboto', sans-serif;
    background: -webkit-linear-gradient(left, rgba(80,244,231,1) 0%, rgba(73,255,164,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
}

.principal {
    max-width: 960px;
    margin: auto;
    border-bottom: 0.1em solid;
    border-color: darkgray;
    padding: 1em;
    width: 100%;
   
    
}


section ul {
    list-style: none;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: #222;
    line-height: 1.625;
    
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    
    margin: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    
    text-align: center;
    
    line-height: 1.3em;
    font-family: 'Raleway', sans-serif;
    }

section ul li{
margin: .4em;
    }



/* Esto es para la organización en pestañas de las materias aprobadas
y los links de contacto*/

   .pestanas {margin: 0 auto; max-width: 960px;}
   .content {background: #fff; color: #373737;}
   .content > div {display: none; padding: 20px 25px 5px;}
 
   input {display: none;}


#orejas {display: -webkit-box;display: -ms-flexbox;display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    
    
}
   label {
       display: -webkit-inline-box;
       display: -ms-inline-flexbox;
       display: inline-flex; 
 
       font-weight: 600; 
       
       text-align: center;
       font-family: 'Roboto', sans-serif;

 background: -webkit-linear-gradient(left, rgba(80,244,231,1) 0%, rgba(73,255,164,1) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center; 
       color: #fff;
       font-family: 'Roboto', sans-serif;
}
   label:hover {cursor: pointer; 

 background: lightgray;
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center; 
       color: #fff;
}
   input:checked + label {
       background: -webkit-linear-gradient(left, rgba(80,244,231,1) 0%, rgba(73,255,164,1) 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       text-align: center; 
       color: #fff;
       border-bottom: 4px solid coral;
       font-family: 'Roboto', sans-serif;        
}
 
   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   #tab3:checked ~ .content #content3,
   #tab4:checked ~ .content #content4 {
     display: block;
       min-height: 30em;
   }
 

#contacto {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    
    margin-top: 3em;
    
    
    
}

#contacto li {
    background: #475DC1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    
    border-radius: 2em;
    box-shadow: 7px 7px 15px -5px rgba(0,0,0,0.15);
    }

#contacto li a{
    display: inline-block;
    color: white;
    padding: 1em;
    }

#contacto li:hover {
    background: coral;
}   

#noborde {
    border-bottom: 0.0em solid;
}

footer {
    
    -webkit-clip-path: polygon(0 10%, 100% 0%, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    
    background: #475DC1;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-flow: column wrap;
    flex-flow: column wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}


footer p {
    max-width: 960px;
    width: 100%;
    color: white;
    
}

footer img {
    width: 100%;
    height: auto;
    max-width: 10em;
}

#uba {
    width: 30vw;
    margin: 2em;
    text-align: center;
}


footer p a{
    color: white;
}

footer p a:hover {
    color: coral;
}

.marquee {
    width: 80vw;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    -webkit-animation: marquee 50s linear infinite;
    animation: marquee 50s linear infinite;
}

.marquee:hover {
    -webkit-animation-play-state: paused;
    animation-play-state: paused
}

/* Make it move */
@-webkit-keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}
@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

/* Make it pretty */
.datos {
    padding-left: 1.5em;
    position: relative;
    font-family: 'Raleway', sans-serif;
}

/* ::before was :before before ::before was ::before - kthx */
.datos:before, .datos::before {
    z-index: 2;
    content: '';
    position: absolute;
    top: -1em; left: -1em;

}

.datos:after, .datos::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 2em; height: 2em;

}

#disclamer {
    font-family: 'Raleway', sans-serif;
    color: darkgray;
    padding: 2em 1em;
}


@media screen and (min-width:35em) {
    
   label {
       padding: .5em;
       font-size: 1.4em;
 }    
    
}

@media screen and (min-width:46em) {
    h1 {font-size: 9vw;}
    #barras {display: none;}
    
    #cont_nav {
        -webkit-box-align: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
        align-items: center;
    }
    
    #dgpc {-webkit-box-flex: 3;-ms-flex: 3;flex: 3;}
    
    #navegador {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        list-style: none;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        font-family: 'Raleway', sans-serif;
    }
    
    #navegador li {
   
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align: center;
        
    }
    
    
    
    #navegador li a{
        color: white;
        text-align: center;
        padding: 1em .5em;
        width: 100%;
        }
    #navegador li a:hover {
    background-color: coral;
    width: 100%;
    -webkit-animation-name: nav_over;
    -webkit-animation-duration: 2s;
    }

@-webkit-keyframes nav_over {
    from {background-color: aqua;
    }
    to {background-color: coral;
   }
}
        
}

@media screen and (min-width:65em) {
    h1 {font-size: 5.8em;
    display: block;}    
    
    #nombrefoto {
        margin: 2em 0;
    }
}