/*  
Client: HELLOW FESTIVAL
Client URL: http://hellowfestival.com
Description: Festival Internacional para la Música & las Artes.
Version: 2.0
Autor: H/AC
Autor URL: http://hachac.com
*/


/* GENERALES		      ///////////////////////////////////////////////////*/
body {
    font-family: "Calibre-Regular", Arial, Helvetica, sans-serif;
    font-size: 1.125em; /* 18px */
    line-height: 1.25;
    color: #000;
    background: #2587F9;
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; 
}

a,
.newsletter input[type="submit"],
.prensa input[type="submit"],
.lineup li div {
    text-decoration: none;
    color: #000;
    cursor: pointer;
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
}

a:hover {
    color: #fff;
}

img {
    vertical-align: bottom;
}

strong {
    font-family: "Druk-Heavy-Italic";
}

.clear {
    clear: both;
    padding: 0 !important;
}

iframe,
#popup-boletos,
header.movil,
.ubicacion .movil,
footer .nav br {
    display: none;
}

p {
    margin-bottom: 20px;
}


/* POPUP       		  ///////////////////////////////////////////////////*/
.fancybox-skin {
    background: #e9eb00 !important;
}

#popup-boletos {
    width: 470px;
    margin: 140px 100px;
    font-family: "Druk-Medium";
    font-size: 1.5em;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 3px;
}

#popup-boletos a {
    display: block;
    padding: 25px 0;
    text-align: center;
    color: #fff;
    background: #000;
}

#popup-boletos a:hover {
    background: #F13F79;
}


/* HEADER   		      ///////////////////////////////////////////////////*/
header h1,
header h2 {
    margin: 15px 0 5px 0;
    font-family: "Druk-Medium-Italic";
    text-transform: uppercase;
    font-size: 2.5em;
    letter-spacing: 10px;
}

header h2 {
    margin: 25px 0 10px 0;
    font-size: 1.35em;
}

header .music,
header nav {
    padding: 15px 0;
    font-family: "Druk-Medium";
    text-align: center;
    text-transform: uppercase;
    background: #F13F79;
}

header .music a,
.inicio .poster a {
    height: 35px;
    display: block;
    color: #fff;
    background: #000;
}

header .music a:hover,
header nav a:hover,
header nav a.activo,
.inicio .poster a:hover,
.sustentable a.boton:hover {
    color: #000;
    background: #EFEB09;
}

header .music div,
header .music ul,
header .music li,
header .header div,
header .header figure,
header nav li,
.newsletter .mc-field-group,
.newsletter #mce-responses,
.newsletter input[type="text"],
.newsletter input[type="email"],
.newsletter input[type="submit"],
footer li {
    display: inline-block;
    vertical-align: bottom;
}

header .music .idiomas a {
    width: 140px;
    padding: 7px 0 0 5px;
    letter-spacing: 5px;
}

header .music .redes a,
.inicio .poster a {
    width: 35px;
    padding-top: 7px;
}

header .music .redes li:last-child a {
    padding-top: 5px;
}

header .header {
    overflow: hidden;
    text-align: center;
    background: #EFEB09;
}

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

header .header .mascara {
    width: 1830px;
}

header .header .hellow {
    width: 780px;
    margin: 0 20px;
    vertical-align: top;
}

header .header .hellow div {
    position: relative;
    width: 100%;
    height: 200px;
}

header .header .hellow .h,
header .header .hellow .e,
header .header .hellow .l1,
header .header .hellow .l2,
header .header .hellow .o,
header .header .hellow .w {
    position: absolute;
    top: 0;
    left: 0;
}

header .header .hellow .e {
    top: 35px;
    left: 125px;
    z-index: 2;
}

header .header .hellow .l1 {
    top: 15px;
    left: 240px;
    z-index: 1;
}

header .header .hellow .l2 {
    top: 0;
    left: 325px;
}

header .header .hellow .o {
    top: 35px;
    left: 405px;
    z-index: 2;
}

header .header .hellow .w {
    top: 0;
    left: 550px;
}

header nav {
    font-size: .875em;
    letter-spacing: 5px;
    background: #000;
}

