body {
    margin: 0px;
    background-color: #f7f4f1;
}

#page {
    margin-top: 0px !important;
}

.contact {
    text-align: center;
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
}

.contact img {
    width: 100px;
    margin-top: 0;
    border-top: 0;
    padding-bottom: 6px;
}

.contact a {
    text-decoration: none;
}

.content {
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    text-align: center;
    max-width: 1800px;
    padding-left: 48px;
    padding-right: 40px;
    font-size: 18px;
    font-weight: 400;
}

@media screen and (max-width: 680px) {    
    .content {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}
}

@media only screen and (max-device-width: 415px) {    
    .content {
    max-width: 100%;
    padding-left: 24px;
    padding-right: 24px;
}
}

.content h1 {
    font-size: 21px;
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 0;
}

.content h2 {
    font-size: 16px;
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    padding-bottom: 2px;
    text-align: left;
}

.content a {
    border-bottom: 4px solid #8d60ac;
    text-decoration: none;
    color: black !important;
}

.presentation {
    margin: 0;
    padding-left: 20%;
    padding-right: 20%;
}

.presentation p {
    margin-top: 30px;
    margin-bottom: 30px;
    margin-left: 20px;
    margin-right: 20px;
    line-height 30px;
}

@media screen and (max-width: 1100px) {    
    .presentation {
    max-width: 100%;
    padding-left: 10%;
    padding-right: 10%;
}
}

@media screen and (max-width: 680px) {    
    .presentation {
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}
}

@media only screen and (max-device-width: 415px) {    
    .presentation {
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
}
}

.presentationtext
{
    background-color: white;
    margin-top: 30px;
    margin-bottom: 40px;
    padding-left: 4%;
    padding-right: 4%;
    padding-top: 1.5%;
    padding-bottom: 1%;
}

.portrait {
    width: 180px;
    height: 180px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    margin:auto;
}

.portrait img {
    display: inline;
    margin: 0 auto;
    height: 100%;
    width: auto;
}

.details {
    text-align: center;
    font-size: 18px;
    padding-top: 24px;
    padding-bottom: 0px;
    line-height: 24px;
    margin: 0px;
}

@media screen and (max-width: 1030px) {
    .details {
    padding-top: 12px;
    }
}

.detailsnarrow {
    text-align: center;
    font-size: 18px;
    padding-top: 24px;
    padding-bottom: 0px;
    line-height: 24px;
    margin: 0px;
    width: 25%;
    float: left;
}

@media screen and (max-width: 1030px) {
    .detailsnarrow {
    width: 100%;
    padding-top: 12px;
    float: left;
    }
}

.detailsnarrow h1 {
    text-align: left;
    padding-left: 6%;
    font-size: 200%;
}

@media screen and (max-width: 1030px) {
    .detailsnarrow h1 {
    padding-left: 2%;
    }
}

.detailswide {
    text-align: center;
    font-size: 18px;
    padding-top: 24px;
    padding-bottom: 0px;
    line-height: 24px;
    margin: 0px;
    width: 75%;
    float: right;
}

@media screen and (max-width: 1030px) {
    .detailswide {
    padding-top: 12px;
    float: right;
    width: 100%;
    }
}

.samples {
    width: 80%;
    padding-left: 15%;
    padding-right: 15%;
    text-align: left;
}

@media screen and (max-width: 1030px) {
   .samples {
    width: 90%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 24px;
    text-align: left;
    display: inline;
    }
}

@media screen and (max-width: 680px) {    
    .samples {
    width: 96%;
    text-align: left;
}
}

@media only screen and (max-device-width: 415px) {    
    .samples {
    width: 96%;
    text-align: left;
    font-size: 18px;
}
}

.games {
    width: 22%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    float: left;
    text-align: left;
}

@media screen and (max-width: 1030px) {
   .games {
    width: 46%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 24px;
    float: left;
    text-align: left;
    display: inline;
    }
}

@media screen and (max-width: 680px) {    
    .games {
    width: 96%;
    text-align: left;
}
}

@media only screen and (max-device-width: 415px) {    
    .games {
    width: 96%;
    text-align: left;
    font-size: 18px;
}
}

.games a {
    border-bottom: 4px solid #8d60ac;
    text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    line-height: 36px;
}

@media only screen and (max-device-width: 415px) {    
    .games a {
        border-bottom: 4px solid #8d60ac;
        text-decoration: none;
        text-transform: uppercase;
        color: black !important;
        line-height: 36px !important;
    }
}

.games img {
    max-width: 98%;
    align-content: center;
}

