@import url('//fonts.googleapis.com/css?family=Titillium+Web:400italic');

/* ==========================================================================

 * Author: Daniely Wright

 * URL: http://danielyewright.com

 * Theme Name: Kreativa

 * Description: Bootstrap 3 Landing Page Theme

 * Version: 1.0

========================================================================== */





/* ==========================================================================

   Global Styles

========================================================================== */

body { font-family: 'opensans-regular', sans-serif ; font-size: 15px; font-style: normal; font-weight: 400; line-height: 30px; color: #666; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

section { position: relative; padding: 50px 0; overflow: hidden; }

.dark-row { background-color: #F3F3F3; position: relative; }
.dark-row:before { content: ''; display: block; position: absolute; background-color: #F3F3F3; height: 100%; top: 0; width: 99999px; left: -9999px; }


@media (max-width: 768px) {

  body { text-align: center; }

}


/* Headings & Titles */


h1, h2, h3, h4, h5, h6 { font-family: 'montserrat-regular', sans-serif; font-style: normal; }

h3 { font: 30px/40px 'montserrat-bold', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #bf0202; }


/* Paragraph & Typographic */

p { line-height: 28px; margin-bottom: 25px; }


/* Links */

a { color: #cb3b3b; word-wrap: break-word; }

a:hover,
a:focus {
  color: #cb3b3b; text-decoration: none; outline: 0;
  -webkit-transition: color .2s ease-in-out;
  -moz-transition: color .2s ease-in-out;
  -ms-transition: color .2s ease-in-out;
  -o-transition: color .2s ease-in-out;
  transition: color .2s ease-in-out;
}



/* Misc. */



.pad-bottom { padding-bottom: 95px; }

.pad-top { padding-top: 40px; }

.logo-accent { color: #cb3b3b; }



/* Bootstrap Modifications

-------------------------------------------------------------------------- */



/* Buttons */



.btn {

  border-radius: 2px; font: 14px/24px 'montserrat-bold', sans-serif; text-transform: uppercase; padding: 12px 20px; letter-spacing: 2px; text-transform: uppercase;
  -webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;

}

.btn-theme { background-color: #bf0202; color: #fff; }

.btn-theme:hover, .btn-theme:focus { background-color: #e14747; color: #fff; }

.btn-trial { background-color: #bf0202; color: #fff; }
.btn-trial:hover { background-color: #1d73c5; color: #fff; }

.buttons a { margin-left: 15px; margin-right: 15px; }


/* Form Control */

input[type="email"] { min-width: 250px; font-size: 14px; }

.form-control { padding: 12px 20px; height: 50px; margin-right: 20px; text-align: center; border: 0; background-color: #d3d9d9; }


@media (max-width: 320px) {

  .form-control { margin-bottom: 10px; }

}

@media (max-width: 768px) {

  .form-control { margin-bottom: 10px; }

}

.form-control:focus { 

	box-shadow: none; border: 0; background-color: #777; color: #ccc;
  -webkit-transition: background-color .2s ease-in-out;
     -moz-transition: background-color .2s ease-in-out;
          transition: background-color .2s ease-in-out;

}



/* ==========================================================================

   Site Sections

========================================================================== */



/* Navbar

-------------------------------------------------------------------------- */


.btn-schedule { background-color: #85c45b; line-height: 18px; color: white; float: right; letter-spacing: 0; }
.btn-schedule:hover { background-color: #97da6b; color: white; }
.btn-schedule .fa { margin-right: 10px; }

.navbar-default { background-color: rgba(255, 255, 255, 0.95); letter-spacing: 1px; padding: 10px 0; }
.navbar-default .navbar-brand { color: #58687a; font-family: 'montserrat-bold', sans-serif; font-size: 20px; font-weight: 700; width: 125px; padding: 0; height: 45px; }

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:hover { color: #58687a; }

.navbar-default .navbar-nav > li > a { font-family: 'montserrat-regular', sans-serif; font-size: 11px; text-transform: uppercase; color: #58687a; padding: 10px 13px; }

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus { color: #bf0202; }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus { background-color: transparent; color: #bf0202; }

.navbar-default .navbar-right .fa { color: #58687a; font-size: 20px; }

.navbar-default .navbar-right .fa-facebook:hover {
  color: #3b5998;
  -webkit-transition: color .2s ease-in-out;
     -moz-transition: color .2s ease-in-out;
          transition: color .2s ease-in-out;
}

.navbar-default .navbar-right .fa-twitter:hover {
  color: #00aced;
  -webkit-transition: color .2s ease-in-out;
     -moz-transition: color .2s ease-in-out;
          transition: color .2s ease-in-out;
}

.navbar-default .navbar-right .fa-google-plus:hover {
  color: #dd4b39;
  -webkit-transition: color .2s ease-in-out;
     -moz-transition: color .2s ease-in-out;
          transition: color .2s ease-in-out;
}


/* Modified Responsive CSS */

@media (max-width: 979px) {

	.btn-navbar { display: none; }

	.navbar .nav-collapse { clear: none; }

	.nav-collapse { height: auto; overflow: auto;	}

	.navbar .nav { float: left; margin: 0 10px 0 0;	}

	.navbar .brand { margin-left: -20px; padding: 8px 20px 12px; }

	.navbar .dropdown-menu:before, 
	.navbar .dropdown-menu:after {
		display: block;
	}

	.navbar .nav > li > a, 
	.navbar .dropdown-menu a { border-radius: 0; color: #999999; font-weight: normal; padding: 10px 10px 11px; }

	.navbar .nav > li { float: left; }

	.navbar .dropdown-menu {

		background-clip: padding-box;
		background-color: #FFFFFF;
		border-color: rgba(0, 0, 0, 0.2);
		border-radius: 0 0 5px 5px;
		border-style: solid;
		border-width: 1px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
		display: none;
		float: left;
		left: 0;
		list-style: none outside none;
		margin: 0;
		min-width: 160px;
		padding: 4px 0;
		position: absolute;
		top: 100%;
		z-index: 1000;

	}

	.navbar-form, .navbar-search {

		border:none;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		float: left;
		margin-bottom: 0;
		margin-top:6px;
		padding: 9px 15px;

	}

	.navbar .nav.pull-right {

		float: right;
		margin-left: auto;

	}

}



@media (max-width: 550px) {

	.btn-navbar {

		display: block;

	}

	.navbar .nav-collapse {

		clear: left;

	}



	.nav-collapse {

		height: 0;
		overflow: hidden;

	}



	.navbar .nav {

		float: none;
		margin: 0 0 9px;

	}



	.navbar .brand {

		margin: 0 0 0 -5px;
		padding-left: 10px;
		padding-right: 10px;

	}



	.navbar .dropdown-menu:before, 
	.navbar .dropdown-menu:after {

		display: none;

	}



	.navbar .nav > li > a, 
	.navbar .dropdown-menu a {

		border-radius: 3px 3px 3px 3px;
		color: #999999;
		font-weight: bold;
		padding: 6px 15px;

	}



	.navbar .nav > li {

		float: none;

	}


	.navbar .dropdown-menu {

		background-color: transparent;
		border: medium none;
		border-radius: 0 0 0 0;
		box-shadow: none;
		display: block;
		float: none;
		left: auto;
		margin: 0 15px;
		max-width: none;
		padding: 0;
		position: static;
		top: auto;

	}

	.navbar-form, .navbar-search {

		border-bottom: 1px solid #222222;
		border-top: 1px solid #222222;
		box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
		float: none;
		margin: 9px 0;
		padding: 9px 15px;

	}

	.navbar .nav.pull-right {

		float: none;
		margin-left: 0;

	}

}





/* Hero (Header)

-------------------------------------------------------------------------- */



.hero {

  *margin-top: 50px;
  padding-top: 66px;
  padding-bottom: 0;
  color: #ccc;
  width: 100%; overflow: hidden; display: table; background: transparent url('../img/hero.jpg') center top no-repeat; background-size: contain; height: 600px;


}

.hero .container {
	
	display: table-cell; vertical-align: middle; 
	
}



.hero h1 {

  font-size: 40px;
  color: #bf0202;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  padding: 0; position: relative;

}

.hero p {
	
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
  font-size: 24px; color: #333;
	
}

.hero h2 {

  font-size: 25px; text-align: center;

}


.hero .col-md-4 .container { padding: 30px 0; margin: 0 0 0 40px; }

.hero .hero-text { background-color: rgba(255,255,255,.5); padding: 30px; }

@media (max-width: 480px) {

  .hero h1 { font-size: 24px; }

}



/* Features Wrap

-------------------------------------------------------------------------- */

.featureswrap { background-color: #fff; }

.featureswrap h3 {

  font: 16px/20px 'montserrat-bold', sans-serif;
  text-transform: uppercase;
  color: #bf0202;
  margin-bottom: 5px;

}

.featureswrap h4 { padding: 10px; }

.featureswrap .row { padding: 100px 0;  }

.featureswrap h3.text-center { font-size: 30px; }

.drive-process dt { float: left; width: 50px; background-color: #bf0202; color: white; border-radius: 50px; font-weight: bold; line-height: 20px; height: 50px; text-align: center; font-size: 10px; }
.drive-process dt mark { background: none; color: white; font-size: 18px; display: block; line-height: 8px; margin-top: 15px; }
.drive-process dd { margin: 20px 0 20px 60px; padding-top: 11px; line-height: 22px; min-height: 50px; vertical-align: middle; font-size: 16px; }

@media (max-width: 768px) {

  .featureswrap .col-md-6 { padding-top: 0; padding-bottom: 0; }

}



/* Pricing

-------------------------------------------------------------------------- */



.pricing {

  background: #f3f3f3;
  padding: 150px 0;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  text-align: center; 

}

.pricing li, .pricing li:last-child { border-bottom: 1px solid #eee; }
.pricing li.addon { font-weight: bold; }
.pricing li.addon .fa { color: #bf0202; margin-right: 10px; }
.pricing .price-blocks { margin-top: 220px; }
.pricing .price-blocks:before { content: ''; display: block; height: 50px; clear: both; }

.pricing .price-block {

  background: #fff;
  border: 1px solid #E6E6E6;
  text-align: center;
  margin-bottom: 36px;
  position: relative;
  height: 1440px;

}

.pricing .price-block p {	line-height: 20px; font-size: 13px; padding: 20px; text-align: justify; font-family: 'montserrat-regular', sans-serif; }

.package-icon { position: absolute; height: 80px; width: 100%; background-size: contain; background-position: center top; background-repeat: no-repeat;	margin-top: -180px; }

.package-icon-1 { background-image: url('../img/package-icon-1.png'); background-position: center 20px; }
.package-icon-2 { background-image: url('../img/package-icon-2.png'); }
.package-icon-3 { background-image: url('../img/package-icon-3.png'); }


.plan-title {

  font: 30px/40px 'montserrat-bold', sans-serif;
  padding: 10px 20px 6px 20px;
  text-align: center;
  text-transform: uppercase;
  margin-top: -100px;
  position: absolute; width: 100%;

}

.plan-title span { font: 16px/20px 'Titillium Web', sans-serif; display: block; font-style: italic; text-transform: none; }

.plan-price {

  font-family: 'montserrat-bold', sans-serif;
  font-size: 30px;
  color: #bf0202;
  padding: 6px 30px 6px 30px;
  margin-bottom: 0;
  margin-top: 50px;
  text-align: center;

}

.plan-price span {

	font-size: 14px;
	color: #bbb;
	display: block;
	margin-top: -10px;
	letter-spacing: 0;

}



ul.features {

  margin: 12px 0 0 0;
  list-style: none;

}



ul.features li {

  line-height: 20px;
  margin-bottom: 0;
  text-align: center;

}



.plan-sign-up {

  padding: 40px 15px;
  margin: 0;
  text-align: center;
  position: absolute;
	bottom: 0;
	width: 100%;

}

.plan-sign-up a { letter-spacing: 0; }


.popular-package { margin-top: -80px; background-color: transparent; }
.popular-package .price-block { background-color: #bf0202; color: white; border: none; height: 1500px; }
.popular-package .btn-theme { background-color: white; color: #bf0202; }
.popular-package .plan-title { margin-top: -100px; }
.popular-package .plan-price { color: white; font-size: 35px; padding-top: 50px; }
.popular-package .plan-price span { color: rgba(255,255,255,.5); }
.popular-package .package-icon { height: 150px; margin-top: -250px; background-position: center 30px; }
.popular-package ul.features { }
.popular-package ul.features li { border-bottom: 1px solid rgba(255,255,255,0.3); }
.popular-package ul.features li.addon { color: white; }
.popular-package ul.features li.addon .fa { color: white; }

/* Clients

-------------------------------------------------------------------------- */



.clientswrap {

  background-color: #fff;
  padding: 0 50px 100px;

}



.clientswrap h3 { color: #bf0202; padding: 0; margin-bottom: 5px; line-height: 20px; }
.clientswrap h4 { padding: 10px; }

.clientswrap img { display: inline-block; line-height: 50px; vertical-align: bottom; margin: 0 10px;  }


@media (max-width: 768px) {

  .clientswrap img {

    display: table;
    margin: 0 auto;
    padding: 10px;

  }

}



/* Testimonials

-------------------------------------------------------------------------- */

#testimonials { padding: 0; }
.testimonials { background-color: #f3f3f3; padding: 60px 0 0; clear: both; margin-top: 50px; }
.testimonials h4 { font-style: italic; font-family: 'Titillium Web', sans-serif; margin: 50px;  }
.testimonials small { }

.carousel:before { content: '\f10d'; display: block; position: absolute; left: -50px; color: #ddd; top: -20px; width: 100px; height: 100px; font-size: 60px; font-family: "FontAwesome"; }
.carousel:after { content: '\f10e'; display: block; position: absolute; right: -50px; color: #ddd; bottom: 60px; width: 100px; height: 100px; font-size: 60px; font-family: "FontAwesome"; }
.carousel-indicators li { border-color: #666; }
.carousel-indicators li.active { border: none; background-color: #666; }



/* Contact

-------------------------------------------------------------------------- */

#contact { padding-bottom: 0; }
.contactwrap {  background-color: #fff; padding: 10px 0; }

.contactwrap h3 { color: #bf0202; }

.contactwrap small { font-size: 11px; }

.contactwrap .input-group { width: 250px; margin-right: 10px; }


/* Footer */

.footerwrap {

  background-color: #333;
  color: #ccc;
  padding: 60px 0;
  border-top: 5px solid #ccc;
  font-size: 13px;

}

.footerwrap h2 { color: #fff; }

.footerwrap h3 { font-size: 16px; color: #fff; }

.footerwrap .col-md-2 a, .footerwrap .col-md-3 a { color: #fff; }
.footerwrap .col-md-2 a:hover, .footerwrap .col-md-3 a:hover { color: #bf0202; }
.footerwrap .col-md-6 a { font-weight: bold; }
.footerwrap .col-md-6 .fa { color: #bf0202; }
.footerwrap .col-md-2 hr, .footerwrap .col-md-3 hr { border-top: 1px solid #666; }

.footerwrap .social-icons i { font-size: 20px; margin-right: 15px; }

.logo-footer { background: transparent url('../img/logo-white.png') 0 0 no-repeat; height: 50px; background-size: contain; font-size: 0; color: transparent; text-indent: -9999px; overflow: hidden; }

/* ==========================================================================

   IE 10 in Windows 8 and Windows Phone 8 fix

========================================================================== */

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

ul li { margin-bottom: 0; }

::selection { background: #bf0202; 	color: white; }
.cte-learn-more { margin-top: 10px; }

