/*
Theme Name: Spring Dale Collage
Theme URI: http://webpanelsolutions.com/
Author: Web Panel Solutions
Author URI: http://webpanelsolutions.com/
Description: Web Panel Solutions is an integrated agency for the connected age. We coin web and mobile strategies using technology and believe in having a lot of fun while doing so. We develop your digital strategy so that you can build lasting relationships with your customers and brand. Our creative digital agency works within all disciplines of web design, mobile app & web development, brand design & UI design.
Version: 1.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentyseventeen
Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

.login-menu{
    right: 0;
    left:  initial;
}
#custom-nav{
    background: #E0D3C0 !important;
}

a.nav-link{
    font-weight: 600;
}
body {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
}
#banner-grid .banner-content strong {
    font-size: 30px !important;
    }

img {
    max-width: 100%;
}

a,
img,
.nav-link:before,
.sub-menu {
    transition: all 0.3s ease-in-out 0s;
}

a:hover {
    text-decoration: none;
}

a:focus {
    outline: none;
}

.relative {
    position: relative;
}

.large-para p {
    font-size: 18px;
    line-height: 1.7;
}

.absolute {
    /*position: absolute;*/
    left: 0;
    top: 0;
    width: 100%;
}
a.nav-link {
    color: #6b6a68 !important;
}
ul.sub-menu>li>a {
    color: antiquewhite !important;
}


.magazine-content {
    position: absolute;
    top: 50%;
    margin: auto;
    width: 100%;
    font-size: 31px;
    font-family: cursive;
    color: #ffff;
}

.text-purple {
    color: #7c4ca4;
}

.bg-green {
    background: #4f6f5f;
}

.bg-blue {
    background: #31577e;
}

.bg-purple {
    background: #5f3f75;
}


.fw-300 {
    font-weight: 300;
}

.fw-400 {
    font-weight: 400;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

.line-under:before {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    height: 1px;
    background: #000;
    content: '';
}

.list-item {
    padding-left: 17px;
}

.height-auto {
    height: auto;
}

.branch-small-tab .features strong {
    padding-bottom: 0;
}

.branch-small-tab .features .line-under::before {
    display: none;
}

.list-item li {
    padding: 5px 0;
    font-size: 18px;
}

#banner-grid img {
    position: relative;
    z-index: 1001;
}

.banner-section {
    position: relative;
}

.urgent-noti {
    border-radius: 0;
    padding: 20px 30px;
    margin-bottom: 0;
}

#banner-grid .banner-content {
    position: absolute;
    z-index: 1002;
    width: 1000px;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    color: #fff;
}

#banner-grid .banner-content.branches-banner {
    width: 70em;
    bottom: 30%;
}

#banner-grid .banner-content.branches-banner p {
    font-size: 24px;
}

#banner-grid .banner-content strong {
    font-size: 3em;
    display: block;
    line-height: 1.2;
    text-shadow: 2px 3px 5px #000;
}

#banner-grid .banner-content span {
    font-size: 1.7em;
    display: inline-block;
    border-top: 2px solid #e4164a;
    text-shadow: 2px 3px 5px #000;
    margin-top: 20px;
}

#nav-grid {
    z-index: 1003;
}

#nav-grid .navbar-nav .nav-link {
    text-transform: uppercase;
    color: #fff;
    /*padding-right: 0.8rem;*/
    /*padding-left: 0.8rem;*/
    position: relative;
    white-space: nowrap;
}

#nav-grid .navbar-nav .nav-link:before {
    content: '';
    height: 2px;
    width: 0;
    background: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
}

#nav-grid .navbar-nav .nav-item:hover .nav-link:before {
    width: 100%;
}

#nav-grid .navbar-nav .nav-item {
    position: relative;
}

#nav-grid .navbar-nav .nav-link svg {
    display: none;
}

#nav-grid .navbar-nav .sub-menu {
    position: absolute;
    background: #6e0000;
    list-style: none;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    border-radius: 3px;
    overflow: hidden;
    margin-top: 20px;
    box-shadow: 0 2px 5px #000;
}
a.dropdown-item {
    color: #ffff;
    padding: 9px 14px;
}

#nav-grid .navbar-nav #menu-item-178 .sub-menu {
    right: 0;
}

#nav-grid .navbar-nav .nav-item:hover .sub-menu {
    visibility: visible;
    opacity: 1;
    margin-top: 2px;
}

