@charset "UTF-8";
/* CSS Document */
/*-------------------------------------------------------------- 
--------------------- -                   - --------------------
-----------------------    Structure      ----------------------
--------------------- -                   - --------------------
--------------------------------------------------------------*/

@font-face{font-family:'FontAwesome';
src:url('fonts/fontawesome-webfont.eot');
src:url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff') format('woff'),
url('fonts/fontawesome-webfont.ttf') format('truetype'),
url('fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal}

@font-face {
    font-family: "Open Sans";
    font-style:  normal;
    font-weight: 300;
    src: url(fonts/opensans-light.ttf) format("truetype");
}
@font-face {
    font-family: "Open Sans";
    font-style:  normal;
    font-weight: 400;
    src: url(fonts/opensans-regular.ttf) format("truetype");
}
@font-face {
    font-family: "Open Sans";
    font-style:  normal;
    font-weight: 600;
    src: url(fonts/opensans-semibold.ttf) format("truetype");
}

@font-face {
    font-family: "Sniglet";
    font-style:  normal;
    font-weight: 800;
    src: url(fonts/sniglet-extrabold.ttf) format("truetype");
}
@font-face {
    font-family: "Source Code Pro";
    font-style:  normal;
    font-weight: 300;
    src: url(fonts/sourcecodepro-light.ttf) format("truetype");
}
@font-face {
    font-family: "Source Code Pro";
    font-style:  normal;
    font-weight: 400;
    src: url(fonts/sourcecodepro-regular.ttf) format("truetype");
}
html {font-size: 100%; position:relative;width:100%;margin:0;padding:0;}
body {background-color:#e6e6e6;font-size:62.5%;margin:0;padding:0;} 

a, a:active, a:visited {color:#333;}




img {display:block;margin:0;padding: 0;}
.row{margin:0;padding: 0;-webkit-box-sizing: border-box;box-sizing: border-box;}
#container {
	position:relative;
	
	width:100%;
	margin:0 auto;
	z-index:10;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	border: 0px dotted #fff;
	}
#row1 {
	position:relative;
	width:100%;
	height:420px;
	-webkit-transition: height 0.4s ease;
	-o-transition: height 0.4s ease;
	transition: height 0.4s ease;
	}
/* HELLO */
#row1b {
	border-bottom:2px dotted #aaa;
	padding: 15px 0 11px 0px; 
}

/* WORK */
#row2 {
	position:relative;
	width:100%;
	margin: 0;
	padding: 15px 0 45px 0; 
	border-bottom:2px dotted #aaa;
	-webkit-transition: height 0.4s ease;
	-o-transition: height 0.4s ease;
	transition: height 0.4s ease;
	}
/* CONTACT */
#row3 {
	position:relative;
	min-height:750px;
	-webkit-transition: height 0.4s ease;
	-o-transition: height 0.4s ease;
	transition: height 0.4s ease;
	}

/*--------------------------------------------------------------
--------------------- -                   - --------------------
--------------------     Section Headers   ---------------------
--------------------- -                   - --------------------
--------------------------------------------------------------*/

/* Sets position */
#section-header-1, #section-header-2, #section-header-3 {position:relative;top:15px;left:30px;max-width:788px; width:85%;}  /* !!!IMPORTANT TO SET WIDTH, WITHOUT WILL CREATE HORIZONTAL SPACE OUTSIDE CONTAINER */

.header-e, .header-f {
	position:relative;
	display:inline-block;
	font-family: "Source Code Pro", monospace, sans-serif;
	font-size: 1.7em;
	line-height: 1.4em;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	z-index: 99;
	margin-bottom:3px;

	color:#333;

	border-bottom: 1px dashed currentcolor;
	font-weight: 300;
	} 


/*-------------------------------------------------------------- 
--------------------- -                   - --------------------
-----------------------      Clouds       ----------------------
--------------------- -                   - --------------------
--------------------------------------------------------------*/

#cloud {
	position:absolute;
	top:45px;
	right:15%;
	
	width:439px; 
	height:480px;

	margin:0;	
	padding: 60px 0 0 0;

	background-image:url(../img/catcloud-3.png);
	background-repeat: no-repeat;
	border:0px;
	opacity:1;
	background-size: contain;
	-webkit-transition:1s all ease;
	-o-transition:1s all ease;
	transition:1s all ease;
	z-index:50;
	}

