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


/* LARGE DEVICES (DESKTOP+) */

@media screen and (min-width: 1550px) {
	#container {width:96%;border-left: 2px dotted #fff;border-right: 2px dotted #fff;}
	.workbox, .workbox-empty-child {margin: 0 30px 30px 0;}
	#work {padding:70px 10px 0 30px; }
	}

@media screen and (min-width: 1200px){
	.project {width:1072px;} /* three column size - MAX. THAT IT CAN GO*/
	.panel-level1 {padding:30px;-webkit-transition: 400ms all ease;-o-transition: 400ms all ease;transition: 400ms all ease;}
	.col1 {width:650px;}
	.colx {width:325px;}
	.p-name {font-size:2.8em;}
	.p-object-e, .p-object-f {font-size: 1.8em;}
}

@media screen and (min-width: 1090px){
	#skills {max-width: 1040px;}
}

@media screen and (min-width: 1050px){
	.skill-list {font-size: 1.4em;}
	.stars { position:relative;float:right;font-size: 9px;letter-spacing:9px;color:#000;}
}
/* MEDIUM DEVICES (TABLETS+) /// ANYTHING BELOW 900 WIDTH /// */

@media screen and (max-width: 900px) {

/*	html, body {width:100%;overflow-x:visible;} */
	/* make sure container sticks to periphery */

/*	#container {width:95%; margin:15px auto;}
*/
/*	#container {margin:0 auto;}*/
#section-header-1, #section-header-2, #section-header-3 {left:0;width:100%;text-align: center;margin: 0 0 20px 0;}  

#work {
		width:100%; 
		padding: 50px 0 10px 10px;
		z-index:60;
		}
#skills {
		/* was 100 */
		padding: 50px 0 0 12px;
		}
	#skills {width:100%;}
	.workbox, .workbox-empty-child {margin: 0 10px 10px 0;}
	.workboxpic img, .workboxpic img.whitebkgd {width:100%;height:100%;}
	.zoomglass:after {font-size:50px;top:30%; left:40%;}

	.col1-top, .p-object-container, .colx p {text-align: center;}
	.p-object-container {margin:0 auto;}

/*-------------------------------------------------------------- 
--------------------- -                   - --------------------
-----------------------      Clouds       ----------------------
--------------------- -                   - --------------------
--------------------------------------------------------------*/
	#cloud {
		top:110px;	
		left: 0; 
		right: 0; 

		max-width:300px;
		height:400px;

		width:87%;
		margin: 0 auto;
		padding-top: 50px;
		background-size: contain;
		background-repeat: no-repeat;
		}

	#cloud-textbox {
		width:90%; /* 360 */
		height:90%; /* 500 */
		}	

	/*------	CLOUD TYPOGRAPHY ------*/
	.slide {width:300px;}

	#fadebox {
	width:100%;
	height:400px;
	-webkit-mask-image: radial-gradient(ellipse 98% 76% at 50% 33%, black 39%, transparent 49%);
	}

	#cloud-textbox {
         
        /* Calculate the total width on the
      basis of number of slides */
        width: calc(300px * 8);
    }



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

	.small {
		font-size:29px;/*32*/
		line-height:30px;
		}

	.regular {
		font-size:34px;/*32*/
		line-height:35px;
		}

	.large {
		font-size:38px;/* 48 */
		line-height:0.9em;
		}
		
	.xlarge {
		font-size:42px; /* 50 */
		line-height:0.9em;
		}

	.move-down-xl {	padding: 56px 20px 0 20px;}
	.move-down-l, .move-down-l-tab {padding: 48px 20px 0 20px;}
	.move-down-ml-tab {	padding: 38px 20px 0 20px;}
	.move-down-m {	padding: 25px 20px 0 20px;}
	.move-down-s, .move-down-s-tab {padding: 15px 20px 0 20px;}
	.move-down-xs {	padding: 0px 20px 0 20px;}
	.move-down-xxs {	padding: 0px 20px 0 20px;}

	#slide-pigiste {padding: 31px 16px 0 20px;}
	#slide-equation {padding: 54px 16px 0 20px;}

	/* mandarin text settings */
	.man-xl {
		padding: 14px 0 0 0;
		font-size:93px;
		line-height:98px;
		text-align:center;
		letter-spacing: -2px;
		}
		
	.man-l {
		padding: 30px 0 0 0;
		font-size:70px;
		line-height:75px;
		text-align:center;
		}
		
	.man-s
		{
		padding: 30px 0 0 0;
		font-size:50px;
		line-height:55px;
		text-align:center;
		}

	/* english text settings */

	.english 
	{font-size:14px;line-height:15px;}

	.project {
		box-sizing: border-box;

		width:90%;
		margin: 5px auto 40px auto; 
		padding:18px 20px 30px 20px;
		}
	.col1 {padding:15px 0 0 0; margin:0; width: 100%;}
	.col2 {padding:15px 0 0 0; margin:0; width: 100%;}

	.p-name {
	padding: 0px;
	font-size: 2em;
	line-height:1.1em;
	}
	.clickImg, .clickImg2 {width:250px; }
	
	#skills {padding-top: 50px;}

	.p-name {margin: 35px auto 42px auto;}
	
	#hello-wrapper {width:80%;margin-left: 10%;margin-right:10%;}

	/* must be same as width for workbox */
	/*.skill-float, .contact-float, .skills-contact-empty-child {
		width:370px;  
		}
*/

	} /* END MEDIUM DEVICES (TABLET+) */


