@charset "UTF-8";

/* CSS Document */

* {
    margin: 0;
    padding: 0
}

body {
    background: #FFF;
    color: #000
}

:root {
    --newsky-red: #E51C28;
    --newsky-blue: #1A92C8;
    --newsky-black: #000000;
    --newsky-grey: #ccc;
}

h1,
h2,
h3,
p,
.remark {
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-size: 32px;
    padding: 0;
}

h2 {
    font-size: 15px;
    color: var(--newsky-blue);
    margin: 8px 0;
}

h3 {
    font-size: 15px;
    padding: 8px 0 8px 0;
}

p {
    font-size: 13px;
    color: #3c3c3c;
}

.desktop-content-container p {
    font-size: 15px;
}

p.remark {
    font-size: 12px;
    color: #6c6c6c;
}

p.related-solution-intro {
    font-size: 13px;
    color: #6c6c6c;
}

h3.related-solution-title {
    color: #6c6c6c;
    font-size: 15px;
    font-style: bold;
    color: #1A92C8;
}

h1>b {
    color: var(--newsky-red)
}

a {
    color: #000;
    font-family: 'Roboto', sans-serif;
    text-decoration: none;
}

ul {
    font-family: 'Roboto', sans-serif;
    list-style: url("../images/li-img-mobile.png");
    padding: 3px 10px 3px 10px;
}

.related-solution {
    padding: 32px 0 16px 0;
}


/*top navigation*/

#page {
    width: 100%;
    padding: 160px 0 0 0;
}


/*#top-nav {
    width: 100%;
    height: 130px;
    display: block;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 10
}

.nav-swiper {
    width: 100%;
    overflow-x: scroll;
}

.nav-swiper ul {
    height: 50px;
    line-height: 50px
}*/

.nav-swiper ul li {
    display: inline-block
}

.nav-swiper ul li a {
    padding: 10px 15px;
    line-height: 30px
}

.nav-swiper ul.nav-main {
    width: 760px;
}

.nav-swiper ul.subnav-product {
    background: #f5f5f5;
    display: flex;
    flex-wrap: wrap;
    height: 70px;
    line-height: unset;
    padding: 11px 20px 0 20px;
}

ul.subnav-product li {
    flex-basis: 50%;
}

ul.subnav-product li a {
    font-size: 11px;
    line-height: unset!important;
    padding: 11px 7px;
}

.nav-swiper ul.nav-main a:active {
    color: var(--newsky-blue);
}

.nav-swiper ul.nav-main a.current-tab {
    color: var(--newsky-blue);
    border-bottom: 3px solid var(--newsky-blue);
}

.nav-swiper ul.subnav-product a:active,
.nav-swiper ul.subnav-product a.current-tab {
    background: var(--newsky-blue);
    color: #fff
}


/*--topnav--*/

#top-nav {
    background: #ffffff;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 99;
}

.nav-swiper {
    width: 100%;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
}

.nav-swiper ul {
    height: 50px;
    line-height: 50px
}

.nav-swiper ul li {
    display: inline-block
}

.nav-swiper ul li a {
    padding: 10px 15px;
    line-height: 30px
}

.nav-swiper ul.nav-main {
    width: 760px;
}

.nav-swiper ul.subnav-solution {
    background: #ebebeb;
    display: flex;
    flex-wrap: wrap;
    height: 105px;
    line-height: unset;
    padding: 11px 20px 0 20px;
}

ul.subnav-solution li {
    flex-basis: 50%;
}

ul.subnav-solution li a {
    font-size: 11px;
    line-height: unset!important;
    padding: 11px 7px;
}


/*.nav-swiper ul.nav-main a:active {
    color: var(--newsky-red);
    border-bottom: 3px solid #ff0000
}*/

.current-tab {
    border-bottom: 3px solid var(--newsky-blue);
}

.current-tab a {
    color: var(--newsky-blue);
}

.current-solution {
    background: var(--newsky-blue);
}

.nav-swiper ul.subnav-solution a:active {
    background: var(--newsky-blue);
}

ul.nav-main {
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
    width: 820px;
    padding: 0;
}

.nav-main li {
    padding: 15px 0;
    list-style: none;
}

