@charset "UTF-8";

/*
Theme Name: Key Investment
Theme URI: https://www.duck-dive.com
Author: Chris Ongarello
Author URI: https://www.duck-dive.com
Description: Genial
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keyinvstment
Tags: genial

*/

/*font-family: 'Montserrat', sans-serif;
font-family: 'PT Sans', sans-serif;*/

/* 
Key Investment Blau
#005A9C 

Key Investment Complimentary
#9C3700

Pastel colors:
blue: #d6e0e9
lila: #dbd6dd
green: #dfe4dd
yellow: #ece7d4
red: #e1d0c8
grey: #D7D7CE
*/


/* Styles */
*{
	padding:0; margin:0;
}
/*  html,body {
  height:100%;
  margin:0;
}*/

html, body {
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    font-size: 18px;
}

h1 {
	font-family: 'Merriweather', serif;
	font-weight:500;
	font-size:42px;
}

h2 {
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-size:30px;
	margin-bottom:20px;
}

h3 {
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-size:23px;
	color:#666;
	margin-bottom:15px;
}

a {
	text-decoration: none;
	color: #666;
}

a:hover {
	text-decoration: none;
	color: #005A9C;
}	

ul {
	padding-left: 25px;
}

p {
	font-family: 'Lato', sans-serif;
	font-weight: 300;
	font-size: 18px;
}

hr {
	margin-top:50px;
	margin-bottom:50px;
	border-top: 15px solid #005a9c;
}

.hero {
	height:650px;
  	min-height:100%;/*for mozilla*/	
	display:block;
	width:100%;
	position:relative;
	overflow:hidden;
}

.hero img{
	height:650px;
}

.hero-caption{
	width:100%;
	height:100%;
	position: relative;
	padding-left: 0px;
	padding-right: 0px;
}

.caption-holder{
	position: absolute;
	bottom: 10px;
	right: 33px;
}

.caption-holder p {
	margin-bottom: 1px;
}

.hero-caption h1 {
	color:#FFF;
	font-size:48px;
	margin-bottom:5px;
	margin-top:5px;
}

.hero-caption p {
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	color:#FFF;
	font-size:24px;
}

.nav-holder {
	width: auto;
	height: 75px;
	position: fixed;
	right: 0;
	top: 20px;
	z-index: 2;
}

.non-mobile-nav {
	margin-top: 24px;
	font-size: 20px;
	padding: 0 20px;
}

.non-mobile-nav ul {
	list-style-type: none;
	margin-bottom: 0;
}

.non-mobile-nav ul:after {
    content: '';
    display: block;
    clear: both;
}

.non-mobile-nav li {
	float: left;
	margin: 0 15px;
	vertical-align: middle;
	display: block;
}

.non-mobile-nav li a {
	color: #fff;
}

.non-mobile-nav li a:hover {
	color: #bbb;
}

