:root {
	--fp-teal: #10777A;
	--fp-green: #9AD031;
}

/* Base styles - XXL screens (1400px+) */
#slider { 
	background:#FFF;
	border:1px solid #EEE;
	height: 300px;
	min-height: 250px;
    overflow: hidden;
	position: relative; 
    margin:0px 0;
    width: 100%;
 }								  
#mover { 
	position: relative; 
	height: 100%;
	left: 0;
	transition: left 0.4s ease;
}
.slide { 
	padding: 20px 25px; 
	width: 100%;
	height: 100%;
	float: left; 
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
 }
 .slider-text{
 	float: left;
 	width: 52%;
 	padding-left: 2%;
 	padding-right: 2%;
 	box-sizing: border-box;
 }
 .slider-img{
 	float: left;
 	width: 40%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	box-sizing: border-box;
 }
 .slider-img img{
 	max-width: 100%;
 	width: 100%;
 	height: auto;
 	max-height: 240px;
 	object-fit: contain;
	/* position: relative;
	top: 20px; */
 }
 .clear {
	clear: both;
 }
.slide h1{ 
	   font-size:1.8em; 
	   font-weight:bold;
	   color: var(--fp-green); 
	   text-transform:uppercase;
	   margin: 0 0 8px 0;
	   line-height: 1.2;
 }
 .slide h1 span{
 	font-size:2.2em;
 	display: block;
 }
 .slide h2{ 
 	font-size:1.4em;
 	color:#999;
 	font-family: 'ambleregular', sans-serif;
 	margin: 5px 0 10px 0;
 	line-height: 1.3;
 }
  .slide h2 span{ 
  	color:#CD1F25;
  	font-size:1.5em; 
 }
 .slide p {
 	 color:#222;
 	 font-size:0.9em; 
 	 padding:3px 0;	   
 	line-height:1.5em;
 	margin: 5px 0;
 }
 .slide p span{
 	   color:#0B86AA;
 }
 .slide h3{ 
	   font-size:1.1em; 
	   color: #999;  
	   text-transform:uppercase;
	   padding-top:5px;
	   margin: 0;
 }
 .features_list{
	padding-top:5px;
}
.features_list h4{	  
	   font-family: 'ambleregular', sans-serif; 
	   font-size:1.05em; 
	   color:#222;
	   margin: 5px 0;
	   line-height: 1.4;
}
.features_list li{
	font-size:0.85em;
	color:#888888;
	padding:5px 18px;
	background:url(../images/list_img.png) no-repeat 0px center;
	cursor:pointer;
	line-height: 1.4;
}
.features_list li:hover{
	color:#DDD;
}
.button {
	font-size: 1.1em;
	padding:10px 20px;
	text-shadow:0px 1px 1px rgba(94, 94, 94, 0.9);
	margin-top:12px;
	display: inline-block;
	background: linear-gradient(135deg, var(--fp-teal) 0%, var(--fp-green) 100%);
	color: #FFF;
	text-decoration: none;
	border-radius:5px;
	outline: 0;
	  -webkit-transition:all 0.2s linear;
    -moz-transition:all 0.2s linear;
    -o-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.button:hover {
	text-shadow: 0px 1px 1px #000;
	background: linear-gradient(135deg, var(--fp-green) 0%, var(--fp-teal) 100%);
	 -webkit-transform:scale(1.05);
    -moz-transform:scale(1.05);
    -ms-transform:scale(1.05);
    -o-transform:scale(1.05);
    transform:scale(1.05);
}
.button-icon-download{
	margin-left:10px;
}
#slider-stopper { 
	position: absolute; 
	top: 1px; 
	right: 20px; 
	background: #3E3F41; 
	color: white;
    padding: 3px 8px; 
    font-size: 10px; 
    text-transform: uppercase; 
    z-index: 1000;
	cursor: pointer;
 }

/* Responsive breakpoints */

/* XL screens (1200px - 1399px) */
@media only screen and (max-width: 1399px) {
	#slider {
		height: 280px;
	}
	.slide {
		padding: 18px 22px;
	}
	.slide h1 {
		font-size: 1.6em;
	}
	.slide h1 span {
		font-size: 2em;
	}
	.slide h2 {
		font-size: 1.3em;
	}
	.slider-img img{
		max-height: 220px;
	}
	.features_list h4 {
		font-size: 1em;
	}
	.button {
		font-size: 1em;
		padding: 9px 18px;
	}
}

/* LG screens (992px - 1199px) */
@media only screen and (max-width: 1199px) {
	#slider {
		height: 260px;
	}
	.slide {
		padding: 15px 20px;
	}
	.slide h1 {
		font-size: 1.4em;
	}
	.slide h1 span{
		font-size: 1.8em;
	}
	.slide h2{
		font-size: 1.2em;
		margin: 4px 0 8px 0;
	}
	.slider-text {
		width: 50%;
	}
	.slider-img {
		width: 42%;
	}
	.slider-img img{
		max-height: 200px;
	}
	.features_list h4{
		font-size: 0.95em;
	}
	.button {
		font-size: 0.95em;
		padding: 8px 16px;
		margin-top: 10px;
	}
}

