@font-face {
    font-family: 'ChaletComprime-CologneEighty';
    src: url('ChaletComprime-CologneEighty.eot');
    src: url('ChaletComprime-CologneEighty.eot?#iefix') format('embedded-opentype'),
        url('ChaletComprime-CologneEighty.woff2') format('woff2'),
        url('ChaletComprime-CologneEighty.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    width: 100%;
    background-color: #fff;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
}

header {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.headerone {
    width: 50%;
    text-align: center;
}

.headertwo {
    width: 50%;
    text-align: center;
}

.headerthree {
    width: 90%;
}

.headerthree a {
    margin: 0 auto;
}

.mainstuff {
    width: 90%;
    font-size: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

#logo {
    transition: all 200ms ease-in-out;
    width: 200px;
}

.homebutton:hover {
    filter: drop-shadow(0px 0px 5px #c800a9);
}

nav {
    width: 100%;
    max-height: 100px;
    /* display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center; */
    margin-top: 20px;
    text-align: center;
}

#projectname {
    display: inline-block;
    margin: 0 auto;
}
#projectnamemobile {
    display: none;
}

#previousnext {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

nav a {
    margin: 0 auto;
    font-family: 'ChaletComprime-CologneEighty', 'Arial', sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 36pt;
    border-bottom: 1px solid rgba(0,0,0,0);
    display: inline-block;
    position: relative;
    padding: 0 10px;
}

h2 {
    font-family: 'ChaletComprime-CologneEighty', 'Arial', sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 22pt;
    margin: 0 auto;
    margin-top: -20px;
    text-align: center;
}

h3 {
    font-family: 'ChaletComprime-CologneEighty', 'Arial', sans-serif;
    color: #000;
    text-decoration: none;
    font-size: 18pt;
    margin: 0 auto;
    text-align: center;
}

i {
    font-style: italic;
}

a hr {
    border: 2px solid black;
    margin-top: -6px;
    transition: all 500ms ease-in-out;
}

.animatedlink:not(:hover) > a hr {
    opacity: 100%;
    transform: scalex(0);
}

/***** ------------------------------------ Homepage ------------------------------------ *****/

.center {
    position: fixed;
    left: 50%;
    top: 60%;
}

.center img {
    width: 150px;
    filter: drop-shadow(0px 5px 5px rgba(0,0,0,.6));
    margin: -75px 0 0 -75px;
    transition: all 200ms ease-in-out;
}

.center img:hover {
    width: 164px;
    margin: -82px 0 0 -82px;
    filter: drop-shadow(0px 7px 7px rgba(0,0,0,.3));
    transition: all 200ms ease-in-out;
}

.center img:active {
    width: 156px;
    margin: -78px 0 0 -78px;
    filter: drop-shadow(0px 6px 6px rgba(0,0,0,.45));
    transition: all 25ms ease-in-out;
}

.rotatable img {
    display: block;
    position: relative;
    left: 0;
    top: 0;
    width: 90px;
    margin: -45px 0 0 -45px;
    filter: drop-shadow(0px 0px 1px rgba(0,0,0,0));
    transition: all 200ms ease-in-out;
}

.rotatable img:hover {
    width: 100px;
    margin: -50px 0 0 -50px;
    filter: drop-shadow(0px 5px 5px rgba(0,0,0,.5));
    transition: all 200ms ease-in-out;
}

.rotatable img:active {
    width: 96px;
    margin: -48px 0 0 -48px;
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,.5));
    transition: all 25ms ease-in-out;
}

#planeta {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbit 25s -6.25s linear infinite;
}

#planetb {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbit 25s -12.5s linear infinite;
}

#planetc {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbit 25s -18.75s linear infinite;
}

#planetd {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbit 25s linear infinite;
}

#planete {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbitreverse 50s linear infinite;
}

#planetf {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbitreverse 50s -12.5s linear infinite;
}

#planetg {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbitreverse 50s -25s linear infinite;
}

#planeth {
	position: fixed;
	left: 50%;
	top: 60%;
    animation: orbitreverse 50s -37.5s linear infinite;
}


/***** ------------------------------------ About Page ------------------------------------ *****/

#aboutarea {
    margin: 0 auto;
    margin-top: 8%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#spinningheadboy  {
    width: 50%;
    max-width: 400px;
    animation: headwiggle 5s -.5s ease-in-out infinite;
}

#spinningheadboy img {
    width: 100%;
    animation: headhover 4s -1s ease-in-out infinite;
}

#aboutinformation {
    width: 50%;
    max-width: 400px;
}

