/* General For All
––––––––––––––––––––––––––––––––––––––––––––––––––

*/
body {
    width: 100%;
    background-image: url(images/picofthedinerbright.png);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
#wrapper {
    width: 100%;
    font-size: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-image: url(images/marbletexture.png);
    background-repeat: repeat-y;
    background-position: center;
    box-shadow: 0px 0px 20px 6px #000;
}
img {max-width: 100%;}
header {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    z-index: 2;
}
.windowmiddle {
    box-sizing: border-box;
    margin-top: -3px;
    z-index: 2;
}
#myVideo {
    position: static;
    top: 0;
    width: 100%;
    max-width: 1200px;
    z-index: 2;
  }
.headerstuff {
    position: absolute;
    right: 0%;
    left: 0%;
    top: 7%;
    margin: 0 auto;
    width: 100%;
    padding-top: 20px;
    text-align: center;
    z-index: 2;
}
h1 {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    color: #FFF;
    text-decoration: none;
    font-size: 140px;
    line-height: 140px;
    letter-spacing: -2px;
    text-shadow: 0px -14px 14px #000;
}
h2 {
    animation: fadeIn .7s;
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    color: #FFF;
    text-decoration: none;
    font-size: 48px;
    line-height: 36px;
    text-shadow: 0px -14px 14px #000;
}
h3 {
    font-family: 'Poiret One', cursive;
    color: #FFF;
    text-decoration: none;
    font-size: 48px;
    line-height: 78px;
    text-shadow: 0px -14px 14px #000;
}
h4 {
    font-family: 'Poiret One', cursive;
    color: #000;
    text-decoration: none;
    font-size: 60px;
    text-align: center;
}
h5 {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    font-size: 48px;
    text-shadow: 2px 0px 5px #000, -2px 0px 5px #000, 0px 2px 5px #000, 0px -2px 5px #000;
    margin-top: 32px;
    margin-bottom: 225px;
    box-sizing: border-box;
    transition: color .3s;
}
h5:hover {
    color: #989898;
}

#firstwordonthepage {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    animation: fadeIn 800ms;
}

#bigrainbow {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}
#bigred { opacity: 0%; animation: letterhopone 500ms; animation-delay: 600ms; animation-fill-mode: forwards;}
#bigorange { opacity: 0%; animation: letterhoptwo 500ms; animation-delay: 700ms; animation-fill-mode: forwards;}
#bigyellow { opacity: 0%; animation: letterhopthree 500ms; animation-delay: 800ms; animation-fill-mode: forwards;}
#biggreen { opacity: 0%; animation: letterhopfour 500ms; animation-delay: 900ms; animation-fill-mode: forwards;}
#bigblue {  opacity: 0%; animation: letterhopfive 500ms; animation-delay: 1000ms; animation-fill-mode: forwards;}
#bigindigo { opacity: 0%; animation: letterhopsix 500ms; animation-delay: 1100ms; animation-fill-mode: forwards;}
#bigviolet {  opacity: 0%; animation: letterhopseven 500ms; animation-delay: 1200ms; animation-fill-mode: forwards;}

#thirdwordonthepage {
    opacity: 0%;
    animation: fadeIn .8s;
    animation-delay: 1600ms;
    animation-fill-mode:forwards;
}

#bricknj {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#bricknj h3 {
    margin-left: 16px;
    margin-right: 16px;
    opacity: 0%; animation: fadeIn 800ms; animation-delay: 2.2s; animation-fill-mode: forwards;
}
#whitebarleft {
    opacity: 0%; animation: expand 1s ease-in-out; animation-delay: 2.5s; animation-fill-mode: forwards;
}
#whitebarright {
    opacity: 0%; animation: expandinverse 1s ease-in-out; animation-delay: 2.5s; animation-fill-mode: forwards;
}
#bricknj img {
    height: 2px;
    width: 100px;
}
.body p {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 22px;
}
.body p b {
    font-size: 26px;
    -webkit-text-stroke: 1px #000;
    line-height: 40px;
    text-decoration: underline;
}
.body p strong {
    font-size: 18px;
    -webkit-text-stroke: 1px #000;
    line-height: 20px;
}