/* MD screens (768px - 991px) */
@media only screen and (max-width: 991px) {
	#slider {
		height: 240px;
	}
	.slide {
		padding: 12px 18px;
	}
	.slide h1 {
		font-size: 1.3em;
		margin: 0 0 6px 0;
	}
	.slide h1 span{
		font-size: 1.6em;
	}
	.slide h2{
		font-size: 1.1em;
		margin: 3px 0 6px 0;
	}
	.slide p {
		font-size: 0.8em;
		line-height: 1.4em;
	}
	.slider-text {
		width: 48%;
	}
	.slider-img {
		width: 44%;
	}
	.slider-img img{
		max-height: 180px;
	}
	.features_list {
		padding-top: 3px;
	}
	.features_list h4{
		font-size: 0.9em;
		margin: 3px 0;
	}
	.features_list li{
		font-size: 0.75em;
		padding: 3px 15px;
	}
	.button {
		font-size: 0.9em;
		padding: 7px 14px;
		margin-top: 8px;
	}
}

/* SM screens (576px - 767px) */
@media only screen and (max-width: 767px) {
	#slider {
		height: auto;
		min-height: 320px;
	}
	.slide {
		display: block;
		padding: 15px;
		height: auto;
		min-height: 320px;
	}
	.slider-text{
		width: 100%;
		float: none;
		padding: 0;
		margin-bottom: 12px;
		text-align: center;
	}
 	.slider-img{
		float: none;
		text-align: center;
		width: 100%;
		margin-top: 10px;
	}
	.slider-img img{
		max-height: 280px;
		width: auto;
		max-width: 80%;
	}
	.slide h1 {
		font-size: 1.3em;
		margin: 0 0 6px 0;
	}
	.slide h1 span{
		font-size: 1.5em;
	}
	.slide h2 {
		font-size: 1.1em;
		margin: 4px 0 8px 0;
	}
	.slide p {
		font-size: 0.85em;
		line-height: 1.3em;
		padding: 2px 0;
	}
	.button {
		font-size: 0.95em;
		padding: 8px 16px;
		margin-top: 10px;
	}
	.features_list {
		padding-top: 5px;
	}
	.features_list h4 {
		font-size: 0.9em;
	}
}

/* XS screens (400px - 575px) */
@media only screen and (max-width: 575px) {
	#slider {
		min-height: 300px;
	}
	.slide {
		padding: 12px;
		min-height: 300px;
	}
	.slide h1 {
		font-size: 1.2em;
		margin: 0 0 5px 0;
	}
	.slide h1 span {
		font-size: 1.4em;
	}
	.slide h2 {
		font-size: 1em;
		margin: 3px 0 6px 0;
	}
	.slide h2 span {
		font-size: 1.3em;
	}
	.slide p {
		font-size: 0.8em;
		padding: 2px 0;
	}
	.slide h3 {
		font-size: 0.9em;
	}
	.slider-img img{
		max-height: 240px;
	}
	.features_list h4{
		font-size: 0.85em;
		margin: 3px 0;
	}
	.features_list li{
		font-size: 0.7em;
		padding: 2px 12px;
	}
	.button {
		font-size: 0.9em;
		padding: 7px 14px;
		margin-top: 8px;
	}
	.button-icon-download{
		margin-left: 8px;
	}
}

/* XXS screens (< 400px) */
@media only screen and (max-width: 399px) {
	#slider {
		min-height: 280px;
	}
	.slide {
		padding: 10px;
		min-height: 280px;
	}
	.slide h1 {
		font-size: 1.1em;
		margin: 0 0 4px 0;
	}
	.slide h1 span {
		font-size: 1.3em;
	}
	.slide h2 {
		font-size: 0.95em;
		margin: 3px 0 5px 0;
	}
	.slide p {
		font-size: 0.75em;
		padding: 1px 0;
	}
	.slider-img img{
		max-height: 200px;
	}
	.features_list h4{
		font-size: 0.8em;
		margin: 2px 0;
	}
	.features_list li{
		font-size: 0.65em;
		padding: 2px 10px;
	}
	.button {
		font-size: 0.85em;
		padding: 6px 12px;
		margin-top: 6px;
	}
}

/* Very small screens (< 360px) */
@media only screen and (max-width: 359px) {
	#slider {
		min-height: 260px;
	}
	.slide {
		padding: 8px;
		min-height: 260px;
	}
	.slider-img img{
		max-height: 180px;
	}
	.slide h1 {
		font-size: 1em;
		margin: 0 0 3px 0;
	}
	.slide h1 span {
		font-size: 1.2em;
	}
	.slide h2 {
		font-size: 0.9em;
		margin: 2px 0 4px 0;
	}
	.slide p {
		font-size: 0.7em;
	}
	.features_list h4{
		font-size: 0.75em;
	}
	.button {
		font-size: 0.8em;
		padding: 5px 10px;
		margin-top: 5px;
	}
}