/*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
	Purple: 	#9747FF
	Red:		#FF1D1D
	Green: 		#00CC60
	Dark Blue: 	#0473CA
	Dark Prple:	#6922C5


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



/* ==========================================================================
   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');


/*------------------------------------------*/
/*	 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%);
}
.gradient-text {
	background: -webkit-linear-gradient(0deg, #0094FF, #9747FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: 600;
}
.gradient-text-2 {
	background: -webkit-linear-gradient(0deg, #9747FF, #0094FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	font-weight: 600;
}
html {  
	scroll-behavior: smooth;
}


/*------------------------------------------*/
/*	 Format
/*------------------------------------------*/

h1,h2,h3,h4,h5,h6 {
	color: #3B4752;
	font-family: 'Montserrat', sans-serif !important; 
	font-weight: 700 !important;
}
h2 {
	font-size: 2.5rem;
}
body {
	font-family: 'Open Sans', sans-serif !important;
	color: #3B4752;
	line-height: 1.75rem;
	font-size: 18px;
}
#hero h1 {
	font-size: 2.25em;
}





/*------------------------------------------*/
/*	 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: #0473CA !important;
	text-decoration: none;
}
a:focus {
	color: #0473CA !important;
	outline: none;
	border: none;
	text-decoration: none;
} 

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

.btn-primary {
	font-weight: 600;
	font-size: 18px;
	background: linear-gradient(90deg, #0094FF, #9747FF);
	color: #fff !important;
	border-radius: 50px;
	border: none;
	box-shadow: 0px 0px 25px 0px rgba(0, 148, 255, 0.5);
	padding-top: 1rem!important;
    padding-bottom: 1rem!important;
	padding-right: 2rem!important;
    padding-left: 2rem!important;
	-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;
	white-space: nowrap;
}	
.btn-primary::after {
  	content: url('../img/btn-arrow.svg');
  	display: inline-block;
  	width: 12px;
  	height: 12px;
  	margin-left: 10px;
}
.btn-primary:hover {
	background: linear-gradient(90deg, #0473CA, #6922C5);
	color: #fff !important;
	padding-right: 2.5rem!important;
    padding-left: 2.5rem!important;	
}
.btn-secondary {
	font-weight: 600;
	font-size: 18px;
	background: none !important;
	color: #fff !important;
	border-radius: 50px;
	border: 2px solid #fff !important;
	padding-top: .8rem!important;
    padding-bottom: .8rem!important;
	padding-right: 2rem!important;
    padding-left: 2rem!important;
	-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;
	white-space: nowrap;
}
.btn-secondary::after {
  	content: url('../img/btn-arrow.svg');
  	display: inline-block;
  	width: 12px;
  	height: 12px;
  	margin-left: 10px;
}
.btn-secondary:hover {
	border: 2px solid #fff !important;
	color: #fff !important;
	background: rgba(255, 255, 255, 0.25) !important;
	padding-right: 2.5rem!important;
    padding-left: 2.5rem!important;
}
.btn-3 {
	font-weight: 600;
	font-size: 18px;
	background: #fff;
	color: #fff;
	border-radius: 50px;
	border: none;
	padding-top: 1rem!important;
    padding-bottom: 1rem!important;
	padding-right: 2rem!important;
    padding-left: 2rem!important;
	-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;
	white-space: nowrap;
}	
.btn-3 span {
	background: -webkit-linear-gradient(0deg, #0094FF, #9747FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-3::after {
  	content: url('../img/btn-arrow-purple.svg');
  	display: inline-block;
  	width: 12px;
  	height: 12px;
  	margin-left: 10px;
}
.btn-3:hover {
	background: #EBEBEB !important;
	padding-right: 2.5rem!important;
    padding-left: 2.5rem!important;	
}
.btn-secondary-2 {
	font-weight: 600;
	font-size: 18px;
	background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(90deg, #0094FF, #9747FF) border-box;
	color: black;
	border-radius: 50px;
	border: 2px solid transparent !important;
	padding-top: .8rem!important;
    padding-bottom: .8rem!important;
	padding-right: 2rem!important;
    padding-left: 2rem!important;
	-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;
	white-space: nowrap;
}
.btn-secondary-2 span {
	background: -webkit-linear-gradient(0deg, #0094FF, #9747FF);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.btn-secondary-2::after {
  	content: url('../img/btn-arrow-purple.svg');
  	display: inline-block;
  	width: 12px;
  	height: 12px;
  	margin-left: 10px;
}
.btn-secondary-2:hover {
	background: linear-gradient(#EBEBEB, #EBEBEB) padding-box, linear-gradient(90deg, #0094FF, #9747FF) border-box;
	border-radius: 50px;
	border: 2px solid transparent !important;
	padding-right: 2.5rem!important;
    padding-left: 2.5rem!important;
}

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

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


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

#logo {
	width: 330px !important;
}
#header {
	background: rgba(255, 255, 255, 0);
	width: 100%;
	color: #fff;
	transition: all 0.5s;
}
#header.active {
	background: rgba(255, 255, 255, 1);	
	border-bottom: 1px solid #94a4b2;
	transition: all 0.5s;
}
#header .navbar-light .navbar-toggler-icon {
	background-image: url('../img/navbar-item-light.svg');
}
.about-us #header .navbar-light .navbar-toggler-icon {
	background-image: url('../img/navbar-icon-dark.svg');
}
.home-2 #header .navbar-light .navbar-toggler-icon {
	background-image: url('../img/navbar-icon-dark.svg');
}
#header.active .navbar-light .navbar-toggler-icon {
	background-image: url('../img/navbar-icon-dark.svg');
}

#header .nav-link {
	color: #fff !important;
	font-weight: 600;
}
#header .nav-link:hover {
	color: #FF1D1D !important;
}
.about-us #header .nav-link {
	color: #3B4752 !important;
}
.about-us #header .nav-link:hover {
	color: #FF1D1D !important;
}
.home-2 #header .nav-link {
	color: #3B4752 !important;
}
.home-2 #header .nav-link:hover {
	color: #FF1D1D !important;
}
#header.active .nav-link {
	color: #3B4752 !important;
}
#header.active .nav-link:hover {
	color: #FF1D1D !important;
}
.index #header.active .home {
	color: #FF1D1D !important;
}
#header.active .current-page {
	color: #FF1D1D !important;
}
#header.active .current-page:hover {
	color: #CA1818 !important;
}
#header .current-page {
	color: #FF1D1D !important;
}
.about-us #header.active .current-page {
	color: #FF1D1D !important;
}
.about-us #header .current-page {
	color: #FF1D1D !important;
}
.about-us #header .current-page:hover {
	color: #CA1818 !important;
}
.home-2 #header.active .current-page {
	color: #FF1D1D !important;
}
.home-2 #header .current-page {
	color: #FF1D1D !important;
}
.home-2 #header .current-page:hover {
	color: #CA1818 !important;
}
.phone-icon {
	fill: #ffffff !important;
}
#header.active .phone-icon {
	fill: #3B4752 !important;
}
.phone-icon {
	-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;
}
.phone-icon:hover {
	fill: #FF1D1D !important;
}
 .phone:hover .phone-icon {
        fill: #FF1D1D !important;
    } 

#header.active .phone-icon:hover {
	fill: #FF1D1D !important;
}
#header.active .phone:hover .phone-icon {
        fill: #FF1D1D !important;
    } 


#logo {
	width: 250px !important;
}
#logo2 {
	margin-left: 5px;
	margin-top: 11px;
}
.social-proof {max-width: 330px !important;}

.nav-spacing {
	padding-left: 30px;
	padding-right: 30px;
}
.navbar-brand .identityiq-logo {
	max-width: 250px;
}
.navbar-brand .identityiq-icon {
	max-width: 62px !important;
}
.nav-btn-padding {
	 	padding: 10px 0px 10px 20px;
}
.nav-link-padding {
	padding-left: 20px;
}
.nav-btn-padding .btn {
	padding-top: 0.75rem !important;
	padding-bottom: 0.75rem !important;
}
.navbar-brand .identityiq-logo {
	max-width: 250px !important;
}
.navbar-brand .identityiq-icon {
	max-width: 62px !important;
}
.identityiq-icon {
	display: none;
}
.identityiq-logo-full {
	display: inline;
}


.navbar-light .navbar-toggler {
	border: none;
}
.navbar-toggler:focus {
	box-shadow: none;
}
.navbar-collapse {
	padding-bottom: 0px;
}

.current-page {
	color: #FF1D1D !important;
}


/* ==========================================================================
   02. HERO
   ========================================================================== */
 	
