/*Template Name: Crossway - Startup Landing Page Template
Theme URL: http://themeforest.net/user/DSA79/
Description: Crossway - Startup Landing Page Template
Author: DSA79
Author URL: http://themeforest.net/user/DSA79
Version: 1.1.0
Website: www.dsathemes.com
Tags: responsive, html5 template, one page, landing, startup, business, company, corporate, creative
*/



/* ------------------------------------------ */
/*             TABLE OF CONTENTS
/* ------------------------------------------ */

/*   00 - General & Basic Styles   */
/*   01 - Header				   */
/*   02 - Hero      			   */
/*   03 - Social Proof        	   */
/*   04 - Plans/Pricing            */
/*   05 - Features - 2 section	   */
/*   06 - Testimonials             */
/*   07 - Features - Icons         */
/*   08 - Call To Action           */
/*   09 - Footer		           */
/*   10 - Scroll to Top	   		   */
/*   11 - Form (NOT USED)	   	   */
/*   12 - JQueries		   		   */

/* ------------------------------------------ */
/*             COLORS
/* ------------------------------------------ */
/*

	Black:	#3B4752
	Blue:	#0094FF
	Green:	#07DD5E
	Red:	#EB2E50
	Dark:	#2A343D

	Light green: #ABD8BD

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



/* ==========================================================================
   00. GENERAL & BASIC STYLES
   ========================================================================== */

/*------------------------------------------*/
/*	 Import Fonts 
/*------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/*------------------------------------------*/
/*	 Preload Animation 
/*------------------------------------------*/

#preloader{
	position: fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index:99999; 
	background-color:#fff;
}
#status{
	position:absolute;
	top:50%; 
	left:50%; 
	margin:-100px 0 0 -100px;
	width:200px;
	height:200px;
	/*background-image:url(../img/icons/loader.gif)*/;
	background-position:center;
	background-repeat:no-repeat;
	background-size:75px 75px;
} 
   
/*------------------------------------------*/
/*	 Parallax Settings
/*------------------------------------------*/

.parallax {
	background-attachment: fixed !important;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

/*------------------------------------------*/
/*	 General
/*------------------------------------------*/

.white {
	color: #fff !important;
}
.strikethrough {
	text-decoration: line-through !important;
}
.row.display-flex {
	display: flex;
	flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
	display: flex;
	flex-direction: column;
}
.bold {
	font-weight: 800;
}
.semibold {
	font-weight: 600;
}
.vertical-center {
  	margin: 0;
  	position: absolute;
  	top: 50%;
  	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
}
html {  
	scroll-behavior: smooth;
}

/*------------------------------------------*/
/*	 Headers
/*------------------------------------------*/

h1,h2,h3,h4,h5,h6, #pricing_area .featured h2, span.price_dollar, sup.price_cents, h1.section_title, span.monthly, span.price_symbol, sup.price_cents {
	color: #000;
	font-family: 'Montserrat', sans-serif !important; 
	font-weight: 700 !important;
}
body {font-family: 'Open Sans', sans-serif !important;}
h1, h2, h3, h4, h5, h6 {
	margin-top: 0; 
	margin-bottom: 10px;
}
h3 {font-weight: 300;}
h4 {
	letter-spacing: 1px;
	font-weight: 700;
	font-size: 20px;
}

/*------------------------------------------*/
/*	 Link Setting
/*------------------------------------------*/

a {
	color: #0094FF !important;
	text-decoration: none;
	-webkit-transition: all 250ms ease-in-out;
	-moz-transition: all 250ms ease-in-out;
	-o-transition: all 250ms ease-in-out;
	-ms-transition: all 250ms ease-in-out;
	transition: all 250ms ease-in-out;
}
a:hover {
	color: #3B4752;
	text-decoration: none;
}
a:focus {
	color: #3B4752;
	outline: none;
	border: none;
	text-decoration: none;
} 
.two-section-link a{
	color: #0094FF !important;
}
.two-section-link a:hover{
	color: #3B4752 !important;
}

/*------------------------------------------*/
/*	 Buttons
/*------------------------------------------*/

.btn-primary {
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1px !important;
	background-color: #0094FF;
	color: #fff !important;
	border-radius: 12px;
	border: none;
	box-shadow: 0px 0px 25px 0px rgba(0, 148, 255, 0.5);
	padding-top: 1rem!important;
    padding-bottom: 1rem!important;
	padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
}	
.btn-primary:hover {
	color: #fff !important;
}
.btn-secondary {
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 1px !important;
	background-color: rgba(255,255,255,0.0) !important;
	color: #0094FF !important;
	border-radius: 12px;
	border: 2px solid #0094FF;
	padding-top: 1rem!important;
    padding-bottom: 1rem!important;
	padding-right: 1.5rem!important;
    padding-left: 1.5rem!important;
}
.btn-secondary:hover {
	border: 2px solid #3B4752 !important;
	color: #3B4752 !important;
}
input[type="submit"] {
	border: none !important;
	background: none !important;
	text-transform: uppercase;
    letter-spacing: 1px !important;
    font-weight: 600;
    color: #fff;
}	

