@charset "UTF-8";

/*****************************
1. General Styles
2. Header
3. Footer
4. Home Page
5. About Page 
6. Product Page
7. Websites / Services Page
8. Headshots Page
9. Contact Page
10. Pricing Page
11. Photography Styles
12. Small Desktop Styles
13. Tablet Styles
14. Mobile Styles
*****************************/
/*********************/
/* 1. General Styles */
/*********************/

* { margin:0; xpadding:0; }

body {
	width:100%;
	background-color:#FFFFFF;
	font-size:14px;
	font-family:'Raleway',sans-serif;
	font-weight:100;
}

header{
	position:fixed;
	height:40px;
	width:100%;
	z-index:5;
	background-color:#FFFFFF;
	margin-top:0px;
	padding-top:0px;
	box-shadow:0px 2px 2px #CCC;
	-moz-box-shadow:0px 2px 2px #CCC;
	-webkit-box-shadow:0px 2px 2px #CCC;
}

a {
	list-style-type:none;
	text-decoration:none;
}

h1{
	font-weight:700;
	font-size:6.2em;
	}
	
h2, h3, h4{
	font-weight:400;
	text-align:center;
}

h2{
	font-size:3.5em;
	}
	
h3{
	font-size: 2em;
	}
	
h4{
	font-size: 1em;
	}
	
section{
	position:relative;
	width:100%;
	height:auto;
	}
	
ul{
	list-style-type:none;
	}
	
/* FRAMEWORK */

.col-1{
	width:10%;
	height:auto;
}

.col-2{
	width:20%;
	margin:0 auto;
	height:auto;

}

.col-3{
	width:30%;
	height:auto;
	}

.col-4{
	width:40%;
	height:auto;
	margin:0 auto;
	}


.col-5{
	width:50%;
	height:auto;
	}



.col-6{
	width: 60%;
	height:auto;
	}
	
.col-7{
	width:70%;
	height:auto;
	}

.col-8{
	width:80%;
	height:auto;
	}
	
.col-9{
	width:90%;
	height:auto;
	}
	
.col-10{
	width:100%;
	height:auto;
	}

.fourth{
	width:24%;
	margin:0 .5%;
	}

/* Module System */
.module{
	left:0px;
	top:0px;
	text-align:left;
	box-sizing:border-box;
	height:800px;
	display:block;
	float:left;
	overflow:hidden;
	margin:0;
	padding:0;
	}
	
.module div.col-5{
	height:50%;
	width:50%;
	float:left;
	}
	
.module div.col-5 h3{
	font-weight:700;
	padding:30% 0;
	text-align:center;
	}
	
.module-half{
	height:300px;
	}

.module-quarter{
	height:200px;
	}
	
.module-half h2{
	padding-top:120px;
	}
	
.module-quarter h2{
	padding-top:60px;
	}
	
.module img{
	width:100%;
	height:100%;
	}
	
/* GRID BASE SYSTEM */
.grid {
	position: relative;
	margin: 0 auto;
	list-style: none;
	text-align: center;
}

.grid figure {
	position: relative;
	overflow: hidden;
	margin: 10px .5%;
	min-width: 320px;
	max-width: 480px;
	max-height: 360px;
	width: 24%;
	text-align: center;
	cursor: pointer;
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	opacity: 1;
}

.grid figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

.grid figure h3 {
	word-spacing: -0.15em;
	font-weight: 300;
	background-color:#666;
	font-family:Raleway;
	color:#FFF;
	padding:10px 0;
	font-size:1em;
}

.grid figure h3.background-white.gray{
	background-color:#FFFFFF;
	color:#333;
	}
	
.grid figure h3 span {
	font-weight: 800;
}

.grid figure h3,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}
	
/* FONT COLORS */
.white{
	color:#FFFFFF;
}

.gray{
	color:#666;
	}

.blue{
	color:#2196F3;
	}
	
/*Font Size and Styles*/
.small {
	font-size:1.3em;
	}

.medium {
	font-size:4em;
	}
	
.bold{
	font-weight:700;
	}

.italic{
	font-style:italic;
	}
	

/* BACKGROUND COLORS */
.background-white{
	background-color:#FFFFFF;
	}
	
.background-gray{
	background-color:#666;
	}
	
.background-blue{
	background-color:#2196F3;
	}
	
.background-light-blue{
	background-color:#E3F2FD;
	}
	
.opacity{
	background-color:rgba(0,0,0.2);
}

/* EFFECTS */
.grayscale{
	-webkit-filter:grayscale(100%);
	}
.sepia{
	-webkit-filter:sepia(100%);
}

	
/* POSITION RIGHT */
.right{
	text-align:right;
	padding-right:50px;
}

.position-right{
	float:right;
	}
	
/* POSITION LEFT STYLES */
.left{
	text-align:left;
	padding-left:50px;
}

.position-left{
	float:left;
	}

/* POSITION CENTER STYLES */
.text-center{
	text-align:center;
	margin:0 auto;
	}
	
.center{
	margin:0 auto;
}

.full{
	width:100%;
	}
	
.padding-top{
	padding-top:150px;
	}
	
.padding-bottom{
	padding-bottom:50px;
	}
	
.padding-top-25{
	padding-top:25px;
	}
	
.padding-50{
	padding:50px 0px;
	}
	
/* CIRCLES STYLES */
.circle_BIG{
	width:100px;
	height:100px;
	-moz-border-radius: 150px;
	-webkit-border-radius: 150px;
	border-radius: 150px;
	background:rgba(255,255,255,.5);
	}
	
/* Clear Mobile */	
#mobile_navigation, #mobile, #mobile-button, .thePhone, .indexPhone, .name-mobile, #phone-slider_vertical, #phoneSlider_landscape{
	display:none;
}

.thePhone, .indexPhone {
	width:100%;
	text-align:center;
}

#about_parallax{
	padding-top:120px;
	}

/*************/	
/* 2. HEADER */
/*************/
#mainpgheader{
	width:100%;
}


.name-main {
	font-size: 225%;
	color: #666;
	padding-left:5%;
	padding-right:20%;
	letter-spacing: 10px;
	margin-top:0px;
	z-index:20;
	width:100%;
	height:auto;
	background-color:#FFFFFF;
}
.name-main a{
	color: #666;
}

.name-main img{
	float:left;
	}
	
.name{
	padding-left:10px;
	float:left;
	}
	
