/*! HTML5 Boilerplate v7.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 1.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * 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
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

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

html{
  box-sizing: border-box; 
}
*,*:before,*:after{
   box-sizing:inherit;
}
body{
  background-color: #f2f2f2;
  font-family: 'Open Sans', sans-serif;
}

/*--GLOBAL STYLES--*/
.container{
  width:98%;
  margin:0 auto;
}
@media only screen and (min-width:480px){
   .container{
   width:95%;
 }
}
@media only screen and (min-width:768px){
   .container{
   width:90%;
 }
}
@media only screen and (min-width:992px){
   .container{
  width:90%;
  max-width:1100px;
 }
}
.section{
  padding:25px 0;
}
.section p{
  font-size:1.2em;
  text-align:center;
}
h2{
  font-family: 'Oswald', sans-serif;
  font-size:2.4em;
  text-transform: uppercase;
  text-align:center; 
}
h2::after{
  content: '';
  margin: 0 auto;
  background-image: url(../img/separador.png);
  height:20.5px;
  width:100px;
  display:block;
}
h3 {
  font-size:1.8em;
  color:#ff6d00;
  font-family: 'PT Sans', sans-serif;
  margin:0;
}
.btn{
  background-color:#ff6d00;
  padding:10px 40px;
  color:#fff;
  text-transform: uppercase;
  font-weight: bold;
  font-family: 'Oswald',sans-serif;
  text-decoration: none;
  font-size: 1em;
  margin-top:20px;
  display:inline-block;
  transition: all.3s ease;
  border:2px solid #ff6d00;
}
.btn.hollow,
.btn.hollow:hover{
  background-color:#fff;
  color:#ff6d00;
}
.btn.transparent{
   background-color: transparent;
   border: 2px solid #fff;
}
.btn.transparent:hover {
  border: 2px solid #ffd600;
}

ul{
  list-style:none;
  margin:0;
  padding:0;
}
.btn:hover{
  background-color: #e33000;
}
.float-right{
  float:right;
}

/*LETTERING*/
h1.site-name span{
  position:relative;
  text-shadow: none;
}

@media only screen and (min-width: 992px){
  
}

/*HEADER*/
div.hero{
  background-image: url(../img/scanning.jpg);
  height:80vh;
  background-position:top center;
  background-size:cover;
}
div.content-header{
  padding-top:40px;
}
@media only screen and (min-width:768px) {
  div.content-header {
    padding-top: 10px;
  }
}
nav.social-media{
  text-align:center;
}
nav.social-media a{
  color:#ff6d00;
  font-size:2em;
  margin-right:20px;
}
nav.social-media a:last-child{
  margin-right: 0;
}
div.event-info{
  text-align:center;
  color:#ff6d00;
}
@media only screen and (min-width:768px) {
  div.event-info{
     width:70%;
     margin:0 auto;
     margin-top:50px;
  }
}
div.event-info p {
  margin:0;
  display:inline;
  font-size:20px;
  text-transform: uppercase;
}
div.event-info p i {
  color: #fff;
  font-size:2.4rem;
}
p.date {
  float:left;
}
p.city {
  float: right;
  text-align: right;
}
p.slogan {
  text-transform: none!important;
  color:#ff6d00;
}
p.slogan span{
  font-weight:bold;
}
h1.site-name {
  font-size:5.9vw;
  text-transform: uppercase;
  font-family: 'PT Sans', sans-serif;
  color:#ff6d00;
  text-align:center;
}
@media only screen and(min-width:768px){
  h1.site-name{
  font-size: 11.5vw;
  margin:0;
  line-height: 1;
 }
}

/*--BAR--*/
div.bar{
  background-color:#353535;
  padding:15px 0;
}
.fixed{
  position: fixed;
  width:100%;
  top: 0;
  left: 0;
  z-index: 2;
}
div.logo{
  width:60%;
  float:left;
}
div.logo img{
  width:100%;
}
@media only screen and (min-width:768px) {
  div.logo {
  width:33%; 
  }
}

