/* 
D. Christine Design - Stylesheet
-
© 2017 D. Christine, dchristinedesign.com - all rights reserved
-
Palette: 

Light Gray - #EAEAEA
Dark Gray - #666666
-
Hot Pink - #CF2A90
Mauve - #781060
-
Bright Purple - #793A93 
Deep Purple - #421452
-
Midnight Blue - #0B1335
-
Turquoise - #66D8CA
Dk. Turquoise - #43ADAA
*/



/* GLOBAL & TYPE */


body {
	font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
	font-size: 18px;
	color: #311C54;
	line-height: 36px;
	margin: 0;
	padding: 0;
	background-color: #FFF;
}

h1 {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	color: #66D8CA;
	font-size: 46px;

}


h2 {
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	color: #421452;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 26px;
}

h3 {
	font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
	color: #793A93;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 18px;
}


p {
	font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
	color: #0B1335;
	font-size: 18px;
	line-height: 36px;
	font-weight: 400;
	text-align: left;
}

strong {
	color: #793A93;
}


blockquote {
	font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
	color: #CF2A90;
	padding: 5% 1% 0%;
	margin: 0% auto;
	font-size: 20px;
	line-height: 36px;
	letter-spacing: 1px;

}

ul {
	list-style-type: none;
}


/* Links */

a {
	
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	color: #CF2A90;
	text-decoration: none;
	font-weight: 500;
}

a:hover {
	color: #781060;
}

a:visited {
	color: #793A93;
}


/* Buttons */

.blue-cta-btn {	
	background-color: #43ADAA;
	padding: 5px 50px;
	display: inline-block;
}

.blue-cta-btn a {
	color: #793A93 ;
}
 

.pink-cta-btn {
	background-color: #CF2A90;
	padding: 5px 50px;
	/*margin-top: 20px;*/
	display: inline-block;
	/*border-radius: 8px;*/
}

.pink-cta-btn:hover {
	background-color: #66D8CA;
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;

}

.blue-cta-btn:hover {
	background-color: #421452;
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
}

.clear {
	clear: both;
}

.purple-cta-btn {
	background-color: #793A93;
	padding: 1% 6%;
	/*margin-top: 20px;*/
	display: inline-block;
	/*border-radius: 8px;*/
}

.purple-cta-btn:hover {
	background-color: #CF2A90;
	color: #793A93;
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
}

.purple-cta-btn a:visited {
	color: #ffffff !important;
}


/* Wrapper Backgrounds*/


.marble-wrapper {
	clear:both;
	background: url('../images/bg-marble.jpg') no-repeat;
	background-size: cover;
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 20px 0px;
}

.gray-wrapper {
	clear:both;
	background: #EFEFEF;
	background-size: cover;
	width: 100%;
	height: auto;
	margin: 0px auto;
	padding: 20px 0px;
}


/* Structure */

header {
	background-color: #fff;
	width: 100%;
	height: 160px;
}


#head-wrapper {
	width: 80%;
	height: auto;
	margin: 0px auto;
}
	
#head-wrapper .pink-cta-btn {
	margin-top: 20px;
}

#feat-img {
	display: block;
	 background: url('../images/header-pattern-strong.jpg') no-repeat;
	 background-size:cover;
	 height: 100%;
	width: 100%;
	overflow: auto;
	/*min-width: 380px;*/
	z-index: 1;
	position: relative;
}

#feat-img h1 {
	line-height: 60px;
	width: 80%;
	display: block;
	position: relative;
	text-align: center;
	margin: 5% auto;
}

#home #feat-img h1 {
	
   	padding: 5% 0%;
}

.logo {
	display: inline-block;
	float: left;
	margin-top: 20px;
}

	.logo a {
		color: #bae8ed;
	}

		.logo > a:hover {
			color: #d8f8fb;
		}
.logo img {
	width: auto;
	min-width: 140px;
}

.logo:hover {
cursor: pointer;
 animation: jiggle 1s infinite linear;
}

.toggle-nav {
    display:none;
}

#navigation, .pink-cta-btn {
	display: inline-block;
	clear: right;
	float: right;
}


	.pink-cta-btn a, .blue-cta-btn a, .purple-cta-btn a {
		font-family: 'Quicksand', Arial, sans-serif;
		font-size: 20px;
		font-weight: 400;
		color: #fff;
	}

