@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;700&display=swap');
@font-face {
font-family: 'Klavika Bold';
src: url('/fonts/Klavika-Bold.woff');
}
@font-face {
font-family: 'Klavika Light';
src: url('/fonts/Klavika-Light.woff');
}
.hidden{
	opacity: 0;
	transition: 1s all;
}
.show{
	opacity: 1;
	animation: slideUp 1s ease;
}
section#main .inner {
    clear: both;
    position: relative;
    z-index: 2;
    background-color: #fff;
}
section#main.main-ind{
  padding: 0;
}
section#main.main-ind .logo-wrapper{
 	max-width: 1170px; 
}
.pcs_col-2 {
    width: 50%;
}
.sm-inner {
    max-width: 1170px;
    margin: 0 auto;
}
.disclaimer{
    color:#7e7e7e;
    margin-top:20px;
    font-size:10px
}
.gpu-section{
    background-color:#cecece;
    color:#000;
    padding:35px;
    border-radius:15px;
    position:relative;
    min-height:650px;
    overflow:hidden
}
div.gpu-section .col-inner{
    max-width:750px
}
.gpu-logo{
    margin-bottom:20px
}
.landing-wrapper .gpu-section h2,.landing-wrapper .gpu-section h3{
    font-family: 'Klavika Bold';
    text-transform:none;
    margin-bottom:15px
}
.landing-wrapper .gpu-section h2{
    font-size:50px;
    line-height:1;
    margin-bottom:10px
}
.landing-wrapper .gpu-section p{
    font-size:20px;
    margin-bottom:20px
}
.landing-wrapper .gpu-section picture img{
    object-position:70% 50%;
    z-index:0
}
.gpu-section .pcs_col-2{
    z-index:1;
    width:45%
}
.landing-wrapper{
    background-color:#fff
}
.landing-wrapper h1,.landing-wrapper h2,.landing-wrapper h3,.landing-wrapper ul{
    font-family:saira;
    font-weight:700;
    text-transform:uppercase;
    line-height:1.2
}
.landing-wrapper h1{
    font-size:50px;
    font-weight:700
}
.landing-wrapper h1>span{
    font-weight:100
}
.landing-wrapper h2{
    font-size:46px;
    margin-bottom:5px
}
.landing-wrapper h3{
    font-size:34px;
    font-weight:400
}
.landing-wrapper ul{
    font-weight:400;
    text-transform:none
}
.landing-wrapper hr{
    margin:40px 0;
    height:2px;
    border:none;
    background:#dfdfdf
}
.landing-wrapper .laptop-title sup{
    font-size:16px!important;
    vertical-align:super
}
.landing-container{
    max-width:1170px;
    margin:0 auto
}
.landing-container .inner{
    background:0 0
}
.landing-wrapper section{
    padding:35px;
    overflow:hidden
}
.landing-wrapper .btn{
    font-family:'Montserrat-Bold';
    background-color:transparent;
    border:1px solid #fff;
    color:#fff;
    padding:10px 20px
}
.landing-wrapper .btn:hover{
    background-color:#fff;
    color:#000
}
.landing-wrapper picture{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0
}
.landing-wrapper picture img{
    object-fit:cover;
    object-position:50% 0;
  	width:100%;
    height:100%;
    user-select:none
}
.lg-inner{
    max-width:1920px;
    margin:0 auto
}
.laptop-sec .vas{
    gap:40px
}
.laptop-sec h3{
    text-transform:none
}
.laptop-stats{
    margin-top:40px
}
.laptop-stats ul{
    display:flex;
    gap:80px;
    margin-top:10px
}
.laptop-stats li{
    font-family:saira;
    font-size:20px;
    font-weight:700
}
.laptop-stats li p{
    font-weight:400
}
.laptop-stats li span{
    display:block;
    font-weight:700;
    font-size:50px;
    margin-bottom:5px;
    color:#ac00cf
}
.laptop-sec-logo{
    width:100px;
    margin-bottom:20px
}
.landing-wrapper .laptop-header{
    position:relative;
    display:flex;
    justify-content:center;
    background-color:#000;
    text-align:center;
    padding:100px 0 0
}
.laptop-header::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    background-image:url(/images/landing/pcs/vanguard-16/vanguard-headline-bg.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    animation:fadeIn 1s;
    animation-fill-mode:forwards
}
.laptop-sub-title{
    background-color:#000;
    color:#fff;
    padding:0 0 95px;
    overflow:hidden
}
.laptop-sub-title p{
    max-width:960px;
    text-align:center;
    margin:0 auto
}
.laptop-sub-title img{
    display:block;
    margin:40px auto
}
.laptop-title{
    padding:0 35px
}
.laptop-header-container{
    display:flex;
    margin:120px 0 50px
}
.laptop-header-container .laptop-pos-fl,.laptop-header-container .laptop-pos-fr{
    position:relative;
    animation-fill-mode:forwards
}
.laptop-header-container .laptop-pos-fl{
    left:10%;
    animation:3s slideLeft;
    top:-5%
}
.laptop-header-container .laptop-pos-fr{
    left:-25%;
    animation:3s slideRight
}
@keyframes slideLeft{
    0%{
        transform:translateX(-5%)
    }
    100%{
        transform:translateX(0)
    }
}
@keyframes slideRight{
    0%{
        transform:translateX(5%)
    }
    100%{
        transform:translateX(0)
    }
}
@keyframes fadeIn{
    0%{
        opacity:0
    }
    100%{
        opacity:1
    }
}
.laptop-header-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    z-index:1
}
.laptop-header a{
    display:inline-block
}
.laptop-header h1,.laptop-header h2,.laptop-header p{
    color:#fff
}
.laptop-header h2{
    font-size:26px;
    margin-bottom:40px;
    font-weight:400;
    text-transform:none
}
.laptop-header p{
    max-width:960px;
    margin:40px 0
}
#laptop-sec1 .vas{
    justify-content:space-around;
    text-align:center;
    flex-wrap:nowrap;
    gap:5px
}
#laptop-sec1 .logo-wrapper>div{
    width:calc(33% - 20px)
}
#laptop-sec2{
    margin-top:100px
}
#laptop-sec3{
    margin-top:80px
}
#laptop-sec3 #graphics-stats ul{
    display:block;
    text-transform:uppercase
}
#laptop-sec3 #graphics-stats p{
    font-size:16px;
    margin:10px 0;
    text-transform:none
}
.gpu-info{
    max-width:1920px;
    margin:0 auto
}
.gpu-info>div{
    background-color:#494949;
    border-radius:15px;
    margin-top:35px;
    padding:35px;
    color:#fff
}
.gpu-info h3{
    font-family:'Klavika Bold';
}
#laptop-sec4{
    background-color:#000;
    color:#fff;
    text-align:center;
    margin-top:100px;
    padding:0
}
.display-holder{
    min-height:1200px;
    position:relative
}
.laptop-sec-title{
    max-width:800px;
    padding:150px 35px 0 35px;
    margin:auto;
    position:relative;
    z-index:1
}
.laptop-sec-title p{
    margin-bottom:15px
}
#laptop-sec6{
    background-color:#000;
    color:#fff
}
#laptop-sec6 .laptop-sec-title{
    text-align:center;
    margin-bottom:60px
}
#laptop-sec6 .ports-info{
    padding:35px;
    background:#111
}
#laptop-sec6 .ports-info img{
    width:1170px;
    margin:20px
}
.ports-info-img{
    text-align:center;
    margin-bottom:80px
}
#laptop-sec6 .ports-info ul{
    column-count:2;
    column-gap:60px;
    max-width:900px;
    margin:0 auto
}
#laptop-sec6 .ports-info li{
    margin-bottom:10px;
    padding-left:28px
}
#laptop-sec6 .ports-info li::before{
    content:"\f192";
    font-family:FontAwesome;
    display:inline-block;
    color:#fff;
    font-size:18px;
    margin-left:-28px;
    margin-right:10px
}
section.laptop-gallery{
    padding:100px 35px
}
.laptop-gallery-container{
    display:grid;
    grid-gap:30px;
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:450px
}
.grid-col{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    background-color:#000;
    padding:35px;
    overflow:hidden
}
.grid-col picture{
    object-fit:cover;
    object-position:0 0;
    width:100%;
    height:100%;
    user-select:none;
    transition:1s ease
}
.grid-col:hover picture{
    opacity:.3
}
.grid-col:hover .gallery-content{
    opacity:1;
    visibility:visible;
    transform:translateY(0)
}
.gallery-content{
    position:relative;
    z-index:1;
    max-width:600px;
    text-align:center;
    color:#fff;
    opacity:0;
    visibility:hidden;
    transition:1s ease;
    transform:translateY(90px)
}
.grid-col-1{
    grid-row:1/3
}
@media screen and (max-width:1170px){
  .image-holder img {
  max-width:100%;
}
    #laptop-sec6 .ports-info img{
        width:800px;
        display:block;
        margin:20px auto
    }
    .laptop-sec .vas{
        flex-wrap:wrap
    }
    .pcs_col-2{
        width:100%
    }
    .laptop-sec .col-inner{
        max-width:100%;
        margin-bottom:40px
    }
    #laptop-sec2{
        margin-top:40px
    }
    .display-holder{
        min-height:1000px
    }
    .laptop-sec-title{
        padding:60px 35px 0 35px
    }
    .laptop-gallery-container{
        grid-auto-rows:350px
    }
    .laptop-gallery-container picture img{
        object-position:20% 0
    }
    #laptop-sec3{
        margin:0
    }
    .gpu-section{
        min-height:500px
    }
    .landing-wrapper .gpu-section h2{
        font-size:40px;
        margin-bottom:20px
    }
}
@media screen and (max-width:960px){
    #laptop-sec4 picture{
        position:absolute
    }
    .landing-wrapper picture{
        position:static
    }
    .landing-wrapper picture img{
        object-fit:cover;
        height:100%;
        user-select:none;
        width:100%
    }
    .laptop-sub-title{
        background-color:#000;
        padding:0 35px 35px
    }
    .laptop-gallery-container{
        grid-template-columns:1fr;
        grid-auto-rows:auto
    }
    .grid-col{
        padding:0;
        display:block
    }
    .gallery-content{
        opacity:1;
        transform:translate(0);
        visibility:visible;
        background:#000;
        max-width:100%;
        padding:35px;
        transition:none
    }
    .grid-col:hover picture{
        opacity:1
    }
    .laptop-gallery-container picture{
        position:static
    }
    .laptop-gallery-container picture img{
        height:auto
    }
    .gpu-section{
        padding:0
    }
    .gpu-section .pcs_col-2{
        width:100%;
        padding:0 35px
    }
    .gpu-logo{
        position:absolute;
        top:20px;
        left:20px;
        max-width:120px
    }
}
@media screen and (max-width:720px){
    .pcs_col-2{
        width:100%
    }
    .landing-wrapper h1{
        font-size:36px
    }
    .landing-wrapper h2{
        font-size:32px
    }
    .laptop-header h2{
        font-size:18px;
        margin-bottom:20px
    }
    .laptop-header p{
        margin:0
    }
    .laptop-stats ul{
        gap:20px
    }
    .laptop-stats li span{
        font-size:34px
    }
    .display-holder{
        min-height:auto
    }
    #laptop-sec4 picture{
        position:static
    }
    #laptop-sec4 picture img{
        height:auto
    }
    #laptop-sec6 .ports-info ul{
        column-count:1
    }
    .gpu-logo{
        max-width:80px
    }
    .laptop-header-container{
        margin:60px 0 90px
    }
    .landing-wrapper .laptop-header{
        padding:50px 0 0
    }
}