#hero {
	background-image: url('../img/top10-hero-bg-2.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.index #hero .row {
	min-height: 80vh;
}
.how-we-protect-you #hero {
	background-image: url('../img/how-we-protect-you-hero-bg.webp') !important;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-radius: 0px 0px 40px 40px;
	padding-top: 150px;
	padding-bottom: 75px;
}
.how-we-protect-you h1 {
	width: 70%;
	margin-right: auto;
	margin-left: auto;
}
.how-we-protect-you-hero-p, .about-us-hero-p {
	margin-right: auto;
	margin-left: auto;
	width: 60%;
}
.about-us #hero {
	background-image: url('../img/fingerprint-bg.svg') !important;
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: top left;
	background-color: #fff !important;
}
.home-2 #hero {
	background-image: url('../img/fingerprint-bg.svg') !important;
	background-repeat: no-repeat;
	background-size: 40%;
	background-position: top left;
	background-color: #fff !important;
}
.review p {
	font-size: 0.9rem;
	line-height: 1.4em;
}
.hero-about-us-content {
	padding-top: 125px;
	padding-bottom: 100px;
}

.hero-2-h1 {
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	font-size: 3em !important;
	line-height: 1.1em !important;
}
.hero-2-p {
	width: 60%;
	margin-right: auto;
	margin-left: auto;
}
.hero-2-content {
	padding-top: 125px;
	padding-bottom: 80px;
}

