@import url('https://fonts.googleapis.com/css?family=Open+Sans');

	*{
		margin: 0;
		padding: 0;
		outline: none;
		box-sizing: border-box;
	}


@media screen and (max-width: 7680px){
	
	.headercolor{
		background: url("images/top-image3.jpg") no-repeat top center;
		width: 100%;
		height: 12vh;
		background-size: cover;	
		
	}

	.logo-and-name {
		margin-left: 10%;
		margin-top: 10%;
	}
	
	.company-name {
		color:maroon;
		font-family:Agency FB;
		font-size:220%;
		margin-left:5%;
	}

	.paint {
		color:Darkblue;
	}
	
	
	.logo {
		width: 90px;
		height: 60px;
	}
	
	
	.nav-new  {
	background-color:maroon;
	color: white;
	font-size:12px;
	font-weight:bold;
	font-family: Tahoma;
	text-align: center;
}

	.nav-new li{
		list-style-type: none;
		display: inline-block;
		padding: 6px 30px;
		position: relative;
	}


	.nav-new a{
		background-color:maroon;
		color: white;
		text-decoration: none;
	}

	.nav-new li:hover {
		color:rgb(19,19,87);
	}

	.nav-new a:hover {
		color:rgb(19,19,87);
	}

	.submenu{
		position: absolute;
		background-color: maroon;
		list-style-type: none;
		width: 130%;
		padding-left: 0px;
		padding-top: 5px;
		margin-left: 0px;
		opacity: 0;
		font-size: 90%;
		text-align: left;
	}

	.nav-new li:hover .submenu{
		background-color:maroon;
		opacity: 1;
	}

	.submenu a:hover {
		color: rgb(19,19,87);
	}
	
	.back-image-home{
		background: url("images/Background.jpg") no-repeat top center;
		width: 100%;
		height: 100vh;
		background-size: cover;
	}	

	#media-homepage {
		background-color:maroon;
		height:50%;
		font-size:15px;
		padding:1% 1% 1% 3%;
		color:white;
		font-family:Tahoma;
	}


	#medialinks-homepage {
		background-color:none;
		height:25px;
		font-size:0px;
		font-family:none;
	}

	#medialinks-homepage ul {
		padding:0px 0px 0px 5px;
		margin:0px;
		list-style-type:none;
		text-align:left;
		height:25px;
		line-height:50px;
	}

	#medialinks-homepage li {
		display:inline;
		padding:0px 0px 0px 40px;
		background-color:none;
	}
	
	
	.iconsfront{
		width: 30px;
		height: 30px;
		display: inline;
		}

	#medialinks-homepage a {
		color:black;
		text-decoration:none;
	}


	#medialinks-homepage a:hover {
		color:red;
	}

	.footer{
		position: bottom;
		left: 0px;
		right: 0px;
		background-color:rgb(30,30,30);
		height:110%;
		font-weight:light;
		font-family:Tahoma;
		color:grey;
	}


	.footercontacts li{
		padding:8px;
		margin:0;
		list-style-type:none;
		text-align:center;
		height:30px;
		line-height:15px;
		font-size: 10px;
	}

	.footerdesigner{
		display: none;
		text-align:right;
		font-size:8px;
		font-style:italic;
	}

	.footer a:hover{
		text-decoration:underline;
	}

	.footer a {
		text-decoration:none;
		color:grey;
		padding:4px 8px 15px 8px;
		vertical-align:middle;
	}

	.media-table{
		position:fixed;
		top: 22%;
		left: 80%;
	}

	.tablerowlinks {
		text-align: center
		padding: 2px;
		height: 30px;
		font-size: 15px;
		margin-bottom: 30px;
		margin-left: 10px;
		color: silver;
	}
	
	.back-image{
		background:url("images/Solar3.jpg") no-repeat top center;
		width: 100%;
		height: 100vh;
		background-size: cover;
		font-size: 16px;
		font-family: 'Open Sans', sans-serif;
	}

	.wrapper{
		position: absolute;
		top: 63%;
		left: 25%;
		transform: translate(-50%,-50%); 
	}

	.contact-us{
		width: 150%;
		max-width: 120%;
		height: auto;
		background: rgba(100,0,0,0.5);
		padding: 10px 20px;
		border-radius: 5px;
		margin-left: 23%;
	}


	.input-fields{
		padding: 0 10px;
	}

	.input-fields .items{
		width: 100%;
		padding: 8px;
	}

	.input-fields .items .label{
		display: block;
		font-size: 1em;
		color: silver;
		text-transform: capitalize;
		padding: 5px;
	}

	.input-fields .items .input,
	.input-fields .items .text-area{
		background: transparent;
		border: 0;
		border: 1px solid silver;
		width: 100%;
		padding: 8px 10px;
		font-size: 1em;
		color: rgb(170,193,221);
		border-radius: 3px;
	}

	.items #msg{
		height: 100px;
	}	

	.msg-box {
		height:100px;
		background: transparent;
		border: 0;
		border: 1px solid silver;
		width: 100%;
		padding: 8px 10px;
		font-size: 1.2em;
		color: rgb(200,110,100);
		border-radius: 3px;
	}

	.sub-btn {
		background:  rgb(0,0,0,0.0);
		color:silver;
		font-size: 1.25em;
		padding: 1px 10px;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		border-radius: 1px;
		cursor: pointer;
		letter-spacing: 2px;
		margin-left: 7%;
	
	}


	.contact-details {
		position: absolute;
		top: 35%;
		left: 150px;
		transform: translate(-50%,-50%);
		font-size: 80%;
		font-family: 'Open Sans', sans-serif;
		padding: 20px;
		border-radius: 5px;
	}

	.googlemap {
		position: relative;
		display: none;
		top: 40%;
		left: 55%;
		border: none;
		padding: 0px;
		height: 31%;
		width: 61%;
	}
	
	#history ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:100%;
		margin-left:5%;
		font-family:Tahoma;
	}


	.t2 {
		margin-left:5%;
		padding:5px 0px 5px 0px;
		color:black;
		font-weight:light;
		font-family:Tahoma;
		width: 95%;
		height: 70vh;
	}

	.direct {
		color: black;
		font-size: 95%;
		line-height:1.2em;
		background-color:rgb(250,240,240);
		padding: 5px 5px 1px 15px;
		border:silver 1px solid;
		width: 80%;
		font-family:Tahoma;
	}
	

	.di {
		padding:0px 0px 1px 0px;
		color:maroon;
		font-weight:bold;
		font-family:Tahoma;
		font-size: 80%;
		margin-left:5px;

	}

	.si {
		font-size: 80%;
		margin-left:5px;
		font-family:Tahoma;
	}

	.pi {
		display: none;
		margin-left:5px;
		color:black;
		font-size: 55%;
		font-family:Tahoma;
	}


	#vision, #values, #val1, #strat {
		color: black;
		font-size: 95%;
		line-height:1.2em;
		padding: 0px 5px 0px 5px;
		margin-right:5%;
		font-family:Tahoma;
		width: 93%;
	}

	.vist {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
		font-family:Tahoma;
	}

	.mis {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
	}

	#val1 {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
		font-family:Tahoma;
	}

	#strat {
		padding: 5px 5px 5px 5px;
		font-family:Tahoma;
	}

	.parl {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
	}

	k {
		font-weight:bold;
		color:maroon;
	}

	c {
		text-decoration:underline;
	}


	#pag {
		background-color:rgb(220,220,240);
		width: 100%;
		height: 130vh;
	}


	#pag-col-services {
		background-color:rgb(220,220,240);
		height: 320vh;
	}

	#pag-col-about-us {
		background-color:rgb(220,220,240);
		width: 100%;
		height: 130vh;
	}


	#services ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:85%;
		margin-left:15%;
		font-family:Tahoma;
	}

	#services-elec ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:85%;
		margin-left:50%;
		font-family:Tahoma;
	}

	#service-vm ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:85%;
		margin-left:50%;
		font-family:Tahoma;
	}

	.paint11 {
		float:top-right;
		margin-left: 20%;
		margin-bottom:0px;
		margin-right:0%;
		border:solid 1px maroon;
		width: 60%;
		Height: 30%;
	}

	.newinstal {
		margin-left:50%;
		padding:2px 0px 5px 0px;
		color:black;
		font-weight:light;
		font-family:Tahoma;
	}

	.new ul {
		color: black;
		font-size: 85%;
		line-height:1.5em;
		background-color:rgb(250,240,240);
		padding: 10px 20px 10px 20px;
		border:silver 1px solid;
		margin-right:0px;
		font-family:Tahoma;
		list-style-type:none;
		width: 120%;
	}

	k1 {
		font-weight:bold; 
		color:black;
	}

	.verific {
		margin-left:0%;
		padding:2px 0px 5px 0px;
		color:black;
		font-weight:light;
		font-family:Tahoma;
	}

	.verif ul {
		color: black;
		font-size: 85%;
		line-height:1.5em;
		background-color:rgb(250,240,240);
		padding: 10px 5px 10px 5px;
		border:silver 1px solid;
		margin-left:80%;
		font-family:Tahoma;
		list-style-type:none;
		width: 48%;
	}

	.painting ul {
		color: black;
		font-size: 85%;
		line-height:1.5em;
		background-color:rgb(250,240,240);
		padding: 10px 5px 10px 5px;
		border:silver 1px solid;
		margin-left:80%;
		font-family:Tahoma;
		list-style-type:none;
		width: 35%;
	}


	.paint12 {
		float:left;
		margin-left: 30%;
		margin-bottom:0px;
		margin-right:15%;
		border:solid 1px maroon;
		width: 40%;
		Height: 30%;
	}


	.newspage {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-weight: bold;
		font-size: 25px;
	}

	.tablerow {
		margin-left:25px;
	}


	.formhead {
		font-weight:bold;
		color:maroon;
	}

	.dcmhead {
		margin-left:20px;
		font-family:tahoma;
		font-size:15px;
		margin-top: 20px;
	}

	.DCM {
		margin-right:20px;
		margin-left:20px;
		padding:15px 15px 15px 15px;
		border: silver 1px solid;
		font-family:tahoma;
		font-size:20px;
	}	












