/* ===========================
	CATEGORY
=========================== */
/* ---------------------------
	Sub Category
--------------------------- */

/* Title */

/*
 * This is a detailed explanation
 * of something that should require
 * several paragraphs of information.
 */



/*
background
	white	fff
	lgray	f6f6f8
	blue	2684fe

text
	dark	364861
	light	#a5aab5
	white	fff
	blue 	1983f3

*/

/* ===========================
	DRAWER MODAL 
=========================== */
	.drawer.fade {
		opacity: 1;
		transition: opacity .15s linear;
		padding: 0!important;
	}
	.drawer.fade.show .modal-dialog {
	    transform: translate(0, 0);
		opacity: 1;
	}
	.drawer.fade .modal-dialog {
		width: 85%;
		height: 100%;
		margin: 0 auto 0 0;
		max-width: 360px;
		background-color: #fff;
		transition: transform .15s linear;
		transform: translate(-100%, 0);
		transition-duration: .15s;
	}
		.drawer.fade .modal-content {
			box-shadow: none;
			border: none;
			border-radius: 0;
			background-clip: initial;
		}

			.drawer.fade .modal-header {
				position: relative;
			}
			.drawer.fade .modal-header .modal-title {

			}

			.drawer.fade .modal-header button.close {
				position: absolute;
			    bottom: 0;
			    right: 0;
			    top: 50%;
			    font-size: 40px;
			    font-weight: 400;
			    width: 50px;
			  	height: 50px;
			    opacity: 1;
				outline: none;
			  	margin: -25px 0 0;
			    padding: 0;
			  	transform: rotate(0deg);
			    transition: all 0.2s ease;
			    text-shadow: none;
			}
			.drawer.fade .modal-header button.close:hover {
				color: #e64d4d;
			    transform: rotate(90deg);
			}


	/* ---------------------------
		Additional Classes
	--------------------------- */
		/* Double the max-width */
		.drawer.fade.x2 .modal-dialog {
		  max-width: 720px;
		}
		/* Drawer from the Right */
		.drawer.fade.right .modal-dialog {
			transform: translate(100%, 0);
			margin: 0 0 0 auto;
		}
		.drawer.fade.right.show .modal-dialog {
			transform: translate(0, 0);
		}

/* ===========================
	Bootstrap Tweaks
=========================== */
	/*--------------*/
		.btn {
			border-radius: 90px;
			padding: 0.5rem 1.5rem;
		}
		.btn:hover,
		.btn:focus,
		.btn:active {
			opacity: 0.95;
		}
		.btn-primary {
			background-color: #1f5cdb;
			border-color: #1f5cdb;
		}
		.btn-primary:hover,
		.btn-primary:focus,
		.btn-primary:active {
			background-color: #1f5cdb;
			border-color: #1f5cdb;
		}
		.btn-outline-primary,
		.btn-outline-primary a {
			color: #1f5cdb;
			border-color: #1f5cdb;
			border-width: 3px;
		}
		.btn-outline-primary:hover,
		.btn-outline-primary:focus,
		.btn-outline-primary:not(:disabled):not(.disabled).active,
		.btn-outline-primary:not(:disabled):not(.disabled):active,
		.btn-outline-primary a:hover,
		.btn-outline-primary:not(:disabled):not(.disabled).active a:focus,
		.btn-outline-primary:not(:disabled):not(.disabled):active a:active {
			background-color: #1f5cdb;
			border-color: #1f5cdb;
			color: #fff;
		}
	/*--------------*/
		.card {
		    border-radius: 0;
		    border: none;
		    background-color: #ebeef7;
		    padding: 0.75rem 1rem;
		}
	/*--------------*/
		.modal-content {
			border: none;
		
		}
		.modal-header {
			padding: 20px 30px;
			background-color: #f6f6f8;
			border-radius: 0;

		}
		.modal-body {
			padding: 30px;
		}
		.modal-footer {
			padding: 20px 30px;
			background-color: #f6f6f8;
			border-radius: 0;
		}
	/*--------------*/
		.form-control {
			border-radius: 10px;
			background-color: #f6f6f8;
			padding: 1.25rem 1rem;
	    	border-radius: 90px;
		}

/* ===========================
	BASICS
=========================== */
	body {
		color: #061d4f;
		background: #000;
		font-family: 'Open Sans', Arial, sans-serif;
	}
	h1, h2, h3, h4, h5, h6 {
		color: #364861;
		font-weight: 700;
	}
	img {
	    max-width: 100%;
	    height: auto;
	}
	a {
		transition: all 0.2s ease;
	}
/* ===========================
	MARKUP
=========================== */
	header {
		position: relative;
		background-color: #fff;
		box-shadow: 0 0 20px rgba(0,0,0,0.2);
	}
	main {
		background-color: #fff;
	}
	footer {

	}
	footer .copyright {
		color: #fff;
		text-align: center;
		padding: 3rem 0;
		font-size: 0.75rem;
	}
