/* 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;
}

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
}


/* /////////////// end reset */




/* ///////////////////// TYPOGRAPHY */

body {
    font-family: 'Roboto', sans-serif;

    font-family: 'Poppins', sans-serif;

}
h1, h2, h3, h4, h5, h6 {
    padding-top:.1em;
}

a {
    text-decoration:none;
}

#tagline h1 {
    font-size:calc(6px  + 4vmin);
    letter-spacing: -.05rem;
    color: #6b6b6b;
    line-height:calc(6px + 5vmin);
    font-weight:200;
    font-style:italic;
}
#tagline h1 em {
    font-size:calc(6px + 5.5vmin);
    clear:both;
    display:block;
    position:relative; 
    top:.1em;
}

#tagline h1 em, #tagline h1 .myName {
    color:#909090;

}

#main h2, #skills h2 {
    font-size: 4em;
    color: gray;
    margin-bottom:1em;
    font-weight:100;
}
#main .content_2 h2, #skills h2 {
}

#main .content_2 p, #main .content_2 p *  {
    color:gray;
}

#main .content_2 p {
    margin-bottom:1em;
}

#main p, #main li {
   /* font-size: calc(11px + 1vh); */
   font-size: 1.1em;
   font-weight: 400; 
}
#main #skills p, #main #skills li, #main #skills a {
    font-weight:100;
    line-height: 1.2em;
}

#main li {
    margin-bottom:1em;
}
#skills * {
    color:#fff;
}



#main h3 {
    border-top: .3em solid silver;
    padding-top:.3em;
    font-size: 1.8em;
    color:gray;
    margin-bottom:.75em;
    line-height:1.2em;
}

.text p {
    line-height: 1.75em;
}


#skills h3 {
    border-top: .3em solid #4a4a4a;

}

/* //////////////// Structure */


#w1, #w2, #w3 {
    margin-left:0;
    float:left;
    width:7em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;

}

div {
}

.fadeIn {
    opacity:1 !important;
}
#tagline .t2 {
    text-indent:-.2em;
}

#tagline .t3 {
    text-indent:-.4em;
}
.block {
    float:left;
}
* {


}


body {
    background-color:#20657f;

    background-color:#0085AB; /* blue; */
    height:auto;
    overflow-x:hidden;

background-image:url("i/tiling_bg.png");
background-size:679px 80vh;
background-repeat:repeat-x;
height:100vh;

    
}

.slide {
    margin-left: -7em !important;
    opacity:0 !important;
}


