@charset "UTF-8";
/* CSS Document */

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
	width:100%;
}

body {
	margin: 0px;
	background-color: #ffffff;
	color:#363636;
	font-size:14px;
	font-family: 'Poppins', sans-serif;
	}

h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #ffffff;
	font-size: 20px;
	line-height: 24px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
	
h2 {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #252525;
	font-size: 20px;
	line-height: 24px;
	margin: 0;
	padding: 20px 0px 20px 10px;
	text-align: center;
}

h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	color: #ffffff;
	font-size: 16px;
	line-height: 20px;
	margin: 0 0 20px 0px;
	padding: 0px;
	text-align: left;
}

.gridContainer {
	width: 100%;
	max-width: 1120px;
	margin: auto;
}

.top {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    background-color: #2A3C59;
    color: #ffffff;
}

.top-content {
		clear: both;
		display: block;
		width: 88%;
		color: #ffffff;
		text-align: right;
		margin: 0% 5%;
		padding: 20px 0px;
	}


.main-menu-container {
	clear: both;
    float: left;
    display: block;
    width: 100%;
    background-color: #ffffff;
    color: #363636;
    text-align: left;
	margin: 0;	
}
	
.main-menu-left {
	clear: both;
	float: left;
	margin-left: 2%;
	width: 96%;
	padding: 30px 0px;
	text-align: center;
	transition: transform .2s;
	}
	
.main-menu-right {
	clear: both;
	float: left;
	width: 96%;
	margin-left: 2%;
	padding: 20px 0px;
	}

/*Styling middle-------------------------------------------------*/
	
.middle {
	clear: both;
	float: left;
	width: 98%;
	margin: 0 1%;
	padding-bottom: 0px;
	background-color: #ffffff;
	color: #363636;
	}
	
.mission-container {
	clear: both;
	float: left;
	width: 94%;
	margin: 0px 3%;
	}
	
.mission {
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}
			
.vision-container {
	clear: both;
	float: left;
	width: 94%;
	margin: 0px 3%;
	}
		
.vision {
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}

.markets {
	clear: both;
	float: left;
	width: 94%;
	margin: 20px 3%;
	}

.market-container {
	display: flex;
	flex-direction: column;
	align-items: center; 
	flex-wrap: wrap;
	}

.market-col1 {
	margin: 0px 2% 20px;
	flex: 0 1 300px;
	text-align: center;
	}

.market-col1:hover {
	background-color: #ffffff;
}
	

.market-photo {
	text-align: center;
	}

	
.market-title {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	padding-top: 20px;
	font-weight: normal;
	color: #252525;
	}


.employee-container {
	clear: both;
	float: left;
	width: 94%;
	margin: 0px 3%;
	}
		
.employee {
	width: 96%;
	margin: 0 2%;
	padding: 20px 0px 0px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}

hr.solid2 {
	border-top: 1px solid #252525;
  	width: 240px;
  	margin: 10px auto 0px auto;
}

.team {
	clear: both;
	float: left;
	width: 90%;
	margin: 10px 5%;
		}	
	
.team-container {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	
.team-member {
	margin: 10px 0 0 0;
	flex: 0 1 230px;
	text-align: center;
	}
	
.team-photo {
	padding: 20px 0px;
	text-align: center;	
	}
	
.team-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 16px;
	text-decoration: none;
	font-weight: 400;
	}

.team-details2 {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 16px;
	text-decoration: underline;
	font-weight: 600;
	padding-top: 6px;
	}

/*Styling watts timeline--------------------------------------------------------------------*/
	
.history {
	clear: both;
	float: left;
	width: 96%;
	margin: 0px 2%;
	}	
	
.history-container {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	
.history-article {
	margin: 30px 0 0 10px;
	flex: 0 1 320px;
	text-align: center;
	}
	
.history-year {
	font-family: 'poppins', sans-serif;
	font-size: 20px;
	line-height: 60px;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	background-image: url(https://harrywarrenga.com/img/watts/year-bg.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	color: #ffffff;
	}
	
.history-photo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.history-header {
	font-family: 'poppins', sans-serif;
	font-size: 18px;
	line-height: 22px;
	text-decoration: none;
	font-weight: 600;
	padding-top: 10px;
	}

.history-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	font-weight: 400;
	text-align: left;
	}
	


/*styling section with skyline background------------------------------*/

.home-container {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    text-align: center;
	background-image: url("../img/home-header-phone.jpg");
    background-position: top center;
    background-repeat: no-repeat;
	background-size: cover;
	background-color: #ffffff;
	margin: 0;
	height: 230px;
}

.second-container {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    text-align: center;
	background-image: url("../img/header-second-phone.jpg");
    background-position: top center;
    background-repeat: no-repeat;
	background-size: cover;
	background-color: #ffffff;
	margin: 0;
	height: 180px;
}

.headline {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 20px 0px;
	font-family: 'Inter', sans-serif;
	text-align: center;
	background-color: #2A3C59;
	}

.story-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%;
	text-align: center;
	}

.story-container2 {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 0px 2%;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	}

.story-left {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	text-align: center;
	margin-left: 0%;
	padding-bottom: 20px;
	}
	
.story-right {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	text-align: center;
	margin-left: 0%;
	padding-bottom: 20px;
	}