/*--MAIN NAVIGATION--*/
nav.main-navigation{
  display:none;
  width:100%;
}
nav.main-navigation a{
   font-family:'Oswald',sans-serif;
   color:#fff;
   font-size:1.3em;
   text-transform: uppercase;
   text-decoration: none;
   transition:all .6s ease;
   width:100%;
   display:block;
   text-align:center;
   margin-bottom: 15px;
   clear:both;
}

nav.main-navigation a:hover{
   background-color:#ff6d00;
}
nav.main-navigation a:last-child{
   border:2px solid #ff6d00;
   color:#ff6d00;
}
nav.main-navigation a:last-child:hover{
   color:#fff;
}
@media only screen and (min-width: 768px){
  nav.main-navigation{
    width:67%;
    float:right;
    text-align:right;
    display:block; 
  }
 nav.main-navigation a{
   padding:10px 10px;
   width:auto;
   display:inline-block;
   text-align:center;
   margin:0 10px 0 0;
 }
}

/*--MOBIL MENU--*/
div.mobil-menu{
  width:60px;
  display:block;
  float:right;
  text-align:right;
  margin-top:12px;
}
div.mobil-menu:hover{
  cursor:pointer;
}
@media only screen and (min-width:768px){
  div.mobil-menu{
    display:none;
  }
}
div.mobil-menu span{
  height:8px;
  margin-bottom: 6px;
  background-color: #fff;
  display:block;
}

/*--WORKSHOPS*/
section.program{
  position:relative;
}
div.video-container{
max-width: 100%;
overflow-x:hidden; 
}

div.content-program{
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
}
div.event-program{
  background-color:rgba(255,255,255,.3);
  padding: 15px;
  margin-top:80px;
}
@media only screen and (min-width:768px){
  div.event-program{
    width:70%;
  }
}
@media only screen and (min-width:992px){
  div.event-program{
    width:50%;
  }
}
nav.program-menu{
  width:100%;
}
@media only screen and (min-width:768px){
  nav.program-menu{
    display:table;
  }
}
nav.program-menu a {
  display:block;
  text-align:center;
  color:#000;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
  margin-bottom: 5px;
  font-size:1.2em;
  position:relative;
  padding-bottom: 5px;
  border-bottom: 1px solid #ff6d00;
}
nav.program-menu a.active::after {
  position: absolute;
  content:'';
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  height:20px;
  width:30px;
  background-image: url ('../img/arrow.png');
  background-position: top center;
  background-repeat:no-repeat;
  bottom:-18px;
}
@media only screen and (min-width:768px){
  nav.program-menu a {
    display:table-cell;
  }
}
nav.program-menu a i, div.event-detail p i{
  color:#ff6d00;
  font-size:1.6em;
  margin-right:10px;
}
div.hide{
  display:none;
}

/*--EVENT DETAIL--*/
div.event-detail {
  margin-top:20px;
  border-bottom: 1px solid #000;
  padding:0 20px;
  /* Anadi las lineas de abajo width:50%; float:left;*/
  
}
div.event-detail nth-child(2){
  border:none;
}
div.event-detail p{
  margin-bottom: 20px;
  font-size:20px;
}

/*--SITE--*/

ul.sites-list li{
  padding: 3px;
  float:left;
  /*Anadi la linea de abajo width:33.3%;*/
  width:33.3%; 
}
@media only screen and (min-width:480px){
   ul.sites-list li{
   width:50%;
  }
}
@media only screen and(min-width:768px){
   ul.sites-list li{
   width: 33.3%;
  }
}