#testimonials {
	scroll-margin-top: 85px;
}
#comparison {
	scroll-margin-top: 85px;
}
#features {
	scroll-margin-top: 85px;
}





.hero-grid-wrapper {
	display: grid;
	grid-template-rows: 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1em;
}
.hero-box {
	border-radius: 20px;
	background: #F6F6F6;
	display: grid;
}
.hero-box p {
	font-size: 16px !important;
	opacity: .5;
	line-height: 1.25em !important;
}
.hero-box h3 {
	font-size: 20px !important;
}
.hero-box1 {
	grid-row: 1/2;
	grid-column: 1/2;
	padding: 20px 30px 0px 30px;
}
.hero-box2 {
	grid-row: 2/3;
	grid-column: 1/2;
}
.hero-box3 {
	grid-row: 1/3;
	grid-column: 2/3;
}
.hero-box4 {
	grid-row: 1/3;
	grid-column: 3/4;
}

@media only screen and (max-width: 767px){
	
	.hero-grid-wrapper {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		grid-gap: 1em;
	}
	.hero-box1 {
		grid-column: 1;
		grid-row: 2;
	}
	.hero-box2 {
		grid-column: 1;
		grid-row: 3;
	}
	.hero-box3 {
		grid-column: 1;
		grid-row: 1;
	}
	.hero-box4 {
		grid-column: 1;
		grid-row: 4;
	}
	
}

.hero-box a img {
	opacity: 1;
	-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;
}
.hero-box a img:hover {
	opacity: .5;
}

 
/* ==========================================================================
   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. COMPARISON CHART
   ========================================================================== */



/* ==========================================================================
   05. FEATURES BENTO BOX
   ========================================================================== */

.box h3 {
	font-size: 1.25em;
}
.box a img {
	opacity: 1;
	-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;
}
.box a img:hover {
	opacity: .5;
}
.box-text {
	padding: 20px 30px 0px 30px;
}

.grid-wrapper {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1em;
}
.box {
	border-radius: 20px;
	background: #F6F6F6;
	display: grid;
}
.box1 {
	grid-row: 2/4;
	grid-column: 1/2;
}
.box2 {
	grid-row: 3/4;
	grid-column: 2/3;
}
.box3 {
	grid-row: 1/2;
	grid-column: 3/4;
}
.box4 {
	grid-row: 2/3;
	grid-column: 2/4;
}
.box5 {
	grid-row: 1/2;
	grid-column: 1/3;
}
.box6 {
	grid-row: 3/4;
	grid-column: 3/4;
}

@media only screen and (max-width: 767px){
	
	.grid-wrapper {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		grid-gap: 1em;
	}
	.box1 {
		grid-column: 1;
		grid-row: 1;
	}
	.box2 {
		grid-column: 1;
		grid-row: 2;
	}
	.box3 {
		grid-column: 1;
		grid-row: 3;
	}
	.box4 {
		grid-column: 1;
		grid-row: 4;
	}
	.box5 {
		grid-column: 1;
		grid-row: 5;
	}
	.box6 {
		grid-column: 1;
		grid-row: 6;
	}
	
}


/* ==========================================================================
   06. PLANS / PRICING / DARKWEB SCAN
   ========================================================================== */


/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background: none !important;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  display: block;
}



/* Style the collapsible content. Note: hidden by default */
.content {
  padding: 0px;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}
.collapsible:after {
  content: ''; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #fff !important;
  margin-left: 5px;
  display: none;
}

