@charset "UTF-8";
/* CSS Document */

html, body {
	font-family: 'Quattrocento Sans', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color:#666;
	margin: 0 auto;	
	width: 100%;
	cursor: pointer;
}

h1 {
	font-size: 30px;
	line-height: normal;
}

h2 {
	font-size: 24px;
	line-height: 26px;
	font-weight: 400;
}

h3 {
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
}

/* TOP NAV */
#navwrap {
	width: 100vw;
	text-align: center;
	background: #a8a8a8;
}
	
#navwrap ul {
	position: fixed;
	z-index: 1;
	width: 100vw;
	background: #000;
	line-height: 50px;
	font-size: 24px;
	margin: 0 auto;
	border-bottom: 1px solid #FFF;
	// box-shadow: 0px 2px 5px #999;
}

#navwrap ul:after {
    content: '';
    display: inline-block;
    width: 100%;
}

li {
	display: inline-block;
	padding: 0px 20px 0px 20px;
	vertical-align: middle;
	color: #FFF;
}
	
li a {
	display: block;
	width: 80%;
	font-size: 21px;
	text-decoration: none;
	color: #FFF;
}

a:link { color: #FFF; text-decoration: none; }
a:visited { color: #FFF; text-decoration: none; }
a:active { color: #FFF; text-decoration: none; }
a:hover { color: #FC0; text-decoration: none; }

#menu_name {
	color:#FFF; 
	font-weight:700;
	width: 400px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

#hi {
	display: block;
	font-size: 21px;
	line-height: 30px;
}
#name {
	display: block;
	font-size: 36px;
	line-height: 30px;
	font-weight: bold;
}

/* MAIN */
.container {
	display: table;
	width: 100vw;
	height: 40vh;
}

.gray {
	display: table;
	width: 100vw;
	background-color: #f4f4f4;
}

.home_title {
	display: table-cell;
	min-height: 100vh;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	text-align: center;
	margin-top: 50px;
	font-size:21px;
	padding: 40px 0px 0px 0px;
	background-image: url("https://www.kerrysfranklin.com/images/bg_home_wires.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

.home_msg {
	margin: auto;
	text-align: center;
	width: 55%;
	font-size: 24px;
	font-weight: 700;
	line-height: 32px;
	text-shadow:1px 1px 10px #000000;
}
	
.work_title {
	display: table-cell;
	min-height: 100%;
	height: 300px;
	color: #FFF;
	text-align: center;
	vertical-align: middle;
	text-align: center;
	margin-top: 0px;
	padding: 40px 0px 0px 0px;
	background-image: url("images/bg_home.jpg");
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
}

/* THUMBNAILS */
.work {
	width: 90%;
	display: table;
	margin: 0 auto;
	padding: 0px 0px 0px 5px;
}

.examples {
	width: 60%;
	display: table;
	margin: 0 auto;
	padding: 40px 0px 0px 5px;
}

.skills {
	width: 60%;
	display: table;
	margin: 0 auto;
	padding: 0px 0px 30px 5px;
}

.holder {
	width: 100%;
	margin: 20px;
	display: table-cell;
	padding: 0px;
	text-align: center;
	line-height: 24px;
}

.holder a {
	color: #2ab7ca;
	text-decoration: underline;
}

.examples > .holder {
	width: 100%;
	margin:20px;
	display: table-cell;
	padding: 0px;
	text-align: center;
	line-height: normal;
}

.about > .holder {
	width: 60vw;
	margin: 0 auto;
	display: table;
	padding: 0px;
	text-align: center;
	line-height: normal;
}

.holder h1 {
	font-size: 36px;
	line-height: normal;
}

.holder h2 {
	font-size: 28px;
	line-height: 32px;
}

.holder h3 {
	font-size: 24px;
	line-height: 28px;
}

.qualities {
	text-align: left;
}

.outer {
  	position: relative;
  	width: 33%;
  	float: left;
  	padding: 0px;
}

.outer4 {
  	position: relative;
  	width: 25%;
  	float: left;
  	padding: 0px;
}

.outer5 {
  	position: relative;
  	width: 20%;
  	float: left;
  	padding: 0px;
}

.examples_outer {
  	position: relative;
  	width: 50%;
  	float: left;
  	padding: 0px;
}

.inner {
	margin: 0 auto;
	width: 85%;
	height: 85%;
}

.examples_inner {
	margin: 0 auto;
	width: 85%;
	height: 85%;
	text-align: left; 
	vertical-align: middle;
	line-height: 24px;
}

.examples_inner li {
	display: list-item;
	padding: 0px;
	color: #666;
	text-align: left;
	line-height: 24px;
}

.image {
	margin: 0 auto;
  	display: block;
  	width: 100%;
  	height: auto;
}

.image20 {
  	width: 20vw;
	height: auto;
}

.image30 {
  	width: 30vw;
	height: auto;
}

.image40 {
  	width: 40vw;
	height: auto;
}

.image50 {
  	width: 50vw;
	height: auto;
}

.image60 {
  	width: 60vw;
	height: auto;
}

.image70 {
	width: 70vw;
  	height: auto;
}

.image80 {
  	width: 80vw;
	height: auto;
}

.overlay {
	margin: 0 auto;
  	position: absolute;
  	bottom: 0;
  	left: 0;
  	right: 0;
  	background-color: #FFF;
	opacity: 0.9;
  	overflow: hidden;
  	width: 85%;
  	height: 0;
  	transition: .5s ease;
}

.outer:hover .overlay {
	height: 100%;
	cursor: url("images/cursor.png") , auto; 
}

.outer4:hover .overlay {
	height: 100%;
	cursor: url("images/cursor.png") , auto; 
}

.outer5:hover .overlay {
	height: 100%;
	cursor: url("images/cursor.png") , auto; 
}

.intro {
	font-family: 'Sacramento', cursive;
	font-size: 36px;
	line-height: 42px;
	color: #000;
}

.caption {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  font-family: 'Quattrocento Sans', sans-serif;
  font-size: 18px;
  color:#000;
}

.caption a {
	color: #333;
	text-decoration: none;
}

.caption h1 {
	font-size: 26px;
	color: #3C9;
	font-weight: bold;
}

.brk { display: none; } 

.small {
	font-size: 12px;
}

.ftr {
	text-align: center;
	width: 100%;
	background-color: #ececec;
	padding: 30px 0px 30px 0px;
	display: table;
}

.ftr_outer {
	text-align: center;
	width: 75%;
	margin: 0 auto;
	background-color:#ececec;
	padding: 0% 0% 0% 8%;
}

.ftr_links {
	width: 11%;
	margin: 0 auto;
	padding: 0px 10px 20px 10px;
	float: left;
	display: table-cell;
}

.ftr_links:hover {
	opacity: 0.4;
}

.clr { clear: both; }

.about {
	font-size:18px;
	line-height: 28px;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
 
/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

.iframe-container2 {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
 
.iframe-container2 iframe {
   border: 0;
   height: 40%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
 
/* 4x3 Aspect Ratio */
.iframe-container2-4x3 {
  padding-top: 75%;
}

@media screen and (min-width: 768px) {
	#menu { display: none; }
	#mobileHdr { display: none; }
}

@media screen and (max-width: 768px) {
	#menu { width: 35px; height: 35px; display: inline-block; background: #a8a8a8; font-size: 21px; line-height: 36px; text-align: center; color: #FFF; }
	#mobileHdr { background: #a8a8a8; display: inline-block; text-align: center; font-size: 21px; padding: 1px 0px 0px 20px; color: #FFF; }
	#nav.js { display: none; }
	#navwrap ul { position:static-top; width:100%; list-style:none; }
	li { width:100%; border-right:none; }	
	#menu_name { display: none; }	
	#logo { display: none; }	
	.container { display: none; }
	.left { display: table-row; width:100%; height:100px; position:relative; }
	.left img { width:80%; height:auto; position:relative; padding-top:20px; }
	.right { width:98%; display:table-row; padding:0px 10px 0px 0px; margin-top:100px; }
	.home_title { width:100%; margin-top:-20px; color:#FFF; background-color: #FFF; padding-top:0px; font-size:16px; }
	.home_logo { width: 40%; height:auto; }
	.holder { width:90%; }
	.examples { width:90%; }
	.holderHome { width:90%; }
	.outer { float: none; width:100%; padding: 0px 0px 20px 0px; margin-bottom:30px; }
	.outer4 { float: none; width:100%; padding: 0px 0px 20px 0px; margin-bottom:30px; }
	.outer5 { float: none; width:100%; padding: 0px 0px 20px 0px; margin-bottom:30px; }
	.examples_outer { float: none; width: 100%; padding: 0px 0px 20px 0px; margin-bottom:30px; }
	.overlay { display: none; }
	.caption { display: none; }
	/* .examples { padding: 10px 0px 0px 5px; } */
	.brk { display: block; clear: both; }
	.image20 { width: 95vw; height: auto; }
	.image30 { width: 95vw; height: auto; }
	.image40 { width: 95vw; height: auto; }
	.image50 { width: 95vw; height: auto; }
	.image60 { width: 95vw; height: auto; }
	.image70 { width: 95vw; height: auto; }
	.image80 { width: 95vw; height: auto; }
	.ftr_links { width: 40%; padding-bottom: 10px;
}