/*-----------------------------------
	KIMBERLY COOK DESIGN STYLES
-----------------------------------*/

body {
  font-family: 'Karla', sans-serif;
  color: #777777;
  height: 100%;
  font-size: 18px;
  line-height: 1.6;
}

body.grey {
    background-color: #fff;
}    

p {
    font-weight: 200;
    margin-bottom: 20px;
}

img {max-width: 100%;}

hr {
	border-top: 1px solid #ddd;
	margin: 30px 0;
}

/*-----------------------------------
	TEXT
-----------------------------------*/

h1, h2, h3, h4 {font-family: 'Montserrat', sans-serif; color: #222222; font-weight: 600;}

h1 {font-size: 48px;}
h2 {font-size: 28px;}
h3 {font-size: 28px;}
h4 {font-size: 18px; text-transform: uppercase; margin-top: 80px;}
h5 {font-size: 16px;}
h6 {font-size: 14px;}

h1.title {text-align: center;}

hr.title {
	border-top:3px solid #999999;
	width: 100px;
	margin: auto;
	margin-top: 35px;
	margin-bottom: 40px;
}

p.lead {
	font-size: 20px;
	text-align: center;
	max-width: 500px;
	margin: auto;
    margin-top: 20px;
}

p.callout {
    font-size: 24px;
    font-weight: 700;
    border-left: 4px solid #5fc3c7;
    padding-left: 20px;
    margin:  60px 0 20px 0;
    color: #5fc3c7;
}

p.caption-heading {
    font-size: 14px;
    font-weight: 700;
    margin-top: 15px;
    margin-bottom: 10px;
    color: #222;
    text-align: left;
}

p.caption-body {
    font-size: 14px;
    text-align: left;
}

li {
    margin-bottom: 15px;
}

p.fontsize14 {
    font-size: 14px;
}

/*-----------------------------------
	GENERAL
-----------------------------------*/

a, a:visited {
	color: #999999;
	border-bottom: 1px dotted #999999;
    transition:0.2s ease all;
}

a:hover, a:focus, a:active {
	color:#9ddcdf;
	border-bottom: 1px dotted #9ddcdf;
	text-decoration: none;
}

.btn-primary, .btn-primary:visited  {
    color: #9ddcdf;
    border: 3px solid #9ddcdf;
    border-radius: 0px;
    background: #fff;
    text-transform: uppercase;
    font-size: 14px;
    transition:0.2s ease all;
    padding: 15px 25px;
    font-weight: 700;
    /*cursor: pointer;*/
}

.btn-primary:hover , .btn-primary.active, .btn-primary:focus, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background: #9ddcdf;
    border: 3px solid #9ddcdf;
    /*cursor: pointer;*/
}

.btn-primary.btn-contact, .btn-primary.btn-contact:visited  {
    color: #9ddcdf;
    border: 3px solid #9ddcdf;
    border-radius: 0px;
    background: transparent;
    text-transform: uppercase;
    font-size: 14px;
    transition:0.2s ease all;
    padding: 15px 25px;
    font-weight: 700;
    /*cursor: pointer;*/
}

.btn-primary.btn-contact:hover , .btn-primary.btn-contact.active, .btn-primary.btn-contact:focus, .open>.dropdown-toggle.btn-primary.btn-contact {
    color: #fff;
    background: #9ddcdf;
    border: 3px solid #9ddcdf;
    /*cursor: pointer;*/
}

.btn-primary-reversed, .btn-primary-reversed:visited  {
    color: #222;
    border: 3px solid #222;
    border-radius: 0px;
    background: transparent;
    text-transform: uppercase;
    font-size: 14px;
    transition:0.2s ease all;
    padding: 15px 25px;
    font-weight: 700;
    /*cursor: pointer;*/
}

.btn-primary-reversed:hover , .btn-primary-reversed.active, .btn-primary-reversed:focus, .open>.dropdown-toggle.btn-primary-reversed {
    color: #fff;
    background: #222;
    border: 3px solid #222;
    /*cursor: pointer;*/
}