#pricing_area .active:after {
  content: ""; /* Unicode character for "minus" sign (-) */
  color: #fff !important;
  display: none;
}
#pricing_area button {
	cursor: default;
	color: #fff;
}
#pricing_area .featured button {
	cursor: default;
	color: #3B4752;
}
#pricing_area .active {
	border-bottom: none;
	padding-bottom: 0px;
}

#pricing_area .col-md-4 {
	width: 32% !important;
	margin: 0px 0.66%;
}


.btn-pricing {
	padding-right: 3rem !important;
	padding-left: 3rem !important;
}
.btn-pricing:hover {
	padding-right: 3.5rem !important;
	padding-left: 3.5rem !important;
}

.plan {
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(10px);
	color: #fff;
	border-radius: 16px;
	padding: 30px 20px 25px 20px;
	text-align: center;
}
.plan-name {
	color: #fff !important;
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 2.5px;
	font-weight: 500 !important;
}
.featured {
	background: rgba(255, 255, 255, .9);
	backdrop-filter: blur(10px);
	color: #3B4752;
	border-radius: 16px;
	padding: 30px 20px 25px 20px;
	text-align: center;
	border: double 3px transparent;
    background-image: linear-gradient(rgba(255, 255, 255, .95), rgba(255, 255, 255, .95)), linear-gradient(180deg, #9747FF,#0094FF);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.featured .plan-name {
	color: #3B4752 !important;
}
.discount-callout {
	padding-top: 0px;
	padding-bottom: 25px;
}
.best-value {
	background: #9747FF;
	color: #fff;
	text-align: center;
	padding: 5px 10px 5px 10px;
	border-radius: 16px 16px 0px 0px;
	position: absolute;
	top: -30px;
	width: 100%;
	left: 0px;
	outline: 3px solid #9747FF;
}

#pricing_area {
	background-image: url('../img/pricing-bg.webp');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	border-radius: 0px 0px 40px 40px;
}


/* --- 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: 390px;
	text-align: center;
}
/* The switch - the box around the slider */
.switch {
	position: relative;
	display: inline-block;
	width: 70px;
	height: 34px;
	margin-left: 20px;
	margin-right: 20px;
}
/* Hide default HTML checkbox */		
.switch input {
  display: none;
}
/* The slider */		
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	-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(36px);
	-ms-transform: translateX(36px);
	transform: translateX(36px);
}
/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}			
.slider.round:before {
	border-radius: 50%;
}
/* Function */
#menu2 {
	display:none;
}
	

.vpn-feature {
	color: #0094FF;
}

.recommended, .pricing_header {
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
	padding-bottom: 10px !important; 
}
.price_table_color {
	background-color: #F1F4F6;
}
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;
}
.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: 14px; font-weight: 400}
span.price_symbol {position: relative; top: -24px; font-size: 21px; font-weight: 400}
span.price_dollar {font-size: 55px; margin-left: -3px; font-weight: 300;}
sup.price_cents {position: relative; margin-left: -11px; top: -25px; font-size: 20px; font-weight: 600;}

.plans_features {
	border-top: 1px solid #fff;
	padding-top: 20px;
}
.featured .plans_features {
	border-top: 1px solid #3B4752;
	padding-top: 20px;
}
.plans_features ul {
	list-style-image:url("../img/check-circle.svg");
	list-style-position: outside;
	text-align: left !important;
}
.featured .plans_features ul {
	list-style-image:url("../img/check-circle-dark.svg");
	list-style-position: outside;
	text-align: left !important;
}
.featured .plans_features li::marker {
	font-size: 29px !important;
}
.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/x-circle-2.svg");
}
.featured .plans_features ul .excluded{
	list-style-image:url("../img/x-circle-dark.svg");
}
.plans_features ul .vpn-feature{
	list-style-image:url("../img/check-circle-blue.svg");
}
.plans_features li.excluded {
	text-decoration: underline;
    text-underline-offset: -30%; 
    text-decoration-skip-ink: none;
	opacity: 0.3;
	font-size: 26px;
}
.pricing_middle {
	margin-bottom: 10px;
}