#fadebox {
	width:100%;
	height:420px;
	-webkit-mask-image: radial-gradient(ellipse 98% 89% at 50% 43%, black 40%, transparent 50%);
	}

#cloud-textbox
	{
	position:relative;	
	margin: 0 auto;
	
	width:360px;
	height:100%;
	z-index:51;



	}
	    #cloud {
        overflow: hidden;
        height: 510px;
        width: 439px;
        margin: 0 auto;
    }
     
    /* Style each of the sides
    with a fixed width and height */
     
    .slide {
        float: left;
        height: 710px;
        width: 439px;
        transition: all 0 ease;
        padding: 0 20px;
        box-sizing: border-box;
    }
     
    /* Add animation to the slides */
     
    #cloud-textbox {
         
        /* Calculate the total width on the
      basis of number of slides */
        width: calc(439px * 8);
         
        /* Specify the animation with the
      duration and speed */
        animation: slide 18s cubic-bezier(0.33, 1, 0.68, 1) infinite;
    }
     

    /* Define the animation
    for the slideshow */
     
    @keyframes slide {
         
        /* Calculate the margin-left for
      each of the slides */
        11% {
            margin-left: 0px;
        } 16% {
            margin-left: 0px;
        }
        22% {
            margin-left: calc(-439px * 1 );
        } 27% {
            margin-left: calc(-439px * 1 );
        }
        33% {
            margin-left: calc(-439px * 2 );
        } 38% {
            margin-left: calc(-439px * 2 );
        }
        44% {
            margin-left: calc(-439px * 3 );
        } 49% {
            margin-left: calc(-439px * 3 );
        }
        55% {
            margin-left: calc(-439px * 4 );
        } 60% {
            margin-left: calc(-439px * 4 );
        }
        66% {
            margin-left: calc(-439px * 5 );
        } 71% {
            margin-left: calc(-439px * 5 );
        }
        77% {
            margin-left: calc(-439px * 6 );
        } 82% {
            margin-left: calc(-439px * 6 );
        }
        88% {
            margin-left: calc(-439px * 7 );
        } 90% {
            margin-left: calc(-439px * 7 );
        }
        94% {
            margin-left: calc(-439px * 7 );
        } 97% {
            margin-left: calc(-439px * 7 );
        }
        99% {
            margin-left: calc(-439px * 7 );
        }
        
    }

/*------	CLOUD TYPOGRAPHY ------*/
h1	{position:relative;
	text-indent:0px;
	text-align:center;
	font-family: Sniglet, "Song Ti",sans-serif;
	font-style:normal;
	font-weight:800;
	
	color: #391e21; /* 3e2427*/
	margin: 0px;
	padding: 0px;

	animation: colortext 26s cubic-bezier(0.37, 0, 0.63, 1) infinite;
	}

	@keyframes colortext {
        0%, 100% {color:#1753ff;} /* starting: blue */
        40%, 80% {color:#351e7a;} /* intermediary - gray-blue to avoid purple */
        60% {color:#55051d;}      /* ending: red-brown */
    }
.small {
	font-size:38px;
	line-height:1em;
	letter-spacing: -1px;
	}
.regular {
	font-size:48px;
	line-height:1em;
	}
.large {
	font-size:52px;
	line-height:1em;
	}

.move-down-xl {	padding: 100px 15px 0 20px;}
.move-down-l {	padding: 85px 17px 0 20px;}
.move-down-m {	padding: 60px 17px 0 20px;}

/* mandarin text settings */
.man-xl
	{
	padding: 40px 0 0 15px;
	font-size:129px;
	line-height:136px;
	text-align:center;
	}
	
/* english text settings */

.english 
{	position:relative;
	font-family: "Source Code Pro", "Andale Mono", "Letter Gothic", Courier, "Courier New";
	color: #766;
	font-size:21px;
	line-height:27px;
	top:18px;
	margin:0;padding:0;
	}
/* etc */

.pause {width:180px;height:9px;background-color:#;}

/*-------------------------------------------------------------- 
--------------------- -                   - --------------------
-----------------------    Tabs           ----------------------
--------------------- -                   - --------------------
--------------------------------------------------------------*/


/*--------------------- DIVS --------------------*/

#hello-wrapper
	{
	position:relative;
	
	margin-left:14%;

	padding: 58px 0 10px 0; /*control space on top and bottom*/ 
	
	width:54%;
	max-width:900px;
	height:26em; 
	
	background-color:#;
	z-index:60;
	border: 0px;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	z-index:999;
	}
#tab-wrapper { 
	position:relative; 
	top:18px;
	left:0px;
	margin:0px; 
	padding:0px;
	text-indent:0;
	}
#tab-wrapper ul, #tab-wrapper li {
	position:relative; 
	float:left; 
	margin:0px; 
	padding:0px;
	}

#tab-wrapper ul {	display:block;		font-size:5.25em;height:1.8em;padding-top:0.4em;} /* 5.25 + !HEIGHT SHOULD BE SPEC'D HERE IN EMs! - SO ADAPTATION FOR ALL IS SAME */
#tab-wrapper li {	display:inline;		text-decoration: none; }


/*------------------- TYPOGRAPHY ------------------*/

#tab-wrapper a, #tab-wrapper a:visited {
	padding:0; 					
	margin:0;
	font-family: "Open Sans", sans-serif; 
	font-size:0.4em; 
	line-height:1.2em;
	font-weight:300;

	text-decoration: none;
	background-color:#;
	color:#888; 
	letter-spacing: -0.03em;
	border-bottom: 1px dotted #888;
	vertical-align: -10px; /* IMPORTANT */
	-o-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 999;
	
	}

#tab-wrapper a:hover {
	border-bottom: 1px dashed #888;
	-o-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	}