header nav a {
    display: block;
    padding: 10px 7px 9px 11px;
    color: #fff;
}

header nav a.verde:hover,
header nav a.verde.activo {
    color: #fff;
    background: #009900;
}


/* MOVIL   		          ///////////////////////////////////////////////////*/
header.movil,
.boletos .admision figure img,
.sustentable figure img {
    width: 100%;
}

header.movil .idiomas a {
    width: 35px;
    padding-left: 0;
    letter-spacing: 2px;
}

header.movil .header {
    padding: 15px 0;
    background: #000;
}

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

header.movil .header a:hover {
    color: #EFEB09;
}

header.movil .header figure,
header.movil .header p {
    display: inline-block;
    vertical-align: middle;
}

header.movil .header p {
    margin: 7px 0 0 25px;
    font-size: 1.5em;
}

header.movil .bg-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
    font-family: "Druk-Medium";
    font-size: 1.25em;
    text-align: center;
    text-transform: uppercase;
    background: #000;
    z-index: 100;
}

header.movil .bg-menu a {
    padding: 6px 0;
}

header.movil .bg-menu ul {
    display: table-cell;
    vertical-align: middle;
}

header.movil .bg-menu li {
    display: block;
    margin-bottom: 0;
    text-decoration: underline;
}

header.movil .bg-menu li:first-child {
    margin-bottom: 5px;
}

header.movil .bg-menu li:first-child a:hover {
    background: #000;
}