#navigation {
	margin-top: 15px;
}
	
	#navigation li {
		/*float: left;*/
		width: 100px;
		display: inline-block;
		text-transform: uppercase;
		font-size: 18px;
		text-align: center;
	}

	#navigation li a {
		font-family: 'Quicksand', Arial, sans-serif;
		font-weight: 400;
		color: #0B1335;
		display: inline-block;
	}

	#navigation li a:hover {
		color: #CF2A90;
	}


li.current a {
	color: #CF2A90 !important;
}


.subtitle {
    display: block;
    background: url('images/bg_subtitle.png') no-repeat;
    background-size: cover;
    position: relative;
    margin: 0px auto;
    width: 80%;
    border-radius: 70px;
    text-align: center;
    z-index: 2;
}
	.subtitle h1 {
		  color: #fff;
	}

#content-wrapper {
	width: 100%;
	height: auto;
	overflow-y: auto;
	margin: 0px auto 0px;

}

#main-content {
	display: inline-block;
	/*min-width:480px;*/
	width: 60%;
	float: right;
}


#aside {
	float: left;
	/*margin-top: 60px;*/
	display: inline-block;
	width: 40%;
	min-width: 212px;
	/*text-align: center;  to center pink-cta-btn */
}
.section {
	clear:both;
	width: 80%;
	height: auto;
	overflow-y: auto;
	margin: 0px auto;
	padding: 0% 5% 10%;
}

	.section h2 {
		text-align: center;
		margin: 60px 10px 30px;
	}

#home .section h2 {
	text-align: center;
	margin: 60px auto 30px;
}

/* SERVICES */

.service-type {
	display: inline-block;
	float: left;
	width: 33%;
	/*margin: 0% 5%;*/
	text-align: center;
}

	.service-type img {
		width: 186px;
		height: auto;
	}

	.service-type p {
    width: 80%;
    margin: 0px auto;
    height: 200px;
}

	.service-type h2 {
		margin-top: 20px;
		height: 70px;
	}

.service-type .purple-cta-btn {
    padding: 5%;
    width: 90%;
    margin: 18% 0% 1%;
   }



/** CREDITS **/

.column {
	display: inline-block;
	float: left;
}

/** SUB PAGES **/


#subpage #feat-img {
   background: url('../images/header-pattern-subpage.jpg') no-repeat;
   background-size: cover;
   min-height: 170px;
}

#subpage .subtitle {
	top: 30%;
}

 #subpage  .subtitle h1 {
    color: #FFF;
    position: relative;
    font-size: 46px;
    text-transform: uppercase;
    margin-bottom: 18px;
    margin: 5% auto;

}

.subtitle .pink-cta-btn {
	float: none;
	margin-top: 0px;
} 

#subpage .section h2 {
	color: #43ADAA;
	    margin: 60px 10px 20px;
}

#aside .pink-cta-btn {
float: none;
/*margin-left: 5%;*/
/*width: 50%;*/
min-width: 80px;
/*text-align: center;*/
}


.white {
	color: #FFF !important;
}

.me {
	width: 80%;
	margin-top: 60px;
	height: auto;
	min-width: 200px;
	text-align:center;
}

.me img {
	width: 85%;
	min-width: 240px;
}


.full-pink, .full-blue, .full-purple {
	width: 100%;
	display: block;
	clear: both;
	overflow-y: auto;
	margin-top: 40px;
}

.full-pink h2 {
	color: #CF2A90 !important ;
	text-align: left;
	width: 50%;
	}


.full-pink li {
	color: #CF2A90 !important ;
	font-weight: bold;
	}

.full-pink li.special {
    display:inline-block;
    background-color: #CF2A90;
    color: #FFFFFF !important;
    padding: 5%;
}




.full-blue h2 {
	color: #66D8CA !important ;
	text-align: left;
	width: 50%; /* Must match left-col % */
	} 

.full-blue li {
	color: #66D8CA !important ;
	font-weight: bold;
	} 

.full-blue li.special {
    display:inline-block;
    background-color: #66D8CA;
    color: #FFFFFF !important;
    padding: 5%;
}


.full-purple h2 {
	color: #793A93  !important ;
	text-align: left;
	width: 50%;
}

