.poppins-extralight {
  font-family: "Poppins", sans-serif;
  font-weight: 200;
  font-style: normal;
}

.poppins-light {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.poppins-light-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.poppins-regular-italic {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: italic;
}



html, body{
height:100%;
width:100%;
padding:0;
margin:0;
}
html {
scroll-behavior: smooth;
}
body{
background: linear-gradient(135deg, #29333F, #1A212A);
background-attachment: fixed;
font-family: "Poppins", sans-serif;
color:#fff;
line-height:1.5;
font-size:20px;
font-weight:200;
}
@media (max-width: 1360px) {
	body{
	font-size:18px;	
	}
}
@media (max-width: 1024px) {
	body{
	font-size:16px;	
	}
}
input,textarea{
font-family: "Poppins", sans-serif;
font-size:1em;
}
fieldset{
padding:0;margin:0;border:0;
}
a{
color:#C8940A;  
}
a:hover{
text-decoration:none;
}
h1, h2, h3, h4, h5, p{padding:0;margin:0;}
ul{padding:0;margin:0;}
ul li{list-style-type:none;padding:0;margin:0;}
.break{display:block;}
.fl{float:left;}
*{box-sizing: border-box;}


h1{
font-size:80px;	
font-weight:600;
color:#fff;
line-height:1.1;
padding:0 0 32px;
}
@media (max-width: 1440px) {
	h1{
		font-size:72px;	
	}
}
@media (max-width: 1280px) {
	h1{
		font-size:64px;	
	}
}
@media (max-width: 700px) {
	h1{
		font-size:56px;	
	}
}
@media (max-width: 610px) {
	h1{
		font-size:48px;	
	}
}
@media (max-width: 480px) {
	h1{
		font-size:36px;	
		padding:0 0 16px;
	}
}
h1 span{
background: -webkit-linear-gradient(45deg, #FFC835, #C8940A 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin: 0;	
}

p.btn a{
height:48px;
line-height:48px;
font-weight:400;
font-size:16px;
color:rgba(255,255,255,0.8);
text-decoration:none;
display:inline-block;
padding:0 24px;
position:relative;
border:1px solid rgba(255,255,255,0.2);
transition: all 1s ease-out;
}
p.btn a:hover {
border:1px solid rgba(255,255,255,0.6);
color:rgba(255,255,255,1);
}

#header{
width:100%;
padding:112px 0;
text-align:center;
}

#header .logo a{
background:url(../img/jpl-invest-logo.svg) no-repeat center center;
background-size:contain;
width:300px;
height:60px;
display:block;
text-indent:-9999px;
margin:0 auto;
}

.hero{
width:100%;
}
.hero .inner{
max-width:1440px;
padding:0 8%;
margin:0 auto;
text-align:center;
font-size:20px;
}
@media (max-width: 768px) {
	.hero .inner{
		padding:0 32px 16px;
	}	
}

.hero .inner p{
color:rgba(255,255,255,0.6);
max-width:720px;
margin:0 auto;
padding:0 0 48px;
}

.section{
width:100%;
}
.section .inner{
max-width:1920px;
padding:8% 4%;
margin:0 auto;
}

@media (max-width: 768px) {
	#header{
		padding:64px 0;
	}	
	#header .logo a{
		background:url(../img/jpl-invest-logo.svg) no-repeat center center;
		background-size:contain;
		width:100%;
		height:48px;
	}	
	.hero .inner{
		font-size:16px;
	}	
	.hero .inner p{
		padding:0 0 32px;
	}	
	.section .inner{
		padding:64px 32px;
		margin:0;
	}	
}
@media (max-width: 480px) {
	#header{
		padding:64px 0;
	}	
	#header .logo a{
		height:40px;
	}		
	.section .inner{
		padding:64px 16px;
		margin:0;
	}		
}

.services .inner{
width:100%;
display:flex;
/*align-items: stretch;*/
flex-wrap: wrap;
justify-content: space-between;
gap:0 40px;
padding:4% 4% 2%;
}
.services .item{
width:calc(20% - 40px);
background:rgba(255,255,255,0.05);
color:rgba(255,255,255,0.5);
font-size:16px;
padding:36px 24px 32px;
font-weight:300;
text-align:center;
box-shadow: 0 60px 60px rgba(0, 0, 0, 0.05);
height:100%;
/*
display: flex;
flex-direction: column; 
align-items: center;    
justify-content: center;
*/
}
.services .item h2{
font-size:20px;
font-weight:600;
padding:16px 0 10px;
color:#fff;
}
.services .item p{
padding:0 0 4px;
}
.services .item p strong{
font-weight:normal;
color:rgba(255,255,255,1);
}
.services .item img{
margin:0;
padding:0;
display:inline-block;
}
@media (max-width: 1780px) {
	.services .inner{
		gap:0 30px;
	}
	.services .item{
		width:calc(20% - 30px);
	}	
}
@media (max-width: 1600px) {
	.services .inner{
		gap:0 20px;
	}
	.services .item{
		width:calc(20% - 20px);
	}	
}
@media (max-width: 1480px) {
	.services .item{
		font-size:14px;
	}
}
@media (max-width: 1280px) {
	.services .inner{
		gap:0 10px;
	}	
	.services .item{
		width:calc(20% - 10px);
	}
}

