/*! Theme styles */

/*! Fonts */
@import url('//fonts.googleapis.com/css?family=Montserrat:400,500,700');

/*! Colors */
:root {
	--white: #FFF;
	--black: #000;
	--gray: #575757;
	--darkgray: #333333;
	--midgray: #ccc;
	--lightgray: #EEE;
	--purple: #7B3A7D;
}

/*! Custom Reboot / Normalize */
html {font-size: 20px;}
img {max-width: 100%; height: auto; display: inline-block;}
a {transition: all ease-in-out .2s; -webkit-transform: translate3d(0,0,0);}
body, .modal-outer {color: var(--gray); background-color: var(--white); font: normal 400 1rem/1.5 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: relative; text-rendering: optimizeLegibility;}
.frame {height: 0; overflow: hidden; padding-bottom: 50%; padding-top: 60px; position: relative;}
.frame iframe, .frame object, .frame embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;}
hr {height: 1px; border: 0; width: 100%; margin-top: 2rem; background: rgba(255,255,255,.5);}

/*! Header */
#header {background-color: var(--white); padding: 2rem 0;}
#header img {display: inline-block;}
#header .brand img {max-height: 120px;}
#header .logos {text-align: right; border-left: 1px solid var(--lightgray);}
#header .logos img {margin-left: 2rem; max-height: 90px; max-width: 25%; vertical-align: middle;}
#header .lang {text-align: right; list-style: none; margin: -1.5rem 0 0 0; padding: 0; font-size: 0;}
#header .lang li {display: inline-block;}
#header .lang a {display: inline-block; font-size: .6rem; color: var(--gray); padding: 0 .5rem; border-right: 1px solid var(--midgray); position: relative;}
#header .lang a:before {content: ''; width: .3rem; height: .3rem; border-radius: 1rem; background-color: var(--purple); margin-right: .3rem; display: none; transform: translateY(-1px);}
#header .lang li:last-child a {border: 0;}
#header .lang.es li:first-child a:before {display: inline-block;}
#header .lang.en li:last-child a:before {display: inline-block;}
#header .special {padding: 10px;}

/*! Main navigation */
#nav {background-color: var(--gray); position: -webkit-sticky; position: sticky; top: -1px; z-index: 9999;}
#nav ul {list-style: none; margin: 0; padding: 0; font-size: 0; width: 100%; text-align: center;}
#nav li {display: inline-block; font-size: .6rem; font-weight: 400; text-transform: uppercase;}
#nav a {display: block; padding: 1rem; color: var(--white); text-decoration: none;}
#nav a:hover {background-color: var(--darkgray);}
#nav li.active a {background-color: var(--purple);}
#nav .mobile-nav {display: none; width: 100%; text-align: right; position: relative; padding-right: 2rem; text-transform: uppercase;}
#nav .mobile-nav:after {content: ''; display: block; width: 1rem; height: 1rem; position: absolute; top: 50%; transform: translateY(-50%) rotate(-90deg); right: .5rem; background: url('../img/icon-chevron.svg') no-repeat center; background-size: contain; transition: transform ease-in-out .2s;}
#nav .mobile-nav.active:after {transform: translateY(-50%) rotate(90deg);}

/*! Hero */
#hero {background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; background-attachment: fixed;}
#hero:after {content: ''; z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(123,58,125,.8) 0%, rgba(123,58,125,.5) 100%);}
#hero .hero-claim {position: relative; width: 100%; z-index: 99; text-align: center; padding: 5% 0; color: var(--white);}
#hero .hero-claim h1 {font-size: 4rem; font-weight: 500; margin-bottom: 0rem; line-height: 1.2;}
#hero .hero-claim h2 {font-size: 1.5rem; font-weight: 500; margin-bottom: 2rem; line-height: 1.2;}
#hero .hero-claim h3 {display: inline-block; font-weight: 700; font-size: 1.2rem; padding: 1rem; line-height: 1.3; background-color: rgba(123,58,125,.8);}
#hero .hero-claim h4 {display: block; font-weight: 700; font-size: 1.5rem; margin: 1rem 0 0 0; line-height: 1.2; color: var(--white);}
#hero .hero-claim .location {font-weight: 500; font-size: .8rem;}
#hero .frame {margin-top: -1rem;}
#hero .buttons {text-align: center; margin: 1rem 0;}
#hero .button {display: inline-block; padding: 1rem 2rem; font-weight: 700; border: 4px solid var(--white); background-color: var(--white); color: var(--purple); border-radius: 8px; transition: background ease-in-out .2s; cursor: pointer; text-decoration: none;}
#hero .button:hover {background-color: var(--purple); color: var(--white);}

