/*-----------------------------
            reset
-----------------------------*/
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, 
blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; }

/*-----------------------------
        Globle Styling
-----------------------------*/
body {
	font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
	background-color: #333333;
    margin: 0px;
    padding: 0px;
}

.wrapper {
    padding: 5px 25px 5px 25px;
    display: block;
}

h1, h2, h3 {
    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
}

h1 {
    color: #333333;
    font-size: 2em;
    font-weight: bolder;
}

h2 {
    color: rgb(255,255,255);
    font-size: 1.7em;
    font-weight: bold;
}

h3 {
    color: rgb(255,255,255);
    font-size: 1.7em;
    font-weight: lighter;
}

h4 {
    color: rgb(255,255,255);
    font-size: 1em;
    font-weight: lighter;
}

p {
    color: rgb(255,255,255);
    font-size: 1em;
    font-weight: lighter;
}

@media screen and (min-width: 768px){
    .wrapper{
        margin: 0 auto 0 auto;
        overflow: auto;
        width: 710px;
    }
}

@media screen and (min-width: 927px){
    .wrapper{
        margin: 0 auto 0 auto;
        overflow: hidden;
        width: 890px;
    }
}

@media screen and (min-width: 1220px){
    .wrapper{
        margin: 0 auto 0 auto;
        overflow: hidden;
        width: 1180px;
    }
}
/*-----------------------------
            Header
-----------------------------*/
header {
    background-color: #ffffff;
    padding: 12px;
    text-align: center;
}

@media screen and (min-width: 768px){
    
    header{
        overflow: auto;
        width: 100%;
    }
    
    header h1{
        padding: 0px;
        float: left;
        text-align: left;
        width: 300px;
    }
} /* Media query for header */
/*-----------------------------
          Navigation
-----------------------------*/
.MainNav ul {
    padding-left: 0;
    border-color: rgb(51,51,51);
    border-width: .5px 0px 0px 0px;
    border-style: solid;
    margin: 20px 0px 0px 0px
}

.MainNav li {
    list-style: none;
    text-align: center;
    margin: 15px 0px 0px 0px;
}

.MainNav a {
    display: block;
    padding: 15px 0px 15px 0px;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: lighter;
    background: rgb(255,255,255);
    color: rgb(51,51,51);
}

.MainNav a:hover {
    background: rgba(0,0,0,.15);
    transition: .5s background;
}

.MainNav li.selected a {
	font-weight: bolder;
}

@media screen and (min-width: 768px){
    
    .MainNav ul {
        float: right;
        border: none;
        margin: 0px;
    }
    
    .MainNav li {
        float: left;
        margin: 0px;
    }
    
    .MainNav a {
        padding: 12px 20px;
    }
} /* Media query for Nav*/

/*-----------------------------
           Button
-----------------------------*/
.Button a{
    display: block;
    list-style: none;
    text-align: center;
    width: 300px;
    margin: 20px auto 20px auto;
    padding: 15px 0px 15px 0px;
    border-color: rgb(170,170,170);
    border-width: .5px .5px .5px .5px;
    border-style: solid;
    text-decoration: none;
    font-size: 1.2em;
    font-weight: lighter;
    color: rgb(170,170,170);
}

.Button a:hover {
    background-color: rgb(255,255,255);
    color: rgb(51,51,51);
    transition: .5s background;
}

@media screen and (min-width: 1220px){
    .Button {
        float: left;
    }
}

/*-----------------------------
  Portfolio Navigation UX/UI
-----------------------------*/
.UXUINav ul {
    padding-left: 0;
}

.UXUINav li {
    float: left;
    list-style: none;
    text-align: center;
    margin: 0px auto 0px auto;
}

.UXUINav a {
    display: block;
    padding: 15px 20px 15px 24px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: lighter;
    color: rgb(170,170,170);
}

.UXUINav a:hover {
    color: rgb(255,255,255);
    transition: .5s all;
}

.UXUINav li.Portselected a {
    font-weight:800;
    color: rgb(255,255,255);
}

@media screen and (min-width: 1220px){
    
    .UXUINav ul{
        margin-top: 15px;
        position: absolute
    }
    
    .UXUINav li {
        float: none;
        text-align: left;
        margin: 0px;
    }
    
    .UXUINav a {
        padding: 10px 12px;
        
    }
}