div.site{
  position:relative;
  overflow:hidden;
}
div.site img{
  max-width:100%;
  -webkit-filter:grayscale(.60);
  -webkit-transition:all .5s ease-in-out;
}
div.site:hover img{
  -webkit-filter:grayscale(0);
  -webkit-transform:scale(1.1);
  transform:rotate(3deg);
}
div.site p{
  position:absolute;
  bottom: 0;
  left:0;
  padding:15px 10px;
  margin:0;
  background-color:rgba(0,0,0,.50);
  width:50%;
  text-align:left;
  font-family: 'Oswald',sans-serif;
  color:#ff6d00;
  -webkit-transition:all .5s ease-in-out;
}
div.site:hover p{
  bottom: -80px;
  opacity:0;
}

/*--COUNTER--*/
.parallax::before {
  width:100%;
  height:100%;
  position: absolute;
  top:0;
  left:0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  -webkit-filter:brightness(.8);
  filter:brightness(.8);
}
div.counter{
  position:relative;
  height:auto;
}
div.counter::before{
  background-image:url(../img/st_project.jpg);
  content:'';
}
ul.event-resume{
  position: relative;
  padding: 120px 0;
}
ul.event-resume li{
  width:50%;
  float: left;
  text-align: center;
  color:#fff;
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 24px;
}
@media only screen and (min-width:768px){
  ul.event-resume li{
    width:25%;
  }
}
p.number{
  color:#ff6d00;
  font-size:2em;
  display:block;
  margin:0 0 10px 0;
  font-family: 'Oswald', sans-serif;
}

/*--PRICE TABLE-- >Selects the firstone */
ul.price-list >li {
   padding: 10px;  
}
@media only screen and (min-width:768px){
  ul.price-list >li{
     float:left;
     width:33.3%;
  }
}

div.price-table{
  border:1px solid #e1e1e1;
  background-color: #fff;
  padding:40px 0;
  text-align:center;
  /*Anadi las lineas de abajo*/
 
}

div.price-table:hover{
  transform: scale(1.1);
  border:1px solid #ff6d00;
  box-shadow: 0px 0px 50px #666;
  transition:all .3s ease;
}
div.price-table ul li{
  font-family: 'PT Sans', sans-serif;
  font-size: 14px;
  margin-bottom: 20px;
  text-transform: uppercase;
  color: #868686;
  line-height: 10px;
}
div.price-table ul li:before{
  font-family: 'FontAwesome';
  display:inline-block;
  vertical-align: top;
  padding: 0 5px;
  font-size: 20px;
  color:green;
  -webkit-font-smoothing:antialiased;
  content:'\f058';
}

div.price-table h3{
  font-family: 'Oswald',sans-serif;
  font-size: 20px;
  text-transform: uppercase;
}
div.price-table p.number{
  color:#000;
  margin: 20px 0;
}

/*--MAP: GOOGLE MAP--*/
div.map{
  height:420px;
  background-color: green;
}

/**+ Testimoniales   **/
div.testimonials {
  padding-bottom: 20px;
}
div.testimonial {
  padding: 5px;
}
@media only screen and (min-width:768px){
  div.testimonial {
    float: left;
    width: 33.3%;
  }
}
blockquote {
  background-color: #ffffff;
  border: 1px solid #e1e1e1;
  position: relative;
  margin: 0 0 10px 0;
  padding-bottom: 20px;
}
blockquote p {
  text-align: justify!important;
  font-size: 1em!important;
  font-family: 'PT Sans', sans-serif;
  padding: 0 20px 0 65px;
}
blockquote p::before {
  content: '\201c';
  position: absolute;
  left: 13px;
  top: 8px;
  font-size: 8rem;
  margin:0;
  padding:0;
  line-height: 1;
  color: #fe4918;
}
footer.info-testimonial {
  padding: 0;
  background-color: transparent;
}
footer.info-testimonial img {
  float: left;
  width: 20%;
  border-radius: 50%;
  margin-left: 20px;
}
footer.info-testimonial cite {
  text-align: left;
  color:#fe4918;
  text-transform: uppercase;
  font-size: 12px;
  padding-top: 20px;
  width: 66.6%;
  float: right;
  font-weight: bold;
  font-style:normal;
}
footer.info-testimonial cite span {
  color: #000000;
  display: block;
  text-transform: none;
  margin-top: 5px;
}