/*------------------------------------------*/
/*	 CLEAR FLOATS
/*------------------------------------------*/

.floatleft {float: left; width: 50%;}	
.floatright {float: right; width: 50%; text-align: right;}
.clearfloat {clear: both;}


/*------------------------------------------*/
/*	 Section Titlebar
/*------------------------------------------*/

.titlebar {
	margin-bottom: 40px;
    padding-left: 20px;
}
.titlebar h2 {
	font-weight: 400 !important;
	color: #3b4752;
	margin-top: 0;
	margin-bottom: 5px;
	letter-spacing: 1px !important;
}


/* ==========================================================================
   01. HEADER
   ========================================================================== */

#logo {width: 330px !important;}
.social-proof {max-width: 330px !important;}
#header {
	background: #fff;
	width: 100%;
	color: #fff;
	padding: 15px 30px;
	border-bottom: 1px solid #94a4b2;
}



/* ==========================================================================
   02. HERO
   ========================================================================== */
 	
#hero h1 {
	font-weight: 700 !important;
	color: #000;
	letter-spacing: 1px;
	margin-bottom: 10px;
	font-size: 40px;
	line-height: 1em;
	margin-top: 5px;
}
#hero h2 {
	font-weight: 600 !important;
	line-height: 1em;
	font-size: 1.75rem;
	letter-spacing: 1px;
	margin-bottom: 10px;
}	
/*
#hero ul {
	list-style-image: none;
	padding-left: 0px;
	color: #ffffff;
	font-size: 18px;
	font-weight: 300;
}
#hero li {
	margin-bottom: 5px;
}
#hero li:before {
	content: '';
	display: inline-block;
	height: 16px;
	width: 16px;
	background-image: url('../img/check-new.png');
	background-size: contain;
	background-repeat: no-repeat;
	margin-right: 10px;
}
*/
.hero_content {
	padding: 30px;
	margin: 80px 0px;
	background-color: rgba(255,255,255,0);
}
.hero-background {
	background-image: url("../img/hero-background-new-2.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right;
	height: 600px;
}

/*------------------------------------------*/
/*	  Register Form (Not Using)
/*------------------------------------------*/

#form_register_btn {
	margin-top: 20px;
}
#intro_form {
	padding-left: 100px;
}
.form_register {
	width: 100%;
	background-color: #8B1A1A;
	margin: 0 auto;
    padding: 20px 20px 25px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.form_register h2 {
	color: #fff;
    text-align: center;
    line-height: 30px;
	font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.form_register .form-control {
	height: 46px;
	margin-bottom: 20px;
	border: 1px solid #ddd;
	-webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
input[type="text"],
input[type="email"],
textarea {
	color: #444;
	-webkit-transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-ms-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}
.form_register textarea {
	min-height:140px;
}
.error {
	color: #fc0000;
	font-size: 13px;
	margin-bottom: 20px;
}


 
/* ==========================================================================
   03. SOCIAL PROOF
   ========================================================================== */

.social-proof {
	max-width: 500px; width: 100%;
}
#social_proof img {
	width: 80%;
	padding: 20px;
	opacity: 0.5;
	display: block;
}
#social_proof .col-md-2 {
	width: 20% !important;
}



/* ==========================================================================
   04. PLANS/PRICING
   ========================================================================== */
/* --- Toggle */
.toggle p, .toggle2 p {
	font-weight: 400;
	letter-spacing: normal;
	line-height: 18px;
}
.toggle {
	align-items: center;
	display: flex;
	margin: 25px auto 10px;
	width: 350px;
	text-align: center;
}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}
/* Hide default HTML checkbox */		
.switch input {
  display: none;
}
/* The slider */		
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #2196F3;
	-webkit-transition: .4s;
	transition: .4s;
}		
.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}			
input:checked+.slider {
	background-color: #2196F3;
}			
input:focus+.slider {
	box-shadow: 0 0 1px #2196F3;
}			
input:checked+.slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}			
.slider.round:before {
	border-radius: 50%;
}
/* Function */
#menu2 {
	display:none;
}
			
