/*
 Theme Name:   King Cotton
 Theme URI:    https://github.com/studiomatrix/king-cotton
 Description:  feeling-inspired Child Theme
 Author:       engineers+zak@studiomatrix.com.au
 Author URI:   https://github.com/studiomatrix/
 Template:     feeling-inspired
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         bs4, Bootstrap 4
 Text Domain:  feeling-inspired

 All these themes + css files, what tha?

 The theory goes like this:

 Overrides  -  parent theme or plugins w/e, all go here. This gets loaded last.
 WP content - Anything mentioned in wordpress content also goes here (or in this themes dir).
 Otherwise  - Everything else goes in parent theme.

*/
@font-face {
    font-family: 'Mega Fresh';
    src: url('fonts/Mega Fresh.ttf');
}

body {
  color: #696969;
  font-family: 'acumin-pro'
}

footer {
  background-color: #0c9ebf;
}

h1 {
  font-family: 'Mega Fresh';
  color: #365989;
}

h2, h3 {
  color: #0c9ebf;
}
a {
  color: #365989;
  text-decoration: none;
}

a:hover {
  color: #696969;

}

input.btn {
  cursor: pointer!important;
}

.display-1, .display-2, .display-3, .display-4 {
  font-family: 'acumin-pro', serif;
}

.kc-feature-font {
  font-family: 'Mega Fresh';
  color: #365989;
  font-weight: 100;
  letter-spacing: 2px;
}

.kc-font-lite {
  font-size: 1.21rem;
  font-weight: 100;
  line-height: 28px;
  font-family: 'acumin-pro'
}

.carousel .display-4 {
  font-size: 2.5rem;
}
.carousel .display-2 {
    font-size: 3.5rem;
}

/* font color's */
.kc-heading-color {
  color: #0c9ebf;
  font-weight: bold;
}

.kc-heading-color span {
  font-weight: normal;
}
.kc-white {
  color: #fff;
}

.kc-navy {
  color: #365989;
}

.kc-blue {
  color: #005296;
}
.kc-babyblue {
  color: #92d9ef;
}
.kc-aqua {
  color: #20a1c0;
}

.kc-grey {
  color: #696969;
}

/* background colors */
.fi-banner {
  background-color: #0c9ebf;
}

.kc-background-grey {
  background-color: #fafafa;
}

.kc-background-blue {
  background-color: #0c9ebf;
}

.kc-background-babyblue {
  background-color: #92d9ef;
}

.kc-background-navy {
  background-color: #005296;
  color: #fff;
}

.kc-background h1, .kc-background h2, .kc-background h3, .kc-background h4, .kc-background h5, .kc-background h6 {
  color: #fff;
}

/* Shadows */
.kc-shadow-top-right {
  -webkit-box-shadow: -1px 0px 15px 3px #cdcdcd inset;
  -moz-box-shadow: -1px 0px 15px 3px #cdcdcd inset;
  box-shadow: -1px 0px 15px 3px #cdcdcd inset;
  padding-right: 0;
}

.kc-shadow-none {
  -webkit-box-shadow: none!important;
  -moz-box-shadow: none!important;
  box-shadow: none!important;
}
.kc-shadow-bottom {
  -webkit-box-shadow: 0 8px 15px -2px #cdcdcd;
  -moz-box-shadow: 0 8px 15px -2px #cdcdcd;
  box-shadow: 0 8px 15px -2px #cdcdcd;
}

/* Buttons */
.btn.btn-primary, .btn.btn-secondary {
  background-color: #fbcc74;
  border-radius: 0;
  border: none;
  -webkit-box-shadow: 0 8px 15px -2px #cdcdcd;
  -moz-box-shadow: 0 8px 15px -2px #cdcdcd;
  box-shadow: 0 8px 15px -2px #cdcdcd;
  text-transform: uppercase;
  font-weight: bold;
  padding: 10px;
}
.fi-bolder {
  font-weight: 900;
}
/* extent/overide fi */
section .fi-booking .jumbotron {
  background-color: #fafafa;
}

section.fi-contribute .jumbotron.fi-featurette {
  background-color: #005296;
}

section.fi-latest {
  background-color: #0c9ebf;
}

section.fi-latest .jumbotron h1, section.fi-latest .jumbotron p {
  color: #fff;
}

div.fi-who-graphs > div.row div {
  border-radius: 50%;
  border: 3px solid #005296;
  padding: 5px 10px 40px 10px;
}

div.fi-who-graphs > div.row div img {
  width: 60px;
}


/* Blogs */
div.fi-blog-copy h5 {
  color: #fbcc74;
}

div.blog-sidebar h5 {
  color: #0c9ebf;
  font-size: 17px;
  text-transform: uppercase;
}

div.fi-posts li {
  background-color: #0c9ebf;
}

div.fi-posts li h4, div.fi-posts li h5 {
  color: #fbcc74;
    font-weight: bold;
}

