/* laptop */
@media (max-width: 1450px) {
    
    section#s01 {height: 800px;}
    section#s01 .interactive-box {width: 500px; padding: 40px;}
    section#s01 .interactive-box .box-title {margin-bottom: 40px;}
    section#s01 .interactive-box .title {font-size: 52px; margin-bottom: 40px;}
    section#s01 .interactive-box p {margin-bottom: 40px;}
    section#s01 .interactive-box-holder:nth-child(1) .interactive-box {margin-right: -60px;}
    section#s01 .interactive-box-holder:nth-child(3) .interactive-box {margin-left: -60px;}
    
    h1, .sectionTitle, .pageTitle {font-size: 68px;}
    
    section#s02 .brands {width: 1050px;}
    section#s02 .brands .white-box {padding: 40px;}
    section#s02 .brands .white-box .sectionTitle {min-height: 140px; margin: 60px 0 30px; font-size: 58px;}
    section#s02 .brands .white-box .brand-nav {margin-top: 80px;}
    
    .sticky-nav a {padding-right: 25px;}
    .sticky-nav a.active {font-size: 16px;}
}

/* md */
@media (max-width: 1350px) {
    section#s04 .col-left {
        width: 650px;
        max-width: 650px;
        margin-bottom: 20px;
    }

    section#s04 > #separator {display: block;}
}

/* md */
@media (max-width: 1200px) {
    
}

/* sm */
@media (max-width: 992px) {
    
    body {background-image: url('../images/mobile_bgr.jpg');}
    
    .stripes {margin-bottom: 50px;}
    .stripes::after {bottom: -20px; width: 50px; height: 2px;}
    
    .sticky-nav {display: none !important;}
    
    h1, .sectionTitle, .pageTitle {font-size: 42px;}
    p {font-size: 14px;}
    
    .white-box {box-shadow: 0 0 50px 0 rgba(0,0,0,.17); border-radius: 5px;}
    
    .box-title {font-size: 13px; margin-bottom: 30px;}
    .box-title:after {bottom: -8px;}
    
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 99999;
        background-color: #fff;
        transition: .5s;
        padding: 10px 20px;
    }
    header .mobileMenu {display: block;}
    header nav {display: none;}
    header .mainLogo img {width: 90px;}
    
    .section-num .section-name {font-size: 24px;}
    .section-num .section-number {font-size: 160px; line-height: 135px;}

    section#s01 .section-num {top: 0; right: 0; bottom: auto;}
    section#s02 .section-num {top: -80px; left: -25px; bottom: auto;}
    section#s03 .section-num {top: 0; right: 0;}
    section#s04 .section-num {top: 0; left: 0; bottom: auto;}
    
    section {padding: 120px 20px;}
    
    section#header #pb_logo {width: 120px; margin-bottom: 10px;}
    section#header h1 {font-size: 36px;}
    
    section#s02 .stats-box .num {font-size: 46px; line-height: normal; margin-bottom: 5px;}
    section#s02 .stats-box .label {font-size: 12px;}
    section#s02 .stats-box .s:nth-child(2n+1)::after {height: 20px;}
    section#s02 .stats-box .num span::after {font-size: 28px;}
    
    section#s02 {background: none;}
    section#s02 .brands {width: auto; padding: 130px 0 20px;}
    section#s02 .brands .white-box {padding: 30px 20px;}
    section#s02 .brands .white-box .sectionTitle {margin: 30px 0 20px; min-height: 70px; font-size: 32px;}
    section#s02 .brands .white-box p {min-height: 110px;}
    section#s02 .brands .white-box .brand-nav {margin-top: 20px;}
    section#s02 .brands .white-box .brand-nav .website-btn {padding: 0 10px;}
    section#s02 .brands .white-box .brand-nav .arrow-btn-holder {padding-right: 50px; margin-top: 5px;}
    section#s02 .brands .white-box .brand-nav .arrow-btn-holder .arrow-btn {width: 26px; height: 26px; background-size: 440%;}
    section#s02 .brands .white-box .brand-nav .arrow-btn-holder::after {top: 14px; width: 45px;}
    section#s02 .brands .white-box .brand-nav .arrow-btn-holder .pages {font-size: 9px;}
    
    .arrow-btn.left {background-position: -91px -18px;}
    .arrow-btn.right {background-position: -69px -18px;}
    
    section#s02 .brands .dots-nav {top: 100%; left: 0; width: 100%; height: auto;}
    section#s02 .brands .dots-nav .dot {display: inline-block; vertical-align: middle; padding: 10px 2px;}
    section#s02 .brands .dots-nav .dot.active {padding: 8px 2px;}
    
    section#s02 .brands .logo-holder {width: 90%; height: 130px; left: 5%; top: 0;}
    section#s02 .brands .logo-holder .logo-box .table {height: 130px;}
    section#s02 .brands .logo-holder .logo-box {border-top-right-radius: 8px; border-bottom-left-radius: 0;}
    section#s02 .brands .logo-holder .logo-box img {max-height: 70%;}
    section#s02 .brands .logo-holder .logo-box .table-cell {width: 100%; height: 130px;}
    
    section#s03 .interactive-map .pin {width: 19px; height: 27px; background-position: -36px -22px; background-size: 700%;}
    section#s03 .interactive-map .pin.active {background-position: -18px -22px;}
    section#s03 .interactive-map .pin-icon {width: 19px; height: 27px; background-position: 0 -22px; background-size: 700%; margin-right: 5px;}
    section#s03 .interactive-map .continent-info {font-size: 10px;}
    
    section#s04 .col-left,
    section#s04 .col-right {width: auto; padding: 0 25px;}
    
    section#s04 .col-left {margin-bottom: 40px; max-width: 500px;}
    
    section#s04 .col-right .long,
    section#s04 .col-right .short {width: 100%;}
    
    section#main {width: 100%; background: none; padding: 50px 45px; box-shadow: none; margin: 100px 0;}
    .custom-table .tc {padding-left: 10px; padding-right: 10px; font-size: 14px;}
    .custom-table .table-row::before {left: -5px;}
    .custom-table .table-row .job-info .half-col {width: 100%; margin: 0 !important;}
    
    footer {padding-top: 60px;}
    footer .top-slope {height: 60px;}
    
    footer nav a {margin: 0 5px;}
    
    footer .copy {line-height: 20px; font-size: 12px;}
    footer .copy span:first-child {display: block; height: 1px; opacity: 0;}
    
    footer .credits {font-size: 12px;}
}

/* xs */
@media (max-width: 768px) {
    
    .def-btn {padding: 0 20px;}
    
    section#s01 {height: 740px; padding-bottom: 50px;}
    section#s01 .boxes-holder {width: 300%;}
    section#s01 .interactive-box-holder {width: 33%; text-align: center;}
    section#s01 .interactive-box {width: 90%; display: inline-block; padding: 30px; margin-left: 0 !important; margin-right: 0 !important;}
    section#s01 .interactive-box .title {font-size: 36px; margin-bottom: 30px;}
    section#s01 .interactive-box p {margin-bottom: 30px;}
    section#s01 .interactive-box .def-btn.gray {display: none;}
    section#s01 .interactive-box:nth-child(1) {margin-right: 0;}
    
    section#s04 .checkbox {margin-bottom: 10px;}
    
    .cookies-box {bottom: 0; width: 100%; right: auto; left: 0;}
    
    footer {padding-top: 40px;}
    footer .top-slope {height: 40px;}
    
}

@media (max-width: 460px) {
    
    
    
}