/*! HTML5 Boilerplate v5.1.0 | MIT License | https://html5boilerplate.com/ */

    /*
     * What follows is the result of much research on cross-browser styling.
     * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
     * Kroc Camen, and the H5BP dev community and team.
     */

    /* ==========================================================================
       Base styles: opinionated defaults
       ========================================================================== */

    html {
        color: #222;
        font-size: 1em;
        line-height: 1.4;
    }

    /*
     * Remove text-shadow in selection highlight:
     * https://twitter.com/miketaylr/status/12228805301
     *
     * These selection rule sets have to be separate.
     * Customize the background color to match your design.
     */

    ::-moz-selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    ::selection {
        background: #b3d4fc;
        text-shadow: none;
    }

    /*
     * A better looking default horizontal rule
     */

    hr {
        display: block;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc;
        margin: 1em 0;
        padding: 0;
    }

    /*
     * Remove the gap between audio, canvas, iframes,
     * images, videos and the bottom of their containers:
     * https://github.com/h5bp/html5-boilerplate/issues/440
     */

    audio,
    canvas,
    iframe,
    img,
    svg,
    video {
        vertical-align: middle;
    }

    /*
     * Remove default fieldset styles.
     */

    fieldset {
        border: 0;
        margin: 0;
        padding: 0;
    }

    /*
     * Allow only vertical resizing of textareas.
     */

    textarea {
        resize: vertical;
    }

    /* ==========================================================================
       Browser Upgrade Prompt
       ========================================================================== */

    .browserupgrade {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;
    }

    /* ==========================================================================
       Author's custom styles
       ========================================================================== */

    /*
     * Agregar en este bloque todos nuestros estilos,
     * debidamente identado y ordenado el código
     * como buenas prácticas.
     */

    a{
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
      text-decoration: none!important;
    }
   
    a:hover{
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    @font-face {
        font-family: 'futura_md_btmedium';
        src: url('../fonts/16020_futuram-webfont.woff2') format('woff2'),
             url('../fonts/16020_futuram-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'futura_extrabold_oblique';
        src: url('../fonts/futura_extra_bold_oblique-webfont.woff2') format('woff2'),
             url('../fonts/futura_extra_bold_oblique-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'futura_oblique';
        src: url('../fonts/futura_oblique-webfont.woff2') format('woff2'),
             url('../fonts/futura_oblique-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'lobster_twobold';
        src: url('../fonts/lobstertwo-bold-webfont.woff2') format('woff2'),
             url('../fonts/lobstertwo-bold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'lobster_twobold_italic';
        src: url('../fonts/lobstertwo-bolditalic-webfont.woff2') format('woff2'),
             url('../fonts/lobstertwo-bolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'lobster_twoitalic';
        src: url('../fonts/lobstertwo-italic-webfont.woff2') format('woff2'),
             url('../fonts/lobstertwo-italic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'lobster_tworegular';
        src: url('../fonts/lobstertwo-regular-webfont.woff2') format('woff2'),
             url('../fonts/lobstertwo-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }


    @font-face {
        font-family: 'open_sansbold';
        src: url('../fonts/opensans-bold-webfont.woff2') format('woff2'),
             url('../fonts/opensans-bold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sansbold_italic';
        src: url('../fonts/opensans-bolditalic-webfont.woff2') format('woff2'),
             url('../fonts/opensans-bolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sansextrabold';
        src: url('../fonts/opensans-extrabold-webfont.woff2') format('woff2'),
             url('../fonts/opensans-extrabold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sansextrabold_italic';
        src: url('../fonts/opensans-extrabolditalic-webfont.woff2') format('woff2'),
             url('../fonts/opensans-extrabolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sanslight';
        src: url('../fonts/opensans-light-webfont.woff2') format('woff2'),
             url('../fonts/opensans-light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sanslight_italic';
        src: url('../fonts/opensans-lightitalic-webfont.woff2') format('woff2'),
             url('../fonts/opensans-lightitalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sansregular';
        src: url('../fonts/opensans-regular-webfont.woff2') format('woff2'),
             url('../fonts/opensans-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'open_sanssemibold_italic';
        src: url('../fonts/opensans-semibolditalic-webfont.woff2') format('woff2'),
             url('../fonts/opensans-semibolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }
   


    @font-face {
        font-family: 'robotoblack';
        src: url('../fonts/roboto-black-webfont.woff2') format('woff2'),
             url('../fonts/roboto-black-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotoblack_italic';
        src: url('../fonts/roboto-blackitalic-webfont.woff2') format('woff2'),
             url('../fonts/roboto-blackitalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotobold';
        src: url('../fonts/roboto-bold-webfont.woff2') format('woff2'),
             url('../fonts/roboto-bold-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotobold_italic';
        src: url('../fonts/roboto-bolditalic-webfont.woff2') format('woff2'),
             url('../fonts/roboto-bolditalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotoitalic';
        src: url('../fonts/roboto-italic-webfont.woff2') format('woff2'),
             url('../fonts/roboto-italic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotolight';
        src: url('../fonts/roboto-light-webfont.woff2') format('woff2'),
             url('../fonts/roboto-light-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotomedium';
        src: url('../fonts/roboto-medium-webfont.woff2') format('woff2'),
             url('../fonts/roboto-medium-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotomedium_italic';
        src: url('../fonts/roboto-mediumitalic-webfont.woff2') format('woff2'),
             url('../fonts/roboto-mediumitalic-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }




    @font-face {
        font-family: 'robotoregular';
        src: url('../fonts/roboto-regular-webfont.woff2') format('woff2'),
             url('../fonts/roboto-regular-webfont.woff') format('woff');
        font-weight: normal;
        font-style: normal;

    }

    html,
    body{
      overflow-x: hidden;
    }

    .header{
      background: url(../images/bg-inicio.png)no-repeat;
      min-height: 755px;
      background-size: contain;
      padding: 2rem;
      width: 100%;
      background-size: 100%;    
    }

    .header a,
    .navbar-light .navbar-nav .nav-link{
      color: #aad0f2;
      text-transform: uppercase;
      font-size: 15px;
      padding-right: 1rem!important;
      font-family: 'robotomedium';
    }

    .header a:hover{
      color: #fff;
    }

    nav{
      width: 100%;
      margin-left: 10%;
    }

    .header h2{
      text-align: center;
      font-family: 'robotobold';
      font-size: 48px;
      margin-top: 8%;
      margin-bottom: 3%;
    }

    .header h3{
      text-align: center;
      text-transform: uppercase;
      font-family: 'open_sansregular';
      font-size: 18px;
      color: #fff;
    }

    .header a.button{
      text-align: center;
      color: #fff;
      background: #165f97;
      border-radius: 15px;
      display: block;
      width: 20%;
      margin-left: 40%;   
      padding: 10px;
      font-family: 'futura_md_btmedium';
      text-transform: initial;
      margin-top: 2rem;
      border: 2px solid transparent;
    }

    .header a.button:hover{
      background: transparent;
      border: 2px solid #fff;
    }

    .navbar-light .navbar-nav .nav-link:focus, 
    .navbar-light .navbar-nav .nav-link:hover{
      color: #fff;
    }

    .quienes-somos h1{
      font-family: 'lobster_twobold';
      font-size: 36px;
      color: #165f97;
      text-align: center;
    }

    .quienes-somos h1 span{
      font-family: 'robotobold';
      font-size: 30px;
      color: #165f97;
      text-align: center;
    }

    .quienes-somos p{
      border-radius: 80px;
      font-family: 'robotoregular';
      color: #000000;
      opacity: .5;
      border: 1px solid #b1c3e0;
      padding: 4% 8%;
      margin: 5% 0;
      text-align: center;
      position: relative;
      font-size: 16px;
    }

    .quienes-somos p::before{
      content: "";
      display: block;
      background: url(../images/i.svg)no-repeat;
      width: 87px;
      height: 84px;
      position: absolute;
      top: -32%;
      left: 45%;
    }

    .servicios img{
      margin: 0 auto;
      display: block;
    }

    .servicios{
      margin: 1rem 0;
    }

    .servicios h4{
      font-family: 'robotobold';
      color: #000;
      margin: 1rem 0;
      text-align: center;
      font-size: 16px;
    }

    .servicios p{
      font-family: 'robotoregular';
      color: #000;
      margin: 1rem 0;
      font-size: 14px;
      text-align: center;
    }

    .servicios .si{
      width: 100%;
    }

    .servicios .no{
      display: none;
    }

    .servicios .cuadro-blanco:hover .no{
      display: block!important;
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .servicios .cuadro-blanco:hover .si{
      display: none!important;
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .servicios .cuadro-blanco{
      width: 100%;
      float: left;
      cursor: pointer;
      padding: 4rem 2rem;
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .servicios .cuadro-blanco:hover::after{
      content: "";
      display: block;
      width: 92.5%;
      height: 7px;
      position: absolute;
      bottom: 0;
      left: 4%;
      background: rgba(91,112,180,1);
      background: -moz-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
      background: -webkit-gradient(left top, right top, color-stop(0%, rgba(91,112,180,1)), color-stop(44%, rgba(106,153,206,1)), color-stop(100%, rgba(119,189,229,1)));
      background: -webkit-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
      background: -o-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
      background: -ms-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
      background: linear-gradient(to right, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b70b4', endColorstr='#77bde5', GradientType=1 );
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .servicios .cuadro-blanco:hover{
      -webkit-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      -moz-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .cursos{
      margin: 8rem 0 0;
    }

    .cursos h1{
      font-family: 'lobster_twobold';
      font-size: 36px;
      color: #165f97;
      text-align: center;
    }

    .cursos h1::after{
      content: "";
      display: block;
      border-bottom: 5px solid #165f97;
      width: 10%;
      margin-left: 45%;
      margin-top: 25px;
    }

    .cursos h1 span{
      font-family: 'robotobold';
      font-size: 30px;
      color: #165f97;
      text-align: center;
    }

    .bg-blanco{
      width: 321px;
      height: auto;
      position: relative;

    }



    .bg-blanco::after{
      position: absolute;
      content: "";
      display: block;
      top: 0;
      height: 208px;
      background: url('../images/bg-cursos.png')no-repeat;
      width: 100%;
      z-index: -1;
    }

    .bg-blanco .padding-item{
      padding: 4rem 2rem 3rem;
    }

    .bg-blanco h4{
      font-size: 16px;
      font-family: 'robotolight';
      text-transform: lowercase;
      color: #fff;
      margin-top: -1rem;
    }

    .bg-blanco h3{
      font-family: 'robotomedium';
      font-size: 22px;
      text-transform: uppercase;
      color: #fff;
    }

    .bg-blanco p{
      margin-top: 7rem;
      margin-bottom: 2rem;
      font-family: 'robotoregular';
      font-size: 14px;
    }

    .rotateslider-item.now{
      -webkit-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      -moz-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
    }

    .rotateslider-item.prev .bg-blanco .padding-item,
    .rotateslider-item.next .bg-blanco .padding-item{
      margin-bottom: 1rem;
      border-radius: 10px;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(135,135,135,1);
      -moz-box-shadow: 0px 0px 10px 0px rgba(135,135,135,1);
      box-shadow: 0px 0px 10px 0px rgba(135,135,135,1);
    }

    a.afuerzas{
      display: none;
    }

    .bg-blanco a,
    a.afuerzas{
      text-align: center;
      color: #fff;
      background: #165f97;
      border-radius: 15px;
      display: block;
      width: 60%;
      margin-left: 20%;
      padding: 10px;
      font-family: 'futura_md_btmedium';
      text-transform: initial;
      margin-top: 2rem;
      border: 2px solid transparent;
      font-size: 15px;
    }

    .bg-blanco a:hover,
    a.afuerzas:hover{
      background: transparent;
      color: #165f97;
      border: 2px solid #165f97;
    }

    .cursos .linea-gris{
      width: 100%;
      height: 1px;
      background: #b1c3e0;
    }

    .encuesta{
      background: #eaf1f2;
      padding: 4rem 0;
    }

    .encuesta h1.mar{
      margin-top: 2rem;
    }

    .encuesta h1{
      font-family: 'robotomedium';
      font-size: 30px;
      color: #165f97;
      line-height: 26px;
    }

    .encuesta h1 span{
      font-family: 'lobster_twobold';
      font-size: 36px;
    }

    .encuesta .border-azul{
      width: 10%;
      height: 6px;
      background: #165f97;
      margin: 1.5rem 0;
    }

    .encuesta p span{
      font-family: 'robotoregular';
      font-size: 18px;
      color: #000!important;
    }

    .encuesta p {
      font-family: 'robotoregular';
      font-size: 14px;
      color: #828282;
    }

    .encuesta a{
      width: 100%;
      height: 100%;
      display: block;   
      position: relative;
    }

    .encuesta .btn{
      text-align: center;
      color: #165f97;
      background: #fff;
      border-radius: 15px;
      display: block;
      width: 33%;
      margin-left: 33%;
      padding: 10px;
      font-family: 'futura_md_btmedium';
      text-transform: initial;
      top: 45%;
      position: absolute;
      border: 2px solid transparent;
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .encuesta .btn:hover{
      color: #fff;
      background: transparent;
      border: 2px solid #fff;
      -webkit-transition: all 500ms ease-out;
      -moz-transition: all 500ms ease-out;
      -ms-transition: all 500ms ease-out;
      -o-transition: all 500ms ease-out;
      transition: all 500ms ease-out;
    }

    .clientes{
      margin: 6rem 0 2rem;
    }

    .clientes-slide{
      margin: 10rem 0 5rem;
    }

    .clientes-slide img {
        width: 70%;
        margin: 0 auto;
        display: block;
    }

    .newsletter{
      background: url('../images/bg-newsletter.png')no-repeat;
      width: 100%;
      height: 563px;
      padding: 14rem 0;
      text-align: center;
    }

    .newsletter .form-control {
      padding: 10px;
      font-size: 13px;
    }

    .newsletter h3{
      font-family: 'robotomedium';
      color: #fff;
    }

    .newsletter h3 span{
      font-family: 'lobster_twobold';
    }

    .newsletter p{
      font-family: 'robotoregular';
      font-size: 16px;
      color: rgba(255, 255, 255, .7);
      margin: 2rem 0;
    }

    .newsletter input.form-control{
      width: 90%;
      float: left;
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
      padding: 12px 2rem;
    }

    .newsletter .btn{
      width: 10%;
      padding: .2rem .75rem;
      font-size: 25px;
      background: #165f97;
      float: right;
      border-bottom-left-radius: 0;
      border-top-left-radius: 0;
    }


    .newsletter input::placeholder {
      color: #b3b3b3;
    }

    .newsletter input:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #b3b3b3;
    }

    .newsletter input::-ms-input-placeholder { /* Microsoft Edge */
      color: #b3b3b3;
    }


    footer{
      background: #171c2f;
      color: #fff;
      padding: 3rem 0 1rem;
    }

    footer h4{
      font-family: 'robotomedium';
      margin-bottom: 2rem;
      margin-top: 1rem;
    }

    footer p{
      font-family: 'robotoregular';
      font-size: 14px;
      margin: 0;
      color: rgba(255, 255, 255, .7);   
    }

    footer p.footer{
      font-size: 12px;
    }

    footer a{
      font-family: 'robotoregular';
      font-size: 14px;
      color: rgba(255, 255, 255, .7);
      margin-bottom: 1rem;
      display:  block;    
    }

    footer a:hover{
      color:#fff;  
    }

    footer a span{
      color:#05978a;
    }

    footer .linea-azul{
      width: 100%;
      height: 1px;
      background: #5d616e;
      margin: 1rem 0;
    }

    .contact img{
      margin: 0 auto;
      display: block;
    }


    /*------------------------ 
      Encuesta
    --------------------------*/

    iframe{
      padding: 2rem;
      background: #fff;
    }

  /*-------------------------------------*/

  .bg-lblibro{
    background: #fff url('../images/bg-lb.png')no-repeat;
    width: 100%;
    float: left;
    text-align: center;
    color: #fff;
    padding: 3rem 2rem;
    background-size: 100%;
    border-radius: 10px;
  }

  .bg-lblibro h3{
    font-family: 'robotolight';
    font-size: 16px;
  }

  .bg-lblibro h2{
    font-family: 'robotobold';
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 20px;
    margin: 1rem 0;
  }

  .bg-lblibro h2 span{
    font-family: 'lobster_twobold';
    font-size: 24px;
    letter-spacing: 0;
  }

  .bg-lblibro h4{
    font-family: 'robotolight';
    font-size: 15px;
    background-size: cover;
    color: rgba(255, 255, 255, .7) ;
  }

  .bg-lblibro form{
    margin: 7rem 0 4rem;
  }

  .bg-lblibro input{
    width: 90%;
    float: left;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    padding: 11px 2rem;
    font-size: 13px;
  }

  .bg-lblibro .btn{
    width: 10%;
    padding: .2rem .75rem;
    font-size: 25px;
    background: #165f97;
    float: right;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }

  .bg-lblibro input::placeholder {
    color: #b1b1b1;
    opacity: 1; /* Firefox */
  }

  .bg-lblibro input:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #b1b1b1;
  }

  .bg-lblibro input::-ms-input-placeholder { /* Microsoft Edge */
      color: #b1b1b1;
  }

  .bg-lblibro a{
    text-transform: uppercase;
    color: rgba(0,0,0,.5)!important;
    border-bottom: 1px solid;
    margin:3rem 0 0;
    display: block;
    width: 25%;
    margin-left: 37.5%;

  }


  /*-----------------------------------------*/

  .bg-lblibro2{
    background: #fff url('../images/bg-lb2.png')no-repeat;
    width: 100%;
    float: left;
    text-align: center;
    color: #fff;
    padding: 2rem 3rem;
    background-size: 100%;
    border-radius: 10px;
  }


  .bg-lblibro2 h2{
    font-family: 'robotobold';
    font-size: 18px;
    letter-spacing: 2px;
    margin: 1rem 0;
  }

  .bg-lblibro2 h2 span{
    font-family: 'lobster_twobold';
    font-size: 24px;
    letter-spacing: 0;
  }



  .bg-lblibro2 form{
    margin: 5rem 0 0;
  }

  .bg-lblibro2 input{
    width: 100%;
    border: 1px solid #b1b1b1;
    border-radius: 5px;
    padding: 10px 20px;    
    margin: 7px 0;
    font-size: 13px;
  }

  .bg-lblibro2 .btn{
    width: 100%;
    background: #165f97;
    color: #fff;
    float: right;
    border-radius: 15px;
    font-size: 16px;
    padding: 10px 0;
    text-align: center;
    margin-top: 20px;
    font-family: 'futura_md_btmedium';
    text-transform: uppercase;
  }

  .bg-lblibro2 input::placeholder {
    color: #b1b1b1;
    opacity: 1; /* Firefox */
  }

  .bg-lblibro2 input:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color: #b1b1b1;
  }

  .bg-lblibro2 input::-ms-input-placeholder { /* Microsoft Edge */
      color: #b1b1b1;
  }

  .bg-lblibro2 a{
    text-transform: uppercase;
    color: rgba(0,0,0,.5)!important;
    border-bottom: 1px solid;
    margin: 2rem 0 0;
    display: block;
    width: 25%;
    margin-left: 37.5%;

  }


  input:focus::-webkit-input-placeholder {
      color:#78cac2;
      -webkit-transition: all 1000ms ease;
      -moz-transition: all 1000ms ease;
      -ms-transition: all 1000ms ease;
      -o-transition: all 1000ms ease;
      transition: all 1000ms ease;
  }

  input:focus:-moz-placeholder {
      color: #78cac2;
      -webkit-transition: all 1000ms ease;
      -moz-transition: all 1000ms ease;
      -ms-transition: all 1000ms ease;
      -o-transition: all 1000ms ease;
      transition: all 1000ms ease;
  }

  input:focus::-moz-placeholder {
      color: #78cac2;
      -webkit-transition: all 1000ms ease;
      -moz-transition: all 1000ms ease;
      -ms-transition: all 1000ms ease;
      -o-transition: all 1000ms ease;
      transition: all 1000ms ease;
  }

  input:focus:-ms-input-placeholder {
      color: #78cac2;
      -webkit-transition: all 1000ms ease;
      -moz-transition: all 1000ms ease;
      -ms-transition: all 1000ms ease;
      -o-transition: all 1000ms ease;
      transition: all 1000ms ease;
  }

  .testimonios .carousel-item .contenedor{
    background: #b1c3e0;
    border-radius: 10px;
    padding: 5rem 1rem 3rem;
    text-align: center;
    margin-top: 66px;
    min-height: 256px;
  }

  .testimonios .carousel-item p{
    font-size: 16px;
    font-family: 'robotoregular';
    color: #3a414c;
    margin-top: 1rem;
  }

  .testimonios .carousel-item h6{
    font-size: 14px;
    font-family: 'robotobold';
    color: #3a414c;
  }

  .testimonios .carousel-item .recorte{
    position: absolute;
    top: -104%;
    left: 40%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid transparent;
  }

  .clientes .carousel-item{
    min-height: 100px;
  }




  .carousel-indicators li{
    width: 12px;
    height: 12px;
    border: 1px solid #b1c3e0;
    overflow: hidden;
    border-radius: 50%;
  }

  .carousel-indicators .active {
      background-color: #b1c3e0;
  }

  .carousel-indicators {
      bottom: -20%;
  }

  .navbar-toggler:not(:disabled):not(.disabled), 
  a {
      outline: none;
  }

  ul.redsoc{
    padding: 0;
    list-style: none;
    display: inline-flex;
    margin-top: 1rem;
  }

  ul.redsoc li{
    margin: 10px;
  }

  a.red-social{
    width: 40px!important;
    height: 40px!important;
    border: 1px solid #515563;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    padding: 8px;
    margin-bottom: 0;
    margin-right: 10px;
    background: #00baa7;
    color: #fff;
  }


  a.red-social:hover{
    color: #515563;
    background: transparent;
  }


  .sin-padding{
    padding: 0;
  }

  .clientes-slide .carousel-item{
    min-height: 100px;
  }

  a.derecha {
    width: 40px!important;
    height: 40px!important;
    border: 1px solid #fff;
    text-align: center;
    border-radius: 50%;
    overflow: hidden;
    padding: 8px!important;
    margin-bottom: 0;
    margin-right: 10px;
    background: transparent;
    color: #fff;
    display: block;
  }

  a.derecha:hover {
    background: #fff;
    color: #aad0f2;
  }


  .imagen-para{
    width: 80%;
    margin: 0 auto;
  }

  /*------------------------------------*/
  @media(min-width: 1899px){
    .header{
      min-height: 1068px;
    }

    .header h2{
      margin-top: 25%;
    }

    .clientes-slide{
      margin: 10rem 0 0;
    }

    .newsletter{
      padding: 16rem 0;
    }
  }

  @media(min-width: 1366px ) and (max-width: 1366px){
    .bg-lblibro {
      padding: 3rem 3rem;
    }
  }

  @media (min-width: 1200px) and (max-width: 1365px ){
    .rotateslider-container .arrow.right{
      right: -5%;
    }
    .rotateslider-container .arrow.left{
      left: -5%;
    }
  }

  @media(min-width: 768px) and (max-width: 1024px){

    .header h2 {
      font-size: 25px;
      margin-top: 2rem;
    }

    .header h3 {
      font-size: 12px;
    }

    .header a.button {
      width: 30%;
      margin-left: 35%;
    }

    .header a, 
    .navbar-light .navbar-nav .nav-link {
       font-size: 13px;
    }

    .header {
      min-height: 456px;
    }

    .quienes-somos h1 {
      line-height: 17px;
      font-size: 26px;
    }

    .quienes-somos h1 span{
      font-size: 20px;
    }

    .servicios .cuadro-blanco:hover::after {
      width: 88%;
      left: 6%;
    }

    .quienes-somos p::before {
      width: 40%;
      height: 50%;
      top: -28%;
      left: 44%;
    }

    .quienes-somos p {
      margin: 10% 0 5%;
      font-size: 12px;
    }

    .cursos {
      margin: 0rem 0 0;
    }

    .bg-lblibro2 {
      padding: 1rem 0rem;
    }

    .bg-lblibro2 .btn {
      margin-top: 15px;
    }

    .servicios p {
      font-size: 11px;
    }

    .servicios h4 {
      font-size: 14px;
    }

    .servicios .cuadro-blanco {
      padding: 2rem 0rem;
    }

    .servicios img {
      width: 30%;
    }


    .testimonios .carousel-item .recorte {
      top: -100%;
      left: 40%;
    }

    .clientes-slide {
        margin: 10rem 0 0;
    }

    .nomostrar{
      display: none;    
    }

    .bg-lblibro input {
        width: 88%;
    }

    .bg-lblibro .btn {
      width: 12%;
    }

    .encuesta a {
      margin-top: 2rem;
    }

    .cursos h1 {
      font-size: 26px;
    }

    .cursos h1 span {
      font-size: 20px;
    }

    .encuesta h1{
      font-size: 20px;
    }

    .encuesta h1 span {
        font-size: 26px;
    }

    .encuesta {
      padding: 2rem 0;
    }

    .encuesta .btn{
      top:26%;
    }

    .encuesta p {
      font-size: 12px;
    }

    .encuesta p span {
      font-size: 14px;
    }

    .testimonios .carousel-item p{
      font-size: 14px;
    }
    
    .clientes-slide img {
      width: 100%;
    }

    .newsletter {
      background: url(../images/bg-newsletter-ipad.png)no-repeat;
      height: 350px;
      background-size: 100%;
      padding: 7rem 0;
    }

    .newsletter h3 span {
      font-size: 26px;
    }

    .newsletter h3 {
      font-size: 20px;
      margin: 0;
    }

    .newsletter p {
      font-size: 14px;
      margin: 2rem 0;
    }

    .clientes{
      margin: 6rem 0 0;
    }

    .newsletter input.form-control {
        width: 88%;
    }

    .newsletter .btn {
      width: 12%;
    }

    footer h4 {
        font-family: 'robotomedium';
        margin-bottom: 1rem;
        margin-top: 0;
    }

    footer a {
      font-size: 12px;
    }




  }


  @media(min-width: 1200px)and (max-width: 1919px) {
  /*  .header {
        background: url(../images/fon.png)no-repeat;
        min-height: 797px;
        background-size: contain;
        padding: 2rem;
        width: 100%;
        background-size: 100%;
    }*/
  }

    @media(max-width: 544px) {

      .header-movil{
        padding: 1rem 0;
      }

      .clientes .carousel-item {
        min-height: 100px;
      }

      .testimonios .carousel-item .contenedor {
        padding: 5rem 0 2rem;
      }

      .clientes-slide{
        margin: 5rem 0 0;
        width: 100%;
        float: left;
      }

     .clientes-slide .carousel-item {
        min-height: 150px;
     }

      .clientes-slide .carousel-item img{
        width: 50%;
        margin: 0 auto;
        display: block;
      }

      .testimonios .carousel-item .contenedor{
        min-height: 300px;
      }

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(22,95,151, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
      }

      .navbar-toggler{
        border:none;
      }

      .navbar-toggler{
        font-size: 25px;
      }

      .header a, 
      .navbar-light .navbar-nav .nav-link {
          text-align: center;
      }

      .bg-header{
        background: url('../images/bg-hmovil.png')no-repeat;
        width: 100%;
        float: left;
        background-size: 100%;
        padding: 5rem 0 10rem;
      }

      .bg-header h3{
        font-family: 'robotobold';
        text-align: center;
        font-size: 30px;
      }

      .bg-header p{
        font-family: 'open_sansregular';
        text-align: center;
        font-size: 14px;
        text-transform: uppercase;
        color: #fff;
      }

      .bg-header a{
        font-family: 'futura_md_btmedium';
        text-align: center;
        font-size: 16px;
        color: #fff;
        background: #165f97;
        padding: .5rem 0;
        width: 100%;
        display: block;
        border-radius: 15px;
        margin: 1rem 0;
      }
      
      .newsletter{
        background: url('../images/bg-suscribete-movil.png')no-repeat;
        background-size: cover;
      }

      .quienes-somos{
        margin: 0;
        width: 100%;
        float: left;
      }

      .servicios,
      .cursos,
      .encuesta,
      .newsletter{
        width: 100%;
        float: left;
        margin: 2rem 0 0;
      }

      footer{
        width: 100%;
        float: left;
        margin: 0;
      }

      .quienes-somos h1 {
        font-size: 22px;
        margin: 0;
        line-height: 20px;
      }

      .quienes-somos h1 span {
        font-size: 18px;
      }

      .quienes-somos p {
        padding: 18% 8% 10%;
        font-size: 14px;
        margin: 20% 0 0;
      }

      .quienes-somos p::before {
          top: -16%;
          left: 35%;
      }

      .encuesta h1 {
          font-size: 18px;
          text-align: center;
          line-height: 15px;
      }

      .encuesta h1 span{
        font-size: 22px;
      }

      .encuesta .border-azul {
        margin-left: 45%;
        width: 10%;
        height: 4px;
        background: #165f97;
        margin-top: .8rem;
        margin-bottom: 1rem;    
      }

      .encuesta p span {
        font-size: 14px;
      }

      .encuesta p {
        text-align: center;
        margin: 0;
        font-size: 12px;
      }

      .encuesta a {
        margin: 2rem 0;
      }

      .encuesta .btn {
        top: 30%;
      }

      .wufoo input.text, 
      .wufoo textarea.textarea {
        width: 78%;
      }

      .servicios h4 {
        font-size: 15px;
        margin: 1rem 1rem 1rem 2rem;
        text-align: left;
      }

      .servicios p {
        font-size: 12px;
        margin: 0;
        padding: 0 0 0 2rem;
        text-align: left;
      }

      .servicios img {
        margin: 1rem auto;
      }

      .cursos h1 {
        font-size: 22px;
        line-height: 20px;
      }

      .cursos h1 {
        font-size: 22px;
        line-height: 20px;
      }

      .cursos h1 span{
        font-size: 18px;
      }

      .cursos h1::after {
        content: "";
        display: block;
        border-bottom: 4px solid #165f97;
        width: 20%;
        margin-left: 40%;
        margin-top: 10px;

      }

      .bg-blanco {
        margin: 0 auto;
        display: block;
      }


      .cursos .carousel-control-prev-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
      }

      .cursos .carousel-control-next-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%230000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
      } 

      .cursos .bg-blanco{
        -webkit-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        -moz-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        border-radius: 10px;  
        margin: 2rem auto;
        display: block;
      }

      .cursos .carousel-indicators {
          bottom: -23px;
      }

      .cursos .carousel-indicators li{
        background: #fff;
      }

      .cursos .carousel-indicators li.active{
        background: #b1c3e0;
      }

      iframe {
        margin: 2rem 0;
      }

      .testimonios .carousel-item .recorte {
        top: -134px;
        left: 27%;
      }

      .testimonios .carousel-item p {
        margin-top: 1rem;
        font-size: 13px;
      }

      .testimonios .carousel-indicators {
        bottom: -45px;
      }

      .newsletter {
        padding: 5rem 0;
        height: 296px;
        background-size: 100%;
      }

      footer p{
        font-size: 12px;
        margin: 1rem 0 0;
      }

      .oculto{
        display: none;
      }

      footer a {
        font-size: 12px;
      }

      footer a {
        margin-left: 0;
      }

      a.red-social {
        margin-left: -12px;
      }

      footer .linea-azul {
        margin: 1rem 0;
      }

      .newsletter h3 {
          font-size: 17px;
      }

      .newsletter h3 span {
          font-size: 22px;
      }

      .newsletter p {
        margin:1rem 0;
        font-size: 13px;
      }

      .newsletter .btn {
          width: 16%;
      }

      .newsletter input.form-control {
          width: 84%;
      }

      .bg-lblibro{
        background: #fff url(../images/bg-lbmovil.png)no-repeat;
        background-size:100%; 
      }

      .bg-lblibro form {
        margin: 9rem 0 4rem;
      }

      .bg-lblibro input {
        width: 82%;
      }

      .bg-lblibro .btn {
        width: 18%;
      }

      .bg-lblibro a {
          width: 40%;
          margin-left: 30%;
      }

      #cboxContent {
          border-radius: 16px!important;
      }

      .navbar {
        padding: 0;
        margin: 0;
      }

      .bg-blanco .padding-item {
          min-height: 470px;
      }



      .servicios .cuadro-blanco{
        padding: 1rem;
        position: relative;
        margin: 1rem 0;
        -webkit-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        -moz-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        -webkit-transition: all 500ms ease-out;
        -moz-transition: all 500ms ease-out;
        -ms-transition: all 500ms ease-out;
        -o-transition: all 500ms ease-out;
        transition: all 500ms ease-out;
      }

      .servicios .cuadro-blanco::after{
        content: "";
        display: block;
        width: 100%;
        height: 7px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: rgba(91,112,180,1);
        background: -moz-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
        background: -webkit-gradient(left top, right top, color-stop(0%, rgba(91,112,180,1)), color-stop(44%, rgba(106,153,206,1)), color-stop(100%, rgba(119,189,229,1)));
        background: -webkit-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
        background: -o-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
        background: -ms-linear-gradient(left, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
        background: linear-gradient(to right, rgba(91,112,180,1) 0%, rgba(106,153,206,1) 44%, rgba(119,189,229,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b70b4', endColorstr='#77bde5', GradientType=1 );
        -webkit-transition: all 500ms ease-out;
        -moz-transition: all 500ms ease-out;
        -ms-transition: all 500ms ease-out;
        -o-transition: all 500ms ease-out;
        transition: all 500ms ease-out;
      }

      .servicios .cuadro-blanco{
        padding: 1rem 0 2rem;
      }

      .bg-blanco p {
        min-height: 105px;
      }

      .bg-lblibro2 {
          padding: 2rem 0;
      }

      .bg-lblibro2 {
        background: #fff url(../images/bg-lbmovil2.png)no-repeat;
        background-size: 100%;
      }

      .bg-lblibro2 h2{
        margin:0;
      }

      .encuesta {
        padding: 1rem 0;
      }

      .clientes {
          width: 100%;
          float: left;
          margin: 5rem 0 0;
      }

      a.afuerzas{
        position: absolute;
        z-index: 9;
        bottom: 75px;
      }

      .relative-movil{
        position: relative;
        width: 100%;
        float: left;
      }




  }

    @media(max-width: 360px) {

      .cursos h1 {
        font-size: 21px;
        line-height: 20px;
      }

      .cursos h1 span{
        font-size: 12px;
      }

      .header-movil{
        padding: 1rem 0;
      }

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(22,95,151, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
      }

      .navbar-toggler{
        border:none;
      }

      .navbar-toggler{
        font-size: 25px;
      }

      .header a, 
      .navbar-light .navbar-nav .nav-link {
          text-align: center;
      }

      .bg-header{
        background: url('../images/bg-hmovil.png')no-repeat;
        width: 100%;
        float: left;
        background-size: 100%;
        padding: 2rem 0 4rem;
      }

      .cursos h1 span {
        font-size: 13px;
      }

      .bg-blanco {
        margin: 0 auto;
        display: block;
      }

      .cursos .bg-blanco{
        -webkit-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        -moz-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
        border-radius: 10px;  
        margin: 2rem 4px;
      }

      .cursos .carousel-indicators {
          bottom: -23px;
      }

      .cursos .carousel-indicators li{
        background: #fff;
      }

      .cursos .carousel-indicators li.active{
        background: #b1c3e0;
      }

      iframe {
        margin: 2rem 0;
      }

      .testimonios .carousel-item .recorte {
        top: -134px;
        left: 20%;
      }

      .testimonios .carousel-item p {
        margin-top: 1rem;
      }

      .testimonios .carousel-indicators {
        bottom: -45px;
      }

      .newsletter {
          padding: 10rem 0;
          height: 410px;
      }

      footer p{
        font-size: 12px;
        margin: 1rem 0 0;
      }

      .oculto{
        display: none;
      }

      footer a {
        font-size: 12px;
      }

      footer a {
        margin-left: -1rem;
      }

      footer .ajustered img{
        width: 75%;
      }

      footer .linea-azul {
        margin: 1rem 0;
      }

      .newsletter .btn {
          width: 15%;
      }

      .newsletter input.form-control {
          width: 85%;
      }


  }


 @media (max-device-width: 320px) {
    .bg-lblibro h3 {
        font-size: 14px;
    }

    .bg-header{
      padding: 4rem 0 6rem;
    }

    .bg-header h3{
      font-size: 24px;
    }

    .bg-lblibro h2 {
      font-size: 15px;
    }

    .bg-lblibro h2 span {
        font-size: 20px;
    }

    .nomostrar{
      display: none;
    }

    .bg-lblibro {
      padding: 3rem 0rem;
    }

    .testimonios .carousel-item .contenedor {
        min-height: 352px;
    }

    .newsletter {
        padding: 3rem 0;
        height: 249px;
    }

    .newsletter h3 {
        font-size: 15px;
    }

    .newsletter h3 span {
        font-size: 19px;
    }

    .newsletter .btn {
        width: 20%;
    }

    .newsletter input.form-control {
        width: 80%;
    }

    .bg-blanco h3 {
      font-size: 18px;
    }

    .bg-blanco::after {
        top: 0;
        height: 180px;
        width: 100%;
        z-index: -1;
        background-size: contain;
    }

    .bg-lblibro {
        background-size: contain;
    }

    .bg-blanco{
      width: 100%;
      float: left;
      position: relative;
      background: #fff;
      -webkit-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      -moz-box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);
      box-shadow: 0px 0px 21px 0px rgba(117,182,225,1);

    }

    #cursosslide .carousel-inner .carousel-item{
      padding: 1rem;
    }

    .bg-blanco::after {
      position: absolute;
      content: "";
      display: block;
      top: 0;
      height: 208px;
      background: url(../images/bg-cursos.png)no-repeat;
      width: 100%;
      z-index: 1;
      background-size: 100%;
    }

    .bg-blanco h4,
    .bg-blanco h3{
      position: relative;
      z-index: 2;
    }

    .bg-blanco p {
      margin-top: 5rem;
      font-size: 12px;
    }

    .bg-blanco .padding-item {
        min-height: 400px;
    }

    .clientes {
      margin: 2rem 0 0;
    }
  
  }

    /* ==========================================================================
       Helper classes
       ========================================================================== */

    /*
     * Hide visually and from screen readers:
     */

    .hidden {
        display: none !important;
    }

    /*
     * Hide only visually, but have it available for screen readers:
     * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
     */

    .visuallyhidden {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    /*
     * Extends the .visuallyhidden class to allow the element
     * to be focusable when navigated to via the keyboard:
     * https://www.drupal.org/node/897638
     */

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

    /*
     * Hide visually and from screen readers, but maintain layout
     */

    .invisible {
        visibility: hidden;
    }

    /*
     * Clearfix: contain floats
     *
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    `contenteditable` attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that receive the `clearfix` class.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */

    .clearfix:before,
    .clearfix:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }

    .clearfix:after {
        clear: both;
    }

    /* ==========================================================================
       EXAMPLE Media Queries for Responsive Design.
       These examples override the primary ('mobile first') styles.
       Modify as content requires.
       ========================================================================== */

    @media only screen and (min-width: 35em) {
        /* Style adjustments for viewports that meet the condition */
    }

    @media print,
           (-webkit-min-device-pixel-ratio: 1.25),
           (min-resolution: 120dpi) {
        /* Style adjustments for high resolution devices */
    }

    /* ==========================================================================
       Print styles.
       Inlined to avoid the additional HTTP request:
       http://www.phpied.com/delay-loading-your-print-css/
       ========================================================================== */

    @media print {
        *,
        *:before,
        *:after {
            background: transparent !important;
            color: #000 !important; /* Black prints faster:
                                       http://www.sanbeiji.com/archives/953 */
            box-shadow: none !important;
            text-shadow: none !important;
        }

        a,
        a:visited {
            text-decoration: underline;
        }

        a[href]:after {
            content: " (" attr(href) ")";
        }

        abbr[title]:after {
            content: " (" attr(title) ")";
        }

        /*
         * Don't show links that are fragment identifiers,
         * or use the `javascript:` pseudo protocol
         */

        a[href^="#"]:after,
        a[href^="javascript:"]:after {
            content: "";
        }

        pre,
        blockquote {
            border: 1px solid #999;
            page-break-inside: avoid;
        }

        /*
         * Printing Tables:
         * http://css-discuss.incutio.com/wiki/Printing_Tables
         */

        thead {
            display: table-header-group;
        }

        tr,
        img {
            page-break-inside: avoid;
        }

        img {
            max-width: 100% !important;
        }
  
        p,
        h2,
        h3 {
            orphans: 3;
            widows: 3;
        }

        h2,
        h3 {
            page-break-after: avoid;
        }
    }