#nav-grid .navbar-nav .sub-menu li a {
    color: #fff;
    padding: 5px 10px;
    text-transform: capitalize;
    border-bottom: 1px solid #6e0000;
    font-size: 14px;
    white-space: normal;
}

#nav-grid .navbar-nav .sub-menu li a:hover {
    background: #6e0000;
}

#nav-grid .navbar-nav .sub-menu .nav-link:before {
    display: none;
}

.login-form .form-control {
    background: #f7f7f7 none repeat scroll 0 0;
    border: 1px solid #d4d4d4;
    border-radius: 4px;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
}

.forgot a {
    color: #777777;
    font-size: 14px;
    text-decoration: underline;
}

.login-form .btn.btn-primary {
    background: #e4164a none repeat scroll 0 0;
    border-color: #e4164a;
    color: #ffffff;
    font-size: 14px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding: 0;
}

.login-form .btn.btn-primary:hover {
    background: #cf1141 none repeat scroll 0 0;
    border-color: #cf1141;
}

.top-pan {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #000;
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    z-index: 2001;
    color: #fff;
    line-height: 60px;
    display: none;
}

.top-pan:before {
    content: '';
    border: solid transparent;
    border-color: rgba(0, 0, 0, 0);
    border-width: 6px;
    border-bottom-color: #fff;
    width: 0;
    height: 0;
    position: absolute;
    left: 18px;
    top: 6px;
}

.top-pan:hover {
    background: #5f3f75;
    color: #fff;
}

#branch-grid a {
    overflow: hidden;
}

#branch-grid img {
    position: relative;
    z-index: 1001;
}

#branch-grid a:hover img {
    opacity: 0.7;
    transform: scale(1.3);
}

#branch-grid span {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    display: inline-block;
    background: #000;
    color: #fff;
    font-size: 18px;
    z-index: 1002;
    font-weight: 700;
    padding: 5px 15px;
}

.our-mission p {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.7;
}

.features {
    border: 1px solid #d0d0d0;
    border-radius: 40px;
    text-align: center;
    padding: 25px 15px;
    display: block;
}

.features strong {
    display: inline-block;
    font-weight: 700;
    color: #696969;
    font-size: 22px;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.features .line-under:before {
    height: 2px;
    background: #7c4ca4;
}

.features span {
    display: block;
    color: #686868;
}

.features:hover {
    background: #6e0000;
}

.features:hover strong,
.features:hover span {
    color: #fff;
}

#aboutus-grid {
    background-image: url(assets/images/about-banner.jpg);
    /* background:#E0D3C0; */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5em 0;
}

#aboutus-grid p {
    /* color: #fff; */
    line-height: 1.7;
    font-size: 18px;
    margin-bottom: 2em;
}

#aboutus-grid p a {
    font-weight: bold;
    color: #6e0000;
}

.custom-background{
    background: #6e0000;
}

#aboutus-grid p a:hover {
    text-decoration: underline;
}
.custom-about strong{
    color: #000 !important;
}

.custom-about{
    background: #E0D3C0;
    background-image: none !important;
}

#aboutus-grid strong {
    color: #fff;
    font-size: 72px;
    font-weight: 400;
    position: absolute;
    left: -4em;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    text-transform: uppercase;
}

#aboutus-grid.inner-page strong {
    position: relative;
    left: 0;
    top: 0;
    transform: translateY(0%) rotate(0deg);
    margin-top: 2em;
    display: inline-block;
}

#aboutus-grid.infra strong {
    margin-top: 0;
    text-transform: none;
    font-size: 52px;
}

#aboutus-grid.infra ul {
    padding-left: 18px;
}

#aboutus-grid.infra ul li {
    font-size: 15px;
    color: #fff;
    padding: 5px 0;
}

.extra-feature {
    color: #fff;
    border-radius: 40px;
    padding: 20px 40px 20px;
    position: relative;
    border-right: 2px solid #fff;
    height: 100%;
}

.extra-feature.home-features {
    padding-bottom: 6em;
}

.extra-feature p {
    font-size: 14px;
}

.extra-feature p a {
    font-style: italic;
    color: #fff;
}
.extra-feature p a.download-link {
    font-size: 17px;
    border: 2px solid #fff;
    display: block;
    padding: 7px;
    text-align: center;
    border-radius: 21px;
}
.extra-feature p a.download-link:hover {
    background: #fff;
    color: #4f6f5f;
}

.extra-feature a.features-link {
    border-radius: 30px;
    color: #fff;
    padding: 10px 30px;
    border: 2px solid #fff;
    display: inline-block;
    text-align: center;
    position: absolute;
    bottom: 30px;
    left: 40px;
    text-transform: uppercase;
}

