@import url('https://fonts.googleapis.com/css2?family=Saira:wght@300;400;700&display=swap');

section.recoil-feat4 p:last-of-type sup {
    display: none;
}
.liquid-laptop{
	position: relative;
	overflow: hidden;
	background-color: #121212
}
.liquid-laptop .js-scroll.scrolled img{
	animation-delay: 0s;
}
.liquid-laptop-title{	
	position: relative;
	z-index: 1;
	margin: 0 auto;
	text-align: center;
	max-width: 920px;
	margin-top: 40px;
	padding: 40px;
}
.liquid-laptop-title img{
	margin-bottom: 60px;
	width: 400px;
}
.liquid-laptop-title p{
	color: #ffffff;
}
.landing-wrap .liquid-laptop-title h2{
	color: #FFFFFF;
	font-size: 28px;
	line-height: 1.2;
}
.landing-wrap p.terms{
    color: #ffffff;
    font-size: 15px;
    border-radius: 5px;
    text-align: center;
	padding: 30px;
    background: #000000;
}
.landing-wrap .stats-title{
	max-width: 1170px;
	margin:  0 auto;
}
.landing-wrap .stats-title h2{
  font-size: 22px;
}
.game-pass{
    padding: 80px 35px;
}
/***** Gaming Laptops Section***/
.gaming-laptops{
	background-color: #ffffff;
	padding: 40px 0;
}
.landing-wrap .gaming-laptops h2 {
    color: #fff; 
}  
.gaming-laptops-inner{
  	max-width: 1920px;
    margin: 0 auto;
    flex-wrap: wrap;
    min-height: 500px;
    position: relative;
    align-items: flex-start;
}
.landing-button{
    margin-top: 40px;
  	background-color: #ffffff;
    padding: 10px 25px;
    font-family: 'Montserrat-Bold';
    color: #000000;
}
.landing-button:hover {
    background: #e128fe;
    color: #ffffff;
}
.gaming-laptops-info{
    padding: 100px 40px;
    background-color: #000000;
    color: #ffffff;
}
.gaming-laptops-info h2{
 	font-size: 2rem;
    line-height: 1;
    max-width: 400px;
    margin-bottom: 25px;
    color: #fff;
}
.vis-line, .vis-line-2{
    position: static;
  	width: 100%;
    height: 6px;
    background: #e128ff;
   background: linear-gradient(90deg,rgb(222 42 251) 0,rgb(225 40 255) 40%,#e129ff 40%,#df29fc 60%,#3dffee 60%,#3dffee 100%);
}
.vis-line-2{
  display: none;
}

section#main.main-ind{
  padding: 0;
}
.landing-wrap{
  background-color: #ffffff;
}
.recoil-rtx sup, .recoil-battery sup{
   display: none;
}
/**new processor section**/
.recoil-feat2 .landing-container{
	max-width: 1400px;
}
.recoil-feat2 .recoil-feat2-laptop{
	text-align: center;
	margin: 40px 0;
}
.recoil-processor{
	flex-wrap: wrap;
}
.recoil-processor .process-logos img:first-child{
	width: 80px;
}
.recoil-processor .pcs__col-2:first-child{
	margin-bottom: 40px;
}
.recoil-processor img{
 	 width: 120px;
  	margin-bottom: 40px;
}
/**js-scroll**/
.js-scroll.scrolled .intel-amd-logo{
	animation:.5s flicker2;
	animation-fill-mode:forwards;
	animation-delay:.3s
} 
.js-scroll{
	opacity:0;
	transition:opacity .5s
}
.js-scroll.scrolled{
	opacity:1;
	transition-delay:.3s
}
.landing-wrap .js-scroll.scrolled h2{
	animation:.5s flicker2;
	animation-fill-mode:forwards;
	animation-delay:.3s
}
.js-scroll.scrolled .sub-header{
	animation:.5s flicker2;
	animation-fill-mode:forwards;
	animation-delay:.3s
}
.landing-wrap .js-scroll.scrolled p:not(.sub-header){
	animation:fadeUp 1s ease;
	animation-delay:.4s;
	animation-fill-mode:both
}
.js-scroll.scrolled img{
	animation:fadeUp 1s ease;
	animation-delay:.5s;
	animation-fill-mode:both
}
.landing-wrap .recoil-feat4 .js-scroll.scrolled h2,.landing-wrap .recoil-feat6 .js-scroll.scrolled h2{
	animation:.5s flicker;
	animation-delay:.3s
}
.recoil-battery-image .js-scroll{
	transition-delay:.7s
}
.recoil-rtx .js-scroll.scrolled h2,.recoil-rtx .js-scroll.scrolled img,.recoil-rtx .js-scroll.scrolled p{
	animation:none!important
}
.pcs__col-2{
	width:100%
}
.landing-wrap h1{
	color: #ffffff
}
.landing-wrap h1,.landing-wrap h2{
	font-size:40px;
	font-family:saira;
  	font-weight: 700;
	text-transform:uppercase;
	line-height:1.2
}
.landing-wrap h2{
	margin-bottom:20px;
	line-height:1
}
.landing-wrap h1 sup, .landing-wrap h2 sup{
  font-size: 16px;
	top: -.5em;
}
.sub-header{
	font-family:saira;
	text-transform:uppercase;
	font-weight:700;
	font-size:20px
}
.landing-wrap p{
	margin-bottom:10px
}
@keyframes fadeUp{
	0%{
		transform:translateY(30px);
		opacity:0
}
	100%{
		transform:translateY(0);
		opacity:1
}
}
.landing-wrap p:last-child{
	margin:0
}
.landing-wrap sup{
	font-size:10px;
	vertical-align:super
}
.lp2-button{
	animation:fadeUp 1s;
	animation-delay:.6s;
	animation-fill-mode:both;
  	margin-top: 20px;
}
.lp-button,.lp2-button{
	position:relative;
	font-family:saira;
	font-weight:700;
	text-transform:uppercase;
	background-color:rgb(0 246 191);
	border:1px solid rgb(0 246 191);
	padding:10px 25px;
	color:#000;
	cursor:pointer;
	text-align:center;
	display:inline-block;
  	line-height: 1;
}
.lp-button:after,.lp-button:before{
	content:"";
	position:absolute;
	top:0;
	left:0;
	padding:8px 0;
	width:100%;
	-webkit-clip:rect(0,0,0,0);
	clip:rect(0,0,0,0);
	background:#00f5c6;
	color:#000
}
.lp-button:before{
	left:-3px;
	top:-2px;
	text-shadow:2px 0 #00ffe2;
	box-shadow:2px 0 #00ffe2
}
.lp-button:after{
	left:2px;
	bottom:-2px;
	text-shadow:-1px 0 #00ffe2;
	box-shadow:-1px 0 #00ffe2
}
.lp-button:hover{
	background:0 0;
	color:#fff;
	border-color:#00ccb4
}
.lp-button:hover:before{
	animation:glitch-flick 1.5s infinite linear alternate-reverse
}
.lp-button:hover:after{
	-webkit-animation:glitch-flick 2s infinite linear alternate;
	animation:glitch-flick 2s infinite linear alternate
}
@-webkit-keyframes glitch-flick{
	0%{
		clip:rect(-3px,600px,0,0)
}
	5.88235%{
		clip:rect(0,600px,0,0)
}
	11.76471%{
		clip:rect(-3px,600px,0,0)
}
	17.64706%{
		clip:rect(-3px,600px,0,0)
}
	23.52941%{
		clip:rect(100px,600px,100px,0)
}
	29.41176%{
		clip:rect(0,600px,600px,0)
}
	35.29412%{
		clip:rect(100px,600px,0,0)
}
	41.17647%{
		clip:rect(0,600px,600px,0)
}
	47.05882%{
		clip:rect(100px,600px,0,0)
}
	52.94118%{
		clip:rect(-3px,600px,0,0)
}
	58.82353%{
		clip:rect(100px,450px,100px,0)
}
	64.70588%{
		clip:rect(0,450px,0,0)
}
	70.58824%{
		clip:rect(100px,450px,100px,0)
}
	76.47059%{
		clip:rect(0,450px,0,0)
}
	82.35294%{
		clip:rect(0,450px,0,0)
}
	88.23529%{
		clip:rect(0,450px,0,0)
}
	94.11765%{
		clip:rect(0,450px,0,0)
}
	100%{
		clip:rect(0,450px,0,0)
}
}
.landing-container{
	max-width:1920px;
	margin:0 auto
}
.recoil-feat1{
	position:relative;
	background-color:#000;
	text-align:center;
	padding:40px 0;
	overflow:hidden;
	clip-path:polygon(0 0,100% 0,100% 100%,0 90%);
}
.recoil-feat1:after{
	content:'';
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	background-image:url(/images/landing/pcs/recoil/recoil-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center bottom;
  	opacity: 0.7;
	animation:fadeBack 1s;
    animation-fill-mode: forwards;
}
.recoil-feat1 .landing-container{
	max-width:1920px
}
.recoil-feat1 span:first-child{
	font-size:20px;
	vertical-align:super
}
.recoil-feat1-title span:last-child{
	font-weight: 400;
}
.recoil-feat1 h2{
	color:#fff;
	font-size:18px;
	margin-bottom:20px;
	margin-top:10px;
	font-weight:400;
	text-transform:none
}

@keyframes glitch-flick{0%{clip:rect(-3px,600px,0,0)}5.88235%{clip:rect(0,600px,0,0)}11.76471%{clip:rect(-3px,600px,0,0)}17.64706%{clip:rect(-3px,600px,0,0)}23.52941%{clip:rect(100px,600px,100px,0)}29.41176%{clip:rect(0,600px,600px,0)}35.29412%{clip:rect(100px,600px,0,0)}41.17647%{clip:rect(0,600px,600px,0)}47.05882%{clip:rect(100px,600px,0,0)}52.94118%{clip:rect(-3px,600px,0,0)}58.82353%{clip:rect(100px,450px,100px,0)}64.70588%{clip:rect(0,450px,0,0)}70.58824%{clip:rect(100px,450px,100px,0)}76.47059%{clip:rect(0,450px,0,0)}82.35294%{clip:rect(0,450px,0,0)}88.23529%{clip:rect(0,450px,0,0)}94.11765%{clip:rect(0,450px,0,0)}100%{clip:rect(0,450px,0,0)}}

.recoil-feat1-title{
	position:relative;
	animation:.5s flicker;
	animation-delay:.4s;
	animation-fill-mode:forwards;
	margin-bottom:50px;
	opacity:0;
	z-index:1
}
@keyframes flicker{
	0%{
		color:#fff;
		opacity:.2;
		transform:translateY(20px)
}
	15%{
		opacity:1
}
	35%{
		opacity:.2
}
	50%{
		opacity:1
}
	65%{
		opacity:.5
}
	100%{
		opacity:1;
		transform:translateY(0)
}
}
@keyframes flicker2{
	0%{
		opacity:0;
		transform:translateY(20px)
}
	15%{
		opacity:1
}
	35%{
		opacity:.2
}
	50%{
		opacity:1
}
	65%{
		opacity:.5
}
	100%{
		opacity:1;
		transform:translateY(0)
}
}
.recoil-feature-laptops{
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:190px
}
.recoil-feature-laptops .recoil-left,.recoil-feature-laptops .recoil-right{
	position:relative
}
.recoil-feature-laptops .recoil-left{
	top:0;
	left:17%;
	animation:3s slideLeft;
	animation-fill-mode:forwards;
	z-index:1
}
.recoil-feature-laptops .recoil-right{
	top:40px;
	right:17%;
	animation:3s slideRight;
	animation-fill-mode:forwards;
	z-index:2
}
@keyframes slideLeft{
	0%{
		transform:translateY(-5%)
}
	100%{
		transform:translateY(0)
}
}
@keyframes slideRight{
	0%{
		transform:translateY(5%)
}
	100%{
		transform:translateY(0)
}
}
@keyframes fadeBack{
	0%{
		opacity:0
}
	100%{
		opacity:1
}
}
.divider{
	height:34px;
	background-image:url(/images/landing/pcs/recoil/glitch-lines.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat
}
.recoil-feat2{
	padding-top:0;
	padding-right:40px;
	padding-left:40px
}
.recoil-processor-stats{
	display:flex;
	justify-content:space-around;
	align-items:center;
	padding:40px 0
}
.recoil-processor-stats div{
	text-align:center
}
.recoil-processor-stats span{
	animation:.5s flicker2;
	animation-fill-mode:forwards;
	animation-delay:.3s;
	display:block;
	font-size:16px
}
.recoil-processor-stats p{
	font-family:'saira condensed';
	font-weight:700;
	text-transform:uppercase
}
.recoil-ryzen{
	margin-top:40px
}
.recoil-ryzen img{
	width:150px;
	display:block;
	margin:0 auto
}
.recoil-feat2 .pcs__col-2:last-child{
	margin-top:40px
}
.recoil-feat3{
	padding:40px
}
.rtx-logo{
	width:150px;
 	margin-top: 20px;
}
.recoil-rtx{
	max-width:590px;
	margin:0 auto;
	padding:40px
}
.recoil-rtx .col-inner{
	padding:40px 0
}
.recoil-feat4{
	background-color:#04191e
}
.recoil-feat4 h2,.recoil-feat4 p{
	color:#fff
}
.feat4-content{
	padding:40px
}
.recoil-feat5{
	padding:40px
}
.recoil-cooling{
	margin-bottom:40px
}
.recoil-feat5 img{
	margin:0 auto;
	display:block
}
.recoil-feat6{
	position:relative;
	background-color:#000
}
.recoil-feat6 h2,.recoil-feat6 p{
	color:#fff
}
.recoil-battery{
	padding:40px;
	padding-bottom:80px;
	position:relative;
	z-index:2
}
.recoil-battery-image{
	margin-top:-80px
}
.recoil-battery-image:first-child{
	z-index:2
}
.recoil-battery-image img:first-child{
	position:absolute;
	z-index:1
}
.recoil-feat7{
	padding:40px
}
.recoil-feat7 img{
	margin-top:40px
}
@media (min-width:2560px){
	.recoil-feat1:after{
		background-size:auto
}
}

@media (min-width:1170px){
  .liquid-laptop{
		padding: 40px;
		min-height: 1300px;
	}
	.landing-wrap p.terms{
		position: absolute;
		bottom: 60px;
		transform: translateX(-50%);
		left: 50%;
		background-color: transparent;
	}
	.landing-wrap picture {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}
	.landing-wrap picture img {
		object-fit: cover;
		object-position: 50% 0;
		width: 100%;
		height: 100%;
		user-select: none;
	}
  	.gaming-laptops-info{
   	width: 40%;   
  }
  .gaming-laptops-vis{
   	width: 60%; 
    position: absolute;
    display: block;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
  }
  .gaming-laptops-vis img{
    object-fit: cover;
    width: 100%;
    object-position: bottom left;
    height: 100%;
    margin-top: 25px
  }
    .vis-line, .vis-line-2{
   	position: absolute;
    top: 24%;
 	left: -19px;
    width: 15%
}
 .vis-line-2{
     display: block;
    top: 90%;
    left: -13%;
    background: #3fffee;
    height: 4px;
    width: 18%;
  }
  .gaming-laptops-info > div{
 	max-width: 450px; 
  	margin: 0 auto
}
  .gaming-laptops-info h2{
   	font-size: 2.5rem; 
  }
  .recoil-feat2 .recoil-feat2-laptop{
		margin: 80px 0
	}
  .recoil-feat2 .pcs__col-2{
	width: 100%;
  }
  .recoil-feat2 .pcs__col-2 .col-inner{
   	max-width: 960px; 
    text-align: center;
  }
	.recoil-feat2 .pcs__col-2:last-child{
		margin-top:80px
	}
	.recoil-rtx .js-scroll.scrolled:last-child{
		transition-delay:.6s
}
	.recoil-feat5 .js-scroll.scrolled img{
		animation-delay:.6s
}
	.landing-wrap h2{
		font-size:50px
}
	.landing-wrap p{
		font-size:18px
}
	.pcs__col-2{
		width:50%
}
	.pcs__row{
		display:flex;
		align-items:center
}
	.col-inner{
		max-width:650px;
		padding:40px;
		margin:0 auto
}
	.recoil-stat-container{
		max-width:1170px;
		margin:0 auto
}
	.recoil-processor-stats span{
		font-size:20px
}
	.recoil-ryzen{
		width:30%
}
	.recoil-processor-stats{
		width:100%
}
	.recoil-graphics{
		flex-direction:row-reverse
}
	.recoil-graphics .col-inner{
		margin:0 auto
}
	.rtx-logo{
		width:200px;
		margin-top:40px
}
	.recoil-rtx{
		max-width:1260px
}
	.recoil-rtx .pcs__row{
		gap:40px;
		align-items:normal
}
	.recoil-feat4 .pcs__row{
		flex-direction:row-reverse;
		align-items:normal;
		max-width:100%
}
	.recoil-feat4 .pcs__col-2{
		position:relative;
		padding:0;
		z-index:999
}
	.recoil-feat4 .pcs__col-2 img{
		object-fit:cover;
		width:100%;
		height:100%
}
	.feat4-content{
		display:flex;
		flex-direction:column;
		justify-content:center;
}
	.recoil-feat4 .feat4-content:after{
		content:'';
		position:absolute;
		left:0;
		right:-65px;
		top:0;
		bottom:0;
		transform:skewX(-10deg);
		border-right:5px solid #fff;
		background-color:#04191e;
		z-index:-1
}
	.recoil-feat5 .recoil-cooling,.recoil-feat6 .recoil-battery{
		display:flex;
		max-width:1170px;
		margin-left:auto;
		margin-right:auto
}
	.recoil-feat5{
		padding:80px 40px
}
	.recoil-feat5 h2{
		max-width:300px
}
	.recoil-title{
		width:40%
}
	.recoil-content{
		width:60%
}
	.recoil-battery{
		padding:80px 40px
}
	.recoil-battery-image{
		margin-top:-200px
}
}
@media (min-width:800px){
	.landing-wrap h1{
		font-size:50px
}
	.recoil-feat1 h2{
		font-size:25px
}
	.lp-button{
		padding:15px 25px
}
	.recoil-feat1{
		padding:80px 40px
}
}
@media screen and (min-device-width:320px) and (max-device-width:1024px){
	.lp-button{
		background:0 0;
		color:#fff
}
	.glitch:before, .glitch:after{
		animation:none
}
}