.top-nav_2ndTier {
    overflow-x: scroll;
}

#topnav-lang {
    width: 100%;
    height: unset;
}

.logo {
    margin: 0 auto;
    width: 71px;
    height: 20px;
    display: block;
    background: url("../images/logo-newsky.png") no-repeat center center;
    background-size: contain;
    padding-top: 40px;
    z-index: 10;
}

.linkedin-container {
    position: absolute;
    top: 16px;
    right: 30px;
    margin: 9px;
    display: block;
    background: url("../images/linkedin-icon-product.png") no-repeat;
    background-size: contain;
    width: 16px;
    height: 16px;
    z-index: 10;
}

.language {
    position: absolute;
    left: 24px;
    top: 24px;
    z-index: 101;
}

.language a {
    font-weight: bold;
    opacity: 0.5;
    margin: 0 4px;
}

.language a.current-lang {
    opacity: 1!important;
}

ul.nav-main {
    display: flex;
    justify-content: space-between;
    overflow-x: scroll;
    width: 820px;
    padding: 0;
}

.nav-main li {
    padding: 13px 20px;
    list-style: none;
}

.top-nav_2ndTier {
    overflow-x: unset;
}

.nav-swiper {
    width: 100%;
    overflow-x: unset;
}


/*--topnav end--*/


/*dropdown*/

.dropdown-content-solution,
.dropdown-content-product {
    position: absolute;
    left: 0;
    top: 105px;
    background: #ebebeb;
    padding: 11px 20px;
    display: none;
}

.dropdown-content-solution div,
.dropdown-content-product div {
    display: grid;
    padding: 0 0 16px 0;
}

.dropdown-content-solution div:nth-child(3) {
    padding: 0;
}

.dropdown-content-solution div a {
    font-size: 14px;
    font-weight: bold;
    width: 100vw;
    padding: 0 0 8px 0!important;
}

.dropdown-content-product a {
    font-size: 14px;
    font-weight: bold;
    display: block;
    width: 100vw;
    padding: 0 0 8px 0!important;
}

.menuItem-solution:hover>.dropdown-content-solution {
    display: block;
    transition: all .2s ease-in-out;
    z-index: 999;
}

.menuItem-product:hover>.dropdown-content-product {
    display: block;
    transition: all .2s ease-in-out;
    z-index: 999;
}

.menuItem-solution:hover,
.menuItem-product:hover {
    background: #ebebeb;
}


/*dropdown ends*/

.product-logo-container {
    background-size: contain;
    display: block;
    width: 100%;
    height: 110px;
    padding: 0 0 16px 0;
}

.logo-juniper {
    background: url("../images/logo-juniper.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.logo-meraki {
    background: url("../images/meraki-hori.png") no-repeat center center;
    background-size: contain;
    display: block;
}

.logo-sophos {
    background: url("../images/logo-sophos.png") no-repeat center center;
    background-size: contain;
    display: block;
}

.logo-fortinet {
    background: url("../images/logo-fortinet.png") no-repeat center center;
    background-size: contain;
    display: block;
}

.fortinet-infographic-container {
    background-size: contain;
    width: 100%;
    height: 167px;
    display: block;
}

.fortinet-infographic {
    background: url("../images/NewSky_Fortinet_infographic_en.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.fortinet-infographic-tc {
    background: url("../images/NewSky_Fortinet_infographic_tc.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.sophos-infographic-container {
    background-size: contain;
    width: 100%;
    height: 167px;
    display: block;
}

.sophos-infographic {
    background: url("../images/sophos-vt.jpg") no-repeat center center;
    background-size: cover;
    display: block;
}

.sophos-feature {
    padding: 0 0 32px 0;
}


/*footer*/

#footer {
    margin-top: 72px;
    padding-bottom: 40px;
    text-align: center;
    background-color: #F5F5F5;
}

#footer a {
    color: #1A92C8;
}

.footer-fonts p {
    font-size: 10px;
}

hr {
    margin-bottom: 32px;
    width: 100%;
    display: block;
    border: 1px solid #1A92C8;
}

.content-container_footer {
    margin-right: 30px;
    margin-left: 30px;
}


/*footer end*/

#juniper-intro {
    padding-top: 185px;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

#juniper-product {
    width: 100%;
    height: auto;
}