.vpn-btn {
	background: transparent;
	border: none;
	margin-right: auto;
	margin-left: auto;
	text-decoration: underline;
    text-underline-offset: 4px;
	color: #0094FF !important;
	margin-top: 0px;
	margin-bottom: 20px;
	cursor: pointer;
}
.vpn-btn:hover {
	background: transparent;
	border: none;
	margin-right: auto;
	margin-left: auto;
	text-decoration: underline;
    text-underline-offset: 4px;
	color: #0473CA !important;
	margin-top: 0px;
	margin-bottom: 20px;
	cursor: pointer;
}
.prefer-basics-text {
	color: #fff;
	-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 .prefer-basics-text {
        color: #DADADA;
    } 
 a:focus .prefer-basics-text {
        color: #DADADA;
    } 

/* --- 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/check-circle-dark.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/x-circle-dark.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;
}

.vpn-modal .modal-header {
	border-bottom: none !important;
	justify-content: end !important;
	padding-bottom: 0px !important;
}
.vpn-modal .modal-body {
	padding-top: 0px !important;
	text-align: center;
}
.vpn-modal .plans_features {
	border-top: 1px solid #3B4752;
}
.vpn-modal .plans_features ul {
	list-style-image: url("../img/check-circle-dark.svg");
}
.vpn-modal .plans_features ul .excluded {
	list-style-image: url("../img/x-circle-dark.svg");
}
.vpn-modal .plans_features li::marker {
	font-size: 29px !important;
}
.plans_features ul .vpn-feature::marker {
	font-size: 20px !important;
}
.vpn-modal-header {
	flex-direction: row; 
	display: flex; 
	align-items: center; 
	padding-left: 5px; 
	padding-right: 5px;
	justify-content: center;
}
    

/* ==========================================================================
   06.5. DARK WEB SCAN
   ========================================================================== */

.dark-web-h2 {
	font-size: 1.25em !important;
	font-weight: 600;
	color: #fff !important;
}
.dark-web-outline {
	position: relative;
	overflow: visible;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(10px);
	padding: 55px 20px 25px 20px;
    border-radius: 20px;
    border: 3px solid #9747FF;
}
.alert-gif {
	position: absolute;
	top: -70px;
	left: 0;
	right: 0;
	margin-right: auto;
	margin-left: auto;
}
.form-control {
	border-radius: 100px;
	border: none;
	background: rgba(255, 255, 255, .2);
	color: #fff;
}
.form-control:focus {
	border-radius: 100px;
	border: 2px solid #fff;
	background: rgba(255, 255, 255, .2) !important;
	box-shadow: none !important;
	color: #fff;
}
.form-control::placeholder {
	color: rgba(255, 255, 255, .5) !important;
}
#pricing_area #dark-web button {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	cursor: pointer !important;
}
.your-info {
	opacity: 0.5; 
	font-size: 1em; 
	line-height: 1.5em;
}
#databreach {
	scroll-margin-top: -475px;
}

/* ==========================================================================
   07. TESTIMONIALS
   ========================================================================== */
 
.testimonial-box {
	height: 100%;
	background: #F6F6F6;
	border-radius: 20px;
	padding: 30px;
}
.testimonial-name {
	font-size: 1.25em;
	font-weight: 600;
}
.testimonial-verified {
	opacity: .5;
}



/* ==========================================================================
   2-2. HOW WE PROTECT YOU - FEATURES
   ========================================================================== */
.feature-name {
	font-size: 1.25em;
	padding-bottom: 5px;
}
.section-flip {
	flex-direction : row;  
}
.flip-a {
	order: 1;
}
.flip-b {
	order: 2;
}
#credit-monitoring, #id-theft-insurance, #alerts, #pi-monitoring, #family-vpn, #support {
	scroll-margin-top: 100px;
}



/* ==========================================================================
   3-2. OUR STORY OUR MISSION CONTACT
   ========================================================================== */

.gradient-section {
	background: linear-gradient(45deg, #0094FF, #9747FF);
	border-radius: 20px;
	padding: 40px 40px;
}


/* ==========================================================================
   000. PRICING MODAL
   ========================================================================== */

.modal-content {
	border-radius: 20px;
}
.modal-footer {
	display: none;
}


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

#call-to-action {
	padding-top: 200px;
	padding-bottom: 200px;
	background-image: url('../img/top10-cta-bg.webp');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
#call-to-action .col-md-8 {
	padding-left: 5.5em;
}

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



/* ==========================================================================
   10. 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;
		}
	}
	@media (max-width: 1200px) {
		
	}
			
/* TABLET */
	@media (min-width: 992px) {
		
}
	@media (max-width: 991px) {
		.modal-lg, .modal-xl {
			max-width: 1200px !important;
		}
		#call-to-action .col-md-8 {
			padding-left: .5em;
		}
		.navbar-collapse {
			padding-bottom: 10px;
		}
		.plan-name {
			font-size: 1.75em;
		}
		.btn-pricing {
			padding-right: 1rem !important;
			padding-left: 1rem !important;
		}
		.btn-pricing:hover {
			padding-right: 1.25rem !important;
			padding-left: 1.25rem !important;
		}
		.nav-link-padding {
			padding-left: 0px;
		}
	}
	