/*Styling product lines-----------------------------------------------------------*/
	
.line {
	clear: both;
	float: left;
	width: 90%;
	margin: 10px 5%;
	}	
	
.line-container {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	
.line-member {
	margin: 30px 20px 0 20px;
	flex: 0 1 300px;
	text-align: center;
	}
	
.line-logo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.line-name {
	font-family: 'poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	font-weight: 600;
	transition: transform .2s;
	}

.line-name:hover {		
	-ms-transform: scale(1.1); /* IE 9 */
  	-webkit-transform: scale(1.1); /* Safari 3-8 */
  	transform: scale(1.1); 
	}

.line-extra {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-style: italic;
	font-weight: 400;
	color: #3684c6;
	}
	
.line-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #707070;
	}

/*Styling training--------------------------------------------------------------------*/

.statement {
	clear: both;
	float: left;
	display: block;
	width: 94%;
	margin: 20px 3% 0 3%;
	text-align: left;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	}
	
.training-member {
	margin: 10px 20px 0 20px;
	flex: 0 1 250px;
	text-align: center;
	}
	
.training-logo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.training-name {
	font-family: 'poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	font-weight: 600;
	}

.training-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #707070;
	}
	
.training-details:hover {		
	-ms-transform: scale(1.1); /* IE 9 */
  	-webkit-transform: scale(1.1); /* Safari 3-8 */
  	transform: scale(1.1); 
	}

/*Styling contact forms------------------------------------------*/

/* Special:  to 600px. Inherits styles from: Mobile Layout. --------------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 600px) {
	
.contact-product-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0;
	background-color: #ebebeb;
	text-align: center;
	}
	
.contact-product {
	clear: both;
	float: left;
	width: 96%;
	margin: 0px 2%;
	padding: 20px 0;
	text-align: center;
	}	

.form {
	clear: both;
	float: left;
	display: block;
	width: 100%;	
	}

.contact1-container {
	clear: both;
	float: left;
	display: block;
	width: 70%;
	margin: 20px 15%;
	align-content: top center;
	}

.contact_spam {
	margin-left: 0px;
	padding-top: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	font-family: 'Poppins', sans-serif;
	color: #363636;
	}

.email-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin-bottom: 20px;
	}
	
.email-container-left {
	clear: both;
	float: left;
	display: block;
	text-align: left;
	width: 98%;
	margin-left: 1%;
	}
	
.email-container-right {
	clear: both;
	float: left;
	display: block;
	text-align: left;
	width: 98%;
	margin-left: 1%;
	margin-top: 20px;
	}


.email-hp {
	clear: both;
	float: left;
	text-align: center;
	display: none;
	width: 150px;
	}
	
.thanks {
	clear: none;
	display: block;
	float: left;
	margin-top: 20px;
	width: 100%;
	text-align: center;
	background-color: #2A3C59;
	color: #ffffff;
	margin-left: 0%;
	padding: 18px;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
}
		
#email {
	width: 300px;
	height: 50px;
	}
	
/* end mobil breakpoint 600--------------------------------------------------------------------------------------------------------*/

}

/*-------------------------------------------------------------------------------------*/
	
input[type=submit] {
	background-color: #00aeef;
  	border: none;
  	color: #252525;
  	height: 52px;
  	text-decoration: none;
  	margin: 0px 0px 0px 0px;
  	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	padding: 0px 20px;
}
	
input[type=text] {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 1px 4px;}
	
textarea {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 1px 4px;}	

.contact-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%;		
	}
	
.contact-info1 {
	clear: both;
	float: left;
	display: block;
	width: 90%;
	margin: 20px 5%;
	}
	
.contact-info2 {
	clear: both;
	float: left;
	display: block;
	width: 90%;
	margin: 20px 5%;
	}
	

.contact-logo {
	width: 100%;
	padding: 20px 0px 10px 0px;	
	}
	
.contact-logo:hover {		
	-ms-transform: scale(1.05); /* IE 9 */
  	-webkit-transform: scale(1.05); /* Safari 3-8 */
  	transform: scale(1.05); 
	}

.contact-data {
	padding: 20px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	}
	
.form-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%; 
	}		


.contact-header {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin-left: 1%;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #252525;
	font-size: 28px;
	line-height: 36px;
	padding: 0px;
	text-align: center;	
	}
	
.contact-button {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 20px 0%;
	}
	
.button-left {
	clear: both;
	float: left;
	width: 48%;
	margin-left: 1%;
	}
	
.button-right {
	clear: none;
	float: left;
	width: 48%;
	margin-right: 1%;
	}

	
.button-normal {
    clear: both;
    float: left;
  	display: block;
	background-color: rgba(244,158,30); /* Orange */
  	border: none;
  	color: #252525;
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
	
.button-normal:hover {
    clear: both;
    float: left;
  	display: block;
	background-color: #00aeef; /* light blue */
  	border: none;
  	color: #252525;
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
	
.button-light {
    clear: both;
    float: left;
  	display: block;
	background-color: rgba(244,158,30, 0.5); /* Orange */
  	border: none;
  	color: rgba(37,37,37, 0.5);
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
		
.button-bold {
    clear: both;
    float: left;
  	display: block;
	background-color: #00aeef; /* light blue */
  	border: none;
  	color: #252525;
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}


.contact-form {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0px 0%;
	text-align: center;
	}
	
.contact2-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 20px 0%;
	text-align: center;
	}
	
#formlabel {
	width: 96%;
	margin: 10px 2%;
	padding: 6px 4px
	}
	
#submit_button2 {
	margin-top: 20px;
	}



