/*  
Client: HEG / Hellow Entertainment Group
Client URL: http://hegmexico.com
Description: HEG is an Entertainment Holding which includes a Creative Communication Agency, Online and Digital Media Agency , Concerts and Festivals Productions Company, Talent Booking,Technical Design and Production, Theme and Décor, Corporate Events Productions, Brands and Promotional Events production, Brands and Products Launches, Concerts Tours, Sponsors Management, Custom Made Events among other services related to the Entertainment Industry.
Version: 1.0
Autor: Ministerio
Autor URL: http://ministerio.mx
*/


@media only screen and (max-width: 1180px) {
    .stories h2 {
        padding: 33% 0;
    }
}


@media only screen and (max-width: 999px) {
    header section,
    .about,
    .companies section,
    .services,
    .stories section,
    .clients section,
    .contact section,
    .social,
    footer section {
        width: 90%;
    }
    
    header nav {
        margin-top: 20px;
        font-size: 1.15em;
    }
    header nav li {
        margin: 0 6px;
    }
    
    .slides-container .titles,
    .testimonials div {
        width: 80%;
        margin-top: 32%;
    }
    
    .companies img {
        height: 60px;
    }
    .companies .tabs-list li {
        margin: 0 10px;
    }
    
    .services .tabs-list li {
        margin-right: 25px;
        margin-left: 25px;
    }
    .services img {
        width: 50%;
    }
    
    .clients li {
        width: 24%;
    }
    .clients li img {
        width: 100%;
        height: auto;
    }
    
    .testimonials h1 {
        font-size: 3em;
    }
    .testimonials h2 {
        font-size: 1.75em;
    }
    .testimonials div {
        margin: 8% auto;
    }
    
    .contact form {
        width: 70%;
    }
    .contact input[type=text] {
        width: 49%;
        margin-right: 2%
    }
    .contact address {
        width: 25%;
    }
}


@media only screen and (max-width: 960px) {
    header {
        padding: 15px 0;
    }
    header nav {
        display: none;
    }
    
    header nav.menu-movil,
    header nav.menu-movil li {
        display: block;
        margin-top: 12px;
    }
    header nav.menu-movil #movil {
        font-size: 1.75em;
    }
    header nav.menu-movil ul {
        position: fixed;
        left: 0;
        width: 100%;
        margin-top: 21px;
        text-align: center;
        background: #fff;
    }
    header nav.menu-movil li {
        margin: 0 0 15px 0;
    }
    header nav.menu-movil a {
        display: block;
    }
    
    .about section {
        width: 56%;
    }
    
    .companies img {
        height: 55px;
    }
    .companies .tabbody {
        margin-top: 35px;
    }
    
    .services .tabs-list li {
        margin-right: 15px;
        margin-left: 15px;
    }
    
    footer p {
        margin-top: 20px;
        font-size: 1.15em;
    }
}


@media only screen and (max-width: 800px) {
    .companies h2 {
        margin-bottom: 45px;
    }
    .companies img {
        height: 50px;
    }
    
    .stories h2 {
        font-size: 1.5em;
    }
    .stories .tabbody img + img + img {
        display: none;
    }
    .stories .tabbody div {
        width: 100%;
    }
}


@media only screen and (max-width: 768px) {
    .slides-container h1 {
        font-size: 3.25em;
    }
    .slides-container h2 {
        font-size: 2.25em;
    }
    .slides-container .titles {
        margin-top: 45%;
    }
    
    .about figure {
        width: 38%;
    }
    
    .companies img {
        height: 50px;
    }
    .companies .tabs-list li {
        margin: 0 5px;
    }
    
    .services h1 {
        margin-bottom: 40px;
    }
    .services h2 {
        margin-top: 10px;
        font-size: 1.15em;
    }
    .services .tabs-list li {
        width: 28%;
        margin: 15px 10px 0 10px;
    }
    .services img {
        width: 35%;
    }
    
    .clients ul {
        margin-top: 10px;
    }
    .clients li {
        width: 32%;
    }
    
    .social h1 {
        font-size: 3.25em;
    }
    .social h2 {
        font-size: 2.5em;
    }
    
    footer {
        padding: 20px 0;
        text-align: center;
    }
    footer figure,
    footer p {
        float: none;
    }
    footer figure {
        margin-bottom: 15px;
    }
    footer p {
        margin: 0;
    }
}