#bigrainbow {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

nav {
    background-image: url(images/headerplanktwo.png);
    background-repeat: no-repeat;
    height: 230px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-start;
    z-index: 9;
    margin-top: -3px;
}
nav a {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    color: #FFF;
    text-decoration: none;
    font-size: 36px;
    text-shadow: 2px 0px 5px #000, -2px 0px 5px #000, 0px 2px 5px #000, 0px -2px 5px #000;
    margin-top: 24px;
    box-sizing: border-box;
    transition: color .3s;
}
nav a:hover {
    color: #989898;
}
#buttonforhome {opacity: 0%; animation: zoomIn .85s; animation-delay: 2s; animation-fill-mode: forwards;}
#buttonforabout {opacity: 0%; animation: zoomIn .85s; animation-delay: 2.15s; animation-fill-mode: forwards;}
#buttonformenu {opacity: 0%; animation: zoomIn .85s; animation-delay: 2.3s; animation-fill-mode: forwards;}
#buttonforcontact {opacity: 0%; animation: zoomIn .85s; animation-delay: 2.45s; animation-fill-mode: forwards;}
.windowbottom {
    display: none;
}
.bodytime {
    max-width: 1200px;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-top: -1px;
    z-index: 8;
}

.bodytime hr {
    border: 2px solid black;
}
.bodytime hr.animatedline {
    animation: expand 1s ease-in-out;
}

@keyframes expand {
    from {
        opacity: 0%;
        transform: scaleX(0);
        transform-origin: right;
    }
    1% {
        opacity: 100%;
        transform: scaleX(0);
        transform-origin: right;
    }
    to {
        opacity: 100%;
        transform: scaleX(1);
        transform-origin: right;
    }
}

@keyframes expandinverse {
    from {
        opacity: 0%;
        transform: scaleX(0);
        transform-origin: left;
    }
    1% {
        opacity: 100%;
        transform: scaleX(0);
        transform-origin: left;
    }
    to {
        opacity: 100%;
        transform: scaleX(1);
        transform-origin: left;
    }
}

@keyframes expandfromcenter {
    from {
        transform: scaleX(0);
        transform-origin: center;
    }
    to {
        transform: scaleX(1);
        transform-origin: center;
    }
}

