/*----CSS----*/

/*----colors-----
Top bar (gray):
Buttons (yellow):
Box (purplish):
Logo pillars:
background light: f5f5f5
light blue text and social media: d8d6dd
*/

/*----google fonts----
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Open Sans', sans-serif;
*/

body {
  background: #fff;
  color: #4f4f4f;
  font-family: "Open Sans", sans-serif;
}

* {box-sizing: border-box;}

a {
  color: #a84255;
  transition: 0.5s;
}

a:hover,
a:active,
a:focus {
  color: #9b3749;
  outline: none;
  text-decoration: none;
}

p {
  padding: 0;
  margin: 0 0 30px 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Open Sans Condensed', sans-serif;
}

.slick-viewport  {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
}

/*-- SPINNER LOADER CSS --*/
#loading  {
  position: absolute;
  z-index: 9999;
  left: 50%; /*-- center spinner on page horizontally --*/
  top: 50%; /*-- verticle position on page --*/
  height: 100%;
  width: 100%;
  margin-left: -10px; /*-- accounts for size of spinner --*/

}
ion-spinner  {
  transform: scale(3); /*-- size of spinner --*/
  color: white!important; /*-- color of spinner --*/
}
@media screen and (max-width: 768px)  {
  #loading  {
    position: absolute;
    z-index: 9999;
    left: 50%; /*-- center spinner on page horizontally --*/
    top: 40%; /*-- verticle position on page --*/
    height: 100%;
    width: 100%;
    margin-left: -10px; /*-- accounts for size of spinner --*/
  }
  ion-spinner  {
    transform: scale(3); /*-- size of spinner --*/
    color: white!important;
  }
}
/*-- END SPINNER --*/


/*----- TOP-HEADER -----*/
#top-header  {
  background-color: #a6a6a6;
  padding: 5px 70px;
  height: 40px;
}
@media screen and (max-width: 768px)  {
#top-header  {
  padding: 0 20px!important;
  height: 55px;
  margin-top: -5px!important;
}
}

.social-media ion-icon  {
  color: white;
  font-size: 1em;
  margin: 0px;
  padding: 0px;
}
.social-media ion-icon:hover,
.social-media ion-icon:active,
.social-media ion-icon:focus  {
  color: #e6e6e6;
  transition: 0.5s;
}

#top-header .social-media  {
  padding: 0;
  margin: 0;
  margin-top: 5px;
}

#top-header .social-media ul  {
  list-style-type: none;
  display: inline;
  margin: 0;
  padding: 10px 0 8px 0;
}

#top-header .social-media ul li  {
  display: inline;
  margin: 0;
  padding: 0;
  padding-right: 30px;
}

@media screen and (max-width: 768px)  {
#top-header .social-media  {
  padding-top: 15px;
}
#top-header .social-media ul li  {
  padding-right: 10px;
}
}

#top-header .text-right  {
  color: #d8d6dd;
  margin: 0;
  padding: 0;
  margin-top: 0;
  padding-bottom: 0px;
  padding-top: 0px;
  text-transform: uppercase;
  font-size: .9em;
  margin-top: -25px;
}

@media screen and (max-width: 768px)  {
#top-header .text-right  {
  margin-top: -30px;
  padding-left: 70px;
  padding-bottom: 20px!important;
  }
}

#top-header .text-right ion-icon  {
  font-size: 16px;
  margin-right: 10px;
  color: #a84255;
  margin-bottom: -3px;
}

#top-header .text-right a  {
  color: white;
}
#top-header .text-right a:hover,
#top-header .text-right a:active,
#top-header .text-right a:focus {
  color: #f2f2f2;
  outline: none;
  text-decoration: none;
  transition: 0.5s;
}

/*.phone-bar  {
  padding: 0px 120px 0px 120px;
  margin: 0px!important;
  margin-bottom: 0!important;
  font-size: .9em;
}
.navbar-phone  {
  padding: 0;
  margin-bottom: 20px;
}
.phone-bar i  {
  margin-left: 30px;
  margin-right: 10px;
  color: #898989;
}
@media screen and (max-width: 768px)  {
.phone-bar  {
  padding: 10px 35px 5px 35px;
  font-size: 1em;
}
.phone-bar span  {
  display: none;
}*/
/*--ADJUSTS CONTACT ANCHOR (DUMMY DIV) FOR CAROUSEL BUTTONS--*/
@media screen and (max-width: 768px)  {
#anchor {
    display: block;
    position: relative;
    top: 210px;
    visibility: hidden;
}
}

