@charset "UTF-8";
/*=========================================================================

CSS document:
michelleclaessens.com
Site design & development by Michelle Claessens

===========================================================================*/

/* COLOURS
 *
 * Blue:     #2027b2
 * Teal:     #17e9e0
 * Yellow:   #fccd04
 * Offwhite: #f5e6cc
 * Peach:    #ffb48f
 * Purple:   #a64ac9
 * Gray:     #53545d 
 *
 * font-family: 'Raleway', sans-serif;
 *
 */

/*===========================================================================================
	Global Styling
===========================================================================================*/

* { 
    margin: 0; 
    padding: 0; 
    border: 0; 
}

html {
	font-size: 100%;
}

body {
	background: #2027b2;
	color:#53545d;
	font-family: 'Raleway', sans-serif;
	font-weight:regular;
	margin:0;
	padding:0;
}

img { border:0; outline:none; }
a { outline:none; }

ul {
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ol {
	margin-left:20px;
}
li {
	background-repeat:no-repeat;
	background-position:0px 5px;
	margin-left:2px;
	padding-left:25px;
}
ol li {
	padding-left:10px;
}

a:link, a:visited { color:#2027b2; text-decoration:underline; }
a:hover, a:active { color:#2027b2; text-decoration:none; }

.clear { clear:both; }

::selection {
	background:#17e9e0;
}
::-moz-selection {
	background:#17e9e0;
} 

/*===========================================================================================
	Header
===========================================================================================*/

header {
	padding: 30px 0 160px 0;
	position: relative;
	top:0;
	width: 100%;
	z-index:999;
}
	header#vucavu { background:#a64ac9; }
	header#tmc { background:#fccd04; }
	header#influitive { background:#fccd04; }
	header#crc { background:#ffb48f; }
	header#arthritis { background:#f5e6cc; }
	header#shredit { background:#17e9e0; }
	header#siacloud { background:#17e9e0; }
	header#coursera { background:#f5e6cc; }

header h1 {
	float:left;
	color:#ffffff;
	font-family: 'Raleway', sans-serif;
	font-size:1.2rem;
	font-weight:300;
	line-height:180%;
	margin:3px 0 40px 0;
}

header h2 {
	color: #fff;
}
	.project header h2 { color:#2027b2; }
	.project header#vucavu h2 { color:#fff; }

header a:link, header a:visited {
	color:#fff;
	text-decoration:none;
}
	header a:hover, header a:active { text-decoration:underline; }
	.project header a:link, .project header a:visited { color:#2027b2; }
	.project header#vucavu a:link, .project header#vucavu a:visited { color:#fff; }

header img { top:-5px; margin-right:20px; }

header a.button:link, header a.button:visited {
	background: none;
	border: 2px solid #17e9e0;
	color: #17e9e0;
	float:right;
	font-size:1.2rem;
	font-weight:300;
	line-height:180%;
	margin:0;
	padding:2px 12px;
	text-decoration:none;
	text-transform: uppercase;
}
	header a.button:hover, header a.button:active {
		background: #17e9e0;
		border: 2px solid #17e9e0;
		color: #ffffff;
	}
	.project header a.button:link, .project header a.button:visited { color:#2027b2; border:2px solid #2027b2; }
	.project header a.button:hover, .project header a.button:active { background:#2027b2; color:#ffffff; border:2px solid #2027b2; }
	header#vucavu a.button:link, header#vucavu a.button:visited { color:#fff; border:2px solid #fff; }
	header#vucavu a.button:hover, header#vucavu a.button:active { background:#fff; color:#a64ac9; border:2px solid #fff; }
	
	
/*===========================================================================================
	Typography
===========================================================================================*/

h1 {
	color:#ffffff;
	font-family: 'Raleway', sans-serif;
	font-size:1.2rem;
	font-weight:300;
	line-height:180%;
	margin:3px 0 40px 0;
}

h2 {
	color:#2027b2;
	font-family: 'Raleway', sans-serif;
	font-size:4.5rem;
    font-weight: 300;
	line-height:120%;
    margin: 0 0 5px 0;
}

h3 {
	color:#2027b2;
	font-family: 'Raleway', sans-serif;
	font-size:2.4rem;
	font-weight: 300;
	line-height:120%;
	margin:0 0 30px 0;
}

h4 {
	color:#2027b2;
	font-family: 'Raleway', sans-serif;
	font-size:1.2rem;
	font-weight: 800;
	line-height:130%;
	margin-bottom:20px;
}

p {
	font-family: 'Raleway', sans-serif;
	font-size:1rem;
	font-weight:300;
	line-height:180%;
	margin-bottom:20px;
}

p.caption {
	font-size:0.9rem;
	font-style:italic;
}

hr {
	background:#ccc;
	height:1px;
	margin:20px 0 40px 0;
	width:100%;
}

strong {
	font-weight:600;
}

table {
	border:none;
}

table tr td {
	vertical-align:top;
	background:#EFEFEF;
}

table tr th {
	color:#2027b2;	
	background:#ffffff;
	border:1px solid #DFDFDF;
	vertical-align:top;
}

table tr.even, table tr.alt, table tr:nth-of-type(even) {
	background:none;
}


/*===========================================================================================
	Portfolio
===========================================================================================*/

#portfolio { transition: all 0.1s ease-in-out 0s; }
#portfolio.sticky { margin-top:65px; }

#portfolio ul li { 
	display:inline-block;
	float:left;
	margin:0 0 45px 0;
	padding:0;
	height:400px;
	position:relative;
	width:100%;
	overflow:hidden;
}

#portfolio ul li > div {
    position: absolute;
    height: 100%;
    width: 100%;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -moz-transform: scale(1,1);
    -webkit-transform: scale(1,1);
    transform: scale(1,1);
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
}
	#portfolio ul li#arthritis > div {
		background:#f5e6cc url('../img/portfolio/thumbs/arthritis-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#coursera > div {
		background:#f5e6cc url('../img/portfolio/thumbs/coursera-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#crc-givewhatmatters > div {
		background:#ffb48f url('../img/portfolio/thumbs/crc-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#tmc > div {
		background:#fccd04 url('../img/portfolio/thumbs/tmc-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#influitive > div {
		background:#fccd04 url('../img/portfolio/thumbs/influitive-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#vucavu > div {
		background:#a64ac9 url('../img/portfolio/thumbs/vucavu-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#shredit > div {
		background:#17e9e0 url('../img/portfolio/thumbs/shredit-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}
	#portfolio ul li#siacloud > div {
		background:#17e9e0 url('../img/portfolio/thumbs/medx-banner.jpg');
		background-size:cover;
		background-repeat:no-repeat;
		background-position:center center;
	}

#portfolio ul li:hover > div {
    -moz-transform: scale(1.1,1.1);
    -webkit-transform: scale(1.1,1.1);
    transform: scale(1.1,1.1);    
}

#portfolio ul li a {
	display:block;
	height:100%;
	padding:60px 480px 60px 60px;
	text-decoration:none;
	width:100%;
}
	#portfolio ul li#tmc a,
   #portfolio ul li#crc-givewhatmatters a,
   #portfolio ul li#vucavu a
   { padding:60px 60px 60px 510px; }
	
   #portfolio ul li#vucavu a h4,
   #portfolio ul li#vucavu a h3
   { color:#fff; }

#workDetails {
	background:#fff;
	clear:both;
	padding:60px 0;
}

#workDetails .row {
	padding:30px 0;
}

#workDetails .row.header-image {
	margin-top:-130px;
	position:relative;
	z-index:999;
}