.white { color: #fff;}
.teal { color: #9ddcdf;}

.padding0 {padding:0 !important;}
.paddingtop20 {padding-top: 20px !important;}
.paddingtop130 {padding-top: 130px !important;}

.margintop0 {margin-top: 0px !important;}
.margintop10 {margin-top: 10px;}
.margintop20 {margin-top: 20px;}
.margintop30 {margin-top: 30px;}
.margintop35 {margin-top: 35px;}
.margintop50 {margin-top: 50px !important;}
.margintop70 {margin-top: 70px;}
.margintop100 {margin-top: 100px;}

.marginbottom0 {margin-bottom: 0px;}
.marginbottom10 {margin-bottom: 10px;}
.marginbottom20 {margin-bottom: 20px;}
.marginbottom30 {margin-bottom: 30px;}
.marginbottom35 {margin-bottom: 35px;}
.marginbottom50 {margin-bottom: 50px;}
.marginbottom70 {margin-bottom: 70px;}
.marginbottom100 {margin-bottom: 100px;}

.marginright10 {margin-right: 10px;}

.display-none{display:none;}
.width100 {width:100%;}
.center {text-align: center}
.left {text-align: left}
p.left {text-align: left}
.right {text-align: right}
.pointer {cursor: pointer;}
.clear {clear: both;}

.maxwidth440 {max-width: 440px; margin: auto;}
.maxwidth760 {
    width: 760px;
    margin: auto !important;
    max-width: 100%;
}

.text-center-xs {text-align: center;}
.marginbottom40-xs {margin-bottom: 40px}
.marginbottom20-xs {margin-bottom: 20px}

.text-center-sm {text-align: center;}
.marginbottom40-sm {margin-bottom: 40px}
.marginbottom20-sm {margin-bottom: 20px}

.heightauto {height: auto !important;}

@media (min-width: 768px) {
	.marginbottom20-xs {margin-bottom: 0px}
	.marginbottom40-xs {margin-bottom: 0px}
    .text-center-xs {text-align: left;}
}

@media (min-width: 992px) {
	.marginbottom20-sm {margin-bottom: 0px}
	.marginbottom40-sm {margin-bottom: 0px}
    .text-center-sm {text-align: left;}
}

/*-----------------------------------
    SECTIONS
-----------------------------------*/

section {
    min-height: 600px;
	padding-top: 70px;
	padding-bottom: 40px;
}

section.home {
    height: 100vh;
}

section.folioabout {
    min-height: 100vh !important;
}

@media (min-width: 768px) and (max-height: 1000px)  {
    section.flex {
        min-height: 100vh;
        padding-top: 80px;
        padding-bottom: 80px;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    section.contact {
        margin-bottom: -61px;
    }
}

@media (min-height: 1001px)  {
    section.home {
        height: 800px;
    }
}

/*------------- Tiles -------------*/
section.teal {
    background-position: center;
    background-repeat: repeat;
    color: #222;
}

section.teal {
    background-color: #9ddcdf;
    background-image: url(images/bg-hex-solid-tile-transparent.jpg);
}

section.grey {
    background-color: #f5f4f4;
}

section.contact.aqua {
    background-color: #e0f2f3;
}

section.color {
    /*background-image: url(images/bg-hex-solid-tile-transparent.jpg);*/
}

section.white-tile {
}

section.teal h1.title, section.color h1.title {
    color: #222;
}

/*-----------------------------------
	NAVBAR
-----------------------------------*/

.navbar {
	margin-bottom: 0px;
    background: #fff;
    border-radius: 0;
    height: 60px;
}

.navbar a {
	border:none;
}

.navbar-brand {
    height: 53px;
    margin-top: 2px;
    padding: 12px 15px;
}

.main-nav{
	background: #fff;
	z-index: 10;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1) !important;
    border:none;
    transition:0.2s ease all;
    border-radius: 0;
    position: absolute;
    width: 100%;
    height:60px;
}

.navbar-header {
    min-height: 59px;
}

.navbar-toggle {
	margin-top: 11px;
	background-color: #d3d7d9;
	border: none;
}

.navbar .navbar-toggle:focus, .navbar .navbar-toggle:hover {
    background-color: #9ddcdf;
}

.navbar-toggle .icon-bar {
    background-color: #f2f2f2;
}

.navbar .navbar-collapse, .navbar .navbar-form {
	border-top: 1px solid #ddd;
}

.navbar .navbar-nav>li>a {
    color: #a8afb3;
    border:none;
    font-family: 'Montserrat', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:hover {
    color: #999999;
    background-color: transparent;
    border:none;
}

ul.nav.navbar-nav.navbar-right {
    margin-top: 4px;
    border:none;
}

.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.active>a:focus, .navbar .navbar-nav>.active>a:hover {
    color: #9ddcdf;
    background-color: transparent;
    border:none;
}

.sticky-show {
	position: fixed;
	top: 0;
	width: 100%;
}

@media (min-width: 768px) {
    .navbar .navbar-collapse, .navbar .navbar-form {
        border: none
    }
}

.navbar-brand img {
    max-width: 180px;
}

/*-----------------------------------
	BANNER
-----------------------------------*/

.logo-hex {
    display: block;
    color: white;
    width: 300px;
    height: 300px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -150px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

.logo-hex:hover {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

.logo {
    width: 200px;
    height: 33px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -16px;
    z-index: 100;
}

.spacer {
    height: 380px;
}

.scroll {
	text-align: center;
	position: absolute;
	bottom:30px;
	left:50%;
	margin-left:-72px;
    /*cursor: pointer;*/
}

.scrolltext a {
	color: #FFF;
    margin-bottom: 0px;
    font-size: 13px;
    font-family: 'Montserrat', sans serif;
    /*cursor: pointer;*/
}

.scrolltext {
    margin-bottom: 0px;
    /*cursor: pointer;*/
}

.scroll a {
    opacity: 0.8;
    border:none;
}

.scroll a:hover, .scroll a:focus, .scroll a:active {
	opacity: 1;
    text-decoration: none;
    border:none;
}

@media (min-width: 400px) {
    .logo-hex {
        width: 390px;
        height: 390px;
        margin-left: -185px;
        margin-top: -185px;
    }
    .logo {
        width: 300px;
        height: 49px;
        margin-left: -138px;
        margin-top: -17px;
    }

}

@media (min-width: 768px) and (min-height: 1001px)  {
    .logo-hex {
        top: 205px;
        left: 50%;
        margin-left: -185px;
        margin-top: 0;
    }
    .logo {
        top: 370px;
        left: 50%;
        margin-left: -138px;
        margin-top: 0;
    }

    .spacer {
        height: 350px;
    }

    .scroll {
        position: inherit;
        margin: auto;
        margin-top: 280px;
    }    
}

/*-----------------------------------
	ABOUT
-----------------------------------*/

.about-photo {
	width:190px;
}

/*-----------------------------------
	SERVICES
-----------------------------------*/

.service-cont {
	height: 110px;
    width: 130px;
    margin: auto;
    position: relative;
    margin-bottom: 30px;
    margin-top: 10px;
}

.services h4 {
    color: #fff;
}

/*-----------------------------------
	CONTACT
-----------------------------------*/

.contactform {
    max-width: 440px;
    margin: auto;
}

input {
	border: 2px solid #FFF;
	background-color: #FFF;
	display: block;
	width:100%;
	height:45px;
	margin-top: 10px;
	margin-bottom:10px;
	padding:5px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
    color: #999999;
}

input:focus {
	border: 2px solid #5ac4be;
	outline:none;
}

textarea {
	border: 2px solid #FFF;
	background-color: #FFF;
	display: block;
	width:100%;
	min-height:150px;
	margin-top: 10px;
	margin-bottom:10px;
	padding:5px;
	text-align: left;
	margin-right: auto;
	margin-left: auto;
    color: #999999;
}

textarea:focus {
	border: 2px solid #5ac4be;
	outline:none;
}

input[type=button], input[type=reset], input[type=submit]  {
    color: #9ddcdf;
    border: 3px solid #9ddcdf;
    border-radius: 0px;
    background: transparent;
    text-transform: uppercase;
    font-size: 14px;
    transition:0.2s ease all;
    padding: 15px 25px;
    font-weight: 700;
    /*cursor: pointer;*/
    height: auto;
    width: 100%;
    margin: auto;
}

input[type=button]:hover, input[type=reset]:hover, input[type=submit]:hover,
input[type=button]:focus, input[type=reset]:focus, input[type=submit]:focus {
    color: #fff;
    background: #9ddcdf;
    border: 3px solid #9ddcdf;
    /*cursor: pointer;*/
}

/*-----------------------------------
	FOOTER
-----------------------------------*/

footer {
    background-color: #e5e6e7;
    padding-top: 20px;
    padding-bottom: 10px;
    color: #a5a6a7;
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

/*-----------------------------------
-------------------------------------
    PROJECTS
-------------------------------------
-----------------------------------*/


/*-----------------------------------
    SECTIONS
-----------------------------------*/

body.project section {
    min-height: 100px;
}

/*------------- Colors -------------*/
section.salmon {
    background-color: #efb7ac;
}

section.pink {
    background-color: #f3adcf;
}

section.aqua {
    background-color: #f4f4f4;
}

section.blue {
    background-color: #8dd7f3;
}

section.yellow {
    background-color: #fadb89;
}

section.green {
    background-color: #bcea9e;
}

section.purple {
    background-color: #a6c1e5;
}

/*-----------------------------------
    NAVBAR
-----------------------------------*/
body.project .navbar {
    background: #fff;
}

body.project .sticky-show {
    position: absolute;
    top: auto;
    width: 100%;
}

body.project .main-nav{
    background: #fff;
    z-index: 10;
    box-shadow: none !important;
}

body.project .navbar-toggle {
    margin-top: 10px;
    background-color: transparent;
    border: 2px solid #fff;
}

body.project .navbar .navbar-toggle:focus, body.project .navbar .navbar-toggle:hover {
    background-color: #999999;
    border: 2px solid #999999;
}

body.project .navbar-toggle .icon-bar {
    background-color: rgba(0,0,0,0.3);
}

body.project .navbar .navbar-collapse, body.project .navbar .navbar-form {
    border-top: 1px solid rgba(255,255,255,0.5);
}

body.project .navbar .navbar-nav>li>a {
    color: #222;
}

body.project .navbar .navbar-nav>li>a:focus, body.project .navbar .navbar-nav>li>a:hover {
    color: #999999;
}

body.project .navbar .navbar-nav>.active>a, body.project .navbar .navbar-nav>.active>a:focus, body.project .navbar .navbar-nav>.active>a:hover {
    color: #9ddcdf;
    background-color: transparent;
    border:none;
}

@media (min-width: 768px) {
    body.project .navbar .navbar-collapse, body.project .navbar .navbar-form {
        border: none
    }

    body.project .navbar {
        background: transparent;
    }

    body.project .main-nav{
        background: transparent;
        z-index: 10;
        box-shadow: none !important;
    }
}


/*-----------------------------------
    BANNER
-----------------------------------*/

body.project section.banner {
    height:450px;
    padding-top: 130px;
}

body.project section.banner h1.title {
    font-size: 48px;
}

/*-----------------------------------
    FEATURE
-----------------------------------*/

section.feature {
    padding: 0;
    text-align: center;
}


/*-----------------------------------
    IMAGES
-----------------------------------*/

.project-image {
    width: 100%;
    background-color: #f4f4f4;
    padding:50px 60px;
    text-align: center;
    margin: 30px 0px;
}

.project-image.padding0 {
    padding: 0;
}

.project-image.pink {
    background-color: #fff0f7;
}

.project-image.salmon {
    background-color: #f9e1dd;
}


.project-image.blue {
    background-color: #e3f6fd;
}

.project-image.aqua {
    background-color: #fff;
    padding: 0px;
}

.project-image.yellow {
    background-color: #fff8e4;
}

.project-image.purple {
    background-color: #e3eefd;
}

.project-quotes {
    width: 100%;
    background-color: #e0f2f3;
    padding:50px 20px;
    text-align: left;
    margin: 30px 0px;
}

/*-----------------------------------
    BANNER
-----------------------------------*/

body.project section.next {
    padding: 70px 0px;
    text-align: center;
}

body.project section.next h1.title {
    font-size: 48px;
    margin-bottom: 40px;
}

/*-----------------------------------
    CONTAINER
-----------------------------------*/
.text-container {
    max-width: 720px !important;
}

/*-----------------------------------
    CONTAINER
-----------------------------------*/
.legend-green, .legend-yellow, .legend-orange, .legend-red {
    margin-right: 10px;
}

.legend-green {
    color: #8ec63f;
}

.legend-yellow {
    color: #ffcb08;
}

.legend-orange {
    color: #ea7d1e;
}

.legend-red {
    color: #b4133a;
}

/*-----------------------------------
    CONTAINER
-----------------------------------*/

.project-thumb {
    max-width: 760px;
    margin: 60px auto;
    background: #f5f6f7;
    min-height: 200px;
    padding: 40px;
    text-align: center;
    /*box-shadow: 0px 4px 10px rgb(0 0 0 / 8%);*/
}

.feature .project-thumb {
    margin-top: -100px;
}