/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*DESKTOP*/
* {
    /*    moves padding and border to inside the "div"*/
    box-sizing: border-box;
}

/*PARALLAX CODE START*/
.cd-background-wrapper {
    background-color: #001426;
    position: relative;
    overflow: hidden;
    -webkit-perspective: 11000px;
    perspective: 8000px;
}

.cd-floating-background {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
}

.cd-floating-background.is-absolute {
    position: absolute;
}

.cd-floating-background img {
    width: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* fixes a Firefox bug - images not correctly rendered*/
    background-color: rgba(255, 255, 255, 0.01);
}

.cd-floating-background img:not(:first-child) {
    position: absolute;
    top: 0;
    left: 0;
}

.cd-floating-background img:first-child {
    -webkit-transform: translateZ(50px);
    -ms-transform: translateZ(50px);
    transform: translateZ(50px);
}

.cd-floating-background img:nth-child(2) {
    -webkit-transform: translateZ(290px);
    -ms-transform: translateZ(260px);
    transform: translateZ(260px);
}

.cd-floating-background img:nth-child(3) {
    -webkit-transform: translateZ(300px);
    -ms-transform: translateZ(300px);
    transform: translateZ(300px);
}

.cd-floating-background img:nth-child(4) {
    -webkit-transform: translateZ(300px);
    -ms-transform: translateZ(270px);
    transform: translateZ(270px);
}

.cd-floating-background img:nth-child(5) {
    -webkit-transform: translateZ(200px);
    -ms-transform: translateZ(200px);
    transform: translateZ(200px);
}

.no-preserve-3d .cd-floating-background {
    /* we target browsers that don't support preserve-3d and show just a standard image - no effect visible */
    position: relative;
}

/*END PARALLAX CODES*/



body {
    font-family: 'Montserrat', sans-serif;
    cursor: url(img/hover_1.png), pointer;
}

b {
    font-weight: bold;
    font-family: inherit;
}

/*COLOR TEXT CODE*/

#wrapper {
    text-align: left;
    color: #000;
    font-size: 6em;

}

span {
    text-shadow: -0.04em -0.04em #E14097, 0.04em 0.04em #5ECBF4;
    /* This creates the 3D effect, pretty easy, eh? */

}

h2 {
    font-weight: 800;
    font-style: italic;
}

h3 {
    font-weight: 800;
}


}

/*END COLOR TEXT CODE*/

#gallery {
    display: block;
    max-width: 1860px;
    margin: auto;
}




/* ATTEMPT AT GALLERY CODE*/
.grid {
    position: relative;
    padding: 1em 0 4em;
    max-width: 100%;
    list-style: none;
    text-align: center;
    display: flex;
    flex-wrap: wrap;

}

.grid a {
    position: relative;
    overflow: hidden;
    width: 33.333333333333333333333333333333%;
    max-height: 33%;
    background: black;
    text-align: center;
    cursor: url(img/point.png), pointer;

}

.grid figure img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;

}

.grid a:hover img {
    opacity: 0.7;
}