#workDetails div.project {
	display:none;
	padding:80px 0;
}

#workDetails h2 {
	color:#2027b2;
	margin-bottom:50px;
	padding-right:150px;
	position:relative;
}

#workDetails h3 {
	color:#2027b2;
	font-size:1.2rem;
	font-weight:800;
	position:relative;
}

#workDetails a.button {
	background:#fff;
	border:2px solid #2027b2;
	color:#2027b2;
	padding:0.8rem 1.5rem 0.9rem;
	margin-bottom:40px;
	text-decoration:none;
}
	#workDetails a.button:hover {
		background:#2027b2;
		color:#ffffff;
		text-decoration:none;
	}
	
#workDetails h3.next {
	float:right;
}
	#workDetails h3.next a:link, #workDetails h3.next a:visited { text-decoration:none; }
	#workDetails h3.next img { margin-left:20px; }

.projectNav {
	height:31px;
	position: absolute;
	right: 16px;
    top: 15px;
	z-index: 100;
}
	.projectNav.twoItems { width:82px; }

.projectNav a, .projectNavBottom a {
	display: block;
    float:left;
    height: 31px;
	margin-left:10px;
    padding: 0;
    width: 31px;
}

.projectNavBottom {
	height:31px;
	position: relative;
	float: right;
    top: 0;
	width:123px;
	z-index: 100;
}
	.projectNavBottom.twoItems { width:82px; }