#tab-wrapper a.chosenlink {
	padding:0; 					
	margin:0;
	font-family: "Open Sans", sans-serif; 
	font-style: normal;
	font-size:1em; 
	line-height:1.2em;
	font-weight:600;

	text-decoration: none;
	color:#222; 
	letter-spacing: -0.03em;
	border: none;
	vertical-align: -10px; /* IMPORTANT */
	-o-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	-webkit-transition: 0.3s all cubic-bezier(0.215, 0.61, 0.355, 1);
	z-index: 999;
}

#slash {padding:0;}
#slash img {padding-top:0.25em;width:25px;height:58px;}
#intro
	{
	display:block;
	margin:12px 0px 5px 0px;  /* une autre endroit pour changer l'espace */
	padding:0px 0px 0px 0px;
	
  	font-family: "Open Sans", sans-serif;
	font-size:1.6em;
	line-height:1.4em;
	font-weight:400;
	color:#333;
	letter-spacing:0em;
	word-wrap: break-word;
	
	background-color:#;
	}


/*-------------  EVERYTHING ELSE ---------------*/
#panel-wrapper
	{	
	position:relative;			
	clear:left;	
	width:100%;	
	margin:0px;
	}				

.panel {
	position:absolute;
	top:0px;
	left:0px;

	width:100%;	     /* don't state height, it sizes automatically */
	background-color: #;
	border: 0px solid #;	
	padding:0px;
	margin:0px;

	}

/*--------------------------------------------------------------
--------------------------- -        - -------------------------
-----------------------      Projects     ----------------------
--------------------------- -        - -------------------------
--------------------------------------------------------------*/
/* GALLERY	*/
#work {
	position:relative; width:100%; padding:70px 10px 0 30px; /* v1 78% width	90paddingtop*/
	display:-webkit-box;
	display:-ms-flexbox;
	display:flex;
	margin: 0;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;

	-ms-flex-wrap: wrap;

	    flex-wrap: wrap;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	    -ms-flex-direction: row;
	        flex-direction: row;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	z-index:60; 
	-webkit-transition: height 0.4s ease; 
	-o-transition: height 0.4s ease; 
	transition: height 0.4s ease;
	

}


	
/* HOVER OVER YELLOWS */
.workbox, .workbox-empty-child {
	position:relative;
	width:250px;
	margin: 0 20px 20px 0;
	-webkit-transition: all 1s ease;
	-o-transition: all 1s ease;
	transition: all 1s ease;
	}

.workbox {
	height:190px;
	z-index:10;
	box-sizing: border-box;
	background-color: #ff3;	
	}

.workbox-empty-child {
	width:250px; /* must be same as width for workbox */
	height:0px; /* for the divs to collapse should they fall in a new row */
	}

/* END HOVER OVER YELLOWS */

