/*Barra de menu*/
.top-bar{
    background-color: #162a43;
    color: #f7af49;
}
.top-bar a {
    color:#fdf0d0;
   }
.top-bar a:hover {
    color:#a6e5ee;
}
/*fin Barra de menu*/
/*Pequeña linea encima del footer*/
.footer-pad {
    height: 90px;
    background-color:#162a43;
}
/*-----Fin Pequeña linea encima del footer------*/
/*-----footer-------*/
.footer {
    background-color:#053849;
   }
.footer a {
    color:#fdf0d0;
   }
.footer a:hover {
    color:#a6e5ee;
    text-decoration:none
   }
.footer .footer-right {
    float:right;
    color:#fdf0d0;
   }
/*----fin footer------*/
/*-----imagen de fondo arriba-------*/
.section--hero {
    text-align: center;
    background-image: url('/images/pwnd-star.png');
    background-repeat: no-repeat;
    background-size: 100% 1000px;
    background-position: center;
   }
.fondo-404 {
    text-align: center;
    background-image: url('/images/pwnd-star-only.png');
    background-repeat: no-repeat;
    background-size: 100% 450px;
    /*background-position: center;*/
   }
.hero-meta {
    flex:1;
    margin-top:100px;
   }
.hero-features {
    margin-top:100px;
   }
/*-----fin imagen de fondo arriba-----*/
/*-----cuerpo de la pagina------*/
.welcome .section {
    position: relative;
    overflow: hidden;
    background-color: #162a43;
}
.welcome a {
    color:#cc7943;
    text-decoration:none;
   }
.welcome a:hover {
    color:#f7af49;
   }
/*fin cuerpo de la pagina*/
/*-----------agenda-----------*/  
#titulo_agenda:hover{
    cursor: pointer;
} 

#titulo_talleres{
    cursor: pointer;
}

.tabla{
    border-collapse: collapse;
    font-weight: 12px;
    position: relative;
    width: 100%;
}
tbody{
    text-align: center;
}
thead{
    font-weight: bold;
    background: #f7af49;
    text-align: center;
    text-transform: uppercase;
}

td{
    padding-top: 5px;
    padding-bottom: 5px;
}

.tabla, th, td {
    border: 1px solid #162a43;
    border-collapse: collapse;
}

.celda{
    background-color: #162a43;
}
.titulos_tabla{
    color: #162a43;
}

.taller_texto{
    max-width: 400px;
}

.requerimientos{
    color: #cc7943;
}

.requerimientos:hover{
    color: #f7af49;
    cursor: pointer;
}
/*-----------fin agenda-----------*/
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
.sticky + .content {
    padding-top: 60px;
  }
/* Test */
   /* Style the navbar */
#navbar {
    overflow: hidden;
    background-color: #333;
  }
  
  /* Navbar links */
  #navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px;
    text-decoration: none;
  }
  
  /* Page content */
  .content {
    padding: 16px;
  }
  
  /* The sticky class is added to the navbar with JS when it reaches its scroll position */
  .sticky {
    position: fixed;
    top: 0;
    width: 100%;
  }
  
  /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
  .sticky + .content {
    padding-top: 60px;
  } 

/*astronauta flotante*/
.astronaut {
    left: calc(50% - 520px);
}
.astronaut {
    position: absolute;
    top: -60px;
    left: calc(50% - 380px);
    animation: hero-octonaut 2s alternate ease-in-out infinite;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    padding-left: 50%;
}
.casco-flotante {
    position: absolute;
    top: 10%;
    left: calc(50% - 380px);
    animation: casco 1s alternate ease-in-out infinite, flotar 20s infinite;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    left: -15%;
    width: 13%;
}
/*saturno flotante*/
.saturn {
    left: calc(50% - 520px);
}
.saturn {
    position: absolute;
    top: 26%;
    left: calc(50% - 380px);
    animation: hero-octonaut 1s alternate ease-in-out infinite;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    left: 7%;
    width: 12%;
}
.saturn-inverted {
    left: calc(50% - 520px);
}
.saturn-inverted {
    position: absolute;
    top: 76%;
    left: calc(50% - 380px);
    animation: hero-octonaut 1s alternate ease-in-out infinite;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    margin-left: 50%;
    width: 12%;
}
/*Animaciones*/
@keyframes casco {
    0% {
     transform:translateY(-20px);
    }
    100% {
     transform:translateY(20px);
    }
   }
@keyframes flotar {
    100% {
     left: 100%;
    }  
}
@keyframes hero-octonaut {
    0% {
     transform:translateY(-8px);
    }
    100% {
     transform:translateY(8px);
    }
   }
@keyframes rotar3d {
    100% {
     transform:rotate3d(16,25,20,40deg);
}
}
@keyframes rotarx {
    100% {
     transform:rotatex(1turn);
}
}
@keyframes rotary {
    100% {
     transform:rotatey(1turn);
}
}
@keyframes rotarz {
    100% {
     transform:rotatez(1turn);
}
}
.tbodycontact {
    text-align: left;
}
/*--------------Redes sociales de mantente en contacto---------------*/
.social_networks > a > i{
    font-size:25px;
}

