/* ========================== Normalizaciones ========================== */

/* Prevents iOS text size adjust after orientation change, without disabling user zoom. */
html {
    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
}

/* Addresses `font-family` inconsistency between `textarea` and other form elements. */
html, button, input, select, textarea {
    font-family: sans-serif;
    font-family: 'Nunito', sans-serif;
}
html, body {
    overflow-x: hidden;
    width: 100%;
}
body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
}

/* Font Smoothing */
html, html a {
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    -webkit-font-smoothing: antialiased;
}

/* Addresses `outline` inconsistency between Chrome and other browsers. */
a:focus {
    outline: thin dotted;
    text-decoration: none;
}

/* Improves readability when focused and also mouse hovered in all browsers. */
a:active, a:hover {
    outline: 0;
    text-decoration: none;
}

/* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */
abbr[title] {
    border-bottom: 1px dotted
}

/* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */
b, strong {
    font-weight: bold
}
blockquote {
    margin: 0px
}

/* Addresses styling not present in Safari 5 and Chrome. */
dfn {
    font-style: italic
}

/* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */
code, kbd, pre, samp {
    font-size: 1em;
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
}

/* Improves readability of pre-formatted text in all browsers. */
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Prevents `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup {
    position: relative;
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
}
sup {
    top: -0.5em
}
sub {
    bottom: -0.25em
}

/* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls.
   2. Corrects inability to style clickable `input` types in iOS.
   3. Improves usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], /* 1 */
input[type="reset"], input[type="submit"] {
    cursor: pointer; /* 3 */
    -webkit-appearance: button; /* 2 */
}

/* Re-set default cursor for disabled elements. */
button[disabled], input[disabled] {
    cursor: default
}

/* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
   2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome (include `-moz` to future-proof). */
input[type="search"] {
    /* 2 */
    box-sizing: content-box;
    -webkit-appearance: textfield; /* 1 */
    nowhitespace: afterproperty;
}

/* Removes inner padding and search cancel button in Safari 5 and Chrome on OS X. */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

/* Improves readability and alignment in all browsers. */
textarea {
    vertical-align: top;
}

/* ========================== Global Styles ========================== */
.group:after {
    content: "";
    display: table;
    clear: both;
}

.nopadding {
    margin: 0 !important;
    padding: 0 !important;
}

p {
    font-size: 14px;
    line-height: 25px;
}

a {
    color: #034AA6;
    text-decoration: none;
}

a:hover {
    color: #011140;
}

a {
    -webkit-transition-timing-function: ease-in-out;
    transition-timing-function: ease-in-out;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    -webkit-transition-property: color, border-color, background-color;
    transition-property: color, border-color, background-color;
}

.texture-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url(../img/grid.png);
    pointer-events: none;
}

/* ============================= Inicio ============================================ */

.inicio {
    position: relative;
    padding: 30px 0px 60px 0px;
    min-height: 800px;
    background: rgb(3, 49, 140) url('../img/inicio2-2.jpg') no-repeat center center;
    background-size: cover;
    color: #fff;
    width: 100%;
    height: 100%;
}

.inicio h1 {
    margin-top: 310px;
    margin-bottom: 10px;
    font-weight: 300;
    font-size: 45px;
    color:#fff;
}

.inicio h2 {
    margin-top: 0px;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 100;
    color:#fff;
}
}
.inicio-content{
    margin:0;
}

.inicio-content a{
    color:#fff;
}

/* ==================== Navigation ======================================== */

.nav-menu {
    list-style: none;
}
  
.nav-menu li {
    padding: 15px;
    font-size: 18px;
    display: inline-block;
}

.nav-menu li a {
    color: #fff;
    font-weight: normal;
}

.nav-menu li a:hover {
    color: #011140;
    font-weight: normal;
    border-bottom: 1px solid #011140;
}

.logo {
    height: 60px;
}
.nav-wrapper{
    margin:0;
}

.anchor, .anchor-a, .anchor-d {
    position: absolute;
    transform: translateY(-20vh);
}

.anchor-m {
    position: absolute;
    transform: translateY(-10vh);
}


/* =================== Novedades ===================================== */
.novedades-wrap {
    position: relative;
    padding: 20px 0;
    background-color: #fff;
    background-size: cover;
    scroll-padding-top: -100px;
}

.novedades-text {
    padding: 5%;
}

.novedades-text h2 {
    font-weight: 600;
}

.novedades-text p {
    font-size: 16px;
}

/* ================== Custom Slider Controls (Flickity) ========================= */
.flickity-page-dots .dot {
    width: 13px;
    height: 13px;
    opacity: 1;
    background: transparent;
    border: 2px solid white;
    -webkit-transition: background 0.3s;
    transition: background 0.3s;
}
.flickity-page-dots .dot.is-selected {
    background: white;
}

/* =================== Asignatura ===================================== */

.asignatura-bg {
    position: relative;
    min-height: 450px;
    background: url('../img/redes-2.jpg') no-repeat center center;
    background-size: cover;
}
.asignatura-img {
    width: 100%;
    height: 450px;
    text-align: center;
    line-height: 400px;
}
.asignatura-slider {
    position: relative;
    padding: 11% 100px 10% 100px;
    height: 450px;
    background-color: #03318C;
}
.asignatura-slider ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.asignatura-slider ul li {
    width: 100%;
}
.asignatura-slider li h1 {
    color: #fff;
    font-weight: 400;
    font-size: 22px;
}
.asignatura-slider li p {
    color: #fff;
    font-size: 14px;
}

.asignatura-intro-img {
    position: relative
}
.slides ul {
    color: #BFC7D9;
    list-style:disc;
    margin-left: 30px;
}
.slides li h1 {
    margin: 0;
    padding: 0;
}
.slides a {
    color: #1144de;
    font-weight: 500;
    font-size: 16px;
}
.slides a:hover {
    color: #011140;
    font-weight: 500;
}
.asignatura-slider .flickity-page-dots {
    text-align: left;
    margin-top: 50px;
    position: static;
}
.asignatura-slider .flickity-page-dots .dot {
    margin: 0 12px 0 0;
}

/* =================== Docentes ===================================== */

.docentes {
    padding: 85px 10px;
    margin:0px;
}
.docentes-content{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding:0;
}
.docentes-1{
    width: 100%;
    display:grid;
    grid-template-columns: 110px 1fr;
}
.docentes-1 h1 {
    margin: 0 0 5px 0;
    padding: 0;
    color: #021859;
    font-size: 20px;
}
.docentes-1 p {
    margin-bottom: 15px;
    color: #BFC7D9;
}
.docente-icon {
    margin-right: 20px;
    width: 90px;
    height: 90px;
    border: solid 2px #0433bf;
    border-radius: 50%;
    vertical-align: top;
    text-align: center;
    font-size: 25px;
    line-height: 90px;
}
.docente-icon i {
    color: #0433bf;
}

/* =================== Material ===================================== */

.libro-quote blockquote {
    margin-bottom: 30px;
    padding: 0;
    border: none;
}
.libro-quote blockquote p {
    display: inline-block;
    margin: 0;
    padding: 0;
    width: 70%;
    vertical-align: top;
    font-style: italic;
    text-align: left;
}
.libro-quote blockquote .libro-quote-avatar {
    display: inline-block;
    margin-right: 20px;
    width: 100px;
    height: 120px;
    vertical-align: middle;
}
.libro-quote blockquote .libro {
    height: 120px;
}
.class-quote-avatar {
    display: inline-block;
    margin-right: 20px;
    text-align: center;
    vertical-align: middle;
    width: 100px;
}
.class-quote-avatar a {
    font-weight: bold;
    color: #be0d2b;
    font-size: 16px;
    border: 3px solid #be0d2b;
    border-radius: 3px;
    padding: 4px 10px;
}

.class-quote-avatar a:hover {
    color: #BFC7D9;
    border: 3px solid #BFC7D9;
}
.class-quote-avatar .a-img, .class-quote-avatar .a-img:hover {
    border: 0px;
    background-color: none;
}

.logo-class {
    height: 75px;
    margin-bottom: 15px;
}

.material {
    background: url('../img/app4-2.jpg') no-repeat center center fixed;
    background-size: cover;
}
.material-wrap {
    position: relative;
    padding: 70px 0;
    height: 575px;
}
.material h1 {
    margin: 0 0 20px 0;
    color: #fff;
    font-weight: 400;
    font-size: 24px;
}
.material p {
    margin-bottom: 25px;
    color: #fff;
}
.robot {
    position: absolute;
    top: -80px;
    left: 10%;
    height: 690px;
    width: 460px;
    background: url('../img/Robot.png') no-repeat center center;
}
.robot-content {
    position: absolute;
    top: 115px;
    left: 56px;
    width: 247px;
    height: 445px;
    background: rgba(0, 0, 0, 0.3);
}
.robot-content img {
    width: 247px;
    height: 445px;
}

/* =================== Buttons ===================================== */

.start-btn, .start-btn:visited, .start-btn:active {
    display: inline-block;
    padding: 18px 46px;
    border: 2px solid #fff;
    border-radius: 3px;
    color: #fff;
    font-size: 16px;
    border-color:#fff;
}
.start-btn:hover {
    border-color: #c7cacc;
    color: #c7cacc;
}

.mail-btn {
    display: inline-block;
    color: #323a45;
    text-transform: uppercase;
    font-weight: 400;
}
.mail-btn i {
    margin-left: 5px
}

/* =================== Footer ===================================== */

footer {
    padding: 80px 0;
}
footer .footer-wrap{
    display: grid;
    grid-template-columns: 300px 1fr;
}
footer p {
    color: #c7cacc;
    font-size: 12px;
}
footer ul {
    margin-top: 30px;
    text-align: right;
}
footer li {
    display:inline;
    list-style: none;
    text-transform: uppercase;
    font-weight: 400;
    padding: 0px 20px;
}
footer li a {
    color: #0433bf
}

footer .logo-unsl {
    height: 40px;
}

.footer-nav li a {
    color: #000;
}

.footer-nav li a:hover {
    color: #0433bf;
    border-bottom: 1px solid #0433bf;
}
footer .footer-logos{
    width: 100%;
}
footer .footer-navs{
    width: 100%;
}
footer .footer-nav{
    padding: 0;
}
/* ====================== Waypoints =================================== */
.wp1, .wp2, .wp3 {
    visibility: hidden
}
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight, .bounceInDown {
    visibility: visible
}
.delay-05s {
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
}
.delay-1s {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

/* ====================== Navigation icono =================================== */
.nav-btn {
    display:none;
    height: 20px;
    width: 35px;
    position: absolute;
    cursor: pointer;
    top: 40px;
    right: 30px;
    font-size: 32px;
    z-index: 999999;
    cursor: pointer;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
  }
  
  .nav-btn span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background: #fff;
    border-radius: 3px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }

  /*ubica las 3 rayitas del icono de las 3 barras*/
  .nav-btn span:nth-child(1) {top: 6px;}
  .nav-btn span:nth-child(2) {top: 18px;}
  .nav-btn span:nth-child(3) {top: 30px;}
  
  .nav-btn.open span:nth-child(1) {
    top: 18px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
  }
 .nav-btn.open span:nth-child(2) {
    opacity: 0;
    left: -40px;
  }
  .nav-btn.open span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
  }

.go-top-container{
    position: fixed;
    bottom: 40px;
    right: 40px;
    width:6.6rem;
    height:6.6 rem;
    z-index: -1;
}

.go-top-buttom{
    width: 0;
    height: 0;
    background: #034AA6;
    border-radius: 50%;
    cursor: pointer;
    transition: .2s;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.go-top-buttom i{
    position: absolute;
    font-size: 1.7rem;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: #fff;
    transition: .2s;
}
.show {
    z-index:10;
}
.show .go-top-buttom{
    animation: popup .3s ease-in-out;
    width: 6.6rem;
    height: 6.6rem;
    z-index: 11;
}
.show i {
    transform: translate(-50%, -50%) scale(1);
}

@keyframes popup {
    0%{
        width: 0rem;
        height: 0rem;
    }
    50%{
        width: 8rem;
        height: 8rem;
    }
    100%{
        width: 6.6rem;
        height: 6.6rem;
    }
}