@media screen and (max-width: 530px) {
	#hello-wrapper {height:27.5em;left:auto;}
	#tabWrapper ul {font-size: 3em;}
	#divider {width: 0.7em; font-size: 2em;}
	p#intro {font-size: 1.4em;margin-top:18px;}
	}


/* SMALL DEVICES (CELLPHONES+) */

@media screen and (max-width: 510px) {
#work {padding-left:0;padding-right: 0;}

	.workbox {padding:0;margin:0;}
	.workbox-empty-child {padding:0;margin:0;}
	
	#stayfooter {width:300px;}

	.project {
		width:90%;
		padding:18px 20px 30px 20px;
		top:15px;}

	.col1, .colx, .col2 {padding:0; margin:0; width: 100%;}

	.clickImg2 {width:100%; }	

	
/*	.small, .regular {
		font-size:32px;
		line-height:35px;
		padding: 10px 8px 0 8px;
		}
	.large {
		font-size:48px;
		line-height:0.9em;
		padding: 32px 8px 0 8px;
		}
	.xlarge {
		font-size:50px;
		line-height:0.9em;
		padding: 40px 8px 0 8px;
		}*/
	/*
	.move-down-xl {	padding: 55px 20px 0 20px;}
	.move-down-l {	padding: 50px 20px 0 20px;}
	.move-down-m {	padding: 30px 20px 0 20px;}
	.move-down-s {	padding: 15px 20px 0 20px;}
	.move-down-xs {	padding: 0px 20px 0 20px;}
	.move-down-xxs {	padding: 0px 20px 0 20px;}
	.man-xl
		{
		padding: 12px 0 0 0;
		font-size:85px;
		line-height:90px;
		text-align:center;
		letter-spacing: -2px;
		}
		
	.man-l
		{
		padding: 30px 0 0 0;
		font-size:70px;
		line-height:75px;
		text-align:center;

		}
		
	.man-s
		{
		padding: 30px 0 0 0;
		font-size:50px;
		line-height:55px;
		text-align:center;
		}*/
	.english {font-size:14px;line-height:15px;}


	.p-tools {font-size:16px;letter-spacing:0;}

	.p-name {margin: 35px auto 42px auto;}
	.close-project {width:24px;height:24px;top: 10px; right: 10px;background-size: 24px 24px;background-repeat:no-repeat;opacity:0.7;}
} /* END SMALL DEVICES */

@media screen and (max-width: 860px){
	#skills {max-width:540px;}
}
/*  EXTRA SMALL DEVICES */

@media screen and (max-width: 420px) {
	#container {min-width: 360px;}
	.workbox {padding:0;margin:0;width:175px;height:133px;} /* width:175px;height:133px; */
	.workbox-empty-child {width:175px;}
	.skill-float, .contact-float {margin: 0 auto 12px auto; box-sizing: border-box; width:100%;}
	#skills {padding-right:12px;}
	.niveau {left:42%;}


	#section-header-1, #section-header-2, #section-header-3 {left:0;width:100%;text-align: center;margin: 0 0 20px 0;}  

	.header-e, .header-f {font-size: 1.6em;} 
}



@media screen and (max-width: 380px) {
	#tab-wrapper a.active {
	font-size:0.87em;}

	#row1b {padding-bottom: 30px;}
	#work {padding-top: 50px;}
	.workbox {padding:0;margin:0 0 24px 0;width:250px;height:190px;} /* width:175px;height:133px; */

	#skills {padding: 50px 3px 30px 3px;font-size: 0.9em;letter-spacing: -0.01em;}
	.skill-float, .contact-float {margin-left:0;margin-right:0;}
	.skill-float {flex-basis: 318px;}
	.skill-float-inside {padding:2px;}
	.skill-h1 {
	position:relative; font-family: "Source Code Pro";
	font-weight: 400;
	font-size:1.5em;}
	.niveau {left:46%;}
	.stars {letter-spacing: 2px;}

}