.social_networks{
    display: flex;
    justify-content: space-around;
}
/*--------------Patrocinadores---------------*/
.sponsors_link > a{
    padding-right: 5%;
}
.sponsors_link > a:hover{
    filter: contrast(5)
    
}
/*--------Section de sponsors y contacto--------*/
.section--contact {
    margin-bottom: -40px;
    border-top: 1px solid #1a191a;
    background-color: #2c2a2b;
    background-repeat: no-repeat;
    background-image: url(/images/rocket.png);
    background-position: calc(60% + 35%) 50%;
    background-size: 20%;
    background-color: #456fa4;
}

/*------------------------------responsive-----------------------------*/

@media(min-width:1000px) and (max-width:1100px) {
    .section--hero {
    text-align: center;
    background-image: url('/images/pwnd-star.png');
    background-repeat: no-repeat;
    background-size: 100% 850px;
    background-position: center;
   }
    .hero-meta {
        flex:1;
        margin-top:0px;
    }
    .hero-features {
        margin-top:-45px;
    }
    .astronaut{
            width: 80%;
            top:50%;
            left: 25%;
    }
    .saturn-inverted{
        top: 82%;
        margin-left: 65%;
        width: 12%;
    }
}
@media(min-width:901px) and (max-width:999px) {
    .section--hero {
    text-align: center;
    background-image: url('/images/pwnd-star.png');
    background-repeat: no-repeat;
    background-size: 100% 850px;
    background-position: center;
   }
    .hero-meta {
        flex:1;
        margin-top:0px;
    }
    .hero-features {
        margin-top:-45px;
    }
    .astronaut{
            width: 80%;
            top:55%;
            left: 25%;
    }
    .saturn-inverted{
        top: 85%;
        
        margin-left: 70%;
        width: 12%;
    }
}
@media(min-width:1101px) and (max-height:1000px) {
    .section--hero .wrapper {
     padding-top:100px
    }
    .hero-header {
     display:flex;
     flex-wrap:wrap
    }
    .hero-download {
     margin-top:0;
     margin-left:50px;
     flex-direction:column
    }
    .hero-download li {
     padding:1em
    }
    .hero-download li:first-child {
     padding:2em 1em
    }
    .hero-download li+li {
     border-left:none;
     border-top:1px solid #4e4b4d
    }
    .hero-meta {
     flex:1;
     margin-top:50px
    }
    .hero-features {
     margin-top:100px
    }
    .hero-octonaut {
     left:calc(50% - 520px)
    }
   }
   @media(max-width:1100px) {
    .welcome .wrapper {
     width:auto;
     max-width:660px
    }
    .welcome .section--hero {
     background-position:center -220px
    }
    .welcome .hero-features {
     margin-top:200px
    }
    .welcome .hero-tagline {
     font-size:2.4em
    }
    .welcome .hero-download {
     flex-direction:column
    }
    .welcome .hero-download li {
     padding:1em
    }
    .welcome .hero-download li:first-child {
     padding:2em 1em
    }
    .welcome .hero-download li+li {
     border-left:none;
     border-top:1px solid #4e4b4d
    }
    .welcome .section .wrapper {
     padding:100px 50px
    }
    .welcome .section.section--hero .wrapper {
     padding-left:0;
     padding-right:0
    }
    .welcome .columns {
     width:auto
    }
    .welcome .column.column {
     width:auto
    }
    .welcome .columns .column:first-child {
     padding-right:0
    }
    .welcome .columns .column:last-child {
     margin-top:100px;
     padding-left:0
    }
    .welcome .column>h3 {
     margin-bottom:50px
    }
    .welcome .columns+h3 {
     margin-top:100px
    }
    .welcome .welcome-bgs {
     margin:50px 0
    }
    .welcome .welcome-bg--screenshot {
     position:relative;
     left:auto;
     right:auto;
     bottom:auto;
     margin:0;
     max-width:100%;
     height:auto
    }
    .welcome .welcome-cta {
     margin:50px 0 0
    }
    .welcome .section--features .features-item {
     margin-top:50px
    }
    .welcome .section--features .column+.column {
     margin-top:0
    }
    .welcome .section--realtime {
     background-position:calc(50% - 845px) calc(100% + -130px)
    }
    .welcome .section--github {
     background-position:calc(50% + 450px) 0
    }
    .welcome .section--contact {
     background-position:calc(50% + 150px) bottom
    }
   }
   @media(max-width:660px) {
    .welcome .hero-octonaut {
     display:none
    }
    .section--contact {
     background-image:none
    }
   }
   .welcome-beta .wrapper--beta,
   .welcome-beta .welcome--nightly,
   .welcome-nightly .wrapper--beta,
   .welcome-nightly .welcome--nightly {
    max-width:500px
   }
   .welcome-beta .section--hero,
   .welcome-nightly .section--hero {
    background-image:none
   }
   .welcome-beta .section--hero .wrapper,
   .welcome-nightly .section--hero .wrapper {
    padding-bottom:0
   }
   .welcome-beta h3,
   .welcome-nightly h3 {
    margin:0 0 1em
   }
   .welcome-beta .features-item.features-item.features-item,
   .welcome-nightly .features-item.features-item.features-item {
    margin-top:50px
   }
   .welcome-beta .section--features .features-item .mega-octicon,
   .welcome-nightly .section--features .features-item .mega-octicon {
    top:0
   }
   .welcome-beta .section--features,
   .welcome-nightly .section--features {
    margin-bottom:-40px
   }
   .welcome-beta .hero-logo {
    filter:brightness(.75) contrast(1) sepia(.7) hue-rotate(-5deg) saturate(3.5)
   }
   .welcome-beta .hero-logo-circle:nth-child(4) {
    animation-name:hero-logo-circle--reverse
   }
   .welcome-nightly .hero-logo {
    filter:brightness(.8) contrast(.6) sepia(.9) hue-rotate(215deg) saturate(6)
   }
   .welcome-nightly .hero-logo-circle:nth-child(4) {
    animation-name:hero-logo-circle--reverse
   }
   .welcome-nightly .hero-logo-circle:nth-child(8) {
    animation-name:hero-logo-circle--reverse
   }
   .welcome-nightly .hero-logo-circle:nth-child(10) {
    animation-name:hero-logo-circle--reverse
   }
   .welcome-nightly .welcome-button {
    background-color:#c67aff
   }
   .welcome-nightly .welcome-button:hover {
    background-color:#c170ff
   }
   .welcome-nightly .version {
    letter-spacing:.08em
   }
   @keyframes hero-logo-circle--reverse {
    100% {
     transform:rotate(-1turn)
    }
   }
   .is-responsive {
    min-width:auto
   }
   @media(max-width:900px) {
    .is-responsive .top-bar {
     height:auto;
     padding:15px 10px
    }
    .is-responsive .top-bar>.wrapper {
     width:100%;
     text-align:center;
     padding-left:5px;
     padding-right:5px
    }
    .is-responsive .top-bar .navigation {
     vertical-align:middle
    }
    .is-responsive .top-bar-right {
     float:none;
     margin:0 5px;
     display:inline-block;
     vertical-align:middle
    }
    .is-responsive .footer {
     height:auto;
     padding:20px 10px
    }
    .is-responsive .footer>.wrapper {
     width:100%;
     text-align:center
    }
    .is-responsive .footer-left,
    .is-responsive .footer-right {
     float:none
    }
    .is-responsive .footer-right {
     margin-top:15px
    }
   }
   @media(min-width:1101px) {
    .welcome .section--features .wrapper {
     max-width:560px
    }
    .welcome .features-item+.features-item {
     margin-top:50px
    }
    @supports(display:grid) {
     .welcome .section--features .wrapper {
      max-width:none
     }
     .welcome .features {
      display:grid;
      grid-template-columns:1fr 1fr;
      grid-gap:100px 66.6666666667px
     }
     .welcome .features-item.features-item {
      margin-top:0
     }
    }
   }