.games h1{
    font-size: 21px;
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-weight: 700;
    color: #8d60ac;
    text-transform: uppercase;
    padding-bottom: 12px;
}

.startup {
    width: 22%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    float: left;
    text-align: left;
}

@media screen and (max-width: 1030px) {
   .startup {
    width: 46%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 24px;
    float: left;
    text-align: left;
    display: inline;
    }
}

@media screen and (max-width: 680px) {    
    .startup {
    width: 96%;
    text-align: left;
}
}

@media only screen and (max-device-width: 415px) {    
    .startup {
    width: 96%;
    text-align: left;
    font-size: 18px;
}
}

.startup a {
    border-bottom: 2px solid #8d60ac;
    text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    line-height: 36px;
}

@media only screen and (max-device-width: 415px) {    
    .startup a {
        border-bottom: 2px solid #8d60ac;
        text-decoration: none;
        text-transform: uppercase;
        color: black !important;
        line-height: 36px !important;
    }
}

.startup img {
    max-width: 240px;
}

.design {
    width: 22%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    position: relative;
    float: left;
    text-align: left;
}

@media screen and (max-width: 1030px) {    
    .design {
    width: 46%;
    padding-left: 2%;
    padding-right: 2%;
    padding-bottom: 24px;
    float: right;
    clear: right;
    text-align: left;
    display: inline;
}
}

@media screen and (max-width: 680px) {    
    .design {
    width: 96%;
    text-align: left;
}
}

@media only screen and (max-device-width: 415px) {    
    .design {
    width: 96%;
    text-align: left;
    font-size: 18px;
}
}

.design a {
    border-bottom: 10px solid #8d60ac;
    text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    line-height: 36px;
}

@media only screen and (max-device-width: 415px) {    
    .design a {
        border-bottom: 10px solid #8d60ac;
        text-decoration: none;
        text-transform: uppercase;
        color: black !important;
        line-height: 36px !important;
    }
}


.pictures {
    width: 30%;
    padding-left: 1.5%;
    padding-right: 1.5%;
    position: relative;
    float: left;
    text-align: left;
}

@media screen and (max-width: 1030px) {
    .pictures {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    float: left;
    clear: left;
    text-align: left;
    display: inline;
}
}

@media screen and (max-width: 680px) {    
    .pictures {
    width: 96%;
    text-align: left;
    padding-bottom: 24px;
}
}

@media only screen and (max-device-width: 415px) {    
    .pictures {
    width: 96%;
    text-align: left;
    padding-bottom: 24px;
}
}

.pictures a {
    border-bottom: 2px solid #e2689d;
    text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    line-height: 36px;
}

@media only screen and (max-device-width: 415px) {    
    .pictures a {
        border-bottom: 2px solid #e2689d;
        text-decoration: none;
        text-transform: uppercase;
        color: black !important;
        line-height: 36px !important;
    }
}

.pictures img {
    max-width: 98%;
    align-content: center;
}

.writing {
    width: 90%;
    padding-left: 6%;
    padding-right: 6%;
    position: relative;
    float: left;
    text-align: left;
}

@media screen and (max-width: 1030px) {   
    .writing {
    width: 96%;
    padding-left: 2%;
    padding-right: 2%;
    float: right;
    text-align: left;
    display: inline;
}
}

@media screen and (max-width: 680px) {    
    .writing {
    width: 96%;
    text-align: left;
    padding-bottom: 12px;
}
}

@media only screen and (max-device-width: 415px) {    
    .writing {
    width: 96%;
    text-align: left;
    padding-bottom: 12px;
}
}

.writing a {
    border-bottom: 4px solid #ffb94f;
    text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    line-height: 36px;
}

@media only screen and (max-device-width: 415px) {    
    .writing a {
        border-bottom: 4px solid #ffb94f;
        text-decoration: none;
        text-transform: uppercase;
        color: black !important;
        line-height: 36px !important;
    }
}

.links {
    clear: both;
    padding-top: 6px;
    padding-bottom: 30px;
    margin: 0;
}

.links p {
    margin: 0;
    padding-top: 12px;
    padding-bottom: 18px;
}

.links a {
    text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 21px;
    margin-left: 30px;
    margin-right: 30px;
    border-bottom: 4px solid black;
}

@media screen and (max-width: 1030px) {
    .links a {
        line-height: 48px;
    }
}

@media only screen and (max-device-width: 415px) { 
    .links a {
        text-decoration: none;
    text-transform: uppercase;
    color: black !important;
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 21px;
    }
}

.footer {
    font-family: "brandon-grotesque", Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    padding-bottom: 6px;
}