/*! Gallery */
#gallery {background-position: bottom center; background-repeat: no-repeat; background-size: cover; position: relative; padding: 10% 0;}
#gallery:after {content: ''; z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(123,58,125,.8) 0%, rgba(123,58,125,.5) 100%);}
#gallery .container {position: relative; z-index: 1;}
#gallery .section-title h2, #gallery .section-title p {color: var(--white);}
#gallery .buttons {text-align: center; margin: 0;}
#gallery .button {display: inline-block; padding: 1rem 2rem; font-weight: 700; border: 4px solid var(--white); background-color: var(--white); color: var(--purple); border-radius: 8px; transition: background ease-in-out .2s; cursor: pointer; text-decoration: none;}
#gallery .button:hover {background-color: var(--purple); color: var(--white);}
#gallery .caption {color: var(--white); font-size: .8rem; text-align: center; margin: 1rem 0; font-weight: 700;}

/*! Main container */
.main-section {padding: 2rem 0;}
.main-section#about, .main-section#goals {text-align: justify;}
.section-title {text-align: center; margin-bottom: 3rem;}
.section-title h2 {color: var(--purple); font-size: 2.2rem; font-weight: 700;}
.section-title h3 {font-size: 1.4rem; font-weight: 400;}

/* goals */
#goals {background-color: var(--lightgray);}
#goals {background-color: var(--purple); position: relative;}
#goals:before {content: ''; background: url('../img/speakers.jpg') center / cover fixed no-repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .1;}
#goals .container {position: relative; z-index: 99;}
#goals .section-title *, #goals * {color: var(--white);}

/*! location */
#location .card-location {margin-bottom: 30px;}
#location ul {list-style: none; margin: 0 0 2rem 0; padding: 0; text-align: center;}
#location .date {font-weight: 700; padding-bottom: .5rem; margin-bottom: .5rem; border-bottom: 1px solid var(--midgray); /*text-transform: uppercase;*/}
#location .date strong {display: block; color: var(--purple); font-size: 1.5rem; font-weight: 400;}
#location .venue {font-size: .8rem; font-weight: 700;}
#location .location {font-size: .8rem;}