/*----NAVBAR----*/
.navbar-custom  {
  background-color: #a84255!important;
  border-top: 1px solid #cccccc;
  box-shadow: 0px 4px 2px #bfbfbf;
  padding: 10px 120px;
}
.nav-item-1  {
  padding-right: 15px;
}
/*.nav-item-2  {
  padding: 15px 0px 15px 15px;
}*/

@media screen and (max-width: 768px)  {
.navbar-custom  {
  padding: 5px 20px 10px 20px;
}
.navbar-nav  {
  padding-left: 10px;
}
}

.navbar img  {
  width: 250px;
  height: auto;
}
@media screen and (max-width: 768px)  {
.navbar img  {
  width: 170px!important;
}
.navbar-toggler  {
  border: none;
}
.navbar-toggler-icon  {
  font-size: 1.5em;
}
}

/*.navbar .nav-item a  {
  color: white!important;
  font-family: 'Open Sans', sans-serif;
  transition: 0.5s;
  font-weight: lighter;
}
.navbar .nav-item a:hover,
.navbar .nav-item a:active {
  color: #a6a6a6!important;
  outline: none;
  text-decoration: none;
  transition: 0.5s;
}*/


/*-- CAROUSEL --*/
.carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  background:rgba(115,115,115,0.7);
}

.carousel-caption {
    top: 120px;
    bottom: auto;
}
.carousel-caption h5  {
  font-size: 2em;
  color: #feec4d;
  text-transform: uppercase;
  letter-spacing: 2px;
}
.carousel-caption h3  {
  font-size: 4em;
  color: white;
  /*text-transform: uppercase;*/
}
.carousel-caption p  {
  font-size: 1.5em;
  color: white;

}
@media screen and (max-width: 768px)  {
  .carousel-caption {
      top: -10px!important;
      bottom: auto;
      margin-top: 30px!important;
  }
  .carousel-caption h5  {
    font-size: 1em;
    color: #dca44d;
    text-transform: uppercase;
    font-weight: bolder;
  }
  .carousel-caption h3  {
    font-size: 2em;
    color: white;
    text-transform: uppercase;
  }
  .carousel-caption p  {
    font-size: .9em;
    color: white;
  }
}

.btn-custom  {
  color: #666666;
  background-color: #feec4d;
  border: 0 solid #cccccc!important;
  border-radius: 3px;

}
.btn-custom:hover, .btn-custom:active, .btn-custom:focus  {
  background-color: #eddb3f;
  color: #575656;

}

/*-- COMMON STYLES --*/
.section-wrapper  {
  padding-top: 170px;
}
@media screen and (max-width: 768px)  {
.section-wrapper  {
  padding-top: 320px;
}

@media screen and (max-width: 768px)  {
section.py-5 .row  {
  margin-top: -40px;

}
}

.section-wrapper img  {
  margin-top: 0px!important;
  padding-top: 0px!important;
  margin-bottom: 20px;
}
.section-wrapper h2  {
  font-size: 1.7em;
}
.section-wrapper .section-container .section-article  {
  margin-bottom: 0px!important;
  padding-bottom: 0px!important;
}
}

.section-article h1  {
  text-transform: uppercase;
  color: #000;
  /*font-weight: bolder;*/
  /*letter-spacing: 2px;*/
  margin-bottom: 0px;
  padding-bottom: 0px;

}

.section-article  {
  margin-bottom: 0px;
  padding-bottom: 0px;
}
.section-wrapper .row  {
  margin: 20px 0px;
  padding: 30px 20px 20px 20px;
  background-color: #f2f2f2;
}
@media screen and (max-width: 768px)  {
.section-wrapper .row  {
  padding: 30px 10px 10px 10px;
}
.section-wrapper .mt-5  {
  margin: 0px;
  padding: 0px;
}
}
.section-wrapper h2  {
  color: #000;
  padding-bottom: 20px;
}


/*-- EXTRA SECTIONS --*/
.extra  {
  padding: 40px 120px;
}

@media screen and (max-width: 768px)  {
  .extra  {
    padding: 20px 15px;
  }
}
section img {
    width: 100%;
    border-radius: 6px;
    border: 2px dotted #a84255;
    /*outline: 1px solid white;
    outline-offset: -8px;*/
}
@media screen and (max-width: 768px)  {
  .extra img  {
    margin-top: 30px;
  }
  .extra-1 .col-mobile-top  {
    padding-top: 40px;
  }
  section .col-mobile-top h2  {
    margin-top: -70px;
    padding-top: 0;
  }
}
.col-mobile-top h2  {
  padding-bottom: 20px;
}

.extra  {
  background-color: #e6e6e6;
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
  box-shadow: 0px 4px 2px #bfbfbf;
  margin-top: 0px;
}
@media screen and (max-width: 768px)  {
  .extra-1  {
    padding-top: 0px;
  }
}
.extra-1 p {
  color: #666666;
}
.extra-1 h2  {
  color: #000;
}

