@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;
}
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; 
}
.disclaimer {
	color:#7e7e7e;
	margin-top:20px;
	font-size:10px;
}
.gpu-section{
	background-color:#000;
	color:#fff;
	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{
	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
}
.gpu-info{
	max-width:1920px;
	margin:0 auto;
  	margin-top: 35px
}
.gpu-info>div{
	background-color:#df1961;
	border-radius:15px;
	padding:35px;
	color:#fff
}
.gpu-info h3{
	font-family:'Klavika Light';
}
.text-gradient{
	-webkit-background-clip:text;
	-moz-background-clip:text;
	-webkit-text-fill-color:transparent;
	-moz-text-fill-color:transparent;
	background:-webkit-linear-gradient(to right,#75ccfd,#8d5ca0);
	background-image:linear-gradient(to right,#75ccfd,#8d5ca0)
}
.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
}
.pcs_col-2{
	width:50%
}
.laptop-sec .col-inner{
	max-width:700px;
	margin-left:auto;
	margin-right: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:#df1961
}
.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;
}
.laptop-header::after{
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-image:url(/images/landing/pcs/valeon-16/valeon-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;
  	margin: 40px 0;
}
.laptop-header-container{
	display:flex;
	margin: 60px 0;
}
.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:40%;
	animation:3s slideLeft;
	filter:drop-shadow(0 0 8px #ff6cfc66)
}
.laptop-header-container .laptop-pos-fr{
	left:-25%;
	animation:3s slideRight;
	filter:drop-shadow(2px 0 8px #ff6cfc66)
}
@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
}
#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:800px;
	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
}
.landing-wrapper .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){
	.arc-info>div:nth-child(1){
		margin-top:35px;
	}
	.arc-info>div{
		margin-top:0px;
	}
	#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;
}
	.landing-wrapper .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 0px;
    }
}
