.desktop { display:none }
body { margin:0;padding:0;text-align:center;font-family:Muli,sans-serif;position:relative;background:#fff;overflow-x:hidden;background-repeat:no-repeat;background-size:100px 100px }
header { width:90%;margin:0 auto;white-space:nowrap }
abbr { text-decoration:none!important}
header h1 { font-family:Slackey;color:#d31245;margin:5px 0;text-transform:uppercase;font-size:2.5em;line-height:1}
h2 { color:maroon;font-family:Slackey;text-shadow: 2px 2px 1px #fff, 2px 0 1px #fff, 0 2px 1px #fff, 0 -2px 1px #fff, -2px 0 1px #fff, -2px -2px 1px #fff;margin:8px auto }
h3 { line-height:1.3 }
header h1 span { display:block;color:#555555;font-size:.47em;white-space:nowrap}
article, form { width:95%;display:block;margin:10px auto}
img.machines { width:100%}
p { width:95%;display:block;margin:5px auto;line-height:1.5}
#map { width:95%;height:95vw;margin:5px auto 1px auto }
article section { background:snow;padding:10px;border-radius:15px;margin:10px auto;border:6px solid #717073 }
article section:first-child { font-size:1.2em}
section ul, #intro ul { list-style:none;padding:0;font-weight:bold;line-height:1.5;font-size:.9em }
#intro { margin:3px auto;list-style:none}
section ul li span { font-weight:normal}
#toppings ul { font-size:1.6em } #toppings ul li { display:inline-block;margin:2px 10px;color:#fff;text-shadow:1px 1px 2px #000, -1px -1px 2px #000;background:rgba(255,255,255,.5);padding:1px 4px}
section ul li div { border-radius:50%;border:1px solid #ccc;width:15px;height:15px;display:inline-block }
header div { width:60px;height:60px;background:#d31245;border-radius:50%;float:left;transition:transform 1.7s ease-out;transform:translateX(-100vw) }
header div img { width:45px;margin:7px;animation:spin 5s infinite linear }
.loaded header div { transform:translateX(0)}
input, textarea { border-radius:3px;border:1px solid #ccc;padding:2px 3px;margin:5px;text-align:center}
input[type=submit] { font-family:Slackey;padding:10px 20px;font-size:1.5em;background:magenta;color:#fff;text-transform:uppercase}
a { transition:color .6s ease;font-weight:bold}
a:nth-child(odd):link, a:nth-child(odd):visited { color:magenta;text-decoration:none } 
a:nth-child(even):link, a:nth-child(even):visited { color:darkturquoise;text-decoration:none } 
a:hover, a:active { color:orange!important }
footer { font-style:normal;color:#fff;font-size:.6em;background:#d31245;padding:5px 0 }
footer a:link, footer a:visited { color:#fff!important;text-decoration:none }
footer em { }
footer em a{ margin:20px;font-size:3em}
footer img { width:15px;animation:spin 5s infinite linear;display:inline }
address { margin:25px;font-style:normal;line-height:1.4} address a { font-size:1.2em}
address h1 { font-family:Slackey;font-size:1.5em;margin:0}
#toppings { background-image:url(https://s3.us-east-1.amazonaws.com/rosiesofmv.com/fish.gif);background-size:100% 100%;}
#flavors { background-image:url(https://s3.us-east-1.amazonaws.com/rosiesofmv.com/sparkle.gif);}
#sauces { background:#fff url(https://s3.us-east-1.amazonaws.com/rosiesofmv.com/hotfudge.gif);background-repeat:no-repeat;background-position:50% auto;text-shadow:1px 1px 3px #fff;text-align:left;
}
#sauces ul:nth-child(2) { width:75% }
#intro { background:transparent url(https://s3.us-east-1.amazonaws.com/rosiesofmv.com/bg.png);background-size:contain;background-repeat:no-repeat;background-position:0 120px}

@keyframes spin { 100% { transform:rotate(360deg) } }
@keyframes carousel { 100% { transform:translateY(10px) scale(-1,1) } }
@keyframes bumpercars { 100% { transform:translate(10px) rotate(60deg)} }
.carousel { font-size:2em;margin-top:0}
.carousel span { display:inline-block;animation:carousel 1s infinite alternate;transform:scale(-1,1) }
.carousel span:nth-of-type(even) { animation-delay:.5s}
.bumpercars span { display:inline-block;animation:bumpercars 1s infinite alternate;transform:scale(-1,1) rotate(0deg) }
.bumpercars span:nth-of-type(even) { animation-delay:.5s}
.cones i { background-image: linear-gradient(to top, brown, brown, brown, white, yellow, orange, red);-webkit-background-clip: text;font-size:2em;color:transparent;display:inline-block }

@media only screen and (min-width: 340px) {
    header { width:95%}
    header div { width:80px;height:80px}
    header div img { width:60px;margin:10px }
    header h1 { font-size:3.5em;margin:15px 0 }
    #intro ul { font-size:1.2em }

    iframe { display:block;margin:0 auto;width:100% }
    footer { font-size:.8em} 
    #intro { background-position:0 90px}
}

@media only screen and (min-width: 768px) {
    .desktop { display:inline} .mobile { display:none }
    .bgspiral { width:130px;height:130px;background-size:80% auto;background-position:12px 15px;transform:translate(-65px,-65px) }
    header, hr, img.machines, #map { width:600px }
    #map { height:350px;width:650px;margin-bottom:20px }
    header h1 { font-size:5.5em }
    h2 { font-size:3em}
    header div { width:130px;height:130px }
    header div img { width:100px;margin:15px }
    #intro a { font-family:Slackey}
    section ul, #intro ul { column-count:2;width:95%;display:block;margin:0 auto;line-height:1.7 }
    #intro ul {margin:10px auto;width:55%;font-size:1.2em}
    article section { display:inline-block;border-radius:30px;width:45%;border:14px solid #717073;min-height:460px;vertical-align:top; }
    article section:first-child { margin-right:10px;font-size:inherit }
    article section:first-child ul { font-size:1.2em;line-height:2;margin:3em 0}
    article section:last-child { min-height:auto}
    footer { line-height:1.2;position:relative}
    footer em { position:absolute;top:20%;left:50%;width:400px;transform:translateX(-200px)}
    footer a i { transition:color .5s ease-in-out}
    footer a:hover i { animation-name:wobble; animation-duration: 1s;  animation-timing-function: ease-in-out; animation-iteration-count: 1;}
    footer a:hover i.fa-twitter{ color:#38A1F3}
    footer a:hover i.fa-facebook{ color:#3b5998}
    footer a:hover i.fa-instagram{ color:#ff0}
    footer a:hover i.fa-envelope { color:magenta}
    address {width:30% }
    address:nth-child(odd) { float:right } 
    address a { line-height:1.5}
    #intro { background-size:90% auto;background-position:50% -20px}
    #sauces { text-align:center}
    #sauces ul:nth-child(4) { text-align:left }
    #toppings ul { font-size:.9em}
    #toppings ul li { display:block;margin:0;padding:0;background:transparent}
    input, textarea { text-align:left}
    textarea {width:50%}
    @keyframes wobble {
      16.65% {
        -webkit-transform: translate(8px, 8px);
        transform: translate(8px, 8px);
      }
      33.3% {
        -webkit-transform: translate(-6px, -6px);
        transform: translate(-6px, -6px);
      }
      49.95% {
        -webkit-transform: translate(4px, 4px);
        transform: translate(4px, 4px);
      }
      66.6% {
        -webkit-transform: translate(-2px, -2px);
        transform: translate(-2px, -2px);
      }
      83.25% {
        -webkit-transform: translate(1px, 1px);
        transform: translate(1px, 1px);
      }
      100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
      }
    }
}
@media only screen and (min-width: 1200px) {
    #intro p {font-size:1.8em}
    #map { width:1000px}
    body>h2, div>h2 { margin:1em 0 }
}