/**
Author: Joelle Fleurantin
**/

/* GLOBAL RESET */
* { margin: 0; box-sizing: border-box; }
*::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
article, aside, figure, footer, header, hgroup, nav, section {
	display:block; }
body { margin-top: 10px; }
.container::before, .container::after, .row::before, .row::after { content: " "; display: table; }
.container::after, .row::after { clear: both; }

/* COLORS */
body{ background-color: rgba(117,96, 145, 0.0) }
body { color: #222; }
em, strong, span, p.date, div#project-navigation p { color: #5C5F8A; }
a { border-bottom: none; color: #3C1952; }
h1, h2 { color: #3C1952; }

/* TYPOGRAPHY */`
@font-face {
    font-family: 'Liberation';
    src: url('fonts/liberationsans-regular-webfont.ttf') format('truetype');
    src: url('fonts/liberationsans-regular-webfont.eot');
    src: url('fonts/liberationsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/liberationsans-regular-webfont.woff') format('woff'),
         url('fonts/liberationsans-regular-webfont.svg#liberation_sansregular') format('svg');
    src: local('Liberation'), url('fonts/liberationsans-regular-webfont.ttf');
    font-weight: normal;
    font-style: normal;
}

@font-face {
	font-family: 'LiberationBold';
	src: url('fonts/liberationsans-bold-webfont.ttf') format('truetype');
    src: url('fonts/liberationsans-bold-webfont.eot');
    src: url('fonts/liberationsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/liberationsans-bold-webfont.woff') format('woff'),
         url('fonts/liberationsans-bold-webfont.svg#liberation_sansregular') format('svg');
    src: local('Liberation'), url('fonts/liberationsans-bold-webfont.ttf');
    font-weight: normal;
    font-style: normal;	
}

body { font-family: 'Liberation', sans-serif; }
p { font-family: 'Liberation', sans-serif; font-size: 1em; line-height:1.5em; }
nav { font-family: 'Oswald'; font-weight:400; }
footer { font-family: 'Oswald'; font-weight:300; }
h1, h2, h3 { font-family: 'Oswald'; font-weight: 700; }
h1 { letter-spacing: 2px; }

/* LAYOUT */
body { padding-top: 20px; padding-bottom: 20px; text-align:left;
vertical-align: baseline; }

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 2100px;
}
.row { margin-left: -15px; margin-right: -15px; }
.portfolio-item { margin-bottom: 20px; }
.video-margin-bottom { margin-bottom:14px; }


.nav-header {     
	border: 1px solid transparent;
    margin-bottom: 20px;
    min-height: 50px;
    position: relative;  
}

.nav-header-top {
	top:0;
    left: 0;
    right: 0;

}

#about{ width:900px; margin: 0 auto; /* font-size: 1.2em; */ text-align:center; }
#about > p { font-size:1em; }

h2 { font-size: 1.65em; letter-spacing: 0.02em; }
p.date { margin-bottom:0; padding-top:.2em; font-size: 14px; letter-spacing: 0.03em; color: rgba(53, 35, 64, 0.8) }
a { text-decoration: none; }
a:hover { text-decoration: underline; }

.portfolio-item a { color:#3C1952; text-transform: uppercase; vertical-align: baseline; }

.portfolio-item:hover { 
	/*opacity:0.7; */
	/*color:#fff;*/
	/*-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	-ms-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;*/
}

.nav-item-info > h2 { 
	position:absolute;
	visibility: hidden;
	vertical-align: baseline;
	background-color: rgba(255, 255, 255, 0.7);
	padding-right:15px; 
	padding-left:15px; 
	top:0;
	left:0;

	width: 70%;

}

.nav-item-info:hover > h2 {
	
	visibility: visible;

	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	-ms-transition: all 300ms;
	-o-transition: all 300ms;
	transition: all 300ms;
}
div.nav_item_info h2 {

	/*opacity:0; 	*/
	/*visibility: hidden;*/
	padding: 2.1%;
	/*line-height: 100%; */
	text-transform: uppercase; 
	vertical-align: baseline;
}


p { padding-left: 1em; padding-right: 1em;  margin: .5em 1em .5em 1em; float:left;  }
hr { 
	display: block;
	clear: both; 
	margin-bottom: 2em; 
	height: 0px;
	overflow: hidden;
	visibility: hidden; 
}

/* NAVIGATION BAR */
nav { width:100%; min-height:1px; }
nav > ul { padding-left:0; }
ul li { 
	list-style-position: outside;
	display: inline-block;
	padding: 0.2em 0em 0.2em 0em; 
	margin: 0.1em 0.6em 0.1em 0.6em; 
}

.nav-scroll { position: fixed; top:0; left:0; right: 0; z-index: 1030; background-color: rgba(251, 243, 245, 0.7); margin:0;}

nav > a { margin: 0.5em; }
span.about { padding: 0em; margin: 0em; font-size: 1.03em; font-family: 'LiberationBold' }
/* IMAGES and VIDEO */
.image-wrapper, .project-image-wrapper, .video-wrapper, .video-space, .image-space, .text-space, .about-me-text, .project-text, .skills-wrapper { 
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	position: relative;
}

.project-text { }
.project-image-wrapper { }
img { border: 0 none; vertical-align: middle; }
.image { display: block; max-width: 100%; height: auto; }

.video {
    height: 0;
    position: relative;
	padding-top: 0;
	padding-bottom: 56%;
    margin-bottom: 16px;
    overflow: hidden;
	margin: 0 auto;
	text-align:center;
/* 
    padding-top: 25px;
	padding-bottom: 57.25%;
    padding-bottom: 67.5%; 
	padding-bottom: 60%;
    padding-bottom: 33%;
    padding-bottom: 75%;
 */ 
}

.outline { border: 1px solid #3C1952; }

.video iframe, .video object, .video embed {
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
}


#AboutImage { padding-right: 1em; padding-bottom:.8em; }

.project_image {

	display: block;
	margin: 0 auto; 
	width: 45%; 
	max-width:100%;
	max-height: 100%;

}

/*PROJECT TITLE PAGE HEADING */
.project-underline { border-bottom-color: #3C1952; border-bottom: solid;}
em { display: block; clear:both; font-size: .9em; padding: 0.9em 0em 0.9em 0em;}

/* COPYRIGHT */
footer { padding: 15px; clear:both; width:100%; right: 0px; bottom: 0px; line-height: 1.4; }
a.atom-rss { margin: 0px 0px 0px 6px; padding: 1px 2px 0px; font-size: 0.93em; letter-spacing: 0.08em; background: #ddd; }

/* RESPONSIVE */
@media (max-width: 320px){ 
	.nav-item-info > h2 { font-size:.7em; }
	p { font-size: 12px; margin: .2em .4em .2em .4em; }
}
@media (min-width: 320px){ .nav-item-info > h2 { font-size:1em; }
		footer { font-size:.7em; } 
		p.date, h2.text-space { font-size:1em; }
}

@media (min-width: 470px){ 
	.nav-item-info > h2, h2.text-space { font-size:1.5em; }
	p.date {margin:0;}
	footer { font-size:.8em; }}

@media (min-width: 690px){ .nav-item-info > h2, h2.text-space, p.date { font-size:.8em; } 
}
/* 
@media (max-width: 767px){
	.project-text-mobile { float:left; width: 88.88888889%; }
	.skills-wrapper-mobile { float:left; width: 44.44444444%; }
}
 */
@media (max-width: 768px){ .nav-item-info > h2 { font-size:1.4em; } h2.text-space {font-size:1em;} 
	.project-text-mobile { float:left; width: 88.88888889%; }
	.skills-wrapper-mobile { float:left; width: 44.44444444%; }
}
@media (min-width: 992px){ 
	.nav-item-info > h2, p.date, h2.text-space, footer { font-size:1.0em; }
	.image-wrapper, .skills-wrapper { float:left; width:25%; }
	.video-wrapper, .project-image-wrapper { float:left; width:66.6667%;} 
	.video-space { float:left; width: 16.6667%; }
	.image-space { float:left; width: 14.2%; }
	.text-space { float:left; width: 16.6667%; }
	.about-me-text, .project-text { float:left; width: 41.6667%; }

}
@media (min-width: 1200px){ .nav-item-info > h2 { font-size:1.6em; } }
@media (min-width: 1920px){ .nav-item-info > h2 { font-size:1.8em; } }

@media (max-width: 319px){  /* #about > p { font-size: .8em; }  */ /* #about { width:100%; } */}
@media (max-width: 469px) { 
/* 
	header { font-size: .8em; } 
	#about { width:100%; }
 */
	.text-space h2 { font-size:1.25em; }
	p.date {font-size:1em; margin:0;}
}

@media (max-width: 767px) {
	header .container { padding:0; }
	header, #about { width: 100%; margin-left: auto; margin-right: auto; }
	#about > p { font-size: 12px; }
	.nav-item-info > h2 { visibility: visible;}

	.AboutMe { font-size: .6em; }
	#AboutImage { padding-right: 0; }
}

@media (max-width: 991px){
	header .container { padding:0; }
	#about { width:100%; }
	.AboutMe { font-size: .6em;}
}

@media (max-width:1199px){ .container { margin: auto 0; } }
@media (max-width:1919px){
	.container { margin: auto 0; } }

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2){
		.nav-item-info > h2 { visibility:visible; } }

@media screen and (device-height: 768px) and (device-width: 1024px) and (-webkit-device-pixel-ratio: 2){
		.nav-item-info > h2 { visibility:visible; } }

@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1){
		.nav-item-info > h2 { visibility:visible; } }

@media screen and (device-height: 768px) and (device-width: 1024px) and (-webkit-device-pixel-ratio: 1){
		.nav-item-info > h2 { 	visibility:visible; } }

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
.video { padding-top: 0; } }