.nav-shadow {	
	position: fixed;
	height:140px;
	width: 100%;
	background: -moz-linear-gradient(top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(0,0,0,0.95) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}

@media only screen and (max-width : 992px) {
	/* mobile nav */
	.non-mobile-nav {
		display: none;
	}

	.nav-holder {
		background:#dedacd;
		width:75px;
		height:75px;
		position:fixed;
		right:0px;
		top:20px;
		z-index:2;
	}
	
	.open-nav {
		position: fixed;
		top: 36px;
		right: 15px;
		height:44px;
		width:44px;
		background:url('images/open-icon-black.png') no-repeat;
		z-index:3;
	}
	
	.open-nav:hover, .overlay .close-nav:hover {
		cursor:pointer;
	}

	.overlay .close-nav {
		position: absolute;
		top: 36px;
		right: 15px;
		height:44px;
		width:44px;
		background:url('images/close-icon.png') no-repeat;
	}
	
	nav.language {
		position: fixed;
		top: 29px;
		right:85px;
		z-index:3;
	}
	
	nav.language li {
		display:block;
		line-height:30px;
		list-style:none;
		float:left;
		margin-left:5px;
		text-transform:uppercase;
		font-family: 'Lato', sans-serif;
		font-size:18px;
		font-weight:400;
		color:#FFF;
	}
	
	nav.language li a {
		text-decoration:none;
		color:#FFF;
		font-family: 'Lato', sans-serif;
		font-weight:300;
	}
	
	nav.language li a:hover {
		color:#999;
	}
	
	nav.language li:after { 
		content:" | ";
		color:#FFF;
	}
	
	nav.language li:last-child:after { 
		content:"";
	}
	
	nav ul {
		padding:0px;
		margin:0px;
	}
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .close-nav {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}

.logo-small{
	position:fixed;
  	left:0px;
	top:20px;
	width:75px;
	height:75px;
	background:url('images/keyinvestment-logo-small.png') no-repeat;
	z-index:2;
}

.logo-big{
  width: 280px;
  height: 280px;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 4;
    top: 0;
    right: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay-content {
    position: relative;
    top: 25%;
    /*width: 100%;*/
    text-align: center;
    margin-top: 30px;
}
.overlay a {
    padding: 8px;
    text-decoration: none;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
    font-size: 36px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
}

.page-quote{
	background: #dedacd;
	color: #666;
	padding-top: 25px;
	padding-bottom: 20px;
	margin-bottom: 50px;
	height: 100px;
}

.page-quote .container {
	vertical-align: middle;
	height: 100%;
	display: flex;
  	flex-direction: column;
  	justify-content: center;
}

.page-content{
	padding-top:0px;
	padding-bottom:50px;
}
.case-intro{
	padding-top:50px;
	padding-bottom:50px;
}
.case-intro{
	text-align:center;
}

.highlight-container {
	margin-bottom: 30px;
}
.service, .highlight{
	padding:5px;
}
.service-inner, .highlight-inner{
	padding:10px;
	position:relative;
	height: 100%;
}
span.service-title, span.highlight-title{
	font-family: 'Merriweather', serif;
	font-weight:400;
	font-size:16px;
	display: block;
	margin-bottom:17px;
	margin-top:2px;
	color: #005A9C;
}

.more-link {
	float: right;
	position: relative;
	padding-right: 17px;
}

.more-link a {
	font-size: 15px;
    display: inline-block;
}

.more-link a::after {
    font-family: 'Glyphicons Halflings';
    content: "\e092";
	position: absolute;
	top: 2px;
	right: 0px;
  	font-size: 12px;
}

span.service-description{
	font-family: 'Lato', sans-serif;
	font-weight:300;
	font-size:16px;
	margin-bottom:7px;
}

.title-div{
	position:relative;
	height:170px;
}
.title-div h1{
	position:absolute;
	margin:0px;
	padding:0px;
	bottom:-14px;
	font-weight:900;
	font-size:70px;
}
.page-hero{
	height:400px;
	}

.content{
	background-color:#2F2F2F;
	color: #ffffff;
	padding: 50px 0;
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:300;
	z-index:1;
}

.btn-lg{
	border-radius:0px;
}
.btn-primary {
	margin-top:15px;
    color:#fff;
    background-color:#000;
	background:#000;
    border:2px solid #FFF;
}
.btn-primary:hover{
    background:#000;
	border:2px solid #CCC;
	color:#CCC;
}
input.wpcf7-text, textarea.wpcf7-textarea{
	width:98%;
}
.wpcf7-submit, .btn {
	margin-top:15px;
 	background:#005A9C;
 	color:#FFF;
	border:0px;
	border-radius:3px;
	padding:5px 20px 5px 20px;
	text-shadow:none;
	font-size:18px;
}
 
.btn:hover {
 	background: #003c66;
}

.heading h1{
	font-family: 'Source Sans Pro', sans-serif;
	font-weight:200;
	font-size:58px;
}

.hover figure img {
	opacity: 1;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.hover figure:hover img {
	opacity: .5;
}
.inline{ 
float:left;
margin-right:5px; 
margin-bottom:5px;
}
span.copyright{
	font-size:14px;
}

footer {
	background: #4d4c4d;
	padding-top: 40px;
	padding-bottom: 20px;
}

footer p a {
	color:#FFF;
	text-decoration:none;
}

footer p a:hover {
	color:#FFF;
	text-decoration:underline;
}

footer .social-box {
	text-align: right;
}

footer a.social {
	display: inline-block;
	margin-left: 5px;
}

footer a.social img {
	max-width: 50px;
	max-height: 50px;
}

footer h1 {
	color:#FFF;
	font-size:24px;
	margin-bottom:5px;
	margin-top: 0;
} 

footer p {
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
	color:#FFF;
	font-size:18px;
}



@media only screen and (max-width : 1200px) {
	.hero-caption{
		padding-left:40px;
		padding-right:40px;
	}
}
@media only screen and (max-width : 992px) {
	.hero{
    	height:500px;
	}
	.hero-caption{
		padding-left:40px;
		padding-right:40px;
	}
	.hero-caption h1{
		font-size:40px;
	}
	.hero-caption p{
		font-size:20px;
	}
}
@media only screen and (max-width : 768px) {
	.hero{
    	height:500px;
	}
	.hero-caption{
		padding-left:40px;
		padding-right:40px;
	}
	.hero-caption h1{
		font-size:40px;
	}
	.hero-caption p{
		font-size:20px;
	}
}
@media handheld, only screen and (max-width: 767px) {
	.hero{
    	height:400px;
	}
	.hero-caption{
		padding-left:40px;
		padding-right:40px;
	}
	.hero-caption h1{
		font-size:40px;
	}
	.hero-caption p{
		font-size:20px;
	}
}
@media only screen and (max-width : 480px) {	
	.hero{
    	height:300px;
	}
	.hero-caption{
		padding-left:40px;
		padding-right:40px;
	}
	.hero-caption h1{
		font-size:35px;
	}
	.hero-caption p{
		font-size:18px;
	}
}
@media only screen and (max-width : 360px) {
	.hero-caption h1{
		font-size:30px;
	}
	.hero-caption p{
		font-size:15px;
	}
	.hero{
    	height:200px;
	}
}


/* ========================================== */
/* ! Provide higher res assets for iPhone 4   */
/* ========================================== */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/*	.logo {
		background: url(logo2x.jpg) no-repeat;
		background-size: 212px 303px;
	}*/

}


.teaser-box-container {
  	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	grid-auto-rows: 1fr;
  	grid-gap: 10px;
  	padding-left: 10px;
  	padding-right: 10px;
}

@media only screen and (max-width : 1024px) {
	.teaser-box-container {
		grid-template-columns: 1fr;
		grid-auto-rows: auto;
	}
}

.additional-services .teaser-box:nth-child(2) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(1) .teaser-box-inner {
	background-color: #d6e0e9;
}
.additional-services .teaser-box:nth-child(3) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(2) .teaser-box-inner {
	background-color: #dbd6dd;
}
.additional-services .teaser-box:nth-child(4) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(3) .teaser-box-inner {
	background-color: #dfe4dd;
}
.additional-services .teaser-box:nth-child(5) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(4) .teaser-box-inner {
	background-color: #ece7d4;
}
.additional-services .teaser-box:nth-child(6) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(5) .teaser-box-inner {
	background-color: #e1d0c8;
}
.additional-services .teaser-box:nth-child(7) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(6) .teaser-box-inner {
	background-color: #D7D7CE;
}
.additional-services .teaser-box:nth-child(8) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(7) .teaser-box-inner {
	background-color: #dbd6dd;
}
.additional-services .teaser-box:nth-child(9) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(8) .teaser-box-inner {
	background-color: #dfe4dd;
}
.additional-services .teaser-box:nth-child(10) .teaser-box-inner,
.teaser-box-container .teaser-box:nth-child(9) .teaser-box-inner {
	background-color: #ece7d4;
}

.teaser-box {
  box-sizing: border-box;
}

.teaser-box a {
	color: inherit;
}

.teaser-box a:hover {
	text-decoration: none;
}

.teaser-box-inner {
	position: relative;
}

.teaser-box-inner span.service-description {
	margin-bottom: 2px;
	display: block;
}

.teaser-box-inner img.link-icon {
	position: absolute;
	bottom: 10px;
	right: 10px;
}

.teaser-box a:hover > .teaser-box-inner {
    outline: 1px solid #005A9C;
}

.additional-services {
	margin-left: 0;
	margin-right: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
  	grid-template-rows: 20px 1fr 1fr;
  	grid-gap: 5px;
  	padding-left: 0px;
  	padding-right: 0px;
}

.additional-services p {
	grid-column-start: span 4;
	height: 20px;
}

.additional-services p strong {
	font-weight: 300;
}

.additional-services .teaser-box .teaser-box-inner {
	padding-top: 6px;
	padding-bottom: 8px;
	padding-left: 15px;
	padding-right: 15px;
	height: 37px;
	max-height: 100%;
	overflow: hidden;
}

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

	.page-quote {
		height: auto;
	}

	.additional-services .teaser-box {
		padding-bottom: 10px;
	}
	
	.additional-services .teaser-box .teaser-box-inner {
		height: 60px;
	}
}

@media only screen and (max-width : 770px) {
  	  	
  	.additional-services {
		grid-template-columns: 1fr 1fr;
	  	grid-template-rows: 20px 1fr 1fr 1fr 1fr;
  	}
 
  	.additional-services p {
		grid-column-start: span 2;
	}
  	
	.additional-services .teaser-box .teaser-box-inner {
		height: 75px;
	}
}

.additional-services .teaser-box .teaser-box-inner span.service-title, 
.additional-services .teaser-box .teaser-box-inner span.highlight-title {
	font-size: 14px;
}

.additional-services .teaser-box {
	margin-top: 10px;
	margin-bottom: 5px;
}

.additional-services p {
	display: block;
	width: 100%;
	margin-bottom: 2px;
}

.service-small {
	padding: 0px;
	margin-right: 15px; 
}

.service-small .service-inner {
	padding: 0;
}

.hero-caption p {
	font-size: 35px;
}

.about-img {
	margin-bottom: 10px;
}

body.postid-22 #service22 {
	display: none;
}

body.postid-23 #service23 {
	display: none;
}

body.postid-24 #service24 {
	display: none;
}

body.postid-25 #service25 {
	display: none;
}

body.postid-26 #service26 {
	display: none;
}

body.postid-27 #service27 {
	display: none;
}

body.postid-28 #service28 {
	display: none;
}

body.postid-29 #service29 {
	display: none;
}

body.postid-30 #service30 {
	display: none;
}