/* ===========================
	NAVIGATION
=========================== */
	/* Navigation Bar */
	#nav {
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-start;
		align-items: center;
		padding: 20px 0;
	}
		/* Open Mobile Nav Button */
		#nav .open-mobile-nav {
			color: #000;
		    height: 60px;
		    width: 60px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    flex-shrink: 0;
		}
		#nav .open-mobile-nav:hover,
		#nav .open-mobile-nav:focus {
			text-decoration: none;
		}
		/* Brand/Logo Button */
		#nav .brand {
			color: #000;
			height: 60px;
			padding: 0;
			font-weight: 600;
			font-size: 1.3rem;
			display: flex;
			align-items: center;
		}
		@media (max-width: 991px) {
			#nav .brand {
				width: 100%;
			}
		}
		#nav .brand:hover,
		#nav .brand:focus {
			text-decoration: none;
		}
		/*#nav .brand:before {
			content: " ";
			display: inline-block;
		    width: 50px;
		    height: 50px;
		    margin-left: -10px;
			background-image: url('../img/logo.png');
			background-repeat: no-repeat;
			background-position: 50% 50%;
		}*/
		/* Login Button */
		#nav .login {
			color: #fff;
		    background-color: #061d4e;
		    height: 60px;
		 	padding: 0 30px;
		 	font-weight: 600;
		    text-transform: uppercase;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		#nav .login:hover,
		#nav .login:focus {
			text-decoration: none;
		}
		@media (max-width: 991px) {
			#nav .login {
				font-size: 0;
				width: 60px;
				padding: 0;
			}
			#nav .login:before {
				content: "\f084";
				font-family: 'Font Awesome 5 Free';
				font-size: 1rem;
			    font-weight: 900;
			    -moz-osx-font-smoothing: grayscale;
			    -webkit-font-smoothing: antialiased;
			    display: inline-block;
			    font-style: normal;
			    font-variant: normal;
			    text-rendering: auto;
			    line-height: 1;
			}
		}
		/* Navigation */
		#nav .content {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 0 0 0 auto;
		}

			#nav ul {
				display: flex;
				flex-direction: row!important;
				padding: 0;
				margin: 0 0 0 auto;
			}
			#nav ul li {
				position: relative;
				display: inline-block;
				margin-left: -4px;
			}
			#nav ul li a {
				position: relative;
				z-index: 20;
				display: inline-block;
			    color: #061d4e;
			    padding: 2px 30px;
			    height: 60px;
			    display: flex;
			    align-items: center;
			    justify-content: center;
			}
			#nav ul li a:hover,
			#nav ul li a:focus {
				text-decoration: none;
			}
			#nav ul li a:after {
				content: " ";
				width: 1px;
				height: 30px;
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -15px;
				background-color: #1f5cdb;
			}
			#nav ul li:last-child a:after {
				display: none;
			}
			/* Active Link */
				#nav ul li.active:before {
					transition: none;
					bottom: 0px;
				}
				#nav ul li.active a {
					transition: none;
					color: #fff;
				}
				#nav ul li:focus a,
				#nav ul li:hover a {
					color: #fff;
				}
				#nav ul li:before {
					content: " ";
				    position: absolute;
				    z-index: 10;
				    top: -80px;
				    left: -1px;
				    right: 0;
				    bottom: 80px;
				    background-color: #1e5cdb;
				    transition: all 0.2s ease;
				}
				#nav ul li:focus:before,
				#nav ul li:hover:before {
					bottom: 0px;
				}
		/* Mobile Nav */
			#mobile-nav .modal-header {
				background-color: #1f5cdb;
				border: none;
			}
			#mobile-nav .modal-header h5 {
				color: #fff;
			}
			#mobile-nav .modal-header a {
				color: #fff;
			}
			#mobile-nav .modal-header a:hover,
			#mobile-nav .modal-header a:focus {
				text-decoration: none;
			}
			#mobile-nav .modal-header .close {
				color: #fff;
			}
			#mobile-nav .modal-body {
				padding: 0;
			}
			#mobile-nav .modal-body ul {
				padding: 0;
				list-style: none;
			}
			#mobile-nav .modal-body ul li {
				display: block;
			}
			#mobile-nav .modal-body ul li a {
				display: block;
				padding: 15px 30px;
				border-bottom: 1px solid #efefef;
				color: #061d4e;
			}
			#mobile-nav .modal-body ul li a:hover,
			#mobile-nav .modal-body ul li a:focus {
				text-decoration: none;
			}
		/* Login */
			#login .modal-header {
				background-color: #1f5cdb;
				border: none;
			}
			#login .modal-header h5 {
				color: #fff;
			}
			#login .modal-header a {
				color: #fff;
			}
			#login .modal-header a:hover,
			#login .modal-header a:focus {
				text-decoration: none;
			}
			#login .modal-header .close {
				color: #fff;
			}
