html {
    width: 100%;
}
body {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 400;
	padding:0;
	margin:0;
	height: 100%;
	overflow-x: hidden;
	background: #f7faff;
}
h1,h2,h3,h4,h5,h6,ul,p { padding:0; margin:0;}
ul { padding:0 0 20px 30px; margin:0;}
a { text-decoration:none;}
a:hover, a:focus { text-decoration:none; outline:none;}
.btn.focus, .btn:focus { box-shadow:none;}
a img { border:none;}
p { color: #596373;}
p a { color:#2daee4; text-decoration:underline;}
p a:hover { color:#1a8ebf; text-decoration:underline;}
strong { font-weight:bold;}
.align-right { text-align:right;}
button:focus { outline:none;}
::-webkit-input-placeholder { opacity:1;}
::-moz-placeholder { opacity:1;}
:-ms-input-placeholder { opacity:1;}
:-moz-placeholder { opacity:1;}
.hide { display:none;}
button { cursor:pointer; border:0;}
* { -webkit-transition: all .1s; -moz-transition: all .1s; -ms-transition: all .1s; -o-transition: all .1s; transition: all .1s;}
select { -webkit-appearance: none; border-radius: 0;}

.btn { text-decoration:none;display:inline-block; background:#ccc; padding:7px 40px; border-radius:5px; font-size:20px; font-weight:600; color:#000;}
.btn i { font-size:14px; margin:0 3px;}
.btn-blue { background:#2d61d3; color:#fff;}
.btn-blue:hover { background:#2d61d3; color:#fff;}
.btn-white { background:#f6f6f6; color:#111;}
.btn-white:hover { background:#eee; color:#111;} 
.btn-white-trans { background:transparent; color:#fff;}
.btn-white-trans:hover { background:#fff; color:#111;}
.btn-grey { background:#f1f1f1; color:#111;}
.btn-grey:hover { background:#eee; color:#111;}
.btn-disabled { background:#ddd; color:#555;}
.btn-disabled-outline { background:#fff; border:1px solid #aaa; color:#aaa;}
.btn-disabled-outline:hover { background:#fff; border:1px solid #aaa; color:#aaa;}

.btn-blue-outline { background:transparent; border:1px solid #2d61d3; color:#2d61d3;}
.btn-blue-outline:hover { background:#2d61d3; color:#fff;}
.btn-grey-outline { background:transparent; border:1px solid #555; color:#555;}
.btn-grey-outline:hover { background:#555; color:#fff;}
.btn-white-outline { background:transparent; border:1px solid #fff; color:#fff;}
.btn-white-outline:hover { background:#fff; color:#111;}

.btn-full { width:100%;}

.primary-blue { color: #2d61d3;}
.light-blue { color: #f7faff;}
.dark-text { color: #596373;}
.blue-gradient {
background: #506eda; /* Old browsers */
background: -moz-linear-gradient(left, #506eda 0%, #388be5 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #506eda 0%,#388be5 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #506eda 0%,#388be5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#506eda', endColorstr='#388be5',GradientType=1 ); /* IE6-9 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#506eda+0,388be5+100 */}

.hero { position: relative;}
.hero::after { content: ''; position: absolute; right: 0; top: 0; width: 65%; height: 115%; background: url('../img/bg-hero-shape.png') right top/contain no-repeat; }
header { padding: 20px 0;}
header.fixed { position: fixed; left: 0; top: 0; width: 100%;}
.navbar-nav { position: relative; z-index: 1;}
.navbar-nav .nav-item { margin: 0 0 0 40px;}
.navbar-nav .nav-item .nav-link { font-size: 20px; text-transform: uppercase; color: #fff;}
.navbar-nav .nav-item.active .nav-link { font-weight: 600;}
.hero-area { padding: 50px 0; position: relative; z-index: 1;}
.hero-caption h1 { font-size: 40px; font-weight: 700; color: #2d61d3; margin: 0 0 40px 0;}
.hero-caption p { font-size: 25px; margin: 0 0 40px 0;}
.hero-img { text-align: right;}
.hero-img img { margin: 0 -150px 0 0; width: 80%;}

.pricing-sec { background: #fff; padding: 100px 0;}
.pricing-sec h2 { font-size: 35px; font-weight: 600; color: #2d61d3; margin: 0 0 40px 0; position: relative;}
.pricing-sec h2::after { content: ''; position: absolute; left: 0; bottom: -10px; width: 50px; height: 3px; background: #2d61d3;}
.pricing-sec p { font-size: 20px; margin: 0 0 40px 0;}

footer { padding: 100px 0;}
.footer-contact { text-align: center; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
.footer-contact h3 { width: 100%; font-size: 35px; font-weight: 700; margin: 0 0 60px 0; color: #fff; position: relative;}
.footer-contact h3::after { content: ''; position: absolute; left: 0; right: 0; margin: auto; bottom: -10px; width: 50px; height: 3px; background: #fff;}
.footer-logo { width: 40%; margin: 0 20px; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 10px; padding: 60px 0;}
.footer-social { width: 40%; margin: 0 20px;}
.footer-social a i { width: 40px; height: 40px; background: #fff; border-radius:40px; text-align: center; font-size: 20px; color: #2d61d3; margin: 0 20px 0 0; line-height: 40px; flex-shrink: 0;}
.footer-social span { font-size: 20px; color: #fff; display: flex; align-items: center; margin: 10px 0;}
.footer-social a:hover span { text-decoration: underline;}
.copyright { background: #3657ae; padding: 20px 0;}
.copyright p { font-size: 15px; color: #fff; text-align: center;}