@charset "utf-8";
/* Resets the HTML to near default values & allows HTML5 Block Elements to work */
* { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; text-decoration: none; background: transparent; }
section, article, aside, nav, footer, header, menu { display:block; }
header, footer, section {width: 100% ; }

header { margin-top: 0% ; }

body  { background: #FFF ;
		font: 100%/1.4 Helvetica, sans-serif ;
		color: #000 ; }
		
#wrap { width: 80% ;
		margin: 0 auto ; }
		
img {	max-width: 100% ; }




.regular-header { display: block ; }

.kericklogo { width: 40% ;
		float: left ;
		margin-top: 1% ; }
		
.socialicons { display: inline ;
		float: right ;
		margin-top: 2% ; }

menu { 	padding-top: 10% ;
		font-size: 110% ; }
		
menu li { display: inline;
		float: right ;
		padding-left: 5% ;
		color: rgb(0,45,86) ; }
		
menu a:link { color: rgb(0,45,86); }
		
.tablet-menu { display: none ; }

		
/*Mobile Menu*/
.overlay {
  height: 0% ;
  width: 100% ;
  position: fixed ;
  z-index: 1 ;
  top: 0 ;
  left: 0 ;
  background-color: rgb(0,45,86) ;
  background-color: rgba(0,45,86, 0.9) ;
  overflow-y: hidden ;
  transition: 0.5s ; }

.overlay-content {
  position: relative ;
  top: 10% ;
  width: 100% ;
  text-align: center ;
  margin-top: 5% ; }

.overlay a {
  padding: 2% ;
  text-decoration: none ;
  font-size: 130% ;
  color: #FFF ;
  display: block ;
  transition: 0.3s ; }

.overlay a:hover, .overlay a:focus {
  color: #C00 ; }

.overlay .closebtn {
  position: absolute ;
  top: 1% ;
  right: 2% ;
  font-size: 300% ; }
  
.mobile-header { display: flex ; }
  
.mobile-header-logo {width: 40% ;
  float: left ; 
  margin-top: 2% ;
  margin-right: 35% ; }
  
.phone { width: 8.5% ;
	margin-top: 10.5% ; }
	
.mail { width: 7.5% ;
	margin-top: 12.5% ;
	margin-left: 5% ; }
	
.lines { font-size:370%; 
	margin-top: 7%;
	padding-left: 10% ; 
	color: rgb(0,45,86); 
	cursor:pointer; }
/*Mobile Menu ends*/
		
.display { margin-top: 3% ;
  		position: relative;
 		text-align: center;
  		color: white;
		margin-bottom: 3% ; }
		
.slideshow-desktop { display: block ; }
.container { width:100%;}
.mySlides {display:none;}
.header-image1 { width: 100%;
        height: 50%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/gas-plant-at-night-2.jpg); }

.header-image2 { width: 100%;
        height: 50%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide3b.jpg); }
		
.header-image3 { width: 100%;
        height: 50%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide3c.jpg); }
		
.header-image4 { width: 100%;
        height: 50%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide3e.jpg); }
		
.header-image5 { width: 100%;
        height: 50%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide3f.jpg); }
		
.header-image6 { width: 100%;
        height: 25%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide5a.jpg); }
		
.header-image7 { width: 100%;
        height: 25%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide5b.jpg); }
		
.header-image8 { width: 100%;
        height: 25%;
        background-position: center center;
        background-repeat: no-repeat;
		background-size: cover;
        background-image: url(../images/slide5c.jpg); }
		
.top-left { position: absolute;
  		top: 12% ;
  		left: 35% ;
		width: 30% ; }
		

.tagline { font: 180% Helvetica, sans-serif ; 
		font-style: italic ;
		color: #FFF ;
		line-height: 130% ;
		text-align: center ; }
		
.button {  border: none ;
  		color: white ;
  		padding: 5px 20px ;
  		text-align: center ;
  		text-decoration: none ;
  		display: inline-block ;
  		font-size: 150% ;
  		transition-duration: 0.4s ;
  		cursor: pointer ; }

.button1 { background-color: transparent ; 
  		color: #FFF ; 
  		border: 2px solid #FFF ;
		float: inherit ;
		margin-top: 4% ; }
		