@keyframes letterhopone {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: red;}
    50% {transform: translate(0px, -50px); color: red;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

@keyframes letterhoptwo {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: #ffa200;}
    50% {transform: translate(0px, -50px); color: #ffa200;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

@keyframes letterhopthree {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: yellow;}
    50% {transform: translate(0px, -50px); color: yellow;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

@keyframes letterhopfour {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: #00cf18;}
    50% {transform: translate(0px, -50px); color: #00cf18;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

@keyframes letterhopfive {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: #00e7ea;}
    50% {transform: translate(0px, -50px); color: #00e7ea;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

@keyframes letterhopsix {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: #1955ff;}
    50% {transform: translate(0px, -50px); color: #1955ff;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

@keyframes letterhopseven {
    0% {opacity: 0%;}
    1% {opacity: 100%; color: #af00d5;}
    50% {transform: translate(0px, -50px); color: #af00d5;}
    100% {transform: translate(0px, 0px); color: #FFF; opacity: 100%;}
}

.head {
    margin-top: -1px;
}
.body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.body h4 {
    text-align: inherit;
    font-size: 48px;
}
.pagename {
    background-image: url(images/wordborder.png);
    background-position: center;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    text-align: center;
    padding: 58px;
    box-sizing: border-box;
    margin-bottom: 40px;
}
.pagename h4 {
    opacity: 0%; animation: flipIn .8s; animation-delay: 1s; animation-fill-mode: forwards;
}
.accordion {
        width: 100%;
        margin-bottom: 40px;
}
.bodyone {
    text-align: right;
    width: 50%;
    padding: 20px 30px 20px 20px;
    box-sizing: border-box;
}
.bodytwo {
    text-align: left;
    width: 50%;
    padding: 20px 20px 20px 30px;
    box-sizing: border-box;
}
.aboutus {
    width: 75%;
    margin: 0 auto;
    margin-bottom: 20px;
}
.aboutus p {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    text-align: left;
    line-height: 30px;
    color: #000;
    text-decoration: none;
    font-size: 20px;
    margin-bottom: 15px;
}
#slides {
    position: relative;
    height: 568px;
    padding: 0px;
    margin: 0 auto;
    margin-bottom: 40px;
    list-style-type: none;
}
.slide {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    transition: opacity 1s;
}
.showing {
    opacity: 1;
    z-index: 2;
}

/** https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/ **/

.contactinfo {
    width: 70%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px 0;
    border-radius: 25px;
    opacity: 0%; animation: peekIn .7s; animation-delay: 1.3s; animation-fill-mode: forwards;
    margin-bottom: 30px;
}
iframe {
    margin: 10px auto 10px auto;
    opacity: 0%; animation: swooceIn .8s ease-in-out; animation-delay: 1.8s; animation-fill-mode: forwards;
}
.contactinfo p {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    text-align: center;
    line-height: 40px;
    color: #000;
    text-decoration: none;
    font-size: 22px;
    margin: 0 60px;
}
.contactinfo em {
    line-height: 20px;
    margin-top: 30px;
}
.contactinfo img {
    filter: brightness(0%);
    margin: 0 5px;
}
.contactinfo img:hover {
    filter: brightness(25%);
    transition: all .3s;
}

hr {
    border: 2px solid black;
}
/* This is a line to separate the body and the footer just so I can navigate this big-ass file */
footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: auto;
    max-width: 1200px;
    width: 100%;
    height: 304px;
    background-image: url(images/footerfetishplank.png);
    padding: 60px 28px;
    box-sizing: border-box;
    background-size: cover;
    align-items: center;
}
footer p {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    color: #FFF;
    text-decoration: none;
    font-size: 28px;
}
footer b {
    font-family: 'mostranuovaaltdw00-regularRg', sans-serif;
    color: #FFF;
    text-decoration: none;
    font-size: 28px;
    -webkit-text-stroke: .5px #FFF;
}
.logo {
    float: left;
}
.infoone {
    text-align: left;
    line-height: 40px;
}
.infoone p{
    margin-right: 25px;
}
.infotwo {
    float: right;
    text-align: right;
    line-height: 30px;
}
.infotwo a {
    margin-left: 10px;
}
.infotwo a:hover {
    filter: brightness(60%);
    transition: all .3s;
}
.infomobile {
    display: none;
}
/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 501px) and (max-width: 1199px)
{
    body {background-color: white;}
    h1 {font-size: 120px;
        line-height: 100px;}
    h2 {font-size: 40px;
        line-height: 60px;}
    h3 {font-size: 40px;
        line-height: 60px;}
    .headerstuff {
        top: 3vw;
        padding-top: 10px;
    }
    #firstwordonthepage {
        font-size: 6vw;
        line-height: 6vw;
    }
    #bigrainbow h1 {
        font-size: 12vw;
        line-height: 11vw;
    }
    #thirdwordonthepage {
        font-size: 6vw;
        line-height: 7vw;
    }
    #bricknj h3 {
        font-size: 5vw;
        line-height: 5vw;
    }
    nav {
        width: 100%;
    }
    nav a{
        font-size: 4vw;
    }
    .bodytime {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        height: auto;
    }
    #bodytime hr {
        margin-bottom: 20px;
    }
    #bodytime hr.animatedline {
        animation: expandfromcenter 1s ease-in-out;
    }
    .accordion {
        width: 100%;
        margin-bottom: 40px;
    }
    .bodyone {
        text-align: center;
        width: 100%;
    }
    .bodytwo {
        text-align: center;
        width: 100%;
    }
    .aboutus {
        width: 80%;
        margin: 0 auto;
        margin-bottom: 40px;
    }
    .aboutus p {
        font-size: 18px;
    }
    #photogallery {
        margin: 0 auto;
    }
    .slide {
        box-sizing: border-box;
    }
    #slides {
        width: 90vw;
        height: 76.2985vw;
        max-height: 568px;
        max-width: 670px;
    }
    .slide img {
        width: 70%;
        height: 76.2985vw;
        width: 90vw;
        max-height: 568px;
        max-width: 670px;
    }
    .contactinfo {
        width: 85%;
        margin-bottom: 30px;
    }
    .contactinfo p {
        font-size: 18px;
        line-height: 22px;
    }
    iframe {
        width: 90%;
    }
    
/* Another line separating the main body from the footer, yahoo */
    footer {
        padding: 25px 25px;
        box-sizing: border-box;
        overflow: visible;
        height: auto;
    }
    .logo {
        margin: 0 auto;
        float: none;
        text-align: center;
        width: 100%;
        margin-bottom: 10px;
    }
    .logo img {
        width: 250px;
    }
    .infoone {
        display: none;
    }
    .infotwo {
        display: none;
    }
    .infomobile {
        text-align: center;
        display: block;
        line-height: 30px;
    }
    .infomobile a {
        margin-top: 10px;
        box-sizing: border-box;
    }
    .infomobile a:hover{
        filter: brightness(60%);
        transition: all .3s;
    }
}
/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 500px)
{
    body{background-color: white;}
    .headerstuff {
        top: 3vw;
        padding-top: 10px;
    }
    #firstwordonthepage {
        font-size: 6vw;
        line-height: 6vw;
    }
    #bigrainbow h1 {
        font-size: 12vw;
        line-height: 11vw;
    }
    #thirdwordonthepage {
        font-size: 6vw;
        line-height: 7vw;
    }
    #bricknj {
        display: none;
    }
    #overlay {
        z-index: 20;
    }
    .windowbottom {
        margin-top: -3px;
        display: block;
    }
    nav {
        background-image: none;
        flex-direction: column;
        display: none;
        z-index: 20;
    }
    nav a{
        z-index: 20;
        display: none;
    }
    .windowbottom {
        display: block;
        background-image: url(images/marbletexture.png);
        background-size: cover;
        background-position: center bottom;
        overflow: visible;
        background-repeat: no-repeat;
    }
    .bodytime {
        display: block;
        min-width: 100%;
        text-align: center;
    }
    .body h4 {
        font-size: 40px; 
    }
    .body p {
        font-size: 18px;
    }
    .body p b {
        font-size: 22px;
        line-height: 32px;
    }
    .body p strong {
        font-size: 14px;
    }
    .pagename {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 30px;
    }
    .pagename h4 {
        font-size: 40px;
    }
    .accordion {
        width: 100%;
        margin-bottom: 30px;
    }
    .bodyone {
        text-align: center;
        width: 100%;
    }
    .bodytwo {
        text-align: center;
        width: 100%;
    }
    .aboutus {
        width: 90%;
        margin-bottom: 40px;
    }
    .aboutus p {
        font-size: 14px;
        -webkit-text-stroke: .2px #000;
        margin: 0 40px;
        margin-bottom: 10px;
    }
    #photogallery {
        margin: 0 auto;
    }
    .slide {
        box-sizing: border-box;
    }
    #slides {
        width: 90vw;
        height: 76.2985vw;
        max-height: 568px;
        max-width: 670px;
    }
    .slide img {
        width: 70%;
        height: 76.2985vw;
        width: 90vw;
        max-height: 568px;
        max-width: 670px;
    }
    iframe {
        width: 100%;
    }
    .contactinfo {
        width: 100%;
        border-radius: 0px;
        margin-bottom: 30px;
    }
    .contactinfo p {
        font-size: 14px;
    }