#socialmedia_links{
	position: absolute;
	margin-top: 10px;
	top: 0px;
	right: 50px;
	padding-left: 10px;
	width: 35%;
	text-align: right;
	display: none;
}

#socialmedia_links li{
	float:none;
	position:relative;
	display:inline-block;
	margin-right:5px;
	padding-top:5px;
	z-index:10;
}

#socialmedia_links img{
	width:30px;
	height:30px;
}


#top_navigation{
	display:block;
	font-size: 16px;
	font-weight:400;
	color: #999;
	margin:0;
	padding-right:20px;
	height:auto;
	letter-spacing:.1em;
	float:right;
}

#top_navigation ul{
	padding:0;
	margin:0;
	position:relative;
	display:block;
	}

	
#top_navigation ul li{
	float:left;
	position:relative;
	display:inline-block;
	width:auto;
	height:auto;
}

#top_navigation ul li a{
	display:block;
	height:20px;
	text-align:center;
	padding:10px;
	}

#top_navigation ul ul{
	position: absolute;
	width: auto;
	display:none;
}

#top_navigation li:hover > ul, #top_navigation li:focus > ul{
	display:block;
	-moz-box-shadow: 0px 4px 10px -2px #ccc;
	-webkit-box-shadow: 0px 4px 10px -2px #ccc;
	box-shadow: 0px 4px 10px -2px #ccc;
}
	
#top_navigation ul ul ul{
	left:100%;
	top:0;
	}

#topLevel ul li {
	float:none;
	display:block;
	padding:0px;
	margin-left:0px;
	font-size:12px;
	background-color:#FFFFFF;
	white-space:nowrap;
}

#top_navigation li a:link{
	color: #999;
}

#top_navigation li a:visited{
	color: #999;
}

#top_navigation li a:hover, #top_navigation li a:focus{
	color:#FFF;
	background-color:#2196F3;
}

#top_navigation li a:active{
	color:#666;
}

#top_navigation li li a:active{
	color:#333;
}

#topLevel ul li a.active {
	color: #333;
	font-weight:bold;
}
	
#topLevel ul ul li a{
	color:#FFF;
	}
	
#topLevel ul ul li a:link{
	background-color:#2196F3;
	color:#FFF;
	}
	
#topLevel ul ul li a:visited{
	background-color:#2196F3;
	color:#FFF;
	}
	
#topLevel ul ul li a:hover, #topLEvel ul ul li a:focus{
	background-color:#FFF;
	color:#2196F3;
	}
	
#topLevel ul ul li a:active{
	color:#333;
	background-color:#FFF;
	font-weight:bold;
}

#topLevel ul li li a.active{
	color:#333;
	font-weight:bold;
	background-color:#FFF;
}

/*******************/
/* 3. FOOTER STYLE */
/*******************/
footer{
	width:100%;
	height:auto;
	z-index:-10;
	position:fixed;
	bottom:0px;
	left:0px;
}

footer li{
	float: left;
	position: relative;
	display: inline-block;
	margin: 5px;
	padding-top: 5px;
	z-index: 10;
}

footer li img {
	width: 30px;
	height: 30px;
}

#copyright {
	float: right;
	position: relative;
	display: inline-block;
	width: auto;
	line-height: 40px;
	font-size: 10px;
	padding-right: 10px;
	z-index: 10;
	color:#999;
}

/***********************/
/* 4. HOME PAGE STYLES */
/***********************/
#container{
	height:100%;
	width:100%;
	margin:auto;
	padding-bottom:10px;
	margin-bottom:50px;
	z-index:10;
	background:#FFF;
	}
	
.box{
	position:relative;
	width:80%;
	padding:10px;
	border:5px double #FFFFFF;
	z-index:2;
	text-align:center;
	}
	
/* SLIDESHOW */
.cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 70%;
    padding-left:0px;
    top: 40px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow li span { 
    width: 100%;
    margin: 0;
    height: 100%;
    position: absolute;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
	-webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s; 

}
.cb-slideshow li:nth-child(1) span { 
	background-image:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/landscape/New-Zealand-Lake-Matheson-Reflection.jpg);
}
.cb-slideshow li:nth-child(2) span { 
	background-image:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/urban/Los-Angeles-Avenue-of-the-stars-black-and-white-building.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}
.cb-slideshow li:nth-child(3) span { 
	background-image:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/landscape/Australia-Kings-Canyon-Landscape.jpg);
    -webkit-animation-delay: 12s;
    -moz-animation-delay: 12s;
    -o-animation-delay: 12s;
    -ms-animation-delay: 12s;
    animation-delay: 12s; 
}
.cb-slideshow li:nth-child(4) span { 
	background-image:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/animals/Australian-Stock-Horse-Black-And-White-Soft-Beauty.jpg);
    -webkit-animation-delay: 18s;
    -moz-animation-delay: 18s;
    -o-animation-delay: 18s;
    -ms-animation-delay: 18s;
    animation-delay: 18s; 
}
.cb-slideshow li:nth-child(5) span { 
	background-image:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/landscape/Australia-Kata-Tjuta-Outback-Black-And-White-Landscape.jpg);
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
}
.cb-slideshow li:nth-child(6) span { 
	background-image:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/urban/New-York-City-Pink-Graffiti-Fine-Art.jpg);
    -webkit-animation-delay: 30s;
    -moz-animation-delay: 30s;
    -o-animation-delay: 30s;
    -ms-animation-delay: 30s;
    animation-delay: 30s; 
}