#container {
    /* float:left; */
    /* width:100%; */
}


    #bg {
        /* background-image: linear-gradient(to bottom right, #006B84, #05A2C6); */
        background-image:url("i/bubbles.png");
        background-position: 50vw, 30vh;
        background-size:70vmin;
        width:100%;
        z-index:100;
        background-repeat:no-repeat;
        height:100vh;

    }
    #header, #tagline, #main, #bg, #diver {
        width:100%;
        position:absolute;
        transition:top .5s linear;
        clear:both;
    }
    #header, #diver, #bg {
        width:120vw;
    }

    #body {
        transition:background-position .5s linear;
    }
    #topSpacer {
        width:100%;
        /*   padding-bottom:80vh; */
        /*   padding-bottom:60%; */

        padding-bottom:95vh;


        float:left;
        background-image:url("i/bg_white.svg");
        background-size:100vw; 
        background-position: left bottom;
        background-repeat:no-repeat;
    }

    #header {
        background-image:url("i/wordmark.svg");
        
        background-size:60vmax;
        background-size:60vw; 
        background-position:10vmin 0;
        background-repeat:no-repeat;
        height:200vh;
        margin-top:-15%;
        margin-left:7vmax;
        margin-left:7vw;
    }
    #wordmark {
        max-width:500px;
        width:85vmin;
        height:300px;
    }

    #wordmark img {
        width:100%;
        max-width:85vmax;
        max-height:130vh;
    }
    #diver{
        background-image:url("i/diver.png");  
        background-position:40vw 20%;
        background-repeat: no-repeat;
        height:100vh;
        background-size:110vmin;
    }

        
    #tagline {
        background-image:url("i/bg_black_top.svg");  
        background-position:0 34vh;
        background-repeat: no-repeat;
        width:100%; 
        height:300vh;
        background-size:300%;
        padding-top:58vh;
        overflow:hidden;  
    }



        #tagline_2 {
            -ms-transform: rotate(-12deg); /* IE 9 */
            -webkit-transform: rotate(-12deg); /* Safari */
            transform: rotate(-12deg);
            /* margin-top:calc(1.4em + 46vh); */
            position:relative;
            top:-3vh;
            width:100vh;
            margin-left:5vw;
        }

    #diver  {
        background-blend-mode: screen;
        z-index:600;
        
    }

    #bg {
        z-index:700;
        background-blend-mode: screen;
    }
    #header {
        z-index:800;
    }
    #tagline {
        z-index:900;
    }

    #main {
        z-index:1000;    
    }

        #work {
        margin-top:-1px; 
        float:left;
        width:100%;
        clear:both;
        }
        
        #work, #skills {
            background-color:#fff;
            float:left;
            width:100%;
            padding-left: 5vw;
            padding-right: 1em;
           
        }


            #skills {
                padding-bottom:5em;
            }
            

            #skills p {
                line-height:1.2em;
                margin-bottom:1.2em;
            }
            #work .content_1 {
                width: 75%;
                padding-right:2vw;
                float:left;
                margin-bottom:-5em; 
            }

            #work .content_2 {
                width:20%;
                border-left: 1px solid silver;
                padding-left: 5vw;
                float:right;
                margin-top:8.25em;
            }


                .content_2 a {
                    width:70%;
                    outline:1px solid silver;
                }

                .content_2 img {
                    width:80%;
                }
        #skills_start {
            background-color:#fff;
        
            float:left;

            position:relative;
            width:100%;
          height:0; 
          padding-bottom:25%;

        }


        .skills_block {
         width:100%;
          height:0; 
          padding-bottom:25%; 
            width:100%;
            position:absolute;
            top:0;
            left:0;
        }


        #skills_start_2 {
            background-image:url("i/bg_blue_downwards.svg");
            background-position:0 50px;
            background-repeat:no-repeat;
            
        }

        #skills_start_3 {
            background-image:url("i/bg_black_bottom_upwards.svg");  
            background-repeat:no-repeat;
            background-position:top right; 
            background-size: 120%; 120%;
        }
h2 {
}

.item {
    float:left;
    width:100%;
    clear:both;
    margin-bottom:7em;
}

.text {
    float:left;
    width:40%;
    padding-right:5vw;
    
}

.image {
    margin-top:.45em;
    float:right;
    width: 60%;
}

.image img {
    width:100%;
    outline:1px solid silver;
       display:block; 
}

.black_start {
}


#skills {
    width:100%;
    height:200%;
    top:0;
    background-size:500%;
    float:left; 
    clear:both;  
    width:100%;
    background-color:#383739;
   
}


    #skills .block {
        width:40%;
        float:left;
        padding-right:5vw;

    }
    #skills .content_1 {
        width:35%;
    }
    #skills .content_3 {
        width:20%;
    }
   



#seeMyWork {
    margin-top: -4vh;
    margin-bottom: 9vh;
    height:2em;
    position:relative;
    text-align:center;
    left:35vw;
    width:30vmin;
}

#seeMyWork a {
    color:gray;
    text-decoration:none;
    font-size:calc(4px + 2vh);
    background-image:url("i/scroll.svg");
    background-position:center bottom;
    background-size:20vh;
    display:block;
    height:0;
    padding-bottom:12vh;
    font-weight:300;
    background-repeat:no-repeat;
    background-position:center;


    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
    
}