.workboxpic {
	position:absolute;top:0px;left:0px;
	cursor: pointer;
	z-index:10;

	opacity: 1; filter:alpha(opacity=100);
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}

/* WHITE BACKGROUND FIX FOR WORKBOX */
/*.whitebkgd {border: 1px solid #ddd;}
.workboxpic img.whitebkgd {width: 248px;height:188px;}*/

.workboxpic:hover {

	opacity: 0.17;filter:alpha(opacity=17);
	}


.zoomglass {height:100%;}
.zoomglass:after {
	position:absolute; display:inline-block; font-family: 'FontAwesome';
	top:25%; left:36%;content:"\f00e"; 
	margin:0; padding:0;
	font-size:82px;z-index:5;
	color:#FFF;cursor:pointer;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
	}

#stayfooter { position:relative; width:100%; height:0px; clear:both;}
	
/* - - -  
PROJECTS	
- - - */

.panel-level1 {
	position:relative;
	width: 100%;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
	}

.panel-level3 {
	position:relative;
	left:0px;
	}
.close-project {position:absolute; top:24px; right:24px; width:18px; height:18px; background:url(../img/close@2x.png);cursor:pointer; z-index:85;background-size: 18px 18px;}
.project {
	position:relative;
	z-index:80;

	-webkit-box-sizing: border-box;

	        box-sizing: border-box; 
	width: 750px;
	margin: 20px auto 40px auto; /* topnbottom is 0 normally */
	padding:15px 40px 80px 40px;
	border: 1px solid #000; 
	border-radius: 17px;

	-webkit-transition: 0.2s all ease;

	-o-transition: 0.2s all ease;

	transition: 0.2s all ease;
	}
.p-name {
	font-family: "Source Code Pro", Serif;
	padding: 1.25em; /* cushion v1 63*/
	margin:0 auto;

	font-size:2.6em;
	font-weight: 400;
	line-height:50px;
	color:#333;
	text-align:center;

	width:80%;
	letter-spacing:4px;
	text-transform: uppercase;
	}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
     All things necessary for grid (Col2 photos)
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.col1 {position:relative; float:left; width:325px;-webkit-transition: 0.2s all ease;-o-transition: 0.2s all ease;transition: 0.2s all ease;} /* colx is inside 1, for indefinite no. */
.colx {position:relative; float:left; width:100%;padding-right:23px;-webkit-box-sizing: border-box;box-sizing: border-box;}

.col2 {position:relative; float:right; width:318px;-webkit-transition: 0.2s all ease;-o-transition: 0.2s all ease;transition: 0.2s all ease;} 

.p-object-container {width:70%;padding-top: 20px; }
.p-object-e, .p-object-f {position:relative; top:3px;  /* drops it down a bit */
	display:inline;
	font-family: "Open Sans", Serif;
	font-style:normal;
	line-height:1.7em;
	font-size:1.6em;
	font-weight: 600;

	margin:0;
	padding:0 0 2px 0;
	border-bottom: 1px dashed #666;
	color:#222;
}
.p-description-e, .p-description-f
{	position:relative;
	top:0px;
	left:0px;
	font-family: "Open Sans", "Times New Roman";
	line-height:1.5em;
	margin-bottom:10px;
	}
.p-description-e {
	font-size:1.41em;
	font-weight: 400;
	color:#545454;
	}
.p-description-f {
	font-size:1.4em;
	font-weight: 400;
	color:#000;
	}
.movieContainer {
	width:340px;
	margin-bottom:16px;
	background:url(../img/diagonal-1-00-30@2x.png);
	background-size:  5px 5px;
	}
#movie8 {height:242px;width:100%;}
#movie8 img {width:310px;padding: 7px;margin: 0 auto;}


/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
     All things necessary for grid (Col2 photos)
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */


.grid, .grid2
	{
	position:relative; 
	-webkit-box-sizing: border-box; 
	        box-sizing: border-box; 
	background-image:url("../img/diagonal-1-00-30@2x.png"); background-size: 5px 5px;
	
	width:100%; /*temp*/

	padding:4px;
	margin: 0 auto 16px auto;

	background-position: 4px 0px;

	box-sizing: border-box;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}