/*Styling Spotlight----------------------------------------------*/
	
.spotlight {
	clear: both;
	float: left;
	display: block;
	width: 94%;
	margin: 20px 3%;		
	}
	
.spotlight-container {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin: 10px 1%;
	}

.spotlight-logo {
	text-align: center;
	margin-top: 30px;		
	}
	
.spotlight-name {
	font-family: 'inter', sans-serif;
	font-size: 40px;
	font-weight: 900;
	text-align: center;
	color: #aa141a;
	padding: 30px 0;
	}
	
.spotlight-photo {
	text-align: center;	
	}

.spotlight-content {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin: 0 1%;	
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 0px;
	}

.spotlight-list {
	clear: both;
	float: left;
	display: block;
	width: 90%;
	margin: 0 1% 0% 4%;	
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 0px;
	}
	
cite {
	clear: both;
	float: left;
	width: 98%;
	text-align: right;
	padding: 30px 10px;
	}

/*Styling calendar-------------------------------------------------*/
.calendar-container {
	clear: both;
	float: left;
	display: block;
	width: 94%;
	margin: 30px 3%;		
	}

.calendar-left {
	clear: both;
	float: left;
	display: block;
	width: 100%;
}

.calendar-right {
	clear: both;
	float: left;
	display: block;
	width: 100%;
}


/*Styling footer-------------------------------------------------*/
	
.footer {
	clear: both;
	float: left;
	width: 100%;
	margin: 0% 0%;
	padding: 20px 0px 10px 0px;
	font-family: 'Poppins', sans-serif;
	text-align: left;
	background-color: #2A3C59;
	}
	
.footer a {
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	}

.footer-left {
	clear: both;
	float: left;
	width: 94%;
	margin: 0% 3%;
	padding-top: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #ffffff;
	}
	
.footer-middle {
	clear: both;
	float: left;
	width: 94%;
	margin: 0% 3%;
	padding-top: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #ffffff;
	}

.footer-right {
	clear: both;
	float: left;
	width: 94%;
	margin: 0% 2%;
	padding-top: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #ffffff;
	}

.responsiveCal {
	position: relative; 
	padding-bottom: 75%; 
	height: 0;
	overflow: hidden;
}
 
.responsiveCal iframe {
	position: absolute; 
	top:0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

.deskContent {
	display:none;
}

.phoneContent {
	display: block;
}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. --------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 481px) {

body {
	margin: 0px;
	background-color: #ffffff;
	color:#363636;
	font-size:14px;
	font-family: 'Poppins', sans-serif;
	}
	
h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #ffffff;
	font-size: 22px;
	line-height: 26px;
	margin: 0px;
	padding: 0px;
	text-align: center;
}
	
h2 {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #252525;
	font-size: 18px;
	line-height: 30px;
	margin: 0;
	padding: 20px 0px 20px 0px;
	text-align: center;
}

h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	color: #ffffff;
	font-size: 16px;
	line-height: 20px;
	margin: 0px;
	padding: 0px;
	text-align: left;
}

hr.solid {
	border-top: 1px solid #252525;
  	width: 240px;
  	margin: 20px auto 30px auto;
}	

	
.gridContainer {
	width: 100%;
	max-width: 1230px;
	margin: auto;
}	
	
.top {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    background-color: #2A3C59;
    color: #ffffff;
    text-align: center;
	margin: 0;
}
	
.top-content {
		clear: both;
		display: block;
		width: 88%;
		color: #ffffff;
		text-align: right;
		margin: 0% 5%;
		padding: 20px 20px;
	}
	
.main-menu-container {
	clear: both;
    float: left;
    display: block;
    width: 100%;
    background-color: #ffffff;
    color: #ffffff;
    text-align: center;
	margin: 0;	
}
	
.main-menu-left {
	clear: both;
	float: left;
	margin-left: 2%;
	width: 96%;
	padding: 30px 0px;
	text-align: center;
	transition: transform .2s;
	}
	
.main-menu-right {
	clear: both;
	float: left;
	width: 96%;
	margin-left: 2%;
	padding: 20px 0px;
	text-align: left;
	}
/*styling section with skyline background------------------------------*/

.home-container {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    text-align: center;
	background-image: url("../img/home-header-tablet.jpg");
    background-position: top center;
    background-repeat: no-repeat;
	background-color: #ffffff;
	margin: 0;
	height: 572px;
}
	
.second-container {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    text-align: center;
	background-image: url("../img/header-second-tablet.jpg");
    background-position: top center;
    background-repeat: no-repeat;
	background-color: #ffffff;
	margin: 0;
	height: 230px;
}


.headline {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 20px 0px;
	font-family: 'Inter', sans-serif;
	text-align: center;
	background-color: #2A3C59;
	}
	
/*Styling middle-------------------------------------------------*/
	
.middle {
	clear: both;
	float: left;
	width: 98%;
	margin: 0 1%;
	padding-bottom: 30px;
	background-color: #ffffff;
	color: #363636;
	}
	
