/*Custom css by Kim Embry*/


h1 h2 h3 h4 h5 h6 {
    font-family: brother-1816, sans-serif;
	font-style: normal;
}

p {
font-family: antique-olive, sans-serif;
font-style: normal;
font-weight: 300;
}


.navbar-brand
    {
        position: absolute;
        left: 50%;
        top: 10%;
        transform: translateX(-50%);
}

nav li a p {
	color: #b0b3b2;
	letter-spacing: .125rem;
	font-size: 13px;
}


nav li a p {
    padding: 0;
    margin: 0;
}

nav li a p:hover {
    border-bottom: solid 2px;
    border-bottom-color: #53575a;
    color: #53575a;
}

.underline{
    border-bottom: solid 2px;
    border-bottom-color: #53575a;
    color: #53575a;
}


.heroimage{
	background-image: url("../img/clouds.jpg");
	color: #53575a;
	background-size: cover;

}

.border{
    margin-bottom: 30px;
    width: 100%;
    position: relative;

}

.link {
    color:#f04b5d;
    font-family: proxima-soft, sans-serif;
    font-style: normal;
    font-weight: 700;
}

.link:hover {
    color:#f04b5d;
    text-decoration: underline;
}

.round {
    font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 200;
    color: white;
    background-color: #53575a;
    display: inline-block;
    width: 150px;
    height: 150px;
    margin: 6px;
    line-height: 150px; 
    transition: .25s ease;

}



.headlinebold {
    font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 400;
    line-height: .95em;
  }
  
.herotext{
    font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 200;
    font-size:.875em;
	font-weight: 200;
    padding-bottom: 1em;

}

.headline {
    font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 200;
    font-size: 1.5em;
	font-weight: 300;
    border-bottom: .5px solid;
    color: #a5bcb1;
    border-bottom-color: #a5bcb1;
    padding-bottom: .5em;

}


.bg-grey {
	background-color: #53575a;
	color: white;
	-webkit-clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
	 clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
	 width: 100%;

	
}

.bg-grey-top {
    background-color: #53575a;
	color: white;
	-webkit-clip-path: polygon(0 90%, 0 0, 100% 0, 100% 90%, 50% 100%);
	 clip-path: polygon(0 90%, 0 0, 100% 0, 100% 90%, 50% 100%);
	 width: 100%;
}
.sectionheader {
	font-family: brother-1816, sans-serif;
	font-style: normal;
    font-weight: 300; 
	color: white;
    width:100%;
    text-align:center;
    border-bottom: .5px solid white;
    line-height:0.1em; 
    margin:2em 0 1em;
} 

.sectionheader > span { 
     background:#53575a;
     padding:1em;

}

.sectionheader-dark {
    font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 300; 
	color: #53575a;
    width:100%;
    text-align:center;
    border-bottom: .5px solid;
    border-bottom-color: #53575a;
    line-height:0.1em; 
 margin:2em 0 2em;
}
 h5.sectionheader-dark > span { 
     background:white;
     padding:1em;

}
	
.subhead {
    font-size: 1em;
    font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 400;
    color: #a5bcb1;
    padding-bottom: .5em;
}

.sub-baby {
    font-family: roboto, sans-serif;
    font-style: normal;
    font-weight: 500;
    color: #336768;
    font-size: 1.25em;

}

.bodytext {
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 200;
    font-size: 16px;
	color: white;
    line-height: 1.6;
}

.bodytext-dark {
	font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 200;
	color: #53575a;
    font-size: 16px;
    line-height: 1.6;
    padding-top: .875em;
}

.smtext {
	font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
    color: #b0b3b2;
}

.text {
	font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 200;
	font-size: 16px;
    color: #53575a;
}

.text-bold {
	font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
    color: #53575a;
}

.text-light {
    color: white;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 16px;
}

.text-cat {
    color: white;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 14px;
    margin-top: 1em;
}

.text-bg-g {
    background-color:#53575a;
    display: inline;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
    color: white;
    padding:.25em;
}