/*--------------fondo mobile----------*/
@media(max-width: 900px){
    .section--hero{
        content: url('/images/pwnd-star-mobile.png');
        width: 100%;
        /*height: 170px;*/
        background-position: center;
    }
    .footer-right{
        text-align: center;
    }
    .fondo-404{
        background-image:url(/images/pwned_mobile.png);
        width:100%;
        background-position: center;
      }
    .casco-flotante {
        position: absolute;
        top: 20%;
        left: calc(50% - 50px);
        animation: hero-octonaut 2s alternate ease-in-out infinite ;
        will-change: transform;
        -webkit-user-select: none;
        user-select: none;  
        width: 30%;
    }
    .saturn-inverted{
        top: 85%;
        
        margin-left: 75%;
        width: 12%;
      }
}
@media(min-width: 700px) and (max-width: 850px){
    .saturn-inverted{
        top: 85%;
        
        margin-left: 80%;
        width: 12%;
      }
}
@media(min-width: 300px) and (max-width: 350px){
    .saturn-inverted{
        top: 90%;
        
        margin-left: 140%;
        width: 12%;
      }
}
@media(min-width: 350px) and (max-width: 450px){
    .saturn-inverted{
        top: 90%;
        
        margin-left: 120%;
        width: 12%;
      }
}
@media(min-width: 451px) and (max-width: 600px){
    .saturn-inverted{
        top: 90%;
        
        margin-left: 100%;
        width: 12%;
      }
}
@media(min-width: 0px) and (max-width: 299px){
    .saturn-inverted{
        top: 95%;
        
        margin-left: 160%;
        width: 12%;
      }
}