.mission-container {
	clear: both;
	float: left;
	width: 94%;
	margin: 0px 3%;
	}
	
.mission {
	width: 96%;
	margin: 0 2%;
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}
			
.vision-container {
	clear: both;
	float: left;
	width: 94%;
	margin: 0px 3%;
	}
		
.vision {
	width: 96%;
	margin: 0 2%;
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}
	
.markets {
	clear: both;
	float: left;
	width: 90%;
	margin: 20px 5% 30px 5%;
	text-align: center;
	}

.market-container {
	display: flex;
	flex-direction: row;
	align-items: flex-start; 
	flex-wrap: wrap;
	}
	
	
.market-col1 {
	margin: 20px 2%;
	flex: 0 1 250px;
	text-align: center;
	}

.market-col1:hover {
	background-color: #ffffff;
}
	

	
.market-photo {
	width: 100%;
	text-align: center;
	}

	
.market-title {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	padding-top: 20px;
	font-weight: normal;
	color: #252525;
	}

.employee-container {
	clear: both;
	float: left;
	width: 94%;
	margin: 0px 3%;
	}
		
.employee {
	width: 96%;
	margin: 0 2%;
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}

hr.solid2 {
	border-top: 1px solid #252525;
  	width: 240px;
  	margin: 10px auto 10px auto;
}
	
	
.team {
	clear: both;
	float: left;
	width: 90%;
	margin: 10px 5%;
		}	
	
.team-container {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
	
.team-member {
	margin-left: 20px;
	flex: 0 1 230px;
	text-align: center;
	}
	
.team-photo {
	padding: 20px 0px;
	text-align: center;	
	}
	
.team-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 16px;
	text-decoration: none;
	font-weight: 400;
	}

.team-details2 {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 16px;
	text-decoration: underline;
	font-weight: 600;	
	}

	
.story-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%;
	text-align: center;
	}
	
.story-container2 {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 0px 2%;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	}

.story-left {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	text-align: center;
	margin-left: 0%;
	padding-bottom: 20px;
	}
	
.story-right {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	text-align: center;
	margin-left: 0%;
	padding-bottom: 20px;
	}
	
/*Styling watts timeline--------------------------------------------------------------------*/
	
.history {
	clear: both;
	float: left;
	width: 90%;
	margin: 10px 5%;
	}	
	
.history-container {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	
.history-article {
	margin-left: 20px;
	flex: 0 1 400px;
	text-align: center;
	}
	
.history-year {
	font-family: 'poppins', sans-serif;
	font-size: 20px;
	line-height: 60px;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	background-image: url(https://harrywarrenga.com/img/watts/year-bg.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	color: #ffffff;
	}
	
.history-photo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.history-header {
	font-family: 'poppins', sans-serif;
	font-size: 18px;
	line-height: 22px;
	text-decoration: none;
	font-weight: 600;
	padding-top: 10px;
	height: 48px;
	}

.history-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	font-weight: 400;
	text-align: left;
	}
		
	/*Styling product lines--------------------------------------------------*/
	
.line {
	clear: both;
	float: left;
	width: 90%;
	margin: 10px 5%;
	}	
	
.line-container {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	}
	
.line-member {
	margin: 30px 20px 0 20px;
	flex: 0 1 300px;
	text-align: center;
	}
	
.line-logo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.line-name {
	font-family: 'poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	font-weight: 600;
	transition: transform .2s;
	}	
	
.line-name:hover {		
	-ms-transform: scale(1.1); /* IE 9 */
  	-webkit-transform: scale(1.1); /* Safari 3-8 */
  	transform: scale(1.1); 
	}

.line-extra {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-style: italic;
	font-weight: 400;
	color: #3684c6;
	}
	
.line-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #707070;
	}
	
/*Styling training--------------------------------------------------------------------*/

.statement {
	clear: both;
	float: left;
	display: block;
	width: 94%;
	margin: 20px 3% 0 3%;
	text-align: left;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	}
	
.training-member {
	margin: 10px 20px 0 20px;
	flex: 0 1 250px;
	text-align: center;
	}
	
.training-logo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.training-name {
	font-family: 'poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	font-weight: 600;
	}

.training-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #707070;
	}
	
.training-details:hover {		
	-ms-transform: scale(1.1); /* IE 9 */
  	-webkit-transform: scale(1.1); /* Safari 3-8 */
  	transform: scale(1.1); 
	}
	
/*Styling contact forms------------------------------------------*/
	
@media only screen and (max-width: 1000px) {
	
.contact-product-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0;
	background-color: #ebebeb;
	text-align: center;
	}
	
.contact-product {
	clear: both;
	float: left;
	width: 98%;
	margin: 0px 1%;
	padding: 30px 0;
	text-align: center;
	}	

.form {
	clear: both;
	float: left;
	display: block;
	width: 100%;	
	}

.contact1-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%;
	align-content: top center;
	}

.contact_spam {
	margin-left: 0px;
	padding-top: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	font-family: 'Poppins', sans-serif;
	color: #363636;
	}

.email-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin-bottom: 20px;
	}
	
.email-container-left {
	clear: both;
	float: left;
	display: block;
	text-align: right;
	width: 50%;
	margin-left: 8%;
	}
	