/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation { 
    0% { opacity: 0;
    -webkit-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -webkit-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes imageAnimation { 
    0% { opacity: 0;
    -moz-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -moz-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes imageAnimation { 
    0% { opacity: 0;
    -o-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -o-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes imageAnimation { 
    0% { opacity: 0;
    -ms-animation-timing-function: ease-in; }
    8% { opacity: 1;
         -ms-animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-moz-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-o-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@-ms-keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes titleAnimation { 
    0% { opacity: 0 }
    8% { opacity: 1 }
    17% { opacity: 1 }
    19% { opacity: 0 }
    100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
	opacity: 1;
}


/* HOME PAGE PORTFOLIO */


.space{
	padding-top:15%;
	margin-bottom:50px;
	}
	
.call-to-action-button{
	display:block;
	width:50%;
	height:auto;
	margin:auto;
	background-color:#2196F3;
	color:#FFFFFF;
	font-size:18px;
	padding:15px;
	-webkit-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
	box-shadow: 0px 0px 2px 1px rgba(0,0,0,0.2);
	box-sizing:border-box;
	-webkit-transition: box-shadow .3s ease-out;
	transition:box-shadow .3s ease-out;
	margin:10% 12%;
	}

.call-to-action-button a{
	color:#FFFFFF;
	}
	
.call-to-action-button a:link{
	color:#FFFFFF;
	}
	
.call-to-action-button:hover, .call-to-action-button:focus{
	color:#FFFFFF;
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	background-color:#2196F3;
	}

	
/* GRID */
.portfolio{
	clear:both;
	width:100%;
	height:auto;
	position:relative;
	padding:20px 0;
	}
	
.portfolio ul{
	display:block;
	text-align:center;
	padding:0;
	zoom:1;
	*display: inline;
	}
	
.portfolio li{
	float:none;
	position:relative;
	display:inline-block;
	width:auto;
	height:auto;
	overflow:hidden;
	padding:0px;
	text-align:center;
	}

/* GRID HOME PAGE EFFECT */
figure.effect{
}

figure.effect img {
	opacity: 1;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect figcaption {
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

figure.effect figcaption::before {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 1px solid #fff;
	content: '';
}

figure.effect h3 {
margin: 40% 0px 10px;
transition: transform 0.35s;
-webkit-transition: transform 0.35s;
-webkit-transform: translate3d(0px, 100%, 0px);
transform: translate3d(0px, 100%, 0px);
}

figure.effect figcaption::before,
figure.effect p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

figure.effect:hover h3, figure.effect:focus h3  {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect:hover figcaption::before,
figure.effect:hover p, figure.effect:focus figcaption::before,
figure.effect:focus p {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect:hover figcaption, figure.effect:focus figcaption {
	background-color: rgba(51,153,255,.5);
}

figure.effect:hover img, figure.effect:focus img {
	opacity: 0.4;
}

/***********************/
/* 5. ABOUT PAGE STYLE */
/***********************/
.about_background {
	clear: both;
	position: relative;
	margin: 0px;
	width: 100%;
	height: 60vh;
	min-height: 620px;
	background: url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/urban/Brisbane-Ferris-Wheel-Abstract.jpg) 50% 110% / cover no-repeat fixed;
}

.about-text{
	background: rgba(255, 255, 255, 0.8);
	width: 100%;
	height: 100%;
	position: relative;
	padding-top: 0px;
}

.about_background h2 {
	font-size: 648%;
	width: 50%;
	color: rgb(33, 150, 243);
	line-height: 1em;
	font-weight: 700;
	margin: 0px 0px 0px 50%;
	padding: 140px 0px 0px;
	text-align: left;
}
	
.copy h2{
	text-align:left;
	padding:15% 100px 0;
	}

.copy h2.right{
	text-align:right;
	padding:5% 50px 0;
	}
	
.module .copy.left p.white{
	line-height: 2em;
	width: 80%;
	padding: 5% 50px 5% 100px;
	font-size: 1.6em;
	font-family: Raleway;
}
	
.background-photo{
	background:url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/product/phone/LGT_0630.jpg);
	background-size:cover;
	background-position:50% 50%;
	}
	
.background-video{
	background:url(http://www.carriemorganmedia.com/images/video_stills/stubbys_video_still.jpg);
	background-size:cover;
	background-position:50% 50%;
	}


.specialties {
	padding: 50px 0;
	background-color:#FFF:
}

.specialties .services-grid-header {
	height: auto;
}

.specialties .services-grid img {
	width: 65px;
	height: 65px;
	float: none;
	text-align: center;
}

.specialties .services-grid h3 {
	float: none;
	width: 100%;
	text-align: center;
	padding: 0px;
}

.services-grid p {
	text-align: justify;
	font-weight: 400;
	font-family: Raleway;
}

.about{
	font-size: 160%;
	color: #000;
	text-align: center;
	margin: auto;
	height: 100%;
	width: 100%;
	box-sizing:border-box;
	padding-top:65px;
	background-color: rgba(255,255,255,0.4);
}

.mainsection{
	position: relative;
	margin: auto;
	height: auto;
	width: 80%;
	margin-top:-10px;
	padding:10px 0px 45px;
	border-top-width: 3px;
	border-top-style: double;
	border-top-color: #999;
}

#website_projects .clients{
	width:90%;
	margin:0px auto;
	}
	
#clients{
	clear:both;
	width:100%;
	position:relative;
	display:block;
	padding:0;
	margin:0;
	}
	
#clients ul{
	display:block;
	text-align:center;
	padding:0;
	zoom:1;
	}
	
#clients li{
	float:left;
	position:relative;
	width:25%;
	height:auto;
	overflow:hidden;
	padding:0;
	margin:0;
	text-align:center;
	color:#666;
	line-height:115%;
	vertical-align:top;
	background-color:#FFFFFF;
}

#clients figure{
	position:relative;
	overflow:hidden;
	width:100%;
	height:auto;
	margin:0;
	text-align:center;
	cursor:pointer;
	}
	
#clients figure img{
	position:relative;
	display:block;
	width:100%;
	height:100%;
	max-width:100%;
	}
	
#clients figure.effect img {
opacity: 1;
-webkit-transition: opacity 0.35s;
transition: opacity 0.35s;
}

#clients figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#clients figure figcaption::before,
#clients figure figcaption::after {
	pointer-events: none;
}

#clients figure figcaption,
#clients figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#clients figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

#clients figure.effect {
	/*background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
}

#clients figure.effect img {
	opacity: .8;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

#clients figure.effect figcaption {
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

#clients figure.effect figcaption::before {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 1px solid #fff;
	content: '';
}

#clients figure.effect h3 {
	margin: -20px 0 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,540px,0);
	transform: translate3d(0,540px,0);
}

#clients figure.effect figcaption::before,
#clients figure.effect p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

#clients figure.effect:hover h3, #clients figure.effect:focus h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,-100%,0);
}

#clients figure.effect:hover figcaption::before,
#clients figure.effect:hover p, #clients figure.effect:focus figcaption::before,
#clients figure.effect:focus p  {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

#clients figure.effect:hover figcaption, #clients figure.effect:focus figcaption {
	background-color: #2196F3;
}


#clients figure.effect:hover img, #clients figure.effect:focus img {
	opacity: 0;
	}

#clients figure h3 {
	word-spacing: -0.15em;
	font-weight: 300;
	background-color:#FFF;
	font-family:Raleway;
	color:#666;
	padding:10px 0;
	font-size:1em;

}

#clients h3.darkgray{
	background-color:#333;
	}
	

#clients figure h3 span {
	font-weight: 800;
}

#clients figure h3,
#clients figure p {
	margin: 0;
}

#clients figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

#clients li p{
	padding-top:20px;
	height:30px;
	font-family:Raleway;
	font-weight:400;
}

.clients{
	line-height: 165%;
}

.clients a:link{
	color:#666;
}

.clients a:visited{
	color:#666;
}

.clients a:hover, .clients a:focus{
	color:#333;
}

.clients a:active{
	color:#666;
}

/*parallax */
#about_parallax{
	clear: both;
	position: relative;
	height: 550px;
	width: auto;
	margin-left: 0;
	margin-right: 0;
	background-attachment: fixed;
	background-image: url(../images/landscape/Australia-Kings-Canyon-Landscape.jpg);
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
}

#client_parallax{
	background-color:#FFF;
}


/* TESTIMONIALS SLIDER */
.cd-testimonials-wrapper {
  position: relative;
  width: 95%;
  background-color: #FFF;
  margin:0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 50px 0px 70px;
  z-index: 1;
  margin-right:-20px;
}


.cd-testimonials {
  color: #2196F3;
  text-align: center;
}
.cd-testimonials::after {
  clear: both;
  content: "";
  display: table;
}
.cd-testimonials > li {
  position: absolute;
  opacity: 0;
}
.cd-testimonials > li:first-child {
  position: relative;
  opacity: 1;
}
.cd-testimonials p {
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 1em;
  width:80%;
  margin:0 5%;
  text-align:left;
}

.cd-author img, .cd-author .cd-author-info {
  display: inline-block;
  vertical-align: middle;
}
.cd-author .cd-author-info {
  text-align: left;
  line-height: 1.2;
}
.cd-author .cd-author-info li:first-child {
  font-size: 14px;
  font-size: 0.875rem;
}
.cd-author .cd-author-info li:last-child {
  font-size: 12px;
  font-size: 0.75rem;
  color: #666;
}

.cd-testimonials-wrapper .flex-direction-nav li {
  position: absolute;
  height: 100%;
  width: 40px;
  top: 0;
}
.cd-testimonials-wrapper .flex-direction-nav li:first-child {
  left: 0;
}
.cd-testimonials-wrapper .flex-direction-nav li:last-child {
  right: 0;
}
.cd-testimonials-wrapper .flex-direction-nav li a {
  display: block;
  height: 100%;
  width: 100%;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  -webkit-transition: background-color 0.2s;
  -moz-transition: background-color 0.2s;
  transition: background-color 0.2s;
}
.no-touch .cd-testimonials-wrapper .flex-direction-nav li a:hover,.no-touch .cd-testimonials-wrapper .flex-direction-nav li a:focus {
  background-color: #2196F3;
}
.cd-testimonials-wrapper .flex-direction-nav li a::before,.cd-testimonials-wrapper .flex-direction-nav li a::after {
  /* left and right arrows in css only */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 13px;
  background-color: #ffffff;
}
.cd-testimonials-wrapper .flex-direction-nav li a::before {
  -webkit-transform: translateY(-35px) rotate(45deg);
  -moz-transform: translateY(-35px) rotate(45deg);
  -ms-transform: translateY(-35px) rotate(45deg);
  -o-transform: translateY(-35px) rotate(45deg);
  transform: translateY(-35px) rotate(45deg);
}
.cd-testimonials-wrapper .flex-direction-nav li a::after {
  -webkit-transform: translateY(-27px) rotate(-45deg);
  -moz-transform: translateY(-27px) rotate(-45deg);
  -ms-transform: translateY(-27px) rotate(-45deg);
  -o-transform: translateY(-27px) rotate(-45deg);
  transform: translateY(-27px) rotate(-45deg);
}
.cd-testimonials-wrapper .flex-direction-nav li:last-child a::before {
  -webkit-transform: translateY(-35px) rotate(-45deg);
  -moz-transform: translateY(-35px) rotate(-45deg);
  -ms-transform: translateY(-35px) rotate(-45deg);
  -o-transform: translateY(-35px) rotate(-45deg);
  transform: translateY(-35px) rotate(-45deg);
}
.cd-testimonials-wrapper .flex-direction-nav li:last-child a::after {
  -webkit-transform: translateY(-27px) rotate(45deg);
  -moz-transform: translateY(-27px) rotate(45deg);
  -ms-transform: translateY(-27px) rotate(45deg);
  -o-transform: translateY(-27px) rotate(45deg);
  transform: translateY(-27px) rotate(45deg);
}

/*******************/
/* 6. PRODUCT PAGE */
/*******************/

#product_background{
	clear: both;
	position: relative;
	height: auto;
	width: auto;	
	padding-top: 40px;
	margin-left: 0px;
	margin-right: 0px;
	background-attachment: fixed;
	background-image: url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/product/LGT_0630.jpg);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
	}
	