@media only screen and (max-width: 600px) {
    .about {
        padding: 45px 0;
    }
    .about figure,
    .about section,
    .contact form,
    .contact address {
        float: none;
    }
    .about figure {
        width: 270px;
        margin: 0 auto 15px auto;
    }
    .about section,
    .contact form,
    .contact input[type=text],
    .contact address {
        width: 100%;
    }
    
    .about section {
        padding-left: 0;
        border-left: none;
    }
    
    .companies img {
        height: 60px;
    }
    .companies .tabs-list li {
        margin: 10px 15px;
    }
    
    .services {
        padding: 45px 0 30px 0;
    }
    .services img {
        width: 50%;
    }
    
    .stories h2 {
        font-size: 1.2em;
    }
    
    .clients {
        padding: 45px 0 45px 0;
    }
    
    .testimonials h1 {
        font-size: 2em;
    }
    .testimonials h2 {
        font-size: 1.15em;
    }
    .testimonials div {
        margin: 9% auto;
    }
    
    .contact {
        padding: 25px 0 35px 0;
    }
    .contact input[type=text] {
        margin-bottom: 15px;
    }
    .contact textarea {
        margin: 0 0 15px 0;
    }
    .contact address {
        margin-top: 35px;
    }
    .contact address h2 {
        margin-bottom: 15px;
    }
    
    .social {
        padding: 100px 0;
    }
    .social li {
        margin-right: 5px;
    }
}


@media only screen and (max-width: 480px) {
    h1 {
        font-size: 3em;
    }
    
    header {
        padding: 10px 0;
    }
    header figure img {
        width: 220px;
    }
    
    header nav.menu-movil {
        margin-top: 7px;
    }
    header nav.menu-movil ul {
        margin-top: 12px;
        padding-top: 10px;
    }
    
    .slides-container h1 {
        font-size: 2em;
    }
    .slides-container h2 {
        font-size: 1.25em;
    }
    .slides-container .titles {
        margin-top: 50%;
    }
    
    .slides-navigation {
        display: none;
    }
    
    .about figure {
        width: 200px;
    }
    
    .companies img {
        height: 45px;
    }
    .companies .tabbody {
        margin-top: 0;
    }
    .companies .tabs-list li {
        margin-right: 5px;
        margin-left: 5px;
    }
    
    .services h1,
    .contact h1 {
        margin-bottom: 25px;
    }
    .services h2,
    .contact p {
        font-size: 1em;
    }
    .services .tabbody {
        margin-top: 0;
    }
    
    .stories h2 {
        padding: 30% 0;
    }
    .stories h3 {
        margin-bottom: 10px;
        font-size: 1.5em;
    }
    .stories h4 {
        font-size: 1em;
    }

    .clients li {
        width: 49%;
        margin: 0;
    }
    
    .testimonials h1 {
        font-size: 1.15em;
    }
    .testimonials h2 {
        font-size: .85em;
    }
    
    .social {
        padding: 50px 0;
    }
    .social h1 {
        font-size: 2.25em;
    }
    .social h2 {
        font-size: 1.5em;
    }
    .social a {
        width: 45px;
        height: 45px;
        font-size: 1.25em;
        border-width: 5px;
    }
    .social img {
        width: 25px;
        height: 25px;
    }
    
    footer {
        padding: 15px 0;
        font-size: .85em;
    }
    footer figure img {
        width: 200px;
    }
}


@media only screen and (max-width: 320px) {
    .companies img {
        height: 45px;
    }
    
    .services img {
        width: 75%;
    }
    .services .tabs-list li {
        width: 29%;
        margin: 15px 5px 0 5px;
    }
    
    .social ul {
        padding-right: 50px;
    }
}