/*------------------------------------------------------------------
[Master Stylesheet]

Project:			Kicko - Free Agency Web Template
Version:			1.1
Last change:	01/12/2016
Assigned to:	Sven Lennartz (sl)
Primary use:	Company 
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1. Body
2. Header / #kicko_header
3. Navigation / .kicko_nav
4. About / .about
5. 



-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Color codes]

Background:	#ffffff (white)
Content:		#f46400 (orange)
Header h1:	#454444,#f46400,#ffffff (light Black, orange, white)

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Typography]

Body:							Open Sans;
Headers:					38px, Montserrat;

-------------------------------------------------------------------*/



/*------------------------------------------------------------------
			Dynamic CSS For All Sections
-------------------------------------------------------------------*/
body{
  font-family: 'Open Sans', sans-serif;
}
h1, h2, h3, h4{
	text-transform: uppercase;
}
section{
	padding: 100px 0;
}
.headtitle h1 {
  font-family: Montserrat;
  font-size: 38px;
  font-weight: 600;
  margin-bottom: 25px;
  margin-top: 0;
}
.headtitle p {
  font-family: "open sans";
  font-size: 18px;
  font-weight: 400;
  margin: 0;
}
.headtitle {
  margin-bottom: 62px;
}
.desc_text {
  font-size: 14px;
} 


/*------------------------------------------------------------------
			Header Sections
-------------------------------------------------------------------*/
/* Nav Bar */
#kicko_header {
  position: relative;
}
.kicko_nav {
  background-color: transparent;
  border: medium none;
  position: fixed;
  transition: all 0.2s ease 0s;
  width: 100%;
  z-index: 16;
}
#kicko_header button {
  margin-top: 20px;
}
#kicko_header button:focus{
	background: transparent;
}
#kicko_header .kicko_nav{
	border-radius: 0;
}
.kicko_nav_bg {
  background: #c2c2c2;
}
.kicko_nav .brand_image > img {
  max-width: 195px;
  width: 100%;
}
.kicko_nav .navbar-nav > li > a {
  color: #fff;
  font-size: 16px;
  margin: 30px 5px 0;
  padding: 5px;
  text-transform: uppercase;
  font-family: Montserrat;
}
.kicko_nav .brand_image{
	height: auto;
}
.kicko_nav .navbar-nav > li a:focus,
.kicko_nav .navbar-nav > .active a:focus {
  color: #fff;
  background-color: transparent;
}
.kicko_nav .navbar-nav > .active  a,
.kicko_nav .navbar-nav > .active  a:hover,
.kicko_nav .navbar-nav > li  a:hover {
  background-color: transparent;
  color: #f46400 !important;
}

.kicko_nav .navbar-toggle{
	border:none; 
}
.kicko_nav .navbar-toggle *{
	transition: .3s all;
}
.kicko_nav .navbar-toggle:hover{
	background: transparent;
}
.cross .bar1 {
  transform: rotate(45deg);
}
.cross .bar2 {
  display: none;
}
.cross .bar3 {
  margin-top: -2px !important;
  transform: rotate(-45deg);
}

/* Carousel */
.carousel-indicators .active{
	box-shadow: 0px 0px 6px 0px rgba(250,70,89,1);
	background: #f46400;
	border-color: #ffffff;
}

.carousel-indicators li {
  background-color: #dbcacf;
  border-color: #dbcace;
}
#headerCarousel .header-text {
  margin-top: -70px;
  position: absolute;
  top: 50%;
  width: 100%;
}
#headerCarousel .item > img {
  max-height: 600px;
  min-width: 100%;
}
#headerCarousel .header-text h2 {
  color: #fff;
  font-family: Montserrat;
  font-size: 45px;
  font-weight: bold;
  margin-bottom: 48px;
  text-transform: uppercase;
}
#headerCarousel .header-text h3 {
  font-family: Montserrat;
  color: #fff;
  font-size: 16px;
}
#headerCarousel h2,h3{
	margin: 0;
}

.slider_learn {
  background: #f46400 none repeat scroll 0 0;
  border-radius: 6px;
  color: #fff;
  display: inline-block;
  font-weight: 700;
  margin-top: 50px;
  padding: 20px 70px;
}
.slider_learn:hover, .slider_learn:focus{
	text-decoration: none;
	color: #fff;
}


/*------------------------------------------------------------------
				about Section
-------------------------------------------------------------------*/
.about {
  background: #f4f4f4 none repeat scroll 0 0;
}
.about .headtitle h1 {
  color: #454444;
}
.about .headtitle p{
  color: #797878;
}
.about_left h3 {
  color: #454444;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 25px;
}
.about_left > ul {
  padding: 0 0 0 15px;
}
.about_left p, .about_left ul li p{
	color: #8b8a8a;
	font-family: Montserrat;
	font-size: 16px;
}
.about_left ul li{
	color: #f46400;
	font-size: 16px;
}
.about_left .title_two {
  margin-top: 40px;
}
.about_video{
	position: relative;
}
.about_video img {
  cursor: pointer;
  margin: auto;
}
#about_video_modal .modal-body{
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}
#about_video_modal .modal-body iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.about_video .play {
  left: 50%;
  margin: -54px 0 0 -54px;
  position: absolute;
  top: 50%;
  opacity: .9;
}
.about_video:hover .play{
	opacity: 1;
}
#about_video_modal .close {
  color: #fff;
  font-size: 30px;
  margin-right: -23px;
  opacity: .9;
}
#about_video_modal .close:hover {
  opacity: 1;
}