#product_background .clear{
	background:none;
	}
	
#product_background ul{
	width:90%;
	margin:0 auto;
	text-align:center;
	}
	
#product_background li{
	float: none;
	position: relative;
	display: inline-block;
	width: 300px;
	height: 300px;
	height: 300px;
	text-align: center;
	vertical-align: top;
	margin: 50px 5%;
}

#product_background h2{
	padding-top:20px;
	font-weight:700;
	color:#666;
	font-size:2.5em;
	}
	
#product_background p{
	width: 200px;
	text-align: center;
	margin: 0 auto;
	font-weight: 400;
	font-size: 14px;
	padding-top: 10px;
}#product li{	float:left;	width:25%;	height:auto;}#product li img{	width:100%;	display:block;	overflow:hidden;}

.quote{
	padding: 25px 0px;
	text-align: center;
	font-size: 2em;
	background-color: #2196F3;
	color: #FFF;
	z-index:-20;
  }
	


/********************/
/* 7. SERVICES PAGE */
/********************/
.business{
	clear: both;
	position: relative;
	margin: 0px;
	width: 100%;
	height: 60vh;
	min-height: 620px;
	background: url(https://s3-us-west-1.amazonaws.com/carriemorganmedia/images/urban/Los-Angeles-Avenue-of-the-stars-black-and-white-building.jpg) 50% 110% / cover no-repeat fixed;
}

.business img{
	clear: both;
	float: left;
	margin: 5% 0px 0px 15%;
	width: 30%;
	display: none;
}

.business h2{
	font-size: 648%;
	width: 100%;
	color: rgb(255, 255, 255);
	line-height: 1em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 65px auto;
}

.business span{
	color: rgb(33, 150, 243);
	font-size: 185%;
	line-height: 0.8em;
}

.business p{
	position: relative;
	width: 75%;
	font-size: 120%;
	font-family: Raleway;
	font-weight: 400;
	display: none;
}

.business-text{
	width: auto;
	height: 100%;
	margin: 0px 20%;
	text-align: center;
	padding-top: 40px;
}

.cta-full{
	background:#8BC34A;
	width:50%;
	text-align:center;
	margin:30px auto;
	font-weight:400;
	}
	
.call-to-action-button a.cta-full{
	text-align:center;
}

#design{
	clear:both;
	position:relative;
	width:100%;
	height: 600px;
	min-height:600px;
	background-color: #E3F2FD;
}

