.logo {
    margin-top: 110px;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 80vw;
    height: 80vw;
    max-width: 500px;
    max-height: 500px;
}

.logo .fart {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0.45;
    animation-name: spin;
    animation-iteration-count: infinite;
    animation-timing-function: linear; 
}

#fart1 {
    animation-duration: 40000ms;
    width: 90%;
    height: auto;
}

#fart2 {
    animation-duration: 80000ms;
    width: 92%;
    height: auto;
}

#fart3 {
    animation-duration: 56000ms;
    width: 100%;
    height: auto;
}

#fart4 {
    animation-duration: 120000ms;
    width: 95%;
    height: auto;
}

#bifftext {
    position: absolute;
    top: 9%;
    left: 17%;
    width: 58%;
    height: auto;
}

#moustache {
    position: absolute;
    top: 52%;
    left: 38%;
    width: 40%;
    height: auto;
}

#biffingsworthtext {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    top: 72%;
    width: 100%;
    height: auto;
}

#monocle {
    position: absolute;
    left: 66%;
    top: 77%;
    width: 10%;
    height: auto;

}

#tophat {
    position: absolute;
    left: 7%;
    top: 8%;
    width: 25%;
    height: auto;
}

@keyframes spin {
    from {
        transform:translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}



.about-container {
    display: block;
    text-align: center;
    width: 100%;
    height: auto;
    margin-top: 20px;
}

    .about-container .frame.portrait {
        vertical-align: top;
        display: inline-block;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 30px;
    }

    .about-container svg {
        vertical-align: top;
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 30px;
        height: 100vw;
        max-height: 559px;
    }

    .frame.portrait {
        max-width: 336px;
        max-height: 439px;
        height: 88vw;
        width: 67vw;
    }

    .frame.portrait .contents {
        width: 100%;
        height: 100%;
        background-image: url(../images/portrait.webp);
        background-size: cover;
    }


.screenshot-container {
    text-align: center;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}


.frame.screenshot img {
    width: 216px;
    height: 384px;
}

.frame.screenshot .contents {
    width: 216px;
    height: 384px;
}

.frame.screenshot {
    width: 216px;
    height: 384px;
    display: inline-block;
}

.frame.screenshot.screenshot1 {
    transform: scale(0.7);
}

.frame.screenshot.screenshot2 {
    transform: scale(0.6);
}

.frame.screenshot.screenshot3 {
    transform: scale(0.9);
}

.frame.screenshot.screenshot4 {
    transform: scale(0.8);
}

.frame.screenshot.screenshot5 {
    transform: scale(1.0);
}

.frame.screenshot.screenshot6 {
    transform: scale(0.7);
}

.frame.screenshot.screenshot7 {
    transform: scale(0.6);
}

.frame.screenshot.screenshot8 {
    transform: scale(0.9);
}


.play-store {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
    width: 100vw;
    height: auto;
    margin-top:50px;
}



/* Contact */

.contact-container
{
	width: 90%;
    max-width: 800px;
	position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    color: white;
    font-family: 'ashbury';
}

#contactForm
{
	float: left;
	padding-top: 0px;
	width: 100%;
	text-align: left;
	overflow: hidden;
}

    #contactForm input.submit
    {
        display: inline-block;
        margin-left: 15%;
    }

    #contactForm input.medium
    {
        margin-right:0%;
        padding:5px;
        margin-top: 10px;
        height:30px;
        margin-left:10px;
        display: table-cell;
        width:100%;
        font-family:arial;
        font-size:1em;
    }

    #contactForm textarea.large
    {
        margin-right:0px;
        margin-top: 10px;
        margin-left:10px;
        font-family:arial;
        font-size:1em;
        padding:5px;
        display: table-cell;
        width:100%;
        border:solid 1px white;
    }

    #contactForm div.formLine
    {
        width:90%;
        display: table;
    }

    #contactForm li
    {
        margin-bottom:5px;
    }

    #contactForm label
    {
        width: 150px;
        text-align: right;
        vertical-align: top;
        font-size: 1.5em;
        margin-right: 0px;
        display: table-cell;
        padding-top: 15px;
        font-family: 'ashbury';
    }

    #contactForm ul
    {
        list-style-type: none;
    }

div.g-recaptcha
{
	margin-top:15px;
	padding-top:0px;
	margin-left:160px;
}

#contactForm button.submit
{
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    border: 0px;
    cursor: pointer;
    color: white;
    background: #b2812c;
    width: 100px;
    border-radius: 12px;
    font-family: 'ashbury';
    font-size: 21px;
    padding: 8px 0px;
}

#contactResponse
{
	font-size: 1.2em;
	display: block;
	margin-top: 15px;
	margin-bottom: 10px;
}

    #contactResponse .error{
        background: #dd6565;
        padding: 0px 10px 7px 10px;
        margin-left: auto;
        margin-right: auto;
    }

    #contactResponse div label
    {
        vertical-align: middle;
        margin-top: 10px;
        display: inline-block;
    }

    #contactResponse div img
    {
        margin-right: 10px;
        margin-top: 10px;
        vertical-align: middle;
    }


@media (max-width: 767px)
{  

    .header {
        margin-top: 100px;
        margin-bottom: 0px;
    }

    .about-container .frame.portrait {
        margin-left: 0px;
        margin-right: 0px;
    }

    .about-container svg {
        margin-left: 0px;
        margin-right: 0px;
    }


    .frame.screenshot.screenshot1,
    .frame.screenshot.screenshot2,
    .frame.screenshot.screenshot3,
    .frame.screenshot.screenshot4,
    .frame.screenshot.screenshot5,
    .frame.screenshot.screenshot6,
    .frame.screenshot.screenshot7,
    .frame.screenshot.screenshot8 {
        transform: scale(0.9);
    }

    .screenshot-container {
        margin-top: 30px;
    }
}

@media (max-width: 479px)
{  
}