@import url("fonts.css");
@import url("text.css");
@import url("fields.css");


/* ------- extra color hex codes : green lite #6cbeb4 || green dark #488b9b || yellow #fed39c || orange #f7a881 || white #dce0cf */


html, body {
	margin: 0 auto;
	height: 100%;
	font-family: 'canterlight', sans-serif;
	color: #dce1cd; 
	font-size: 35px; 
	background: #488b9b;
	letter-spacing: 0px;
	text-align: center;
}

div {
	overflow: hidden;
}

#containerFooter{
	background: #dc5c48 url('_imgs/_comp/logo_white@2x.png') center center no-repeat;
	background-size: 90px 90px;
	border-top: 2px solid #efefef;
	height: 120px;
}

.footerWrapepr {
	display: block;
	overflow: hidden;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

div.footerLinks {
	float: left;
	display: block;
	width: 20%;
	padding-top: 35px;
	text-align: center;
	vertical-align: middle;
	
	color: #efefef;
	font-size: 50px;
	cursor: pointer;
}

div.footerLinksOn {
	float: left;
	display: block;
	width: 20%;
	padding-top: 35px;
	text-align: center;
	vertical-align: middle;
	
	color: #efefef;
	font-size: 50px;
	
	cursor: pointer;
	border-bottom: 4px #efefef solid;
}


/*  -----------------------------------------------------------------------------------------------------------------  */
/*  -----------------------------------------------                   -----------------------------------------------  */
/*  -----------------------------------------------   NAVBAR SECTION  -----------------------------------------------  */
/*  -----------------------------------------------                   -----------------------------------------------  */
/*  -----------------------------------------------------------------------------------------------------------------  */

.navbarPlaceholder {
	display: block;
	min-height: 185px;
	background: #488b9b;
}

.containerNavbarCompTop {
	z-index: 1000;
	position: fixed;
	display: table-cell;
	width: 100%;
	height: 160px;
	padding-top: 25px;
	background: #efefef;
	color: #222222;	
	text-align: center;
	font-size: 50px;
	
	-webkit-box-shadow: 0px 0px 28px 0px rgba(50, 50, 50, 0.5);
	-moz-box-shadow:    0px 0px 28px 0px rgba(50, 50, 50, 0.5);
	box-shadow:         0px 0px 28px 0px rgba(50, 50, 50, 0.5);
}

.containerLogoNavTop {
	display: inline-block;
	min-height: 127px;
	min-width: 145px;
	background: url('_imgs/_comp/logo_orange@2x.png') center center no-repeat;
	vertical-align: middle;
	background-size: contain;
	cursor: pointer;
}

.containerNavRightTop, .containerNavLeftTop {
	display: inline-block;
}

.containerNavbarCompScroll {
	position: fixed;
	z-index: 1001;
	width: 100%;
	height: 90px;
	padding-top: 15px;
	background: rgba(239,239,239,0.90);
	color: #222222;	
	text-align: center;
	font-size: 50px
}

.containerLogoNavScroll {
	display: inline-block;
	min-height: 75px;
	min-width: 86px;
	background: url('_imgs/_comp/logo_orange@2x.png') center center no-repeat;
	background-size: contain;
}

.containerNavRightScroll, .containerNavLeftScroll {
	display: inline-block;
}

#containerMenuMob {
	display: none;
}

.navButton {	
	display: inline-block;
	padding: 12px 25px 8px 25px;
	cursor: pointer;
}

.navButtonOn {	
	display: inline-block;
	padding: 12px 25px 8px 25px;
	cursor: pointer;
	border-bottom: 4px #dc5c48 solid;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
	
}

/*  ------------------------------------------------------------------------------------------------------------------------  */
/*  -----------------------------------------------                          -----------------------------------------------  */
/*  -----------------------------------------------   CATCH PHRASES SECTION  -----------------------------------------------  */
/*  -----------------------------------------------                          -----------------------------------------------  */
/*  ------------------------------------------------------------------------------------------------------------------------  */

#catchPhrasesM { display: none; }

#containerCatchPhrase {
	display: block;
	background: #488b9b;
	width: 100%;
	height: 500px;
	vertical-align: middle;
	text-align: center;
	
	font-family: 'canterlight';
	text-transform: lowercase;
	letter-spacing: 4px;
	font-size: 2em;
	color: #efefef;
}

#catchPhrases {
    width: 100%;
    animation:load_up 3s forwards;
    -webkit-animation:load_up 3s forwards;
}