.email-container-right {
	clear: none;
	float: left;
	display: block;
	text-align: left;
	width: 40%;
	margin: 1px 0px 0px 0px;
	}

.email-hp {
	clear: both;
	float: left;
	text-align: center;
	display: none;
	width: 150px;
}
	
.thanks {
	clear: none;
	display: block;
	float: left;
	margin-top: 20px;
	width: 100%;
	text-align: center;
	background-color: #2A3C59;
	color: #ffffff;
	margin-left: 0%;
	padding: 18px;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
}
	
#email {
	width: 50%px;
	height: 50px;
	}

/*End Breakpoint for mobil contact---------------------------------------------*/
	}
/*----------------------------------------------------------------------------*/

input[type=submit] {
	background-color: #00aeef;
  	border: none;
  	color: #252525;
  	height: 52px;
  	text-decoration: none;
  	margin: 0px 0px 0px 0px;
  	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	padding: 0px 20px;
}

input[type=text] {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 1px 4px;}
	
textarea {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 1px 4px;
	}	

.contact-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%;		
	}
	
.contact-info1 {
	clear: both;
	float: left;
	display: block;
	width: 90%;
	margin: 20px 5%;
	}
	
.contact-info2 {
	clear: both;
	float: left;
	display: block;
	width: 90%;
	margin: 20px 5%;
	}
	

.contact-logo {
	width: 100%;
	padding: 20px 0px 10px 0px;	
	}
	
.contact-logo:hover {		
	-ms-transform: scale(1.05); /* IE 9 */
  	-webkit-transform: scale(1.05); /* Safari 3-8 */
  	transform: scale(1.05); 
	}

.contact-data {
	padding: 20px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	}
	
.form-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%; 
	}		


.contact-header {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin-left: 1%;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #252525;
	font-size: 28px;
	line-height: 36px;
	padding: 0px;
	text-align: center;	
	}
	
.contact-button {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 20px 0%;
	}
	
.button-left {
	clear: both;
	float: left;
	width: 48%;
	margin-left: 1%;
	}
	
.button-right {
	clear: none;
	float: left;
	width: 48%;
	margin-right: 1%;
	}

	
.button-normal {
    clear: both;
    float: left;
  	display: block;
	background-color: rgba(244,158,30); /* Orange */
  	border: none;
  	color: #252525;
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
	
.button-normal:hover {
    clear: both;
    float: left;
  	display: block;
	background-color: #00aeef; /* light blue */
  	border: none;
  	color: #252525;
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
	
.button-light {
    clear: both;
    float: left;
  	display: block;
	background-color: rgba(244,158,30, 0.5); /* Orange */
  	border: none;
  	color: rgba(37,37,37, 0.5);
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
		
.button-bold {
    clear: both;
    float: left;
  	display: block;
	background-color: #00aeef; /* light blue */
  	border: none;
  	color: #252525;
	width: 98%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}


.contact-form {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0px 0%;
	text-align: center;
	}
	
.contact2-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 20px 0%;
	text-align: center;
	}
	
#formlabel {
	width: 96%;
	margin: 10px 2%;
	padding: 6px 4px
	}
	
#submit_button2 {
	margin-top: 20px;
	}


/*Styling Spotlight----------------------------------------------*/
	
.spotlight {
	clear: both;
	float: left;
	display: block;
	width: 94%;
	margin: 20px 3%;		
	}
	
.spotlight-container {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin: 10px 1%;
	}

.spotlight-logo {
	text-align: center;
	margin-top: 30px;		
	}
	
.spotlight-name {
	font-family: 'inter', sans-serif;
	font-size: 40px;
	font-weight: 900;
	text-align: center;
	color: #aa141a;
	padding: 30px 0;
	}
	
.spotlight-photo {
	text-align: center;	
	}

.spotlight-content {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin: 0 1%;	
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 0px;
	}
	
.spotlight-list {
	clear: both;
	float: left;
	display: block;
	width: 90%;
	margin: 0 1% 0% 4%;		
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 0px;
}
	
cite {
	clear: both;
	float: left;
	display: block;
	width: 98%;
	margin: 0 1%;	
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 20px;
	}

	
/*Styling calendar-------------------------------------------------*/
.calendar-container {
	clear: both;
	float: left;
	display: block;
	width: 94%;
	margin: 20px 3%;		
	}

.calendar-left {
	clear: both;
	float: left;
	display: block;
	width: 100%;
}

.calendar-right {
	clear: both;
	float: left;
	display: block;
	width: 100%;
}


/*Styling footer-------------------------------------------------*/
	
.footer {
	clear: both;
	float: left;
	width: 100%;
	margin: 0% 0%;
	padding: 20px 0px;
	font-family: 'Poppins', sans-serif;
	text-align: left;
	background-color: #2A3C59;
	}
	
.footer a {
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	}

.footer-left {
	clear: both;
	float: left;
	width: 94%;
	margin: 0% 3%;
	padding-top: 10px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #ffffff;
	}
	
.footer-middle {
	clear: both;
	float: left;
	width: 94%;
	margin: 0% 3%;
	padding-top: 100px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #ffffff;
	}

.footer-right {
	clear: both;
	float: left;
	width: 94%;
	margin: 0% 2%;
	padding-top: 0px;
	font-family: 'Poppins', sans-serif;
	font-size: 14px;
	text-align: left;
	color: #ffffff;
	}