/* INICIO   		      ///////////////////////////////////////////////////*/
.inicio {
    padding-bottom: 80px;
    font-family: "Druk-Medium";
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.inicio iframe,
.lineup iframe,
.about iframe,
.festicket iframe {
    display: block;
}

.inicio .video,
.about .video {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
}

.inicio .video iframe,
.inicio .video object,
.inicio .video embed,
.about .video iframe,
.about .video object,
.about .video embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.inicio .poster {
    width: 1060px;
    overflow: hidden;
    margin: 80px auto 0 auto;
}

.inicio .poster a {
    margin-bottom: 25px;
    padding-left: 5px;
}

.inicio .poster figure {
    float: left;
    margin-left: 60px;
}

.inicio .poster ul {
    float: right;
}

.inicio .info {
    position: relative;
    display: inline-block;
    margin: 25px 10px 0 10px;
    font-size: 1.5em;
}

.inicio .info h1 {
    margin: 100px 0 30px 0;
}

.inicio .info a {
    display: inline-block;
    padding: 15px 40px;
    color: #000;
    background: #EFEB09;
}

.inicio .info a:hover {
    color: #EFEB09;
    background: #000;
}

.inicio .info div {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #fff;
    background: rgba(0,0,0,.5);
}


/* BOLETOS       	  ///////////////////////////////////////////////////*/
.boletos h2,
.ubicacion {
    font-family: "Druk-Medium-Italic";
    font-size: 1.65em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #fff;
    background: #000;
}

.boletos h2 {
    margin-bottom: 100px;
    padding: 40px 0;
}

.boletos p {
    margin-bottom: 0;
}

.boletos .banner,
.boletos .admision,
.faq,
.llegar {
    width: 940px;
    margin: 50px auto;
}

.boletos .banner {
    padding: 20px 0;
    font-family: "Druk-Medium-Italic";
    font-size: 2.25em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 5px;
    color: #fff;
    background: #000;
}

.boletos .banner h1 {
    margin-right: 10px;
    padding-right: 18px;
    border-right: 1px solid #fff;
}

.boletos .banner h1,
.boletos .banner figure {
    display: inline-block;
    vertical-align: middle;
}

.boletos .admision {
    font-family: "Druk-Medium";
    font-size: 1.15em;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
}

.boletos .admision section {
    position: relative;
}

.boletos .admision .costo {
    margin-left: 5px;
    font-family: "Druk-Super";
    letter-spacing: 4px;
}

.boletos .admision ul {
    width: 48%;
    display: inline-block;
    text-align: left;
    list-style: disc;
    vertical-align: top;
}

.boletos .admision ul + ul {
    width: 30%;
    margin-left: 5%;
}

.boletos .admision p a {
    display: inline-block;
    margin: 50px 0 30px 0;
    padding: 15px 30px 13px 35px;
    font-size: 1.25em;
    color: #fff;
    background: #000;
}

.boletos .admision p a:hover {
    color: #000;
    background: #F13F79;
}

.boletos .admision p a span,
.boletos .admision .fase h4 {
    font-family: "Druk-Medium-Italic";
}

.boletos .admision p + p,
.boletos .admision .fase h4 {
    font-size: .875em;
}

.boletos .admision .fase {
    position: relative;
    display: inline-block;
    padding: 10px 10px 5px 15px !important;
    border: 3px solid transparent;
}

.boletos .admision .fase h3 {
    font-size: 2em;
}

.boletos .admision .fase h4 {
    text-decoration: underline;
}

.boletos .admision .fase h5,
.boletos .admision ul + h5 {
    position: absolute;
    margin-top: 15px;
    padding: 4px 15px 2px 15px;
    font-family: "Druk-Super";
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
    background: #2587F9;
}

.boletos .admision ul + h5 {
    width: 200px;
    right: 0;
    left: 0;
    margin: 60px auto 0 auto;
    padding: 8px 15px 6px 15px;
    -webkit-transform: rotate(-10deg);
            transform: rotate(-10deg);
}

.boletos .admision .activa {
    border-color: #000;
}

.boletos .admision .noactiva {
    filter: opacity(35%);
    opacity: .35;
}

.boletos .admision figure {
    width: 32%;
    display: inline-block;
    margin: 5px 0 25px 0;
}

.boletos .admision .clear {
    margin-bottom: 50px;
}

.boletos .puntos {
    padding-bottom: 70px;
    text-align: center;
    background: #C57F85;
}

.boletos .puntos h3 {
    margin-bottom: 10px;
    font-family: "Druk-Medium-Italic";
    font-size: 1.65em;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: 2px;
}

.boletos .puntos .columna {
    display: inline-block;
    margin: 0 10px;
    text-align: left;
    vertical-align: top;
}

.boletos .puntos .columna div {
    margin-bottom: 30px;
}

.boletos .domicilio {
    padding-bottom: 100px;
    font-family: "Druk-Medium";
    font-size: 1.25em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.boletos .domicilio h3 {
    margin: 30px 0;
    font-family: "Druk-Super";
    font-size: 4.5em;
    letter-spacing: 5px;
    color: #fff;
}


/* FESTICKET          ///////////////////////////////////////////////////*/
.festicket {
    padding-bottom: 125px;
    background: #fff;
}


/* LINEUP       	  ///////////////////////////////////////////////////*/
.lineup {
    padding: 50px 0 150px 0;
    text-align: center;
}

.lineup h1 {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.lineup h2 {
    padding: 20px 0;
    font-family: "Druk-Super";
    font-size: 2.65em;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #000;
    background: #EFEB09;
}

.lineup li {
    position: relative;
    display: inline-block;
    margin: 0 8px 15px 8px;
}

.lineup li div {
    position: absolute;
    width: 100%;
    height: 100%;
    font-family: "Druk-Medium-Italic";
    font-size: 1.65em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    filter: opacity(0);
    opacity: 0;
    background: #F13F79;
    background: rgba(241,63,121,.9);
}

.lineup li div:hover {
    filter: opacity(100);
    opacity: 1;
}

.lineup .artista {
    opacity: 0;
}

.lineup section {
    width: 960px;
    margin: 0 auto;
}

.lineup .info {
    width: 610px;
    float: right;
    padding: 25px 25px 0 0;
    font-size: .875em;
    text-align: left;
}

.lineup .musica {
    width: 300px;
    float: left;
}


/* HORARIOS   		      ///////////////////////////////////////////////////*/
.horarios section,
.about .info,
.prensa section,
.tours section,
.terminos section,
.socios section,
.sustentable section,
.challenge section,
.dos section {
    width: 1100px;
    margin: 0 auto;
}

.horarios section,
.llegarubi {
    padding-bottom: 150px;
}

.horarios img {
    width: 100%;
}


/* ABOUT       		      ///////////////////////////////////////////////////*/
.about .info {
    overflow: hidden;
    padding: 85px 250px 65px 250px;
    text-align: justify;
    background: #EFEB09;
}


/* TOURS              	  ///////////////////////////////////////////////////*/
.tours {
    font-family: "Druk-Medium";
    font-size: 1.25em;
    text-transform: uppercase;
    line-height: 1.5;
    letter-spacing: 1px;
}

.tours h1 {
    font-family: "Druk-Super";
    font-size: 1.65em;
    text-decoration: underline;
}

.tours h1,
.tours h2 {
    color: #000;
}

.tours span {
    margin-right: 5px;
    font-family: "Druk-Medium-Italic";
    text-decoration: underline;
    color: #fff;
}

.tours section {
    padding: 50px 75px 130px 75px;
    color: #fff;
    background: #C57F85;
}

.tours .columna {
    width: 295px;
    display: inline-block;
    vertical-align: top;
}

.tours .columna:last-child {
    width: 350px;
}

.tours .columna div {
    margin-bottom: 20px;
}


/* FAQ                 	  ///////////////////////////////////////////////////*/
.faq {
    margin-bottom: 150px;
}

.faq h1 {
    display: block;
    padding: 25px 50px;
    font-family: "Druk-Medium-Italic";
    font-size: 2em;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #fff;
    background: #000;
}


/* PRENSA              	  ///////////////////////////////////////////////////*/
.prensa section,
.terminos section,
.socios section,
.sustentable section,
.challenge section,
.dos section {
    padding: 50px 150px 150px 150px;
    text-align: justify;
    color: #fff;
    background: #C57F85;
}

.prensa .gracias {
    margin-top: 40px;
    font-family: "Druk-Medium";
    font-size: 1.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 5px;
    color: #000;
}

.prensa form p {
    margin-bottom: 0;
    text-align: center;
}

.prensa input[type="text"],
.prensa textarea,
.prensa input[type="submit"] {
    width: 100%;
    height: 50px;
    margin-bottom: 15px;
    padding: 0 20px;
    font-family: "Calibre-Regular";
    font-size: 1em;
    color: #fff;
    border: 0;
    border-radius: 0;
    resize: none;
    outline: none;
    -webkit-appearance: none;
            appearance: none;
    background: #000;
}

.prensa textarea {
    height: 150px;
    padding: 20px;
}

.prensa input[type="text"]::-webkit-input-placeholder,
.prensa input[type="text"].error::-webkit-input-placeholder,
.prensa textarea::-webkit-input-placeholder,
.prensa textarea.error::-webkit-input-placeholder {
    color: #fff;
}

.prensa input[type="text"].error,
.prensa textarea.error {
    color: #fff;
    background: #900;
}

.prensa input[type="submit"] {
    width: 450px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
    font-family: "Druk-Medium";
    font-size: 1.65em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #000;
    cursor: pointer;
    background: #EFEB09;
}

.prensa input[type="submit"]:hover {
    color: #fff;
    background: #000;
}


/* COMO LLEGAR            ///////////////////////////////////////////////////*/
.llegar section ul {
    width: 50%;
    float: left;
    margin-bottom: 20px;
    padding-right: 15px;
}


/* SOCIOS                 ///////////////////////////////////////////////////*/
.socios h1,
.dos h1 {
    margin-bottom: 25px;
    font-family: "Druk-Medium";
    font-size: 1.5em;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.socios section {
    padding: 50px 100px 150px 100px;
    text-align: center;
}

.socios .renglon {
    padding: 50px 0;
    border-bottom: 1px solid #ccc;
}

.socios .renglon:last-child {
    border-bottom: none;
}

.socios .renglon div,
.socios figure {
    display: inline-block;
    margin: 0 20px;
}

.socios figure {
    vertical-align: middle;
}

.socios figure img {
    height: 50px;
}

.socios figure img.seven {
    height: 60px;
}


/* DOS AND DONTS          ///////////////////////////////////////////////////*/
.dos a {
    color: #fff;
}

.dos a:hover {
    color: #000;
}

.dos figure,
.dos div + div figure + figure {
    margin-bottom: 30px;
}

.dos div + div {
    margin-top: 40px;
}

.dos div + div figure {
    margin-bottom: 0;
}

.dos ul {
    width: 22.5%;
    display: inline-block;
    margin-left: 2%;
    text-align: left;
    list-style-type: disc;
    vertical-align: top;
}

.dos ul.espacio {
    padding-left: 30px;
}

.dos div + div ul {
    width: 30.5%;
}

.dos p {
    margin-top: 20px;
    text-align: left;
}


/* SUSTENTABLE            ///////////////////////////////////////////////////*/
.sustentable a.boton {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    font-family: "Druk-Medium";
    font-size: 1.25em;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #fff;
    background: #000;
}

.sustentable section figure {
    width: 50%;
    float: left;
}

.sustentable section figure + p + p {
    font-size: .875em;
    text-align: left;
}


/* CHALLENGE              ///////////////////////////////////////////////////*/
.challenge h3 {
    font-family: "Druk-Medium-Italic";
    font-size: 1.25em;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 3px;
}

.challenge h3 + h3 {
    margin-top: 15px;
}

.challenge strong {
    text-transform: uppercase;
    letter-spacing: 2px;
}

.challenge p.nota {
    margin-bottom: 0;
    font-size: .75em;
}


/* PRIVACIDAD             ///////////////////////////////////////////////////*/
.terminos h1,
.sustentable h1,
.challenge h1 {
    margin: 0 0 20px 0;
    font-family: "Druk-Heavy-Italic";
    font-size: 1.85em;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.terminos h2,
.sustentable h2,
.challenge h2 {
    margin: 30px 0 10px 0;
    font-family: "Druk-Medium-Italic";
    font-size: 1.5em;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.terminos p,
.sustentable p,
.challenge p {
    margin-bottom: 15px;
}


/* UBICACION         	  ///////////////////////////////////////////////////*/
.ubicacion h1 {
    padding: 40px 0;
}

.ubicacion figure img {
    width: 100%;
}

.ubicacion #mapa {
    height: 600px;
}


/* NEWSLETTER         	  ///////////////////////////////////////////////////*/
.newsletter {
    padding: 140px 0 150px 0;
    font-family: "Druk-Medium", Arial, Helvetica, sans-serif;
    font-size: 2.5em;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1.2;
    background: #D54535;
}

.newsletter h1 {
    margin-bottom: 50px;
    padding: 0 25px;
    text-decoration: underline;
}

.newsletter input[type="text"],
.newsletter input[type="email"],
.newsletter input[type="submit"] {
    width: 500px;
    padding: 20px 30px;
    font-family: "Druk-Medium-Italic", Arial, Helvetica, sans-serif;
    font-size: .65em;
    text-transform: uppercase;
    letter-spacing: 3px;
    border: 0;
    border-radius: 0;
    outline: none;
    -webkit-appearance: none !important;
            appearance: none !important;
    background: #fff;
}

.newsletter input[type="submit"] {
    width: 200px;
    margin-left: -15px;
    font-family: "Druk-Medium", Arial, Helvetica, sans-serif;
    text-decoration: underline;
    color: #fff;
    background: #000;
}

.newsletter input[type="submit"]:hover {
    color: #000;
    background: #EFEB09;
}

.newsletter ::-webkit-input-placeholder {
    color: #000;
}

.newsletter input[type="text"].error::-webkit-input-placeholder {
    color: #fff;
    background: #990000;
}


/* CUENTA REGRESIVA       ///////////////////////////////////////////////////*/
.cuenta {
    position: relative;
    background: #EFEB09;
    z-index: 1;
}

.cuenta section {
    width: 860px;
    margin: 0 auto;
}

.cuenta figure {
    float: right;
    margin-top: -125px;
}


/* FOOTER            	  ///////////////////////////////////////////////////*/
footer {
    padding: 60px 0;
    font-family: "Druk-Medium";
    font-size: .875em;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    color: #fff;
    background: #000;
}

footer a {
    color: #fff;
}

footer a:hover {
    color: #EFEB09;
}

footer a.verde:hover {
    color: #009900;
}

footer .nav {
    margin-bottom: 50px;
}

footer .nav li,
footer .redes li {
    margin: 0 10px;
}

footer .redes img {
    width: 33px;
    height: 22px;
}