/*------------------
   TYPOGRAPHY STYLES
------------------*/
@import 'https://fonts.googleapis.com/css?family=Droid+Serif:400,400i,700,700i|Montserrat:400,700';

body {
    font-family: 'Droid Serif', serif;
}

h1, h2, h3, h4, h5 {
    font-family: 'Montserrat', sans-serif;
}

/*---------------
   GENERAL STYLES
---------------*/
.center {
    display: block;
    margin: 0px auto;
}
.no-padding {
    padding: 0rem;
}
ul {
    list-style-image: url(/_imgs/red-arrow.png);   
}

/*--------------
   HEADER STYLES
--------------*/
header {
    width: 100%;
    z-index: 2;
}
header.subpage {
    background-image: url(/_imgs/subpage-bg.jpg);
    background-position: center;
    background-size: cover;
}
nav {
    float: right;
    font-family: 'Montserrat', sans-serif;
}
nav #title-bar {
    position: relative;
}
nav #title-bar a#menu-btn {
    background-color: #C92636;
    color: #FFF;
    font-size: 36px;
    padding: 0rem 1.5rem;
    position: absolute;
    right: 5.5rem;
    top: 7rem;
}
nav #sidebar-wrapper {
    background-color: rgba(32, 29, 29, 0.87);
    margin: 7rem 12rem 0rem 0rem;
    padding: 5rem 2rem 2rem;
    position: absolute;
    right: 1rem;
    z-index: 3;
}
nav #sidebar-wrapper span {
    border-bottom: 4px solid #ED2437;
    color: #FFF;
    display: block;
    font-size: 30px;
    margin: 0px auto;
    text-align: center;
    text-transform: uppercase;
}
nav #sidebar-wrapper .sidebar-nav {
    list-style: none;
    padding: 2rem;
    width: 240px;
}
nav #sidebar-wrapper .sidebar-nav > li {
    padding: 0.5rem 0rem;
}
nav #sidebar-wrapper .sidebar-nav > li > a {
    color: #BEBEBE;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 2;
}
nav #sidebar-wrapper .sidebar-nav ul > li {
    list-style-image: url(/_imgs/red-arrow.png);   
}
nav #sidebar-wrapper .sidebar-nav ul > li > a {
    color: #8A8A8A;
    text-transform: uppercase;
}

/*----------------
   HOMEPAGE STYLES
----------------*/

/*
<div style="display:table;width:100%;height:100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="margin-left:auto;margin-right:auto;"></div>
  </div>
</div>
*/



#zkeHero {
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100vh;
	display:table;
	width: 100%;
}

#zkeHero .image-wrap {
	display:table-cell;
	vertical-align:middle;
}

#zkeHero .image-wrap img {
	display: block;
	margin-left:auto;
	margin-right:auto;
}

#zkeServices {
    background-color: #1E2126;
    color: #FFF;
    padding: 4rem 0rem;
}
#zkeServices .blue-bar {
    position: relative;
    width: 82%;
}
#zkeServices h2 {
    color: #FFF;
    padding: 0rem 0rem 4rem;
    text-transform: uppercase;
}
#zkeServices h2:after {
    background-color: #2F343A;
    content: '';
    height: 12px;
    margin: 0rem 0rem 0rem 2rem;
    position: absolute;
    top: 3rem;
    width: 100%;
}
#zkeServices p {
    margin: 0rem 0rem 1rem;
}
#zkeServices .service {
    background-color: #2F343A;
    color: #808183;
    margin: 0rem 0rem 1rem;
    padding: 1.25rem 0rem;
    text-align: center;
    transition: all 0.5s ease;
}
#zkeServices .href:hover .service,
#zkeServices .href:focus .service {
    background-color: #EE2E24;
    color: #FFF;
}
#zkeServices .href img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    transition: all 0.5s ease;
}
#zkeServices .href:hover img,
#zkeServices .href:focus img {
    filter: none;
}
#zkeAbout {
    color: #ADADAD;
    padding: 8rem 0rem;
}
#zkeAbout h2 {
    color: #2F343A;
    font-weight: 700;
    text-transform: uppercase;
}
#zkeAbout strong {
    color: #808183;
}

/*---------------
   SUBPAGE STYLES
---------------*/
main {
    color: #A7A7A7;
    padding: 8rem 0rem;
}
main h1, main .h1 {
    color: #2F343A;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    text-align: right;
    text-transform: uppercase;
}
main h2 {
    color: #2F343A;
    font-family: 'Droid Serif', serif;
    font-size: 20px;
    text-align: left;
}
main .grey-bar {
	display: none;	
}
main .sidebar p {
    text-align: right;
}
main .leftcol img {
    border-top: 18px solid #EE2E24;
}

.member-info h3 {
	display: inline-block;
	width: auto;
}


.member-info h3 small {
	word-wrap: break-word;
}


/*--------------
   HEADER STYLES
--------------*/

