@import url("Montserrat_Family/stylesheet.css");

/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : ULaunch - Multi Purpose Products Landing Page
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. General css
02. Navigation area css
03. Slider area css
04. Step area css
05. Features area css
06. About Product area css
07. About Facts area css
08. Product area css
09. Testimonial area css
10. Pricing Plan area css
11. Buynow Infobar area css
12. Newsletter Form area css
13. Contact Us area css
14. Footer area css
15. Media Screens
-------------------------------------------------------------------------------------- */

/************************************/
/***** 	   01. General css		 ****/
/************************************/

body{
	font-size: 16px;
	font-family: "Montserrat Light";
	background: #f7f7f7;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin-top:0;
	font-weight: 500;
}

img{
	max-width: 100%;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	background: #0f527a;
	z-index: 9999;
}

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid #Fff;
  top: calc(50% - 15px);
  animation: loader 2s infinite ease;
}

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  animation: loader-inner 2s infinite ease-in;
}

.btn-custom{
	display: inline-block;
	font-size: 16px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 14px 30px;
	min-width: 170px;
	text-align: center;
	color: #fff;
	box-shadow: 1px 2px 46px 0px rgba(0,0,0,0.1);
	background: #16c9f6;
	background: linear-gradient(to left, #3ccdbb 0%, #16c9f6 100%);
	background: -webkit-linear-gradient(to left, #3ccdbb 0%, #16c9f6 100%);
	background: -moz-linear-gradient(to left, #3ccdbb 0%, #16c9f6 100%);
	background: -o-linear-gradient(to left, #3ccdbb 0%, #16c9f6 100%);
}

.btn-custom:hover{
	background: #16c9f6;
	color: #fff;
}

/************************************/
/***** 02. Navigation area css  *****/
/************************************/

nav.navbar.bootsnav{
	background: #0f527a;
	background: linear-gradient(45deg, #0f527a 0%, #052233 100%);
	background: -webkit-linear-gradient(45deg, #0f527a 0%, #052233 100%);
	background: -moz-linear-gradient(45deg, #0f527a 0%, #052233 100%);
	background: -o-linear-gradient(45deg, #0f527a 0%, #052233 100%);
	border-bottom: none;
	padding: 0 0 20px;

}

nav.navbar.bootsnav:before{
	content: '';
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 0;
	width: 100%;
	overflow: hidden;
	border-width: 5vw 100vw 0px 0;
	border-style: solid;
	border-color: transparent #FFF transparent transparent ;

}


.navbar-brand{
	height: auto;
	padding: 25px 15px 20px;
	transition: all 0.3s ease-in-out;
}

.navbar-right{
	text-align:center;
}

nav.navbar.bootsnav ul.nav > li > a{
	font-size: 14px;
	font-weight: 300;
	color: #fff;
	padding: 32px 18px;
	line-height: 1em;
	letter-spacing: 0.05em;
	transition: all 0.3s ease-in-out;
}


nav.navbar.bootsnav ul.nav > li > a:after{
	content: '';
	display: block;
	width: 6px;
	height: 6px;
	background: #FFF;
	border-radius: 10px;
	position: absolute;
	left: 50%;
	bottom: 20px;
	margin-left: -3px;
	opacity: 0;
	transition: all 0.3s ease-in-out;

}

nav.navbar.bootsnav ul.nav > li > a:hover:after{
	opacity: 1;
}

nav.navbar.bootsnav ul.nav > li.active > a:after{
	opacity: 1;
}


nav.navbar.bootsnav ul.nav > li.active > a{
	color: #fff;
	opacity:0.5;
	font-weight:bolder;
	border-top:2px solid #FFF;
}

nav.navbar.bootsnav.sticky-header{
	background: #0f527a !important;
}

nav.navbar.bootsnav.sticky-header .navbar-brand{
	padding-top: 15px;
}

nav.navbar.bootsnav.sticky-header ul.nav > li > a{
	padding: 32px 18px;
}


/**************************************/
/*****    10. ReCaptcha area css    *****/
/**************************************/

    .text-xs-center {
        text-align: center;
        padding-bottom:30px;
    }

    .g-recaptcha {
        display: inline-block;
    }



/**************************************/
/*****    10. Contact area css    *****/
/**************************************/

.contact{
	padding: 180px 0 100px 0;
	background:#FFF;
}

.send{
    border-top:0.5px solid #CCC;
    padding:50px 50px;
    text-align:center;
}

.contact h2{
	color: #0f527a;
	font-family:"Montserrat SemiBold";
    font-weight: 600;
    font-size: 36px;
    padding-bottom: 14px;
    position: relative;
	margin-bottom: 50px;
	text-align:center;
}

.contact h2:after{
	content: '';
	display: block;
	width: 30px;
	height: 2px;
	margin-left: -15px;
	position: absolute;
	bottom: 0;
	left: 50%;
    background: #0f527a;
	background: linear-gradient(45deg, #0f527a 0%, #052233 100%);
	background: -webkit-linear-gradient(45deg, #0f527a 0%, #052233 100%);
	background: -moz-linear-gradient(45deg, #0f527a 0%, #052233 100%);
	background: -o-linear-gradient(45deg, #0f527a 0%, #052233 100%);
}

.contact-form{
	padding: 0 100px;
}

.form-group select{
	box-shadow: none;
	border-radius: 0;
	height: auto;
	padding: 8px 14px;
	border: 1px solid #b7c2ca;
	width:100%;

}

.contact-form .form-control{
	box-shadow: none;
	border-radius: 0;
	height: auto;
	padding: 8px 14px;
	border: 1px solid #b7c2ca;
	resize: none;
}

.btn-contact{
    background: #fe7088;
    color: #fff;
    text-transform: uppercase;
    padding: 10px 30px 10px 20px;
    letter-spacing: 0.04em;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-contact i{
	padding-right: 10px;
}

.btn-contact:hover{
	background: #fff;
	color: #fe7088;
}



/************************************/
/*****   14. Footer area css    *****/
/************************************/

.contactus{
    margin-bottom:-50px;
    position:relative;
    padding-top:50px;
}

.contactus:after{
	content: '';
	display: block;
	height: 0;
	width: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 40px solid transparent;
	border-left: calc(100vw - 17px) solid #FFF;
}

.btn-contact{
	position: relative;
    display: inline-block;
    color: #FFF;
	background: #0f527a;
    padding: 10px 30px 8px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: all 0.1s linear;
}

.btn-contact:hover{
	background: none;
    border: 2px solid #0f527a;
	color: #0f527a;
}

.footer-info{	
	padding: 0 0 30px 60px;
}

.footer-info img{
	margin-bottom: 30px;
}

.footer-info p{
	color: #CCC;
	font-size: 13px;
	letter-spacing: 0.03em;
	font-weight: 300;
	margin-bottom: 1.8em;
}

.contactinfo-single{
	position: relative;
	padding-left: 50px;
	margin-top:50px;
}

.contactinfo-single h3{
	color: #0f527a;
	font-family:"Montserrat SemiBold";
	font-size: 14px;
	font-weight: 500;
	margin: 0 0 4px 0;
	padding-top: 2px;
}

.contactinfo-single p{
    color: #737373;
}

.contactinfo-single i{
	width: 36px;
	height: 36px;
	color: #0f527a;
	border: 1px solid #0f527a;
	border-radius: 50px;
	text-align: center;
	padding-top: 9px;
	position: absolute;
	top: 0;
	left: 0;
}

.footer-social a{
	display: inline-block;
	width: 30px;
	height: 30px;
	background: #0f527a;
	color: #FFF;
	font-size: 14px;
	text-align: center;
	padding-top: 6px;
	margin-right: 10px;
	transition: all 0.3s ease-in-out;
}

.footer-social a:hover{
	background: none;
	color: #0f527a;
	border: 1px solid #0f527a;
}


footer{
	background: #0f527a;
background: linear-gradient(45deg, #0f527a 0%, #072a40 100%);
	background: -webkit-linear-gradient(45deg, #0f527a 0%, #072a40 100%);
	background: -moz-linear-gradient(45deg, #0f527a 0%, #072a40 100%);
	background: -o-linear-gradient(45deg, #0f527a 0%, #072a40 100%);
	position:relative;
	padding-top:40px;

}

footer:before{
	content: '';
	display: block;
	height: 0;
	width: 0;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border-bottom: 40px solid transparent;
	border-left: calc(100vw - 17px) solid #f7f7f7;
}


.footer-siteinfo{
	padding: 40px 0;
	text-align:right;
}

.footer-siteinfo p{
	text-align: center;
	color: #fff;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0.04em;
	margin-bottom: 0;
}

.jumptotop{
	position: fixed;
	right: 30px;
	bottom: 0px;
	text-align: center;
	opacity: 0;
	transition: all 0.5s ease-in-out;
}

.btn-active{
	opacity: 1;
	bottom: 30px;
}

.jumptotop a{
	display: inline-block;
	width: 40px;
	height: 40px;
	color: #fff;
	padding-top: 6px;
	background: #0f527a;
	font-size: 18px;
	border-radius: 2px;
}

.jumptotop a:hover{
	background: #313c42;
}

/************************************/
/*****    15. Media Screens     *****/
/************************************/

@media only screen and (max-width: 1200px){
	.navbar-default .navbar-nav>li>a:after{
		padding: 0 12px 0 14px;
	}
}

@media only screen and (max-width: 991px){
	nav.navbar.bootsnav .navbar-header{
		padding-left: 0;
		padding-right: 0;
		position: relative;
	}
	
	nav.navbar.bootsnav.sticky-header .navbar-brand,
	nav.navbar.bootsnav .navbar-brand{
		display: block;
		padding: 14px 0 13px;
	}
	
	nav.navbar.bootsnav .navbar-collapse{
		background: #0f527a;
		padding: 0 15px;
		margin: 0;
	}
	
	nav.navbar.bootsnav .navbar-toggle{
		background: none;
		height: 36px;
		width: 36px;
		color: #fff;
		margin: 0;
		border: 1px solid #fff;
		border-radius: 0;
		position: absolute;
		right: 0;
		top: 16px;
	}
	
	nav.navbar.bootsnav .navbar-nav{
		margin: 0;
		padding: 0;
	}
	
	nav.navbar.bootsnav.sticky-header ul.nav > li > a,
	nav.navbar.bootsnav ul.nav > li > a{
		padding: 14px 0;
		border: none;
		margin: 0;
	}
	
	nav.navbar.bootsnav ul.nav > li > a:after{
		display: none;
	}
	
	.header-content{
		padding-top: 0;
	}
	
	.feature-image{
		padding: 20px 0 50px;
	}
	
	.feature-right{
		text-align: left;
		padding-right: 0;
		padding-left: 70px;
	}
	
	.feature-right .icon-box{
		right: auto;
		left: 0;
	}
	
	.facts-single{
		margin-bottom: 40px;
	}
	
	.product-box{
		margin-bottom: 30px;
	}
	
	.newsletter-feature .col-md-2{
		border: none;
	}
	
	.small-feature-single{
		margin-bottom: 30px;
	}
	
	.footer-info{
		padding: 50px 0 0 0;
		border: none;
	}
}

/* Mobile Layout */
@media only screen and (max-width: 767px){
	
	nav.navbar.bootsnav.sticky-header .navbar-brand,
	nav.navbar.bootsnav .navbar-brand{
		padding-left: 15px;
		padding-right: 15px;
	}
	
	nav.navbar.bootsnav .navbar-toggle{
		right: 15px;
	}
	
	nav.navbar.bootsnav .navbar-collapse{
		margin-left: -15px;
		margin-right: -15px;
	}
	
	.banner{
		padding: 140px 0 160px;
	}
	
	.header-content{
		text-align: center;
		margin-bottom: 60px;
	}
	
	.navbar-toggle{
		margin-right: 15px;
	}
	
	.jumptotop{
		display: none;
	}
	
	.step-container{
		padding: 10px 40px;
	}
	
	.step-container .col-md-4{
		border-right: 0;
		border-bottom: 1px solid #eaeaea;
	}
	
	.step-single{
		padding: 20px 0;
	}
	
	.section-title{
		margin-bottom: 50px;
	}
	
	.section-title h2{
		font-size: 28px;
	}
	
	.features,
	.about-product,
	.products,
	.testimonials,
	.pricing,
	.buynow-infobar,
	.newsletter-feature{
		padding: 60px 0;
	}
	
	.newsletter-form{
		margin-bottom: 60px;
	}
	
	.about-facts{
		padding: 60px 0 20px;
	}
	
	.about-entry{
		padding-top: 0;
		padding-bottom: 50px;
	}
	
	.about-entry h3{
		font-size: 24px;
	}
	
	.product-box{
		max-width: 320px;
		margin: 0 auto 30px;
	}
	
	.buynow-video{
		padding-top: 40px;
	}
	
	.newsletter-form .form-control{
		width: 100%;
		border: 4px solid #f1f1f1;
		border-radius: 30px;
		margin-bottom: 20px;
	}
	
	.newsletter-form form{
		border: none;
		text-align: center;
	}
	
	.btn-subscribe{
		width: 100%;
		border-radius: 40px;
	}
}

/* Small Mobile Layout */

@media only screen and (max-width: 480px) {
	.header-content h2{
		font-size: 28px;
		line-height: 1.5em;
	}
	
	.header-content h2 span{
		font-size: 20px;
	}
	
	.pricing-header p{
		font-size: 60px;
	}
}