/* ===========================
	BLOCKS
=========================== */
	.block {
		color: #061d4f;
		padding: 6rem 0 0;
	}
	.block .column {
		margin-bottom: 6rem;
	}
	@media (max-width: 991px) {
		.block {
			text-align: center;
			padding: 3rem 0;
		}
		.block .column {
			margin-bottom: 3rem;
		}
		.block .column:last-child {
			margin: 0;
		}
	}
	/* Main */
		.block.main {
			padding: 0;
		}
		.block.main .column {
			margin-bottom: 0;
		}
		.block.main .background {
			padding-top: 4rem;
			padding-bottom: 4rem;
			border-top: 2rem solid transparent;
			border-bottom: 2rem solid transparent;
			background-size: 50% auto;
		    background-repeat: no-repeat;
		    background-position: 100% 50%;
		}
		@media (max-width: 991px) {
			.block.main .background {
				padding-top: 2rem;
				padding-bottom: 85%;
				border-top: 1rem solid transparent;
				border-bottom: 1rem solid transparent;
				background-size: contain;
				background-position: 100% 100%;
			}
		}
		.block.main h1 {
			font-size: 4em;
			font-weight: 800;
			color: #1f5cdb;
		}
		.block.main h2 {
			color: #061d4f;
			margin-bottom: 3rem;
		}
		.block.main span {
			display: block;
			font-size: 1rem;
			margin-bottom: 3rem;
			max-width: 50%;
		}
		@media (max-width: 991px) {
			.block.main span {
				max-width: initial;
			}
		}
		.block.main span.bold {
			margin-top: 2rem;
			font-size: 1.3rem;
			font-weight: 700;
		}
		.block.main .btn {
			text-transform: uppercase;
			font-weight: 600;
		}
	/* Cards */
		.block.cards {
			background-color: #2861d6;
			text-align: center;
		}
		@media (max-width: 991px) {
			.block.cards .column {
				margin-top: 3em;
			}
		}
		.block.cards a {
			text-decoration: none;
		}
		.block.cards .card {
			padding: 4rem 1rem 2.5rem;
			margin: 0 1rem;
			height: 100%;
		}

		.block.cards .icon {
			position: absolute;
			top: 0;
		    left: 50%;
		    margin: -45px 0 0 -45px;
			width: 90px;
			height: 90px;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.block.cards h3 {
			text-transform: uppercase;
			font-size: 1rem;
			font-weight: 700;
		}
		.block.cards .divider {
			background-color: #061d4f;
			width: 30px;
			height: 4px;
			margin: 0 auto 0.5rem;
		}
		.block.cards span {
			display: block;
			font-weight: 400;
			color: #061d4f;
			font-size: 0.85rem;
		}
		.block.cards .outline-box {
		    font-size: 0.75rem;
		    border: 2px solid #2860d6;
		    display: inline-block;
		    width: auto;
		    margin: 2rem auto 0;
		    padding: 0.5rem 1.25rem;
		    font-weight: 700;
		}
	/* Content */
		.block.content .row {
			padding: 0 6rem;
		}
		@media (max-width: 991px) {
			.block.content .row {
				padding: 0;
			}
		}
		.block.content.alt {
			background-color: #f0f4fc;
		}
		.block.content.alt .column:first-child {

		}
		.block.content .icon {
			width: 138px;
			height: 138px;
			margin: 0 auto 2rem;
			border-radius: 100%;
			box-shadow: 10px 10px 15px rgba(0,0,0,0.1);
			background-size: cover;
			background-repeat: no-repeat;
		}
		.block.content h3 {
			text-align: center;
			text-transform: uppercase;
			font-weight: 800;
			color: #1f5cdb;
			font-size: 1.2rem;
		}
		.block.content span {
			display: block;
		    padding: 2.75rem 3rem;
			border: 2px solid #dbe5f9;
			font-weight: 600;
		    background-color: #fff;
		    box-shadow: 10px 10px 15px rgba(0,0,0,0.05);
		}
		@media (max-width: 991px) {
			.block.content span {
				padding: 1.75rem 2rem;
			}
		}
		.block.content span ul {
			margin: 0;
		}
		.block.content .btn {
			/* width: 160px; */
			font-size: 0.9rem;
			font-weight: 600;
		}
		.block.content .btn:first-of-type {
			margin-right: 1rem;
		}
		@media (max-width: 991px) {
			.block.content .btn:first-of-type {
				margin: 0 auto 1rem;
			}
			.block.content .btn {
				display: block;
				width: 100%;
			    max-width: 400px;
			    margin: 0 auto;
			}
		}
		/* v2 */
			.block.content.v2 .row {
				padding: 0 3rem;
			}
			@media (max-width: 991px) {
				.block.content.v2 .row {
					padding: 0;
				}
			}
			.block.content.v2 .icon {
				margin: 0 0 1.5rem;
			}
			@media (max-width: 991px) {
				.block.content.v2 .icon {
					margin: 0 auto 1.5rem;
				}
			}
			.block.content.v2 h3 {
				text-align: initial;
				margin-bottom: 1.5rem;
			}
			@media (max-width: 991px) {
				.block.content.v2 h3 {
					text-align: center;
				}
			}
			.block.content.v2 i {
				display: block;
				margin-bottom: 1.5rem;
			}