.responsiveCal {
position: relative; padding-bottom: 75%; height: 0; width: 96%; margin-left: 2%; overflow: hidden;
}
 
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}

.deskContent {
	display:block;
}
	
.phoneContent {
	display:none;
}

	
	/* End Tablet Layout----------------------------------------------------------------------------------------------------------------------------------------------------------*/
}


/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout.----------------------------------------------------------------------------- */

@media only screen and (min-width: 769px) {

body {
	margin: 0px;
	background-color: #ffffff;
	color:#363636;
	font-size:14px;
	font-family: 'Poppins', sans-serif;
	}
	
h1 {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #ffffff;
	font-size: 32px;
	line-height: 32px;
	margin: 0px;
	padding: 0px 30px;
	text-align: center;
}

	
h2 {
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #252525;
	font-size: 28px;
	line-height: 30px;
	margin: 0;
	padding: 20px 0;
	text-align: center;
}

h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	color: #ffffff;
	font-size: 22px;
	line-height: 22px;
	margin: 0 0 20px 0px;
	padding: 0px;
	text-align: left;
}

hr.solid {
	border-top: 1px solid #252525;
  	width: 240px;
  	margin: 20px auto 30px auto;
}


	
.gridContainer {
	width: 100%;
	max-width: 1120px;
	margin: auto;
}	
	
.top {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    background-color: #2A3C59;
    color: #ffffff;
    text-align: center;
	margin: 0;
}

.top-content {
		clear: both;
		display: block;
		width: 90%;
		color: #ffffff;
		text-align: right;
		margin: 0% 5%;
		padding: 10px 50px;
	}
	
.main-menu-container {
	clear: both;
    float: left;
    display: block;
    width: 100%;
    background-color: #ffffff;
    color: #ffffff;
    text-align: left;
	margin: 0;	
}
	
.main-menu-left {
	clear: both;
	float: left;
	margin-left: 5%;
	width: 20%;
	padding: 30px 0px;
	text-align: left;
	transition: transform .2s;
	}
	
.main-menu-right {
	clear: none;
	float: right;
	margin-right: 5%;
	width: 65%;
	padding: 20px 0px;
	}

/*styling section with skyline background------------------------------*/

.home-container {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    text-align: center;
	background-image: url("../img/home-header-desktop.jpg");
    background-position: top center;
    background-repeat: no-repeat;
	background-color: #ffffff;
	margin: 0;
	height: 566px;
}

.second-container {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    text-align: center;
	background-image: url("../img/header-second-desktop.jpg");
    background-position: top center;
    background-repeat: no-repeat;
	background-color: #ffffff;
	margin: 0;
	height: 340px;
}
	
.headline {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 20px 0px;
	font-family: 'Inter', sans-serif;
	text-align: center;
	background-color: #2A3C59;
	}
	
/*Styling middle-------------------------------------------------*/
	
.middle {
	clear: both;
	float: left;
	width: 100%;
	margin: 0;
	padding-bottom: 0px;
	background-color: #ffffff;
	color: #363636;
	}
	
.mission-container {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	}
	
.mission {
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}
			
.vision-container {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	}
		
.vision {
	padding: 30px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}
	
.markets {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px 0 0px 0;
	padding: 20px 0;
	background-color: #f7f7f7;
	}
	
.market-container {
	display: flex;
	flex-direction: row;
	align-items: flex-start; 
	flex-wrap: nowrap;
	}
	
.market-col1 {
	padding: 20px 20px;
	text-align: center;
	background-color: #ffffff;	
	margin: 20px 10px;
	flex: 0 1 210px;
	}
	
.market-col1:hover {
	box-shadow: 5px 5px 10px 10px #e0e0e0;
	}
	
.market-photo {
	width: 100%;
	text-align: center;
	}

	
.market-title {
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	padding-top: 20px;
	font-weight: normal;
	color: #252525;
	}
	
.employee-container {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	}
	
.employee {
	padding: 40px 0px 10px 0px;
	font-size: 16px;
	line-height: 20px;
	font-family: 'Poppins', sans-serif;
	}

hr.solid2 {
	border-top: 1px solid #252525;
  	width: 350px;
  	margin: 10px auto 20px auto;
}
	

.team {
	clear: both;
	float: left;
	width: 90%;
	margin: 0px 5% 20px 5%;
	}	
	
.team-container {
	margin-top: 0px;
	display: flex;
	flex-wrap: wrap;}
	
.team-member {
	margin: 30px 0 0 20px;
	flex: 0 1 250px;
	text-align: center;
	}
	
.team-photo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.team-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	font-weight: 400;
	}

.team-details2 {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-decoration: underline;
	font-weight: 600;	
	}
	
.story-container {
	clear: both;
	float: left;
	display: block;
	width: 70%;
	margin: 20px 15%;
	text-align: center;
	}
	
.story-container2 {
	clear: both;
	float: left;
	display: block;
	width: 60%;
	margin: 0px 20%;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	}

	
.story-left {
	clear: both;
	float: left;
	display: block;
	width: 58%;
	margin: 0 1%;
	padding-bottom: 30px;
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	}
	
