/* Website styles -------------------------------------------------- */ 

html { 
	position: relative; 
	min-height: 100%; 
	overflow-x: hidden;
}
		
body { 
	font-family: 'Alice', serif;
	font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
  	line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
	background-color: #ffffff; 
	overflow-x: hidden;
	color: #020A15;
}

.h1, .h2, .h3, h1, h2, h3, p, em, a {
	margin: 0;
	padding: 0;
}

a {
    -webkit-transition: color 150ms linear;
    -moz-transition: color 150ms linear;
    -o-transition: color 150ms linear;
    transition: color 150ms linear;
}

a:focus, a:hover, a:active, button:focus, button:hover, button:active {
    outline:none;
	text-decoration: none;
}

a:focus, a:hover {
	color: #4E90A9 !important;
    -webkit-transition: color 150ms linear;
    -moz-transition: color 150ms linear;
    -o-transition: color 150ms linear;
    transition: color 150ms linear;
}

a:active {
	color: #8CB7CC !important;
    -webkit-transition: color 50ms linear;
    -moz-transition: color 50ms linear;
    -o-transition: color 50ms linear;
    transition: color 50ms linear;
}

@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

@keyframes Gradient {
	0% {
		background-position: 0% 50%
	}
	50% {
		background-position: 100% 50%
	}
	100% {
		background-position: 0% 50%
	}
}

.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 {
	padding-left: 0;
	padding-right: 0;
}

/* --------------- SLIDER / SWIPER ----------------- */

.swiper-container {
    width: 50vw !important;
	height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  	height: calc(var(--vh, 1vh) * 100);
}

.swiper-slide {
	text-align: center;
    /* background-color: #ffffff; */
}

.swipe-adjust-padding {
	padding: 0;
}
	
@media only screen and (max-width : 767px) {
	.swiper-container {
		width: 100vw !important;
		height: 50vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  		height: calc(var(--vh, 1vh) * 50);
	}
}

.swiper-container-vertical>.swiper-pagination-bullets {
	right: 10%;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
	bottom: 10%;
}

/* --------------- FONTS ----------------- */
	
.panel-title {
	font-size: 3em;
	line-height: 1.5em;
	text-align: left;
	color: #020A15;
}

.panel-subtitle {
	font-size: 1.5em;
	line-height: 1.1em;
	padding: 0 0 0 1vw;
	text-align: left;
	color: #020A15;
}
	
p {
	font-size: .9em;
	line-height: 1.4em;
}

.panel-text {
	font-size: .9em;
	line-height: 1.4em;
	padding: 0 0 0 3vw;
	text-align: left;
	color: #020A15;
}
	
.panel-text-full {
	font-size: .9em;
	line-height: 1.4em;
	padding: 0 3vw 0 3vw;
	text-align: left;
	color: #020A15;
}

.ps-list {
	padding: 0 0 0 5vw;
	margin-bottom: 0;
}

.ps-list li {
	padding: 3px 0;
}

/* --------------- LOGOS ----------------- */

.nitrofill-thumb, .permasafe-thumb {
	width: 150px;
	padding-top: 5px;
}

.nitrofill-logo, .permasafe-logo {
	width: 400px;
}

.ads-logo {
	width: 300px;
	padding-bottom: 3%;
}

.nitrofill-claims-logo{
	width: 300px;
}

@media screen and (min-width: 768px) and (max-width: 991px) { 

	.nitrofill-thumb, .permasafe-thumb {
		width: 100px;
	}
	
	.nitrofill-logo, .permasafe-logo {
		width: 325px;
	}
	
	.nitrofill-claims-logo{
		width: 250px;
	}
	
	.ads-logo {
		width: 225px;
	}
}
		  
@media screen and (max-width: 767px) { 
	
	.nitrofill-thumb, .permasafe-thumb {
		width: 125px;
	}
	
	.nitrofill-logo, .permasafe-logo {
		width: 200px;
	}
	
	.nitrofill-claims-logo{
		width: 200px;
	}
	
	.ads-logo {
		width: 150px;
	}
}