/* MOBILE LG */
	@media (min-width: 768px) {
		.container{
			max-width: 100%;
		}
	}								
	@media only screen and (max-width: 767px){
		
		#logo {
			max-width: 300px !important;
		}
		.logo_center {
			display: block;
			margin-left: auto;
			margin-right: auto;
		}
		#social_proof .col-md-2 {
			width: 25% !important;
			float: left !important;
		}
		.toggle {
			margin: 25px auto 25px !important;
		}
		.primary {
			margin-top: 0px !important;
		}
		.vertical-center {
  			margin: 0;
  			position: static;
  			top: 0;
  			-ms-transform: none;
 		 	transform: none;
		}
		.collapsible:after {
  			content: url(../img/collapse-arrow.svg); /* Unicode character for "plus" sign (+) */
  			font-size: 13px;
  			color: #fff !important;
  			float: right;
  			margin-left: 15px;
			display: inline-block;
			fill: #fff;
		}
		#pricing_area .active:after {
  			content: url(../img/collapse-arrow-open.svg); /* Unicode character for "minus" sign (-) */
  			color: #fff !important;
			display: inline-block;
		}
		.featured .collapsible:after {
  			content: url(../img/collapse-arrow-dark.svg) !important; /* Unicode character for "plus" sign (+) */
  			font-size: 13px;
  			float: right;
  			margin-left: 15px;
			display: inline-block;
		}
		#pricing_area .featured .active:after {
  			content: url(../img/collapse-arrow-dark-open.svg) !important; /* Unicode character for "minus" sign (-) */
			display: inline-block;
		}
		#pricing_area button {
			cursor: pointer;
		}
		.collapsible {
  			display: flex;
  			flex-direction: row;
		}
		#pricing_area .active {
			border-bottom: 1px solid #fff;
			padding-bottom: 10px;
		}
		#pricing_area .featured .active {
			border-bottom: 1px solid #3B4752;
			padding-bottom: 10px;
		}
		.discount-callout {
			padding-top: 20px;
			padding-bottom: 12px;
		}
		.plan-name {
			color: #fff !important;
			font-size: 2rem;
			text-align: left;
			margin-bottom: 0px;
			font-weight: 600 !important;
		}
		.vpn-modal .plan-name {
			text-align: center;
		}
		span.monthly {position: relative; margin-left: -25px; font-size: 14px; font-weight: 400}
		span.price_symbol {position: relative; top: -17px; font-size: 21px; font-weight: 400}
		span.price_dollar {font-size: 45px; margin-left: -3px; font-weight: 300;}
		sup.price_cents {position: relative; margin-left: -9px; top: -20px; font-size: 17px; font-weight: 600;}
		.pricing_middle {
			margin-bottom: 0px;
		}
		#pricing_area .col-md-4 {
			width: 100% !important;
			margin: 5px 0px;
		}
		#pricing_area .featured {
			margin: 35px 0px 5px 0px !important;
			padding: 25px 10px 10px 10px;
		}
		.section-flip {
			flex-direction : column;  
		}
		.flip-a {
			order: 2;
		}
		.flip-b {
			order: 1;
		}
		.review p {
			font-size: 0.75rem;
		}
		#hero {
			background-image: url('../img/top10-hero-bg-mobile-2.webp');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: bottom center;
		}
		#hero h1 {
			font-size: 1.75em;
		}
		#hero .hero-content {
			background: linear-gradient(180deg, rgba(7,24,43,.8), transparent 75%);
			padding-bottom: 200px;
		}
		.home-2 #hero .hero-content {
			background: none;
			padding-bottom: 0px;
		}
		.hero-content .hero-text {
			margin-top: 100px !important;
		}
		h2 {
			font-size: 1.75em;
		}
		.box h3 {
			font-size: 1.15em;
		}
		#call-to-action {
			padding-top: 100px;
			padding-bottom: 450px;
			background-image: url('../img/top10-cta-bg-mobile.webp');
			background-repeat: no-repeat;
			background-size: cover;
			background-position: center center;
		}
		.how-we-protect-you #hero {
			padding-top: 100px;
			background-image: url(../img/how-we-protect-you-hero-bg-mobile.webp) !important;
		}
		.how-we-protect-you #hero .hero-content {
			background: none !important;
			padding-bottom: 50px;
		}
		.how-we-protect-you #hero {
			padding-bottom: 25px;
		}
		.how-we-protect-you h1 {
			width: 100%;
		}
		.how-we-protect-you-hero-p, .about-us-hero-p {
			width: 100%;
		}
		.id-theft-ins-img {
			margin-left: -30px;
		}
		.support-img {
			margin-left: -45px;
		}
		.about-us #hero {
			background-size: 100%;
		}
		.home-2 #hero {
			background-size: 100%;
		}
		.hero-about-us-content {
			padding-top: 100px;
			padding-bottom: 25px;
		}
		.gradient-section {
			margin-right: 5px;
			margin-left: 5px;
			padding: 30px 20px;
		}
		.our-story-img {
			margin-left: -25px;
		}
		#credit-monitoring, #id-theft-insurance, #alerts, #pi-monitoring, #family-vpn, #support {
			scroll-margin-top: 90px;
		}
		.your-info {
			font-size: .85em; 
		}
		#databreach {
			scroll-margin-top: 80px;
		}
		.hero-2-h1 {
			width: 100%;
			margin-right: auto;
			margin-left: auto;
			font-size: 1.75em !important;
			line-height: 1.1em !important;
		}
		.hero-2-p {
			width: 100%;
			margin-right: auto;
			margin-left: auto;
		}
		.hero-2-content {
			padding-bottom: 45px;
			padding-top: 110px;
		}
		.btn-secondary-2 {
			padding-right: 1rem!important;
    		padding-left: 1rem!important;
		}
		.btn-secondary-2:hover {
			padding-right: 1.5rem!important;
    		padding-left: 1.5rem!important;
		}
		
		.plan {
			padding: 20px 10px 15px 10px;
		}
		.vpn-subhead {
			font-size: .85em;
		}	
		
		.vpn-modal .modal-body {
			padding-left: .5em;
			padding-right: .5em;
		}
		.vpn-modal .discount-callout {
			padding-top: 5px;
		}
		.vpn-modal-header {
			justify-content: left;
			padding-left: 10px; 
			padding-right: 5px;
		}
		form {
			padding-right: 20px;
			padding-left: 20px;
		}
		.dark-web-outline {
			padding: 55px 10px 25px 10px;
		}

	}