#header {
 

}
    #main img {
        display:block;
    }

    #work .content_2 a {
    display:block;
        position:relative;
    }

    #work .content_2 a::after {
        transform:scale(0);
        transition: transform ease-out 150ms,
        bottom ease-out 150ms;

          content: "View website";
        position:absolute;
        font-size:.8em;
        top:100%; 
        background-color:gray;
        color:#fff;
        line-height:2em;
        width:100%; 
        left:0;  
        text-align:center;
        
    }
    #work .content_2 a:hover::after {
        transform:scale(1);
    }





#bottom {
    position:relative;
    
    overflow:hidden;
    margin-top:-1px;
}

#bottom2, #bottom3, #bottom4 {
    position:absolute;
    top:0;
    left:0;
    padding-bottom:100%;
}
#bottom, #bottom2, #bottom3, #bottom4 {
    width:100%;
    height:0;
    padding-bottom:23%;
    clear:both;
    background-size:100%;

}
#bottom2 {
    background-image:url("i/bg_bottom.svg");
    z-index:100;

}

#bottom3, #bottom4 {
    transition:top .5s linear;

}

#bottom3 {
    top:-100px;
    background-image:url("i/octopus.jpg");
    background-repeat:no-repeat;
    background-size:40vw;
    background-color:#0085AB;
    z-index:50;
    padding-bottom:100%;
}

#bottom4 {
    top:-100px;
    background-image:url("i/bubbles.png");
    background-position:-10vmax -10vmax;
    background-repeat:no-repeat;
    background-size:50%;
    z-index: 75;
    height:200%; 
}
#technicalList li {
    clear:both;
    margin-bottom:1em;
    display:block;
    float:left;
    text-indent:-100vw;
}
#technicalList div {
    float:left;
    margin-right:1em;
    width:10em;
    text-align:right;
}
#technicalList span {
    background-color:gray; 
    display:block;
    float:left;
}
.sk1 span {
    width: 1em;
}

.sk2 span {
    width: 2em;
}

.sk3 span {
    width: 3em;
}

.sk4 span {
    width: 4em;
}

.sk5 span {
    width: 5em;
}


@media (max-width:500px) {

    #header, #diver, #bg {
        width:100vw;
    }

   #header {

        background-image:url("i/wordmark_narrow.svg");
        background-position: 1em 0;
        background-size:90vmin;
        margin-top:0;
        margin-left:0;
    }

    #seeMyWork {
        margin-top:-3vh;
    }

}


@media (max-width:950px) {
 
    /*
    #header {
            background-position:0 0;
            margin-top:-2vh;
            background-size:100vmin;

    }

    #seeMyWork {
        margin-top:-3vh;
    }
    
    */


    #main p, #main li {
       /* font-size: calc(11px + 1vh); */
       font-size: 1em;

    }






    body .block {
        clear:both;
        float:left;
        width:100% !important;
        padding-left:0 !important;
        border-left:0 !important;
    }
    #work .content_1 {
        margin-bottom: 0;
    }

    #work .image {
        width:100%;
    }

    #work .content_2 a {
        width:100%;
    }
    #work .content_2 p {
        border-top: .3em solid silver;
        font-size:2em;
        padding-top: .3em;
        display:block;
        
    }
    #work .content_2 h3 {
        display:none;
    }

    #skills .item {
        margin-bottom:3em;
    }
}


@media (max-width:1190px) {
    #main p, #main li {
       /* font-size: calc(11px + 1vh); */
       font-size: 1em;

    }

}




@media (max-width:768px) {
   #work .text {
        clear:both;
        width:100%;
        margin-bottom:2em;
   }

   #work .image {
        float:left;
        clear:both;
   }

}
#main .content_2 h3 {
    /* font-weight: normal !important; */
    /* border-top:0; */
}
/* html, body, #main {
    width:100vw !important;
}
html {
    outline: 1px solid green;
}
body, #main {

    outline: 1px solid red;
} */