.story-right {
	clear: none;
	float: left;
	display: block;
	width: 38%;
	margin: 0 1%;
	padding-bottom: 30px;
	text-align: center;
	}
	
/*Styling watts timeline--------------------------------------------------------------------*/
	
.history {
	clear: both;
	float: left;
	width: 96%;
	margin: 0px 2% 20px 2%;
	}	
	
.history-container {
	margin-top: 0px;
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;}
	
.history-article {
	margin: 30px 0 0 20px;
	flex: 0 1 320px;
	text-align: center;
	}
	
.history-year {
	font-family: 'poppins', sans-serif;
	font-size: 20px;
	line-height: 60px;
	text-decoration: none;
	font-weight: 600;
	text-align: center;
	background-image: url(https://harrywarrenga.com/img/watts/year-bg.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	color: #ffffff;
	}
	
.history-photo {
	padding: 20px 10px 10px 10px;
	text-align: center;	
	}
	
.history-header {
	font-family: 'poppins', sans-serif;
	font-size: 18px;
	line-height: 22px;
	text-decoration: none;
	font-weight: 600;
	padding-top: 10px;
	}

.history-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	text-decoration: none;
	font-weight: 400;
	text-align: left;
	}
	
	
/*Styling product lines--------------------------------------------------------------------*/
	
	
.line {
	clear: both;
	float: left;
	width: 90%;
	margin: 0px 5%;
	}	
	
.line-container {
	margin: 30px 0px;
	display: flex;
	flex-wrap: wrap;
	}
	
	
.line-member {
	margin: 30px 20px 0 20px;
	flex: 0 1 250px;
	text-align: center;
	}
	
.line-logo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.line-name {
	font-family: 'poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	font-weight: 600;
	transition: transform .2s;
	}
	
.line-name:hover {		
	-ms-transform: scale(1.1); /* IE 9 */
  	-webkit-transform: scale(1.1); /* Safari 3-8 */
  	transform: scale(1.1); 
}

.line-extra {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-style: italic;
	font-weight: 400;
	color: #3684c6;
	}
	
.line-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #707070;
	}
	
/*Styling training--------------------------------------------------------------------*/

.statement {
	clear: both;
	float: left;
	display: block;
	width: 80%;
	margin: 30px 10% 10px 10%;
	text-align: center;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: 400;
	}
	
.training-member {
	margin: 30px 20px 0 20px;
	flex: 0 1 250px;
	text-align: center;
	}
	
.training-logo {
	padding: 10px 10px 10px 10px;
	text-align: center;	
	}
	
.training-name {
	font-family: 'poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	font-weight: 600;
	}

.training-details {
	font-family: 'poppins', sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #707070;
	}
	
.training-details:hover {		
	-ms-transform: scale(1.1); /* IE 9 */
  	-webkit-transform: scale(1.1); /* Safari 3-8 */
  	transform: scale(1.1); 
	}
		
	
/*Styling Spotlight----------------------------------------------*/
	
.spotlight {
	clear: both;
	float: left;
	display: block;
	width: 70%;
	margin: 20px 15%;		
	}
	
.spotlight-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	}

.spotlight-logo {
	text-align: center;
	margin-top: 30px;		
	}
	
.spotlight-name {
	font-family: 'inter', sans-serif;
	font-size: 40px;
	font-weight: 900;
	text-align: center;
	color: #aa141a;
	padding: 30px 0;
	}
	
.spotlight-photo {
	text-align: center;	
	}

.spotlight-content {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 0px;
	}
	
.spotlight-list {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	magin: 0 2%;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	font-weight: normal;
	padding: 10px 0px 20px 0px;
	}
		
cite {
	clear: both;
	float: left;
	width: 100%;
	text-align: right;
	padding: 30px 30px;
	}

	
/*Styling calendar-------------------------------------------------*/
.calendar-container {
	clear: both;
	float: left;
	display: block;
	width: 96%;
	margin: 20px 2%;		
	}

.calendar-left {
	clear: both;
	float: left;
	display: block;
	width: 50%;
}

.calendar-right {
	clear: none;
	float: left;
	display: block;
	width: 50%;
}
	


/*Styling contact------------------------------------------------*/

@media only screen and (min-width: 1001px) {
.contact-product-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0;
	background-color: #ebebeb;
	text-align: center;
	}
	
.contact-product {
	clear: both;
	float: left;
	width: 50%;
	margin: 0px 25%;
	padding: 30px 0;
	text-align: center;
	}	

.form {
	clear: both;
	float: left;
	display: block;
	width: 100%;	
	}

.contact1-container {
	clear: both;
	float: left;
	display: block;
	width: 70%;
	margin: 20px 15%;
	}

.contact_spam {
	margin-left: 0px;
	padding-top: 10px;
	text-align: center;
	font-size: 14px;
	font-weight: normal;
	font-family: 'Poppins', sans-serif;
	color: #363636;
	}

	
.email-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin-bottom: 20px;
	}
	
.email-container-left {
	clear: both;
	float: left;
	display: block;
	text-align: right;
	width: 50%;
	margin-left: 8%;
	}
	
.email-container-right {
	clear: none;
	float: left;
	display: block;
	text-align: left;
	width: 40%;
	margin: 1px 0px 0px 0px;
	}

.email-hp {
	clear: both;
	float: left;
	text-align: center;
	display: none;
	width: 150px;
}
	