.grid:hover, .grid2:hover, .click-web:hover {background-color: #555; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; transition: all 0.2s ease;color:#fff;}

.zoomglass-mini {position:absolute;bottom:0;right:0;width:30px;height:30px;background-color: #eee;z-index: 99999;}
.zoomglass-mini:after {
	position:absolute; display:inline-block; font-family: 'FontAwesome';
	top:3px; left:5px;content:"\f00e"; 
	margin:0; padding:0;
	font-size:22px;z-index:5;

	color:#454545;opacity:1;cursor:pointer;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
	}

/* horizontal image (smaller) */
.grid2 img { 
	position:relative;
	margin: 0 auto;
	padding:0;
	width:310px; background-color:#333;
	}

/* vertical image */
.grid img {margin: 0 auto;}
/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
                      click-web boxes 
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

.click-web, .col1-top {
	position:relative; 
	width:100%; padding: 18px 18px 18px 15px; 
	-webkit-box-sizing: border-box; 
	        box-sizing: border-box; 
	border-radius: 3px;

	margin-bottom:8px;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}

.click-web {
	font-family: "Open Sans", Arial;
	font-size: 1.4em;
	
	background:url("../img/diagonal-1-00-30@2x.png"); background-size: 5px 5px; padding: 10px 12px 11px 15px; 
	}
.click-web, .click-web:active, .click-web:visited {color:#333;}

/*.col2 .click-web.collab {background-image: url('../img/diagonal-1-00-30@2x.png');background-size: 5px 5px;color:#222;background-color:#ff6;}
.col2 .click-web.collab:hover {background-color:#222;}*/

.panel-level3 .col2 a {text-decoration: none;}

/* FONTAWESOME ICON */
.panel-level3 .col2 .click-web:before {font-family: 'FontAwesome'; content: "\f08e";font-size: 1.1em;text-decoration: none;color:#999;padding: 4px 9px 0 0;}

/* = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = 
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
                      Tools used 
 -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  -  
 = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = */

/* MORE SPEC FOR .COL1-TOP UP TOP */
.col1-top {
	display:block;
	background-color: #fbfbfb; 
	padding: 7px 10px 7px 5px; 
	}

.tags-tools
	{
	position:relative;
	display:inline-block;
	padding:4px 8px 4px 4px; margin: 0px;  /* spacing*/
	font-family:  "Source Code Pro", Serif;
	font-style: normal;
	font-weight: 400;
	font-size:1.3em;
	color:#555;
	background-color:#;
	border-bottom: 0px solid currentcolor;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}

/* different colors for different skills - programming skills has p- to avoid naming confusion or problems with [dot]html [dot]css - */

.p-htm {color: #f63;} /* html */ 
.p-css {color: #3cf;} /* css */
.p-jav {color: #fc6;} /* css */

.illus {color: #f90;}
.pshop {color: #36c;} /* Photoshop exception in naming structure to differentiate from photography */
.indes {color: #f9f;}
.dream {color: #3c3;}

.wordp {color: #3cc;}

.tradi {color: #333;} /* traditional mediums */

#skills {
	position:relative;	
	width:90%;
	padding:70px 0 50px 10px;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	z-index:60; -webkit-transition: height 0.4s ease; -o-transition: height 0.4s ease; transition: height 0.4s ease;
	display:flex;
	justify-content: center;
	}
.clearfix {position:relative;width:100%;height:1px;flex: 9 9 auto;}
.skill-float, .contact-float, .skills-contact-empty-child {
	position:relative;
	margin: 0 10px 10px 0; 
	-webkit-transition: all 0.8s ease; 
	-o-transition: all 0.8s ease; 
	transition: all 0.8s ease;
	height:178px; 
	border-color: #eee;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}
					/* grow shrink basis */
			.skill-float {		flex: 1 1 380px;}
			.contact-float {	flex: 1 2 200px;}
.skills-contact-empty-child {	flex: 1 2 200px;height: 0px; /* for the divs to collapse should they fall in a new row */
	}

.skill-float-inside {	
	box-sizing: border-box;
	background-color: #ccc;
	padding: 14px 12px 24px 15px; /* padding-right is 5px to allow .stars to be flush */
	height:134px; 
	border-radius: 3px;
	}


.contact-float {
	padding: 22px 14px 24px 15px; /* padding-right is 14px - regular */
	
  	background-image: url(../img/circle120-op50.png), url(../img/diagonal-1-00-30@2x.png);  /* image */
    background-position: 50% 18%, left top; /* IMPORTANT */
    background-size: 120px 120px, 5px 5px;
    background-repeat:  no-repeat, repeat; 

    border-radius: 3px;             
	}

.contact-float:hover {
	height:;
	background-position: 50% 5%, left top; /* IMPORTANT */
	background-size: 140px 140px, 5px 5px; -webkit-transition: all 0.8 ease; -o-transition: all 0.8 ease; transition: all 0.8 ease;
	}


/* ------------- SKILLS HEAD: WEB / LANGUES / ADOBE CS6/CC; ----------- */
.skill-h1 {
	position:relative; font-family: "Source Code Pro";
	font-weight: 400;
	font-size:1.7em;color:#111; text-transform:uppercase; text-decoration:none;letter-spacing:0.1em;
	margin:10px 0 8px 4px; 
	width:97%;
	padding: 0px 0 4px 0;
	}	
/* ------------- divider ----------- */
/*.skill-h0 {
	position:relative; font-family: "Source Code Pro";
	font-weight: 400;
	font-size:1.2em;height:0.8em;color:#111; text-transform:uppercase; text-decoration:none;letter-spacing:0.1em;
	margin:0; 
	width:100%; 
	padding: 0;
	top:0.4em;
	border-top:1px dashed #525252;
	}	*/
/* ------------- SKILLS LIST ITEMS: InDesign Illustrator... ----------- */
.skill-list {
	width:100%;
	font-family: "Source Code Pro", "Open Sans", sans-serif; font-weight: 400;
	font-size:1.3em;line-height:1.65em;letter-spacing:0.5pt; color:#111;
	padding:0px; margin:0px;
	text-decoration:none;list-style:none;text-indent:0px;indent:0px;
	} 

/* ------------- TEXT FOR CONTACT ICONS ----------- */
.skill-h2 {
	position:relative; font-family: "Source Code Pro","Open Sans";
	font-size:1.4em;color:#444; text-transform:uppercase; text-decoration:none;letter-spacing:0.2em;
	margin:26px 0 8px 0px; 
	padding: 0; 
	background-color:#;
	text-decoration:none;
	text-align:center; 
	}
.stars { position:relative;float:right;font-size: 8px;letter-spacing:6px;color:#000;}
.xs {font-size: 0.96em;letter-spacing: 0;}
.niveau {font-family: "Source Code Pro", sans-serif; font-style:normal;font-weight: 300;color:#111;position:absolute;left:39%;}

/* ------------- CONTACT SECTION ----------- */
	
.contact-float a {text-decoration:none;cursor: pointer;}
		
.contact-icon {
	position:relative; 
	display:block; 
	background-repeat:no-repeat;
	top:4px;
	margin: 0 auto;
	padding:0; 
				-webkit-transition: all 0.4s ease;
				-o-transition: all 0.4s ease;
				transition: all 0.4s ease;}
.contact-icon:hover {	
				-webkit-transition: all 0.7s ease;
				-o-transition: all 0.7s ease;
				transition: all 0.7s ease;
			}

.skill-h2#sf-email {top:-0.9em;}

/*-------------------------------------------------------------- 
--------------------- -                   - --------------------
-----------------------    Accessories    ----------------------
--------------------- -                   - --------------------
--------------------------------------------------------------*/


#back-to-top {
	position:fixed;
	bottom:6%;
	right:10%;
	text-align: center;
	color:#222;
	background: #CCC;
    	width: 56px;
    	height: 56px;
    	border-radius: 50%;
	cursor:pointer;
	z-index:8000;

	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	opacity:0;
	padding:0;
	display:none;
	}
#back-to-top p{
	font-size: 30px;
	margin:7px 0 0 0;
	padding:0;
	}
/*#back-to-top:after {
	position:relative; display:inline-block; font-family: 'FontAwesome';
	font-style:normal;
	font-weight:normal;
	top:22%; content:"\f062"; 
	margin:0; padding:0;
	font-size:32px;
	color:#FFF;opacity:1;cursor:pointer;
	-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
	}*/

#back-to-top.visible {display: block;opacity:0.75;-webkit-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;
}
#back-to-top.visible:hover {
	width:54px;height:54px;
	opacity:0.9;
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	}

/* copyright text */
footer p {	
	margin-bottom:20px;
	font-family: "Source Code Pro", Serif;
	font-size:1.2em;
	line-height:1em;
	color:#333;
	text-align: center;
	}