*{
  box-sizing:border-box;
  font-family: Helvetica, Arial, sans-serif;
}
  
 a 
  {
  color: #9B2C29;
  transition: color 0.3s ease;
}

body {
  font-size: 2em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222;
background-color: #eee;
}


span{
  font-style: italic;
}

.backpizza{
  display:block;
}

@media only screen and (max-width: 767px) and (min-width: 1px)
{
    .backpizza{ display:none; }
}

a:hover
{
  color: tomato;
}

#wrapper{
  margin: 0;
  position: static;
  max-width: 100vw;
}

#wrapper2{
  width: 100%;
}
@media only screen and (min-width: 768px){
    .opening {
      position: absolute;
      top:0;
      left:0;
      right: 0;
      display: block;
     margin: 0;
      width:100vw;
    }
}

@media only screen and (max-width: 499px) and (min-width: 0px)
{
    .opening{ display:none; }
}


#backpizza{
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2582201/pizzabackbg.png);
  background-size:cover;
  width: 100%;
  height: 50vw;
  max-width: 100vw;
  display: block;
}

@media only screen and (max-width: 767px) and (min-width: 0px)
{
    #backpizza{ display:none; }
}


#navpizza{
  position:relative;
  padding-top: 100px;
  margin-bottom: 200px;
  width: 35vw;
  display: block;
  margin: 0 auto;
  max-width: 600px;
 }

@media only screen and (max-width: 767px) and (min-width: 0px)
{
    #navpizza{ display:none; }
}

#card{
  cursor:pointer
}

#card path:hover{
  fill:rgba(255, 255, 255, 0.5);
  transform: translate(-10px, 0px);
  transition: transform .1s;
}

#card path{
  transition: transform 1s;
}

#delivery {
  cursor:pointer;
}

#delivery path:hover{
  fill:rgba(255, 255, 255, 0.5);
  transform: translate(0px, 10px);
  transition: transform .5s;
}

#delivery path{
    transition: transform 1s;
}

#about{
  cursor:pointer
}

#about path:hover{
  fill:rgba(255, 255, 255, 0.5);
  transform: translate(15px, 0px);
  transition: transform .1s;
}

#about path{
  transition: transform 1s;
}



#store {
  cursor:pointer;
}

#store path:hover{
  fill:rgba(255, 255, 255, 0.5);
transform: translate(0px, -10px); transition: transform .5s;
}

#store path{
  transition: transform 1s;
}


body{
  margin: 0;
}

ul
{list-style:none;}


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

#aboutus{
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2582201/koronet.jpg");
    background-attachment: fixed;
  background-repeat: none;
  background-size: contain;
  width: 100%;
  max-width: 100vw;
  height: 40vw;
  margin: 0;
  position: center;
  vertical-align: top;
  align-content: center;
  align-items: center;
  display: block;
  position:relative;
  background-repeat: none;
}

@media only screen and (max-width: 250px) and (min-width: 1px)
{
    #aboutus{ display:none; }
}

@media only screen and (max-width: 500px) and (min-width: 251px)
{
    #aboutus{ 
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2582201/koronet3.jpg"); }
}

@media only screen and (max-width: 800px) and (min-width: 501px)
{
    #aboutus{ 
      background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/2582201/koronet2.jpg"); }
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

footer {
  width: 100%;
  margin: 0;
  height: 30vh;
  background: #9B2C29;
  color: #eee;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 0px;
  z-index: 10;
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background: #9B2C29; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 25px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* CONTACT STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.contact {
  color: black;
  text-align: center;
}

.contact p {
  margin: 70px 0 0;
}

.contact ul a {
  margin-top: 50px;
  box-shadow: none;
  background: none;
  margin-left: 30px;
}

.contact li:nth-child(1) a {
  margin-left: 0;
}

.contact span {
  font-size: 2em;
  color: white;
  -webkit-transition: color ease .4s;
          transition: color ease .4s;
}

.contact span:hover {
  color: steelblue;
}

.contact .btn-blue {
  position: relative;
  margin-top: 30px;
  color: white;
  background: steelblue;
  box-shadow: 0 8px #3b6d97;
}

.contact .btn-blue:hover {
  background: #427aa9;
  color: white;
}

.contact .btn-blue:after {
  position: absolute;
  content: '☃';
  top: 5px;
  right: 30px;
  font-size: 1.6em;
}

.contact .btn-blue:active {
  box-shadow: 0 4px #3b6d97;
  -webkit-transform: translateY(1px);
      -ms-transform: translateY(1px);
          transform: translateY(1px);
}

.contact .creator a {
    background: none;
}



/* Larger than mobile */
@media (min-width: 400px) {
  
}

/* Larger than phablet (also point when grid becomes active) */
@media (min-width: 550px) {}

/* Larger than tablet */
@media (min-width: 750px) {}

/* Larger than desktop */
@media (min-width: 1000px) {}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}