#meraki-intro {
    padding-top: 127px;
    padding-bottom: 40px;
    width: 100%;
    height: auto;
}

#meraki-product {
    width: 100%;
    height: auto;
}

#fortinet-intro {
    padding-top: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

#sophos-intro {
    padding-top: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 40px;
}

.content-container {
    margin-left: 30px;
    margin-right: 30px;
}

.device-img-container {
    border: 1px solid skyblue;
    width: 100%;
    height: 197px;
    background-size: cover;
    display: block;
    margin: 16px 0 16px 0;
}

.juniper-firewalls {
    background: url("../images/juniper-srx1500-firewall.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.juniper-ethernet {
    background: url("../images/juniper-ex4300-ethernet.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.juniper-routers {
    background: url("../images/juniper-mx40-routers.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.meraki-security_appliances {
    background: url("../images/meraki-security-mx100.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.meraki-switch {
    background: url("../images/meraki-switch-ms25024.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}

.meraki-wireless-lan {
    background: url("../images/meraki-wireless-mr20.jpg") no-repeat center center;
    background-size: contain;
    display: block;
}


/*solution container*/

.related-solution-container {
    padding: 0 0 8px 0;
    width: 110px;
    height: 100px;
    text-align: center;
}

.related-solution-icon-container {
    margin: 16px 0;
    height: 50px;
}

.desktop-content-text h3 {
    color: var(--newsky-red);
}

.related-solution-container p {
    font-weight: lighter;
}

.icon-security {
    background: url(../images/solution-security-icon-w.svg) no-repeat center center;
    background-size: contain;
}

.icon-infracstructure {
    background: url("../images/solution-infrastructure-icon-w.svg") no-repeat center center;
    background-size: contain;
    display: block;
}

.icon-wifi {
    background: url("../images/solution-wifi-icon-w.svg") no-repeat center center;
    background-size: contain;
}

.icon-engineering {
    background: url("../images/solution-engineering-icon-w.svg") no-repeat center center;
    background-size: contain
}

.icon-assessment {
    background: url("../images/solution-security-assessment-icon-w.svg") no-repeat center center;
    background-size: contain
}


/*solution container ends*/

p.related-intro {
    font-size: 16px;
}


/*h1 {
    font-size: 60px;
    padding: 40px 0 40px 0;
}*/

#topnav-category {
    text-align: center;
}

.juniper-firewalls-container {
    padding-bottom: 40px;
}

.juniper-ethernet-container {
    padding-bottom: 40px;
}

.juniper-routers-container {
    padding-bottom: 40px;
}

.button-sales {
    border: 1px solid #1A92C8;
    background-color: #1A92C8;
    color: white;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    font-style: bold;
    margin: 16px 0;
    cursor: pointer;
    width: 262px;
}

.button-sales:hover {
    background-color: white;
    color: #1A92C8;
    border: 1px solid #1A92C8;
}

@media screen and (min-width: 1200px) {
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 18px;
        margin: 8px 0;
    }
    h3 {
        font-size: 16px;
        padding: 8px 0 8px 0;
    }
    p {
        font-size: 14px;
        color: #3c3c3c;
    }
    .desktop-content-container p {
        font-size: 16px;
    }
    p.remark {
        font-size: 12px;
        color: #6c6c6c;
    }
    p.related-solution-intro {
        font-size: 14px;
        color: #6c6c6c;
    }
    #page {
        padding-top: 130px;
    }
    #buttons {
        text-align: center
    }
    .brand-intro-content {
        display: flex;
    }
    .desktop-content-container {
        width: 75%;
    }
    #juniper-intro {
        padding-top: 190px;
        padding-bottom: 72px;
        width: 100%;
        height: auto;
    }
    #juniper-product {
        display: grid;
    }
    #meraki-intro {
        padding-top: 190px;
        padding-bottom: 72px;
        width: 100%;
        height: auto;
    }
    #meraki-product {
        width: 100%;
        height: auto;
        padding: 0 0 32px 0;
        display: grid;
    }
    #sophos-product {
        display: grid;
    }
    .content-container {
        width: 1200px;
        margin: 0 auto;
    }
    .device-img-container {
        border: 1px solid skyblue;
        width: 100%;
        height: 275px;
        background-size: contain;
        display: block;
        margin: 16px 0 16px 0;
    }
    .related-solution {
        width: 31%;
    }
    .juniper-firewalls-container {
        width: 31%;
        height: auto;
        float: left;
    }
    .juniper-ethernet-container {
        width: 31%;
        height: auto;
        margin: 0 auto;
    }
    .juniper-routers-container {
        width: 31%;
        height: auto;
        float: right;
    }
    .meraki-security-appliances-container {
        width: 31%;
        height: auto;
        float: left;
    }
    .meraki-switch-container {
        width: 31%;
        height: auto;
        margin: 0 auto;
    }
    .meraki-wireless-lan-container {
        width: 31%;
        height: auto;
        float: right;
    }
    .swiper-container {
        width: 100%;
        height: 900px;
        padding-top: 90px;
    }
    .product-logo-container {
        width: 25%;
        height: 100px;
        margin: 0 0 0 30px;
    }
    .fortinet-infographic-container {
        background-size: contain;
        width: 100%;
        height: 500px;
        display: block;
    }
    .fortinet-infographic {
        background: url("../images/NewSky_Fortinet_infographic_en.jpg") no-repeat top center;
        background-size: contain;
        display: block;
    }
    .sophos-feature-container {
        display: flex;
    }
    .sophos-infographic-container {
        background-size: contain;
        width: 50%;
        height: 440px;
        display: block;
    }
    .sophos-infographic {
        background: url("../images/sophos-vt.jpg") no-repeat center top;
        background-size: contain;
    }
    .sophos-feature {
        width: 50%;
        display: block;
        margin-left: 30px;
    }
    /*header_navigation*/
    #topnav-lang {
        width: 100%;
        height: unset;
    }
    .logo {
        width: 150px;
        height: 30px;
        position: absolute;
        left: 20px
    }
    .language {
        position: absolute;
        left: unset;
        right: 80px;
        top: 24px;
    }
    ul.nav-main {
        width: 900px;
        margin: 0 auto;
        overflow-x: unset;
        position: relative;
    }
    ul.nav-main li {
        position: relative;
        padding: 26px 15px;
    }
    .top-nav_2ndTier {
        overflow-x: unset;
    }
    .nav-swiper {
        width: 100%;
        overflow-x: unset;
    }
    /*dropdown*/
    .dropdown-content-solution,
    .dropdown-content-product {
        position: absolute;
        top: 70px;
        padding: 11px 15px;
        display: none;
    }
    /*.dropdown-content-solution {
        left: 552px;
    }
    .dropdown-content-product {
        left: 755px;
    }*/
    .dropdown-content-solution div,
    .dropdown-content-product div {
        display: grid;
        padding: 0 0 20px 0;
    }
    .dropdown-content-solution div {
        border-right: 1px solid #cccccc;
    }
    .dropdown-content-solution div:nth-child(3) {
        border: none;
    }
    .dropdown-content-solution div a {
        font-size: 14px;
        font-weight: bold;
        padding: 0 0 10px 0!important;
        text-align: left;
        width: 190px;
        margin: 0 15px;
    }
    .dropdown-content-product a {
        font-size: 14px;
        font-weight: bold;
        padding: 0 0 10px 0!important;
        text-align: left;
        width: 190px;
        margin: 0 15px;
    }
    .dropdown-content-solution div a:hover {
        color: var(--newsky-blue);
    }
    .dropdown-content-product a:hover {
        color: var(--newsky-blue);
    }
    .menuItem-solution:hover>.dropdown-content-solution {
        display: flex;
    }
    /*dropdown ends*/
    /*footer*/
    .content-container_footer {
        padding: 32px 0 72px 0;
        width: 1200px;
        margin: 0 auto;
    }
    .footer-link {
        float: left;
    }
    .footer-fonts {
        float: right;
        text-align: right;
    }
    .footer {
        font-size: 10px;
    }
    #footer a {
        color: #1A92C8;
    }
    hr {
        margin-bottom: 16px;
        width: 100%;
        display: block;
        border: 1px solid #1A92C8;
    }
    /*footer end*/
}