@keyframes         load_up{ from{ opacity: 0; top: 100% } to{ opacity: 1; top: 0%; } }
@-webkit-keyframes load_up{ from{ opacity: 0; top: 100% } to{ opacity: 1; top: 0%; } }

div.catchPhrases {
	display: block;
	padding-top: 70px;
}

span.containerCatchPhrase {
	background: #efefef;
	color: #488b9b;
}

.heroImage {
	overflow: hidden;
	height: 700px;
	width: 100%;
	-webkit-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.45);
	-moz-box-shadow:    0px 0px 48px 0px rgba(0,0,0,0.45);
	box-shadow:         0px 0px 48px 0px rgba(0,0,0,0.45);	
}

.heroImageTitle {
	margin: 40px;
	display: inline-block;
	padding: 5px 10px;
	text-align: left;
	vertical-align: bottom;
	background: rgba(72,139,155,0.55);;
	font-family: 'canterlight';
	font-size: 60px;
	color: #efefef;
	letter-spacing: 4px;
}

.heroImageTitleCredit {
	vertical-align: bottom;
	font-family: 'canterlight';
	font-size: 35px;
	color: #efefef;
}

#heroImage1 {
	background: url('../_imgs/_comp/home_page_1.jpg') center center no-repeat;
	background-size: 100% auto;
}

#heroImage2 {
	background: url('../_imgs/_comp/home_page_2.jpg') center center no-repeat;
	background-size: 100% auto;
}

#heroImage3 {
	background: url('../_imgs/_comp/home_page_3.jpg') center center no-repeat;
	background-size: 100% auto;
}

#heroImage4 {
	background: url('../_imgs/_comp/home_page_4.jpg') center center no-repeat;
	background-size: 100% auto;
}

#heroImage5 {
	background: url('../_imgs/_comp/home_page_5.jpg') center center no-repeat;
	background-size: 100% auto;
}

#heroImage6 {
	background: url('../_imgs/_comp/home_page_6.jpg') center bottom no-repeat;
	background-size: 100% auto;
}

/*  ------------------------------------------------------------------------------------------------------------------  */
/*  -----------------------------------------------                    -----------------------------------------------  */
/*  -----------------------------------------------    ABOUT SECTION   -----------------------------------------------  */
/*  -----------------------------------------------                    -----------------------------------------------  */
/*  ------------------------------------------------------------------------------------------------------------------  */

.h1 { font-size: 24px; }
.h2 { font-size: 34px; }
.h3 { font-size: 34px; }
.h4 { font-size: 24px; }

ul.t1 { 
	font-size: 42px; 
	text-transform: lowercase; 
	margin-top: -30px;
}

.aboutPhoto {
	display: block;
	width: 100%;
	height: 500px;
	background: url('_imgs/_comp/about_photo.jpg') center top no-repeat;
	background-size: cover;
	
	border-bottom: 5px solid #69beb4;
	-webkit-box-shadow: 0px 0px 48px 0px rgba(0,0,0,0.45);
	-moz-box-shadow:    0px 0px 48px 0px rgba(0,0,0,0.45);
	box-shadow:         0px 0px 48px 0px rgba(0,0,0,0.45);	
}

.aboutText {
	display: inline-block;
	width: 60%;
	margin: 50px 0;
	margin-left: auto;
	margin-right: auto;
	vertical-align: top;
	padding-left: 2%;
	background: #fefefe;
	
	color: #488b9b;
	font-family: 'district_prothin';
	text-align: left;
	
	border: 0px solid #ff0000;
}

/*  -------------------------------------------------------------------------------------------------------------------  */
/*  -----------------------------------------------                     -----------------------------------------------  */
/*  -----------------------------------------------    RESUME SECTION   -----------------------------------------------  */
/*  -----------------------------------------------                     -----------------------------------------------  */
/*  -------------------------------------------------------------------------------------------------------------------  */


.hidden{
	opacity: 0;
}

.visible{
	opacity: 1;
}

.resumeShortMobile { display: none; height: 0; }

.resumeWrapper {
	z-index: 999;
	display: block;
	overflow: hidden;
	width: 100%;
}

.resumeShort {
	float: left;
	height: 60px;
	width: 20%;
	font-size: 40px;
	color: #fefefe;
	padding-top: 20px;
	text-transform: uppercase;
	cursor: pointer;
}

.resumeShortSkills {
	background: #333333;
}

.resumeShortFnac {	
	background: #e8af2d; /* Old browsers */
}

.resumeShortApple {
	color: #333333;

	background: #efefef; /* Old browsers */
}

