.masthead{
	display: table;
	position: relative;
	min-width: 100% ;
	min-height: auto;
	width: 100%;
	height: auto;
	background: transparent url no-repeat fixed 0px 0px / cover;
	z-index: 800;
	background-color:#000;
}
/********************************/
/*       Fade Bs-carousel       */
/********************************/
.fade-carousel {
    position: relative;
    height: 100vh;

}
.fade-carousel .carousel-inner .item {
    height: 100vh;
}
.fade-carousel .carousel-indicators > li {
    margin: 0 2px;
    background-color: #CDA34F;
    border-color: #f39c12;
    opacity: .7;
    left: 77%;
}
.fade-carousel .carousel-indicators > li.active {
  width: 10px;
  height: 10px;
  opacity: 1;
}
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/********************************/
/*          Hero Headers        */
/********************************/
.hero {
    position: relative;
    top: auto;
    left: auto;
    z-index: 3;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,.75);
      -webkit-transform: translate3d(-50%,-50%,0);
         -moz-transform: translate3d(-50%,-50%,0);
          -ms-transform: translate3d(-50%,-50%,0);
           -o-transform: translate3d(-50%,-50%,0);
              transform: translate3d(-50%,-50%,0);
}
.hero h1 {
    font-size: 6em;    
    font-weight: bold;
    margin: 0;
    padding: 0;
    
}

.fade-carousel .carousel-inner .item .hero {
    opacity: 0;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s; 
}
.fade-carousel .carousel-inner .item.active .hero {
    opacity: 1;
    -webkit-transition: 2s all ease-in-out .1s;
       -moz-transition: 2s all ease-in-out .1s; 
        -ms-transition: 2s all ease-in-out .1s; 
         -o-transition: 2s all ease-in-out .1s; 
            transition: 2s all ease-in-out .1s;    
}
/********************************/
/*       Slides backgrounds     */
/********************************/
.fade-carousel .slides .slide-1, 
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3,
.fade-carousel .slides .slide-4,
.fade-carousel .slides .slide-5 {
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/********************************/
/*          Custom Buttons      */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
    color: #f5f5f5;
    background-color: #1abc9c;
    border-color: #1abc9c;
    outline: none;
    margin: 20px auto;
}

/********************************/
/*          Navbar              */
/********************************/

/* Add a black background color to the top navigation */
.topnav {
  
    background-color: #373F27;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: center;
    display: inline-block;
    color: #E9E7DA;
    text-align: center;
    padding: 1px 14px;
    text-decoration: none;
    font-size: 15px;
}

/* Change the color of links on hover */
.topnav a:hover {
   
    color:#CDA34F;
}

/*@font-face {
   font-family: 'Cinzel Decorative' ;
 
}
div {
   font-family: myFirstFont;
}*/
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/********************************/
/*          Contact Form        */
/********************************/

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
    background-color: #bcc3a2;
}

input[type=submit] {
    background-color: #017371;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.container {
    border-radius: 5px;
    padding: 20px;
    position: relative;
}
/********************************/
/*         Text carousel        */
/********************************/
/*.carousel-content {
    color:#8e793e;
    display:flex;
    align-items: center;

}
#text-carousel {
  width: 100%;
  height: auto;
  padding: 50px;
}
*/
#quote-carousel 
{
  padding: 0 10px 30px 10px;
  margin-top: 30px 0px 0px;
}

/* Control buttons  */
#quote-carousel .carousel-control
{
  background: none;
  color: #222;
  font-size: 2.3em;
  text-shadow: none;
  margin-top: 30px;
}
/* Previous button  */
#quote-carousel .carousel-control.left 
{
  left: -12px;
}
/* Next button  */
#quote-carousel .carousel-control.right 
{
  right: -12px !important;
}
/* Changes the position of the indicators */
#quote-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the color of the indicators */
#quote-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
#quote-carousel .carousel-indicators .active 
{
  background: #333333;
}
#quote-carousel img
{
  width: 250px;
  height: 100px
}
/* End carousel */

.item blockquote {
    border-left: none; 
    margin: 0;
}

.item blockquote img {
    margin-bottom: 10px;
}

.item blockquote p:before {
    content: "\f10d";
    font-family: 'Fontawesome';
    float: left;
    margin-right: 10px;
}



/**
  MEDIA QUERIES
*/

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #quote-carousel 
    {
      margin-bottom: 0;
      padding: 0 185px 30px 40px;
     
    }
    
}

/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) { 
    
    /* Make the indicators larger for easier clicking with fingers/thumb on mobile */
    
    #quote-carousel .carousel-indicators {
        bottom: -20px !important;  
    }
    #quote-carousel .carousel-indicators li {
        display: inline-block;
        margin: 0px 5px;
        width: 15px;
        height: 15px;
    }
    #quote-carousel .carousel-indicators li.active {
        margin: 0px 5px;
        width: 20px;
        height: 20px;
    }
}
.item{
    
    display:block;
    text-align: center !important;
}