.grid figure figcaption {
    padding: 2em;
    color: #fff;
    text-transform: uppercase;
    font-size: 1.25em;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
    pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

figure.effect-zoe figcaption {
    top: auto;
    bottom: 0;
    padding: 1em;
    height: 3.75em;
    background: #fff;
    color: #3c4a50;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

figure.effect-zoe h2 {
    float: left;
    font-size: 18pt;
    color: black;
}

figure.effect-zoe p.icon-links a {
    float: right;
    color: #3c4a50;
    font-size: 1.4em;
}

figure.effect-zoe:hover p.icon-links a:hover,
figure.effect-zoe:hover p.icon-links a:focus {
    color: #252d31;
}

figure.effect-zoe p.description {
    position: absolute;
    bottom: 8em;
    padding: 2em;
    color: #fff;
    text-transform: none;
    font-size: 90%;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    -webkit-backface-visibility: hidden;
    /* Fix for Chrome 37.0.2062.120 (Mac) */
}

figure.effect-zoe h2,
figure.effect-zoe p.icon-links a {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 200%, 0);
    transform: translate3d(0, 200%, 0);
}


figure.effect-zoe p.icon-links a span::before {
    display: inline-block;
    padding: 8px 10px;
    font-family: 'feathericons';
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-eye::before {
    content: '\e000';
}


figure.effect-zoe h2 {
    display: inline-block;
}

figure.effect-zoe:hover p.description {
    opacity: 1;
}

figure.effect-zoe:hover figcaption,
figure.effect-zoe:hover h2,
figure.effect-zoe:hover p.icon-links a {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

figure.effect-zoe:hover h2 {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}

figure.effect-zoe:hover p.icon-links a:first-child {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}

/*END GALLERY CODE*/



nav {

    display: flex;
    /*    aligns horizontal*/
    justify-content: flex-end;
    /*    aligns vertical*/
    align-items: baseline;
    padding: 20px 35;
    position: absolute;
    z-index: 2;
    font-weight: 400;

    left: 0;
    top: 0;
    width: 100%;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));


}

nav #logo {
    margin-right: auto;
    cursor: url(img/point.png), pointer;
    padding-left: 25px;
}

nav #logo:hover {
    opacity: .8;
}

a {
    text-decoration: none;
}

nav a {
    /* margin: 10px; - top right bottom left
    margin: 10px 20: -10px on top+bottom, 20 on right+left
    margin: 10px 20px 30px 40px; - 10t, 20r, 30b, 40l
    */
    margin: 0 2%;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    padding-top: 20px;

}

nav a:hover {
    cursor: url(img/point.png), pointer;
    opacity: .8;
}


#work {
    padding: 50px 0 20px 13%;
}

#dice {
    display: flex;
    justify-content: center;
    padding-bottom: 225px;
}

#bio {
    display: flex;
    background: black;
    color: white;
    max-height: 550px;
    overflow: hidden;
}

#about {
    display: flex;
    background: black;
    color: white;
    max-height: 750px;
    overflow: hidden;
}

#bioimg img {
    width: 60vw;
    min-width: 700px;

}

/*
#bio img {
    width: 50%;
    min-width: 500px;
    background: black;
    min-height: 600px;
}
*/


#text {
    width: 50%;
    min-width: 600px;
    max-width: 650px;



}

#text p {
    padding: 10 30 15 150px;
    font-weight: 100;
    font-size: 12pt;
    line-height: 1.4;


}

#bio h3 {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18pt;
    padding: 30 30 15 150px;

}

#bio h2 {
    color: white;
    padding: 120 0 15 150px;
    font-size: 1em !important;
}

#about h3 {
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18pt;
    padding: 30 30 15 150px;

}

#about h2 {
    color: white;
    padding: 120 0 15 150px;
}

#linku a:hover {
    cursor: url(img/point.png), pointer;

}

#linku:hover {
    opacity: .8;
}

#doodle {
    margin: 5%;
    padding-right: 5%;
    display: flex;
    justify-content: flex-end
    
}

video {
  width: 50vw;
  align-content: center;
 margin-left: auto;
   margin-right: auto;
}

#doodle img {
    width: 25%;
    height: auto;
    align-items: flex-end;
}

footer {
    height: 200px;
    background: black;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: white;
    padding: 30px 15%;
}

footer img {
    width: 35px;
    cursor: url(img/point.png), pointer;
}

#foot {
    align-items: center;
    padding-right: 20px;
    line-height: 1.3;
}

#foot p {
    font-weight: 800;
    font-size: 16pt;
    text-align: center;
}

#foot h1 {
    max-width: 250px;
    font-size: 12pt;
}

#icons {
    padding: 20px;
    font-size: 30px;
    text-decoration: none;
    border-radius: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#icons img:hover {
    opacity: .7;
}



