/*  PRESENTION PAGE   */

/* Section Components */
@font-face
{
    font-family: 'Nexa-Bold';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/Nexa-Bold.otf');
}
@font-face
{
    font-family: 'Nexa-Light';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/Nexa-Light.otf');
}
.slide-a{
    position: absolute;left: 0; z-index: 1:;
}
body {
    background-color: #fff;
    color: #666666;
    font-family: Nexa-Light;
}
.h1, .h2, .h3, .h4, h1, h2, h3, h4, h5, h6 {
    font-family: Nexa-Bold,sans-serif;
    font-weight: 300;
    line-height: 1.5em;
}
.footer-rose {
    background: #e21349;
    background: radial-gradient(ellipse at center,#e21349 0,#e21349 100%);
    background-size: 550% 450%;
}
.footer-rose p {
    color: #fff!important;
}
.footer-rose i {
    color: #fff;
}
.social-buttons .btn i {
    color: #e21349;
}
.social-buttons .btn:hover i {
    color: #fff;
}
.footer-rose h1,.footer-rose h2,.footer-rose h3,.footer-rose h4,.footer-rose h5,.footer-rose h6 {
    color: #fff!important;
}
.btn.btn-fab, .btn.btn-just-icon {
    height: 36px;
    min-width: 36px;
    width: 36px;
}
.example-image-link img:hover {
    opacity: .8;
}
.example-image-link img {
    cursor: -webkit-zoom-in;
    cursor: zoom-in;
    border-radius: 0;
    -webkit-transition: opacity .4s;
    transition: opacity .4s;
}
.font-nexa-bold{font-family: Nexa-Bold;}
.btn{border-radius: .8rem;}
.card-description, .description, .footer-big p{color: #666;}
.btn.btn-white{color: #666;}
.ralla:before{content: '';
    display: block;
    width: 18%;
    height: 2px;
    border-bottom: 4px solid #e21349;
    position: absolute;
    left: 41%;
    bottom: 10px;
}
.btn.btn-white:focus, .btn.btn-white:hover {
    background-color: #e21349;
    color: #fff!important;
}
.radio-1{border-radius: .8rem!important;}
.presentation-page{
  overflow-x: hidden;
}

.section-components .title{
    margin-top: 60px;
    margin-bottom: 5px;
}
.section-components .description{
    margin-top: 35px;
}

.section-components .image-container{
    height: 560px;
    position: relative;
}

.section-components .components-macbook{
    width: auto;
    left: -100px;
    top: 0;
    height: 100%;
    position: absolute;
}

.section-components .table-img,
.section-components .share-btn-img,
.section-components .coloured-card-btn-img,
.section-components .coloured-card-img,
.section-components .social-img,
.section-components .pin-btn-img{
    position: absolute;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
}
.section-components  .coloured-card-img{
    left: 90%;
    top: 11%;
    height: 90px;
    border-radius: 2px;
}
.section-components .social-img{
    left: 70%;
    top: 67%;
    height: 40px;

}
.section-components .coloured-card-btn-img{
    left: 35%;
    top: 2%;
    height: 125px;
    border-radius: 6px;
}
.section-components .table-img{
    left: -13%;
    top: 27%;
    height: 175px;
    border-radius: 2px;
}
.section-components .pin-btn-img{
    left: 0%;
    top: 68%;
    height: 25px;
    border-radius: 3px;
}
.section-components .share-btn-img{
    left: 3%;
    top: -3%;
    height: 25px;

}

/* Section Content */

.section-content .section-description{
    margin-top: 100px;
}
.section-content .title{
    margin-bottom: 5px;
}

.section-content .section-description .title + .description{
    margin-top: 0;
}
.section-content .description{
    margin-top: 35px;
}

.section-content .image-container{
        max-width: 900px;
        position: relative;
}
.section-content .image-container .ipad-img{
    width: 100%;
    transition: transform .6s .9s;
    z-index: 2;
}
.section-content .image-container .area-img,
.section-content .image-container .info-img{
    position: absolute;
    box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
    opacity: 0;
    transform: translate3D(0px, 100px, 0px);
    -webkit-transform: translate3D(0px, 100px, 0px);
}
.section-content .image-container .area-img{
    top: 10%;
    left: 60%;
    height: 300px;
    width: 250px;
    z-index: 2;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}
.section-content .image-container .info-img{
    top: 50%;
    left: 0%;
    height: 200px;
    width: 300px;
    -webkit-transition: all 1s ease-out 0s;
    -moz-transition: all 1s ease-out 0s;
    -o-transition: all 1s ease-out 0s;
    -ms-transition: all 1s ease-out 0s;
    transition: all 1s ease-out 0s;
}
.animated{
    transform: translate3D(0px, 0px, 0px) !important;
    -webkit-transform: translate3D(0px, 0px, 0px) !important;
    opacity: 1 !important;
}


/*  animated images  */

@-webkit-keyframes Floatingy{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(50px, 0);}
    to {-webkit-transform: translate(0, -0px);}
}
@-moz-keyframes Floatingy{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(50px, 0);}
    to {-moz-transform: translate(0, -0px);}
}
@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(50px, 0px);}
    65% {-webkit-transform:translate(0, 0);}
    to {-webkit-transform: translate(50px, -0px);}
}
@-moz-keyframes Floatingx{
    from {-moz-transform:translate(50px, 0px);}
    65% {-moz-transform:translate(0, 0);}
    to {-moz-transform: translate(50px, -0px);}
}