#design ul{
	display: block;
	margin-top:0px;
	margin-right:auto;
	margin-left:auto;
	text-align:center;
	padding:0;
	zoom:1;
	*display: inline;
}

#design li{
	float: none;
	position: relative;
	display: inline-block;
	width: 40%;
	height: auto;
	overflow: visible;
	margin: 20px;
	padding: 7% 10px 10px;
	text-align: center;
	vertical-align: top;
}

#design li p{
	font-size: 100%;
	color: #666;
	line-height: 115%;
	vertical-align: top;
	font-family:Raleway;
	font-weight:400;
}

#design li h2, #design li h3{
	margin-bottom:10px;
	font-family:Raleway;
}

#design li h2{
	color:#2196F3;
	font-weight:700;
	font-size:300%;
}

#design li h3, #development li h3{
	color: #666;
	font-weight: 400;
}

.frame{
	position:relative;
	width:150px;
	height:100px;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	line-height:100px;
	margin-bottom:25px;
	}
	
.frame:before{
	display: block;
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    top: -10px;
    left: -10px;
    border-top: 5px solid #666;
    border-left: 5px solid #FFF;
	}
	
.frame:after {
    display: block;
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    top: -10px;
    right: -10px;
    border-top: 5px solid #666;
    border-right: 5px solid #FFF;
}

.frame span:before {
    display: block;
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -10px;
    left: -10px;
    border-bottom: 5px solid #666;
    border-left: 5px solid #FFF;
}

.frame span:after {
    display: block;
    content: "";
    width: 20px;
    height: 15px;
    position: absolute;
    bottom: -10px;
    right: -10px;
    border-bottom: 5px solid #666;
    border-right: 5px solid #FFF;
}

.frame span img{
	width:100px;
	height:100px;
	}
	
/* WEBSITE PACKAGES */
.packages{
	padding:40px 0px 50px;
	background-color: #666;
	}
	
.line{
	width: 90%;
	text-align: center;
	border-bottom: 1px dashed rgb(204, 204, 204);
	line-height: 0.1em;
	margin: 0px auto 20px;
}

.line span{
	background: rgb(255, 255, 255);
	padding: 0px 10px;
	font-size: .8em;
	font-weight:100;
}

.pricing-table-wrap{
	display: table;
	border-collapse: separate;
	border-spacing: 10px;
	position: relative;
	width: 90%;
	margin: auto;
	height: 30%;
	background-color: #666;
	text-align: center;
	font-family: Raleway;
	font-weight: 400;
}

.pricing-table {
	display: table-cell;
	float: none;
	width: 20%;
	margin: 1%;
	text-align: center;
	padding: 0px;
	box-sizing: border-box;
}

.pricing-table > li {
	list-style-type: none;
	list-style-position: outside;
	position: relative;
}

.pricing-table li {
	width: 100%;
	padding: 20px 10px;
	box-sizing: border-box;
}

.pricing-table > li:nth-child(odd) {
	background-color: rgb(227, 242, 253);
	color: rgb(102, 102, 102);
	border-image-source: initial;
	border-image-slice: initial;
	border-image-width: initial;
	border-image-outset: initial;
	border-image-repeat: initial;
}

.pricing-table > li:nth-child(even) {
	background-color: rgb(255, 255, 255);
	color: rgb(51, 51, 51);
}

.pricing-table li.heading-row {
	background-color: rgb(144, 202, 249);
	color: rgb(255, 255, 255);
	padding: 5px 10px;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 0px;
	border-bottom-left-radius: 0px;
}

.pricing-table li.heading-row h3 {
	vertical-align: baseline;
	font-size: 150%;
}

.pricing-table li.pricing-row {
	display: inline-block;
	background-color: rgb(33, 150, 243);
	color: rgb(255, 255, 255);
	text-align: center;
	font-size: 300%;
	line-height: 1em;
	padding: 25px 10px;
	font-weight: 800;
	width: 100%;
	border-top: 1px solid rgb(227, 242, 253);
}

/* OPTIONS */
.options {
	padding: 50px 0px;
	background-color: #FFFFFF;
}

.services-grid{
	display: block;
	width: 90%;
	height: auto;
	padding: 10px 0;
	margin: 0px auto -20px;
	text-align: center;
}

.services-grid ul {
	display: block;
	margin: 0px;
	padding: 0px;
	zoom: 1;
	width: 100%;
}

.services-grid li {
	clear: both;
	float: none;
	position: relative;
	display: inline-block;
	width: 23%;
	min-height: 175px;
	height:auto;
	overflow: hidden;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
	vertical-align: top;
	}

.services-grid-header {
padding-bottom: 10px;
height: 45px;
}

.services-grid img {
float: left;
width: 30px;
height: 30px;
}

#websites .services-grid h3 {
width: auto;
float: none;
padding-left:40px;
text-align: left;
font-weight: 400;
font-size:1.5em;
}


.line.background-gray {
padding-top: 22px;
margin-bottom:50px;
}

.line span.background-gray {
background: rgb(102, 102, 102);
}

#website_projects {
clear: both;
position: relative;
padding-top: 25px;
height: auto;
margin-top: 0px;
margin-left: 0;
margin-right: 0;
width: 100%;
}

#website_projects .section_titles{
	color:#333;
	letter-spacing:.2em;
	font-size:270%;
}

#website_projects ul {
display: block;
/* margin: 25px auto 25px; */
text-align: center;
padding: 0;
zoom: 1;
}

