/* 
 *  Created on : Jun 4, 2016, 9:45:55 PM
 *   Author     : Raj Janorkar
 */
@import url(https://fonts.googleapis.com/css?family=Nunito|Roboto|Montserrat);

/*------------------------------------------------------*\
 * Bootstrap Customisation
\*------------------------------------------------------*/
body {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14.79px;
    line-height: 27.18px;
    letter-spacing: 0.2px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
    background-color: #f9f9f9;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

.navbar {
   /* box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);*/
    margin-bottom: 0px;
    border: 0px;
}


.navbar-brand {
    font: bold 24px/1 'Nunito', sans-serif;
    letter-spacing: 1.2px;
    padding: 10px 15px;
}

.navbar-default .navbar-brand {
    color: #000;
}
.navbar-default {
    font: 500 17px/1 'Roboto', sans-serif;
    letter-spacing: 1.2px;
    background-color: #FBFF03;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: rgba(0,0,0,0);
}
.navbar-default .navbar-toggle {
    border: none;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #000;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #4285F4;
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
    color: #000;
    font-weight: bold;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #4285F4;
}
.dropdown-menu {
    min-width: 200px;
    font: 500 15px/1 'Roboto', sans-serif;
    margin: 0 0 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    color: #4285F4;
    background-color: #e7e7e7;
}
.dropdown-menu > li > a {
    padding: 7px 15px 6px 20px;
}

.dropdown-menu .divider {
    margin: 3px 0px;
}
.sub-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
/* Display drop down meny on mouse hover 
ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
} */
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

/* Add fade animation to dropdown menus */
.open > .dropdown-menu {
    animation-name: fadeAnimation;
    animation-duration: .3s;
    animation-iteration-count: 1;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    -webkit-animation-name: fadeAnimation;
    -webkit-animation-duration: .3s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: fadeAnimation;
    -moz-animation-duration: .3s;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease;
    -moz-animation-fill-mode: forwards;
}
@keyframes fadeAnimation {
    from {
        opacity: 0;
        top: 120%;
    }
    to {
        opacity: 1;
        top: 100%;
    }
}
@-webkit-keyframes fadeAnimation {
    from {
        opacity: 0;
        top: 120%;
    }
    to {
        opacity: 1;
        top: 100%;
    }
}
pre {
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.btn-file {
    position: relative;
    overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

.label {
    letter-spacing: 1.3px;
}

.radio input[type="radio"], 
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
    float: left;
    margin-top: 8px;
}

.no-col-padding > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}

/*------------------------------------------------------*\
 * Mozila Table Hack for Responsive Table
\*------------------------------------------------------*/
@-moz-document url-prefix() {
    fieldset { display: table-cell; }
}


/*------------------------------------------------------*\
 * All Other
\*------------------------------------------------------*/
.bottom-buffer-0{margin-bottom:0px;}
.bottom-buffer-5{margin-bottom:5px;}
.bottom-buffer-10{margin-bottom:10px;}
.bottom-buffer-20{margin-bottom:20px;}
.top-buffer-5{margin-top:5px;}
.top-buffer-10{margin-top:10px;}
.top-buffer-20{margin-top:20px;}
.pull-right {text-align: right;}
hr {
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    border-top : 1px solid rgba(0, 0, 0, 0.07);
    margin: 2px 0;
    width: 100%;
}
.color-green{color: #5cb85c;}
.color-red{color: #ca3523;}
.color-blue{color: #4285F4;}
.color-gold{color: gold;}
.color-gray{color: #e6e6e6;}
.color-pink{color: #F660AB}
.thumb {
    margin-bottom: 10px;
}
.table-user-information > tbody > tr {
    border-top: 1px solid rgb(221, 221, 221);
}
.table-user-information > tbody > tr:first-child {
    border-top: 0;
}
.table-user-information > tbody > tr > td {
    border-top: 0;
}
.blockquote-primary{border-color:#357EBD;background-color:#f9f9f9;}
.blockquote-success{border-color:#4CAE4C;background-color:#f9f9f9;}
.blockquote-info{border-color:#cceaff;background-color:#f9fbfd;}
.blockquote-warning{border-color:#EEA236;background-color:#f9f9f9;}
.blockquote-danger{border-color:#D43F3A;background-color:#f9f9f9;}
.blockquote-no-border-color{border-color:#f9f9f9;background-color:#f9f9f9;}
.break-all {
    word-break: break-all;
}
.button-wrapper .btn {
    margin-bottom:5px;
}
a:focus, .btn:focus {
    outline:0;
    box-shadow:none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}
.search-form {
    margin: 20px 0;
    padding:5px 15px;
    background-color: #fff;
    border-radius: 4px;
}
.profile-details {
    font-size: 16.79px;
}
.no-rounded-border {
  -webkit-border-radius: 0 !important;
     -moz-border-radius: 0 !important;
          border-radius: 0 !important;
}

.border-shadow {
    border: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
}

.dont-break-out {
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/*------------------------------------------------------*\
 * Facebook Custom CSS
\*------------------------------------------------------*/
.fbimg {
    background-color: #F6F6F6;
    border: 1px solid #E6E6E6;
    padding: 2px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
.fb-comments, .fb-comments * {
    width: 100% !important;
}
.fb-like-box, .fb-like-box * {
    width: 100% !important;
}

/*------------------------------------------------------*\
 * Login page CSS
\*------------------------------------------------------*/
.hr {
    border-bottom: 1px solid #C0C3CA;
    box-shadow: 0 1px 0 #E9EAED;
    -webkit-box-shadow: 0 1px 0 #E9EAED;
    -moz-box-shadow: 0 1px 0 #E9EAED;
    height: 15px;
    margin: 21px 15% 30px;
    position: relative;
    text-align: center;
    width: 70%;
}
.hr .inner {
    background: none repeat scroll 0 0 #F4F4F4;
    border-radius: 100px;
    display: inline-block;
    font-size: 16px;
    font-style: italic;
    line-height: 0;
    padding: 9px 10px;
    width: auto;
}
loginFooter {
    color:#666;
    font-size:13px;
    text-align:center;
}

/*------------------------------------------------------*\
 * Social Buttons for Bootstrap
 * https://github.com/lipis/bootstrap-social
 \*------------------------------------------------------*/
.btn-social{font-family: 'Roboto', sans-serif; border-radius: 0px; position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.btn-social :first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social.btn-lg{padding-left:61px}.btn-social.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social.btn-sm{padding-left:38px}.btn-social.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social.btn-xs{padding-left:30px}.btn-social.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon{position:relative;padding-left:44px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:34px;width:34px;padding:0}.btn-social-icon :first-child{position:absolute;left:0;top:0;bottom:0;width:32px;line-height:34px;font-size:1.6em;text-align:center;border-right:1px solid rgba(0,0,0,0.2)}
.btn-social-icon.btn-lg{padding-left:61px}.btn-social-icon.btn-lg :first-child{line-height:45px;width:45px;font-size:1.8em}
.btn-social-icon.btn-sm{padding-left:38px}.btn-social-icon.btn-sm :first-child{line-height:28px;width:28px;font-size:1.4em}
.btn-social-icon.btn-xs{padding-left:30px}.btn-social-icon.btn-xs :first-child{line-height:20px;width:20px;font-size:1.2em}
.btn-social-icon :first-child{border:none;text-align:center;width:100% !important}
.btn-social-icon.btn-lg{height:45px;width:45px;padding-left:0;padding-right:0}
.btn-social-icon.btn-sm{height:30px;width:30px;padding-left:0;padding-right:0}
.btn-social-icon.btn-xs{height:22px;width:22px;padding-left:0;padding-right:0}
.btn-facebook{color:#fff;background-color:#3b5998;border-color:rgba(0,0,0,0.2)}.btn-facebook:hover,.btn-facebook:focus,.btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook{color:#fff;background-color:#30487b;border-color:rgba(0,0,0,0.2)}
.btn-facebook:active,.btn-facebook.active,.open .dropdown-toggle.btn-facebook{background-image:none}
.btn-facebook.disabled,.btn-facebook[disabled],fieldset[disabled] .btn-facebook,.btn-facebook.disabled:hover,.btn-facebook[disabled]:hover,fieldset[disabled] .btn-facebook:hover,.btn-facebook.disabled:focus,.btn-facebook[disabled]:focus,fieldset[disabled] .btn-facebook:focus,.btn-facebook.disabled:active,.btn-facebook[disabled]:active,fieldset[disabled] .btn-facebook:active,.btn-facebook.disabled.active,.btn-facebook[disabled].active,fieldset[disabled] .btn-facebook.active{background-color:#3b5998;border-color:rgba(0,0,0,0.2)}
.btn-facebook .badge{color:#3b5998;background-color:#fff}
.btn-google-plus{color:#fff;background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}.btn-google-plus:hover,.btn-google-plus:focus,.btn-google-plus:active,.btn-google-plus.active,.open .dropdown-toggle.btn-google-plus{color:#fff;background-color:#ca3523;border-color:rgba(0,0,0,0.2)}
.btn-google-plus:active,.btn-google-plus.active,.open .dropdown-toggle.btn-google-plus{background-image:none}
.btn-google-plus.disabled,.btn-google-plus[disabled],fieldset[disabled] .btn-google-plus,.btn-google-plus.disabled:hover,.btn-google-plus[disabled]:hover,fieldset[disabled] .btn-google-plus:hover,.btn-google-plus.disabled:focus,.btn-google-plus[disabled]:focus,fieldset[disabled] .btn-google-plus:focus,.btn-google-plus.disabled:active,.btn-google-plus[disabled]:active,fieldset[disabled] .btn-google-plus:active,.btn-google-plus.disabled.active,.btn-google-plus[disabled].active,fieldset[disabled] .btn-google-plus.active{background-color:#dd4b39;border-color:rgba(0,0,0,0.2)}
.btn-google-plus .badge{color:#dd4b39;background-color:#fff}
.btn-twitter{color:#fff;background-color:#55acee;border-color:rgba(0,0,0,0.2)}.btn-twitter:hover,.btn-twitter:focus,.btn-twitter:active,.btn-twitter.active,.open .dropdown-toggle.btn-twitter{color:#fff;background-color:#309aea;border-color:rgba(0,0,0,0.2)}
.btn-twitter:active,.btn-twitter.active,.open .dropdown-toggle.btn-twitter{background-image:none}
.btn-twitter.disabled,.btn-twitter[disabled],fieldset[disabled] .btn-twitter,.btn-twitter.disabled:hover,.btn-twitter[disabled]:hover,fieldset[disabled] .btn-twitter:hover,.btn-twitter.disabled:focus,.btn-twitter[disabled]:focus,fieldset[disabled] .btn-twitter:focus,.btn-twitter.disabled:active,.btn-twitter[disabled]:active,fieldset[disabled] .btn-twitter:active,.btn-twitter.disabled.active,.btn-twitter[disabled].active,fieldset[disabled] .btn-twitter.active{background-color:#55acee;border-color:rgba(0,0,0,0.2)}
.btn-twitter .badge{color:#55acee;background-color:#fff}

/*------------------------------------------------------*\
 * Profile images hover button
\*------------------------------------------------------*/
.profile-img-container {
    position: relative;
    display: inline-block; 
    overflow: hidden; 
}
.profile-img-container:hover img {
    opacity: 0.7;
}
.profile-img-container:hover div {
    opacity: 1;
    top: 0; 
    z-index: 500;
}
.profile-img-container:hover div span {
    top: 50%;
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background-color: #e7e7e7;
}
.profile-img-container div {
    display: block;
    position: absolute;
    top: -100%;
    opacity: 0;
    left: 0;
    bottom: 0;
    right: 0;
    text-align: center;
    color: inherit;
}

/*------------------------------------------------------*\
 * Navbar tabs
\*------------------------------------------------------*/
.nav-tabs { 
    border-bottom: 2px solid #e7e7e7;
    font: normal 15px/1 'Roboto', sans-serif;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs > li > a { border: none; color: #19c109; }
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none; color: #4285F4 !important; background: transparent; }
.nav-tabs > li > a::after { content: ""; background: #4285F4; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs > li.active > a::after, .nav-tabs > li:hover > a::after { transform: scale(1); }
.tab-pane {padding: 15px 0;}
.tab-content {
    padding:0px 20px 10px 20px;
}
.card {
    background: #FFF none repeat scroll 0% 0%; 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); 
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3); 
    margin-bottom: 30px; 
    border: 1px solid #e7e7e7;
}

/* SEARCH FORM - HOME PAGE
---------------------------------------------------- */

#header{
    width: 100%;
    min-height: 450px;
    height: auto;
    padding-top: 70px;
    padding-bottom: 60px;
}

.quick-search{
    padding: 20px 20px;
    background: rgba(255,255,255,.8);
    border-radius: 4px;
}


/* FOOTER
---------------------------------------------------- */

#footer {
    font-family: 'Nunito', sans-serif;
    -webkit-font-smoothing: antialiased;
    margin-top: 40px;
    padding: 10px 0 20px 0;
    background-color: #535f67;
    border-top: 1px solid #e7e7e7;
}

#footer .no-focus :focus {
    outline: 0!important
}

#footer a {
    transition: color .12s ease-out;
    font-weight: bold;
    color: #fff;
}

#footer a.link-effect {
    position: relative;
}

#footer a.link-effect:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #fff;
    visibility: hidden;
    transform: scaleX(0);
    transition: transform .12s ease-out
}

#footer a:focus, #footer a:hover {
    color: #fff;
    text-decoration: none;
}

#footer a:focus.link-effect:before, #footer a:hover.link-effect:before {
    visibility: visible;
    transform: scaleX(1)
}

#footer-bottom {
    /* border-top: 1px solid #e5e5e5; */
    color: #fff;
    font-size: 15px;
    padding: 10px 0 2px;
    text-align: center;
    width: 100%;
    /* margin-top: 20px; */
}


/* FEATURE LIST
---------------------------------------------------- */
.feature-box{
    padding: 20px 20px;
    background: #fff;
    border-radius: 4px;
}

.features-list {
    font-family: 'Nunito', sans-serif;
    padding: 5% 0;
    -webkit-font-smoothing: antialiased;
}
.features-list h1 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #382f2d;
    font-size: 20px;
    font-weight: bold;
}
.features-list p {
    margin-bottom: 20px;
    color: #24374b;
    font-size: 14px;
}
.feature-content {
    display: inline-block;
    margin-left: 0;
    width: 65%;
}
.feature-icon {
    display: inline-block;
    margin-right: 25px;
    width: 90px;
    height: 90px;
    border: solid 2px #4e9ba3;
    border-radius: 50%;
    vertical-align: top;
    text-align: center;
    font-size: 25px;
    line-height: 90px;
}
.feature-icon i {
    color: #4e9ba3
}

/* SCHOOL PROFILE - INSTRUCTORS LISTING
-------------------------------------------------- */
.instructors {
    margin: 10px 0;
    padding:10px 0px 10px 0px;
    font-family: 'Nunito', sans-serif;
}
.instructors h1 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #24374b;
    font-size: 18px;
}

.instructors p {
    margin: 0;
}

.instructors .rating {
    font-size: 15px;
}

/* INSTRUCTORS LISTING PAGE
-------------------------------------------------- */
.media {
  /*  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05);*/
    margin: 20px 0;
    padding: 20px 0px 20px 5px;
    font-family: 'Nunito', sans-serif;
    border: 1px solid rgba(0, 0, 0, 0.07);

    /*padding: 20px 20px;*/
    background: #fff;
    border-radius: 4px;

}
/*.media:hover {
    background-color: #f9fbfd;
}*/
.media h1 {
    margin: 0 0 10px 0;
    padding: 0;
    color: #24374b;
    font-size: 20px;
}
.media .media-body {
    padding: 2px 0 0 20px;
    display: inline-block;
    margin-left: 0;
    width: 80%;
}
.media .media-body p {
    margin: 0;
}
.media .profile-icon {
    display: inline-block;
    margin-right: 25px;
    vertical-align: top;
    text-align: center;
    font-size: 25px;
   /* line-height: 100px; */
    height: 100px;
    width: 100px;
}

.media .profile-icon .rating {
    font-size: 15px;
}

.media .profile-icon .dp {
    border:2px solid #4e9ba3;
    transition: all 0.2s ease-in-out;
}
.media .profile-icon .dp:hover {
    border:2px solid #4285F4; 
}

.media-body .main-block {
    float: left;
}

.media-body .additional-block {
    float: right;
    width: 137px;
    text-align: center;
    position: relative;
    line-height: 17px;
    content: "";    
}

.media-body .additional-block h3 {
    margin-top: 10px;
}

.media .media-body tr, .media .media-body th, .media .media-body td { 
     border-top: none !important; 
 }

/* CUSTOM BUTTONS
---------------------------------------------------- */
.btn-box {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    display: inline-block;
    color: white;
    border: 2px solid transparent;
    border-radius: 2px;
    background: transparent;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.btn-box:hover,
.btn-box:focus {
    color: white;
}

.btn-box.btn-no-fill {
    background-color: transparent;
    border-color: transparent;
    color: #0275d8;
}

.btn-box.btn-white {
    color: #ff9f00;
    border-color: #fff;
    background: #fff;
    font-size: 20px;
    padding-left: 40px;
    padding-right: 40px;
}

.btn-box.btn-white:hover {
    color: #fff;
    background: #FFB52B;
    border-color: #FFB52B;
}

.btn-box.btn-blue {
    background: #00a8ff;
}

.btn-box.btn-blue:hover {
    background: #31b9ff;
}
.btn-box.btn-green {
    background: #5cb85c;
}

.btn-box.btn-green:hover {
    background: #449d44;
}
.btn-box.btn-red {
    background: #e13c48;
}

.btn-box.btn-red:hover {
    background: #d9534f;
}
.btn-box.btn-blue-fill {
    color: #00a8ff;
    border-color: #00a8ff;
    background: transparent;
}

.btn-box.btn-blue-fill:hover {
    color: white;
    background: #00a8ff;
}

.btn-box.btn-green-fill {
    color: #6fbf39;
    border-color: #6fbf39;
    background: transparent;
}

.btn-box.btn-green-fill:hover {
    color: white;
    background: #6fbf39;
}

.btn-box.btn-purple-fill {
    color: #8883bc;
    border-color: #8883bc;
    background: transparent;
}

.btn-box.btn-purple-fill:hover {
    color: white;
    background: #8883bc;
}
.btn-box.btn-red-fill {
    color: #d43f3a;
    border-color: #d43f3a;
    background: transparent;
}
.btn-box.btn-red-fill:hover {
    color: white;
    background: #d43f3a;
}
.btn-box.btn-gray-fill {
    color: #00a8ff;
    border-color: #e6e6e6;
    background: transparent;
}
.btn-box.btn-gray-fill:hover {
    color: #00a8ff;
    background: #e6e6e6;
}
.btn-box.btn-white-fill {
    color: #fff;
    border-color: #fff;
    background: transparent;
}

.btn-box.btn-white-fill:hover {
    color: #00a8ff;
    background: #fff;
}


/* LESSONS PACKAGES
-------------------------------------------------- */
.service {
    height: 175px;
    margin: 12px 0;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.07);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.service .icon-holder {
    position: relative;
    top: 10px;
    font-size: 22px;
    display: inline-block;
    margin-bottom: 5px;
    padding: 5px 10px 5px 10px;
    background: white;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.service .heading {
    position: relative;
    top: 10px;
    -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.service .icon-holder > img.icon {
    width: 40px;
}

.service:hover {
    border-color: #cceaff;
}

.service:hover .icon-holder {
    top: -20px;
}

.service:hover .heading {
    top: -20px;
}

/* RATING 
------------------------------------------------- */
.animated {
    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    transition: height 0.2s;
}

.stars {
    margin: 10px 0;
    font-size: 24px;
}

.rating-pointer {
    cursor: pointer;
}

/* Messages CSS
-------------------------------------------------- */
 .bg-white {
     background-color: #fff;
 }

 .friend-list {
     list-style: none;
     margin-left: 0px;
     margin-top: 10px;
 }

 .bg-white ol, .bg-white ul{
     padding: 0;
 }

 .friend-list li {
     border-bottom: 1px solid #eee;
 }

 .friend-list li a img {
     float: left;
     width: 45px;
     height: 45px;
     margin-right: 0px;
 }

 .friend-list li a {
     position: relative;
     display: block;
     padding: 10px;
     transition: all .2s ease;
     -webkit-transition: all .2s ease;
     -moz-transition: all .2s ease;
     -ms-transition: all .2s ease;
     -o-transition: all .2s ease;
 }

 .friend-list li.active a {
     background-color: #f1f5fc;
 }

 .friend-list li a .friend-name, 
 .friend-list li a .friend-name:hover {
     color: #777;
 }

 .friend-list strong {
     padding-left: 15px;
 }

 .friend-list li a .last-message {
     width: 65%;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
     padding-left: 15px;
 }

 .friend-list li a .time {
     position: absolute;
     top: 10px;
     right: 8px;
 }

 small, .small {
     font-size: 85%;
 }

 .friend-list li a .chat-alert {
     position: absolute;
     right: 8px;
     top: 35px;
     font-size: 10px;
     padding: 3px 5px;
     border-radius: 1em;
 }

 .chat-message {
     padding: 10px 15px 10px 10px;
     background-color: #f9fbfd;
     border: 1px solid rgba(0, 0, 0, 0.07);
 }

 .chat {
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .chat li img {
     width: 45px;
     height: 45px;
     border-radius: 50em;
     -moz-border-radius: 50em;
     -webkit-border-radius: 50em;
 }

 img {
     max-width: 100%;
 }

 .chat-body {
     padding-bottom: 20px;
     width: 85%;
 }

 .chat li.left .chat-body {
     margin-left: 60px;
     background-color: #fff;
 }

 .chat li .chat-body {
     position: relative;
     font-size: 14px;
     padding: 10px;
     border: 1px solid #f1f5fc;
     box-shadow: 0 1px 1px rgba(0,0,0,.05);
     -moz-box-shadow: 0 1px 1px rgba(0,0,0,.05);
     -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05);
 }

 .chat li .chat-body .header {
     padding-bottom: 5px;
     border-bottom: 1px solid #f1f5fc;
     padding-right: 5px;
 }

 .chat li .chat-body p {
     margin: 0;
 }

 .chat li.left .chat-body:before {
     position: absolute;
     top: 10px;
     left: -8px;
     display: inline-block;
     background: #fff;
     width: 16px;
     height: 16px;
     border-top: 1px solid #f1f5fc;
     border-left: 1px solid #f1f5fc;
     content: '';
     transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -o-transform: rotate(-45deg);
 }

 .chat li.right .chat-body:before {
     position: absolute;
     top: 10px;
     right: -8px;
     display: inline-block;
     background: #fff;
     width: 16px;
     height: 16px;
     border-top: 1px solid #f1f5fc;
     border-right: 1px solid #f1f5fc;
     content: '';
     transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
 }

 .chat li {
     margin: 15px 0;
 }

 .chat li.right .chat-body {
     margin-right: 20px;
     background-color: #fff;
     float: right;
 }

 .chat-box {
     position: fixed;
     bottom: 0;
     left: 444px;
     right: 0;
     padding: 15px;
     border-top: 1px solid #eee;
     transition: all .5s ease;
     -webkit-transition: all .5s ease;
     -moz-transition: all .5s ease;
     -ms-transition: all .5s ease;
     -o-transition: all .5s ease;
 }

 .primary-font {
     color: #3c8dbc;
 }

 .bg-white a:hover, .bg-white a:active, .bg-white a:focus {
     text-decoration: none;
     outline: 0;
 }

/* MEDIA QUERIES
-------------------------------------------------- */

@media screen and (min-width: 768px) {
    .navbar {
        min-height: 40px;
    }
    .navbar-default .navbar-nav > li > a {
        line-height: 40px;
    }

    .dropdown-menu:before {
        position: absolute;
        top: -7px;
        right: 9px;
        display: inline-block;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-left: 7px solid transparent;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        content: '';
    }
    .dropdown-menu:after {
        position: absolute;
        top: -6px;
        right: 10px;
        display: inline-block;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        border-left: 6px solid transparent;
        content: '';
    }
}

@media screen and (max-width: 768px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #000;
        font-weight: bold;
    }

    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #4285F4;
    }

    .navbar-brand { padding: 10px 10px;}

    #header{
        width: 100%;
        min-height: 350px;
        padding-top: 40px;
        padding-bottom: 40px;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -ms-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
        background-attachment: fixed;
        background-position: center 0;
        background-repeat: no-repeat;
    }
}

@media screen and (max-width:1200px){
    footer li{margin-right:10%;}
    .feature-content{width:55%;}
    .media .media-body{width:80%;}
}
@media screen and (max-width:991px){
    .feature-1,.feature-2{margin-bottom:50px;}
    .feature-content{width:80%;}
    .features-slider{height:100%}
    .media .media-body{width:70%;}
    .media .profile-icon{margin-right:5px;}
    .header-menu {width: 100%}
}
@media screen and (max-width:680px){
    .feature-content{width:60%;}
    .media .media-body{width:70%;}
    .chat li.left .chat-body {margin-left: 0px; width: 100%;}
    .chat .chat-img {display: none;}
}
@media screen and (max-width:640px){
    footer li{display:block;text-align:left;padding:20px 0;border-bottom:dashed 1px #c7cacc;margin-right:0!important;float:none;}
    .chat li.left .chat-body {margin-left: 0px; width: 100%;}
    .chat .chat-img {display: none;}
}
@media screen and (max-width:465px){
    .feature-content{width:100%;text-align:center;margin-top:20px;}
    .feature-icon{display:block;margin:0 auto;}
    .features-slider {padding: 11% 50px 10% 50px;}
    .media .media-body{width:100%;margin-top:20px; padding: 0;}
    .media .profile-icon{display:block;text-align:center;margin:0 auto;}
    .navbar-toggle {padding: 9px 10px 9px 0px;margin-right: 0px;}
    .service .icon-holder {font-size: 16px;}
    .service .heading {font-size: 11px;}
    .chat li.left .chat-body {margin-left: 0px; width: 100%;}
    .chat .chat-img {display: none;}
}