.carousel-caption{
    color:#000;
    position:static;
}

/********************************/
/*         Background Image     */
/********************************/
#bg {
 /* position: fixed; 
  top: 0; 
  left: 0; 
  */
  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}
#colorstrip{
    width: 100%; height: 52px;
    border-style: solid;
    border-color: #017371 ;
    background-color: #017371;
}

#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #017371 ; /* Set a background color */
    color: #000000; /* Text color */
    font-size: 31px;
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 13px; /* Some padding */
    border-radius: 7px; /* Rounded corners */
}

#myBtn:hover {
    background-color: #273f41; /* Add a dark-grey background on hover */
}
.bg-primary{
	background-color: #F05F40;
}
.bg-app{
	background-color: #0099ff;
}
.btn-round-lg{
border-radius: 22.5px;
}
.btn-round{
border-radius: 17px;
}
.btn-round-sm{
border-radius: 15px;
}
.btn-round-xs{
border-radius: 11px;
padding-left: 10px;
padding-right: 10px;
}
hr.light{
	border-color: #fff;
}
hr{
	border-width: 3px;
	max-width: 50px;
}
.vcex-divider-solid {
    border-top: 1px solid #e8e8e8;
}

.vcex-divider {
    display: block;
    width: 100%;
    height: 0;
    background: none;
    margin: 0 auto;
}
section{
	padding: 30px 0;
}

/********************************/
/*        Footer	        */
/********************************/

.footer-distributed{
/*	background: url("https://i.imgur.com/fIqCqeB.jpg")no-repeat;
*/	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
	box-sizing: border-box;
	width: 100%;
	text-align: left;
	font: bold 16px sans-serif;

	padding: 55px 50px;
	margin-top: 80px;
}

.footer-distributed .footer-left,
.footer-distributed .footer-center,
.footer-distributed .footer-right{
	display: inline-block;
	vertical-align: top;
}

/* Footer left */

.footer-distributed .footer-left{
	width: 50%;
}

/* The company logo */

.footer-distributed h3{
	color:  #ffffff;
	font: normal 36px 'Cookie', cursive;
	margin: 0;
}

.footer-distributed h3 span{
	color:  #5383d3;
}

/* Footer links */

.footer-distributed .footer-links {
	color: #cfcbaf ;
	margin: 25px 56px 11px;
	padding: 0;
}

.footer-distributed .footer-links a{
	display:inline-block;
	line-height: 1.8;
	text-decoration: none;
}
.footer-distributed .footer-links a:hover{
	color: #CDA34F;
}

.footer-distributed .footer-company-name{
	color:  #cfcbaf;
	font-size: 14px;
	font-weight: normal;
	margin: 0px 56px 11px;
}

.footer-address{
	color:  #cfcbaf;
	font-size: 15px;
	font-weight: normal;
	margin: 0px 56px 11px;
}

/* Footer Right */

.footer-distributed .footer-right{
	width: 40%;
}

.footer-distributed .footer-company-about{
	line-height: 20px;
	color:  #cfcbaf;
	font-size: 13px;
	font-weight: normal;
	margin: 0;
}

.footer-distributed .footer-company-about span{
	display: block;
	color:  #cfcbaf;
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 20px;
}

.footer-distributed .footer-icons{
	margin-top: 25px;
}

.footer-distributed .footer-icons a{
	display: inline-block;
	width: 35px;
	height: 35px;
	cursor: pointer;
	background-color:  #33383b;
	border-radius: 2px;

	font-size: 20px;
	color: #CDA34F;
	text-align: center;
	line-height: 35px;

	margin-right: 3px;
	margin-bottom: 5px;
}
.footer-company-name a:hover{
	color: #CDA34F;
}

#fb:hover {
	background-color: #3B5998;
	color: white;
}

#twitter:hover {
	background-color: #33ccff;
	color: white;
}

#linkedin:hover {
	background-color: #0077B5;
	color: white;
}

/********************** Map********************/

.map-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:85%;
    width:100%;
    position:absolute;
}


.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* If you don't want the footer to be responsive, remove these media queries */

@media (max-width: 880px) {

	.footer-distributed{
		font: bold 14px sans-serif;
	}

	.footer-distributed .footer-left,
	.footer-distributed .footer-center,
	.footer-distributed .footer-right{
		display: block;
		width: 100%;
		margin-bottom: 40px;
		text-align: center;
	}


}
.services-info{
	border-radius: 4px;
  border-bottom-right-radius: 10%;
  border-bottom-left-radius: 10%;
  border-top-right-radius: 10%;
  border-top-left-radius: 10%;
  background-color: #bcc3a2;
  box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
  transition: all 0.3s ease-in-out;
  position: relative;
  top: 0px;
  padding: 40px 40px 20px 20px;
  margin-top: 32px;
}

.services-info:hover {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
  top: -5px;
}
.logo {
  float: left;
  
  position: relative;
}

.logo a span { 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  
}