.full-purple li {
	color: #793A93  !important ;
	font-weight: bold;
}

.left-col {
	display: inline-block;
	float: left;
	width: 20%;
}

.left-col .pink-cta-btn {
	float: none;
	margin: 0px auto 3%;
}


.left-col .purple-cta-btn {
	    padding: 5px 50px;
}

.right-col {
    display: inline-block;
    float: right;
    width: 60%;
    padding: 0% 5%;
}

.right-col img {
	align: center;
}

.right-col li {
    margin: 3% 0%;
}

/** RESUME **/



#resume-aside {
float: left;
margin-top: 60px;
display: inline-block;
width: 32%;
padding: 15px 15px;
background: #43ADAA;

}

#resume-aside h2, #resume-aside p {
	font-weight: 400;
	text-align: left;
	    margin-top: 30px !important;
	color: #FFFFFF !important;
}

#resume-aside strong {
	color: #FFF;
}

#resume-aside p {
	margin-left: 15px;
}

.skills {
	display: inline-block;
	float: left;
	width: 50%;
	color: #FFF;
}

.worked-at {
	display: inline-block;
	float: left;
	width: 70%;
	margin-top: 20px;
}

.work-dates {
	display: inline-block;
	float: right;
	width: 30%;
	text-align: right;
	margin-top: 20px;
}

.work-dates strong {
	color:#66D8CA;
}


/** CONTACT FORM **/

*:focus {outline: none;}
.form_hint, .required_notification {font-size: 14px;}

/*.contact_form li:first-child, .contact_form li:last-child {
    border-bottom:1px solid #777;
}*/

.contact_form ul {
    width: 100%;
    list-style-type:none;
    list-style-position:outside;
    margin:0px;
    padding:0px;
}
.contact_form li{
    padding:12px; 
   /* border-bottom:1px solid #eee;*/
    position:relative;
}

.contact_form h2 {
    margin:0;
    display: inline;
}
.req-notification {
    color: #CF2A90; 
    margin:5px 0 0 0; 
    display: block;
    text-transform: uppercase;
    /*float:right;*/
}

.contact_form label {
    width: 100px;
    margin-top: 3px;
    display:inline-block;
    float:left;
    padding:3px;
}
.contact_form input, .contact_form select {
    font-family: 'Quicksand', Verdana, sans-serif;
    font-size: 15px;
    height: 30px; 
    width: 240px; 
    padding:5px 8px;
}
.contact_form textarea {
	font-family: 'Quicksand', Verdana, sans-serif;
	font-size: 16px;
	padding:8px; width:300px;
}

.contact_form select {
	width: 280px;
	height: 40px;
}

.contact_form button {margin-left:156px;}

.contact_form input:focus, .contact_form textarea:focus { /* add this to the already existing style */
    padding-right: 60px;
}

/* Validation */

input:required, textarea:required {
    background: #fff url('../images/pink-asterisk.png') no-repeat 98% center;
}

.contact_form input:focus:invalid, .contact_form textarea:focus:invalid { /* when a field is considered invalid by the browser */
    background: #fff url(../images/invalid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #CF2A90;
    border-color: #781060;
}

::-webkit-validation-bubble-message {
    padding: 1em;
    background-color: #CF2A90;
}

.contact_form input:required:valid, .contact_form textarea:required:valid { /* when a field is considered valid by the browser */
    background: #fff url(../images/valid.png) no-repeat 98% center;
    box-shadow: 0 0 5px #66D8CA;
    border-color: #43ADAA;
}

.contact_form input, .contact_form textarea, .contact_form select { 
    border:1px solid #aaa;
    box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset;
    border-radius:2px;
    padding-right: 30px;
    -moz-transition: padding .25s; 
    -webkit-transition: padding .25s; 
    -o-transition: padding .25s;
    transition: padding .25s;
}
.contact_form input:focus, .contact_form textarea:focus {
    background: #fff; 
    border:1px solid #555; 
    box-shadow: 0 0 3px #aaa; 
}

.form_hint {
    background: #CF2A90;
    border-radius: 3px 3px 3px 3px;
    font-size: 18px;
    color: white;
    margin-left:8px;
    padding: 2px 10px;
    z-index: 999; /* hints stay above all other elements */
    position: absolute; /* allows proper formatting if hint is two lines */
    display: none;
}