#website_projects li {
float: none;
position: relative;
display: inline-block;
width: auto;
height: auto;
overflow: hidden;
/* margin: 10px 10px 0px; */
padding: 0px 0px 0px;
background: #FFF;
text-align: center;
font-size: 110%;
text-align: center;
color: #666;
line-height: 115%;
vertical-align: top;
margin-bottom: 5px;
}

#website_projects figure {
position: relative;
overflow: hidden;
width: 400px;
height: 300px;
margin: 0;
text-align: center;
cursor: pointer;
}

#website_projects figure img {
position: relative;
display: block;
min-height: 100%;
max-width: 100%;
opacity: 1;
}

#website_projects figure figcaption {
	color: #fff;
	text-transform: uppercase;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

#website_projects figure figcaption::before,
#website_projects figure figcaption::after {
	pointer-events: none;
}

#website_projects figure figcaption,
#website_projects figure figcaption > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#website_projects figure figcaption > a {
	z-index: 1000;
	text-indent: 200%;
	white-space: nowrap;
	font-size: 0;
	opacity: 0;
}

#website_projects figure.effect {
	/*background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);*/
}

#website_projects figure.effect img {
	opacity: 1;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

#website_projects figure.effect figcaption {
	-webkit-transition: background-color 0.35s;
	transition: background-color 0.35s;
}

#website_projects figure.effect figcaption::before {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border: 1px solid #fff;
	content: '';
}

#website_projects figure.effect h3 {
	margin: -20px 0 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,265px,0);
	transform: translate3d(0,235px,0);
}

#website_projects figure.effect figcaption::before,
#website_projects figure.effect p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(0);
	transform: scale(0);
}

#website_projects figure.effect:hover h3, #website_projects figure.effect:focus h3 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,-100%,0);
}

#website_projects figure.effect:hover figcaption::before,
#website_projects figure.effect:hover p, #website_projects figure.effect:focus figcaption::before,
#website_projects figure.effect:focus p{
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

#website_projects figure.effect:hover figcaption, #website_projects figure.effect:focus figcaption {
	background-color: #2196F3;
}


#website_projects figure.effect:hover img, #website_projects figure.effect:focus img {
	opacity: 0;
	}

#website_projects figure h3 {
	word-spacing: -0.15em;
	font-weight: 300;
	background-color:#FFF;
	font-family:Raleway;
	color:#666;
	padding:10px 0;
	font-size:1em;

}

#website_projects h3.darkgray{
	background-color:#333;
	}
	

#website_projects figure h3 span {
	font-weight: 800;
}

#website_projects figure h3,
#website_projects figure p {
	margin: 0;
}

#website_projects figure p {
	letter-spacing: 1px;
	font-size: 68.5%;
}

#website_projects li p{
	padding-top:20px;
	height:30px;
	font-family:Raleway;
	font-weight:400;
}

#website_projects a:link{
	color: #333;
}

#website_projects a:visited{
	color: #333;
}

#website_projects a:hover, #website_projects a:focus{
	color:#39F;
}

#website_projects a:active{
	color: #333;
}

#about .module .left p{
	line-height:1.5em;
	font-size:2em;
	margin:10%;
	}

.ready{
	height:600px;
	width:100%;
	background-color:#E3F2FD;
	margin-bottom:50px;
	}

.ready h2{
	font-weight:700;
	padding:10% 0 0;
	}
	
.ready p{
	text-align:center;
	font-size:1.5em;
	padding:10px 0 0;
	}
	
.ready .cta-full{
	background:#2196F3;
	}
	
.ready .call-to-action-button:hover, .ready .call-to-action-button:focus{
	background:#8BC34A;
	}

/**********************/
/* 8. HEADSHOTS PAGE */
/**********************/
#headshots h1{
	text-align:center;
	font-size:5em;
	padding-top:25px;
	}
	
/* Headshots */

#headshots #slider{
	border:none;
	box-shadow:none;
	}
	
#headshots .flexslider .slides img{
	width:48%;
	margin:auto;
	display:inline-block;
	}
	
#headshots .flexslider .slides .img-full img{
	width:90%;
	}

/* Additional Services */
#headshots .services-grid h3{
	padding-left:0px;
	}
	
#headshots .services-grid p{
	font-weight:100;
	line-height:1.5em;
	}
	
#headshots .services-grid li{
	width:40%;
	height:auto;
	vertical-align:top;
	min-height:inherit;
	}
	
#headshots .services-grid li li{
	display: block;
	height: auto;
	width: 100%;
	text-align: left;
	padding:10px 0px 0px;
}

#headshots h3.left{
	padding-left:0px;
	}
	
#headshots .cd-testimonials-wrapper{
		margin-right:0px;
	}
	
#headshots .module .flex-direction-nav .flex-prev{
	margin-left:0px;
	}
#headshots .module .flex-direction-nav a{
	position:static;
	opacity:1;
	}
	
#headshots .module li{
	padding:25px 0px 0px;
	}

#headshots .module li h3{
	padding-bottom:10px;
	}
	
#headshots .module li p{
	line-height:1.5em;
	}

#headshots .ready{
	clear:both;
	}
	
/*******************/	
/* 9. Contact Page */
/*******************/	

#info_section{
	clear:both;
	position:relative;
	padding-top:100px;
	width:100%;
	height:90%;

}

#info_section ul{
	display:block;
	width:90%;
	margin:0px auto;
	text-align:center;
}

#info_section li{
	display:inline-block;
	position:relative;
	float:none;
	padding:10px;
	margin:15px 15px 0px;
	width:500px;
	height:auto;
	vertical-align:top;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	box-shadow:0px 5px 5px #CCC;
	-moz-box-shadow:0px 5px 5px #CCC;
	-webkit-box-shadow:0px 5px 5px #CCC;
	text-align:left;
}

.info_title, .info_text{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:left;
	padding-top:10px;
	color: #666;
}

.info_title{
	font-size:15px;
	font-weight:500;
}

.info_main{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:left;
	padding-top:10px;
	font-size:16px;
	font-weight:500;
	font-color:#000;
}

.info_text{
	font-size:13px;
	font-weight:100;
}

.info_url{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:left;
	font-weight:100;
	font-size:12px;
	color: #666;
}

#info_section a{
	list-style-type: none;
	text-decoration: none;
	color: #666;
	display:inline-block;
}

#info_section a:hover, #info_section a:focus{
	list-style-type: none;
	text-decoration: none;
	color: #333;
}	

/*******************/	
/* 10. Pricing Page */
/*******************/	

