/*--- Base Styles ---*/

html,
body {
  height: 100%;
  margin: 0;
}

html {
  min-width: 320px;
}

body {
  padding-top: 75px;
  font-family: 'Khula', sans-serif;
  font-size: 16px;
}

a {
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

a,
.top-navbar .navbar-nav>.active>a,
.top-navbar .navbar-nav>.open>a,
.top-navbar .navbar-nav>.open>a:focus,
.top-navbar .navbar-nav>.open>a:hover,
.top-navbar .navbar-nav>.active>a:focus,
.top-navbar .navbar-nav>.active>a:hover,
.top-navbar .navbar-nav>li>a,
.services-menu>li>a,
.top-navbar .logo,
blockquote footer,
.bootstrap-dialog-title {
  color: #255195;
}

.background {
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), url(../images/clouds-295695_1920.jpg) top center no-repeat #788dac;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 1))), url(../images/clouds-295695_1920.jpg) top center no-repeat #788dac;
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), url(../images/clouds-295695_1920.jpg) top center no-repeat #788dac;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), url(../images/clouds-295695_1920.jpg) top center no-repeat #788dac;
  background-size: cover;
}

.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}


/*--- Navbar  ---*/

.top-navbar,
.modal-content {
  background: -webkit-gradient(linear, left top, right top, from(white), to(transparent)), url('../images/cloud-97453_1920.jpg') no-repeat top center, #6bacf7;
  background: -webkit-linear-gradient(left, white, transparent), url('../images/cloud-97453_1920.jpg') no-repeat top center, #6bacf7;
  background: -o-linear-gradient(left, white, transparent), url('../images/cloud-97453_1920.jpg') no-repeat top center, #6bacf7;
  background: linear-gradient(left, white, transparent), url('../images/cloud-97453_1920.jpg') no-repeat top center, #6bacf7;
  background-size: cover;
}

.top-navbar {
  min-width: 320px;
  background-size: 768px 512px;
  border-color: transparent;
}

.top-navbar .navbar-nav>.active>a,
.top-navbar .navbar-nav>.open>a,
.top-navbar .navbar-nav>.open>a:focus,
.top-navbar .navbar-nav>.open>a:hover,
.top-navbar .navbar-nav>.active>a:focus,
.top-navbar .navbar-nav>.active>a:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(120, 141, 172, 0.25)), to(rgba(150, 157, 184, 0.25)));
  background-image: -webkit-linear-gradient(top, rgba(120, 141, 172, 0.25) 0, rgba(150, 157, 184, 0.25) 100%);
  background-image: -o-linear-gradient(top, rgba(120, 141, 172, 0.25) 0, rgba(150, 157, 184, 0.25) 100%);
  background-image: linear-gradient(to bottom, rgba(120, 141, 172, 0.25) 0, rgba(150, 157, 184, 0.25) 100%);
  background-color: transparent;
}

.services-menu {
  background-color: #7d92b8;
}