.prevProject, .nextProject {
    background: #2027b2;
	
}
	.prevProject img, .nextProject img { transition: all 0.1s ease-in-out 0s; }
	.prevProject:hover, .nextProject:hover { background:#2027b2; }
	.prevProject:hover img { 
		-ms-transform: translate(-2px,0);
		-webkit-transform: translate(-2px,0);
		transform: translate(-2px,0);
	}
	.nextProject:hover img { 
		-ms-transform: translate(2px,0);
		-webkit-transform: translate(2px,0);
		transform: translate(2px,0);
	}

.close { background: #ffb48f; }
	.close img { transition: all 0.1s ease-in-out 0s; }
	.close:hover { background:#ffb48f; }
	.close:hover img { 
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);
		transform: rotate(90deg);
	}

.fake-browser-ui {
    padding: 20px 0 0;
    border-radius: 3px;
    border-bottom: 2px solid #53545d;
    background: #53545d;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
	margin:10px 0 40px 0;
    position: relative;
    line-height: 0;
	width:100%;
}
.fake-browser-ui img { width:100%; }
.fake-browser-ui .frame {
    display: block;
    height: 15px;
    left: 3px;
    position: absolute;
    top: 7px;
}
.fake-browser-ui span {
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    float: left;
    height: 7px;
    margin: 0 0 0 4px;
    width: 7px;
}

.fake-mobile-ui {
    background: none repeat scroll 0 0 #53545d;
    border-bottom: 2px solid #53545d;
    border-radius: 10px;
	border-left:5px solid #53545d;
	border-right:5px solid #53545d;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    display: inline-block;
    line-height: 0;
    margin: 10px 0;
    padding: 20px 0 41px;
    position: relative;
    width: 100%;
}
	.fake-mobile-ui.last { margin-right:0; }
.fake-mobile-ui img { width:100%; }
.fake-mobile-ui .mobileframe {
    bottom: 10px;
    display: block;
    height: 20px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.fake-mobile-ui span {
    background-color: #f0f0f0;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    display: block;
    height: 20px;
    margin: 0 auto;
    width: 20px;
}

/*===========================================================================================
	Contact
===========================================================================================*/

#contact {
	background:#ffffff;
	color:#2027B2;
	padding:160px 0;
}
	.project #contact { background:#2027b2; color:#fff; }
	.project #contact h2, .project #contact a:link, .project #contact a:visited { color:#fff; }

#contact h2 { margin-bottom:20px; }

#contact ul li { 
	display:inline-block;
	margin:0 20px 0 0;
	padding:0;
}

#contact a:link, #contact a:visited { text-decoration:none; }
#contact a:hover, #contact a:active { text-decoration:underline; }
	
/*===========================================================================================
	Footer
===========================================================================================*/

#footer {
	background:#ffffff;
	color:#2027b2;
	padding:0 0 15px 0;
}
	.project #footer { background:#2027b2; color:#fff; }

#footer p { font-size:0.8rem; }
	
/*===========================================================================================
	Media Queries
===========================================================================================*/

/*.columns { border:1px solid red; }*/

/* Small screens (max-width 640px) */
@media only screen {
	
	header { padding-bottom:80px }
	header h1 { font-size:1rem; }
	header a.button { display:none; }
	
	#portfolio { transition: all 0.1s ease-in-out 0s; }
	#portfolio.sticky { margin-top:0px; }
	#portfolio ul li a { padding:40px; }
	#portfolio ul li#crc-givewhatmatters a, #portfolio ul li#tmc a { padding-left:40px; }
	
	#workDetails { padding-bottom:0; }
	#workDetails h3 { padding-right:0px; }
	#workDetails span { white-space:normal; }
	
	.projectNav { position: relative; margin-bottom:50px; }
	
	#contact { padding:80px 0; }
	#contact ul li { display:block; margin:10px 20px 0 0; padding:0; }
	
	h2 { font-size:2.5rem; }
	h3 { font-size:1.8rem; }
	h4 { font-size:1rem; }
	
}

/* Medium screens (min-width 641px) */
@media only screen and (min-width: 40.063em) {
	
	header { padding-bottom:100px; }
	header h1 { font-size:1.2rem; }
	header a.button { display:block; }
	
	h1 { margin:33px 0; text-align:left; }
	
	#portfolio { transition: all 0.1s ease-in-out 0s; }
	#portfolio.sticky { margin-top:65px; }
	#portfolio ul li a { padding:40px 300px 40px 40px; }
	#portfolio ul li#crc-givewhatmatters a, #portfolio ul li#tmc a { padding-left:300px; }
	
	#workDetails { padding-bottom:60px; }
	#workDetails span { white-space:nowrap; }
	
	.projectNav { position: absolute; margin-bottom:0; }
	
	#contact { padding:100px 0; }
	#contact ul li { display:inline-block; margin:0 20px 0 0; padding:0; }
	
	h2 { font-size:3.6rem; }
	h3 { font-size:2rem; }
	h4 { font-size:1rem; }
	
} 

/* Large screens (min-width 1025px) */
@media only screen and (min-width: 64.063em) {
	
	header { padding-bottom:160px; }
		
	#portfolio ul li a { padding:60px 480px 60px 60px; }
	#portfolio ul li#crc-givewhatmatters a, #portfolio ul li#tmc a { padding-left:480px; }
	
	#contact { padding:160px 0; }
	
	h2 { font-size:4.5rem; }
	h3 { font-size:2.4rem; }
	h4 { font-size:1rem; }
	
}