/* CSS Document */

html, body {
  padding:0;
  margin:0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: #003366;
}

#wrapper{
width:100%;
max-width:2800px;
margin:0 auto;

}

#starleft{
width:50%;
float:left;
background-image:url(images/commercialkitchen.jpg); background-size:cover; background-repeat:no-repeat;
height:100vh;
position:relative;

}

#starright{
width:50%;
float:left;
background-image:url(images/homekitchen.jpg); background-size:cover; background-repeat:no-repeat;
height:100vh;
position:relative;

}

#overlaycomm{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
background-color:#024288;
transition: 0.7s all ease-in-out;
opacity:0.6;
}

#overlayhome{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
background-color: #850606;
transition: 0.7s all ease-in-out;
opacity:0.6;
}

#starleft #overlaycomm:hover{
opacity:0.5;

}
#starright #overlayhome:hover{
opacity:0.5;

}
#textcenter {
position: absolute;
top: 50%;  /* position the top  edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */

transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
z-index:300;
color:#FFFFFF;
text-align:center;
width:60%;

} 
#textcenter h1{
font-family: 'Outfit', sans-serif; font-weight:700;
font-size:34px;
text-transform: uppercase;

}

#textcenter span{ 
font-family: 'Outfit', sans-serif; font-weight:400;
font-size:18px;
}




.view {
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  transform:skew(-7deg);
}

.left,
.right {
  bottom:0;
  overflow:hidden;
  position:absolute;
  top:0;
}

.left { 
  left:-5%;  
  right:50%;  
}

.divider {
  background-color:#fff;
  border-left:solid 0px #000;
  border-right:solid 0px #000;
  bottom:-5%;
  left:49.8%;
  position:absolute;
  right:49.8%;
  top:-5%;
  z-index:1;
}

.right {
  left:50%;
  right:-5%;
}

.sun,
.moon {
  bottom:-5%;
  left:-5%;
  position:absolute;
  right:-5%;
  top:-5%;
  transform:skew(7deg);
}

.sun {
  background-image: url(commercialkitchen.jpg); 
  background-position:center center;
  background-size:cover;
}

.moon {
  background-image: url(homekitchen.jpg);
  background-position:center center;
  background-size:cover;
}














a.button1{
display:inline-block;
padding:0.35em 1.2em;
border:0.1em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
border-radius:0.12em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#FFFFFF;
text-align:center;
transition: all 0.2s;
margin-top:20px;
}
a.button1:hover{
color:#000000;
background-color:#FFFFFF;
}
@media all and (max-width:30em){
a.button1{
display:block;
margin:0.4em auto;
}
} 

#header{
width:100%;
position:fixed;
padding-bottom:10px;
padding-top:10px;
top:0;
background-color:#FFFFFF;
height:70px;
z-index:1000;
}

#logo{
width:270px;
height:auto;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}

#logo img{
width:100%;
height:auto;

}


#boxarea{
height:auto;
width:100%;
float:left;
}


#containerarea{
width:90%;
padding-left:5%;
padding-right:5%;
text-align: center;
font-family: 'Outfit', sans-serif; font-weight:400; line-height:1.8;
font-size:16px;
padding-top:40px;
padding-bottom:40px;
float:left;
}

#containerarea h1{
font-family: 'Outfit', sans-serif; font-weight:700;
font-size:34px;
width:100%;
}


#footer{
width:90%;
padding-left:5%;
padding-right:5%;
text-align: center;
font-family: 'Outfit', sans-serif; font-weight:400; line-height:1.8;
font-size:14px;
background-color: #FFFFFF;
color: #000000;
padding-top:12px;
padding-bottom:12px;
float:left;
position:fixed;
bottom:0;
left:0;
right:0;
z-index:100;
}





















@media only screen and (max-width:640px){

#header{
width:100%;
position:fixed;
padding-bottom:10px;
padding-top:10px;
top:0;
background-color:#FFFFFF;
height:40px;
z-index:1000;
}

#logo{
width:170px;
height:auto;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}

.view {
  bottom:0;
  left:0;
  position: relative;
  right:0;
  top:0;
  transform:none ;
}

.left,
.right {
  bottom:0;
  overflow:hidden;
  position: relative;
  top:70px;
  width:100%;
  min-height:300px;
}

.left { 
  left:0;  
  right:0;  
}

.divider {
visibility:hidden;
display:none;
}

.right {
  left:0;
  right:0;
}

.sun,
.moon {
  bottom:0;
  left:0;
  position: relative;
  right:0;
  top:0;
  transform:none;
  width:100%;
  min-height:300px;
}

.sun {
  background-image: url(commercialkitchen.jpg);  background-size:100% auto;
  background-position:center center;
  background-size:cover;
}

.moon {
  background-image: url(homekitchen.jpg);  background-size:100% auto;
  background-position:center center;
  background-size:cover;
}














#overlaycomm{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
background-color:#024288;
transition: 0.7s all ease-in-out;
opacity:0.6;
}

#overlayhome{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
z-index:1;
background-color: #850606;
transition: 0.7s all ease-in-out;
opacity:0.6;
}

#starleft #overlaycomm:hover{
opacity:0.5;

}
#starright #overlayhome:hover{
opacity:0.5;

}
#textcenter {
position: absolute;
top: 40%;  /* position the top  edge of the element at the middle of the parent */
left: 50%; /* position the left edge of the element at the middle of the parent */

transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
z-index:300;
color:#FFFFFF;
text-align:center;
width:80%;

} 
#textcenter h1{
font-family: 'Outfit', sans-serif; font-weight:700;
font-size:20px;
text-transform: uppercase;

}

#textcenter span{ 
font-family: 'Outfit', sans-serif; font-weight:400;
font-size:16px;
}


a.button1{
display: inline-block;
margin:0.4em auto;







}