*{
box-sizing: border-box;
}
html, body {
margin: 0;
height: 100%;
font-family: 'Nunito', sans-serif;
}
body{
position: relative;
padding-bottom: 6rem;
min-height: 100%;
}
p{
font-weight: 200;
}
.headermenu{
/*border: solid 1px black;*/
overflow: hidden;
background-color: #e7e7e7;
width: 100%;
padding: 15px;
box-sizing: border-box;
}
/* The hero image */
.hero-image {
/* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
background: /*linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), */url(../img/hero-factory.jpg);
height: 50%;
/* Position and center the image to scale nicely on all screens */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Place text in the middle of the image */
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
}
.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;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.imglogo {
float: left;
}
ul.navmenu{
list-style-type: none;
font-family: 'Nunito';
float: right;
line-height: 80px;
margin: 0;
}
li {
float: left;
margin-right: 20px;
}
li a{
text-decoration: none;
color:black;
}
li a:hover{
border-bottom: solid 1px green;
}
.dropdown:hover .dropdown-content{
display: block;
}
li a:active{
border-bottom: solid 1px green;
background-color: grey;
text-decoration: none;
}
.breadcrum{
padding: 0px 100px;
}
.breadcrum.products{
padding: 0 2%;
}
.map-contact{
position: sticky;
width: 100%;
}
.contactmap-text{
background-color: #929292;
width: 25%;
height: 350px;
text-align: center;
position: absolute;
color: white;
top: 150px;
left: 10px;
z-index: 99;
padding: 4% 5%;
box-sizing: border-box;
}
.contactmap-text h2{
color: white;
font-size: 20px;
}
.wraps{
width: 100%;
/*border:solid 5px green;*/
overflow: hidden;
align-items: center;
display: flex;
justify-content: center;
box-sizing: border-box;
}
.slogan{
color: #1e803f;
font-family: 'Nunito';
font-weight: 200;
text-transform: uppercase;
text-align: center;
width: 50%;
margin: auto 0;
padding:5%;
/*border:solid 1px blue;*/
}
.slogan p{
text-transform: none;
color: black;
}
.wraps .home-products a {
text-decoration: none;
color: black;
font-weight: 200;
text-align: center;
margin: 0 auto;
}
.home-products a:hover{
color: grey;
}
.home-products {
text-align: center;
width: 100%;
/*border:solid 5px red;*/
overflow: hidden;
align-items: center;
display: block;
justify-content: center;
box-sizing: border-box;
margin: 0 auto;
}
.home-products h1{
text-align: center;
}
#weoffer{
font-weight: 300;
text-transform: uppercase;
letter-spacing: 6px;
}
.left-contact{
float: left;
width: 50%;
/* border:solid 1px black;*/
display: inline-block;
text-align: center;
height: 450px;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 100px 0;
background-color: #d1d0d0;/*
transform: translate(-10%, 0);*/
}
.home-contact{
padding-left: 5%;
padding-right: 5%;
width: 100%;
padding-top: 5%;
}
/*map */
.right-contact{
float: left;
width: 50%;
height: 450px;
/*border:solid 1px black;*//*
transform: translate(-12%, 0);*/
object-fit: cover;
}
/*contact us title*/
a.contactlink{
text-decoration: none;
color: #1e803f;
font-weight: 400;
text-align: center;
}
a.contactlink:hover{
color: grey;
}
/*contact us address*/
.center-address{
width: 50%;
margin: 0 auto;
font-weight: 200;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
/*background-color: DodgerBlue;*/
width: 100%;
padding:0 5%;
height: 400px;
}
.flex-container .box {
/*background-color: #f1f1f1;*/
width: 100%;
margin: 0px;
text-align: center;
align-items: center;
justify-content: center;
}
.flex-container .box a{
text-decoration: none;
color: black;
font-family: 'Nunito';
font-weight: 200;
line-height: 400px;
font-size: 30px;
}
.flex-container .box a:hover{
color:grey;
}
.flex-container .box h1{
padding:0;
}
.flex-container .box img{
width: 100%;
height: 100%;
object-fit: cover;
}
.col-2{
width: 50%;
float: left;
padding: 10px;
/* border: solid 1px black;*/
}
div.abouttitle {
float: left;
margin:50px 100px 100px 100px;
}
span#EPLIGHTING{
color:green;
}
.wraps.jleft{
justify-content: left;
}
.wraps.jleft .container #error_message{
margin-bottom: 20px;
padding: 0px;
background: #fe8b8e;
text-align: center;
font-size: 14px;
transition: all 0.5s ease;
}
.wraps.jleft .container #success_message{
margin-bottom: 20px;
padding: 0px;
background: #4caf50;
text-align: center;
font-size: 14px;
transition: all 0.5s ease;
}
.contacttitle #success_message p{
margin-bottom: 20px;
padding: 0px;
background: #4caf50;
text-align: center;
font-size: 18px;
transition: all 0.5s ease;
}
.contacttitle h1{
color:green;
}
.contacttitle {
float: none;
margin: 0px 100px 0px 100px;
/*padding-left: 100px;
margin-top: 50px;*/
width: 100%;
box-sizing: border-box;
}
iframe {
width: 100%;
object-fit: cover;
}
.contactform{
padding-left: 100px;
display: block;
}
.contactform form{
padding-left: 100px;
display: block;
}
/*Contact Form*/
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: none;
border-bottom: solid 1px grey;
/*border-radius: 4px;*/
resize: vertical;
text-transform: uppercase;
text-align: center;
}
label {
padding: 12px 12px 12px 12px;
display: inline-block;
text-transform: uppercase;
}
input[type=submit] {
background-color: #238b42;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width:200px;
margin-left: 5%;
}
input[type=submit]:hover {
background-color: #45a049;
}
input[type=text]::placeholder, textarea::placeholder {
font-family: 'Nunito';
font-weight: 200;
text-transform: uppercase;
text-align: center;
}
.container {
/* border-radius: 5px;*/
border:solid 1px grey;
/*background-color: #f2f2f2;*/
padding:3%;
margin: 0px 100px 100px 100px;
box-sizing: border-box;
width: 100%;
}
.col-25 {
float: left;
width: 15%;
margin-top: 6px;
box-sizing: border-box;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.submitbutton{
float: none;
text-align: center;
}
.footer{
text-align: center;
bottom: 0;
width: 100%;
position: relative;
margin-top: 5%;
height: 50px;
border-top: solid 1px black;
}
.wraps .footer{
position: relative;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (min-width: 601px) and (max-width: 1130px) {
.contactmap-text{
padding: 10% 5%;
}
.contactmap-text h2{
font-size: 14px;
}
.contactmap-text p{
font-size: small;
}
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit]{
width: 100%;
margin-top: 0;
}
.contactmap-text{
display: none;
}
.contacttitle {
margin: 0px 10px 0px 10px;
}
.breadcrum {
padding: 0px 10px;
}
.container {
border: solid 1px grey;
padding: 3%;
margin: 0px 10px 10px 10px;
}
input[type=submit] {
width:100px;
}
ul.navmenu {
float: left;
}
}
@media screen and (max-width: 700px) {
.imglogo{
width: 250px;
}
ul.navmenu {
line-height: 70px;
font-size: 14px;
}
@media screen and (max-width: 800px) {
.flex-container .box a {
font-size: 25px;
}
.flex-container {
display: flex;
flex-direction: column;
float: left;
width: 100%;
justify-content: flex-end;
}
.flex-container.wrapsreverse{
display: flex;
flex-direction: column-reverse;
}
.box{
float: left;
display: inline-block;
width: 100%;
}
.flex-container .box a{
line-height: 100px;
}
.flex-container .box img {
width: 70%;
}
#home-downlight{
float: right;
}
#weoffer{
font-size: 24px;
}
}