.services-menu>li>a:focus,
.services-menu>li>a:hover {
  background-color: #7d92b8;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), to(#7d92b8));
  background-image: -webkit-linear-gradient(top, #fff 0, #7d92b8 100%);
  background-image: -o-linear-gradient(top, #fff 0, #7d92b8 100%);
  background-image: linear-gradient(to bottom, #fff 0, #7d92b8 100%);
}

.about {
  cursor: pointer;
}

.contact {
  cursor: pointer;
}


/*--- Logo  ---*/

.top-navbar .logo {
  padding: 5px 0 0 1px;
  height: 100%;
}

.top-navbar .logo:focus,
.top-navbar .logo:hover,
.top-navbar .navbar-nav>li>a:focus,
.top-navbar .navbar-nav>li>a:hover,
.services-menu>li>a:focus,
.services-menu>li>a:hover {
  color: #7d92b8;
}

.main-logo,
.sub-logo,
.welcome,
.bootstrap-dialog-title {
  font-family: 'Anton', sans-serif;
}

.main-logo,
.welcome,
.bootstrap-dialog-title {
  font-size: 1.4em;
}

.sub-logo {
  font-size: .52em;
}

.phone {
  font-size: .7em;
}

.phone strong {
  font-size: 1.2em;
}


/*--- Navbar Button ---*/

.top-navbar .hamburger {
  top: 10px;
  border-color: rgba(0, 0, 0, 0);
}

.top-navbar .hamburger:focus,
.top-navbar .hamburger:hover {
  background-color: rgba(150, 157, 184, 0.4);
}

.top-navbar .hamburger .bars {
  background-color: #255195;
}


/* animated hamburger menu - https://www.w3schools.com/howto/howto_css_menu_icon.asp */


/* set animation speed for bars */

.bar1,
.bar2,
.bar3 {
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}


/* rotate bar1 */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -ms-transform: rotate(-45deg) translate(-5px, 4px);
  transform: rotate(-45deg) translate(-5px, 4px);
}


/* fade out bar2 */

.change .bar2 {
  opacity: 0;
}


/* rotate bar3 */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -ms-transform: rotate(45deg) translate(-4px, -4px);
  transform: rotate(45deg) translate(-4px, -4px);
}


/*--- Footer ---*/

.footer,
.push {
  height: 50px;
}


/*--- Jumbotron ---*/

.jumbo {
  padding-top: 0;
  padding-bottom: 0;
}

.item>img.center-images {
  width: 100%;
  max-height: 360px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: 100% 25%;
  object-position: 100% 25%;
}

.carousel-control {
  z-index: 4;
}

.welcome {
  color: #fff;
  text-shadow: 2px 2px 4px black;
  position: relative;
  z-index: 1;
  top: -175px;
  width: 100%;
  height: 0;
  min-width: 320px;
}

.welcome>h2 {
  font-size: 1.93em;
  margin: 0;
}


/*--- Main Content ---*/

.president {
  max-width: 65.5%;
  margin-bottom: 30px;
  -webkit-box-shadow: 2px 2px 5px black;
          box-shadow: 2px 2px 5px black;
}

blockquote {
  border-left: 5px solid #7d92b8;
}


/*--- Modals ---*/

.modal-header {
  background-color: rgba(107, 172, 247, 0.2);
}

.chicago-repair {
  -webkit-box-shadow: 2px 2px 5px black;
          box-shadow: 2px 2px 5px black;
}


/*--- Media Queries ---*/

@media (min-width: 375px) {
  .sub-logo {
    font-size: .54em;
  }
  .phone {
    font-size: .9em;
  }
  .welcome {
    font-size: 1.65em;
    top: -204px;
  }
  .welcome>h3 {
    font-size: 1.075em;
  }
}

@media (min-height: 450px) {
  .navbar-fixed-top .main-menu {
    max-height: 100%;
    border-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}

@media (min-width: 480px) {
  .welcome {
    font-size: 2.14em;
    top: -260px;
  }
}

@media (max-width: 767px) {
  .top-navbar .navbar-nav .open .services-menu>li>a {
    color: #255195;
  }
  .top-navbar .navbar-nav .open .services-menu>li>a:focus,
  .top-navbar .navbar-nav .open .services-menu>li>a:hover {
    color: #7d92b8;
  }
}

@media (max-device-width: 767px) and (orientation: landscape) {
  .navbar-fixed-top .navbar-collapse {
    max-height: 210px;
  }
}

@media (min-width: 768px) {
  body {
    font-size: 14px;
  }
  .top-navbar {
    background: -webkit-radial-gradient(circle, white, transparent), url('../images/cloud-97453_1920.jpg') no-repeat center, #6bacf7;
    background: -o-radial-gradient(circle, white, transparent), url('../images/cloud-97453_1920.jpg') no-repeat center, #6bacf7;
    background: radial-gradient(circle, white, transparent), url('../images/cloud-97453_1920.jpg') no-repeat center, #6bacf7;
    background-position: center;
    background-size: cover;
  }
  .navbar-nav>li>a {
    padding-top: 27px;
    padding-bottom: 27px;
  }
  .welcome {
    font-size: 3em;
  }
  .chicago-repair {
    margin-top: 22%;
  }
}

@media (min-width: 992px) {
  body {
    padding-top: 55px;
  }
  .navbar-nav>li>a {
    padding-top: 17px;
    padding-bottom: 17px;
  }
  .phone {
    position: absolute;
    margin-left: inherit;
    width: 992px;
    text-align: center;
    top: 20px;
  }
  .item>img.center-images {
    max-height: 380px;
  }
}

@media (min-width: 1200px) {
  .phone {
    width: 1200px;
  }
  .item>img.center-images {
    max-height: 480px;
  }
  .welcome {
    font-size: 4em;
    top: -345px;
  }
  .spotlight {
    height: 353px;
  }
  .spotlight>blockquote {
    position: relative;
    left: 390px;
    top: -134px;
  }
}