#aboutarea h1 {
    font-family: 'ChaletComprime-CologneEighty', 'Arial', sans-serif;
    color: #000;
    text-decoration: none;
    text-align: left;
    font-size: 42pt;
    margin-top: 0px;
}

#aboutarea hr {
    border: 2px solid black;
}

#aboutarea p {
    font-family: 'Helvetica', Helvetica, arial, sans-serif;
    font-size: 14pt;
    margin-top: 10px;
}

#socials {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#socials img {
    width: 80%;
    border-radius: 1rem;
    transition: all 200ms ease-in-out;
    box-shadow: 0px 0px 0px rgba(0,0,0,0);
}

#socials img:hover {
    box-shadow: 0px 0px 8px rgba(0,0,0,.5);
    filter: brightness(.9);
}

/***** ------------------------------------ Project Pages ------------------------------------ *****/

#previousnext a {
    font-size: 30pt;
}

#previousnext hr {
    margin-top: -4px;
}

.projectpage {
    text-align: left;
    width: 70%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
}

#leftarrow {
    display: none;
}

#rightarrow {
    display: none;
}


.mobileversion {
    display: none;
}

.projectpagemobile {
    display: none;
}

.projectpage h1 {
    font-family: 'ChaletComprime-CologneEighty', 'Arial', sans-serif;
    color: #000;
    text-decoration: none;
    text-align: left;
    font-size: 42pt;
    margin-top: 0px;
}

.projectpage h2 {
    text-align: left;
    font-size: 28pt;
    margin-top: 0px;
    margin-bottom: 10px;
}

.projectpage p {
    padding-right: 8%;
    font-family: 'Helvetica', Helvetica, arial, sans-serif;
    font-size: 14pt;
    margin-bottom: 10px;
}

.projectpage em {
    line-height: 1.2;
    padding-right: 8%;
    font-family: 'Helvetica', Helvetica, arial, sans-serif;
    font-size: 11pt;
}

.infosection {
    width: 60%;
    float: left;
}

.infosection em a {
    text-decoration: none;
    color: #000;
}

.infosection em a:hover {
    cursor: text;
}

.casestudy {
    margin: 2em auto;
    width: 90%;
    display: flex;
    align-items: center;
}

.casestudy p {
    padding-right: 0;
    padding-left: 0;
}

.casedescriptionleft h2 {
    font-size: 32pt;
    text-align: left;
}

.casedescriptionleft p {
    padding-right: 10%;
    padding-left: 0;
}

.casedescriptionleft {
    width: 50%;
    float: left;
    text-align: left;
}

.casepictureleft {
    width: 50%;
    float: right;
    margin: 0 auto;
    text-align: center;
}

.casedescriptionright h2 {
    font-size: 32pt;
    text-align: right;
}

.casedescriptionright p {
    padding-right: 0;
    padding-left: 10%;
}

.casedescriptionright {
    width: 50%;
    float: right;
    text-align: right;
}

.casepictureright {
    width: 50%;
    float: left;
    margin: 0 auto;
    text-align: center;
}

.casestudy img {
    width: 80%;
    outline: 2px solid #000;
    border-radius: 1rem;
    transition: all 200ms ease-in-out;
}

.casestudy img:hover {
    outline-offset: 5px;
    border-radius: 0rem;
}

.casestudycenter {
    text-align: center;
    margin: 2em auto;
    width: 90%;
}

.casestudycenter img {
    margin: 10px auto;
    width: 90%;
    outline: 2px solid #000;
    border-radius: .5rem;
}

#casestudyvideos {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
}

#casestudyvideos iframe {
    max-width: 48%;
}

.casestudycenter h2 {
    font-size: 32pt;
    text-align: center;
}

.casestudycenter p {
    padding-left: 0;
    padding-right: 0;
}

.previewpic {
    width: 40%;
    float: right;
}

.previewpic img {
    width: 100%;
    border-radius: 50%;
}

/**** ------------------------------------ gallery ------------------------------------ ****/

.gallery {
    margin-top: 20px;
    margin-bottom: 10%;
}

.galleryrow {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}

.gallerypic {
    width: 25%;
    text-align: center;
    font-family: 'Helvetica', Helvetica, arial, sans-serif;
    font-size: 12pt;
}

.gallerypic img {
    width: 100%;
    transition: all 200ms ease-in-out;
}

.gallerypic img:hover {
    border-radius: 2rem;
    filter: brightness(.8);
    filter: drop-shadow(0px 0px 5px rgba(0,0,0,.5));
}

