/*  
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
*/


/* GENERALS 		  ///////////////////////////////////////////////////*/
body {
    font-family: "SourceSansPro-Regular", Arial, Helvetica, sans-serif;
    font-size: .875em; /* 14px */
    color: #000;
    background: #fff;
}

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

a,
.services .tabs-list img,
.stories .tabs-list a img,
.contact input[type=submit] {
    -webkit-transition: all ease-out .3s;
            transition: all ease-out .3s;
}
a {
    text-decoration: none;
    color: #515151;
}
a:hover,
header nav a.active {
    color: #809dc4;
}

img {
    vertical-align: bottom;
}

p,
ul {
    margin-bottom: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Roboto-Thin", Arial, Helvetica, sans-serif;
}
h1 {
    font-size: 4.25em;
    line-height: 1.35;
}

::-webkit-input-placeholder {
    font-size: 1em;
    color: #3f3f3f;
}


/* HEADER    		  ///////////////////////////////////////////////////*/
header {
    position: fixed;
    padding: 30px 0;
    background: #fff;
    z-index: 15;
}
header,
.about figure img,
.stories section + section img,
.contact textarea {
    width: 100%;
}

header section,
.slides .titles,
.about,
.companies section,
.services,
.stories section,
.clients section,
.testimonials div,
.contact section,
.social,
footer section {
    width: 1000px;
    overflow: hidden;
    margin: 0 auto;
}

header figure,
.about figure {
    float: left;
}

header nav {
    float: right;
    margin-top: 22px;
    font-size: 1.15em;
}
header nav li {
    display: inline-block;
    margin: 0 15px;
}
header nav a {
    cursor: pointer;
}

header nav.menu-movil,
header nav.menu-movil ul {
    display: none;
}


/* HOME     		  ///////////////////////////////////////////////////*/
.slides-container h2 {
    font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;
    font-size: 2.85em;
}

.slides-container .titles,
.testimonials div {
    position: absolute;
    right: 0;
    left: 0;
    margin: 22% auto 0 auto;
    padding-bottom: 5px;
    color: #fff;
}


/* ABOUT     		  ///////////////////////////////////////////////////*/
.about {
    padding: 115px 0;;
}

.about figure {
    width: 270px;
}

.about section {
    width: 590px;
    float: right;
    padding-left: 40px;
    border-left: 1px solid #cbcbcb;
}

.about p,
.about ul,
.companies p {
    line-height: 1.5;
}

.about li {
    list-style: none;
}
.about li:before {
    content: "- ";
} 


/* COMPANIES     	  ///////////////////////////////////////////////////*/
.companies,
.clients,
.contact,
footer {
    padding: 50px 0;
    background: #f3f3f3;
}
.companies {
    padding-bottom: 40px;
}

.companies section + section {
    text-align: center;
}

.companies h2 {
    margin-bottom: 125px;
    font-size: 1.25em;
}

.companies img {
    height: 75px;
}

.companies .tabbody,
.services .tabbody {
	position: relative;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #cbcbcb;
}
.companies .tabbody a,
.services .tabbody a {
    font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;
}
.companies .tabbody a {
	text-transform: uppercase;
}
.companies .tabbody span,
.services .tabbody span {
    font-size: .75em;
    vertical-align: top;
}

.companies .tabs-list li,
.services .tabs-list li {
    display: inline-block;
    margin: 0 15px;
}
.companies .tabs-list a {
	filter: opacity(50);
    opacity: .50;
}
.companies .tabs-list a:hover,
.companies .tabs-list .current a {
	filter: opacity(100);
    opacity: 1;
}

.js .current-info,
.js .accessibletabsanchor,
.js .tabhead {
	position: absolute;
	left: -999em;
}
.js .content {
	clear: both;
}


/* SERVICES     	  ///////////////////////////////////////////////////*/
.services {
    padding: 100px 0 60px 0;
    text-align: center;
}

.services h1 {
    margin-bottom: 50px;
    color: #515151;
}
.services h2 {
    margin: 20px 0;
    font-size: 1.5em;
    color: #3a3a3a;
}

.services p {
    color: #999;
}

.services .tabbody {
    margin-top: 25px;
}
.services .tabs-list li {
    position: relative;
    width: 200px;
    margin: 25px 50px 0 50px;
    vertical-align: top;
}

.services .tabs-list a:hover img,
.services .tabs-list .current a img,
.stories .tabs-list a:hover img,
.stories .tabs-list .current a img {
	filter: opacity(0);
    opacity: 0;
}
.services .tabs-list a:hover img + img,
.services .tabs-list .current a img + img {
	filter: opacity(100);
    opacity: 1;
}

.services .tabs-list img,
.stories .tabs-list img {
    position: absolute;
}
.services .tabs-list img {
    z-index: 1;
}
.services .tabs-list img + img {
    position: relative;
    z-index: 0;
}