/*! offer */
#offer .offer-item {margin-bottom: 2rem;}
#offer .offer-item .row > div:first-child {border-right: 2px solid var(--purple);}
#offer .offer-item .offer-title {text-align: right;}
#offer .offer-item .offer-title h3 {font-weight: 700; font-size: 1.5rem; color: var(--purple); line-height: 1;}
#offer .offer-item a.more {display: inline-block; color: var(--white); font-size: .7rem; background-color: var(--purple); padding: .3rem .5rem; border-radius: 4px; cursor: pointer;}
#offer .offer-item a.more:after {content: ''; display: inline-block; vertical-align: middle; width: .75rem; height: .75rem; background-color: red; margin-left: .5rem; transform: rotate(-90deg); background: url('../img/icon-chevron.svg') center no-repeat; background-size: contain; transition: all ease-in-out .2s;}
#offer .offer-item a.more.active:after {transform: rotate(90deg);}
#offer .acc-content {padding: 2rem 0; background-color: var(--lightgray); margin-bottom: 2rem; position: relative;}
#offer .acc-content:after {bottom: 100%; left: 50%; border: solid transparent; content: ''; height: 0; width: 0; position: absolute; pointer-events: none; border-color: transparent; border-bottom-color: var(--lightgray); border-width: 15px; margin-left: -15px;}
#offer .day-title {text-align: left; /*text-transform: uppercase;*/ font-weight: 700; font-size: 1.5rem; color: var(--purple); margin-bottom: 0;}
#offer .location-name {text-align: left; font-weight: 700; font-size: .8rem; color: var(--purple); margin-bottom: 0;}
#offer .location-address {text-align: left; font-weight: 400; font-size: .8rem; color: var(--purple); margin-bottom: 1.5rem;}
#offer .offer-items {list-style: none; margin: 0; padding: 0;}
#offer .offer-items li {padding: 1rem 0; border-bottom: 2px solid var(--white);}
#offer .offer-items li:last-child {border: 0;}
#offer .offer-items li.separator {border: 0; padding-bottom: 0;}
#offer .offer-items li.separator p {margin: 0; font-size: .8rem; color: var(--purple); font-weight: 500;}
#offer .offer-items li.separator p span {color: var(--gray); font-weight: 400;}
#offer .offer-items .metadata {font-size: .7rem; display: block; margin-bottom: .5rem;}
#offer .offer-items .metadata .time {display: inline-block; margin-right: 5px; font-size: .6rem; }
#offer .offer-items .metadata .speaker {font-weight: 700;}
#offer .offer-items .offer-title {font-size: .65rem; font-weight: 400; margin: 0;}
#offer .offer-items .offer-title.en {font-size: normal;}
#offer .offer-items .offer-title.es {font-style: italic;}
#offer .soon {font-size: .7rem; padding: 1rem 0;}
#offer .workshops-hours {text-align: center;}
#offer .offer-items li.opening p.list-title {margin: 0; font-size: .8rem; color: var(--purple); font-weight: 500;}
#offer .offer-items li.opening ul {margin: 0; padding: 0 0 0 20px;}
#offer li.opening .people {margin-top: .5rem;}
#offer .speaker.separator {color: var(--purple);}
#offer .people {margin-top: 1rem;}
#offer .people * {font-size: .7rem;}
#offer .people li {padding: 0; border: 0;}
#offer-poster {font-size: .8rem;}
#offer-poster .buttons {text-align: center; margin: 2rem 0;}
#offer-poster .button {display: inline-block; color: var(--white); font-size: 1rem; background-color: var(--purple); padding: .3rem .5rem; border-radius: 4px; cursor: pointer;}
#offer-poster p a {font-weight: 700; color: var(--purple); text-decoration: underline;}
#offer .schedule {text-align: center; padding-top: 3rem; padding-bottom: 3rem;}
#offer .schedule .button {padding: 1rem; -webkit-appearance: none; border: 1px solid var(--purple); background-color: var(--purple); color: var(--white); border-radius: 5px; transition: background ease-in-out .2s; cursor: pointer; width: 30%; text-decoration: none;}
#offer .schedule .button:hover {background-color: var(--gray);}

/*! spearkes */
#speakers {background-color: var(--purple); position: relative;}
#speakers:before {content: ''; background: url('../img/speakers.jpg') center / cover fixed no-repeat; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: .1;}
#speakers .container {position: relative; z-index: 99;}
#speakers .section-title * {color: var(--white);}
.speakers-cards > div {margin-bottom: 30px;}
.speakers-cards .media {text-align: center; margin: 0 auto 1rem auto; max-width: 75%; border: 5px solid var(--white); border-radius: 50%; overflow: hidden;}
.speakers-cards .media img {-webkit-filter: grayscale(100%); filter: grayscale(100%);}
.speakers-cards .caption {text-align: center; color: var(--white);}
.speakers-cards .name {margin: 0; font-size: 1rem; font-weight: 500;}
.speakers-cards .origin {margin: 0; font-size: .7rem; font-weight: 400;}

