@charset "utf-8";
/* CSS Document */

/*
Copyright (c) 2017
[Master Stylesheet]
Template Name : E-Learning Course-Multipurpose Landing Page-UiSumo
Version    : 1.0
Author     : UISuMo Team
Author URI : https://uisumo.com
Support    : uisumo@gmail.com
*/


@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,600italic,700);
/* --------------------------------
1. Primary style
-------------------------------- */

body { font-size: 100%; font-family: 'Open Sans', sans-serif; color: rgba(2, 23, 37, 0.7); background-color: white; font-size: 14px; line-height: 23px; color: #94949e; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; }
body.overflow-hidden { /* when primary navigation is visible, the content in the background won't scroll */ overflow: hidden; }
a { color: #94949e; }
a, a:hover, a:active, a:visited, a:focus { text-decoration: none; outline: 0; }
a:hover, a:active, a:visited, a:focus { color: #7e9fff; }
img { max-width: 100%; }
.padding-top60 { padding-top: 60px; }
.padding-bottom40 { padding-bottom: 40px; }
.margin-top-minus80 { margin-top: -80px; }
.margin-top-minus60 { margin-top: -60px; }
.light { color: #fff; }
.dark { color: #222; }
.bg-white { background-color: #fff !important; }
.bg-primary { background-color: #f5f5fa !important; }
.btn { border: none; border-radius: 0px; height: 60px; }
.btn-intro { background: #7e9fff; color: #fff; text-transform: uppercase; font-size: 15px; font-weight: 600 }
.btn-intro:hover, .btn-intro:focus { background: #fff; color: #7e9fff }
.btn, .price-boxes *, .latest-news-box *, footer *, .navbar-custom .navbar-nav > li > a{ -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.section { padding: 90px 0 80px; }
/* --------------------------------
2. Typography
-------------------------------- */

/* -------------------------------------
    Headings
---------------------------------------- */
h1, h2, h3, h4, h5, h6 { font-family: 'kreonbold'; margin-top: 0; color: #46455c; letter-spacing: 0.05em; letter-spacing: .5px; }
h1 { font-size: 30px; }
h2 { font-size: 24px; }
h3 { font-size: 21px; line-height: 30px; }
h4 { font-size: 18px; line-height: 26px; }
h5 { font-size: 16px; line-height: 24px; }
h6 { font-size: 14px; line-height: 20px; }
p { font-size: 14px; line-height: 23px; margin-bottom: 24px; cursor: default; }
p.text-large { font-size: 18px; font-weight: 400; line-height: 28px; color: #94949e }
p.sub { font-size: 12px; line-height: 16px; }
p.sub a { font-weight: bold; color: #222; }
p:last-child { margin-bottom: 0; }
p a { color: #6dc77a; font-weight: 700; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; }
p a:hover { color: #40a74f; }
p.text-white a { color: #fff; }

@media all and (max-width: 768px) {
p.lead { font-weight: normal; font-size: 14px; line-height: 23px; }
}
/*TOPBAR*/
.navbar-custom { border-top: #7e9fff 2px solid; background: #fff; margin: 0; border: none;  z-index:999999; box-shadow:0 0 5px rgba(0,0,0,.40) }
.navbar-custom .topbar { border-bottom: 1px solid #f7f7f7;transition: max-height 0.15s ease-out; max-height:64px; }
.navbar-custom .topbar ul { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: flex-end; padding: 20px 0 }
.navbar-custom .topbar ul li { position: relative; font-weight: 600; align-self: flex-end; display: flex; align-items: center; float: right; margin: 0 0 0 30px; color: #94949e; }
.navbar-custom .topbar ul li i.fa { color: #7e9fff; display: inline-block; vertical-align: central; font-size: 16px; margin: 0 6px; }
.navbar-custom .topbar ul li select.form-control { position: relative; background: none; z-index: 9999; border: none; box-shadow: none; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; color: #94949e; padding-right: 15px; height: 26px; line-height: 26px; }
.navbar-custom .topbar ul li i.select-caret { position: absolute; height: 20px; top: 50%; margin: -10px 0 0 0; line-height: 20px; right: 5px; z-index: 0; color: #94949e; }
.navbar-toggle .fa{font-size:24px; color:#7e9fff}
.navbar-custom .navbar-nav > li > a:hover, .navbar-custom .navbar-nav > li > a:focus{background:none; color:#46455c;}
.navbar-nav { font-weight: 600; text-transform: uppercase; }
.navbar-custom .navbar-nav > li > a { color: #7e9fff; padding: 30px 15px; }
.navbar-custom .navbar-nav > .active > a, .navbar-custom .navbar-nav > .active > a:hover, .navbar-custom .navbar-nav > .active > a:focus { background: none; color: #46455c }
.top-nav-collapse .topbar{overflow: hidden;max-height: 0;
    transition: max-height 0.15s ease-out;
    overflow: hidden;}
.top-nav-collapse .navbar-brand{ padding: 18px 15px; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out;}
/*HEADER*/
.intro { display: table; width: 100%; height: auto; text-align: center; color: #fff; background: none; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; position: relative; -o-background-size: cover; background-position: top center; position: relative; }
.intro .intro-body { display: table-cell; vertical-align: middle; position: relative; }
.intro .intro-body .brand-heading { font-size: 40px; }
.intro .intro-body .intro-text { font-size: 18px; }
.intro .video-overlay:before { position: absolute; content: ''; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.4); z-index: 1 }
.intro-form { margin: 80px 0 30px; }
.intro .container { position: relative; z-index: 9999 }
.intro h1 { color: #fff; font-size: 48px; }
.intro .form-control { background: none; border-radius: 0px; border: 3px solid #fff; height: 60px; font-weight: 600; color: #fff; }
.jquery-background-video-pauseplay { z-index: 999; width: 70px; height: 70px; border-radius: 100%; background: none; border: 2px solid #7e9fff !important; color: #fff; margin-left: -35px !important; margin-top: 30px; }
.jquery-background-video-pauseplay.pause::after { left: 36px; }
.jquery-background-video-pauseplay::after, .jquery-background-video-pauseplay::before { left: 26px; top: 24px; }
.intro .form-control::-webkit-input-placeholder {
color:    #FFFFFF;
opacity:  .9;
}
.intro .form-control:-moz-placeholder {
color:    #FFFFFF;
opacity:  .9;
}
.intro .form-control::-moz-placeholder {
color:    #FFFFFF;
opacity:  .9;
}
.intro .form-control:-ms-input-placeholder {
color:    #FFFFFF;
opacity:  .9;
}
.intro .form-control:placeholder-shown {
color:    #FFFFFF;
opacity:  .9;
}
.intro .command { width: 70px; height: 70px; border-radius: 100%; background: none; border: 2px solid #7e9fff; font-family: FontAwesome; color: #fff; text-align: center; line-height: 66px; font-size: 24px; margin: 20px auto }
.performance-left { background: #fff; }
.content-heading h2 { font-size: 32px; line-height: 44px; position: relative; padding: 0 0 30px; margin: 0 0 38px; }
.content-heading h2:before { position: absolute; left: 0; bottom: 0; width: 100px; height: 2px; content: ''; background: #46455c }
.content-heading h2:after { position: absolute; left: 0; bottom: 3px; width: 50px; height: 5px; content: ''; background: #7e9fff }
.performance-left .performance-list { margin: 0; padding: 0; list-style: none; }
.performance-left .performance-list h3 { font-stretch: 20px; margin: 0 0 0px 0; line-height: normal; color: #46455c; }
.performance-left .performance-list li { position: relative; padding: 0 0 0 80px; }
.performance-left .performance-list li + li { margin-top: 40px; }
.performance-left .performance-list li img { position: absolute; left: 0; top: 0; }
.performance-left .performance-list li:before { position: absolute; content: ''; color: #000; left: 0; bottom: 0; width: 50px; height: 1px; box-shadow: 0 0 50px rgba(0,0,0,.5) }
.teach-list ul { margin: 20px 0; padding: 0; list-style: none; }
.teach-list ul li { padding: 5px 0 }
.teach-list ul span { color: #7e9fff }
.teach-seo-online .play-video { position: relative; padding-left: 100px; min-height: 70px; margin: 20px 0 0; line-height: 70px; color: #3b3b58; font-size: 18px; font-weight: 600 }
.teach-seo-online .play-video .fa { position: absolute; ; height: 70px; width: 70px; border-radius: 100%; border: 2px solid #7e9fff; left: 0; text-align: center; line-height: 70px; font-size: 20px; text-indent: 6px; }
.bg-light-gray { background: #f7f7f7; }
.seo-marketing { padding: 0 }
.seo-marketing .col-pink-gray { background: #46455c }
.seo-marketing .col-pink-dark { background: #3b3b58 }
.seo-marketing .content { padding: 30px; }
.seo-marketing .content h2 { color: #7e9fff; font-size: 26px; }
.seo-marketing .content p { font-size: 18px; color: #fff; line-height: 28px; }
.statistic h2 { color: #7e9fff; font-size: 36px; line-height: 26px; }
.statistic p { font-size: 18px; font-weight: 600; color: #46455c; }
.testimonials p { font-weight: 400; font-size: 18px; font-style: italic; color: #46455c; margin: 20px 0 0 0; line-height: 26px; }
.testimonials .user-details { margin: 30px 0 0; padding: 10px; padding-left: 100px; position: relative; min-height: 72px; position: relative; border-right: 2px solid #46455c; }
.testimonials .user-details:before { position: absolute; right: 1px; width: 5px; height: 24px; content: ''; top: 50%; background: #7e9fff; margin: -12px 0 0 0; }
.testimonials .user-details img { border-radius: 100%; position: absolute; top: 0px; left: 0; }
.testimonials .user-details h3 { color: #7e9fff; font-size: 18px; line-height: normal; margin: 0 }
.testimonials .user-details p { font-size: 14px; color: #94949e; line-height: normal; margin: 0; }
.group-of-Students { background: url(../img/testimonials-bg.png) repeat center top #3b3b58; background-size: 150% auto }
.group-of-Students h2 { color: #7e9fff; font-size: 48px; }
.group-of-Students p { color: #fff; font-weight: 600 }
.group-of-Students .btn { margin: 20px 0 0 0; padding-left: 45px; padding-right: 45px; font-size: 16px; color: #7e9fff; }
.group-of-Students .btn:hover, .group-of-Students .btn:focus { background: #7e9fff; color: #fff; }
.price-boxes { margin-top: 50px; }
.price-boxes .price-box { background: #f7f7f7; padding: 60px 0 50px; }
.price-boxes .price-box .fa { color: #7e9fff; font-size: 32px; line-height: 32px; margin: 0 0 20px; }
.price-boxes .price-box h3 { font-size: 24px; }
.price-boxes .price-box h2 { font-size: 64px; color: #7e9fff; margin-top: 20px; }
.price-boxes .price-box h2 sup { font-size: 40px; }
.price-boxes .price-box a { font-size: 16px; font-weight: 700 }
.price-boxes .price-box:hover, .price-boxes .price-box.active { background: #46455c; }
.price-boxes .price-box:hover h3, .price-boxes .price-box.active h3 { color: #fff; }
.eusanna-chen { background: #3b3b58; }
.eusanna-chen .content-heading h2 { color: #7e9fff; line-height: 30px; }
.eusanna-chen .content-heading h2 span { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 16px; line-height: 18px; font-style: italic; font-weight: 600 }
.eusanna-chen .content-heading h2::before { background: #fff }
.eusanna-chen p { color: #fff; }
.user-statistic { margin-top: 40px; }
.user-statistic p { margin: 0 0 10px; line-height: 14px; }
.user-statistic h3 { color: #7e9fff; font-size: 20px; margin: 0; line-height: 20px; }
.user-statistic .col-xs-4 + .col-xs-4 { position: relative; border-left: 2px solid #fff; padding-left:20px; }
.latest-news { margin-top: 80px; }
.latest-news-box { background: #3b3b58; position: relative; overflow: hidden; }
.latest-news-box img.bg-img { width: 100%; opacity: .4; }
.latest-news-box .box-content { left: 30px; position: absolute; right: 30px; top: 15%; z-index: 2147483647; }
.latest-news-box .user-info { position: absolute; left: 30px; bottom: 30px; padding: 0 0 0 58px; min-height: 40px; line-height: 40px; }
.latest-news-box .user-info img { position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 100%; z-index: 999 }
.latest-news-box .user-info h3 { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 40px; margin: 0; color: #fff; font-weight: 700 }
.latest-news-box p { color: #fff; margin: 0 0 15px; }
.latest-news-box h4 { color: #7e9fff; }
.latest-news-box:hover img.bg-img { opacity: .1 }
.footer-links { background: #3b3b58; }
.footer-links p { color: #fff; }
.footer-links h2 { color: #7e9fff; font-family: 'Open Sans', sans-serif; text-transform: uppercase; font-size: 18px; font-weight: 700 }
.footer-links h2.e-learn-title { text-transform: none; font-size: 24px; }
.footer-links .links { margin: 0; padding: 0; list-style: none; }
.footer-links .links a { color: #fff; font-weight: 700 }
.footer-links .links a:hover { color: #7e9fff; }
.footer-links .links span { color: #7e9fff; }
.footer-links .links li + li { margin-top: 10px; }
.image-instagram { margin-top: 15px; }
.image-instagram img { margin-right: 5px; }
footer { padding: 25px 0; background: #46455c }
footer .social-links a { width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 100%; display: inline-block; margin-right: 10px; color: #94949e; font-size: 22px; }
footer .social-links a:hover { background: #3b3b58; color: #7e9fff; }
footer .copyright { margin: 0; line-height: 50px; color: #94949e; font-weight: 600; font-size: 14px; }
.navbar-brand { padding: 10px 15px; height: auto; }
.pull-right.nav-divider { float: none !important; }
.topbar { display: none; }
.column-content { width: 100%; padding: 30px; }
.column-content { padding: 90px 0px; }

@media(min-width:768px) {
.column-content { max-width: 620px; width: 100%; padding: 90px 0px; }
.intro { padding: 100px 0; }
.intro { height: 1050px; padding: 0; }
.intro .intro-body .brand-heading { font-size: 100px; }
.intro .intro-body .intro-text { font-size: 26px; }
.line-header { width: 142px; height: 1px; margin: 0 auto; position: absolute; bottom: 100px; background: #fff; left: 50%; z-index: 999; margin: 0 0 0 -71px; }
.line-header:before { position: absolute; content: ''; width: 48px; height: 5px; background: #7e9fff; bottom: -5px; left: 50%; margin: 0 0 0 -24px; }
.line-bottom { width: 142px; height: 1px; margin: 0 auto 100px; position: relative; background: #3b3b58; }
.line-bottom:before { position: absolute; content: ''; width: 48px; height: 5px; background: #7e9fff; bottom: -5px; left: 50%; margin: 0 0 0 -24px; }
.row.row-eq-height { display: table; margin: 0; width: 100%; }
.row-eq-height > [class*="col-"] { float: none; display: table-cell; vertical-align: top; }
.column-content { max-width: 620px; width: 100%; padding: 90px 0px; }
.column-content-left { padding-right: 80px }
.column-content-right { padding-left: 80px }
section { position: relative; }
.improve-performance:before { background: url(../img/improve-bg.jpg) no-repeat left -75px; width: 50%; left: 50%; height: 100%; content: ''; position: absolute; }
.teach-seo-online:before { background: url(../img/teach-seo-online.jpg) no-repeat right 0px; width: 50%; background-size: cover; left: 0%; height: 100%; content: ''; position: absolute; }
.eusanna-chen:before { background: url(../img/eusanna-chen.jpg) no-repeat right -75px; width: 50%; left: 50%; height: 100%; content: ''; position: absolute; }

}
.testimonials .col-md-6 + .col-md-6{margin-top:40px;}
.price-boxes .col-md-4 + .col-md-4{margin-top:40px;}
.latest-news .col-md-4 + .col-md-4{margin-top:40px}
.footer-links [class*="col-"] + [class*="col-"]{margin-top:40px;}
@media(min-width:990px) {
.seo-marketing .content { padding: 50px 100px }
.topbar { display: block; }
.statistic .col-sm-3 + .col-sm-3 { border-left: 1px solid #46455c; padding-left: 30px; }
.testimonials .col-md-6 + .col-md-6{margin-top:0px;}
.price-boxes .col-md-4 + .col-md-4{margin-top:0px;}
.latest-news .col-md-4 + .col-md-4{margin-top:0px;}
.footer-links [class*="col-"] + [class*="col-"]{margin-top:0px;}
}
@media(max-width:990px) {
	footer  [class*="col-"]{text-align:center;}
	footer .social-links a{margin:0}
	}
@media(max-width:640px) {
	.navbar-brand > img{max-width:250px;}
	
.column-content{ padding-left: 0px;padding-right: 0px;}
	.intro h1{font-size:30px;}
	.content-heading h2, .group-of-Students h2{font-size:22px; line-height:26px;}
	.seo-marketing .content h2{font-size:20px;}
	.seo-marketing .content p, p.text-large{font-size:14px;}
	footer .copyright{line-height:20px; font-size:12px;}
}

@media(min-width:1200px) {
.navbar-brand { padding: 50px 15px; height: auto; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.latest-news-box .box-content { left: 30px; position: absolute; right: 30px; top: 25%; z-index: 2147483647; }
.navbar-custom .nav-divider { border-left: 1px solid #f7f7f7; }
.pull-right.nav-divider { float: right !important; }
}
.responsive-image { display: none; }

@media(max-width:768px) {
.responsive-image { display: block; margin: 10px 0 30px; }
.statistic{text-align:center;}
.statistic .col-sm-3{padding-bottom:40px; }
.statistic .col-sm-3 + .col-sm-3 { border-top: 1px solid #46455c; padding-top: 40px; }
.statistic .col-sm-3:last-child{padding-bottom:0px;}
}