@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");

/* Basic */

body {
  font-family: Arial;
  background-color: #ecd6a9;
}

.v1 {
  border-left: 10px solid white;
  height: 100%;
  position: fixed;
  left: 50%;
  margin-left: -5px;
  top: 0;
  z-index: 3;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
}

.left {
  left: 0;
  background-color: #f8e7c3;
}

.right {
  right: 0;
  background-color: #fae0ab;
}

.pizza {
  z-index: 3;
  position: absolute;
  display: table;
  height: 100%;
  width: 50%;
  
  left: 0;
}

.pub {
  z-index: 3;
  position: absolute;
  display: table;
  height: 100%;
  width: 50%;
  
  right: 0;
}

body:has(.pizza:hover) .left {
  background: #336666;
}

body:has(.pub:hover) .right {
  background: #f9edd4;
}

.left a.fill-left:hover{
background: #336666;
}

.right a.fill-right:hover{
background: #f9edd4;
}

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

.left img {
  text-align: center;
  position: absolute;
  margin-right: auto;
  margin-left: 5%;
  margin-top: 15%;
  max-width: 160px;
  width: 100%;
  height: auto;
  z-index: 3;
}

.right img {
  text-align: center;
  position: fixed;
  margin-right: auto;
  margin-left: 10%;
  margin-top: 5%;
  max-width: 120px;
  width: 100%;
  height: auto;
  z-index: 3;
}

a.fill-left {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

a.fill-right {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;

}

.medcon {
  float: left;
  z-index: 2;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 10em;
  height: auto;
  max-width: 400px;
}

.medcon img{
  width: 100%;
}

}

@media screen and (min-width: 480px){
  .left img {
  text-align: center;
  position: absolute;
  margin-right: auto;
  margin-left: 10%;
  margin-top: 10%;
  max-width: 250px;
  width: 100%;
  height: auto;
  z-index: 3;
}

.right img {
  text-align: center;
  position: fixed;
  margin-right: auto;
  margin-left: 10%;
  margin-top: 3%;
  max-width: 120px;
  width: 100%;
  height: auto;
  z-index: 3;
}

a.fill-left {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

a.fill-right {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;

}



.medcon {
  z-index: 2;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 10em;
  height: auto;
  max-width: 500px;

}

.medcon img{
  width: 100%;
}
  
}

@media screen and (min-width: 768px){
  .left img {
  text-align: center;
  position: absolute;
  margin-right: auto;
  margin-left: 20%;
  margin-top: 7%;
  max-width: 300px;
  width: 100%;
  height: auto;
  z-index: 3;
}

.right img {
  text-align: center;
  position: absolute;
  margin-right: auto;
  margin-left: 20%;
  margin-top: 3%;
  max-width: 200px;
  width: 100%;
  height: auto;
  z-index: 3;
}

a.fill-left {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

a.fill-right {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;

}



.medcon {
  z-index: 2;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 7em;
  height: auto;
  max-width: 550px;
}

.medcon img{
  width: 100%;
}
  
}

@media screen and (min-width: 1000px){
  .left img {
  text-align: center;
  position: absolute;
  margin-right: auto;
  margin-left: 30%;
  margin-top: 5%;
  max-width: 400px;
  width: 100%;
  height: auto;
  z-index: 3;
}

.right img {
  text-align: center;
  position: absolute;
  margin-right: auto;
  margin-left: 25%;
  margin-top: 5%;
  max-width: 200px;
  width: 100%;
  height: auto;
  z-index: 3;
}

a.fill-left {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

a.fill-right {
 display: block;
 height: 100%;
 width: 100%;
 text-decoration: none;

}



.medcon {
  z-index: 2;
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: 8em;
  height:auto;
  max-width: 550px;
}

.medcon img{
  width: 100%;
}


  
}