.text-bg-b {
    background-color:#66bcb0;
    display: inline;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
    color: white;
        padding:.25em;

}

.text-bg-y {
    background-color:#f3c300;
    display: inline;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
    color: white;
        padding:.25em;

}

.text-bg-p {
    background-color:#f04b5d;
    display: inline;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
    color: white;
    padding:.25em;

}

.text-inline {
    display: inline;
    font-family: antique-olive, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
    color: #53575a;
    padding-left: .5em;
}

.email-link {
    text-decoration: none;
}
.email-link:hover {
    text-decoration: none;
    opacity: .75;
}

.button:focus {
  outline: none;
}

.button:visited {
  outline: none;
}

.happy-text {
    font-family: fatfrank, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    color: #f4b631;
}


.b {
    color:#66bcb0;
}

.gr {
    color: #a3cf60;
}

.p {
    color:#f04b5d;
}

.lp {
    color:#f56571;
}

.lg {
   color:#24b288;
}

.lb {
    color:#546a82;
}

.gh-text {
    font-family: proxima-soft, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
}




.focus {
    width: 60%;
    height: auto;
}



.footer {
 	background-color: #24272a;
 	color: #b0b3b2;
	-webkit-clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
	 clip-path: polygon(50% 10%, 100% 0, 100% 100%, 0 100%, 0 0);
	 width: 100%;
 }
 
 
.fa {
    padding: 20px;
    font-size: 30px;
    width: 50px;
    text-align: center;
    text-decoration: none;
    color: #b0b3b2;
}

.fa:hover {
    opacity: 0.7;
    color: #b0b3b2;
    text-decoration: none;


}

.portrait {
    width: 100%;
    height: auto;
    float: left;
    display: inline;
}

/*button style inspired by: https://www.w3schools.com/css/tryit.asp
filename=trycss_buttons_animate1*/

.button {
  display: inline-block;
  border-radius: 20px;
  background-color: #a5bcb1;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 13px;
  padding: 5px 10px 5px 10px;
  width: auto;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
    font-family: antique-olive, sans-serif;
    font-style: normal;
    font-weight: 300;
    color: white;
  transition: .5s ease;
    opacity: 1;

}

.button:hover {
    opacity: .75;
}


.case-study {
	border: 1px #53575a;
	width: 100%;
	height: 100%;
    position: relative;
    transition: .25s ease;

}

.case-study:hover {
    opacity: .5;
}
.image:hover {
      opacity: 1;
}

/* fade in overlay inspiration: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade*/

.lable {
  font-family: brother-1816, sans-serif;
	font-style: normal;
	font-weight: 300; opacity: 0;
color:  white;
  font-size: 1.75em; 
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
    line-height: 1em;
    padding: 0;
    margin-top: .5em;

} 


.dark {
    background-color: #53575a;
    padding: 3rem;
    color: white;
}

.middle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #b0b3b2;
}

.border:hover .middle{
  opacity: .85;
}

.border:hover .lable{
  opacity: 1;
}


.image {
  width: 100%;
  height: auto;
    
}


.navbar-toggler{
border: none;
    
}

footer {
 position: absolute;
 bottom: 0;
 width: 100%;
}

/* Small devices (landscape phones, 576px and up)*/
@media (max-width: 576px) {

}

/* Large devices (landscape phones, 576px and up)*/
@media (max-width:992px) {
    .lable {
      font-size: 1.5em;
    }
}

/* Medium devices (landscape phones, 576px and up)*/
@media (max-width:768px) {
    .lable {
      font-size: 1em;
    }
    .text-cat {
        font-size: .75em;
    }
        .headlinebold {
        font-size: 1.75em;
    }
    .headline {
        font-size: 1.75em;
    }
 

    
    h5.sectionheader >span,
    h5.sectionheader-dark > span {
        font-size: 1rem;
    }
}


/*10px Gutter*/
.gutter-10.row {
margin-right: -5px;
margin-left: -5px;
}
.gutter-10 > [class^="col-"], .gutter-10 > [[class^="col-"] {
padding-right: 5px;
padding-left: 5px;
}