/* .col-lg :: Large devices */
@media (min-width: 1200px) {
    body:after {content: "lg"; }
}

/* .col-md :: Medium devices  */
@media (max-width: 1199px) {
    body:after {content: "md"; }
    .stripe h2 { font-size: 36px; }
    .nav-tabs .tab-head li a { padding: 12px 24px; }
    #content h3 { font-size: 22px; line-height: 26px; }
}

/* .col-sm :: Small devices Tablets  */
@media (max-width: 991px) {
  body:after {content: "sm"; }
    #main-navigation > ul > li { margin-left: 26px; }
    #main-navigation a { font-size: 13px; }
    #dashboard .block { margin-bottom: 30px; }
    .stripe h2 { font-size: 28px; }
    .pricing .plan { margin-bottom: 50px; }   
    .highlight-block { margin-bottom: 40px; }
    .logo h3 { font-size: 20px; }
    #main-navigation > ul > li { margin-left: 18px; }
    }

/* .col-xs :: Extra small devices Phone  */
@media (max-width: 767px) {
	body:after {content: "xs"; }
    h1 { font-size: 34px; }
    #main-navigation { position: fixed; right: -100%; width: 300px; height: 100%; margin: 0; top: 0; z-index: 999; background: #000; transition: 500ms; -webkit-transition: 500ms; -moz-transition: 500ms; text-align: center; height: 100%; overflow-y: scroll; } 
    #main-navigation li { display: block; padding: 0; margin-bottom: 30px; margin-left: 0 !important; }
    #main-navigation li a { font-size: 18px; position: relative; }
    #main-navigation > ul { height: 100%; margin: 30% 0 0; }
    #main-navigation .close-btn { position: absolute; right: 20px; top: 20px; font-size: 35px; color: #fff; cursor: pointer; }
    #main-navigation .dropdown { position: static; width: 100%; text-align: center; background: none; }
    #main-navigation .has-dropdown > a::after { bottom: -2px; right: -25px; }
    #main-navigation .dropdown a { font-size: 16px; }
    #main-navigation .dropdown { padding: 20px 0 0; }
    #main-navigation .dropdown li { margin-bottom: 0; margin-top: 20px; position: static; }
    #main-navigation .dropdown:before { display: none; }
    .stripe h2 { margin-bottom: 15px; }
    .stripe .button { float: none !important; }
    #footer ul { margin-top: 10px; }
    #footer ul, #footer { text-align: center; }
    .stylish-form .button { margin: 0 0 50px; }
    .form-text p { font-size: 18px; }
    #banner.home-banner { min-height: 580px; }
    #banner h2 { font-size: 25px; line-height: 35px; margin-bottom: 20px; }
    #banner p { font-size: 15px; line-height: 23px; letter-spacing: 0px; margin: 15px 0; }
    #banner .button { margin-top: 20px; }
    .button { border-width: 2px; padding: 12px 20px; font-size: 14px; }
    .stages .stage .icon { position: static; margin-right: 10px; }
    .stages .stages:before { display: none; }
    .stages .stage { width: 100%; padding: 0; float: none !important; text-align: left !important; }
    .stages .text-block { margin-bottom: 20px; padding-bottom: 0; }
    .stages:before { display: none; }
    #sidebar .side-navigation ul { float: none !important; margin-bottom: 30px; }
    .about-us { padding-top: 0; }
    .thankyou h4 { margin-top: 0; margin-bottom: 60px; }
    .five-columns-list.list li { width: 33%; }
    #header.scrolled #main-navigation { margin-top: 0; }
    #header.scrolled { padding: 15px; 0; }
}

/* ==========================================================================
   Mobile Breakpoints
   ========================================================================== */
@media (max-width: 568px) {
h1 { font-size: 28px; text-transform: capitalize; }
#dashboard .block { width: 100%; }
.nav-tabs .tab-head li a { padding: 14px 26px; }
.nav-tabs .tab-head li { padding: 0; }
.stages .text-block h4 { text-transform: capitalize; font-size: 20px; }
.stages .stage .icon { width: 36px; height: 36px; padding-top: 10px; font-size: 15px; }
#content h2 { font-size: 25px; }
.logo h3 { padding-bottom: 15px; font-size: 18px; }
   
}

@media (max-width: 480px) {
.stripe h2 { font-size: 23px; }
.browse-field::after { width: 110px; }
.nav-tabs .tab-head li { display: block; margin-bottom: 20px; text-align: center;}
.nav-tabs .tab-head { margin-bottom: 20px; }
.five-columns-list.list li { width: 50%; }
}


@media (max-width: 360px) {
   
}