/*--NEWS LETTER--*/
div.newsletter{
  position: relative;
  height:auto;
}
div.newsletter::before{
  background-image: url(../img/blueprint.jpg);
  content:'';
}
div.newsletter .content{
  padding:100px 0;
  color:#fff;
  text-align:center;
  position:relative;
}
div.newsletter .content p{
   font-size:1.2em;
   text-transform: lowercase;
}
div.newsletter .content h3{
  color:#ff6d00;
  text-transform:uppercase;
  font-size:7vw;
  font-family: 'PT Sans', sans-serif;
}

/*--REGRESIVE COUNTER--*/
div.regresive-counter ul li{
  text-transform: uppercase;
  font-family: 'Oswald', sans-serif;
  font-size: 1.6rem;
  text-align:center;
  /*Anadi las lineas de abajo */
  
}
@media only screen and (min-width:768px) {
  div.regresive-counter ul li{
    width:25%;
    float:left;
  }
}

/*--FOOTER--* >
Selecciona primer nivel d hijos*/
footer{
  background-color: #353535;
  padding-top:40px;
  margin-top:20px;
}
footer .container > div{
  color:#fff;
  padding:0px 20px;
  font-size:12px;
  /* Anadi las lineas de abajo */
  
}
@media only screen and (min-width:768px){
  footer .container > div {
    width:33.3%;
    float:left;
  }
}
footer h3{
  color:#fff;
  text-transform: uppercase;
  margin-bottom: 15px;
}
footer h3 span{
  color:#ff6d00;
}
footer .last-tweets li{
  margin-bottom: 10px;
}
footer nav.social-media{
  text-align:left;
}
p.copyright{
  background-color:#2e2e2e;
  padding:15px 0;
  color:#fff;
  margin:20px 0 0 0;
  text-align:center;
}

/* INTERNALS*/
/*CONFERENCE quite el body.conference q habia añadido para ahora hacer el menu dinamico*/
.main-navigation .active{
  border-bottom:2px solid #ff6d00;
}
div.gallery a{
  display:inline-block;
  margin-bottom:5px;
}
/* REGISTRATION*/
form.register h3{
  text-align: center;
  text-transform: uppercase;
  margin:20px 0 0 0;
}
form.register label{
  margin-bottom: 5px;
  font-weight:bold;
}
h4{
  text-align:center;
  text-transform: uppercase;
  border-bottom: 2px solid #fe4918;
  padding-bottom:10px;
  font-size:1.2em;
}
div.box{
  background-color:#fff;
  border:1px solid #e1e1e1;
  padding:10px;
  margin:10px;
}
div.field{
  padding:20px;
}
@media only screen and (min-width:768px){
  div.field{
    float:left;
    width:33.3%;
  }
}
div.packages .price-table:hover{
  transform:none;
  box-shadow: none;
}
div.packages .price-table input{
  clear:both;
  width:100px;
  margin:10px auto 0 auto;
  display:block;
}
.day-content{
  padding:20px;
  /*Importante q se use asi para ocultar los dias q no se seleccionen*/
  display:block; 
}
@media only screen and (min-width:768px){
  .day-content > div{
     float:left;
     width:33.3%;
  }
}
.day-content > div p{
  text-align:left;
}
.day-content > div label{
  display:block;
  margin-bottom:10px;
}
.day-content > div input{
  margin-right:10px;
}
.day-content > div label time{
  color:#fe4918;
  font-weight: bold;
}
.day-content .author{
  font-weight: bold;
  font-family:arial,helvetica;
  text-transform: uppercase;
  font-size:12px;
}