div.fi-posts li p,  div.fi-posts li a {
   color: #fff;

}
div.fi-posts img {
  width: 100%;
}
.fi-about .card {
  margin-top: 50px;
}

.fi-about .fi-card {
  padding: 50px;
}

.fi-locate {
  clear:left;
  margin-top: 180px;
  margin-bottom: 120px;
}

.fi-locate #map {
  height: 480px;
}

.kc-contribution .jumbotron {
  background-color: #005296;
  color: #fff;
  margin: 60px 0 80px 160px;
  height: 380px;
}

.kc-contribution .jumbotron h1, .kc-contribution .jumbotron h2, .kc-contribution .jumbotron h3, .kc-contribution .jumbotron h4 {
  color: #fff;
}

.input-group-addon {
  background-color: #fff!important;
  border: none;
  -webkit-box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  -moz-box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  margin-left: -5px;
}
section.locate-booking {
  margin-top: 40px;
}

section.fi-maps-search #map {
  height: 700px;
  margin: 48px 10px 0 20px;
  padding: 30px 50px 20px 60px;
  background: url(img/marker.png) no-repeat left center;
}

section.fi-maps-search .maps-distance {
  float: right;
  margin-top: -1px;
}

div.maps-search-list {
  list-style: none;
  height: 62vh;
}

div.maps-results-wrap {
  padding-right: 0;
}

div.maps-result {
  min-height: 130px;
  margin: 10px 10px 0 0;
  padding: 20px 10px 5px 50px;
  background: url(img/marker.png) no-repeat left center;
}

div.maps-search-list > div  h4 {
  font-size: 15px;
  font-weight: bold;
  color: #005296;
}

div.maps-pagination a.page-link {
  border: none;
  background-color: transparent;
}

div.maps-pagination p {
  margin-top: 10px;
  font-size: 19px;
  color: #005296
}

div.maps-pagination a.page-link i.kc-yellow {
  color: #fbcc74;
}

div.maps-pagination > ul.pagination > li:first-child {
  margin-right: 40px;
}

div.maps-pagination > ul.pagination > li:last-child {
  margin-left: 40px;
}

div.maps-search-form {
  margin-right: 0;
}

textarea {
  border-radius: 0!important;
  border: none!important;
  -webkit-box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  -moz-box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  resize: none;
  color: #696969;

}

input {
  border-radius: 0!important;
  border: none!important;
  -webkit-box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  -moz-box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
  box-shadow: 4px 3px 19px -4px rgba(221,221,221,1);
}

.form-control::-webkit-input-placeholder { color: #dcdcdc; }  /* WebKit, Blink, Edge */
.form-control:-moz-placeholder { color: #dcdcdc; }  /* Mozilla Firefox 4 to 18 */
.form-control::-moz-placeholder { color: #dcdcdc; }  /* Mozilla Firefox 19+ */
.form-control:-ms-input-placeholder { color: wh#dcdcdcite; }  /* Internet Explorer 10-11 */
.form-control::-ms-input-placeholder { color: #dcdcdc; }

footer a {
  color: #fff;
}

.fi-partners img {
  padding-right: 25px;
}

.blog-list img {
  width: 100%;
}

@media(max-width: 800px) {

  .kc-contribution .jumbotron {
    max-width: 100%;
    margin: 60px 0 80px 0;
    height: 100%;
  }

  .kc-contribution h5.px-5 {
    padding : 0!important;
  }

  ul.maps-search-list {
    max-width: 100%;
    margin-left: 0;
    padding-left: 0;
  }

  section.kc-contact {
    margin-top: 0;
  }

  section.fi-maps-search {
    height: 90vh;
  }

  section.contact-form {
    height: auto;
  }
  div.fi-who-graphs > div.row div  {
    margin-bottom: 40px!important;
  }
  div.fi-card-image img {
    width: 100%;
    margin-bottom: 10px;
  }
  section.fi-insta {
    margin-top: 0;
  }

@media(max-width: 600px) {
  .jumbotron {
    margin-bottom: 0 !important;
    padding: 40px 40px 10px 40px;
  }
  h1 {
    font-size: 32px;
  }
  section.fi-maps-search {
    height: 160vh;
    overflow: visible;
    display: block;
  }

  section.fi-maps-search div.container {
    padding: 0;
    margin: 0;
  }

  section.fi-maps-search > div.container > div.row > div.col-sm-6:last-child {
      padding: 10px;
  }

  section.fi-maps-search #map {
    margin-left: 0;
    margin-right: 0;
  }

  section.locate-booking {
    margin-top: 520px;
  }
  section.kc-contribution h5 {
    font-size: 16px;
  }

  section.kc-contribution div.fi-jumbotron {
    padding: 5px;
  }
section.kc-contribution
  div.carousel-item div.p-5  {
    padding: 10px!important;
  }

  div.carousel-item div.m-5 {
    margin: 15px!important;
  }

  section.fi-story {
    margin-top: 0;
  }

  div.fi-jumbotron > div.container {
    padding: 0;
  }
}