/* Organizing */
#organizing {background-color: var(--lightgray);}
#organizing * {text-align: center;}
#organizing .group {margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--white);}
#organizing .group:last-child {margin-bottom: 0; padding-bottom: 0; border: 0;}
#organizing .group h3 {font-weight: 500; font-size: 1.5rem; margin-bottom: 1rem; color: var(--purple);}
#organizing .group ul {margin: 0; padding: 0; list-style: none; /*padding-left: 1rem; border-left: 2px solid var(--purple);*/}
#organizing .group li {margin-bottom: 1rem;}
#organizing .group li:last-child {margin-bottom: 0;}
#organizing .group .name {display: block;}
#organizing .group .origin {display: block; font-size: .8rem;}
#organizing .speakers-cards .media {border-color: var(--purple);}
#organizing .speakers-cards .caption {color: var(--gray);}

/* tickets */
#tickets {background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; background-attachment: fixed;}
#tickets:after {content: ''; z-index: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(123,58,125,.8) 0%, rgba(123,58,125,.5) 100%);}
#tickets .container {position: relative; z-index: 1;}
#tickets .section-title {padding: 15% 0; color: var(--white); margin-bottom: 0;}
#tickets .mailchimp {margin-top: 2rem; font-size: 0;}
#tickets .mailchimp input {display: inline-block; outline: none; font-size: 1rem;}
#tickets .mailchimp .text {padding: 1rem 1rem 1rem 2.7rem; -webkit-appearance: none; border: 1px solid var(--gray); background: url('../img/icon-envelope.svg') 1rem center no-repeat #fff; background-size: 1rem; border-right: 0; border-radius: 5px 0 0 5px; width: 70%;}
#tickets .mailchimp .text:focus {border-color: var(--purple);}
#tickets .mailchimp .button {padding: 1rem; -webkit-appearance: none; border: 1px solid var(--purple); background-color: var(--purple); color: var(--white); border-radius: 0 5px 5px 0; transition: background ease-in-out .2s; cursor: pointer; width: 30%;}
#tickets .mailchimp .button:hover {background-color: var(--gray);}
#tickets h2 {color: var(--white);}
#tickets .buttons {text-align: center; margin: 1rem 0;}
#tickets .get-tickets .button {display: inline-block; padding: 1rem 2rem; font-weight: 700; border: 4px solid var(--purple); background-color: var(--purple); color: var(--white); border-radius: 8px; transition: background ease-in-out .2s; cursor: pointer; text-decoration: none;}
#tickets .get-tickets .button:hover {background-color: var(--gray);}
.en #tickets .mailchimp .text {width: 60%;}
.en #tickets .mailchimp .button {width: 40%;}

/*! Footer */
.pre-footer {background-color: var(--white); padding: 2em 0; text-align: center;}
.pre-footer img {max-height: 80px; margin: 1rem 0; max-width: 75%;}
.pre-footer .logo-group {margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid var(--lightgray);}
.pre-footer .logo-group:last-child {margin-bottom: 0; padding-bottom: 0; border: 0;}
.pre-footer .logo-group h4 {font-size: 1.2rem; font-weight: 400; color: var(--purple);}
#footer {background-color: var(--gray); color: var(--white); padding: 1rem 0; text-align: center; font-size: .8rem;}
#footer a {color: var(--white); text-decoration: underline;}
#footer p {margin: 0;}

/*! modal */
.modal-outer {max-width: 50%;}
.modal-line {margin-bottom: 0;}
.button-modal {font-weight: 700; color: var(--purple); text-decoration: none; font-size: .7rem;}
.button-modal:hover {color: var(--purple); text-decoration: underline;}
.modal-outer .metadata .speaker {font-weight: 500; font-size: .8rem;}
.modal-outer .metadata .time {font-weight: 400; font-size: .8rem; margin-right: .5rem; display: block;}
.modal-outer .offer-title {font-size: 1rem; font-weight: 700;}
.modal-outer .offer-title.en {font-size: normal;}
.modal-outer .offer-title.es {font-style: normal;}
.modal-outer .caption {font-size: .8rem;}

/*! Social */
#social {background-color: var(--lightgray);}
#social .section-title h2 {font-size: 2rem; font-weight: 700;} 
#social .social-share ul {list-style: none; margin: 0; padding: 0; font-size: 0; text-align: center;}
#social .social-share li {font-size: 1rem; line-height: 1; display: inline-block;}
#social .social-share a {display: block; margin: 0 1rem 1rem 1rem;}
#social .social-share a:hover {opacity: .75;}
#social .social-share img {min-width: 90px;}