/*-----------------------------
     Portfolio Navigation
    Design and Illustration
-----------------------------*/
.PortfolioNav ul {
    margin-top: 20px;
    padding-left: 0;
    border-color: rgb(255,255,255);
    border-width: 0px 0px .5px 0px;
    border-style: solid;
}

.PortfolioNav li {
    float: left;
    list-style: none;
    text-align: left;
    margin: 20px auto 0px auto;
}

.PortfolioNav a {
    display: block;
    padding: 15px 20px 15px 24px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: lighter;
    color: rgb(170,170,170);
}

.PortfolioNav a:hover {
    color: rgb(255,255,255);
    transition: .5s all;
}

.PortfolioNav li.Portselected a {
    font-weight:800;
    color: rgb(255,255,255);
}

@media screen and (min-width: 1220px){
    .PortfolioNav ul{
        border: none; 
    }
    
    .PortfolioNav li {
            float: none;
    }
    
    .PortfolioNav a {
        padding: 0px;
    }
    
    #Design {
        position: absolute;
        margin: 620px 0px 0px 0px;
    }
    
    #Illustration {
        position: absolute;
        margin: 2410px 0px 0px 0px;
    }
    
    #Motion {
        position: absolute;
        margin: 3040px 0px 0px 0px; 
    }
    
    #Rule2 {
        position: absolute;
        margin-top: 620px;
        width:  1220px;
        height: 1px;
        background-color: #ffffff;
    }
    
    #Rule3 {
        position: absolute;
        margin-top: 2410px;
        width: 1220px;
        height: 1px;
        background-color: #ffffff;
    }
    
    #Rule4 {
        position: absolute;
        margin-top: 3040px;
        width:  1220px;
        height: 1px;
        background-color: #ffffff;
    }
}
/*-----------------------------
          Portfolio
-----------------------------*/
.PortfolioImages {
    display: block;
}

    .PortfolioImages img {
        width: 48%;
        max-width: 230px;
        float: left;		/* horizontally float each image next to each other */
        padding: 3px;
    }

.projects {
    display: block;
    overflow: auto;
    width: 100%;
}

.video iframe {
    width: 350px;
    height: 200px;
}

#Canon {
        margin: 0 auto;
        width: 281px;
    }

#imageSIZES {
        width: 100%;
    }

#Tron {
        width: 350px;
    }

#Sins {
        width: 100%;
    }

canvas { 
    width: 100%;
    background-size: 100%;
    }

#Giants {
        width: 350px;
    }

#infoimageSIZES img{
    width: 350px;
}

@media screen and (min-width: 768px){
    
    .projects {
        max-width: 768px;
    }
    
    .video iframe {
        width: 640px;
        height: 360px;
        }
    
    #imageSIZES {
        width: 768px;
    }
    
    #Tron {
        width: 545px;
    }
    
    #Giants {
        width: 545px;
    }
    
    #Sins {
        width: 768px;
    }
    
    #infoimageSIZES {
        display: block;
        overflow: auto;
        width: 768px;
    }
    
    #infoimageSIZES img{
        padding: 10px 10px;
    }
    
} /* Media query for Portfolio Images*/

@media screen and (min-width: 927px){
    .PortfolioImages img {
        max-width: 262px;
        padding: 15px;
    }
    
    .projects {
        max-width: 876px;
        margin-bottom: 44px
    }
} /* Media query for Portfolio Images*/

@media screen and (min-width: 1220px){
    
    
    .projects {
        float: right;
    }
    
    .ProjectsMedia {
        overflow: visible;
        width: 100%;
        margin: 65px 0px 50px 0px;
    }
    
    .ProjectsMedia img{
        float: right;
        margin-bottom: 50px
    }
    
    #Canon {
        margin: 0px 300px 20px 0px;
        width: 281px;
    }
    
    #Tron {
        margin:  0px 300px 20px 0px;
        width: 545px;
    }
    
    #Giants {
        margin:  0px 300px 20px 0px;
        width: 545px;
    }

    .video iframe {
        margin:  0px 0px 40px 445px;
        width: 640px;
        height: 360px;
        }
    
    canvas { 
        width: 1280px;
        margin: 200px 0px 20px -50px;
    }
    
    #Bacteria img {
        float: left;
    }
    
    #Bacteria canvas {
        width: 1080px;
        margin: 200px 0px 20px 0px;
    }
    
    #infoimageSIZES {
        float:right;
    }
    
}
/*-----------------------------
          Descriptions
-----------------------------*/
.AboutText {
    margin: 60px 0px 0px 0px;
    border-color: rgb(255,255,255);
    border-width: .5px 0px 0px 0px;
    border-style: solid;
}

