/* style.css */

/* Mobile First Please :)  */

html {
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.font-w300 {
    font-weight: 300
}
.font-w400 {
    font-weight: 400
}
.font-w500 {
    font-weight: 500
}
.font-w600 {
    font-weight: 600
}
.font-w700 {
    font-weight: 700
}
.font-w800 {
    font-weight: 800
}

html
 {
    color: #000;
    font-family: "Nunito Sans", sans-serif;
}

.template-base-wrapper {
    width: 100vw;
    overflow: hidden;
}

.emulation-select {
    padding-left: 12px;
    padding-right: 12px;
}

.old-price {
    text-decoration: underline
}

.bg-tilo {
    background: #619F79
}

.bg-red {
    background: #E62F2C
}

.bg-cyan {
    background: #2CC0D3
}

.bg-light-gray {
    background: #F5F5F5
}



.red-gradient {
    background: #bd1522;
    background: -moz-linear-gradient(left,  #bd1522 0%, #e3322a 100%);
    background: -webkit-linear-gradient(left,  #bd1522 0%,#e3322a 100%);
    background: linear-gradient(to right,  #bd1522 0%,#e3322a 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd1522', endColorstr='#e3322a',GradientType=1 );
}

.section-divider {
    height: 50px;
    width: 100%;
}

.section-divider>polygon.transparent {
    opacity: 0;
}

.section-divider>polygon:not(.transparent) {
    fill: #FFF;
}

.section-divider.cyan>polygon:not(.transparent) {
    fill: #2CC0D3;
}

.section-divider.tilo>polygon:not(.transparent) {
    fill: #619F79;
}

.section-divider.red>polygon:not(.transparent) {
    fill: #E62F2C;
}

.section-divider.light-gray>polygon:not(.transparent) {
    fill: #F5F5F5;
}

.section-divider.program>polygon:not(.transparent) {
    fill: url(#program-gradient);
}

#header {
    position: relative;
}

.mkt-update-logo {
    width: 100%;
    margin-bottom: 10px;
}
 

#event-date {
    padding-bottom: 20px;
    position: relative;
    z-index: 2;
}

#event-date img {
    position: relative;
    z-index: 2;
    /* margin-top: -20px; */
}

#event-date::before {
    background: rgb(190, 32, 47);
    background: -moz-linear-gradient(left, rgba(190, 32, 47, 1) 0%, rgba(236, 66, 55, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(190, 32, 47, 1) 0%, rgba(236, 66, 55, 1) 100%);
    background: linear-gradient(to right, rgba(190, 32, 47, 1) 0%, rgba(236, 66, 55, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#be202f', endColorstr='#ec4237', GradientType=1);
    content: '';
    display: block;
    position: absolute;
    left: -3px;
    right: -3px;
    top: -10px;
    z-index: 1;
    transform: rotate(3deg) skew(3deg);
    overflow: hidden;
    bottom: -10px;
}

#map {
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto auto;
    background-color: #f2f1f1;
    width: 100%;
    height: 70vh;
    background-size: cover;
    display: block;
    /* transition: .2s; */
    min-height: 300px;
}

#map.in-view {
    background-image: url(../../assets/img/map_mobile.png)
}

.location-info {
    margin-top: -50px;
    /* background: #fcb00d;
    background: -moz-linear-gradient(left, #fcb00d 0%, #f26e00 100%);
    background: -webkit-linear-gradient(left, #fcb00d 0%, #f26e00 100%);
    background: linear-gradient(to right, #fcb00d 0%, #f26e00 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcb00d', endColorstr='#f4a002', GradientType=1); */
}

.location-info >.uk-card {
    margin-top: -50px;
    border-top: 10px solid #000
}

.section-buy-tickets {
    margin-top: 49px;
}

.section-buy-tickets label {
    color: rgba(0, 0, 0, 0.54);
    font-size: 12px;
    font-weight: 700;
}

.section-buy-tickets .uk-form-custom {
    background: #fff;
}

.saccone-logo {
    top: 20px;
    z-index: 3;
}

.header-background {
    height: 540px;
}

.main-button {
    border: 0;
    background: rgb(190, 32, 47);
    background: -moz-linear-gradient(left, rgba(190, 32, 47, 1) 0%, rgba(236, 66, 55, 1) 100%);
    background: -webkit-linear-gradient(left, rgba(190, 32, 47, 1) 0%, rgba(236, 66, 55, 1) 100%);
    background: linear-gradient(to right, rgba(190, 32, 47, 1) 0%, rgba(236, 66, 55, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#be202f', endColorstr='#ec4237', GradientType=1);
    color: #fff;
    font-weight: 700;
    transition: none
}

.main-button:hover {
    background: #E62F2C;
    color: #fff;
}

.main-title {
    font-weight: 900;
    text-transform: uppercase;
}

.consumidor-reloaded {
    max-width: 300px
}

.consumidor-lead {
    color: #212121;
    font-family: 'Nunito Sans', sans-serif;;
    font-weight: 700;
    font-size: 40px;
    text-transform: uppercase;
    line-height: 1;
}

.consumidor-lead .consumidor-lead-sub {
    position: relative;
    font-size: 48px;
    transform: translateX(60px);
    display: inline-block
}

.consumidor-lead .consumidor-lead-sub::before {
    position: absolute;
    content: "";
    top: 25px;
    left: -10px;
    right: -10px;
    background: #2CC0D3;
    height: 30px;
    z-index: -1;
}

.description-text {
    max-width: 900px;
    margin: 0 auto;
    color: rgba(255, 255, 255, .9);
}

.team-up {
    text-transform: uppercase;
    font-weight: 800;
    color: #e94037;
    transform: rotate(-3deg);
    display: inline-block;
    position: relative;
}

.team-up::after {
    position: absolute;
    content: "";
    top: 10px;
    left: -2px;
    right: -2px;
    background: #F8E71C;
    height: 11px;
    z-index: -1;
}

.team-up-off {
    transform: rotate(3deg);
    color: #FFF;
}

.team-up-off::after {
    background: #1cbecf;
    top: 4px;
    height: 16px;
}



.tilo-logo-section {
    max-width: 350px;
}

.tilo-section {    
    background-image: url(../../assets/img/tilo_bg_line.jpg);
    background-position: right 60px;
    background-repeat: no-repeat;
    background-size: 50%
      
}


.footer-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block
}

.footer-social li {
    display: inline-block;
}

.footer-social li a {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 32px;
    text-align: center;
}

.saccone-site-url {
    color: rgba(255, 255, 255, .7) !important
}

.saccone-site-url:hover {
    color: #FFF !important;
    text-decoration: none
}

.sponsor-type {
    position: relative;
    font-size: 20px;
    color: #4A4A4A;
    font-weight: bold;
    text-transform: uppercase;
    transform: translateX(10px);
    display: inline-block;
    margin-bottom: 20px;
}

.sponsor-type::before {
    position: absolute;
    content: "";
    top: 14px;
    left: -10px;
    right: -10px;
    background: #F8E71C;
    height: 16px;
    z-index: -1;
}

.main-sponsors img {
    max-width: 260px
}

#fast-bar {
    position: sticky;
    left: 0;
    right: 0;
    height: 40px;
    top: calc(100vh - 65px);
    /* top:0; */
    z-index: 10;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 10px;
    background: #efefef;
    text-align: center;
}

/* Order */

.order-page {
    background: #eee;
    padding-bottom: 200px
}

#order-logo {
    max-width: 200px;
}

.resume-order-section {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 20px;
}

.order-ticket {
    background: #f8f8f8;
    position: relative;
}

.order-ticket::before {
    content: '';
    display: block;
    height: 10px;
    background: url(../../assets/img/ticket_border_top.svg) repeat-x;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    width: 100%;
}

.order-ticket::after {
    content: '';
    display: block;
    height: 10px;
    background: url(../../assets/img/ticket_border_bottom.svg) repeat-x;
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    width: 100%;
}

.order-ticket .resume-order-section:last-child {
    border-bottom: 0
}

.order-page .uk-card-footer {
    padding: 30px;
    border-top: 0
}

.uk-card-default .uk-card-header {
    border-bottom: 0;
    padding-bottom: 30px
}

.tiendup-logo {
    width: 90px;
    display: inline-block
}

.logo-saccone {
    width: 300px;
    height: 65px;
}

/* Program */

.steps {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: transparent;
    border: 0;
    margin-top: 50px;
    padding: 0;
}

.steps::before {
    position: absolute;
    content: "";
    height: 4px;
    top: 50%;
    left: 0;
    right: 0;
    background: #d22526;
}


.step {
    position: relative;
    display: block;
    
    text-align: center;
}

.step::before {
    content: '';
    height: 14px;
    width: 14px;
    position: absolute;
    z-index: 1;
    top: 51%;
    left: 50%;
    right: auto;
    background: #d22526;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
}

.step:last-child::before {
    /* border: 3px solid #d22526;
    background: transparent; */
    margin-left: 0px;
}
 

.step.step-up .title {
    top: -25px;
}

.step.step-down .title,
.step.step-down .description {
    top: 105px;
}

.step > * {
    display: block;
    position: relative;
}

.step .title {
    position: relative;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0;
}

.step .title.big {
    font-size: 24px;
    font-weight: 900;
    text-transform: uppercase
}

.step .time {
    position: absolute;
    left: 0;
    right: 0;
    width: 50px;
    color: #d22526;
    font-weight: bold;
    margin: 0 auto;
}

.step .time.time-up {
    top: 10px;
}

.step .time.time-down {
    /* bottom: 10px; */
    bottom: 0;
}