.required {
	color: red;
	font-weight: 300;
}

.form-control {
    height: 34px;
    padding: 6px 12px;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.btn.submit {
	background-color: #2E2E2E;
    border-radius: 0;
	color: #ffffff;
	font-family: 'Montserrat', sans-serif;
}

#errorMessage.alert {
    padding: 15px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}


#errorMessage.alert {
    color: red;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    text-align: center;
    font-weight: 400;
    margin-bottom: 0;
    padding: 0;
}

.g-recaptcha {
    position: relative;
    padding-bottom: 10rem;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.team-image.href:hover {
  background: linear-gradient( rgba(255, 0, 0, 0.45), rgba(255, 0, 0, 0.45) );
    z-index: 1000;
}

.team-image {
	width: 25rem;
	height: 30rem;
	background-size: cover;
}

.tinted-image {
  background: 
    /* top, transparent red, faked with gradient */ 
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* bottom, image */
    url(image.jpg);
}

.team-sub {
	border-bottom: 2px solid #999999;
	color: #C92636;
	font-weight: 700;
	margin-bottom: 2rem;
	margin-top: 4rem;
	padding-bottom: .5rem;
	text-transform: uppercase;
}

.job-title {
	color: #999999;
    font-size: 20px;
}

/*--------------
   FOOTER STYLES
--------------*/
footer {
    background-color: #2E2E2E;
    padding: 4rem 0rem 0rem;
}
footer h3 {
    color: #FFF;
    margin: 0.75rem 0rem 0rem;
    text-align: right;
    text-transform: uppercase;
}
footer a,
footer p {
    color: #999999;
    margin: 0rem;
}
footer input[type='text'] {
    background-color: #535353;
    border: none;
    border-radius: 0rem;
    color: #000;
    height: 45px;
}
footer button {
    background-color: #EE2E24;
    border: none;
    color: #FFF;
    font-size: 20px;
    height: 45px;
    padding: 0rem 1.25rem;
    transition: all 0.5s ease;
}
footer button:hover,
footer button:focus {
    color: #000;
}
footer p:first-of-type {
    margin: 1.25rem 0rem 0rem;
}
footer .info {
    padding: 2rem 0rem 4rem; 
}
footer .info .fa {
    padding: 0rem 1rem 0rem 3rem;
}
footer .info a {
    color: #999999;
}
footer .info a:hover,
footer .info a:focus {
    color: #EE2E24;
}
footer .copyright {
    background-color: #252525;
    padding: 3rem 0rem;
}
footer .copyright p {
    margin: 0rem;
}
footer .copyright .fa {
    border: 2px solid #666666;
    color: #666666;
    float: right;
    padding: 1rem 1.5rem;
}
footer .copyright img {
    margin: 5px auto 0rem;
}

/*--------------
   MEDIA QUERIES
--------------*/

@media (min-width: 768px) {
	
	main .grey-bar {
	    background-color: #2F343A;
	    display: inline-block;
	    height: 13px;
	    margin: 3rem 0rem 0rem;
	    width: 100%;
	}

}





/* Bootstrap Large screen */ 
@media only screen and (max-width: 1200px) {}

/* Bootstrap Medium screen */ 
@media only screen and (max-width: 992px) {}

/* Bootstrap Small Screen */ 
@media only screen and (max-width: 768px) {
    #zkeServices h2:after {
        top: 1rem;
    }
	nav #sidebar-wrapper {
	    margin: 10rem 1rem 0rem 0rem;
	    padding: 5rem 2rem 2rem;
	    right: 2rem;
	}
	nav #title-bar a#menu-btn {
	    right: 1.5rem;
        top: 5rem;
	}

	nav #sidebar-wrapper .sidebar-nav > li > a {
	    font-size: 14px;
	    line-height: 1;
	}

	#zkeHero {
	    height: 40vh;
	}

}

/* iPhone 6+ Landscape */ 
@media only screen and (max-width: 736px) {}

/* iPhone 6 Landscape */ 
@media only screen and (max-width: 667px) {}

/* iPhone 5 Landscape */ 
@media only screen and (max-width: 568px) {}

/* Bootstrap Extra Small screen && Phone 3 & 4 Landscape */ 
@media only screen and (max-width: 480px) {
    nav #title-bar a#menu-btn {
        right: 1rem;
        top: 1rem;
    }
    nav #sidebar-wrapper {
        margin: 6.1rem 0.5rem 0rem 0rem;
    }
    main .sidebar p {
        text-align: left;
    }
    footer h3 {
        text-align: center;
    }
    footer .info .fa {
        display: block;
        padding: 1rem 0rem 0rem;
    }
}

/* iPhone 6+ */ 
@media only screen and (max-width: 414px) {}

/* iPhone 6 */ 
@media only screen and (max-width: 375px) {}

/* iPhone 5, 4, & 3 */ 
@media only screen and (max-width: 320px){}