.table-img, .coloured-card-img, .coloured-card-btn-img, .pin-btn-img, .share-btn-img, .social-img{
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-name: Floatingy;
    -moz-animation-name: Floatingy;
    float: left;
}
.table-img{
    -webkit-animation-duration: 14s;
    -moz-animation-duration: 14s;
    -webkit-animation-name: Floatingx;
    -moz-animation-name: Floatingx;
}

.coloured-card-img{
    -webkit-animation-duration: 10s;
    -moz-animation-duration: 10s;
    -webkit-animation-name: Floatingx;
    -moz-animation-name: Floatingx;
}

.coloured-card-btn-img{
    -webkit-animation-duration: 18s;
    -moz-animation-duration: 18s;
}
.pin-btn-img{
    -webkit-animation-duration: 15s;
    -moz-animation-duration: 15s;
}
.share-btn-img{
   -webkit-animation-duration: 11s;
   -moz-animation-duration: 11s;
}
.social-img{
    -webkit-animation-duration: 16s;
    -moz-animation-duration: 16s;
    -webkit-animation-name: Floatingx;
    -moz-animation-name: Floatingx;
}

/* Presentation Page OnScroll Animation */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce {
  animation-name: bounce;
  transform-origin: center bottom;
}

@keyframes flash {
  from, 50%, to {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}
.flash {
  animation-name: flash;
}


.fixed-section{
    top: 90px;
    max-height: 71vh;
    overflow: scroll;
    border-bottom: 1px solid rgba(220,220,220, .8);
}
.fixed-section ul li{
    list-style: none;
}
.fixed-section li a{
    font-size: 14px;
    padding: 2px;
    display: block;
    color: #666666;
}
.fixed-section li a.active{
    color: #00bbff;
}
.fixed-section.float{
    position: fixed;
    top: 100px;
    width: 200px;
    margin-top: 0;
}
.p-7{padding: 6rem;}
.btn.btn-transparent{
    color: #fff;
    background-color: transparent;
    border-color: transparent;
    border:1px solid #fff;
}
.mt-120{margin-top: -120px;}
.nav-rose{
    background: rgb(226, 19, 73);
    color: rgb(255, 255, 255);
    border-radius: 15px;
    padding: 0px 20px;
}
.mt-70{margin-top: -70px;}
.nav-pills-b .nav-item .nav-link.active {
    color: #111;
    background-color:transparent;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,0), 0 13px 24px -11px rgba(156,39,176,0);
}
    /*box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);*/