.extra-1 .phone  {
  color: #dbd8b8!important;
}
.extra-1 .phone:hover  {
  color: #d8d6dd!important;
}

h2 ion-icon  {
  font-size: .8em;
  color: #a84255;
  padding-right: 12px;
  margin-bottom: -3px;
}
@media screen and (max-width: 768px)  {
h2 ion-icon  {
  font-size: .8em;
}
}

/*--FONT AWESOME--*/
i  {
  color: #a84255;
  font-size: 20px;
  margin-right: 15px;
  vertical-align: middle;
}

/*-- DENTISTS SECTION --*/

/*-- SERVICES --*/


/*-- LOCATION SECTION --*/
@media screen and (max-width: 768px)  {
section .col-mobile-top iframe  {
  margin-top: 0px!important;
}
}
.col-mobile-top .map  {
  border: 1px solid #cccccc;
}
address.location  {
  padding-left: 25px;
  padding-top: 10px;
}


/*===== CONTACT =====*/
#contact.section-wrapper  {
  margin-bottom: 0px;

}
#contact .section-article  {
  padding-bottom: 30px;
}
#contact .contact-head  {
  padding-bottom: 0px;
  margin-bottom: 0px;
  padding-left: 10px;
  padding-right: 10px;
}
@media screen and (max-width: 768px)  {
#contact .contact-head h5  {
  text-align: center;
}
#contact .card-body h5  {
  text-align: center;
}
}
#contact .card-container  {
  padding: 0px;
}
#contact .card-container .card-body  {
  padding: 0px;
}

@media screen and (max-width: 768px)  {
#contact .mt-5  {
  margin-top: 0px!important;
}
}

#contact ion-icon  {
  /*margin-left: 30px;*/
  margin-right: 10px;
  color: #a84255;
  font-size: .9em;
}
@media screen and (max-width: 768px)  {
#contact ion-icon  {
  font-size: .9em;
  margin-right: 5px!important;
}
.contact-head h2  {
  padding-right: 0;
  margin-right: 0;
}
}

#contact .btn-custom  {
  color: #666666;
  background-color: #feec4d;
  border: 0 solid #dca44d;
  border-radius: 3px;
  margin-bottom: 10px;
}
#contact .btn-custom:hover, #contact .btn-custom:active, #contact .btn-custom:focus  {
  background-color: #eddb3f;
}

#contact .form-row  {
  padding-top: 20px;
  padding-bottom: 20px;
}

#contact.section-wrapper .contact-message-row  {
  margin: 0px 3px -20px 3px;
}


/* ===== FOOTER =====*/
footer  {
  margin-top: 40px!important;
  width: 100%;
}
footer .copyright  {
  bottom: 0;
  background-color: #a84255!important;
  padding: 20px!important;
  text-align: center;
  width: 100%;
  font-size: .9em;
  letter-spacing: 2px;
  color: #dcdcdc;
}
@media only screen and (max-width:768px) {
footer  {
  width: 100%;
  margin-top: 0px;
}

  footer .copyright  {
  background-color: #333333;
  padding: 20px!important;
  text-align: center;
  width: 100%;
  /*font-family: 'Open Sans', sans-serif;*/
  font-size: .8em;
  letter-spacing: 1px;
  color: #dcdcdc;
}
}

/*-----Social Media Icons in Footer-----*/
footer ion-icon {
  font-size: 15px;
}
footer ion-icon:hover {
    opacity: 0.7;
}
footer .logo-facebook {
  color: #d8d6dd;
  margin-left: 30px;
  margin-right: 20px;
}
footer .logo-instagram {
  color: #d8d6dd;
}

@media only screen and (max-width:768px)  {
  footer .logo-facebook {
    color: #d8d6dd;
    margin-left: 15px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  footer .logo-instagram {
    color: #d8d6dd;
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

/*-----CWD Link in footer-----*/
footer .cwd  {
  color: #c0c0c0;
  font-size: .7em;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-top: 5px;
  margin-bottom: 0px;
}
footer .cwd a  {
  color: #c0c0c0!important;
  text-decoration: none;
}
footer .cwd a:link  {
  color: #c0c0c0!important;
  text-decoration: none;
}
footer .cwd a:visited  {
  color: #c0c0c0!important;
  text-decoration: none;
}
footer .cwd a:hover  {
  color: #c0c0c0!important;
  text-decoration: none;
  opacity: .7;
}
footer .cwd a:active  {
  color: #c0c0c0!important;
  text-decoration: none;
}