/*work page shit*/
#pagework {
    display: flex;
    /*    aligns horizontal*/
    justify-content: flex-end;
    /*    aligns vertical*/
    align-items: baseline;
    padding: 20px 35;
    background: black;
}

#hero img {
    width: 100%;
    height: auto;
    margin-top: 92px;

}

#description {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    padding: 70px 0px;
    margin: 0px 25%;

}

#description h2 {
    font-size: 58px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-style: italic;

}

#description p {
    padding: 15 70;
    font-weight: 300;
    line-height: 1.3;
    font-size: 12pt;
    width: 500px;

}

#details {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    align-items: flex-start;
}

#pics {
    margin-top: 40px;
}

.long {
    width: 66.6666666666666666666666%;
    height: auto;
}

.longer {
    width: 100%;
    height: auto;
}

.bigger {
    width: 100%;
    height: auto;
}

.big {
    width: 50%;
    height: auto;
}

.small {
    width: 33.3333333333333333333333%;
    height: auto;
}

/*biopage*/
#spacing {
    margin-top: 92px;
}

h1 {
    font-style: italic;
    font-size: 1%;
    text-transform: uppercase;
    text-align: center;
    color: white;

}

#text h2 {
    font-size: 70%;
    padding-right: 15px;
}

#resume {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

}

#resume p {
    font-weight: 100;
    padding: 20 10;

}



#thinker {
    margin-top: 150px;
}

#thinker h2 {
    font-size: 58px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    font-style: italic;
    padding: 0 10%;

}

/*EMAIL SHIT*/

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

#contact {
    width: 640px;
    margin: auto;
    align-content: center;
}


h1 {
    margin-top: 0;
}

.field {
    margin: 1em 0;
}

label {
    display: block;
    margin-top: 2em;
    margin-bottom: 0.5em;
    color: #999999;
}

input {
    width: 100%;
    padding: 0.5em 0.5em;
    font-size: 1.2em;
    border-radius: 3px;
    border: 1px solid #D9D9D9;
}

textarea {
    width: 100%;
    height: 200px;
    padding: 0.5em 0.5em;
    font-size: 1.2em;
    border-radius: 3px;
    border: 1px solid #D9D9D9;
}

button {
    display: inline-block;
    border-radius: 3px;
    border: none;
    font-size: 0.9rem;
    padding: 0.5rem 0.8em;
    background: black;
    border-bottom: 1px solid #498b50;
    color: white;
    -webkit-font-smoothing: antialiased;
    font-weight: bold;
    margin: 0;
    width: 100%;
    text-align: center;
}

button:hover,
button:focus {
    opacity: 0.75;
    cursor: url(img/point.png), pointer;
}

button:active {
    opacity: 1;
    box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.1) inset;
}