.extra-feature a.features-link:hover {
    text-decoration: none;
    background: #fff;
    color: #000;
}

.extra-feature ul {
    padding-left: 16px;
}

.extra-feature li {
    font-size: 13px;
    padding: 5px 0;
}

.company-info p {
    overflow: hidden;
}

.company-info p iframe {
    float: left;
    margin-right: 25px;
}

#footer-grid {
    background: url(assets/images/footer-bg.jpg) repeat;
    padding: 5em 0;
}

#footer-grid .foot,
#footer-grid .foot p a,
.copy {
    color: #fff;
}

#footer-grid .foot p a:hover {
    color: #7c4ca4;
}

#footer-grid .foot img {
    float: left;
    margin-right: 20px;
}

#footer-grid .foot p {
    font-size: 14px;
    overflow: hidden;
    line-height: 1.7;
    margin-bottom: 0;
}

.copy {
    font-size: 13px;
}

.breadcrumb {
    background: none;
    padding: 0;
    border-bottom: 1px solid #ededed;
    padding: 20px 0px;
    border-radius: 0;
}

.breadcrumb a {
    padding: 0 10px;
    color: #7c4ca4;
}

.breadcrumb a:first-child {
    padding-left: 0;
}

.meritList {
    overflow: hidden;
}

.comment {
    width: auto;
    height: auto;
    background: #31577e;
    padding: 20px;
    border-radius: 25px;
    color: #fff;
}

.spe_link a {
    color: #fff;
}
.spe_link a:hover {
    text-decoration: underline;
}

.spe_link {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 16px;
    font-weight: bold;
}

.spe_excerpt {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
}

@media (max-width: 1199px) {
    #nav-grid .navbar-nav .nav-link {
        text-transform: none;
    }

    #banner-grid .banner-content strong {
        font-size: 2em;
    }

    #banner-grid .banner-content span {
        font-size: 1.1em;
    }
}

@media (max-width: 991px) {
    #nav-grid .navbar-nav .nav-link {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    #nav-grid {
        position: relative;
        padding: 0 15px !important;
    }

    .navbar-brand img {
        width: 200px;
    }

    #banner-grid .banner-content {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .breadcrumb{
        display: none;
    }
    .large-para {
        overflow: auto;
    }
    .navbar-toggler {
        background: #6e0000;
    }

    #nav-grid .navbar-nav .nav-link {
        color: #000;
        padding-left: 10px;
        padding-right: 10px;
    }

    #nav-grid .navbar-nav .nav-link:hover {
        background: #ccc;
    }

    #nav-grid .navbar-collapse {
        background: #e0d3c0;
        margin-bottom: 10px;
    }

    #nav-grid .navbar-nav.pr-2.ml-4 {
        margin-left: 0 !important;
        padding-right: 0 !important;
    }

    #branch-grid span,
    #aboutus-grid p {
        font-size: 14px;
    }

    #branch-grid {
        text-align: center;
    }

    .features,
    .extra-feature {
        margin-top: 10px;
    }

    #aboutus-grid strong {
        position: relative;

        top: 0;

        transform: none;

        left: 0;

        font-size: 30px;
    }

    #footer-grid .foot {
        padding: 2em 0;
    }

    #footer-grid {
        padding: 1em 0;
    }

    #banner-grid .banner-content strong {
        font-size: 1em;
    }

    #banner-grid .banner-content span {

        font-size: 0.8em;
    }

    #banner-grid .banner-content {
        bottom: 2em;
    }

    .carousel-indicators,
    #nav-grid .navbar-nav .nav-link::before {
        display: none;
    }

    #nav-grid .navbar-nav .sub-menu {
        position: relative;
        opacity: 1;
        visibility: visible;
        margin-top: 0;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }

    h2,
    .h2,
    #aboutus-grid strong,
    h4,
    .h4,
    h3,
    .h3 {
        font-size: 20px;
    }

    .features strong {
        font-size: 18px;
    }

    .our-mission p,
    .features span,
    #branch-grid span,
    #aboutus-grid p,
    .extra-feature p,
    .large-para p,
    .table th,
    .table td {
        font-size: 13px;
    }

    #aboutus-grid {
        padding: 1.5em 0;
    }

    .extra-feature a.features-link {
        font-size: 12px;
        border-width: 1px;
    }

    #banner-grid .banner-content.branches-banner {
        width: 100%;
    }

}