.thanks {
	clear: none;
	display: block;
	float: left;
	margin-top: 20px;
	width: 100%;
	text-align: center;
	background-color: #2A3C59;
	color: #ffffff;
	margin-left: 0%;
	padding: 18px;
	font-size: 18px;
	font-weight: 400;
	font-family: 'Poppins', sans-serif;
}
	
#email {
	width: 300px;
	height: 50px;
	}
/*end specital styling mobil devises-----------------------------------*/
	}
/*---------------------------------------------------------------------*/
	
input[type=submit] {
	background-color: #00aeef;
  	border: none;
  	color: #252525;
  	height: 52px;
  	text-decoration: none;
  	margin: 0px 0px 0px 0px;
  	cursor: pointer;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	padding: 0px 20px;
}
	
input[type=text] {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 1px 4px;}
	
textarea {
	background-color: #ffffff;
	border: 1px solid #e1e1e1;
	padding: 1px 4px;}
	
.contact-container {
	clear: both;
	float: left;
	display: block;
	width: 80%;
	margin: 20px 10%;		
	}
	
.contact-info1 {
	clear: both;
	float: left;
	display: block;
	width: 40%;
	margin: 20px 0;
	}
	
.contact-info2 {
	clear: none;
	float: left;
	display: block;
	width: 58%;
	margin: 40px 1%;
	}
	

.contact-logo {
	width: 100%;
	padding: 20px 0px 10px 0px;	
	}
	
.contact-logo:hover {		
	-ms-transform: scale(1.05); /* IE 9 */
  	-webkit-transform: scale(1.05); /* Safari 3-8 */
  	transform: scale(1.05); 
	}

.contact-data {
	padding: 20px 0;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	}
	
.form-container {
	clear: both;
	float: left;
	display: block;
	width: 80%;
	margin: 20px 10%; 
	}		


.contact-header {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin-left: 10px;
	font-family: 'Inter', sans-serif;
	font-weight: 400;
	color: #252525;
	font-size: 28px;
	line-height: 36px;
	padding: 0px;
	text-align: center;	
	}
	
.contact-button {
	clear: both;
	float: left;
	display: block;
	width: 70%;
	margin: 40px 15%;
	}
	
.button-left {
	clear: both;
	float: left;
	width: 40%;
	margin: 0px 5%;
	}
	
.button-right {
	clear: none;
	float: left;
	width: 40%;
	margin: 0px 5%;
	}

	
.button-normal {
    clear: both;
    float: left;
  	display: block;
	background-color: rgba(244,158,30); /* Orange */
  	border: none;
  	color: #252525;
	width: 90%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
	
.button-normal:hover {
    clear: both;
    float: left;
  	display: block;
	background-color: #00aeef; /* light blue */
  	border: none;
  	color: #252525;
	width: 90%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
	
.button-light {
    clear: both;
    float: left;
  	display: block;
	background-color: rgba(244,158,30, 0.5); /* Orange */
  	border: none;
  	color: rgba(37,37,37, 0.5);
	width: 90%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}
		
.button-bold {
    clear: both;
    float: left;
  	display: block;
	background-color: #00aeef; /* light blue */
  	border: none;
  	color: #252525;
	width: 90%;
	height: 40px;  	
  	text-align: center;
  	text-decoration: none;
  	font-size: 16px;
	line-height: 40px;
	}


.contact-form {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 0px 0%;
	text-align: center;
	}
	
.contact2-container {
	clear: both;
	float: left;
	display: block;
	width: 100%;
	margin: 20px 0%;
	text-align: center;
	}
	
#formlabel {
	width: 54%;
	margin: 10px 18%;
	padding: 6px 4px
	}
	
#submit_button2 {
	margin-top: 20px;
	}
	
/*Styling footer-------------------------------------------------*/
	
.footer {
	clear: both;
	float: left;
	width: 100%;
	margin: 0px;
	padding: 20px 0px;
	font-family: 'Poppins', sans-serif;
	text-align: left;
	background-color: #2A3C59;
	}
	
.footer a {
	color: #ffffff;
	font-family: 'Poppins', sans-serif;
	text-decoration: none;
	}

.footer-left {
	clear: both;
	float: left;
	width: 40%;
	margin: 0% 0% 0% 10%;
	padding-top: 20px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	text-align: left;
	color: #ffffff;
	}
	
.footer-middle {
	clear: none;
	float: left;
	width: 20%;
	margin: 0px;
	padding-top: 50px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	text-align: left;
	color: #ffffff;
	}

.footer-right {
	clear: none;
	float: left;
	width: 20%;
	margin: 0% 10% 0% 0%;
	padding-top: 50px;
	font-family: 'Poppins', sans-serif;
	font-size: 16px;
	text-align: left;
	color: #ffffff;
	}
	
.responsiveCal {
position: relative; padding-bottom: 75%; height: 0; width: 80%; margin-left: 10%; overflow: hidden;
}
 
.responsiveCal iframe {
position: absolute; top:0; left: 0; width: 100%; height: 100%;
}

.deskContent {
	display:block;
}
	
.phoneContent {
	display:none;
}


	
/* End Desktop Layout-----------------------------------------------------------------------------------------------------------------------------------------------------------*/
	
}