/*! Selected posters (table) */
table {border-collapse: collapse;}
tr:nth-child(even) {background-color: rgba(255,255,255,.4);}
th, td {padding: .5rem;}
th {font-weight: 700; border-bottom: 2px solid #fff; width: 33.333%;}
td {font-weight: 400; font-size: .6rem; border: 1px solid #fff;}
td:first-child {border-left: 0;}
td:last-child {border-right: 0;}
td a, td a:hover {color: var(--purple); text-decoration: underline;}

/*! Debug only */
/** {box-shadow: inset 0 0 0 1px rgba(0,0,0,.5);}*/

.checkSize {max-width: 100%; height: 0; width: 0; display: none;}
/*! Large devices (desktops, less than 1200px) */
@media (max-width: 1199px) {
	.checkSize {max-width: 1199px;}
}
/*! Medium devices (tablets, less than 992px) */
@media (max-width: 991px) {
	.checkSize {max-width: 991px;}
	html {font-size: 18px;}
	#header .lang {margin: 0 0 1rem 0;}
	#header .logos img {max-height: 80px; max-width: 20%;}
	#hero .hero-claim h1 {font-size: 3rem;}
	#hero .hero-claim h2 {font-size: 1.5rem;}
	#hero .hero-claim h3 {font-size: 1.5rem;}
	#header .lang a:before {transform: translateY(-2px);}
	#nav li {font-size: .45rem;}
	.pre-footer img {max-height: 70px; max-width: 75%;}
	.modal-outer {max-width: 70%;}
}
/*! Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
	.checkSize {max-width: 767px;}
	html {font-size: 16px;}
	#header {padding: 1rem 0;}
	#header .brand img {width: 75%;}
	#header .brand, #header .logos {text-align: center;}
	#header .logos {margin-top: 1rem; padding: 1rem; border-top: 1px solid var(--lightgray); border-left: 0;}
	#header .logos img {margin: 0 .5rem; width: 25%;}
	#header .special {padding: 0;}
	#nav {position: -webkit-static; position: static;}
	#nav .mobile-nav {display: block; background: var(--gray)!important;}
	#nav ul {display: none; border-top: 1px solid rgba(255,255,255,.5);}
	#nav li {display: block; font-size: .8rem;}
	#nav li a {border-bottom: 1px solid rgba(255,255,255,.2);}
	#nav li:last-child a {border: 0;}
	#hero, #tickets {background-attachment: initial;}
	#hero .hero-claim h1 {font-size: 1.8rem; line-height: 1.5;}
	#hero .hero-claim h2 {font-size: 1rem;}
	#hero .hero-claim h3 {font-size: 1rem;}
	.pre-footer img {max-height: 50px; max-width: 50%;}
	.main-section#about, .main-section#goals {text-align: left;}
	.section-title {text-align: center; margin-bottom: 3rem;}
	.section-title h2 {font-size: 1.8rem;}
	.section-title h3 {font-size: 1.4rem;}
	#offer .offer-item .row > div:first-child {border-right: 0;}
	#offer .offer-item .row > div:last-child .offer-description {border-left: 2px solid var(--purple); padding-left: 15px;}
	#offer .offer-item .offer-title {text-align: left;}
	#speakers:before, #goals:before {background-size: 200%; background-repeat: repeat;}
	#speakers .media {max-width: 50%; border-width: 3px;}
	#speakers .name {font-size: 1rem;}
	#speakers .origin {font-size: .8rem;}
	#organizing .group h3 {font-size: 1.1rem;}
	#organizing .group .name {font-size: .9rem;}
	#organizing .group .origin {font-size: .7rem;}
	.modal-outer {max-width: 90%;}
	th {display: none;}
	td {display: block; border: 0; padding: 0; font-size: .8rem;}
	td:first-child {font-weight: 700;}
	td:last-child {font-style: italic;}
	tr {display: block; padding: .5rem;}
}
/*! Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
	.checkSize {max-width: 575px;}
}