.form_hint::before {
    content: "\25C0"; /* left point triangle in escaped unicode */
    color: #CF2A90;
    position: absolute;
    top:1px;
    left:-6px;
}

/**/

.contact_form input:focus + .form_hint {display: inline;}
.contact_form input:required:valid + .form_hint {background: #66D8CA; font-weight: 500;} /* change form hint color when valid */
.contact_form input:required:valid + .form_hint::before {color: #66D8CA;} /* change form hint arrow color when valid */


/* Button Style */
button.submit {
    background-color: #68b12f;
    background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#793A93));
    background: -webkit-linear-gradient(top, #421452, #793A93);
    background: -moz-linear-gradient(top, #421452, #793A93);
    background: -ms-linear-gradient(top, #421452, #793A93);
    background: -o-linear-gradient(top, #421452, #793A93);
    background: linear-gradient(top, #421452, #793A93);
    border: 1px solid #793A93;
    border-bottom: 1px solid #793A93;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    box-shadow: inset 0 1px 0 0 #793A93;
    -webkit-box-shadow: 0 1px 0 0 #793A93 inset ;
    -moz-box-shadow: 0 1px 0 0 #793A93 inset;
    -ms-box-shadow: 0 1px 0 0 #793A93 inset;
    -o-box-shadow: 0 1px 0 0 #793A93 inset;
    font-family: 'Quicksand', Verdana, sans-serif;
    font-size: 15px;
   color: white;
    font-weight: 500;
    text-transform: uppercase;
    padding: 20px 40px;
    text-align: center;
    text-shadow: 0 -1px 0 #793A93;
}
button.submit:hover {
    opacity:.85;
    cursor: pointer; 
}
button.submit:active {
    border: 1px solid #20911e;
    box-shadow: 0 0 10px 5px #356b0b inset; 
    -webkit-box-shadow:0 0 10px 5px #356b0b inset ;
    -moz-box-shadow: 0 0 10px 5px #356b0b inset;
    -ms-box-shadow: 0 0 10px 5px #356b0b inset;
    -o-box-shadow: 0 0 10px 5px #356b0b inset;
     
}



/** PORTFOLIO  **/

.portfolio-intro {
	width: 80%;
	margin: 0px auto;
	text-align: center;
}

.portfolio-intro h2{
	display: block;
	font-family: 'Quicksand', Arial, sans-serif;
	font-weight: 400;
	width: 100%;
	font-size: 22px;
	color: #0B1335 !important;
	text-transform: none;
}

#filters {
	margin: 5% 1% 10%;
	padding:0;
	list-style:none;
}

	#filters li {
		float:left;
		display: inline-block;
	    	margin: 0px 10px;
	}
	
	#filters li span {
		padding: 5px 18px;		
		text-decoration:none;
		font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
		font-weight: 500;
		font-size: 20px;
		color: #793A93 ;
		cursor: pointer;
	}
	
	#filters li span.active {
		/*background: #CF2A90;*/
		color: #CF2A90;
		font-weight: 700;
	}
 	
 	
  	#filters li span:hover {
  		background: #CF2A90;
  		color: #FFF;
  		transition: color .3s ease-in-out;
  		transition: background-color .3s ease-in-out;
  	}
 	
 	#filters li:first-child span {
 		color: #43ADAA;
 	}

 	#filters li:first-child span:hover { /* Reverses the hover effect for the first child */
 		background-color: #fff;
 		color: #43ADAA;
 		cursor: text;
 	}


#portfoliolist {
    display: block;
    clear: both;
    width: 100%;
    margin-top: 100px;
    position: relative;
}
 