.product_section{
	padding-top:70px;
	width:100%;
	height:90%;

}

.product_section ul{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.product_section li{
	display:inline-block;
	position:relative;
	float:none;
	padding:10px;
	margin-top:15px;
	margin-right:15px;
	width:90%;
	height:auto;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	box-shadow:0px 5px 5px #CCC;
	-moz-box-shadow:0px 5px 5px #CCC;
	-webkit-box-shadow:0px 5px 5px #CCC;
	text-align:left;
	font-family:"Helvetica Neue Light", Helvetica;
	color:#666;
}

.product_section ul li li{
	-moz-border-radius:none;
	-webkit-border-radius:none;
	border-radius:none;
	box-shadow:none;
	-moz-box-shadow:none;
	-webkit-box-shadow:none;
	display:block;
	margin:5px 0px 0px 0px;
	padding:0;
	}
	
.product_section ul li li:first-child{
	text-decoration:underline;
	}
	
.product_section ul li li:last-child{
	font-style:italic;
	}
	
.product_text h4{	
	text-align:left;
	font-weight:700;
	}
	

.pricing_title{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:center;
	padding-top:10px;
	font-size:20px;
	font-weight:500;
	color:#333;
}

.product_title, .product_text{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:left;
	padding-top:10px;
}


.product_title{
	font-size:15px;
	font-weight:500;
	color:#333;
}

.product_main, .product_text h4{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:left;
	padding-top:10px;
	font-size:18px;
	font-weight:500;
	color:#333;
}

.product_text{
	font-size:14px;
	font-weight:100;
	letter-spacing:.1em;
	color: #666;
}

.product_url{
	font-family:Helvetica;
	letter-spacing:.1em;
	text-align:left;
	font-weight:100;
	font-size:12px;
	color: #666;
}

#product_section a{
	list-style-type: none;
	text-decoration: none;
	color: #666;
}

#product_section a:hover, #product_section a:focus{
	list-style-type: none;
	text-decoration: none;
	color: #333;
}

/**************************/
/* 11. Photography Styles */
/**************************/

#gallery {
 	margin-top:0px;
	margin-left:auto;
	margin-right:auto;
	width:90%;
	height:auto;
	padding-top:100px;
	margin-bottom:auto;
	text-align:center;
} 

#gallery ul{
	display: block;
	margin:0;
	padding:0;
	zoom:1;
	*display: inline;
}

#gallery li {
  float:none;
  position:relative;  
  display:inline-block; 
  width:auto; 
  height:auto;
  overflow:hidden;
  margin:10px; 
  padding:10px; 
  background:#FFF; 
  box-shadow:0 0 5px rgba(0,0,0,.35);
  text-align:center;
}

#gallery li div {
	position: absolute;
	height: 0;
	width: 280px;
	overflow: hidden;
	bottom: 10px;
	left: 10px;
	padding: 0 10px;
	line-height: 50px;
	color: #FFF;
	transition: height 1s;
	background-color: rgba(51,153,255,0.45);
	font-family: Helvetica;
	font-weight: 100;
	font-size: 18px;
	letter-spacing: 1em;
	text-align:center;
}

#gallery li:hover div, #gallery li:focus div{
  height:50px;
}

#gallery a img {
	display: block;
	-webkit-transition: all 0.5s;
}

/*Hover effects*/
#gallery a img:hover, #gallery a img:focus {
	-webkit-filter: none; /*Returns to default state*/
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover, #gallery a img.brightness:focus{
	-webkit-filter:brightness(0);
}

.grayscale{
	-webkit-filter:grayscale(100%);
	}
.sepia{
	-webkit-filter:sepia(100%);
}

/****************************/
/* 12. SMALL DESKTOP DISPLAY */
/****************************/

@media screen and (max-width:1351px){
	/* Header */
	#top_navigation{
		width:75%;
		padding:0 13%;
		background-color:#FFFFFF;
		box-shadow: 0px 2px 2px #CCC;
		-moz-box-shadow: 0px 2px 2px #CCC;
		-webkit-box-shadow: 0px 2px 2px #CCC;
		}
		
	#headshots h1{
		padding-top:50px;
		}
	
	/* Home Page */
	.portfolio{
		padding:10px 0;
	}
	
	.portfolio.background-gray .grid .fourth{
		height:115px;
		}
		
	.grid{
		width:95%;
		}

	.grid .position-right.fourth, .grid .position-left.fourth{
		width:100%;
		float:none;
		margin:10px 0 0;
		}
		
	.grid .fourth h2{
		display:inline-block;
		width:50%;
		}
		
	.grid .fourth h2.right{
		float:right;
		}

	.grid .fourth .call-to-action-button{
		margin:10px 0 0;
		display:inline-block;
		width:40%;
		}
		
	.call-to-action-button.position-left{
		float:none;
		}
		
	.call-to-action-button.position-right{
		float:none;
		}
		
	.grid figure{
		width:32%;
		}
	
	/* Headshots Page */
	#headshots .services-grid li{
		width:90%;
		margin:0 auto;
	}
	
	#headshots .module{
		height:auto;
		}
		
	#headshots .copy h2{
		padding-top:50px;
	}
	
	#headshots-testimonials .module{
		width:100%;
		height:auto;
	}
	
	#headshots .module .left{
		padding-left:0px;
	}
	
	#headshots .cd-testimonials-wrapper{
		margin-right:0px;
	}
	
	#headshots-info, #headshots-testimonials{
		width:90%;
		padding:0px 5% 50px;
		}
		
	#headshots-info .module{
		width:100%;
		padding-bottom:50px;
		}
		
	#headshots .ready{
		height:400px;
		}
		
	}

@media screen and (max-width:1300px){
	section.cta-full-section{
		padding:30px 0;
		}
		
	section.cta-full-section .cta-full{
		margin:0 auto;
		}
		
	#clients li{
		width:33.33%;
		margin:0 auto;
		}
		
	.module{
		height:600px;
		}
		
	.module-quarter{
		height:200px;
		}
		
	.services-grid li{
		height:250px;
		}
}