/*------------------------------------------------------------------
				OUR PORTFOLIO Section
-------------------------------------------------------------------*/

.our_portfolio{
	background: #f4f4f4;
}
.our_portfolio .headtitle h1{
  color: #454444;
}
.our_portfolio .headtitle p{
  color: #797878;
}
.our_portfolio .portfolio_img img{
	margin: auto;
}



/*------------------------------------------------------------------
				Contact us Section
-------------------------------------------------------------------*/
.contact{
	background: #545456;
	color: #fff;
}
.contact .headtitle h1, .contact h3 {
  color: #f46400;
}
.contact .headtitle p {
  color: #c4c4c5;
}
.send-box {
  clear: both;
  text-align: center;
}
.send-box .send-btn {
  background: #f46400 none repeat scroll 0 0;
  border: 0 none;
  color: #fff;
  font-weight: 600;
  max-width: 380px;
  padding: 10px;
  width: calc(100% - 30px);
}
#contact_form .form-control {
  background: #4c4c4d none repeat scroll 0 0;
  border: medium none;
  color: #fff;
}
.message-box {
  height: 265px !important;
  resize: none;
}
.contact .media-left {
  font-size: 30px;
}
.media-left .icons {
  background: #f46400 none repeat scroll 0 0;
  border-radius: 50%;
  height: 45px;
  margin-top: 7px;
  text-align: center;
  width: 45px;
}
#contact_form input {
  height: 52px;
}



/*------------------------------------------------------------------
				Follow us Section
-------------------------------------------------------------------*/
.follow {
  background-image: url("../images/follow_bg.jpg");
  background-position: center top;
  background-size: cover;
  padding-bottom: 20px;
}

.follow .headtitle h1{
  color: #fff;
}
.follow .headtitle p {
  color: #ddc9d1;
}
.follow_social {
  clear: both;
  list-style: outside none none;
  margin: auto auto 60px;
  padding: 0;
  width: 275px;
}

.contact_left_title{
	margin-bottom: 48px;
}
.follow_social > li {
  border: 2px solid #fff;
  border-radius: 50%;
  display: inline-block;
  height: 60px;
  text-align: center;
  width: 60px;
  transition: .3s all;
}
.follow_social > li a {
  color: #fff;
  display: block;
  font-size: 25px;
  line-height: 2.3;
}
.follow_social > li:hover {
  border: 2px solid #fff;
  background: #f46400;
}
.copyright{
	text-align: center;
	color: #fff;
}
.copyright a{
  color: #4caf50;
  text-decoration: none;
}

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

@media screen and (min-width: 992px) and (max-width: 1199px) {
	.review_slider_control {
	  max-width: 612px;
	}
}

@media screen and (max-width: 1180px) {

	.service_learn {
	  margin-top: 30px;
	}
	#headerCarousel .header-text h2 {
	  margin-bottom: 20px;
	}
	.slider_learn {
	  margin-top: 30px;
	}
}

@media screen and (max-width: 991px) {
	.review_slider_desc{
		margin-top: 20px;
	}
	.kicko_nav .brand_image > img {
	  max-width: 170px;
	}
	.kicko_nav .navbar-nav > li > a {
	  margin: 26px 0;
	}
	#headerCarousel .header-text h2 {
	  font-size: 38px;
	}
	.slider_learn {
	  margin-top: 20px;
	}
	.about_video {
	  margin-top: 30px;
	}
	.contact h3 {
	  text-align: center;
	}
	#contact_form{
		margin-top: 30px;
	}
	.media {
	  margin: 5px auto;
	  width: 250px;
	}
	
}


@media screen and (max-width: 785px) {
	.review_slider_control .left.carousel-control {
  	left: -5px;
	}
	.review_slider_control .right.carousel-control {
	  right: -5px;
	}
	#review_outer_slider .carousel-control {
	  height: 50px;
	  width: 50px;
	  font-size: 27px;
	  line-height: 2;
	}
	#headerCarousel {
	  padding-top: 75px;
	}
	.kicko_nav{
		background: #c2c2c2 none repeat scroll 0 0;
	}

	#kicko_header #bs-example-navbar-collapse-1 {
	  background: #c2c2c2 none repeat scroll 0 0;
	  border: 0 none;
	  box-shadow: none;
	}
	
	/* Change Navbar brackpoint */
  #kicko_header .navbar-header {
      float: none;
  }
  #kicko_header .navbar-toggle {
      display: block;
  }
  #kicko_header .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  #kicko_header .navbar-collapse.collapse {
      display: none!important;
  }
  #kicko_header .navbar-nav {
      float: none!important;
      margin: 7.5px -15px;
  }
  #kicko_header .navbar-nav>li {
      float: none;
  }
  #kicko_header .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  #kicko_header .navbar-text {
      float: none;
      margin: 15px 0;
  }
  /* since 3.1.0 */
  #kicko_header .navbar-collapse.collapse.in { 
      display: block!important;
  }
  #kicko_header .collapsing {
      overflow: hidden!important;
  }

  .kicko_nav .brand_image > img {
	  max-width: 150px;
	}

	#kicko_header .navbar-nav > li > a{
		margin: 0 15px;
	}
}

@media screen and (max-width: 767px) {
	.team_member {
	  margin: 20px auto;
	}
	.about_left h3, .about_left p {
	  text-align: center;
	}
	.about_left > ul {
    margin: auto;
    max-width: 325px;
  }
	
}

@media screen and (max-width: 480px) {
	.review_slider_desc {
	  padding: 50px;
	}
	section {
	  padding: 60px 0;
	}
}