&/*
style.css
---------
 
ICE
*/
 
body {
overflow-x: hidden;
width:100%;
font-family: Helvetica;
background-color: #FFFFFF;
}

body a:link{
color: #000000;
text-decoration: none;
}

body a:visited{
color: #000000;
}


h2{ 
margin: 0px;
font-size: 14px; 
font-weight: bold;
}

h2 a:hover{
background-color: rgb(81,94,249);;
color: #FFFFFF;
font-weight: bold;
}

.centrer{
position:absolute;
top:50%;
margin-top:-153px;
left:50%;
margin-left:-172px;
}

.slide{
padding-top:10%;
margin-left:10%;
}

/*
copyright
*/

#copyright{
position:absolute;
bottom:8%; 
right:6%; 
}

div#deux{
    box-shadow: 6px 6px 6px rgb(234,238,245);
    border-radius: 10px;
    text-align: right;
    color:#FFFFFF;
    position: absolute;
    bottom:16%;
    right: 7%;
    padding:10px;
    background-color: rgb(220,228,238);
    font-size: 0.8em;
}

div#deux{
    display: none;
}

div#copyright:hover + div#deux{
    display: block;
}

footer{ 
position:fixed;
bottom:2%;
right:10%;
}

footer img{
width:12px;
margin-left:10px;
}

/*
Dom- Work
*/
.imgdom{ 
position:absolute;
bottom:175px;
left:128px;
}

.imgdom img{ 
width:40%;
}

.dom{ 
position:absolute;
bottom:284px;
left:128px;
}

.urldom{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-size:12px;
width:188px;
position:absolute;
bottom:125px;
left:128px;
}

.urldom a:hover{
-webkit-transition: 0.5s ease-in-out;
color:#DCDCDC;
}

/*
Yesawi- Work
*/

.projet{ 
position:absolute;
bottom:175px;
left:418px;
}

.projet img{ 
width:40%;
}

.pose{ 
width:188px;
position:absolute;
bottom:284px;
left:418px;
}

.pose2{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-size:12px;
width:188px;
position:absolute;
bottom:125px;
left:418px;
}

.pose2 a:hover{
-webkit-transition: 0.5s ease-in-out;
color:#DCDCDC;
}

/*
tumblr- Work
*/

.pro{ 
position:absolute;
bottom:175px;
left:708px;
}

.pro img{ 
width:40%;
}

.tumblr{ 
width:188px;
position:absolute;
bottom:284px;
left:708px;
}

.tumblr2{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-size:12px;
width:250px;
position:absolute;
bottom:125px;
left:708px;
}

.tumblr2 a:hover{
-webkit-transition: 0.5s ease-in-out;
color:#DCDCDC;
}

/*
Navigation
*/

#sse1
{
position:fixed;
top:2%;
right:7%;
    /*You can decorate the menu's container, such as adding background images through this block*/
    background-color: #FFFFFF;
    height: 38px;
    padding: 15px;
    border-radius: 3px;
}
#sses1
{
    margin:0 auto;/*This will make the menu center-aligned. Removing this line will make the menu align left.*/
}
#sses1 ul 
{ 
    position: relative;
    list-style-type: none;
    float:left;
    padding:0;margin:0;
    border-bottom:solid 2px #FFFFFF;
}
#sses1 li
{
    float:left;
    list-style-type: none;
    padding:0;margin:0;background-image:none;
}
/*CSS for background bubble*/
#sses1 li.highlight
{
    background-color:#FFFFFF;
    top:36px;
    height:2px;
    border-bottom:solid 2px rgb(81,94,249);
    z-index: 1;
    position: absolute;
    overflow:hidden;
}
#sses1 li a
{
    height:30px;
    padding-top: 8px;
    margin: 0 20px;/*used to adjust the distance between each menu item. Now the distance is 20+20=40px.*/
    color: #000000;
    font-family: Helvetica;
    text-align: center;
    text-decoration: none;
    float: left;
    display: block;
    position: relative;
    z-index: 2;
}

.bio{ 
width:200px;
position:absolute;
top:20%;
margin-left:10%;
}

.mail{ 
position:absolute;
top:20%;
margin-left:10%;
}

.mail a:hover{
text-decoration:none;
}

.contact{ 
position:absolute;
top:30%;
margin-left:10%;
}

.contact a{ 
margin-right:5px;
}

.contact a:hover{
color:#FFFFFF;
background-color: rgb(81,94,249);
}

.kacey{ 
position:absolute;
bottom:50%;
margin-left:10%;
}

.kacey a:hover{
text-decoration:none;
}

.centrer{
    display: table-cell;
    height: 300px;
    text-align: center;
    width: 300px;
    vertical-align: middle;
}

.conteneur{
margin-top:10%;
margin-left:10%;
margin-bottom:5%;
width:80%;
}
.conteneur img{
width:15%;
padding:0.5em;
}

.conteneur a:hover{
-webkit-transition: 0.5s ease-in-out;
color:#DCDCDC;
}

/* 100% Image Width on Smaller Screens */
@media screen and (max-width: 640px){

body {
overflow-x: hidden;
}
   
.conteneur img{
    width:80%;
    padding:0.5em;  
}  

body{
    font-size:1em;
}

body a{
    font-size:1em;
}