.recommended, .pricing_header {
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	padding-bottom: 10px !important; 
}
.featured {
	border-radius: 12px !important;
}
.featured h2 {
    color: #3b4752;
	font-weight: 300;
	font-size: 34px;
	letter-spacing: 1px;
	margin-bottom: 0px;
}
.price_table_color {
	background-color: #F1F4F6;
}
.best-value-badge {
	position: absolute;
	left: 15px;
	top: -190px;
}
.best-value-badge img {
	max-width: 100px;
}
h1.section_title {
	font-weight: 400;
	font-size: 36px;
}
p.section_p {
	font-size: 18px;
	font-weight: 400;
}
.pricing_header {
	text-align: center; padding-top: 30px; padding-bottom: 30px;
}
.pricing_middle {
   		margin-bottom: 10px !important;
}
.discount {
	    margin-bottom: -20px;
		text-decoration: line-through;
		color: #171138;
		background: rgba(7, 221, 94, 0.3);
		display: inline-block;
		padding: 3px 25px;
}
span.monthly {position: relative; margin-left: -25px; font-size: 11px; font-weight: 300}
span.savings {
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;	
	line-height: 18px;
}
span.price_symbol {position: relative; top: -20px; font-size: 21px; font-weight: 300}
span.price_dollar {font-size: 55px; margin-left: -3px; font-weight: 300;}
sup.price_cents {position: relative; margin-left: -12px; top: -25px; font-size: 17px; font-weight: 300;}
.plans_features {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	padding: 10px 10px 30px 10px;
	border: none !important;
}
.plans_features ul {
	margin: 0 0 0 10%;
	padding: 0px;
	list-style-image:url("../img/new-grey-check-2.svg");
	list-style-position: outside;
}
.plans_features li {
	font-size: 24px;
	line-height: 1.25rem;
	margin-bottom: 12px;
}
.plans_features li span {
	font-size: 1rem;
}
.plans_features ul .excluded{
	list-style-image:url("../img/new-grey-x.svg");
}
.plans_features li.excluded {
	text-decoration: line-through; 
	opacity: 0.3;
	font-size: 20px;
}



/* --- Green Best Deal Banner (not being used) */
.recommended {
	background: #2196F3;
	height: 40px;
	text-align: center;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #fff;
	line-height: 40px;
}
			
/* --- Additional Features Modal */
#modal-features ul {
	margin: 0 0 0 10%;
	padding: 0px;
	list-style-image:url("../img/new-grey-check-2.svg");
	list-style-position: outside;
}
#modal-features li {
	font-size: 24px;
	line-height: 1.25rem;
	margin-bottom: 12px;
}
#modal-features li span {
	font-size: 1rem;
}
#modal-features ul .excluded{
	list-style-image:url("../img/new-grey-x.svg");
}
#modal-features li.excluded {
	text-decoration: line-through; 
	opacity: 0.3;
	font-size: 22px;
}
#modal-features {
	padding-top: 90px;
	padding-bottom: 90px;
	background-color: #fff;
}
button.close {
	padding: 0;
   	background-color: transparent;
   	border: 0;
}
.close {
	float: right;
   		font-size: 1.5rem;
   	font-weight: 700;
   	line-height: 1;
   	color: #000;
   	text-shadow: 0 1px 0 #fff;
   	opacity: .5;
}

/* ==========================================================================
   05. FEATURES - 2 SECTION
   ========================================================================== */
 
#features {
	padding-top: 90px;
	padding-bottom: 90px;
	background-color: #fff;
}


 
/* ==========================================================================
   06. TESTIMONIALS
   ========================================================================== */
 
.testimonial-img {
	border-radius: 100%;
	box-shadow: 5px 5px 20px 0px rgba(59, 71, 82, 0.2);
	float: right;
}
.testimonial-box {
	background-color: rgba(148, 164, 178, .15);
	border-radius: 40px;
	height: 90%;
}



/* ==========================================================================
   07. FEATURES - ICONS
   ========================================================================== */



/* ==========================================================================
   08. CALL TO ACTION
   ========================================================================== */

#call-to-action {
	padding-top: 100px;
	padding-bottom: 70px;
	margin-top: 30px;
	background-image: url('../img/cta-background-new-3.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}


   
/* ==========================================================================
   09. FOOTER
   ========================================================================== */
#footer {
	background-color: #fff;
	padding: 40px 0 40px;
}   
.copyright {
	text-align: center;
	color: #3b4752;
	font-size: 14px;
}



/* ==========================================================================
   10. SCROLL TO TOP
   ========================================================================== */