.button1:hover { background-color: #FFF;
  		color: #C00 ; }
	
.button2 { background-color: rgb(0,45,86);
  		color: #FFF;
  		padding: 10px 20px ;
  		font-size: 120% ;
  		margin-top: 2% ; }

.button2:hover { background-color: #C00 ;
  		color: #FFF ; }

.button3 { background-color: rgb(0,45,86);
  		color: #FFF;
  		padding: 10px 20px ;
  		font-size: 120% ;
  		margin-top: 2% ;
		margin-left: 1% ; }

.button3:hover { background-color: #C00 ;
  		color: #FFF ; }
		
.button4 { background-color: transparent ; 
  		color: #C00 ;
		font-size: 100% ; 
  		border: 2px solid #C00 ;
		margin-top: 1.5% ; }
	
.button4:hover { background-color: #C00;
  		color: #FFF ; }	
		
.popup{
    background-color: rgb(0,45,86) ;
	color: #ffffff ;
    width: 50% ;
    padding-top: 4% ;
	padding-left: 4% ;
	padding-right: 4% ;
	padding-bottom: 2.5% ;
    position: absolute ;
    transform: translate(-50%,-50%) ;
    left: 50% ;
    top: 50% ;
	border-color: rgb(0,45,86) ;
	border-style: solid ;
	border-width: 5 px ;
    border-radius: 3% ;
    font-family: Helvetica,sans-serif ;
    display: none ; 
    text-align: center ;
}
.popup button{
    display: block ;
    float: right ; 
  	margin-top: -6% ;
  	margin-right: -6% ;
    background-color: transparent ;
    font-size: 30px ;
    color: #ffffff ;
    background: rgb(0,45,86) ;
    border-radius: 100% ;
    width: 40px ;
    height: 40px ;
    border: none ;
    outline: none ;
    cursor: pointer ;
}
.popup h2{
  margin-top: 2% ;
  font-size: 180% ;
  color: #FFF ;
}
.popup p{
    font-size: 130% ;
    text-align: center ;
    margin: 5% 0 ;
    line-height: 170% ;
}
.popup-but{
    display: block ;
    width: 40% ;
    position: relative ;
    margin: 7% auto ;
	margin-bottom: 10% ;
	font-size: 130% ;
    text-align: center ;
    background-color: #C00 ;
    border-radius: 15px ;
    color: #ffffff;
    text-decoration: none ;
    padding: 2% 0;
}
.popup a:link {color: #fff ;
		text-decoration: underline ; }
.popup nav a:link {color: #fff ;
		text-decoration: underline ; }
.popup	a:visited {color: #fff ; }
.popup	a:hover, a:active, a:focus { color: #C00 ;}
.popup nav	a:hover, a:active, a:focus { color: #C00 ;}	

.popup-but a:link {color: #fff ;
		text-decoration: none ; }
.popup-but nav a:link {color: #fff ;
		text-decoration: none ; }
.popup-but	a:visited {color: #fff ; }
.popup-but	a:hover, a:active, a:focus { color: rgb(0,45,86) ;}
.popup-but nav	a:hover, a:active, a:focus { color: rgb(0,45,86) ;}	 
		
article { color: #000 ;
		font-size: 100%;
		line-height: 150%;
		text-align: center ; }
		
article li { margin-left: 0%; }
		
article a:link {color: #03C ;
		text-decoration:underline; }
article	a:visited {color: rgb(0,45,86); }
article	a:hover, a:active, a:focus { color: #F30;}

menu a:hover, a:active, a:focus {color: #C00; }

.distributor { display: block;
  		margin-left: auto;
 		margin-right: auto;
		margin-top: 2% ;
		margin-bottom: 2% ;
  		width: 30%; }

h1 { 	color: #FFF ;
		font-size: 110% ;
		font-weight: bold ;
		line-height: 140% ; }
		
h2	{	color: #000 ;
		font-size: 325% ; 
		font-weight: bold ; }

h3 { 	color: #000 ;
		font-size: 145% ;
		margin-top: 1% ;		
		line-height: 160% ; }
		
h4 {	color: rgb(67,62,147) ;
		font-size: 130% ; }
		
h5 { 	color: #000 ;
		font-size: 300% ;
		font-weight: bold ;
		margin-bottom: 2% ; }		

h6 { 	color: rgb(0,45,86) ;
		font-size: 90% ; }
		
h7 {	color: #000 ;
		font-size: 200% ;
		font-weight: bold ;
		line-height: 120% ; }
		
h8 { 	color: #000 ;
		font-size: 120% ;
		margin-top: 1% ;		
		line-height: 160% ; }
		
.contact-h { color: #000 ;
		font-size: 200% ;
		font-weight: bold ;
		line-height: 120% ;
		margin-top: 20% }
		
.portfolio-h { color: rgb(67,62,147) ;
		font-size: 170% ;
		font-weight: bold ;
		line-height: 120% ;
		margin-top: 4% ; 
		margin-bottom: 1% ;}
		
.message-h { color: #C00 ;
		font-size: 180% ;
		font-weight: bold ;
		margin-bottom: 2% ; }
		
.blue-background { background-color: #009 ;
		margin-top: 3% ;
		colour: #009 ;
		font-size: 1% ;
		line-height: 100% ; }
		
.grey-background { background-color: #CCC ;
		color: #000 ;
		font-size: 110% ;
		line-height: 130% ;
		
		padding: 3% 0% ;
		text-align: left ; }
		
ul { 	list-style: none ; }

.projects { color: #000 ;
		font-size: 130%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 15% ; }
		
.projects-tablet { display: none ; }

.projects-mobile { display: none ; }

.projects-h { margin-top: 5% ;
		color: rgb(67,62,147) ;
		font-size: 150% ;
		font-weight: bold ;
		line-height: 120% ; }
		
.proj-img { margin-top: 3% ;
		display: flex; }
		
.proj-img-text { margin-top: 3% ;
		display: block ; }
		
.tec { flex: 32% ;
		margin-right: 3% ; }
		
.tec2 { flex: 32% ; }

.port-project-h { color: #000 ;
		font-size: 180% ;
		font-weight: bold ;
		line-height: 120% ;
		margin-top: 10% ; }
		
.port-project-h1 { color: #000 ;
		font-size: 180% ;
		font-weight: bold ;
		line-height: 120% ;
		margin-top: 10% ; }
		
.port-project-h4 { color: #000 ;
		font-size: 180% ;
		font-weight: bold ;
		line-height: 120% ;
		margin-top: 10% ; }
		
.port-project { display: flex ;
		color: #000 ;
		font-size: 100%;
		line-height: 140%;
		text-align: left ;
		margin-bottom: 7% ; }
		
.port-project2 { display: flex ;
		color: #000 ;
		font-size: 100%;
		line-height: 140%;
		text-align: left ;
		margin-bottom: 7% ; }
		
.port-project-mobile { display: none ;  
		color: #000 ;
		font-size: 100%;
		line-height: 140%;
		text-align: left ;
		margin-bottom: 7% ; }
		
.port-project-mobile2 { display: none ;  
		color: #000 ;
		font-size: 100%;
		line-height: 140%;
		text-align: left ;
		margin-bottom: 7% ; }
		
.port-project-name { color: #000 ;
		font-size: 140% ;
		line-height: 140% ;
		font-weight: bold ; }
		
.port-project-info { flex: 57% ;
		padding-right: 5% ;
		float: left ; }
		
.port-project-info2 { flex: 57% ;
  		padding-right: 5% ;
		float: left ; }
		
.return-port { margin-top: 30%; }

.port-left-image1 { margin-top: 4% ;
		margin-top: 4% ; }
		
.port-image1 { flex: 43% ;
		margin-top: 5% ;
		float: right ; }
		
.port-image2 { flex: 40% ;
		margin-top: 4% ;
		float: right ; }
		
.port-image3 { flex: 40% ;
		margin-top: 2% ;
		float: right ; }
		
.port-image3a { flex: 33% ;
		margin-top: -3.5% ;
		float: right ; }
		
.port-image4c { flex: 120% ;
		margin-top: 4% ;
		float: right ; }
		
.port-image4 { flex: 120% ;
		margin-top: 4% ;
		float: right ; }
		
.port-image4a { display: none ;
		flex: 120% ;
		margin-top: 4% ;
		float: right ; }
		
.port-image4b { display: flex ;
		flex: 120% ;
		margin-top: 4% ;
		float: right ; }
		
.port-image5 { flex: 120% ;
		margin-top: -2% ;
		float: right ; }
		
.port-image6 { flex: 120% ;
		float: right ; }
		
.port-image6a { flex: 120% ;
		float: right ;
		margin-top: 4% ; }
		
.port-image7 { flex: 140% ;
		float: right ; }


.dropbtn { background-color: rgb(0,45,86);
  		color: white;
		margin: 4% 2% ;
  		padding: 8px 2px;
  		font-size: 90% ;
  		border: none;
  		cursor: pointer; }

.dropdown { position: relative;
  		display: inline-block;
		text-decoration: none; }

.dropdown-content { display: none;
  		position: absolute;
  		background-color: #f9f9f9;
  		min-width: 160px;
  		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 		z-index: 1;
		text-decoration: none; }

.dropdown-content a { color: rgb(0,45,86);
  		padding: 6px 24px ;
  		text-decoration: none ;
		font-size: 90% ;
  		display: block; }

.dropdown-content a:hover { background-color: #f1f1f1;
		text-decoration: none; }

.dropdown:hover .dropdown-content { display: block;
		text-decoration: none; }

.dropdown:hover .dropbtn { background-color: #C00 ;
		text-decoration: none; }

.product-list li { list-style: disc ;
		margin-left: 5% ; }

.privacy { color: #000 ;
		font-size: 90% ;
		line-height: 140% ;
		text-align: left ;
		margin-bottom: 5% ; }
		
.privacy ol { list-style-position: outside ; }
		
.privacy li { margin-left: 5% ; }
		
.contact { display: flex ;
		color: #000 ;
		font-size: 120%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 7% ; }
		
.contact-name { color: #000 ;
		font-size: 140% ;
		line-height: 150% ;
		font-weight: bold ; }
		
.contact-info { flex: 35% ;
  		padding: 0% 5% ; }
		
.sample { flex: 65% ;
		margin-top: 2% ;
		float:right ; }
		
/*Message form begins*/
* {
  box-sizing: border-box; }

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  background-color: #FFF ;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical; }

input[type=submit] {
  background-color: #C00;
  color: white;
  margin-top: 2.5% ;
  padding: 12px 60px ;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: left; }

input[type=submit]:hover {
  background-color: #FFF;
  color: #C00 ; }

.message { background-color: #999 ;
  padding: 7% 0%;
  text-align: left ; }
  
.message p { font-size: 120% ;
		font-weight: bold ;
		margin-bottom: 2% ; }

.col-b { float: left;
  width: 100%;
  margin-top: 12px; }

.row:after {
  content: "";
  display: table;
  clear: both; }
/*message form ends*/

.about { display: flex ;
		color: #000 ;
		font-size: 110%;
		line-height: 140%;
		text-align: left ;
		margin-bottom: 5% ; }
		
.about-part1 { flex: 50% ;
  		padding-right: 5% ; }
  		
.truck { flex: 30% ; }

.about-part2 { text-align: left ;
		font-size: 110% ;
		line-height: 135% ;
		margin-top: -6.5% ;
		margin-bottom: 6% ; }
		
.about-h { color: #C00 ;
		font-style: italic ;
		font-size: 120% ; }

/*bio card begins*/
.bio-wrap { display: flex ; }

.bio { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  		background-color: #FFF ;
 		color: #000 ;
  		max-width:  33.33% ;
  		margin: 2% ;
  		text-align: center;
  		padding: 2% 2% 1% 2% ; }
  
.about-name {color: #000 ;
		font-size: 108% ;
		font-weight: bold ;
		margin-top: 4% ;
		margin-bottom: 2% ; }

.position { color: rgb(0,45,86) ;
  		font-size: 110% ;
		margin-bottom: 2% ; }
		
.bio p { font-size: 85% ;
		line-height: 120% ;
		margin-bottom: 5% ; }

.bio button { border: none ;
  		outline: 0 ;
  		padding: 10px ;
  		color: #FFF ;
  		background-color: #C00 ;
  		text-align: center ;
  		cursor: pointer ;
  		width: 100% ;
  		font-size: 92% ; }

.bio button:hover { background-color: rgb(0,45,86) ; }
/*bio card ends*/

.services { color: #000 ;
		font-size: 100%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 7% ; }

.services li { margin-bottom: 1.5% ; }	

.partners { color: #000 ;
		font-size: 110%;
		line-height: 110%;
		text-align: left ;
		margin-bottom: 5% ; }
		
.partners-h { color: #C00 ;
		font-style: italic ;
		font-size: 110% ; }

.partners li { margin-bottom: 3% ; }

.product-top { color: #FFF ;
		font-size: 10% ;
		margin-top: 1% ; }
		
.product-vessels { color: #FFF ;
		font-size: 10% ;
		margin-top: 1% ; }
		
.products { color: #000 ;
		font-size: 100%;
		line-height: 150%;
		margin-bottom: 3% ; }

/*product card begins*/
.product-wrap { display: flex ; }

.product-card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  		background-color: #999 ;
 		color: #FFF ;
  		max-width:  80% ;
  		margin: 2% auto ;
  		text-align: left ;
  		padding: 4% 4% 1% 4% ; }
		
.product-card-image { width: 60% ;
		margin: 0% auto ; }

.product-card-text { width: 100% ; }
		
.product-name {color: #C00 ;
		font-size: 200% ;
		line-height: 110% ;
		font-weight: bold ;
		margin: 4% 0% 3% 0% ; }
		
.products p { font-size: 150% ;
		line-height: 120% ;
		margin-bottom: 3% ; }
  
.product-card button { border: none ;
  		outline: 0 ;
  		padding: 10px ;
		margin: 10px 0px ;
  		color: #FFF ;
  		background-color: #C00 ;
  		text-align: center ;
  		cursor: pointer ;
  		width: 100% ;
  		font-size: 92% ; }

.product-card button:hover { background-color: rgb(0,45,86) ; }

.product-card-up { float: right ;
		font-weight: bold ; }
/*product card ends*/

.resources { color: #000 ;
		font-size: 100%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 7% ; }
		
/*resources card begins*/
.res-wrap { display: flex ; }

.res-card { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  		background-color: #999 ;
 		color: #000 ;
  		max-width:  33.33% ;
  		margin: 2% ;
  		text-align: center;
  		padding: 2% 2% 1% 2% ; }
  
.res-name {color: #000 ;
		font-size: 108% ;
		font-weight: bold ;
		margin-top: 4% ;
		margin-bottom: 2% ; }

.resources p { font-size: 85% ;
		line-height: 120% ;
		margin-bottom: 5% ; }

.res-card button { border: none ;
  		outline: 0 ;
  		padding: 10px ;
  		color: #FFF ;
  		background-color: #C00 ;
  		text-align: center ;
  		cursor: pointer ;
  		width: 100% ;
  		font-size: 92% ; }

.res-card button:hover { background-color: rgb(0,45,86) ; }
/*resources card ends*/

.faqs { color: #000 ;
		font-size: 100%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 7% ; }
		
.faqs p { margin-top: 1% ;
		margin-bottom: 1% ; }
		
.faqs ol { list-style-position: outside ; }
		
.faqs li { margin-left: 5% ;
			margin-bottom: 1% ; }	
	
footer { background-color: rgb(0,45,86) ;
		color: #FFF ; 
		font-size: 90% ;
		line-height: 140% ;
		padding-top: 3% ; }
		
.ft-main { display: flex;
    	flex-wrap: wrap;
		padding-bottom: 7% ; }
		
.bottom-logo1 { display: flex; }
.bottom-logo2 { display: none; }
		
.space { margin-left: 3% ; 
		margin-right: 35% ; }
		
.space2 {display: none ; }
		
.space3 { line-height: 160% ;
		margin-right: 10% ;
		 }
		
.space4 { line-height: 160% ;
		 }

.arrow { border: solid white;
  		border-width: 0 3px 3px 0;
  		display: inline-block;
  		padding: 3px ;
  		margin-left: 10px ; }

.right { transform: rotate(-45deg);
  		-webkit-transform: rotate(-45deg); }
		
.copyright ul { text-align: center ;
		padding-bottom: 1% ; }
  
.copyright li { font-size: 80% ;
		text-align: center ;
		display: inline ;
		padding: 1% ; }
		
.copyright2 {display: none ; }

.copyright3 { display: none ; }		

		
footer a:link {color: #fff ;
		text-decoration:underline; }
footer nav a:link {color: #fff ;
		text-decoration: none ; }
footer	a:visited {color: #fff; }
footer	a:hover, a:active, a:focus { color: #C00 ;}
footer nav	a:hover, a:active, a:focus { color: #C00 ;}
.arrow:hover, .arrow:active, .arrow:focus { border: solid #C00 ;
		border-width: 0 3px 3px 0; }
		
		
		
		
		

@media screen and (max-width: 1325px) {
	.space { margin-right: 30% ; }
	.about { font-size: 100%;
		line-height: 135%; }
	.about-part1 { flex: 35% ;
  		padding-right: 3% ; }  		
	.truck { flex: 45% ; }	
	.about-part2 { font-size: 100% ;
		line-height: 135% ;
		 }		
	.about-h { font-size: 120% ; }
	.product-card-image { width: 80% ; }
	.port-project { font-size: 92%; }
	.port-project2 { font-size: 92%; }	
  		  
}

@media screen and (max-width: 1220px) {
	.kericklogo { width: 45% ;
		margin-top: 2% ; }
	menu { 	padding-top: 14% ; }
	.display { margin-top: 4% ; }
	.top-left { top: 17% ; }
	.tagline { font-size: 160% ; }
	footer { font-size: 85% ; }
	.bottom-logo1 { display: none ; }
	.bottom-logo2 { display: flex ; }
	.space { margin-right: 25% ; }
	.space3 { margin-right: 8% ; }
	.contact { font-size: 95%;
		line-height: 150%; }		
	.contact-name { font-size: 125% ;
		line-height: 140% ; }
	.about { font-size: 90%;
		line-height: 130%; }	
	.about-part2 { font-size: 90% ;
		line-height: 130% ;
		margin-top: -7% ; }		
	.about-h { font-size: 120% ; }
	.product-card-image { width: 90% ; }
	.popup{ width: 60% ;
    	padding-bottom: 3.5% ; }
	.port-project { font-size: 85%; }
	.port-project2 { font-size: 85%; }
	.proj-img-text { font-size: 85% ; }
	  
}

@media screen and (max-width: 1100px) {
	  .top-left { top: 15% ; }
	  .tagline { font-size: 150% ; }
	  .space { margin-right: 20% ; }
	  footer { font-size: 80% ; }
	  .button1 { font-size: 130% ; }
	  .port-image1 { flex: 80% ; }
	  .port-image4c { flex: 80% ; }
	  .port-image5 { flex: 80% ;
	  	margin-top: 0% ; }
	  .port-image2 { flex: 63% ;
		margin-top: 5% ; }		
	  .port-image3 { flex: 63% ;
		margin-top: 0% ; }
	  .port-image3a { flex: 53% ;
		margin-top: -2% ; }
	  .port-image4 { display: none ; }
	  .port-image4a { display: flex ;
	  	flex: 75% ;
		margin-top: 6% ; }
	  
	  .port-project-h1 { margin-top: 15% ; }
	  .port-project-h4 { margin-top: 5% ; }

	  .port-project2 { display: none ; }
	  .port-project-mobile2 { display: block ;
	  	font-size: 85%; }
	  .port-image6 { margin-top: 4% ;
	  	margin-bottom: 8% ; }
	  .port-image6a { margin-top: 4% ;
	  	margin-bottom: 8% ; }
	  
	    
	  
}

@media screen and (max-width: 1024px) {
  
  menu { 	padding-top: 13% ;
		font-size: 95% ; }
  .display { margin-top: 5% ;
  		margin-bottom: 6% ; }
  .header-image6 { background-image: url(../images/gas-plant-at-night-2.jpg); }		
  .header-image7 { background-image: url(../images/slide3b.jpg); }
  .header-image8 { background-image: url(../images/slide3c.jpg); }
  .top-left { top: 7.5% ;
  		left: 10% ;
		width: 100% ; }
  .tagline { text-align: left ; }
  .button1 { font-size: 140% ;
  		float: left ;
		margin-top: 1.5% ; } 
  h3 { 	font-size: 130% ; }
  .button2 { font-size: 120% ;
  		margin-top: 3% ; }
  .button3 { font-size: 120% ;
  		margin-top: 3% ; }
  .distributor { margin-top: 5% ;
  		margin-bottom: 5% ;
		width: 50%; }
  .grey-background { font-size: 120% ;
		line-height: 140% ;
		padding: 7% 0% ; }
 
  h2 { 	font-size: 275% ; }
  h5 { font-size: 245% ; }
  h4 {	font-size: 140% ;
  		line-height: 140% ; }
  .button4 { font-size: 100% ;
  		margin-top: 2% ; }
  .contact { font-size: 90%;
		line-height: 150%; }		
  .contact-name { font-size: 115% ;
		line-height: 150% ; }
  .contact-info { padding: 0% 3% ; }
  .message { padding: 10% 0%; }
  .about { font-size: 83%;
		line-height: 133%; }
  .about-part1 { flex: 25%; 
  		padding-right: 3% ; }
  .truck { flex: 57% ; }	
  .about-part2 { font-size: 83% ;
		line-height: 135% ;
		margin-top: -6% ; }		
  .about-h { font-size: 125% ; }
  .partners { font-size: 100%;
		line-height: 140%;
  		margin-bottom: 10% ; }
  footer { font-size: 85% ;
  		padding-top: 5% ;
  		padding-left: 10% ; }
  .bottom-logo1 { display: flex ;
  		margin-left: -2% ; }
  .bottom-logo2 { display: none ; }
  .space { margin-right: 10% ; }
  .space3 {	margin-right: 5% ; }
  .copyright {display: none ; }
  .copyright2 {display: block ; }
  .copyright2 ul { padding-bottom: 1% ; }
  .copyright2 li { font-size: 75% ;
		text-align: center ;
		display: inline ;
		padding: .5% ; }
  .product-card-image { width: 100% ; }
  .product-name { font-size: 180% ;
		margin: 4% 0% 3% 0% ; }		
  .products p { font-size: 140% ;
		margin-bottom: 3% ; }
  .dropbtn { font-size: 90% ; }
  .dropdown-content a { font-size: 90% ; }
  .popup button{ font-size: 25px ; }
  .popup h2{ font-size: 160% ;
		margin-top: 8% ; }
  .popup p{ font-size: 110% ; }
  .popup-but{	font-size: 110% ;
		border-radius: 10px ; }

  .tec-p3 { display: none ; }
 
  
}

@media screen and (max-width: 896px) {
    .kericklogo { width: 43% ;
		margin-top: 2.5% ; }
  footer { padding-left: 5% ; }
  .space { margin-right: 9% ; }
  .space3 { margin-right: 4% ; }
  .copyright2 ul { padding-left: 1% ; }
  	
}

@media screen and (max-width: 768px) {
  .regular-header { display: none ; }
  .tablet-menu { display: block ; }

  .mobile-header-logo {width: 80% ;
  		margin-top: 4% ; 
  		margin-right: 5% ; }
  .display { margin-top: 2% ;
  		margin-bottom: 8% ; }
  .header-image { height: 65%; }
  .tagline { font-size: 145% ; }
  .button1 { font-size: 120% ; }
  .distributor { width: 60%; }
  h3 { 	font-size: 110% ; }
  h2 { 	font-size: 220% ; }
  h5 { font-size: 195% ; }
  h7 {	font-size: 150% ;
		line-height: 120% ; }
  .projects { display: none ; }
  .projects-mobile { display: none ; }
  .projects-tablet { display: block ;
  		color: #000 ;
		font-size: 130%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 15% ; }
  .projects-h { margin-top: 7% ;
		font-size: 130% ;
		line-height: 150% ; }		
  .proj-img { margin-top: 5% ;
		display: flex; }		
  .tec { flex: 32% ;
		margin-right: 5% ; }		
  .tec2 { flex: 32% ; }
  .button2 { font-size: 110% ;
  		margin-top: 6% ; }
  .button3 { font-size: 110% ;
  		margin-top: 6% ; }  
  .grey-background { font-size: 100% ;
		line-height: 150% ;
		padding: 8% 0% ; }
  h4 {	font-size: 130% ;
  		line-height: 130% ; }
  .button4 { font-size: 100% ;
  		margin-top: 2.5% ; }
  .shop { display: none ; }
  .contact { font-size: 120%;
		line-height: 150%;
		margin-top: 2% ;
		margin-bottom: 10% ; }		
  .contact-name { font-size: 125% ;
		line-height: 150% ; }
  .contact-h { font-size: 185% ;
  		margin-top: 8% ; }
  .sample { display: none ; }
  .message p { font-size: 100% ; }
  input[type=submit] { width: 100%;
    	margin-top: 3.5%;   }
  .about-part2 { margin-bottom: 12% ; }
  .truck { display: none ; }
  .bio-wrap { display: block ; }
  .bio { max-width:  60% ;
  		margin: auto ; }
  .resources { margin-bottom: 10% ; }
  .res-wrap { display: block ; }
  .res-card { max-width:  60% ;
  		margin: auto ; }
  .privacy { margin-bottom: 12% ;
  		font-size: 90% ; }
  .faqs { margin-bottom: 12% ;
  		font-size: 90% ; }
  .services { font-size: 90%;
  		margin-bottom: 12%; }
  .services li { margin-bottom: 2% ;
  		line-height: 140%; }
  .partners { margin-bottom: 12% ;
  		font-size: 100% ; }
  .partners-h { font-size: 110% ; }
  .partners li { margin-bottom: 5% ; }
  .ft-main { display: block ;
  		margin-left: 30% ; }
  .bottom-logo1 { display: block ; }
  .bottom-logo2 { display: none ; }
  .space { display: none ; }
  .space2 {	display: block ; 
  		margin-left: 0 ;
  		margin-top: 7% ; }
  .space3 {margin-top: 12% ;
  		margin-left: 0 ; }
  .space4 {margin-top: 5% ;
  		margin-left: 0 ; }
  .copyright2 {display: none ; }
  .copyright3 { display: block ; }
  .copyright3 ul { margin-left: -10% ;
  	 padding-bottom: 5% ;
  		text-align: center ; }
  .copyright3 li { font-size: 70% ;
		text-align: center ;
		display: inline ;
		padding: 0% ; }
  .product-top { margin-top: -6% ; }
  .product-name { font-size: 140% ;
		margin: 4% 0%; }		
  .products p { font-size: 110% ;
  		line-height: 140% ;
		margin-bottom: 5% ; }
  .about { margin-top: -10% ; }
  .dropbtn { font-size: 80% ; }
  .dropdown-content a { font-size: 80% ; }
  .popup{ width: 70% ;
    	padding-bottom: 4% ; }
  .projects-h { margin-top: 8% ;
		font-size: 110% ; }
  .port-project { display: none ; }
  .port-project-mobile { display: block ;
  		font-size: 90%; }
  .port-project-mobile2 { font-size: 90%; }
  .port-project-h { font-size: 150% ; }
  .port-project-name { font-size: 130% ; }
  .port-project-info { padding: 0% ; }
  .port-image2 { margin-bottom: 15% ; }
  .port-image3 { margin-top: 5% ;
  		margin-bottom: 15% ; }
  .port-image3a { margin-top: 5% ; 
  		margin-bottom: 15% ; }
  .port-image4a { display: none ; }
  .port-image4 { display: block ;
  		margin-bottom: 10% ; }
  
}

@media screen and (max-width: 625px) {
  .ft-main { margin-left: 16% ; }
  .display { margin-top: 2% ; }
  .mobile-header-logo {width: 60% ;
  		margin-top: 8% ; 
  		margin-right: 10% ; }
  .phone { width: 9% ;
	margin-top: 12% ; }	
  .mail { width: 8% ;
	margin-top: 14% ;
	margin-left: 5% ; }	
  .lines { font-size:330%; 
	margin-top: 8%;
	padding-left: 10% ; } 
  h2 { 	font-size: 175% ; }
  h5 { font-size: 150% ; }
  .dropbtn { font-size: 70% ; }
  .dropdown-content a { font-size: 70% ; }
  .popup{ width: 80% ;
    	padding-bottom: 4% ; }
  .popup button{ font-size: 20px ;
  		margin-top: -4% ;
  		margin-right: -4% ; }
  .popup h2{ font-size: 140% ;
		margin-top: 8% ; }
  .popup p{ font-size: 100% ; }
  .popup-but{ font-size: 100% ;
		border-radius: 8px ; }
	  
}

@media screen and (max-width: 550px) {
  .ft-main { margin-left: 15% ; }
  .mobile-header-logo {width: 70% ; 
  		margin-top: 10% ;
  		margin-right: 5% ; }
  .phone { width: 11% ;
	margin-top: 14% ; }	
  .mail { width: 10% ;
	margin-top: 16% ;
	margin-left: 5% ; }	
  .lines { font-size:300%; 
	margin-top: 10%;
	padding-left: 8% ; }
	  
}

@media screen and (max-width: 480px) {
  .regular-header { display: none ; }
  .mobile-header-logo {width: 50% ; 
  		margin-right: 10% ; }
  .phone { width: 12% ;
	margin-top: 12% ; }	
  .mail { width: 11.5% ;
	margin-top: 14% ;
	margin-left: 5% ; }	
  .lines { font-size:250%; 
	margin-top: 8%;
	padding-left: 8% ; }
  .display { margin-top: 4% ;
  		margin-bottom: 10% ; }
  .header-image { height: 55%; }
  .tagline { font-size: 160% ;
  		margin-right: 10% ; }
  .projects-tablet { display: none ; }
  .projects-mobile { display: block ;
  		color: #000 ; 
		font-size: 90%;
		line-height: 150%;
		text-align: left ;
		margin-bottom: 15% ; }
  .projects-h { margin-top: 13% ;
		font-size: 170% ;
		line-height: 200% ; }		
  .proj-img { margin-top: 5% ;
		display: flex; }		
  .tec2 { flex: 32% ;
  		margin-bottom: 5% ; }
  .button1 { font-size: 100% ; }
  h3 { 	font-size: 95% ; }
  h2 { 	font-size: 130% ; }
  h5 { font-size: 115% ; }
  h7 {	font-size: 120% ;
		line-height: 120% ; }
  .button2 { font-size: 100% ; }
  .button3 { font-size: 100% ; }
  .distributor { width: 80%;
  		margin-top: 6% ;
		margin-bottom: 6% ;  }
  .grey-background { font-size: 90% ;
		line-height: 130% ;
		padding: 12% 0% ; }
  h4 {	font-size: 130% ;
  		line-height: 120% ; }
  .button4 { font-size: 90% ;
  		margin-top: 3% ; }
  .contact { font-size: 90%;
		line-height: 160%; }		
  .contact-name { font-size: 105% ;
		line-height: 160% ; }
  .contact-h { font-size: 150% ; }
  .message { font-size: 80% ; }
  .message p { font-size: 110% ;
  		line-height: 140% ; }
  .message-h { font-size: 170% ; }
  .bio { max-width:  80% ;
  		margin: auto ; }
  .resources { margin-bottom: 15% ; }
  .res-card { max-width:  80% ;
  		margin: auto ; }
  .privacy { font-size: 80% ;
  		margin-bottom: 15% ; }
  .faqs { font-size: 80% ;
  		margin-bottom: 15% ; }
  .services { font-size: 80%;
  		margin-bottom: 15%; }
  .partners { font-size: 100% ; }
  .partners-h { font-size: 90% ; }
  .partners li { font-size: 80% ; }
  footer { font-size: 80% ; }
  .bottom-logo1 { display: none ; }
  .bottom-logo2 { display: block ;
  		margin-top: 5% ; }
  .ft-main { display: block ;
  		margin-left: 14% ; }
  .copyright3 ul { margin-left: -15% ; }
  .copyright3 li { font-size: 65% ; }
  .product-name { font-size: 120% ; }		
  .products p { font-size: 90% ; }
  .dropbtn { font-size: 60% ; }
  .dropdown-content a { font-size: 60% ; }
   .popup{ width: 85% ;
    	padding-bottom: 5% ; }
  .popup button{ font-size: 20px ;
  		margin-top: -4% ;
  		margin-right: -4% ; }
  .popup h2{ font-size: 120% ;
		margin-top: 8% ; }
  .popup p{ font-size: 95% ; }
  .popup-but{ font-size: 95% ;
		border-radius: 5px ; }
  .projects-h { font-size: 130% ; }
  .port-project-mobile { font-size: 80%; }
  .port-project-mobile2 { font-size: 80%; }
  .port-image4 { display: none ; }
	  .port-image4a { display: flex ;
	  	flex: 75% ;
		margin-top: 0% ;
		margin-bottom: 15% ; }
  
}

@media screen and (max-width: 400px) {
  .display { margin-top: 3% ; }
  .mobile-header-logo {	margin-right: 8% ; }
  .phone { width: 14% ;
	margin-top: 13% ; }	
  .mail { width: 13.5% ;
	margin-top: 15.5% ;
	margin-left: 4% ; }	
  .lines { margin-top: 8%;
	padding-left: 8% ; }	
  .ft-main { margin-left: 8.5% ; }
  .copyright3 li { font-size: 60% ; }
  .port-project-mobile { font-size: 75%; }
  .port-project-mobile { font-size: 75%; }
   
	  
}

@media screen and (max-width: 360px) {
  .lines { font-size:220%; }
  footer { font-size: 75% ; }
  .ft-main { margin-left: 7.5% ; }
  .copyright3 li { font-size: 55% ; }
  .port-project-mobile { font-size: 70%; }	
  .port-project-mobile2 { font-size: 70%; }
    
}

@media screen and (max-width: 320px) {
  .ft-main { margin-left: 4% ; }
	  
}