/* MOBILE SM */
	@media (min-width: 455px) {
		.container {
			max-width: 100%;
			padding: 0px 20px;
		}
	}
	@media (max-width: 455px) {
		.modal-dialog {
			max-width: 800px;
		}
		.btn-primary, .btn-secondary {
			padding-right: 1em !important;
			padding-left: 1em!important;
			padding-top: .6em !important;
			padding-bottom: .6em !important;
		}
		#hero .btn-primary {
			padding-top: .75em !important;
			padding-bottom: .75em !important;
		}
	}
@media (max-width: 390px) {
	.plan-name {
		font-size: 1.5em !important;
	}
	.collapsible:after {
		margin-left: 5px;
	}
	.featured .collapsible:after {
		margin-left: 5px;
	}
	.how-we-protect-you #hero .hero-content {
		overflow: visible !important;
	}
}






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

.hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-20%);
	transition: all 1s;
}
.shown {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}

.hero-animate:nth-child(2){
	transition-delay: 200ms;
}
.hero-animate:nth-child(3){
	transition-delay: 400ms;
}

.social-proof-animate:nth-child(2){
	transition-delay: 200ms;
}
.social-proof-animate:nth-child(3){
	transition-delay: 400ms;
}
.social-proof-animate:nth-child(4){
	transition-delay: 600ms;
}
.social-proof-animate:nth-child(5){
	transition-delay: 800ms;
}
.social-proof-animate:nth-child(6){
	transition-delay: 800ms;
}

.features-animate:nth-child(2){
	transition-delay: 200ms;
}
.features-animate:nth-child(3){
	transition-delay: 400ms;
}
.features-animate:nth-child(4){
	transition-delay: 0ms;
}
.features-animate:nth-child(5){
	transition-delay: 0ms;
}
.features-animate:nth-child(6){
	transition-delay: 200ms;
}

.pricing-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-20%);
	transition: all 1s;
}
.pricing-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}

.testimonials-animate:nth-child(2){
	transition-delay: 200ms;
}
.testimonials-animate:nth-child(3){
	transition-delay: 400ms;
}

.about-hero-animate:nth-child(2){
	transition-delay: 00ms;
}
.about-hero-animate:nth-child(3){
	transition-delay: 200ms;
}