.resumeShortFreelance {
	background: #69beb4;
}

.resumeShortHobbies {
	background: #488b9b;
}

.resumeBlock {
	padding-bottom: 50px;
	padding-top: 30px;
	margin-left: 480px;
	padding-right: 50px;
	text-align: left;
	font-family: 'district_prothin';
	font-size: 24px;
}

.resumeLine {
	margin-top: 20px;
	display: block;
	overflow: hidden;
	vertical-align: middle;
}

	.lineSub {
		margin-top: 20px;
		margin-left: 50px;
	}

	.lineSubSub {
		margin-top: 20px;
		margin-left: 100px;
	}

	.lineSubSubSub {
		margin-top: 20px;
		margin-left: 150px;
		font-size : 18px;
	}

.containerSkills {	
	background: #333333 url('_imgs/_comp/_logos/diploma.png') 50px center no-repeat;
	
	display: block;
	width: 100%;
	min-height: 450px;
}
	.skills {
		display: inline-block;
		vertical-align: middle;
		height: 100px;
		width: 100px;		
	}
	
	.skillsTitle {
		display: inline-block; 
		vertical-align: middle;
		width: inherit;
	}
	
	.skillHTML5 {
		background: url('_imgs/_comp/_logos/html5.png') no-repeat;
		background-size: contain;
	}

	.skillJS {
		background: url('_imgs/_comp/_logos/js.png') no-repeat;
		background-size: contain;
	}

	.skillCSS3 {
		background: url('_imgs/_comp/_logos/CSS3.png') no-repeat;
		background-size: contain;
	}

	.skillMySQL {
		background: url('_imgs/_comp/_logos/mysql.png') no-repeat;
		background-size: contain;
	}

	.skillPHP {
		background: url('_imgs/_comp/_logos/php.png') no-repeat;
		background-size: contain;
	}

	.skillPSD {
		background: url('_imgs/_comp/_logos/psd.png') no-repeat;
		background-size: contain;
	}

	.skillJquery {
		margin-left: 10px;
		background: url('_imgs/_comp/_logos/jquery.png') no-repeat;
		background-size: contain;
	}

	.skillJqueryMobile {
		margin-left: 10px;
		background: url('_imgs/_comp/_logos/jquery_mobile.png') no-repeat;
		background-size: contain;
	}

	.skillAjax {
		margin-left: 10px;
		background: url('_imgs/_comp/_logos/ajax.png') no-repeat;
		background-size: contain;
	}

	.skillAi {
		background: url('_imgs/_comp/_logos/ai.png') no-repeat;
		background-size: contain;
	}

	.skillUML {
		background: url('_imgs/_comp/_logos/uml.png') no-repeat;
		background-size: contain;
	}
	
	.certLeft {
		width: 220px; 
		vertical-align:top;
	}
	
	.certRight {
		width: inherit; 
		height: inherit; 
		vertical-align:top;
	}
	
	.skillsCerts {
		margin-bottom: 12px;
	}

.containerFreelance {
	background: #69beb4 url('_imgs/_comp/_logos/freelance.png') 50px center no-repeat;	
	display: block;
	width: 100%;
	min-height: 450px;
	
	color: #fefefe;
}

.containerFnac {
	background: #e9b010 url('_imgs/_comp/_logos/fnac.png') 50px center no-repeat;
	
	display: block;
	width: 100%;
	min-height: 450px;
	
	color: #fefefe;
}

	.fnacSub {
		margin-left: 50px;
	}

.containerApple {
	background: #efefef url('_imgs/_comp/_logos/apple.png') 50px center no-repeat;
	
	display: block;
	width: 100%;
	min-height: 450px;
	
	color: #333333;
}

	.appleSub {
		margin-top: 20px;
		margin-left: 50px;
	}

	.appleSubSub {
		margin-left: 100px;
	}

	.appleSubSubSub {
		margin-left: 150px;
		font-size : 18px;
	}

