html, body {height:100%; font-family: 'Raleway', sans-serif!important; color:#474342;}

a {cursor: pointer;}
a:hover {color:#fff; font-weight: bold;}
.center {text-align: center; padding-top:20px; margin: 0 auto; padding-bottom: 2rem;}
.center-alt {text-align: center; }

.center p {padding-top:25px;}

h1 {font-size:6.5rem }
h4 {font-family: 'Raleway', sans-serif!important; font-weight:700!important; font-size:20px!important;}
h6 {font-family: 'Raleway', sans-serif!important;}
p {font-size:14px; line-height: normal!important; text-align: left;}
section h2.section-heading {font-size:20px!important; font-family: 'Raleway', sans-serif!important;}

hr.bar-lg {border:3px solid #fff; margin-top:auto; margin-bottom:2rem;}
hr.review-bar {
margin-top: 0;
  margin-bottom: 11rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0);
}

.lite {font-family: bureau-grot-condensed, sans-serif; font-weight: 300!important; font-size: 5rem; text-transform: uppercase; }
.extreme{font-weight:700; color:#474342;}
.plain {font-family: bureau-grot-condensed, sans-serif; font-size: 1.5rem; text-transform: uppercase; font-weight: 300; margin-bottom:20px;}
.mont {font-family: 'Montserrat', sans-serif; font-weight: 300; margin-bottom:20px; padding:2px;}

.medium {font-family: bureau-grot-condensed, sans-serif; font-weight: 400!important; font-size: 1.5rem; text-transform: uppercase; }
.larger {font-size: 3rem;}
.thicc {font-family: bureau-grot-condensed, sans-serif; font-weight: bold; text-transform: uppercase;}
.colored {color:#1B5F54; font-weight: 700;}

.black-btn {background:#333; padding:10px; border-radius: 5px; color:#fff; cursor: pointer;}
.black-btn:hover {background:#000; }

.rebrand {width:500px; padding-top:20px; text-align: center;}
.reviews {
	width: 400px;
    text-align: center;
    margin: 0 auto;
    position: relative;
    margin-left: 50%;
}

.right {text-align: right;}
.fl-right {float:right;}

.white {color:#fff;}
.lt-grey {color:#a3a1a1!important; font-size:5rem;}
.why{position:absolute; margin:-39px 0 0 10%; width:42%;}
.why:focus {width:43%;}
.why:hover {width:43%;}
.more {font-family: 'Raleway', sans-serif; text-transform: uppercase; color:#484443; font-size:18px; text-align: right; font-weight: 700;}
.grey-foot-home {background:#a3a1a1; margin-top:30%; overflow:auto; color:#fff;}
.grey-foot {background:#a3a1a1; overflow:auto; color:#fff;}

.logo img {
    margin: -31px 0px 0px 50px;
    width: 87%;
}

.reconnect {height:50%;}
.app {width:10%; text-align: center; margin: 0 auto;}
.app:hover {width:11%;}


#mainNav .navbar-nav .nav-item .nav-link {color:#222!important;}
#mainNav .navbar-toggler {background:#222!important;}


.col-12 {margin:0 auto;}
.left {float: left;}

body {background:#222 cover;}

.beige {background:#474342; width:58%; height: 39px; position: absolute; overflow-y: visible; z-index: -1; }
.app-red {background:#A52323; width:56%; height: 39px; position: absolute; overflow-y: visible; z-index: -1; text-align: left;}

.album img {width:100%; margin-bottom: 15px; }

ul.secondary li {display:inline-block; list-style-type: none;}
ul.secondary li:focus {color:#fff; font-weight: bold;}
ul.secondary li a {color:#474342; display:inline-block; padding-right:20px; }
ul.secondary li a:hover {color:#000!important; font-weight: bold;}

.social {padding-bottom:15px; padding-right:10px;}

.ease-in {
    -webkit-animation: 1s ease 0s normal forwards 1 fadein;
    animation: 1s ease 0s normal forwards 1 fadein;}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.ease-in2 {
    -webkit-animation: 2s ease 0s normal forwards 1 fadein;
    animation: 2s ease 0s normal forwards 1 fadein;}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.ease-in3 {
    -webkit-animation: 3s ease 0s normal forwards 1 fadein;
    animation: 3s ease 0s normal forwards 1 fadein;}

@keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

@-webkit-keyframes fadein{
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}

.bg-light {background: #fff}
.bg-primary {background-size:cover!important; background:transparent!important; height:100%!important;}

.text-muted {color:#fff; font-size:12px; font-family:'Raleway';}

.carousel-control-next-icon .last {display:none;}

.form-wrap {width:80%; margin:0 auto;}

.head-img {margin:0 auto; width:15%;}

.img-responsive {width:100%; display:inline-block;}

#portfolio .portfolio-item .portfolio-caption h4 {color:#fff; text-transform:lowercase!important; font-size:16px!important;}


#portfolio .portfolio-item .portfolio-caption p {color:#fff;}

#portfolio .portfolio-item .portfolio-caption {background-color:#222!important;}
#portfolio * {color:#222; } 


#portfolio .portfolio-item .portfolio-link .portfolio-hover {background: rgba(20,20,20,.9)!important;}

.spacer {padding:10% 0 10% 0; text-align: center;}
.spacer-alt {padding:10% 0 0 0; text-align: center;}
.spacer-home {padding-top:5%;}
.spacer-bottom {padding-bottom: 15px;}

.hideme
{
    opacity:0;
}

.grey-bg {
	float: left;
    background: #484443;
    width: 77%;
    height: 225px;
    position: absolute;
	margin-top:6%;
}

.maroon-bg {
	background: #b36a5c;
    height: 250px;
    width: 100%;
    float: right;
	position: absolute;
	z-index: -1
}


/* gallery effect */ 

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover .overlay {
  background-color: rgba(50, 50, 50, 0.8);
}

.hovereffect .overlaytwo {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect .overlaytwo {
  background-color: rgba(55, 43, 34, 0.5);
}

.hovereffect img {
  display: block;
  position: relative;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-transform: translateY(45px);
  -ms-transform: translateY(45px);
  transform: translateY(45px);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  transform: translateY(5px);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  margin: 20% 0 0 0;
  padding: 30px 50px;
  cursor:pointer;
}

.hovereffect:hover a.info {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}



.hovereffect a.txt {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;

  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: lighter;
  font-size: 6em;
  font-family: bureau-grot-condensed, sans-serif;
  margin: 25% 0 0 0;
  padding: 10px 50px;
  cursor:pointer;
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}





.hovereffect a.txt-sm {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: normal;
  font-size: 4em;
  line-height: 60px;
  font-family: bureau-grot-condensed, sans-serif;
  margin: 12% 0 0 0;
  padding: 20px 80px;
  cursor:pointer;
}

.hovereffect a.txt-sm {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.hovereffect a.txt-xs {
  display: inline-block;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  background-color: transparent;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  font-weight: bold;
  font-size: 3em;
  font-family: bureau-grot-condensed, sans-serif;
  margin: 5% 0 0 0;
  padding: 20px 60px;
  cursor:pointer;
  line-height: 50px;
}

.hovereffect a.txt-xs {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}




.more-info { 
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  color:#fff;
  font-size:1.5rem
}

.more-info:hover {color:#fff;}



/******* OVERLAY 2 ********/


.contain {
  position: relative;
  width: 50%;
}

.featured-image {
  display: block;
  width: 100%;
  height: auto;
}


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

.contain:hover .overlay-2 {
  opacity: 1;
}

.info-2 {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}


/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: auto;
  padding: 0;
  width: 42%!important;
  background-color:transparent!important;
}

.modal-content img {width:100%; margin:0 auto;}

/* The Close Button */
.close {
  color:#fff;
  position: absolute;
  z-index: 10000;
  top: 100px;
  right: 15%;
  font-size: 50px;
  font-weight: bold;
  opacity:1!important;
}

.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: #fff!important;
  font-weight: bold;
  font-size: 50px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  color:#000!important;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}




/*Parallax*/

.parallax {
  /* The image used */
  background-image: url('/images/home1.jpg');

  /* Full height */
height:25%;
  /* Create the parallax scrolling effect */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}





/*Slider*/



.carousel-inner {background:#000;}
.carousel-item.active, .carousel-item-next, .carousel-item-prev:before {opacity: 1;}
.slider-logo {    position: absolute; width: 45%; margin: 10% 0 0 -21%; z-index: 999999;}
.sliderimg {width:400px;}



/* boxes */

.boxes { color:#fff; height:300px; border: 2px solid #fff;}
.boxes-brown {background:#372b22; color:#fff; height:300px; border: 2px solid #fff;}
.boxes p {padding-top:20%; font-size:1.5rem;}

.sections  {margin:0 auto; display:flex;}
.img-col {margin:10px; flex-grow: 1; flex-shrink:1;}


.brown-foot {background:#302727; color:#fff!important;}


.divide-bg {width:100%; background:rgba(100,100,100,.7); padding:60px 20px; color:#fff;}
.red-bg { width:100%; background:#A52323; padding:60px 20px; color:#fff!important; }


/* Mobile */

@media (max-width:1570px) {
	.hovereffect a.info {font-size:.7rem; padding:20px;}
}
@media (max-width:1360px) {
    .spacer-alt {padding:20% 0 2% 0; text-align: center;}
    .mainimg {width:320px;}
}

@media (max-width:760px) {
    .hovereffect a, .hovereffect p {
    padding: 1em 0;
    }
    h1 {font-size: 4rem;}
    
    .logo img {
    width: 40%;
}
    .spacer-alt {padding-top:22%;}
    
    .more-info {font-size:1rem;}
    
}

@media (max-width:560px) {
    .hovereffect a.info {font-size:1rem;}
    .modal-content {width:80%;}
    
    .sections  { display:block;}
    .img-col {margin:0px;}
    .mainimg {width:290px;}
    
}

@media (max-width:440px) {
    .spacer {padding-top:22%;}
    .col-sm-12 {padding-top:10px;}
    
}