.about-reviews-animate:nth-child(2){
	transition-delay: 200ms;
}
.about-reviews-animate:nth-child(3){
	transition-delay: 400ms;
}
.about-reviews-animate:nth-child(4){
	transition-delay: 600ms;
}
.about-reviews-animate:nth-child(5){
	transition-delay: 800ms;
}
.about-reviews-animate:nth-child(6){
	transition-delay: 1000ms;
}
.about-reviews-animate:nth-child(7){
	transition-delay: 1200ms;
}

.story-animate:nth-child(2){
	transition-delay: 200ms;
}
.mission-animate:nth-child(2){
	transition-delay: 200ms;
}

.how-hero-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateY(30%);
	transition: all 1s;
}
.how-hero-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateY(0);
}

.how-hero-animate:nth-child(2){
	transition-delay: 200ms;
}
.how-hero-animate:nth-child(3){
	transition-delay: 200ms;
}
.how-hero-animate:nth-child(4){
	transition-delay: 400ms;
}
.how-hero-animate:nth-child(5){
	transition-delay: 600ms;
}

.cred-mon-animate:nth-child(2){
	transition-delay: 200ms;
}
.id-theft-ins-animate:nth-child(2){
	transition-delay: 200ms;
}
.alerts-animate:nth-child(2){
	transition-delay: 200ms;
}
.pi-mon-animate:nth-child(2){
	transition-delay: 200ms;
}
.family-vpn-animate:nth-child(2){
	transition-delay: 200ms;
}
.support-animate:nth-child(2){
	transition-delay: 200ms;
}
.hero2-animate:nth-child(2){
	transition-delay: 200ms;
}
.hero2-animate:nth-child(3){
	transition-delay: 400ms;
}
.hero2-animate:nth-child(4){
	transition-delay: 600ms;
}
.hero2-animate:nth-child(5){
	transition-delay: 600ms;
}

.hero-2-bento-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateY(30%);
	transition: all 1s;
}
.hero-2-bento-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateY(0);
}

	.social-proof-logo-1-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-20%);
	transition: all 1s;
}
.social-proof-logo-1-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}



@media only screen and (max-width: 767px) {
	
.hero-2-bento-hidden {
	opacity: 0;
	filter: blur(5px);
	transform: translateX(-20%);
	transition: all 1s;
}
.hero-2-bento-show {
	opacity: 1 !important;
	filter: blur(0);
	transform: translateX(0);
}	

.features-animate:nth-child(2){
	transition-delay: 0ms;
}
.features-animate:nth-child(3){
	transition-delay: 0ms;
}
.features-animate:nth-child(4){
	transition-delay: 0ms;
}
.features-animate:nth-child(5){
	transition-delay: 0ms;
}
.features-animate:nth-child(6){
	transition-delay: 0ms;
}
.features-animate:nth-child(7){
	transition-delay: 0ms;
}
.testimonials-animate:nth-child(2){
	transition-delay: 0ms;
}
.testimonials-animate:nth-child(3){
	transition-delay: 0ms;
}
.about-reviews-animate:nth-child(2){
	transition-delay: 0ms;
}
.about-reviews-animate:nth-child(3){
	transition-delay: 0ms;
}
.about-reviews-animate:nth-child(4){
	transition-delay: 200ms;
}
.about-reviews-animate:nth-child(5){
	transition-delay: 400ms;
}
.about-reviews-animate:nth-child(6){
	transition-delay: 0ms;
}
.about-reviews-animate:nth-child(7){
	transition-delay: 0ms;
}
.story-animate:nth-child(2){
	transition-delay: 0ms;
}
.mission-animate:nth-child(2){
	transition-delay: 0ms;
}
.cred-mon-animate:nth-child(2){
	transition-delay: 0ms;
}
.id-theft-ins-animate:nth-child(2){
	transition-delay: 0ms;
}
.alerts-animate:nth-child(2){
	transition-delay: 0ms;
}
.pi-mon-animate:nth-child(2){
	transition-delay: 0ms;
}
.family-vpn-animate:nth-child(2){
	transition-delay: 0ms;
}
.support-animate:nth-child(2){
	transition-delay: 0ms;
}
	
	
}


@media(prefers-reduces-motion) {
	.hidden {
		transition: none;
	}
	.pricing-hidden {
		transition: none;
	}
	.how-hero-hidden {
		transition: none;
	}
	.hero-2-bento-hidden {
		transition: none;
	}
	.social-proof-logo-1-hidden {
		transition: none;
	}
	
}