.containerHobbies {
	background: #488b9b url('_imgs/_comp/_logos/hobbies.png') 50px center no-repeat;
	
	display: block;
	width: 100%;
	min-height: 450px;
}

	.vidLink {
		color: #f7a881;
		font-size: 20px;
		text-decoration: none;
		font-weight: bolder;
	}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 

	.containerSkills {
		background: #333333 url('_imgs/_comp/_logos/diploma@2x.png') 50px center no-repeat;
		background-size: 350px 200px;
	}
		
		.skillsHTML {
			background: url('_imgs/_comp/_logos/html5@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsJS {
			background: url('_imgs/_comp/_logos/js@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsCSS3 {
			background: url('_imgs/_comp/_logos/CSS3@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsMySQL {
			background: url('_imgs/_comp/_logos/mysql@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsPHP {
			background: url('_imgs/_comp/_logos/php@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsPSD {
			background: url('_imgs/_comp/_logos/psd2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsJquery {
			background: url('_imgs/_comp/_logos/jquery2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsJqueryMobile {
			background: url('_imgs/_comp/_logos/jquery_mobile2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsAjax {
			background: url('_imgs/_comp/_logos/ajax2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsAi {
			background: url('_imgs/_comp/_logos/ai@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
		
		.skillsUML {
			background: url('_imgs/_comp/_logos/uml@2x.png') no-repeat;
			background-size: 100px 100px;	
		}
	
	.containerFreelance {
		background: #69beb4 url('_imgs/_comp/_logos/freelance@2x.png') 50px center no-repeat;
		background-size: 350px 200px;
	}
	
	.containerFnac {
		background: #e9b010 url('_imgs/_comp/_logos/fnac@2x.png') 50px center no-repeat;
		background-size: 350px 350px;
	}
	
	.containerApple {
		background: #efefef url('_imgs/_comp/_logos/apple@2x.png') 50px center no-repeat;
		background-size: 325px 368px;
	}

	.containerHobbies {
		background: #488b9b url('_imgs/_comp/_logos/hobbies@2x.png') 50px center no-repeat;
		background-size: 350px 300px;
	}
	
}

/*  -----------------------------------------------------------------------------------------------------------------------  */
/*  -----------------------------------------------                         -----------------------------------------------  */
/*  -----------------------------------------------    ScreenShot SECTION   -----------------------------------------------  */
/*  -----------------------------------------------                         -----------------------------------------------  */
/*  -----------------------------------------------------------------------------------------------------------------------  */


.ss_container {
	z-index: 760;
	position: relative;
	display: block;
	width: 100%;
	height: 1200px;
	text-align: center;	
	border-bottom: 1px solid #f7a881;
}

	/*  sub container for FR Dashboard */
	.ss_FrD_c {
		background: #a6d789 url('_imgs/_comp/ss_fr_dashboard@2x.png') center 350px no-repeat;
		background-size: cover;
	}

	/*  sub container for FR Cleaning */
	.ss_FrC_c {
		background: #f5f2ed url('_imgs/_comp/ss_fr_cleaning@2x.jpg') center 350px no-repeat;
		background-size: cover;
	}

	/*  sub container for God Save the Kitsch */
	.ss_GSTK_c {
		background: #c23857 url('_imgs/_comp/ss_GSTK@2x.jpg') center 350px no-repeat;
		background-size: cover;
	}

	/*  sub container for Mont Chevre QR */
	.ss_MC_c {
		height: 800px;
		background: #fefefe url('_imgs/_comp/ss_QrMC@2x.jpg') center bottom no-repeat;
		background-position-y: 250px;
		background-size: 750px 750px;
	}

	/*  sub container for Annie Wishingrad */
	.ss_WL_c {
		background: #ebe5b0 url('_imgs/_comp/ss_wishLaw@2x.jpg') center 350px no-repeat;
		background-size: cover;
	}

.ss_container_text {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	padding: 40px 0 20px;
	width: 100%;
	
	vertical-align: middle;
	text-transform: lowercase;
	text-align: center;
	font-family: 'canterlight';
	font-size: 75px;
	color: #efefef;
}

.ss_text_s {
	margin-top: 15px;
	font-size: 55px;
}

.ss_asterix {
	margin-top: 5px;
	font-size: 30px;
}

	/* sub text config for FR Dashboard */
	.ss_FrD_t {
		z-index: 771;
		background: rgba(166,215,137,0.9);	
	}

	/* sub text config for FR Cleaning */
	.ss_FrC_t {
		z-index: 772;
		background: rgba(245,242,237,0.9);
		color: #333;	
	}

	/* sub text config for God Save the Kitsch */
	.ss_GSTK_t {
		z-index: 773;
		background: rgba(194,56,87,0.9);
	}

	/* sub text config for God Save the Kitsch */
	.ss_MC_t {
		z-index: 774;
		background: rgba(254,254,254,0.9);
		color: #333;	
	}

	/* sub text config for God Save the Kitsch */
	.ss_WL_t {
		z-index: 775;
		background: rgba(235,229,176,0.9);
		color: #333;	
	}