html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
html { font-size: 62.5%; }
body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-size: 1.6rem;
    line-height: 2.8rem;
    color: #fffbfc;
    background: #1c1c23;
    position: relative;
}
.containter-width { width: 80% !important; }
.section-gap { padding: 10rem 0; }
#home {
    height: 100vh;
    background: #1c1c23 url('../img/home_bg.png') center right fixed no-repeat;
    background-size: auto; -webkit-background-size: auto;
    -moz-background-size: auto; -o-background-size: auto;
    position: relative; overflow: hidden;
}
.home-left {
    width: 100%; height: 100vh;
    margin: auto; max-width: 100%;
    display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center;
    -ms-flex-pack:center; justify-content:center;
}
.img-homelogo {
    float: left;
    margin: 0 auto 4.5rem; max-width: 22.5rem; width: 100%;
}
.home_title {
    color: #fff; text-align: left; font-weight: 700;
    font-size: 4.8rem; line-height: 7.2rem;
    margin: 0 0 5rem 0;
}
.home-right_mobile {
    display: none;
}
.img-mobiledevice { margin: 0 auto 3rem; width: 100%; max-width: 600px; }
.home-right_dekstop {
    width: 100%; height: 100vh;
    margin: auto;
    display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center;
    -ms-flex-pack:center; justify-content:center;
}
.devices_display {
    position: relative;
}
.img-iphone {
    position: absolute; z-index: 3;
    bottom: 0; left: 0;
    height: auto; max-width: 20%;
}
.device-desktop { position: relative; }
.img-desktop {
    position: relative; z-index: 2;
    bottom: 0; top: 0;
    height: auto; max-width: 90%; margin: 0 auto;
}
.video-screen {
    position: absolute; z-index: 1;
    bottom: 0; left: 0; right: 0; top: 5%;
    height: auto; width: 82%; margin: 0 auto;
}
.img-ipad {
    position: absolute; z-index: 3;
    bottom: 0; right: 0;
    height: auto; max-width: 30%; margin: 0 auto;
}
.scroll_dekstop { display: block; }
.scroll_mobile { display: none; }
.icon-scroll {
    width: 28px; height: 45px;
    position: relative;
    box-shadow: inset 0 0 0 1px #cfcfcf;
    border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;
}
.icon-scroll:before {
    position: absolute; content: ''; top: 8px;
    width: 6px; height: 6px;
    margin-left: -3px;
    background: #cfcfcf;
    border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px;
    -webkit-animation: 1.5s infinite scroll;
    -moz-animation: 1.5s infinite scroll;
    animation: 1.5s infinite scroll;
}
@-webkit-keyframes scroll {
    0% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translateY(21px); transform: translateY(21px); }
}
@keyframes scroll {
    0% { opacity: 1; }
    100% { opacity: 0; -webkit-transform: translateY(21px); transform: translateY(21px); }
}
.icon-scroll:after {
    position: absolute; content: 'SCROLL DOWN'; left: 38px; top: 10px; white-space: nowrap;
    color: #cfcfcf; font-size: 1.3rem;
}
.title_container { border-left: 4px solid #fcd935; padding: 1rem 0 1rem 4rem; }
.title {
    text-align: left; font-weight: 800; letter-spacing: 0.2rem;
    font-size: 5.0rem; line-height: 5.8rem;
}
.title-even { color: #fff; }
.title-odd { color: #1c1c23; }
.descript_container {
    margin: 4.5rem 0; max-width: 48rem;
    text-align: left; color: #bababd; font-weight: 400;
    font-size: 2.0rem; line-height: 3.7rem;
}
.intro-left {
    width: 100%; height: 100vh;
    background: center no-repeat url('../img/whatiscineobox_leftlogo.png'), #0e0d12 url('../img/whtiscineobox_leftimg.jpg') center right no-repeat;
}
.intro-right {
    width: 100%; height: 100vh;
    padding: 0 30px;
    background: url('../img/whatiscineobox.png') no-repeat right top, linear-gradient(to top right, #5f132f 0%, #1c1c23 40%);
    background-size: contain;
    margin: auto; max-width: 100%;
    display:-ms-flexbox; display:flex;
    -ms-flex-align:center; align-items:center;
    -ms-flex-pack:center; justify-content:center;
}
#offer {
    background: #f8f8ff;
    height: 100% !important;
}
.subsection-offer { margin: 7rem auto; width: 95%; }
.offer-cardbg {
    margin: 2rem auto; width: 100%;
    min-height: 32.5rem;
    padding: 3rem 1.5rem;
    border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.25);
    background: #fff; color: #1c1c23;
}
.img-card_icon { margin: 0 auto; max-width: 7.4rem; width: 100%; }
.card_title {
    margin: 2.5rem auto;
    font-weight: 700; font-size: 1.7rem;
    position: relative;
    display: inline-block;
}
.card_title::after {
    position: absolute; content: '';
    margin: 4rem 0 0; height: 0.3rem; width: 72%; left: 14%;
    background-color: #ffd733;
}
.card_info { margin: 2rem auto 0; }
#contactus {
    background: #1c1c23 url('../img/banner_interested.jpg') left center no-repeat;
    background-size: cover; -webkit-background-size: cover;
    -moz-background-size: cover; -o-background-size: cover;
    position: relative;
    display: flex;
    letter-spacing: 1px;
}
.overlaybg-contact {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #1c1c23; opacity: 0.9;
}
/* <!-- Contact Form --> */
::-webkit-input-placeholder { color: #7b7d80 !important; font-size: 1.8rem; font-weight: 500; }
:-moz-placeholder { color: #7b7d80 !important; font-size: 1.8rem; font-weight: 500; }
::-moz-placeholder { color: #7b7d80 !important; font-size: 1.8rem; font-weight: 500; }
:-ms-input-placeholder { color: #7b7d80 !important; font-size: 1.8rem; font-weight: 500; }
button { outline: none !important; border: none; background: transparent; }
button:hover { cursor: pointer; }
.row_form { margin: 0 0 7%; }
.input-group-addon {
    width: 20%;
    padding: 0.5rem 0.5rem 0.5rem 0;
    border: 0;
    background: transparent;
    text-align: left; color: #fff; font-weight: 500;
    font-size: 1.8rem;
}
.form-control {
    border: none;
    border-bottom: 1px solid #bababd;
    background-color: transparent;
    border-radius: 0px;
    padding: .375rem 0.5rem;
    font-size: 1.8rem;
    font-weight: 400;
    color: #fff !important;
}
.form-control:focus {
    background-color: transparent;
    border-width: 0 0 1px 0; border-style: solid; border-color: #ffd733;
    box-shadow: none;
    color: #fff;
}
.form-control.contact-btnsend {
    border-radius: 25px !important;
    border: none;
}
.contact-btnsend {
    max-width: 16rem; width: 100%;
    background: -moz-linear-gradient(left, #e40046 0%, #ff4146 70%);
    background: -webkit-linear-gradient(left, #e40046 0%, #ff4146 70%);
    background: -o-linear-gradient(left, #e40046 0%, #ff4146 70%);
    background: -ms-linear-gradient(left, #e40046 0%, #ff4146 70%);
    background: linear-gradient(to right, #e40046 0%, #ff4146 70%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e40046', endColorstr='#ff4146', GradientType=0);
    background-color: #e40046;
    border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px;
    font-size: 2.0rem;
    font-weight: 700; line-height: 1.2; color: #ffffff;
    -webkit-transition: all 0.4s; -o-transition: all 0.4s;
    -moz-transition: all 0.4s; transition: all 0.4s;
}
.contact-btnsend i {
    -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s;
}
.contact-btnsend:hover { opacity: 0.80; }
.contact-btnsend:hover i {
    -webkit-transform: translateX(10px); -moz-transform: translateX(10px); -ms-transform: translateX(10px);
    -o-transform: translateX(10px); transform: translateX(10px);
}
#success_msg {
    display: none;
    padding: 10rem 0; font-size: 2.0rem; line-height: 3.2rem;
}
/* */
#footer { background: #0e0d12; padding: 1.5rem 0; }
.img-footer { margin: 0 auto; max-width: 18.6rem; width: 100%; }
/*Extra Large Devices*/
@media screen and (min-width: 1200px) {
    .offer-cardbg { min-height: 37.3rem; }
    .input-group-addon { width: 30% !important; }
    @media screen and (max-width: 1657px) {
        .home_title { font-size: 3.5rem; }
    }
    @media screen and (max-width: 1230px) {
        .home_title { font-size: 3.0rem; }
    }
}
/*Large Devices*/
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .home_title { font-size: 3.5rem; }
    .offer-cardbg { min-height: 38.6rem; }
    .input-group-addon { width: 20% !important; }
}
/*Medium Devices*/
@media screen and (min-width: 768px) and (max-width: 991px) {
    #home { height: 100% !important; }
    .home-left {
        height: auto;
        padding: 5rem 0 0;
    }
    .img-homelogo {
        float: none;
        margin: 0 auto 3.5rem;
    }
    .home_title {
        text-align: center;
        font-size: 4.0rem;
        line-height: 6.4rem;
    }
    .home-right_dekstop {
        height: 100%;
        padding: 0 0 5rem;
    }
    .devices_display {
        max-width: 80%; margin: 0 auto;
    }
    .scroll_dekstop { display: none; }
    .scroll_mobile {
        display: block; margin: 0 auto 5rem;
        position: relative;
        right: 1rem;
    }
    .intro-left { display: none; }
    .intro-right {
        height: 100%;
        padding: 100px 30px;
    }
    .offer-cardbg { min-height: 34.5rem; }
    .input-group-addon { width: 30% !important; }
}
/*Small Devices*/
@media screen and (min-width: 575px) and (max-width: 767px) {
    #home { height: 100% !important; }
    .home-left {
        height: auto;
        padding: 5rem 0 0;
    }
    .img-homelogo {
        float: none;
        margin: 0 auto 3.5rem;
    }
    .home_title {
        text-align: center;
        font-size: 4.0rem;
        line-height: 6.4rem;
    }
    .home-right_mobile {
        display: block;
    }
    .home-right_dekstop {
        height: 100%;
        padding: 0 0 5rem;
        display: none !important;
    }
    .devices_display {
        max-width: 80%; margin: 0 auto;
    }
    .scroll_dekstop { display: none; }
    .scroll_mobile {
        display: block; margin: 0 auto 5rem;
        position: relative;
        right: 1rem;
    }
    .intro-left { display: none; }
    .intro-right {
        height: 100%;
        padding: 100px 30px;
    }
    .input-group-addon { width: 40% !important; font-size: 1.6rem !important; }
    .form-control { font-size: 1.6rem !important; }
    ::-webkit-input-placeholder { font-size: 1.6rem !important; }
    :-moz-placeholder { font-size: 1.6rem !important; }
    ::-moz-placeholder { font-size: 1.6rem !important; }
    :-ms-input-placeholder { font-size: 1.6rem !important; }
    .offer-cardbg { min-height: 30.5rem; }
    @media screen and (max-width: 767px) {
        .offer-cardbg { min-height: 37.0rem; }
    }
    @media screen and (max-width: 581px) {
        .offer-cardbg { min-height: 40.0rem; }
    }
}
/*Extra small Devices*/
@media only screen and (max-width: 576px) {
    #home { height: 100% !important; }
    .home-left {
        height: auto;
        padding: 5rem 0 0;
    }
    .img-homelogo {
        float: none;
        margin: 0 auto 3.5rem;
        max-width: 20.0rem;
    }
    .home_title {
        text-align: center;
        font-size: 3.5rem;
        line-height: 5.9rem;
    }
    .home-right_mobile {
        display: block;
    }
    .home-right_dekstop {
        height: 100%;
        padding: 0 0 5rem;
        display: none !important;
    }
    .devices_display {
        max-width: 80%; margin: 0 auto;
    }
    .scroll_dekstop { display: none; }
    .scroll_mobile {
        display: block; margin: 0 auto 5rem;
        position: relative;
        right: 1rem;
    }
    .title {
        font-size: 3.5rem;
        line-height: 4.3rem;
    }
    .descript_container {
        font-size: 1.8rem;
        line-height: 3.5rem;
    }
    .intro-left { display: none; }
    .intro-right {
        height: 100%;
        padding: 100px 30px;
    }
    .input-group-addon { width: 40% !important; font-size: 1.6rem !important; }
    .form-control { font-size: 1.6rem !important; }
    ::-webkit-input-placeholder { font-size: 1.6rem !important; }
    :-moz-placeholder { font-size: 1.6rem !important; }
    ::-moz-placeholder { font-size: 1.6rem !important; }
    :-ms-input-placeholder { font-size: 1.6rem !important; }
}
@media only screen and (max-width: 462px) {
    .img-homelogo {
        max-width: 17.0rem;
    }
    .home_title {
        text-align: center;
        font-size: 2.5rem;
        line-height: 4.9rem;
    }
}
@media only screen and (max-width: 366px) {
    .img-homelogo {
        max-width: 14.0rem;
    }
    .home_title {
        text-align: center;
        font-size: 2.2rem;
        line-height: 4.6rem;
    }
    .title {
        font-size: 2.5rem;
        line-height: 3.3rem;
    }
    .descript_container {
        font-size: 1.5rem;
        line-height: 2.9rem;
    }
}