#portfoliolist .portfolio {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	width:23%;
	margin:1%;
	display:none;
	float:left;
	overflow:hidden;
}

	.portfolio-wrapper {
		overflow:hidden;
		position: relative !important;
		background: #421452;
		cursor:pointer;
	}

	.portfolio img {
		max-width:100%;
		position: relative;
		top:0;
   		 -webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
   		transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);		
	}
	
	.portfolio .label {
		position: absolute;
		width: 100%;
		height: 100px;
    		bottom: -120px;
   		-webkit-transition: all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
   		 transition:         all 600ms cubic-bezier(0.645, 0.045, 0.355, 1);
	}

		.portfolio .label-bg {
			background: #421452;
			width: 100%;
			height:100%;
			position: absolute;
			top:0;
			left:0;
			opacity: .8;
		}
	
		.portfolio .label-text {
			color: #72e4eb;
			font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
			position: relative;
			z-index:500;
			padding:5px 8px;
			font-size: 18px;
			margin: 10% auto; /* positions the title on portfolio thumbs with width */
   			width: 80%;
   			text-align: center;
		}

		.portfolio .label-text a {
			font-family: 'Encode Sans Semi Condensed', Arial, sans-serif;
			font-size: 22px;
			color: #FFF;
			position: relative;
			z-index:500;
			}

		.label-text a:hover {
			color: #FFF;
		}
			.portfolio .text-category {
				display:block;
				font-family: 'Quicksand', Arial, sans-serif;
				font-size: 14px;
				font-weight: 400;
				padding: 0px 8px;
				color: #FFFFFF;
			}
			
		.portfolio:hover .label {
		    bottom: 0;
		    height: 100%; /* controls the height of the purple background for portfolio thumbs */
		}

/*.portfolio:hover img {
    top:-30px;
  } Controls the movement of the portfolio thumbnails */   


/*** PORTFOLIO INDV PAGE ***/

#portfolio-item #feat-img {
	min-height: 170px;
	height: 100%;
}
#portfolio-item .subtitle {
	padding: 20px 40px;
	top: 20%;
   	text-transform: uppercase;
}

	#portfolio-item .subtitle a {
		color: #66D8CA;
	}

#portfolio-item #main-content {
	width: 65%;
}

#portfolio-item #aside {
	width: 30%;
}


.portfolio-thumbs {
    margin-top: 60px;
    margin-left: 30px;
}

.portfolio-thumbs img {
    width: 100%;
}






/** PORTFOLIO ON HOME PAGE **/

.recent-item {
    display: inline-block;
    float: left;
    width: 48%;
    height: auto;
    margin: 0px 5px 0px;
}

.recent-item img {
    width: 100%;
}


#recent-works .purple-cta-btn {
    float: right;
    padding: 2% 5%;
    margin: 8% 2% 1%;
    width: 20%;
    text-align: center;
}
/** FOOTER */


#footer-cta {
	display: block;
	background: url('../images/bg-pink.jpg') no-repeat;
	background-size: cover;
	width: 100%;
	height: auto;
	padding-top: 45px;
	padding-bottom: 45px;
}
	#footer-cta h2 {
		float: left;
		font-size: 24px;
		color: #fff;
		letter-spacing: 1px;
		display: inline-block;
		width: 50%;
		margin: 0px auto;
	}

	#footer-cta .blue-cta-btn {
		float: right;
	}


footer {
	display: block;
	width: 100%;
	background-color: #311C54;
	height: auto;
}

/* All footer containers have height: auto; for responsive */

.footwrap {
	width: 80%;
	height: auto;
	margin: 0px auto;
	overflow-y: auto;
}

	.footwrap p {
		float: left;
		/*width: 385px;*/
		display: inline-block;
		color: #EFEFEF;
		margin-top: 35px;
		text-shadow: 1px 1px #000;
		letter-spacing: 1px;
	}

	.footwrap ul {
		display: inline-block;
		float: right;
		margin-top: 30px;
	}
	
	.footwrap li {
		float: left;
		margin-left: 20px;
		display: inline-block;
		width: 44px;
		height: 44px;
	}

	li.facebook {
		background: url('../images/fb.png') 0 0px no-repeat;
	}

	li.twitter {
		background: url('../images/tw.png') 0 0px no-repeat;
	}

	li.pinterest {
		background: url('../images/pinterest.png') 0 0px no-repeat;
	}

	li.ig {
		background: url('../images/ig.png') 0 0px no-repeat;
	}

	li.facebook:hover, li.twitter:hover, li.pinterest:hover, li.ig:hover {
		border-bottom: 2px solid #CF2A90;
		padding-bottom: 4px;
	}
	
	.footwrap a {
		color: #fff;
	}

	.footwrap a:hover {
		color: #bae8ed;
	}


/**/