.success {
    padding: 1em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #468847;
    background-color: #dff0d8;
    border: 1px solid #d6e9c6;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.error {
    padding: 1em;
    margin-bottom: 0.75rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #b94a48;
    background-color: #f2dede;
    border: 1px solid rgba(185, 74, 72, 0.3);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

/*FINISH EMAIL SHIT*/


.iframe-container{
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; 
  height: 0;
}
.iframe-container iframe{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* TABLET */
@media screen and (max-width: 800px) {
    .cd-background-wrapper {
        height: 80vh !important;
    }

    .cd-floating-background img {
        height: 80vh;
        width: 143vh;

    }

    .cd-floating-background img:nth-child(2) {
        left: -28vh !important;
        /*        WHAT THE FUCK HE MOVES IN REVERSE WHAT THE SHIT*/
    }

    .grid a {
        width: 50%;
        max-height: 360px;
    }


    figure.effect-zoe p.description {
        opacity: 1;
    }

    figure.effect-zoe figcaption,
    figure.effect-zoe h2,
    figure.effect-zoe p.icon-links a {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    #work h2 {
        text-align: center;
        font-size: 80%;
    }

    #work {
        margin: auto;
        padding: 30 10 10 10;
    }
    
    #description {
        margin: auto;
    }

    #description h2 {
        font-size: 45px;
    }
    
    


    #thinker h2 {
        font-size: 45px;
    }

    #bio {
        flex-wrap: wrap;
        max-height: none;
    }

    #about {
        flex-wrap: wrap;
        max-height: none;
    }

    #bioimg {
        order: -1;
        height: 400px;
    }
    
    #bioimg img {
        width: 120%;
    }

    /*
    #bio img {
        order: -1;
        width: 100%;
    }
*/

    #text {
        width: 100%;
        background: black;
        min-width: 0;
        max-width: none;
    }


    #linku {
        align-content: center;
        padding: 30px 10%;
    }

    #linku h3 {
        padding: 0;
        margin: auto;
        text-align: center;
    }

    #text h2 {
        color: white;
        padding: 30 0 30 0;
        text-align: center;
        font-size: 90%;
        margin: auto;
    }

    #text p {
        padding: 10px 10% 10px 10%;
        max-width: 80%;
        font-size: 12pt;
        margin: auto;

    }

    #doodle img {
        width: 50%;
        
    }

    .big {
        width: 100%;
    }

    .small {
        width: 100%;
    }

    .long {
        width: 100%;
    }

    #contact {
        width: 60%;
    }

    .grid a img {
        opacity: .7;
    }

    footer {
        margin: auto;
        justify-content: center;
    }
}


/* MOBILE */
@media screen and (max-width: 550px) {
    .cd-floating-background img:nth-child(2) {
        left: -350px !important;

        /*        WHAT THE FUCK HE MOVES IN REVERSE WHAT THE SHIT*/
    }

    .cd-floating-background img:nth-child(4) {
        width: 800px;
        height: 450px;
        margin-top: 10vw;
        left: -30px;
    }

    .grid a {
        width: 100%;
        max-height: 360px;

    }

    #bio h2 {
        color: white;
        margin: auto;
        padding: 40 0 10 0;
        font-size: 70% !important;
    }

    #about h2 {
        color: white;
        margin: auto;
        padding: 40 0 10 0;
        font-size: 65% !important;
    }

    #description {
        margin: auto;
    }
    
    #description p{
        margin: auto;
        width: 75%;
        padding: 10px 7%;

    }
    
    
    
    #text {
        padding: 10 20 0 20;
    }

    #text p {
        width: 100%;
        padding: 10 0;
    }

    #work img {
        margin: auto;
        padding: 0;
        width: 100%;
    }

    #contact {
        width: 70%;

    }

    #doodle {
        margin: auto;
        padding: 30px 0px;
    }

    #doodle img {
        width: 70%;
        height: auto;
        align-content: center;
    }

    nav {
        padding: 10px;
    }

    #pagework {
        padding: 20px 10px;
    }

}

@media screen and (min-width: 2000px) {

    #bio {
        max-height: 800px;
    }

    #about {
        max-height: 1200px;

    }

    #text {
        max-width: none;
        width: 50vw;


    }

    #text p {
        padding: 10 30 15 23%;
        font-size: 18pt;
        line-height: 1.5;
        max-width: none;

    }

    #bio h3 {
        font-size: 36pt;
        padding: 30 30 15 23%;

    }

    #bio h2 {
        padding: 120 0 15 23%;
        font-size: 1.4em !important;
    }

    #about h2 {
        padding: 120 0 15 23%;
        font-size: 1.4em !important;
    }

    #about h3 {
        font-size: 36pt;
        padding: 30 30 15 23%;

    }

    #bioimg img {
        width: 40vw;
    }

    #bioimg {
        width: 50vw:
    }

    #description p {
        font-weight: 300;
        line-height: 1.4;
        font-size: 16pt;
        width: 500px;

    }

    #description h2 {
        font-size: 1em;
    }

    nav {
        font-size: 16pt;
    }

    .grid figure figcaption {
        font-size: 24pt;
        height: 5em;
    }

    figure.effect-zoe h2 {
        font-size: 36pt;
    }