/* Diseño distintas pantallas */

@media only screen and (min-width:768px){
  h1 + p, h2 + p, p, h1, h2{
    text-align: center;
    margin-left:0%;
    margin-right:5%;
  }

  .features dl{
    flex-direction:row;
  }
  .features .feature{
    flex-basis:50%;
  }
  .features section{
    flex-direction:row;
    margin-bottom:100px;
  }
  .features figure{
    margin-left:30px; 
  }
  .features section.imgleft figure{
    order:-1;
    margin-left:0;
    margin-right:50px;
  }
 .video{
    order:-1;
    margin-left:0;
    margin-right:50px;
  }
  .features section .content{
    flex-basis:47%;
  }
  .features section figure{
    flex-basis:53%;
  }

  .highlighted{
    background:#172755;
    color:white;
    margin-bottom:80px;
    position:relative;
  }
  .highlighted .container{
    display:flex;
    align-items:center;
  }
  .highlighted .content,.highlighted .figures{
    flex-basis:50%;
  }
  .highlighted .content{
    margin-right:10%;
    margin-left:5%;
  }
  .highlighted:after{
    content:"";
    display:block;
    position:absolute;
    bottom:-54px;
    z-index:-1;
    left:-20px;
    right:-20px;
    height:200px;
    background:#172755;
    border-bottom:10px solid #D11067;
  }
  .highlighted:after{
    transform: rotate(-5deg);
  }
  .highlighted .figures{
    position:relative;
    max-width:650px;
    right:-5%;
  }

  figure.absolute{
    display:block;
    position:absolute;
    width:50%;
    left:-200px;
    top:20%;
  }

  fieldset ul{
    margin-left:0;
  }
  fieldset li{
    display:flex;
    justify-content:space-between;
  }
  fieldset li label{
    flex-basis: 32%;
  }
  fieldset li input,fieldset li select{
    flex-basis: 65%;
  }
  form{
    padding:50px;
  }
}

@media only screen and (min-width:1025px){
  footer .container{
    flex-direction:row;
  }
}

@media only screen and (min-width:1380px){
  .highlighted .figures{
    position:absolute;
    right:-20px;
  }
  .highlighted{
    padding:100px 0 0 0;
  }
}

/*
 Larger screen styling
 Horizontal menu
*/

@media screen and (max-width: 799px) {
  header nav ul{
    display: none;
  }
  header nav #drop:checked ~ ul{
      display:block;
      clear:both;
      margin:0 -5%;
      position:relative;
      top:20px;
  }
  header nav li a{
    display:block;
    padding:1em;
    border-bottom:1px solid white;
  }
  header nav li:last-child a{
    border-bottom:0;
  }
  header nav li a.active,header nav li a:hover,header nav li a:focus{
    background:#D11067;
  }
  header #hamburguesa{
    user-select:none;
    cursor:pointer;
    float:right;
  }
  header #hamburguesa:after{
    font-size:3em;
    content:"\2630";
    line-height:1.3em;
  }
  header nav #drop:checked  ~ #hamburguesa:after{
    content:"\2715";
  }
}

@media screen and (min-width: 800px) {
  /* oculta el menú hamburguesa */
  input#drop, label#hamburguesa{
    display:none;
    cursor:pointer;
    color:#172755;
  }  
  header nav ul{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  header .sign-in{
    margin-left:20px;
  }
  header ul a{
    display:inline-block;
    padding:1em 0 0.5em 0;
    border-bottom:5px solid #172755;
  }
  header ul a.button{
    padding-top:0.75em;
    padding-bottom:0.75em;
  }
  header ul a.active,header ul a:active{
    border-color:#D11067;
  }
  header ul a:hover,header ul a:focus{
    border-color:white;
  }
  header .button{
    border-radius:30px;
    display:inline-block;
    padding:1em 3em;
    color:#D11067;
    text-decoration:none;
    background:#172755;
    font-size:1em;
  }
  header .button{
    background:#172755;
    border:0 !important;
  }
  header .button:hover{
    background:#D11067;
    color:#172755;
  }
}