/* STORIES       	  ///////////////////////////////////////////////////*/
.stories {
    color: #5a5a5a;
    background: #f3f3f3;
}

.stories h1,
.stories h3 {
    margin-bottom: 20px;
}

.stories h2 {
    padding: 34% 0;
    font-size: 2em;
    text-align: center;
    background: -webkit-linear-gradient(#8fc8cb, #567ec9);
    background:         linear-gradient(#8fc8cb, #567ec9);
}

.stories h3 {
    font-size: 2em;
}

.stories h4 {
    margin-bottom: 5px;
    font-size: 1.25em;
    text-transform: uppercase;
}

.stories p,
.stories ul {
    margin-bottom: 0;
}

.stories section {
    padding: 50px 0 66px 0;
}

.stories section + section {
    width: auto;
    padding: 0;
    background: #fff;
}

.stories .tabs-list li {
    position: relative;
    width: 33.33%;
    height: auto;
    display: inline-block;
}
.stories .tabs-list a {
    color: #fff;
}

.stories .tabbody {
	position: relative;
}
.stories .tabbody img,
.stories .tabbody div {
    width: 50%;
    float: left;
}
.stories .tabbody div {
    padding: 3% 3% 0 3%;
}
.stories .tabbody div p {
    margin-bottom: 20px;
}


/* CLIENTS       	  ///////////////////////////////////////////////////*/
.clients {
    padding: 80px 0 60px 0;
}

.clients ul {
    margin-top: 50px;
    text-align: center;
    filter: opacity(50);
    opacity: .50;
}
.clients li {
    display: inline-block;
    margin: 10px 0;
}

.clients img {
    height: 118px;
}


/* TESTIMONIALS       ///////////////////////////////////////////////////*/
.testimonials h1 {
    font-style: italic;
}

.testimonials h2 {
    font-size: 2.15em;
    text-align: right;
}

.testimonials div {
    margin-top: 110px;
}


/* CONTACT            ///////////////////////////////////////////////////*/
.contact h1 {
    margin-bottom: 70px;
    text-align: center;
}

.contact h2 {
    margin-bottom: 20px;
    padding-bottom: 13px;
    font-family: "Roboto-Bold", Arial, Helvetica, sans-serif;
    font-size: 1.25em;
    text-transform: uppercase;
    color: #333;
    border-bottom: 2px solid #e7e7e7;
}

.contact p {
    margin-bottom: 5px;
    font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;
    font-size: 1.15em;
    color: #5c5c5c;
}

.contact form {
    width: 700px;
    float: left;
}
.contact form p {
    margin-bottom: 15px;
}

.contact input[type=text] {
    width: 342px;
    float: left;
    margin-right: 16px;
}
.contact input[type=text] + input[type=text],
.contact label.error + input.error {
    margin-right: 0;
}
.contact input[type=text],
.contact input[type=submit],
.contact textarea {
    padding: 10px;
    font-size: 1em;
    resize: none;
    border: none;
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
			appearance: none;
    background: #fff;
}
.contact textarea {
    height: 145px;
    margin: 16px 0;
}
.contact input[type=submit] {
    padding-right: 15px;
    padding-left: 15px;
    font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;
    font-size: 1em;
    color: #fff;
    cursor: pointer;
    border-bottom: 2px solid #686da2;
    background: #809dc4;
}
.contact input[type=submit]:hover {
    border-bottom-color: #444;
    background: #515151;
}

.contact input.error,
.contact textarea.error {
    background: #000;
}

.contact address {
    width: 250px;
    float: right;
}
.contact address h2 {
    margin-bottom: 168px;
}


/* SOCIAL          	  ///////////////////////////////////////////////////*/
.social {
    padding: 200px 0;
}

.social h1,
.social h2 {
    color: #809dc4;
}
.social h1 {
    font-family: "Roboto-Medium", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}
.social h2 {
    font-size: 3.5em;
    text-transform: capitalize;
}

.social ul {
    margin: 20px 0 0 0;
}

.social li {
    display: inline-block;
    margin: 0 10px 10px 0;
    vertical-align: top;
}

.social a {
    width: 55px;
    height: 55px;
    display: block;
    text-align: center;
    font-size: 1.5em;
    line-height: 1.65;
    color: #fff;
    border: 8px solid #fff;
    border-radius: 50%;
    background: #d6d6d6;
}
.social a:hover {
    border-color: #f0f0f0;
    background: #809dc4;
}

.social i {
    margin-top: 9px;
}


/* FOOTER       	  ///////////////////////////////////////////////////*/
footer {
    padding: 45px 0;
}

footer figure {
    float: left;
}

footer p {
    float: right;
    margin: 17px 0 0 20px;
    font-size: 1.25em;
}
footer p + p {
    margin-left: 0;
}