.nav-pills-b .nav-item .nav-link{background: #ccc;border-radius:0;}
.w-48{width: 48%;}

#images h4{
    margin-bottom: 30px;
}
#javascriptComponents{
    padding-bottom: 0;
}
#javascriptComponents .btn-raised{
    margin: 10px 0px;
}
.navbar .navbar-nav .nav-item .nav-link:hover{color: #ff9880;}
.video-player__video{position: absolute;z-index: 0;-o-object-fit: cover;object-fit: cover;width: 100%;height: 100%;max-width: 100%;}
.navbar .navbar-nav .nav-item .nav-link{font-weight: 500;font-size: 16px;text-transform: none;}
.form-black .form-control {
    display: block;
    border: 1px solid #585857;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #403f3f;
    background-color: #1c1c1b;
    background-clip: padding-box;
    background-image: none;
    border-radius: .8rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-black .form-group {
    margin-bottom: 20px;
    padding: 0;
}
.form-black .is-focused .form-control {
    background-image: none;
    border: 1px solid #e21349;
}
.form-black select, .form-black select.form-control {
    -moz-appearance: button;
    -webkit-appearance: button;
}

.form-border .form-control {
    display: block;
    border: 1px solid #ced4da;
    width: 100%;
    padding: .385rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #403f3f;
    background-color: #fff;
    background-clip: padding-box;
    background-image: none;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-border .form-group {
    margin-bottom: 10px;
    padding: 0;
}
.form-border .is-focused .form-control {
    background-image: none;
    border: 1px solid #e21349;
}
.form-border select, .form-border select.form-control {
    -moz-appearance: button;
    -webkit-appearance: button;
}
.form-border .input-group-prepend {
    margin-right: -1px;
}
.form-border .input-group-append, .form-border .input-group-prepend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.form-border .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-border .input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.form-border .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.form-border .input-group>.custom-file, .form-border .input-group>.custom-select, .form-border .input-group>.form-control {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.active .btn.btn-border,.active .btn.btn-border:hover{background: transparent;border: 1px solid #fff;color: #fff;}
.form-gray .form-control {
    display: block;
    border: 1px solid #d8d8d8;
    width: 100%;
    padding: 1rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #b8b8b8;
    background-color: #d8d8d8;
    background-clip: padding-box;
    background-image: none;
    border-radius: .2rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-gray .form-group {
    margin-bottom: 10px;
    /*padding: 0;*/
}
.form-gray .is-focused .form-control {
    background-image: none;
    border: 1px solid #e21349;
}
.form-gray select, .form-gray select.form-control {
    -moz-appearance: button;
    -webkit-appearance: button;
    padding: 0rem .75rem;
}
.form-gray .input-group-prepend {
    margin-right: -1px;
}
.form-gray .input-group-append, .form-gray .input-group-prepend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.form-gray .input-group>.input-group-prepend>.input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.form-gray .input-group-text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background: #d8d8d8;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.form-gray .input-group>.form-control:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.form-gray .input-group>.custom-file, .form-gray .input-group>.custom-select, .form-gray .input-group>.form-control {
    position: relative;
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-bottom: 0;
}
.h-0{height: 36px!important;}
.disponible{
    padding: 10px 0px;
    text-align:center; 
    font-size: 20px;
    font-weight: 700; 
    border-radius: 30px; 
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background:#c7dbe2;
    color:#fff;
    border:1px solid #fff;
    margin: 0 5px;
}
.disponible:after{
    content: "";
    background: #c7dbe2;
    position: absolute;
    width: 110%;
    top: 47px;
    border-radius: 30px;
    left: -2px;
    height: 6px;
}
.apartado{
    padding: 10px 0px;
    text-align:center; 
    font-size: 20px;
    font-weight: 700; 
    border-radius: 30px; 
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background:#e21349;
    color:#fff;
    border:1px solid #fff;
    margin: 0 5px;
}
.apartado:after{
    content: "";
    background: #e21349;
    position: absolute;
    width: 110%;
    top: 47px;
    border-radius: 30px;
    left: -2px;
    height: 6px;
}
.disponible:hover,.disponible:hover:after{background: #00983a;}
.actives,.actives:after{background: #00983a;}
.selec{
    background:#fff;
    border-radius: 10px;
    padding: 10px 20px;
    z-index: 1;
    position: absolute; 
    top: 26%;
    right: 10%;
    left: 25%;
}
.fon-rose{background: #e21349; border-radius: .8rem;color: #fff; padding: 5px 15px;}

/* Efecto bus*/
.asiento{
    background-image: url(../img/asiento.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 16px;
    text-align:center; 
    font-size: 20px;
    font-weight: 700; 
    color:#fff;
    margin: 5px;
}
.ocupado{
    background-image: url(../img/asiento-ocupado.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: 16px;
    text-align:center; 
    font-size: 20px;
    font-weight: 700; 
    color:#fff;
    margin: 5px;
}

.asiento:hover{background-image: url(../img/asiento-disponibler.png);}
.activo{background-image: url(../img/asiento-disponibler.png);}
.select{
    z-index: 1;
    position: absolute; 
    top: 16%;
    left: 21%;
}
@media (max-width: 1803px) {
.p-7{padding: 4rem;}
}
@media (max-width: 1600px) {
.p-7{padding: 3rem;}
}
@media (max-width: 1300px) {
.p-7{padding: 1rem 3rem;}
}
@media (max-width: 1199px) {
.selec{top: 21%;left: 20%;}
.asiento,.ocupado{padding: 11px;}
}
@media (max-width: 991px) {
  .fixed-section.affix {
    position: relative;
    margin-bottom: 100px;
  }
.asiento,.ocupado{padding: 17px;background-size: auto;}
.selec{right: 5%;top: 18%;}
.select{right: 17%;top: 18%;}
.w-105{width: 105%!important;}
.navbar.navbar-transparent .navbar-toggler .navbar-toggler-icon {background-color: #e21349;}
}
@media (max-width: 767px) {
.mt-70{margin-top: 20px;}
.mt-120{margin-top: 20px;}
.nav-rose{padding: 0;}
.w-105{width: 105%!important;}
.selec{padding: 2px 5px 12px 5px!important}
}
@media (max-width: 740px) {
  .slide-a{
    position: relative;left: 0; z-index: 1:;
    }
}
@media (max-width: 470px) {
.select{top: 16%; left: 18%;}
.asiento, .ocupado {padding: 8px;background-size: contain;}
.selec{
    padding: 0px 10px;
    top: 20%;
    right: 5%;
    left: 5%;
}
.w-105{padding: 18px 0 50px 0;}
.disponible,.apartado{max-width: 6%;font-size: 13px;padding: 1px 0;}
.disponible:after,.apartado:after{width: 112%;top: 27px;left:-1px;}
}
@media (max-width: 363px) {
.select{top: 14%; left: 18%;}
.asiento, .ocupado {padding: 4px;}
}