@media screen and (min-width:601px) and (max-width:855px){
	header{
		padding-top:5px;
		}
	.name-main{
		font-size:200%;
		padding-left:20px;
		}
		
	#info_section{
		display:block;
		float:left;
		padding-top:140px;
		width:90%;
		height:50%;
		margin-left:0;

	}

	.info_title, .info_text{
		font-family:Helvetica;
		letter-spacing:.1em;
		text-align:left;
		padding-top:10px;
		color: #666;
	}

	.info_title{
		font-size:15px;
		font-weight:500;
	}

	.info_main{
		font-family:Helvetica;
		letter-spacing:.1em;
		text-align:left;
		padding-top:10px;
		font-size:15px;
		font-weight:500;
		font-color:#000;
	}

	.info_url{
		font-family:Helvetica;
		letter-spacing:.1em;
		text-align:left;
		font-weight:100;
		font-size:12px;
		color: #666;
	}

	/*about page */

	.mainsection{
		width:90%;
	}

	/* flexslider */
	.theSlider{
		left:0%;
		height:100%;
		width:100%;
	}

	.flexslider{
		width:100%;
	}
	
}
/*********************/
/* 13. TABLET DISPLAY */
/*********************/
@media only screen and (min-width: 1170px) {
	.cd-testimonials p {
		font-size: 26px;
		font-size: 1.625rem;
		line-height: 1.6;
	}
	
	.cd-testimonials-wrapper .flex-direction-nav li a::before, .cd-testimonials-wrapper .flex-direction-nav li a::after {
		background-color: #5e5e63;
		-webkit-transition: background-color 0.2s;
		-moz-transition: background-color 0.2s;
		transition: background-color 0.2s;
	}
	.cd-testimonials-wrapper .flex-direction-nav li a:hover::before,.cd-testimonials-wrapper .flex-direction-nav li a:hover::after, .cd-testimonials-wrapper .flex-direction-nav li a:focus::before,.cd-testimonials-wrapper .flex-direction-nav li a:focus::after {
		background-color: #ffffff;
	}
}

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

	/* Modules */
	.copy h2{
		padding:10% 0px 0;
		}
			
	.module-half{
		height:200px;
		}
		
	.module-half h2{
		padding-top:50px;
		}
		
	.module-quarter{
		height:150px;
		}
		
	.module-quarter h2{
		padding-top:20px;
		}
		
	.right{
		padding-right:20px;
		}
		
	.left{
		padding-left:20px;
		}
		
	.portfolio.background-gray .grid .fourth{
		height:auto;
		}
	/* Grid */
	.grid .position-left.fourth{
		width:50%;
		float:left;
		margin:10px 0 0;
		}
		
	.grid .position-right.fourth{
		width:50%;
		float:right;
		margin:10px 0 0;
		}

		
	.grid .fourth h2{
		display:block;
		width:80%;
		margin:0 auto;
		}
		
	.grid .fourth h2.left{
		padding-left:0px;
		width:90%;
		}
		
	.grid .fourth h2.right{
		float:none;
		text-align:right;
		padding-right:0;
		width:90%;
		}

	.grid .fourth .call-to-action-button{
		margin:15% 5% 0;
		display:block;
		width:70%;
		}
		
	.call-to-action-button.position-left{
		float:left;
		}
		
	.call-to-action-button.position-right{
		float:right;
		}
		
	.grid figure{
		width:49%;
		}
		
	.grid figure .position-right{
		float:right;
		}
	}

@media screen and (max-width:1000px){
	.business-text{
		height:80%;
		padding-top:60px;
		margin:0 auto;
		vertical-align:middle;
		}
		
	.business-text h2{
		font-size:5em;
		}
		
	.services-grid li{
		height:200px;
		width:45%;
		}
	}
	
	
/*********************/
/* 14. MOBILE DISPLAY */
/*********************/
@media screen and (max-width:850px){
	#top_navigation{
		width:90%;
		padding:0 5%;
		background-color:#FFFFFF;
		text-align:center;
		font-size:14px;
		}
		
@media screen and (max-width:768px){
	/* Modules */
	.module-image{
		display:none;
		}
	
	
	.module.col-5{
		width:100%;
		}
		
	.module-quarter{
		height:100px;
		}
		
	.module-quarter h2{
		padding-top:15px;
		font-size:2.5em;
		}
	
	/* Home Page */
	.box h1{
		font-size:5em;
		}
		
	.grid figure {
		width: 90%;
		height: auto;
		margin: 10px auto;
		min-width: 300px;
		max-width: 800px;
		max-height: 800px;
		display: block;
		float: none;
	}
	
	.grid .fourth .call-to-action-button{
		margin: 25px auto 25px;
		display: block;
		width: 70%;
		float: none;
	}
	
	.grid .position-left.fourth{
		width:100%;
		float:none;
		margin:10px 0 0;
	}
	
	.grid .position-right.fourth{
		width:100%;
		float:none;
		margin:10px 0 0;
	}
	
	.grid .fourth h2.left{
		padding-left:0px;
		width:90%;
		text-align:center;
	}
	
	.grid .fourth h2.right{
		float:none;
		text-align:center;
		padding-right:0;
		width:90%;
	}
	
	/* About Page */
	.about_background{
		min-height:500px;
		height:40vh;
		}
		
	.about_background h2{
		margin:0px 0px 0px 10%;
		}
		
	#clients li{
		width:50%;
		}
		
	.module.col-5{
		height:auto;
		}
		
	.module .copy.left p.white{
		line-height:1.5em;
		padding:25px 0;
		width:90%;
		}
		
	/* Testimonials Slider */
	 .cd-testimonials p {
		font-size: 22px;
		font-size: 1.375rem;
	  }	
	  
	.cd-author .cd-author-info {
		line-height: 1.4;
	}
	.cd-author .cd-author-info li:first-child {
		font-size: 16px;
		font-size: 1rem;
	  }
	.cd-author .cd-author-info li:last-child {
		font-size: 14px;
		font-size: 0.875rem;
	  }
	  
	.cd-testimonials-wrapper .flex-direction-nav li {
		width: 50px;
	}
	
	.cd-testimonials-wrapper{
		height:auto;
		margin-right:auto;
		}
		
	.cd-testimonials-wrapper p{
		font-size:18px;
	}
	
	/* Bottom Call to Action */
	.ready{
		height:300px;
		}
	}
	  
	/*Headshot Page */
	#headshots .pricing-table{
		display:inline-block;
		width:100%;
		height:auto;
		margin:25px auto;
		}
	
	#headshots .line{
		line-height:.4em;
	}
	
	#headshots .services-grid ul{
		padding:0px 0px 25px;
		}
		
	#headshots .services-grid p{
		text-align:left;
		}

	/* Website Page */
	.business{
		min-height:350px;
	}
	
	.business-text h2{
		font-size:3em;
		}
}