/**
 * You can add your own styles here. This file is already included.
 */

.both-spacer {
    margin-top: 3.55rem !important;
    margin-bottom: 3.55rem !important;
}

span.error, small.error{
    margin-top:-1rem;
}
.no-margin{
    margin: 0px !important;
}
.tabs dd > a, .tabs .tab-title > a {
    color: #485166;
    border-bottom:1px solid #fff;
}
.tabs dd.active a, .tabs .tab-title.active a {
    outline: none;
    background-color: #cacaca;
    border-bottom:1px solid #000;
}
.tabs dd > a:hover, .tabs .tab-title > a:hover {
    background-color: #cacaca;
}
span.success, small.success {
    display: block;
    padding: 0.375rem 0.5625rem 0.5625rem;
    margin-top: -1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
    background: #4bc986;
    color: #FFFFFF;
}
span.success2, small.success2 {
    display: block;
    padding: 5px;
    margin-top: -1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 400;
    font-style: normal;
    background: #63a7ed;
    color: #FFFFFF;
    border: 5px dashed #e53d62;
}
.red-text{
    color: red;
}

footer {
    background-color: rgb(33, 38, 54); 
}

.copyright{
    color: #989da8;
}

footer .social a i{
    color: #fff;
}

ul.footer_nav{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul.footer_nav li{
    float: left;
    padding-right: 15px;
}
ul.footer_nav li a{
    color: #fff !important;
    text-decoration: none;
}
ul.footer_nav li a:hover{
    opacity: 0.8;
}

/* White Background and Black font */
body{
  background: #fff !important;
  color: #000 !important;
  font-family: "Roboto",sans-serif;
}

header {
    background-color: #fff !important;
    background-image: url(../images/backgrounds/6.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border-top: none;
    border-bottom: none;
    padding: 2.2rem;
}
.top-bar{
    background: #fff;
}
.top-bar-section ul.fullmenu{
    /*width: 78%;*/
}
.top-bar-section ul li{
    background: #fff;
    text-align: center;
}
.top-bar-section ul li > a{
    font-family: "Roboto",Raleway,sans-serif;
    font-weight: inherit;
    text-transform: none;
    font-size: 16px;
}
.top-bar-section .dropdown li a{
    font-weight: normal;
}
.top-bar-section ul li.active > a{
    background: #fff !important;
}
.top-bar-section ul li.active > a:hover{
    color: rgba(0,0,0,0.6);
}
.top-bar.expanded .title-area{
    background: #fff;
    padding-bottom: 14px;
    border-bottom: 1px solid #ccc;
}
.top-bar .toggle-topbar.menu-icon a{
    color: #000;
}
.top-bar .toggle-topbar.menu-icon a span::after{
    box-shadow: 0 0px 0 1px #000, 0 7px 0 1px #000, 0 14px 0 1px #000;
}
.top-bar-section ul li > a{
    color: #000;
}
.top-bar-section ul li.active > a{
    background: #fff;
}
.top-bar-section ul li:hover:not(.has-form) > a{
    background: #fff;
    background-color: #fff;
}
.hero{
    background-color: #fff !important;
    background-image: url(../images/backgrounds/4.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}
.hero h1{
    color: #000;
}
.hero h4{
    color: #000;
}

.hero2{
    background-color: #fff !important;
    background-image: url(../images/backgrounds/6.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.hero3{
    background-color: #fff !important;
    background-image: url(../images/backgrounds/1.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

.hero4{
    background-color: #fff !important;
    background-image: url(../images/backgrounds/7.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

button,.button{
    background-color: rgb(229, 61, 98);
}
button:hover,.button:hover{
    background-color: rgb(229, 61, 98);
    opacity: 0.9;
}

.push-6{
    left:50%;
}

.freemium-container{
    color:#fff;
    background-color:#e53d62;
}

@media only screen and (max-width: 1024px){
    .push-6{
        left:0 !important;
    }
}

@media only screen and (min-width: 50em) {
    .top-bar-section li.hover > a:not(.button) {
      background-color: #fff;
      background: #fff;
      color: #000;
    }
    .top-bar-section li:not(.has-form) a:not(.button){
        padding: 0 10px;
        background: #fff;
    }
    .top-bar-section li:not(.has-form) a:not(.button):hover {
        background: #fff;
        color: rgba(0,0,0,0.6);
    }
    .top-bar-section li.active:not(.has-form) a:not(.button) {
        color: #63a7ed;
        background: #fff; 
    }
    .top-bar-section li.active:not(.has-form) a:not(.button):hover {
        background: #fff;
        color: #63a7ed; 
    }
    .top-bar-section .right li .dropdown {
        left: 0;
        right: auto;
    }
    .top-bar-section ul li{
        text-align: left;
    }
    .top-bar-section .dropdown{
        box-shadow: 5px 5px 10px #ccc;
    }
    .top-bar-section .dropdown li:not(.has-form):not(.active) > a:not(.button){
        background: #fff;
        color: #000;
    }
    .top-bar .top-bar-section ul.dropdown li a{
        background-color: #fff !important;
    }
    .top-bar .top-bar-section ul.dropdown li a:hover{
        background-color: #fff !important;
    }
}