/******************** BANNER *******************/
.banner{
    width: 100%; height: 700px; background: url('../images/landing/back_banner.jpg') center no-repeat;
    background-size: cover; overflow: hidden;
}
.banner .row{
    position:relative; height: 100%; display: table;
}
.titleBanner{
    text-align: center; display: table-cell; vertical-align: middle; color: #f7961d;
    text-transform: uppercase; font-weight: 900; font-size: 150px; line-height: 100%;
}
.titleBanner span{
    color: #fff;
}
.contentWork{
    width: 50%; height: 120px; position: absolute;; right: 0px; bottom: 80px;
}
.contentWork h2{
    text-transform: uppercase; color: #fff; letter-spacing: 10px;
    font-weight: 400;
}
.btn-team{
    display: block; color: #fff; width: 220px; margin: 30px 0 0px;
    height: 35px; border-radius: 10px; background:  #f7961d; text-transform: uppercase;
    border: none; font-size: 14px;
}
.girl{
    width: 560px; height: 580px; position: absolute; bottom: -10px;
    left: -20px; background-size: contain; background-position: left bottom;
    background: url('../images/landing/banner/girl.png') no-repeat;
    z-index: 1;
}
/******************** Vacantes Disponibles *******************/
.vacantes{
    position: relative;
}
.vacantes .row{
    padding: 50px 0px;
}
.vacantes01{
    width: 100%; height: auto; text-align: center;
}
.title{
    font-size: 70px; font-weight: 900; color: #f10614;
    line-height: 100%; text-transform: uppercase;
}
.contentV{
    width: 900px; height: auto; margin: 100px auto 30px;
    display: table;
}
.item{
    width: 48%; height: 410px; background: #fff; border-radius: 20px;
    position: relative; box-sizing: border-box; padding: 30px;
    transition: .3s all ease-in-out; -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out; -ms-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out; margin-top: 280px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); text-align: justify;
}
.imgVacant{
    position: absolute; width: 80%; height: 250px; top: -230px;
    left: 10%; background-size: contain !important; background-position: center !important;
    background-repeat: no-repeat !important;
}
.item:hover{
    box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.item span, .section01 span{
    font-weight: 300;
}
.iLeft{
    float: left;
}
.iRight{
    float: right;
}
.center{
    text-align: center; display: block;
}
.titleVacanci{
    color: #f10614; text-transform: uppercase; margin-top: 0px; font-size: 30px;
    line-height: 100%; text-align: center;
}
.item p{
    font-size: 14px;
}
.btn-postularme{
    width: 88%; height: 50px; border-radius: 10px; border: none;
    background: #f10614; color: #fff; position: absolute; cursor: pointer;
    bottom: 30px; left: 6%; font-size: 20px; text-transform: uppercase;
    letter-spacing: 2px; font-weight: 300;
}
/******************** FAQ's *******************/
.contentFaq{
    width: 100%; min-height: 500px; background: #fff; border-radius: 20px;
    margin: 150px auto 200px; position: relative;
    box-shadow: 3px 19px 12px rgba(0,0,0,0.30), 3px 15px 12px rgba(0,0,0,0.22);
}
.section01{
    width: 50%; float: left;  height: 500px; box-sizing: border-box;
    padding: 50px; background-size:cover !important; display: table;
    background-position: center !important; background-repeat: no-repeat !important;
}
.section02{
    border-top-right-radius: 20px; border-bottom-right-radius: 20px;
}
.section01 span{
    text-transform: uppercase;
}
.titleFaq{
    color: #f10614; text-transform: uppercase; margin-top: 5px; font-size: 40px;
    line-height: 100%; font-weight: 700;
}
.faqs{
    width: 90%;  height: auto; margin: 5px auto; min-height: 200px;
}
.faqs ul li{
    font-size:20px; margin: 30px auto; color: #2b2b2b; list-style-image: url('../images/faq/circle.png');
    cursor: pointer;
}
.faqs ul li.active{
    list-style-image: url('../images/faq/circle-active.png');
}
.answer{
    display: table-cell; vertical-align: middle; box-sizing: border-box;
    padding: 0px 50px;
}
.titleFaq02{
    color: #f7961d; text-transform: uppercase;  font-weight: 300;
    font-size: 25px;
}
.txtFaq{
    color: #fff; font-weight: 300;
}
/******************** Decoracion Elementos*******************/
.sushi{
    width: 300px; height: 300px; background: url('../images/faq/sushi.png') center no-repeat;
    background-size: contain; position: absolute; z-index: -1;
    left: -190px; top: 140px;
}
.salsa{
    width: 300px; height: 300px; background: url('../images/faq/salsa.png') center no-repeat;
    background-size: contain; position: absolute; z-index: -1;
    right: -120px; top: -100px;
}
.sushi01{
    width: 300px; height: 500px; background: url('../images/landing/decoration/sushi.png') center no-repeat;
    background-size: contain; position: absolute; z-index: -1;
    left: 0px; top: 50px;
}
.sushi02{
    width: 385px; height: 500px; background: url('../images/landing/decoration/sushi02.png') center no-repeat;
    background-size: contain; position: absolute; z-index: -1;
    right: 80px; top: 0px;
}
.salsa01{
    width: 260px; height: 400px; background: url('../images/landing/decoration/salsa.png') center right no-repeat;
    background-size: contain; position: absolute; z-index: -1;
    right: 0px; top: 20%;
}
/******************** Decoracion *******************/
.textDecoration{
    position: absolute; font-size: 180px; font-weight: 900; text-transform: uppercase;
    left: 0px; bottom: -30px; color: rgba(17,17,17,.3);
    line-height: 100%; z-index: -1;
}
/******************** LOGIN *******************/
.loginContent{
    width: 50%; height: 400px; float: left; display: table;
    background-size: cover !important; background-position: center !important;
    background-repeat: no-repeat !important; box-sizing: border-box;
    padding: 50px;
}
.info{
    display: table-cell; vertical-align: middle; text-align: center;
}
.info h1{
    text-transform: uppercase; color: #fff;
}
.info p{
    width: 70%; margin: 10px auto; color: #fff;
}
.info a{
    display: block; color: #fff; width: 180px; margin: 30px auto 0px;
    height: 35px; border-radius: 10px; background:  #f7961d; text-transform: uppercase;
    line-height: 35px;
}


@media only screen and (min-width: 1200px) and (max-width: 1600px)
{
    /******************** BANNER *******************/
    .banner{
         height: 500px;
    }
    .banner .row{
        width: 75%;
    }
    .titleBanner{
        font-size: 110px;
    }
    .titleBanner span{
        color: #fff;
    }
    .contentWork{
        width: 50%; height: auto; position: absolute;; right:15%; bottom: 40px;
        text-align: center;
    }
    .contentWork h2{
        letter-spacing: 5px; font-size: 14px;
    }
    .btn-team{
        display: block; color: #fff; width: 220px; margin: 10px auto;
        height: 35px; font-size: 13px;
    }
    .girl{
        width: 400px; height: 480px; position: absolute; bottom: -10px;
        left:30px; background-size: contain !important; background-position: left bottom;
    }
    /******************** VACANTES *******************/
    .title{
        font-size: 50px;
    }
    .contentV{
        width: 75%; margin: 50px auto 30px;
    }
    /******************** Decoracion *******************/
    .textDecoration{
        font-size: 120px; line-height: 65px; left: -5px; bottom: 5px;
    }
    /******************** Decoracion Elementos*******************/
    .sushi01{
        width: 250px; height: 450px; left: -120px; top: -70px;
    }
    .sushi02{
        width: 300px; height: 320px; right: -120px; top: 70px;
    }
    .salsa01{
        display: none;
    }
    /******************** FAQ's *******************/
    .contentFaq{
        width: 75%; min-height: 500px; background: none; border-radius: 20px;
        margin: 80px auto ; position: relative;
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
    .section01{
        padding: 25px;
    }
    .back{
        background: #fff; border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .titleFaq{
        color: #f10614; text-transform: uppercase; margin-top: 20px; font-size: 40px;
        line-height: 100%; font-weight: 700;
    }
    .faqs{
        width: 100%;  height: auto; margin: 30px auto 0px; display: table;
    }
    .faqs ul li{
        font-size:16px;
    }
    .answer{
        display: table-cell; vertical-align: middle; box-sizing: border-box;
        padding: 0px 30px;
    }
    .titleFaq02{
        font-size: 20px;
    }
    /******************** LOGIN *******************/
    .loginContent{
        width: 50%; height: 320px; padding: 45px;
    }
    .info h1{
        font-size: 18px;
    }
    .info p{
        width: 80%; font-size: 14px;
    }
    .info a{
        width: 30%; margin: 20px auto 0px; font-size: 12px;
    }
}
@media only screen and (min-width: 1024px) and (max-width: 1199px)
{
    /******************** BANNER *******************/
    .banner{
         height: 450px;
    }
    .banner .row{
        width: 75%;
    }
    .titleBanner{
        font-size: 90px;
    }
    .titleBanner span{
        color: #fff;
    }
    .contentWork{
        width: 50%; height: auto; position: absolute;; right: 0px; bottom: 40px;
        text-align: center;
    }
    .contentWork h2{
        letter-spacing: 5px; font-size: 14px;
    }
    .btn-team{
        display: block; color: #fff; width: 220px; margin: 10px auto;
        height: 35px; font-size: 13px;
    }
    .girl{
        width: 360px; height: 380px; position: absolute; bottom: -10px;
        left: 0px; background-size: contain !important; background-position: left bottom;
    }
    /******************** VACANTES *******************/
    .title{
        font-size: 50px;
    }
    .contentV{
        width: 90%; margin: 50px auto 30px;
    }
    .item{
        height: 400px;
    }
    .btn-postularme{
        width: 88%; height: 40px;
        bottom: 20px; left: 6%; font-size: 16px;
    }
    /******************** Decoracion *******************/
    .textDecoration{
        font-size: 120px; line-height: 65px; left: -5px; bottom: 5px;
    }
    /******************** Decoracion Elementos*******************/
    .sushi01{
        width: 250px; height: 450px; left: -120px; top: -70px;
    }
    .sushi02{
        width: 300px; height: 320px; right: -120px; top: 70px;
    }
    .salsa01{
        display: none;
    }
    /******************** FAQ's *******************/
    .contentFaq{
        width: 90%; min-height: 500px; background: none; border-radius: 20px;
        margin: 80px auto ; position: relative;
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
    .section01{
        padding: 25px;
    }
    .back{
        background: #fff; border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .titleFaq{
        color: #f10614; text-transform: uppercase; margin-top: 20px; font-size: 30px;
        line-height: 100%; font-weight: 700;
    }
    .faqs{
        width: 100%;  height: auto; margin: 30px auto 0px; display: table;
    }
    .faqs ul li{
        font-size:16px;
    }
    .answer{
        display: table-cell; vertical-align: middle; box-sizing: border-box;
        padding: 0px 30px;
    }
    .titleFaq02{
        font-size: 20px;
    }
    /******************** LOGIN *******************/
    .loginContent{
        width: 50%; height: 320px; padding: 45px;
    }
    .info h1{
        font-size: 18px;
    }
    .info p{
        width: 100%; font-size: 12px;
    }
    .info a{
        width: 50%; margin: 20px auto 0px; font-size: 12px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1023px)
{
    /******************** BANNER *******************/
    .banner{
         height: 450px;
    }
    .banner .row{
        width: 95%;
    }
    .titleBanner{
        font-size: 90px;
    }
    .titleBanner span{
        color: #fff;
    }
    .contentWork{
        width: 50%; height: auto; position: absolute;; right: 0px; bottom: 40px;
        text-align: center;
    }
    .contentWork h2{
        letter-spacing: 5px; font-size: 14px;
    }
    .btn-team{
        display: block; color: #fff; width: 220px; margin: 10px auto;
        height: 35px; font-size: 13px;
    }
    .girl{
        width: 360px; height: 380px; position: absolute; bottom: -10px;
        left: 0px; background-size: contain !important; background-position: left bottom;
    }
    /******************** VACANTES *******************/
    .title{
        font-size: 50px;
    }
    .contentV{
        width: 100%; margin: 50px auto 30px;
    }
    .btn-postularme{
        width: 88%; height: 40px;
        bottom: 15px; left: 6%; font-size: 16px;
    }
    /******************** Decoracion *******************/
    .textDecoration{
        font-size: 120px; line-height: 65px; left: -5px; bottom: 5px;
    }
    /******************** Decoracion Elementos*******************/
    .sushi01{
        width: 250px; height: 450px; left: -120px; top: -70px;
    }
    .sushi02{
        width: 300px; height: 320px; right: -120px; top: 70px;
    }
    .salsa01{
        display: none;
    }
    /******************** FAQ's *******************/
    .contentFaq{
        width: 100%; min-height: 500px; background: none; border-radius: 20px;
        margin: 80px auto ; position: relative;
        box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
    }
    .section01{
        padding: 25px;
    }
    .back{
        background: #fff; border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .titleFaq{
        color: #f10614; text-transform: uppercase; margin-top: 20px; font-size: 30px;
        line-height: 100%; font-weight: 700;
    }
    .faqs{
        width: 100%;  height: auto; margin: 30px auto 0px; display: table;
    }
    .faqs ul li{
        font-size:16px;
    }
    .answer{
        display: table-cell; vertical-align: middle; box-sizing: border-box;
        padding: 0px 30px;
    }
    .titleFaq02{
        font-size: 20px;
    }
    /******************** LOGIN *******************/
    .loginContent{
        width: 50%; height: 320px; padding: 45px;
    }
    .info h1{
        font-size: 18px;
    }
    .info p{
        width: 100%; font-size: 12px;
    }
    .info a{
        width: 50%; margin: 20px auto 0px; font-size: 12px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 767px)
{
    /******************** BANNER *******************/
    .banner{
        width: 100%; height: auto;
    }
    .banner .row{
        position:relative; height: 100%; display: table; width: 95%;
        padding: 80px 0px;
    }
    .titleBanner{
        font-size: 70px; line-height: 100%; width: 100%; display: table;
    }
    .contentWork{
        width: 100%; height: 120px; position: relative; right:inherit; bottom: inherit;
        text-align: center;
    }
    .contentWork h2{
        letter-spacing: 5px; font-size: 16px;
    }
    .btn-team{
        display: block; color: #fff; width: 220px; margin: 30px auto;
        height: 35px; border-radius: 10px; background:  #f7961d; text-transform: uppercase;
        border: none; font-size: 12px;
    }
    .girl{
        display: none;
    }
    /******************** VACANTES *******************/
    .title{
        font-size: 40px;
    }
    .contentV{
        width: 100%; margin: 50px auto 30px;
    }
    .item{
        width: 48%; height: 400px; border-radius: 10px; margin-bottom: 60px;
        padding: 15px;
    }
    .item p{
        font-size: 12px;
    }
    .btn-postularme{
        width: 88%; height: 35px;
        bottom: 15px; left: 6%; font-size: 16px;
    }
    /******************** FAQ's *******************/
    .item span, .section01 span{
        font-size: 12px;
    }
    .contentFaq{
        width: 80%; min-height: none; border-radius: 10px;
        margin: 100px auto; height: auto;
    }
    .section01{
        width: 100%; float: none;  height: auto; padding: 20px;
    }
    .section02{
        border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
        border-top-right-radius:0px;
    }
    .titleFaq{
        font-size: 30px; margin: 10px auto;
    }
    .faqs{
        width: 90%; margin: 30px auto 20px; min-height:inherit;
    }
    .faqs ul{
        padding-left: 15px; margin-bottom: 0px;
    }
    .faqs ul li{
        font-size:15px; margin: 20px auto 0px;
    }
    .answer{
        padding: 30px;
    }
    .titleFaq02{
        font-size: 20px; margin-top: 10px;
    }
    /******************** Decoracion *******************/
    .textDecoration{
        font-size: 100px; line-height: 65px;
        left: -5px; bottom: 0px;
    }
    /******************** Decoracion Elementos*******************/
    .sushi01{
        width: 250px; height: 450px; left: -120px; top: -70px;
    }
    .sushi02{
        width: 300px; height: 320px; right: -120px; top: 70px;
    }
    .salsa01{
        display: none;
    }
    /******************** LOGIN *******************/
    .loginContent{
        width: 50%; height: 320px; padding: 25px;
    }
    .info h1{
        font-size: 16px;
    }
    .info p{
        width: 100%; font-size: 10px;
    }
    .info a{
        width: 60%; margin: 20px auto 0px; font-size: 12px;
    }
}
@media only screen and (min-width: 480px) and (max-width: 599px)
{
    /******************** BANNER *******************/
    .banner{
        height: auto;
    }
    .titleBanner{
        font-size: 55px; padding: 10px 0px 0px; display: table;
        width: 100%; margin-bottom: 5px;
    }
    .contentWork{
        width: 100%; height: auto; position: relative; right:inherit; bottom: inherit;
        text-align: center;
    }
    .contentWork h2{
        letter-spacing: 5px; font-size: 14px;
    }
    .btn-team{
        width: 220px; margin: 10px auto 60px;
        height: 35px; border-radius: 10px; font-size: 14px;
    }
    .girl{
        display: none;
    }
    /******************** VACANTES *******************/
    .title{
        font-size: 40px;
    }
    .contentV{
        width: 80%; margin: 50px auto 30px;
    }
    .item{
        width: 100%; height: 400px; border-radius: 10px; margin-bottom: 60px;
        padding: 15px;
    }
    /******************** FAQ's *******************/
    .item span, .section01 span{
        font-size: 12px;
    }
    .contentFaq{
        width: 80%; min-height: none; border-radius: 10px;
        margin: 100px auto; height: auto;
    }
    .section01{
        width: 100%; float: none;  height: auto; padding: 20px;
    }
    .section02{
        border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
        border-top-right-radius:0px;
    }
    .titleFaq{
        font-size: 30px; margin: 10px auto;
    }
    .faqs{
        width: 90%; margin: 30px auto 20px; min-height:inherit;
    }
    .faqs ul{
        padding-left: 15px; margin-bottom: 0px;
    }
    .faqs ul li{
        font-size:15px; margin: 20px auto 0px;
    }
    .answer{
        padding: 30px;
    }
    .titleFaq02{
        font-size: 20px; margin-top: 10px;
    }
    /******************** Decoracion *******************/
    .textDecoration{
        font-size: 90px; line-height: 65px;
        left: -5px; bottom: -5px;
    }
    /******************** Decoracion Elementos*******************/
    .sushi01{
        width: 200px; height: 400px; left: -80px; top: -30px;
    }
    .sushi02{
        width: 285px; height: 320px; right: -120px; top: 70px;
    }
    .salsa01{
        width: 200px; height: 240px;
        right: 0px; top: 20%;
    }
    /******************** LOGIN *******************/
    .loginContent{
        width: 100%; height: 320px; padding: 30px 80px;
        float: none;
    }
    .info h1{
        font-size: 20px;
    }
    .info p{
        width: 100%; font-size: 14px;
    }
    .info a{
        width: 90%; margin: 20px auto 0px;
    }
}
@media only screen and (min-width: 320px) and (max-width: 479px)
{
    /******************** BANNER *******************/
    .banner{
        height: auto;
    }
    .titleBanner{
        font-size: 50px; padding: 50px 0px 0px; display: table;
        width: 100%;
    }
    .contentWork{
        width: 100%; height: auto; position: relative; right:inherit; bottom: inherit;
        text-align: center;
    }
    .contentWork h2{
        letter-spacing: 5px; font-size: 14px;
    }
    .btn-team{
        width: 220px; margin: 30px auto 50px;
        height: 35px; border-radius: 10px; font-size: 14px;
    }
    .girl{
        display: none;
    }
    /******************** VACANTES *******************/
    .title{
        font-size: 30px;
    }
    .contentV{
        width: 100%; margin: 50px auto 30px;
    }
    .item{
        width: 100%; height: 450px; border-radius: 10px; margin-bottom: 30px;
        padding: 15px;
    }
    /******************** FAQ's *******************/
    .item span, .section01 span{
        font-size: 12px;
    }
    .contentFaq{
        width: 100%; min-height: none; border-radius: 10px;
        margin: 100px auto; height: auto;
    }
    .section01{
        width: 100%; float: none;  height: auto; padding: 20px;
    }
    .section02{
        border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;
        border-top-right-radius:0px;
    }
    .titleFaq{
        font-size: 30px; margin: 10px auto;
    }
    .faqs{
        width: 90%; margin: 0 auto;
    }
    .faqs ul{
        padding-left: 15px; margin-bottom: 0px;
    }
    .faqs ul li{
        font-size:14px; margin: 20px auto 0px;
    }
    .answer{
        padding: 0px;
    }
    .titleFaq02{
        font-size: 18px; margin-top: 10px;
    }
    /******************** Decoracion *******************/
    .textDecoration{
        font-size: 80px; line-height: 65px;
        left: -5px; bottom: -5px;
    }
    /******************** Decoracion Elementos*******************/
    .sushi{
        width: 250px; height: 250px; left: -100px; top: 80px;
    }
    .salsa{
        width: 220px; height: 220px;
        right: -60px; top: -100px;
    }
    .sushi01{
        width: 200px; height: 400px; left: -120px; top: -100px;
    }
    .sushi02{
        width: 285px; height: 320px; right: -120px; top: 70px;
    }
    .salsa01{
        width: 200px; height: 240px;
        right: 0px; top: 20%; display: none;
    }
    /******************** LOGIN *******************/
    .loginContent{
        width: 100%; height: 300px; float: none;
        padding: 15px;
    }
    .info h1{
        font-size: 20px;
    }
    .info p{
        width: 100%; font-size: 14px;
    }
    .info a{
        width: 90%; margin: 20px auto 0px;
    }
}