@media screen and (max-width: 360px){
	
	.headercolor{
		background: url("images/top-image3.jpg") no-repeat top center;
		width: 100%;
		height: 12vh;
		background-size: cover;
		
	}

	.logo-and-name {
		margin-left: 10%;
		margin-top: 10%;
	}
	
	.company-name {
		color:maroon;
		font-family:Agency FB;
		font-size:160%;
		margin-left:5%;
	}

	.paint {
		color:Darkblue;
	}
	
	
	.logo {
		width: 50px;
		height: 40px;
	}
	
	
	.nav-new  {
	background-color:maroon;
	color: white;
	font-size:12px;
	font-weight:bold;
	font-family: Tahoma;
	text-align: center;
}

	.nav-new li{
		list-style-type: none;
		display: inline-block;
		padding: 6px 25px;
		position: relative;
	}


	.nav-new a{
		background-color:maroon;
		color: white;
		text-decoration: none;
	}

	.nav-new li:hover {
		color:rgb(19,19,87);
	}

	.nav-new a:hover {
		color:rgb(19,19,87);
	}

	.submenu{
		position: absolute;
		background-color: maroon;
		list-style-type: none;
		width: 130%;
		padding-left: 0px;
		padding-top: 5px;
		margin-left: 0px;
		opacity: 0;
		font-size: 90%;
		text-align: left;
	}

	.nav-new li:hover .submenu{
		background-color:maroon;
		opacity: 1;
	}

	.submenu a:hover {
		color: rgb(19,19,87);
	}
	
	.back-image-home{
		background: url("images/Background.jpg") no-repeat top center;
		width: 100%;
		height: 70vh;
		background-size: cover;
	}	

	#media-homepage {
		background-color:maroon;
		height:50%;
		font-size:15px;
		padding:1% 1% 1% 3%;
		color:white;
		font-family:Tahoma;
	}


	#medialinks-homepage {
		background-color:none;
		height:25px;
		font-size:0px;
		font-family:none;
	}

	#medialinks-homepage ul {
		padding:0px 0px 0px 5px;
		margin:0px;
		list-style-type:none;
		text-align:left;
		height:25px;
		line-height:50px;
	}

	#medialinks-homepage li {
		display:inline;
		padding:0px 0px 0px 40px;
		background-color:none;
	}
	
	
	.iconsfront{
		width: 30px;
		height: 30px;
		display: inline;
		}

	#medialinks-homepage a {
		color:black;
		text-decoration:none;
	}


	#medialinks-homepage a:hover {
		color:red;
	}

	.footer{
		position: bottom;
		left: 0px;
		right: 0px;
		background-color:rgb(30,30,30);
		height:140%;
		font-weight:light;
		font-family:Tahoma;
		color:grey;
	}


	.footercontacts li{
		padding:8px;
		margin:0;
		list-style-type:none;
		text-align:center;
		height:30px;
		line-height:15px;
		font-size: 10px;
	}

	.footerdesigner{
		display: none;
		text-align:right;
		font-size:8px;
		font-style:italic;
	}

	.footer a:hover{
		text-decoration:underline;
	}

	.footer a {
		text-decoration:none;
		color:grey;
		padding:4px 8px 15px 8px;
		vertical-align:middle;
	}


	.media-table{
		position:relative;
		top: 72%;
		left: 10%;
		display: none;
		
	}

	.tablerowlinks {
		text-align: center
		padding: 2px;
		height: 30px;
		font-size: 15px;
		margin-bottom: 30px;
		margin-left: 10px;
		color: silver;
		display: none;
	}
	

	.back-image{
		background:url("images/Solar3.jpg") no-repeat top center;
		width: 100%;
		height: 110vh;
		background-size: cover;
		font-size: 16px;
		font-family: 'Open Sans', sans-serif;
	}

	.wrapper{
		position: absolute;
		top: 75%;
		left: 25%;
		transform: translate(-50%,-50%); 
	}

	.contact-us{
		width: 130%;
		max-width: 120%;
		height: auto;
		background: rgba(100,0,0,0.5);
		padding: 10px 20px;
		border-radius: 5px;
		margin-left: 23%;
	}


	.input-fields{
		padding: 0 10px;
	}

	.input-fields .items{
		width: 100%;
		padding: 8px;
	}

	.input-fields .items .label{
		display: block;
		font-size: 1em;
		color: silver;
		text-transform: capitalize;
		padding: 5px;
	}

	.input-fields .items .input,
	.input-fields .items .text-area{
		background: transparent;
		border: 0;
		border: 1px solid silver;
		width: 100%;
		padding: 8px 10px;
		font-size: 1em;
		color: rgb(170,193,221);
		border-radius: 3px;
	}

	.items #msg{
		height: 100px;
	}	

	.msg-box {
		height:100px;
		background: transparent;
		border: 0;
		border: 1px solid silver;
		width: 100%;
		padding: 8px 10px;
		font-size: 1.2em;
		color: rgb(200,110,100);
		border-radius: 3px;
	}

	.sub-btn {
		background:  rgb(0,0,0,0.0);
		color:silver;
		font-size: 1.25em;
		padding: 1px 10px;
		text-align: center;
		text-transform: uppercase;
		font-weight: bold;
		border-radius: 1px;
		cursor: pointer;
		letter-spacing: 2px;
		margin-left: 7%;
	
	}


	.contact-details {
		position: absolute;
		top: 35%;
		left: 150px;
		transform: translate(-50%,-50%);
		font-size: 80%;
		font-family: 'Open Sans', sans-serif;
		padding: 20px;
		border-radius: 5px;
	}

	.googlemap {
		position: relative;
		top: 20%;
		left: 20%;
		display: none;
		border: none;
		padding: 0px;
		height: 11%;
		width: 31%;
	}
	
	#history ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:100%;
		margin-left:5%;
		font-family:Tahoma;
	}

	.dir {
		float: top-right;
		margin-left:5px;
		margin-bottom:-8px;
		margin-right:10px;
		border:solid 1px maroon;
		width: 120%;	
	}

	.t2 {
		margin-left:5%;
		padding:5px 0px 5px 0px;
		color:black;
		font-weight:light;
		font-family:Tahoma;
		width: 85%;
		height: 70vh;
	}

	.direct {
		color: black;
		font-size: 95%;
		line-height:1.2em;
		background-color:rgb(250,240,240);
		padding: 5px 5px 1px 15px;
		border:silver 1px solid;
		width: 80%;
		font-family:Tahoma;
	}
	

	.di {
		padding:0px 0px 1px 0px;
		color:maroon;
		font-weight:bold;
		font-family:Tahoma;
		font-size: 80%;
		margin-left:5px;
	}


	.si {
		font-size: 55%;
		margin-left:5px;
		font-family:Tahoma;
	}

	.pi {
		display: none;
		margin-left:5px;
		color:black;
		font-size: 55%;
		font-family:Tahoma;
		
	}


	#vision, #values, #val1, #strat {
		color: black;
		font-size: 95%;
		line-height:1.2em;
		padding: 0px 5px 0px 5px;
		margin-right:5%;
		font-family:Tahoma;
		width: 93%;
	}

	.vist {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
		font-family:Tahoma;
	}

	.mis {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
	}

	#val1 {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
		font-family:Tahoma;
	}

	#strat {
		padding: 5px 5px 5px 5px;
		font-family:Tahoma;
	}

	.parl {
		border:silver 1px solid;
		background-color:rgb(250,240,240);
		padding: 15px 5px 15px 15px;
	}

	k {
		font-weight:bold;
		color:maroon;
	}

	c {
		text-decoration:underline;
	}


	#pag {
		background-color:rgb(220,220,240);
		width: 100%;
		height: 130vh;
	}


	#pag-col-services {
		background-color:rgb(220,220,240);
		height: 300vh;
	}

	#pag-col-about-us {
		background-color:rgb(220,220,240);
		height: 250vh;
	}


	#services ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:85%;
		margin-left:10%;
		font-family:Tahoma;
	}

	#services-elec ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:85%;
		margin-left:10%;
		font-family:Tahoma;
	}

	#service-vm ul {
		list-style-type:none;
		color:maroon;
		font-weight:bold;
		font-size:85%;
		margin-left:10%;
		font-family:Tahoma;
	}

	.paint11 {
		float:top-right;
		margin-left: 30%;
		margin-bottom:0px;
		margin-right:0%;
		border:solid 1px maroon;
		width: 60%;
		Height: 20%;
	}

	.newinstal {
		margin-left:5%;
		padding:2px 0px 2px 0px;
		color:black;
		font-weight:light;
		font-family:Tahoma;
	}

	.new ul {
		color: black;
		font-size: 75%;
		line-height:1.5em;
		background-color:rgb(250,240,240);
		padding: 5px 20px 5px 10px;
		border:silver 1px solid;
		margin-right:0px;
		font-family:Tahoma;
		list-style-type:none;
		width: 145%;
	}

	k1 {
		font-weight:bold; 
		color:black;
	}


	.verific {
		margin-left:0%;
		padding:0px 0px 0px 0px;
		color:black;
		font-weight:light;
		font-family:Tahoma;
	}

	.verif ul {
		color: black;
		font-size: 75%;
		line-height:1.5em;
		background-color:rgb(250,240,240);
		padding: 10px 5px 10px 10px;
		border:silver 1px solid;
		margin-left:42%;
		font-family:Tahoma;
		list-style-type:none;
		width: 55%;
	}


	.paint12 {
		float:top-left;
		margin-left: 5%;
		margin-right: 0%;
		margin-bottom:0px;
		border:solid 1px maroon;
		width: 35%;
		Height: 15%;
	}


	.newspage {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		font-weight: bold;
		font-size: 25px;
	}

	.tablerow {
		margin-left:25px;
	}


	.formhead {
		font-weight:bold;
		color:maroon;
	}

	.dcmhead {
		margin-left:20px;
		font-family:tahoma;
		font-size:15px;
		margin-top: 20px;
	}

	.DCM {
		margin-right:20px;
		margin-left:20px;
		padding:15px 15px 15px 15px;
		border: silver 1px solid;
		font-family:tahoma;
		font-size:20px;
	}