.AboutText h2 {
    padding: 10px 0px 0px 0px
}

.Description {
    margin: 15px 0px 15px 0px;
}

.Process {
    margin: 20px 0px 0px 0px;
    border-color: rgb(255,255,255);
    border-width: .5px 0px 0px 0px;
    border-style: solid;
    padding: 10px 0px;
}

#About {
    margin: 0px 0px 0px 0px;
}

#About .Description {
        float:left;
        Width: 100%;
    }

@media screen and (min-width: 768px) {
    
    .Description {
        width: 500px;
    }
}
@media screen and (min-width: 927px){

    #About .Description {
        float:left;
        Width: 500px;
    }
}

@media screen and (min-width: 1220px){
    
    .AboutText {
        position: absolute;
        float: left;
    }
    
    .Description {
        width: 300px;
    }
    
    #About .Description {
        float:left;
        Width: 700px;
    }
    
    #About {
    margin: 90px 0px 0px 0px;
    }
    
}

/*-----------------------------
      About Page Picture
-----------------------------*/
.MyPic {
    display: block;
    margin: 0 auto;
    width: 350px;
}

.MyPic img{
    width: 350px;
}

@media screen and (min-width: 927px){
    .MyPic {
        float:right
    }
}

@media screen and (min-width: 1220px){
    .MyPic {
        margin: 70px 50px 0px 0px;
    }
}

/*-----------------------------
      About Page Resume
-----------------------------*/
#NAVResume {
    display: block;
    overflow: auto;
    width: 100%;
}

.Resume ul {
    padding-left: 0;
}

.Resume li {
    list-style: none;
    text-align: center;
    margin: 20px auto 0px auto;
    border-color: rgb(255,255,255);
    border-width: .5px 0px 0px 0px;
    border-style: solid;
}

.Resume a {
    display: block;
    padding: 15px 20px 15px 24px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: lighter;
    color: rgb(170,170,170);
}

.Resume a:hover {
    color: rgb(255,255,255);
    transition: .5s all;
}

/*-----------------------------
         Contact Page
-----------------------------*/
.Contactlinks h2{
    margin: 20px 0px 0px 0px;
}

.facebook img{
    width: 128px
}

.ContactIcons ul {
    padding-left: 0;
}

.ContactIcons li {
    list-style: none;
    margin: 20px auto 0px auto;
}

.ContactIcons a {
    float: left;
    display: block;
    padding: 15px 20px 15px 20px
    
}
/*-----------------------------
      Project Navigation
-----------------------------*/
.BackNextNav ul {
    display: block;
    padding-left: 0;
}

.BackNextNav li {
    float: left;
    display: block;
    list-style: none;
    text-align: left;
    margin: 0px 10px 0px 0px;
}

.BackNextNav a {
    float: left;
    display: block;
    padding: 15px 20px 15px 20px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold;
    color: rgb(170,170,170);
}

.BackNextNav a:hover {
    background-color: rgb(255,255,255);
    color: rgb(51,51,51);
    transition: .5s all;
}
/*-----------------------------
        Project Pages
-----------------------------*/
.Projects img {
    width: 100%;
}

.FranceFlag img {
    margin: 0px -5px 20px 0px;
    padding: 0px;
    width: 113px;
}

@media screen and (min-width: 1220px){
    .FranceFlag {
        position: absolute;
        margin: 210px 0px 0px 0px
    }
}


/*-----------------------------
           Footers
-----------------------------*/
footer {
    background-color: rgb(255,255,255);
    overflow: auto;
    width: 100%;
}

.ContactFooter {
    position: fixed;
    bottom: 0;
}

.SocialMedia ul{
    padding-left: 0;
}

.SocialMedia li{
    list-style: none;
    margin: 0 auto;
    width: 225px;
}

.SocialMedia a{
    float: left;
    display: block;
    padding: 15px 15px 10px 15px;
}

.CopyRight {
    display: block;
    text-align: center;
    padding-top: 70px;
    color: rgb(51,51,51);
}