/* Here's the line again! Aaaaaaaah (I'm trying to add lots of text here so I can tell there's a line okay I'm good) */
    footer {
        background-image: url(images/footerfetishplank.png);
        background-size: cover;
        height: auto;
        flex-direction: column;
        overflow: visible;
        width: 100%;
        padding: 16px 0 16px 0;
        box-sizing: border-box;
    }
    .logo {
        float: inherit;
        margin-bottom: 10px;
    }
    .logo img {
        width: 200px;
    }
    .infoone {
        display: none;
    }
    .infotwo {
        display: none;
    }
    .infomobile {
        text-align: center;
        display: block;
        line-height: 40px;
    }
    .infomobile p {
        font-size: 16px;
    }
    .infomobile b {
        font-size: 20px;
    }
    .infomobile a {
        margin: auto;
        padding-top: 10px;
        box-sizing: border-box;
    }
    .infomobile a:hover {
        filter: brightness(60%);
        transition: all .3s;
    }
}

/* Menu thing (Move somewhere) */
/* Page styling */ 
	/* Min */ 
	@media (min-width: 0){ 
		html{ min-width: 200px; min-height: 100%; } 
			#body{ min-width: 200px; min-height: 100%; font-size: 62.5%; background: #f2f0ed; background-size: 50%; } 
				#body{ margin: 0 auto; padding: 2.5em; } 
					.accordion{  } 
						.accordion > .module{ position: relative; } 
                            .accordion > .module > .head{transition: all 300ms ease-in-out; -webkit-transition: all 300ms ease-in-out;}
							.accordion > .module > .head:before{position: absolute; top: 2em; left: 1.5em; display: block; color: #fff; font-family: "mostranuovaaltdw00-regularRg"; } 
							.accordion > .module.one > .head{height: 101px; background-image: url(images/menu1.png); background-repeat: no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; padding-top: 1px;}
                            .accordion > .module.two > .head{height: 101px; background-image: url(images/menu2.png); background-repeat: no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; padding-top: 1px;}
                            .accordion > .module.three > .head{height: 101px; background-image: url(images/menu3.png); background-repeat: no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; padding-top: 1px;}
                            .accordion > .module.four > .head{height: 101px; background-image: url(images/menu4.png); background-repeat: no-repeat; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; padding-top: 1px;}
							.accordion > .module > .head:hover{ filter: brightness(150%);} 
								.accordion > .module > .head > p{ overflow: visible; padding-left: 2.5em; color: #fff; font-weight: 600; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; line-height: 1.25; } 
							.accordion > .module > .body{background: #f9f8f7;} 
					#body > .bottom{ text-align: right; }
						#body > .bottom > button.save{ overflow: hidden; display: inline-block; margin-top: 2.5em; padding: 1.5em 2em; width: 100%; max-width: 100%; color: #fff; white-space: nowrap; text-overflow: ellipsis; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #1a95eb; cursor: pointer; } 
						#body > .bottom > button.save:hover{ background: #1687d6; } 
						#body > .bottom > button.save:active{ background: #117ac4; } 
	}
	/* Tablet */ 
	@media (min-width: 768px){ 
		html{  } 
			body{  } 
				#body{  } 
					#body > .bottom{  } 
						#body > .bottom > button.save{ width: auto; } 
	} 

@keyframes fadeIn {
    0% {opacity:0;}
    100% {opacity:1;}
}

@keyframes peekIn {
    0% {opacity:0%; transform: translate(0px, 20px);}
    100% {opacity:100%; transition: translate(0px, 0px);}
}

@keyframes zoomIn {
    0% {opacity: 0%; transform: scale(0%);}
    100% {opacity: 100%; transform: scale(100%);}
}

@keyframes flipIn {
    0% {transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform-origin: top; animation-timing-function: ease-in; opacity: 0%;}
    60% {transform: perspective(400px) rotate3d(1, 0, 0, -30deg); transform-origin: top; animation-timing-function: ease-in;}
    80% {transform: perspective(400px) rotate3d(1, 0, 0, 15deg); transform-origin: top; opacity: 100%;}
    100% {transform: perspective(400px); transform-origin: top; opacity: 100%;}
}

@keyframes swooceIn {
    0% {transform: scale(.4); transform-origin: top; opacity: 0%;}
    60% {transform: scale(.7) translate(0px, 30px); transform-origin: center;}
    100% {transform: scale(1) translate(0px, 0px); transform-origin: center; opacity: 100%;}
}