@media (max-width: 1024px) {
	.services .inner{
		gap:16px 0;
	}		
	.services .item{
		width:100%;
		font-size:18px;
		padding:36px 10% 32px;
	}	
			
}
@media (max-width: 768px) {
	.services .inner{
		padding:8% 32px 0;
	}	
}
@media (max-width: 640px) {
	.services .inner{
		gap:16px 0;
	}		
}
@media (max-width: 480px) {	
	.services .inner{
		padding:16px 16px 0;
	}
	.services .item{
		padding:36px 24px 32px;
		font-size:16px;
	}		
}
.about{
font-size:64px;
font-weight:600;
text-align:center;
font-weight:300;
/*font-style:italic;*/
line-height:1.2;
}
.about .inner{
max-width:1280px;
}
.about .inner p{
padding:0;
background: -webkit-linear-gradient(0deg, #fff, rgba(255,255,255,0.5) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

@media (max-width: 768px) {	
	.about{
		font-size:32px;
	}			
}


.quote{
background:rgba(255,255,255,0.05);
color:#fff;
}
.quote .inner{
max-width:1280px;
font-size:20px;
display:flex;
gap:0 64px;
align-items: center;
}
.quote img{
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
}
.quote p{
padding:0 0 32px;
}
.quote p:last-of-type{
padding:0;
}
.quote .jl{
font-size:16px;
color:rgba(255,255,255,0.5);
}
.quote .jl strong{
font-size:20px;
color:rgba(255,255,255,1);
}
@media (max-width: 768px) {	
	.quote{
		text-align:left;
	}
	.quote .inner{
		font-size:16px;
		align-items: flex-start;
		gap:0 32px;
	}
	.quote img{
		width:120px;
	}		
	.quote .jl{
	font-size:14px;
	}
	.quote .jl strong{
	font-size:16px;
	}
}
@media (max-width: 480px) {	
	.quote{
		text-align:center;
	}
	.quote img{
		display:none;
	}
	.quote p{
		padding:0 0 16px;
	}
	.quote p.jl{
	}
	.quote .jl span{
		width:120px;
		height:120px;
		display:block;
		background:url(../img/josef-luks.png) no-repeat center top;
		background-size: cover;
		border-radius:50%;
		margin:16px auto 16px;
	}
}

.contact .inner{
position:relative;
display:flex;
flex-wrap: wrap;
gap:0 80px;
justify-content: center;
padding:6% 4%;
}
.contact .inner p{
font-size:20px;
padding:0 0 0 40px;
line-height:1.6;
color:rgba(255,255,255,0.6);
}
.contact .inner p strong{
color:#fff;
}
.contact .inner p.address{
background:url(../img/icon-address.svg) no-repeat 4px 3px;
}
.contact .inner p.email{
background:url(../img/icon-email.svg) no-repeat 0 7px;
}
.contact .inner p a{
color:rgba(255,255,255,0.6);
text-decoration:none;
transition: all 1s ease-out;
}
.contact .inner p a:hover{
color:rgba(255,255,255,1);
}
@media (max-width: 768px) {	
	.contact .inner{
		padding:64px 16px;
		gap:0 32px;
	}
	.contact .inner p{
		font-size:16px;		
		padding:0 0 0 36px;
	}	
	.contact .inner p.address{
		width:200px;
		background:url(../img/icon-address.svg) no-repeat 4px 2px;
		margin-bottom:32px;
	}
	.contact .inner p.email{
		background:url(../img/icon-email.svg) no-repeat 0 4px;
		width:200px;
	}		
}

#footer{
padding:0 4%;
width:100%;
margin:0 auto;
color:rgba(255,255,255,0.4);
}
#footer .inner{
border-top:1px solid rgba(255,255,255,0.1);
width:100%;
padding:2% 0;
margin:0 auto;
text-align:center;
font-size:16px;
}

@media (max-width: 768px) {	
	#footer{
		padding:0 32px;
	}
	#footer .inner{
		padding:32px 0;
		margin:0;
		font-size:14px;		
	}	
}