#scrollUp {
	display: none;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 30px;
	right: 30px;
	background-image: url(../img/back-to-top.png);
	background-repeat: no-repeat;
	background-position: 50% 48%;
	background-color:rgba(123, 123, 123, 0.65);	
	-webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
	-webkit-transition: all 250ms linear;
	-moz-transition: all 250ms linear;
	transition: all 250ms linear;	
}
#scrollUp:hover {
	background-color: rgba(66, 139, 202, 0.95);
}
nav a#pull {  
    display: none;  
} 



/* ==========================================================================
   11. FORM (NOT USED)
   ========================================================================== */
.form-check {
	background: #ededed;
	border-radius: 5px;
	margin: 0 62px;
	text-align: left;
	padding: 10px;
	border: 1px solid #3b4752 !important;
}
.form-check-input {margin-left: 0px !important;}



/* ==========================================================================
   12. JQUERIES
   ========================================================================== */

/* DESKTOP (AND LARGER) */
	@media (min-width: 1200px) {
		/* -- Containers -- */
		.container{
			max-width: 1140px !important;
		}
		#header .container, #hero .container {
			max-width: 1200px !important;
		}
		#pricing_area .container {
			max-width: 1400px !important;
		}
		/* -- Features - Icons -- */
		.small-icon {
			width: 20% !important;
		}
	}
	@media (max-width: 1200px) {
		.small-icon {
			width: 20% !important;
		}
	}
			
/* TABLET */
	@media (min-width: 992px) {}
	@media (max-width: 991px) {
		/* -- Hero -- */
		#hero h1 {line-height: 1em !important;}
		.hero-background {
			background-position: -265px;
		}
		.hero_content {
			margin: 10px 0px;
		}
		/* -- Additional Features Modal -- */
		.modal-lg, .modal-xl {
			max-width: 1200px !important;
		}
		/* -- Features - Icons -- */
		.small-icon {
			width: 15% !important;
		}
		/* -- Testimonials -- */
		.testimonial-img {
			width: 20% !important;
		}
/*
		.testimonial-box {
			margin-right: 50px !important;
		}
*/
		.stars {
			width: 30% !important;
		}
	}
	
/* TABLET/MOBILE */
	@media (min-width: 768px) {
		.container{
			max-width: 100%;
		}
	}								
	@media only screen and (max-width: 767px){
		/* -- Header -- */
		#logo {max-width: 300px !important;}
		.logo_center {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		/* -- Hero -- */
		.hero_content {
			padding: 15px 15px 0px !important;
			margin: 0px !important;
		}
		#hero h1 {font-size: 2em;}
		#hero h2 {font-size: 1.5em;}
		.hero-background {
			background-image: none;
			height: auto;
		}
		/* -- Social Proof -- */
		#social_proof .col-md-2 {
			width: 25% !important;
			float: left !important;
		}
		/* -- Plans/Prices -- */
		.toggle {
			margin: 25px auto 25px !important;
		}
		.featured {border-radius: 12px;}
		.primary {margin-top: 0px !important;}
		/* -- Testimonials -- */
		.testimonial-img {
			width: 30% !important;
		}
		.stars {
			width: 40% !important;
		}
		/* -- Features - 2 Section -- */
		#two-section-1a { order: 2;}
		#two-section-1b { order: 1;}
		.two-section {
			padding: 50px 0px 20px !important;
		}
		/* -- CTA -- */
		#call-to-action {background-attachment: scroll !important; background-color: #0f1014;}
		/* -- Features - Icons -- */
		.small-icon {
			width: 10% !important;
		}
		#features-icons {
			padding: 80px 0px 40px !important;
		}
		/* -- Other/Format -- */
		.vertical-center {
  			margin: 0;
  			position: static;
  			top: 0;
  			-ms-transform: none;
 		 	transform: none;
		}
	}
/* SMALL MOBILE */
	@media (min-width: 576px) {
		.container {
			max-width: 100%;
			padding: 0px 20px;
		}
	}
	@media (max-width: 576px) {
		/* -- Additional Features Modal -- */
		.modal-dialog {
			max-width: 800px;
		}
		/* -- Features - Icons -- */
		.small-icon {
			width: 15% !important;
		}
	}
/* X-SMALL MOBILE */					
	@media only screen and (max-width: 465px){
		/* -- Testimonials -- */
		.testimonial-img {
			width: 40% !important;
		}
/*
		.testimonial-box {
			margin-right: 1rem !important;
		}
*/
		.stars {
			width: 60% !important;
		}
	}
/* XX-SMALL MOBILE */
	@media (max-width: 380px) {
		/* -- Features - Icons -- */
		.small-icon {
			width: 25% !important;
		}
	}