/* SUMMARY REGISTRATION--*/
div.summary p {
  font-size:1.2em;
  text-transform: uppercase;
}
div.summary div.extras{
  float:left;
  width:50;
  padding:30px;
}
div.extras div.order{
  text-align:left;
  margin-bottom: 10px;
}
div.extras div.order input{
  margin:10px 0 0 0;
}
div.summary div.total{
  float:right;
  width:50%;
  padding:30px;
}
div.summary input{
  display:block;
  margin:10px auto; 
}
#product-list{
  background-color:#e1e1e1;
  padding:20px;
  display:none;
}
#sum-total{
  text-align:center;
  font-size: 2em;
  font-weight:bolder;
  color:green;
}
input[disabled].btn {
  opacity: .5;
}

#error{
  clear:both;
  padding:20px;
  text-align:center;
  display:none;
}

/*--CALENDAR--*/
div.calendar h3{
  background-color: #fe9118;
  clear:both;
  color:#fff;
  text-align: center;
  padding: 10px 0;
}
div.calendar::after{
  clear:both;
  display:block;
  content:'';
}
div.day {
  width:50%;
  float:left;
  border:2px solid #e1e1e1;
  transition: all.3s ease;
}
@media only screen and (min-width: 768px) {
  div.day{
  width:33.3%;
  min-height: 240px;
  padding-top: 20px;
  }
}
div.day:hover{
  background-color: #e1e1e1;
  -webkit-transform:scale(1.1);
}
div.day p.title {
  color:#fe9118;
  text-transform: uppercase;
  font-weight: bold;
}
div.day p{
  font-size:1.2em;
}
div.day i{
  color:#ff6d00;
  font-size:1.2em;
}

/*--COLORBOX--*/
div.cboxElement {
  padding:30px!important;
  text-align:center;
}
/** Forms **/
.mesage{
  border:3px solid green;
  padding:10px;
  text-align: center;
}
.mesage.error{
  border:3px solid red;
}
form.login,
form.gig {
  display: block;
}
@media only screen and (min-width:480px) {
  form.login,
  form.gig {
    width: 80%;
    margin: 0 auto;
  }
}

@media only screen and (min-width:768px) {
  form.gig{
    width: 60%;
  }
}
form.login div.field,
form.gig div.field {
  width: 100%;
  float: none;
  padding: 5px;
}
form.gig input,
form.gig textarea {
  width: 100%;
  border:1px solid #cccccc;
}
form.gig input[type="radio"] {
  width: auto;
}
form.gig div.campo {
  margin-bottom: 10px;
}
form.gig input#imagen {
  border:none;
}
form.login label,
form.gig label {
  width: 80px;
  display: inline-block;
}
/** Admin **/
section.admin nav {
  padding: 20px;
  background-color: #fe4918;
  margin-bottom: 30px;
}
section.admin nav a {
  text-decoration: none;
  color: white;
  padding: 5px 10px;
}
section.admin nav a:hover,
#filtros a.active {
  border-bottom: 4px solid white;
}

/* TABLA REGISTRADOS */
table td {
  border: 1px solid #999999;
  border-collapse: collapse;
  padding: 20px;
}
table.registered thead {
  background-color: #353535;
  color: white;
}
table.registered thead th {
  padding: 10px;
}
table.registered tr:nth-child(4n),
table.registered tr:nth-child(4n-1) {
  background-color: #dcdcdc;
}
.result{
  text-align: center;
  padding: 1rem;
  color:#fff;
  max-width: 400px;
  margin: 0 auto;
}
.correct{
  background-color: rgb(2,173,2);
}
  .error{
    background-color:red;
  }
  .payment{
    text-align: center;
  }
  
/* ==========================================================================
   Helper Classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

 .hidden {
  display: none !important;
}

/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
*    causes content to wrap 1 word per line:
*    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/

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

/*
* 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;
  white-space: inherit;
}

/*
* 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: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

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

   @media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important; /* Black prints faster */
        -webkit-box-shadow: none !important;
        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 {
        white-space: pre-wrap !important;
    }
    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;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

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