/**** ------------------------------------ animation ------------------------------------ ****/

@keyframes orbit {
	from { 	transform: rotate(0deg) translateX(-150px) rotate(0deg); }
	to   {  transform: rotate(360deg) translateX(-150px) rotate(-360deg); }
}

@keyframes orbitreverse {
	from { 	transform: rotate(0deg) translateX(-260px) rotate(0deg); }
	to   {  transform: rotate(-360deg) translateX(-260px) rotate(360deg); }
}

@keyframes orbitmobile {
	from { 	transform: rotate(0deg) translateX(106.07px) translateY(106.07px) rotate(0deg); }
	to   {  transform: rotate(360deg) translateX(106.07px) translateY(106.07px) rotate(-360deg); }
}

@keyframes headhover {
    from { transform: translateY(-15px); }
    50% { transform: translateY(15px); }
    to { transform: translateY(-15px); }
}

@keyframes headwiggle {
    from { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    to { transform: rotate(5deg); }
}


/**** ------------------------------------ shapes ------------------------------------ ****/
.funshape {
    overflow: hidden;
    position: absolute;
    width: 60px;
    margin: -30px -30px 0 0;
    z-index: -2;
}

#funshape1 { top: 8%; left: 4%; }
#funshape2 { top: 90%; left: 38%; }
#funshape3 { top: 72%; left: 21%; }
#funshape4 { top: 50%; left: 9%; }
#funshape5 { top: 88%; left: 1%; }
#funshape6 { top: 30%; left: 15%; }
#funshape7 { top: 92%; left: 90%; }
#funshape8 { top: 3%; left: 77%; }
#funshape9 { top: 45%; left: 81%; }
#funshape10 { top: 20%; left: 87%; }
#funshape11 { top: 65%; left: 93%; }
#funshape12 { top: 82%; left: 70%; }

#funshape21 { top: 8%; right: 4%; }
#funshape22 { top: 90%; right: 38%; }
#funshape23 { top: 72%; right: 21%; }
#funshape24 { top: 50%; right: 9%; }
#funshape25 { top: 88%; right: 1%; }
#funshape26 { top: 30%; right: 15%; }
#funshape27 { top: 92%; right: 90%; }
#funshape28 { top: 3%; right: 77%; }
#funshape29 { top: 45%; right: 81%; }
#funshape30 { top: 20%; right: 87%; }
#funshape31 { top: 65%; right: 93%; }
#funshape32 { top: 82%; right: 70%; }


/* –––––––––––––––––––––––––––––––––––––––––––––––––– Tablet –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 601px) and (max-width: 1100px)
{
    header {
        text-align: center;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .headerone {
        width: 100%;
    }
    .headertwo {
        width: 100%;
    }
    nav img {
        margin: 0 auto;
    }
    
    .center {
        top: 60%;
    }
    #planeta {
        top: 60%;
    }

    #planetb {
        top: 60%;
    }

    #planetc {
        top: 60%;
    }

    #planetd {
        top: 60%;
    }
    #planete {
        top: 60%;
    }

    #planetf {
        top: 60%;
    }

    #planetg {
        top: 60%;
    }

    #planeth {
        top: 60%;
    }
    
    .funshape {
        overflow: hidden;
        position: absolute;
        width: 50px;
        margin: -25px -25px 0 0;
        z-index: -2;
    }
    
    #aboutarea h1 {
        font-size: 28pt;
    }
    #aboutarea p {
        font-size: 12pt;
        margin-top: 8px;
    }
    
    #previousnext a {
        font-size: 28pt;
    }
    .projectpage {
        width: 80%;
    }
    .projectpage p {
        font-size: 12pt;
    }
    .casestudy img {
        width: 90%;
    }
    .galleryrow {
        width: 100%;
    }
    .gallerypic {
        width: 30%;
    }
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– Mobile –––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 600px)
{
    body {
        overflow-x: hidden;
    }
    #projectname {
        display: none;
    }
    #projectnamemobile {
        display: block;
    }
    header {
        text-align: center;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
    }
    .headerone {
        width: 100%;
    }
    .headertwo {
        width: 100%;
    }
    nav img {
        margin: 0 auto;
    }
    hr {
        display: none;
    }
    
    .center {
        top: 60%;
    }
    #planeta {
        top: 60%;
    }

    #planetb {
        top: 60%;
    }

    #planetc {
        top: 60%;
    }

    #planetd {
        top: 60%;
    }
    #planete {
        animation: orbitmobile 25s linear infinite;
        top: 60%;
    }

    #planetf {
        animation: orbitmobile 25s -6.25s linear infinite;
        top: 60%;
    }

    #planetg {
        animation: orbitmobile 25s -12.5s linear infinite;
        top: 60%;
    }

    #planeth {
        animation: orbitmobile 25s -18.75s linear infinite;
        top: 60%;
    }
    
    .funshape {
        overflow: hidden;
        position: absolute;
        width: 40px;
        margin: -20px -20px 0 0;
        z-index: -2;
    }
    
    #funshape1 { top: 7%; left: 4%; }
    #funshape2 { top: 97%; left: 34%; }
    #funshape3 { top: 40%; left: 6%; }
    #funshape4 { display: none; }
    #funshape5 { top: 92%; left: 1%; }
    #funshape6 { top: 20%; left: 13%; }
    #funshape7 { top: 96%; left: 86%; }
    #funshape8 { top: 3%; left: 73%; }
    #funshape9 { top: 27%; left: 81%; }
    #funshape10 { top: 14%; left: 87%; }
    #funshape11 { top: 45%; left: 89%; }
    #funshape12 { top: 88%; left: 60%; }
    
    #funshape21 { top: 7%; right: 14%; }
    #funshape22 { top: 97%; right: 24%; }
    #funshape23 { top: 40%; right: 16%; }
    #funshape24 { display: none; }
    #funshape25 { display: none; }
    #funshape26 { top: 20%; right: 23%; }
    #funshape27 { top: 96%; right: 86%; }
    #funshape28 { top: 3%; right: 73%; }
    #funshape29 { top: 27%; right: 81%; }
    #funshape30 { top: 14%; right: 87%; }
    #funshape31 { top: 45%; right: 89%; }
    #funshape32 { top: 88%; right: 54%; }    

    #aboutarea {
        margin: 0 auto;
        text-align: center;
        margin-top: 0;
        width: 100%;
        flex-direction: column;
    }
    #aboutinformation {
        background-color: #fff;
        width: 100%;
    }
    #aboutarea hr {
        display: block;
        border: 1px solid #000;
    }
    #aboutarea h1 {
        font-size: 32px;
        text-align: center;
    }
    #aboutarea p {
        font-size: 10pt;
    }
    
    #spinningheadboy  {
        width: 80%;
        max-width: 400px;
        animation: headwiggle 5s -.5s ease-in-out infinite;
    }

    #spinningheadboy img {
        width: 100%;
        animation: headhover 4s -1s ease-in-out infinite;
    }

    #aboutinformation {
        width: 80%;
        max-width: 400px;
    }
    
    h1 {
        font-family: 'ChaletComprime-CologneEighty', 'Arial', sans-serif;
        color: #000;
        text-decoration: none;
        text-align: center;
        font-size: 32pt;
    }
    h2 {
        text-align: center;
        font-size: 22pt;
        margin-top: 0px;
    }
    p {
        text-align: center;
        font-family: 'Helvetica', Helvetica, arial, sans-serif;
        font-size: 10pt;
    }
    em {
        padding-right: 0;
        font-family: 'Helvetica', Helvetica, arial, sans-serif;
        font-size: 9pt;
    }
    
    #leftarrow {
        display: inline-block;
        width: 40px;
    }

    #rightarrow {
        display: inline-block;
        width: 40px;
    }
    
    .desktopversion {
        display: none;
    }
    .mobileversion {
        display: flex;
        text-align: center;
        flex-direction: row;
        align-content: center;
        justify-content: space-around;
    }
    #logo {
        margin: 0 auto;
        width: 150px;
    }
    .projectpage {
        display: none;
    }
    .projectpagemobile {
        display: inline-block;
        width: 90%;
        margin: 0 auto;
        margin-top: 20px;
    }
    
    .infosection {
        float: none;
        text-align: center;
        width: 100%;
    }
    .previewpic {
        float: none;
        margin: 20px auto;
        width: 80%;
    }
    
    .casestudycenter h2 {
        font-size: 26pt;
    }
    
    iframe {
        margin: 10px auto;
        outline: 2px solid #000;
        outline-offset: -2px;
        border-radius: .5rem;
    }
    
    .galleryrow {
        margin-top: 10px;
        justify-content: space-around;
    }

    .gallerypic {
        width: 44%;
        font-size: 10pt;
    }
    .gallerypic img:hover {
        border-radius: 0;
        filter: brightness(.7);
        filter: drop-shadow(0px 0px 1px rgba(0,0,0,0));
    }

}