/***  Utils classes ***/
.right-0 {
    right: 0;
}

.padding-vertical-25px {
    padding-top: 25px;
    padding-bottom: 25px;
}

.padding-vertical-50px {
    padding-top: 50px;
    padding-bottom: 50px;
}

.color-white {
    color: #fff;
}

.bgrd-blue-3 {
    background: #2A255B
}

.f-s-13 {
    font-size: 13px;
}

.f-s-15 {
    font-size: 15px !important;
}

.f-s-28 {
    font-size: 28px !important;
}

.margin-left-5px {
    margin-left: 5px;
}

.margin-left-30px {
    margin-left: 30px;
}

.m-0-10-10px {
    margin: 0 10px 10px;
}

.color-gray-4 {
    color: #6F7980
}


.p-6-31x {
    padding: 6px 31px;
}


@media only screen and (max-width: 768px) {
    header .cl-allianz .icon-ico_menu_mobile_default,
    header .cl-allianz .icon-ico_close {
        /*
        top: 10px;
        */
        margin-left: 0;
    }

    .p-mobile-user.icon-ico_user:before {
        font-size: 19px;
        margin-right: 16px;
        position: relative;
        bottom: -18px;
        left: -5px;
    }
}

.w-200px {
    width: 200px;
}

.cursor-pointer {
    cursor: pointer;
}

.active-item {
    background: #FFF;
    color: #5788CE;
}

.property-sale-link:after {
    content: '';
    position: absolute;
    bottom: 0;
    background: #94c351;
    width: 100%;
    left: 0;
    height: 8px;
}

.color-black {
    color: #000
}

.z-i-101 {
    z-index: 101;
}

.w-100p {
    width: 100%;
}

.border-bot-4px {
    border-bottom: 4px solid;
}

.left-100 {
    left: -100%;
    transition: all 1s ease;
}

.pos-40-0-0-0px {
    top: 40px;
    left: 0;
}

.z-i-11 {
    z-index: 11;
}

.p-5-34px {
    padding: 5px 34px;
}

.h-32px {
    height: 32px;
}

.roboto-medium {
    font-weight: 500 !important;
}

.color-orange-1 {
    color: #FF8B00
}

.bgrd-gray-1 {
    background: #E5EAEE
}

a {
    color: #316BB4;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-item {
    margin-bottom: 20px;
    cursor: pointer;
}

.color-blue-6 {
    color: #0077A9
}

@media only screen and (min-width: 768px) {
    .cl-allianz.w-200px {
        width: auto;
    }
}

.main-container {
    position: relative;
    top: 158px
}

.width-full {
    width: 100%;
}

.left-0 {
    left: 0 !important;
    transition: all 1s ease;
}

.scroll-responsive-menu .icon-ico_bwd_blue:before {
    color: #FFF;
    font-size: 16px;
    margin-right: 11px;
    position: relative;
    top: 3px;
    cursor: pointer;
    z-index: 102
}

.margin-top-60px {
    margin-top: 60px;
}

.color__white {
    color: white;
}

.z-i-1 {
    z-index: 1;
}

.roboto-bold {
    font-weight: 700 !important;
}

@media (max-width: 767px) {
    .change-to-flex-column {
        flex-direction: column !important;
    }

    .center-in-mobile {
        text-align: center;
    }
}

.f-s-14 {
    font-size: 14px !important;
}

.blue__divider {
    color: #6a67aa;
    margin: 0 5px;
}

footer {

    background-color: #2A255B;
    position: relative;
    overflow: hidden
}

footer a, footer a:hover {
    color: #fff;
}

footer i {
    font-size: 25px;
    margin-right: 15px
}

footer a:last-child i {
    margin-right: 0px
}

.links-footer {
    margin-top: 60px
}

.border-radius-50 {
    border-radius: 50%;
}

.circle__125px {
    height: 125px;
    width: 125px;
}

.border__solid {
    border-style: solid !important;
}

.border__w__10 {
    border-width: 10px
}

.border__bleu__5 {
    border-color: #004C99;
}

.p-0-0-60-0 {
    bottom: 60px;
}

.margin-right-50px {
    margin-right: 50px;
}

.pos-0-0-127-0 {
    bottom: -127px;
}

.pos-60-0-0-0px {
    top: -60px;
}

.border-blue-4 {
    border-color: #169FDB;
}

.pos-25-0-0-61px {
    left: 61px;
    top: 25px;
}

.regular {
    font-weight: 500;
}

.p-20-7-0-15 {
    padding: 17px 7px 0 15px;
}

.z-i-3 {
    z-index: 3;
}

.box-shadow-0-5-10-0 {
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
}

.pos-25-0-0-214px {
    left: 214px;
    top: 25px;
}

.w-178px {
    width: 178px;
}

.top-menu .firstnav {
    color: white;
}

.top-menu {
    position: relative;
    top: 45px;
    left: 143px;
    font-size: 16px;
    z-index: 11;
    height: 24px;
}


.reverse-circle-color {
    background-color: #52527c !important;
    color: #fff !important;
    border: none !important;
}

.top-menu li {
    cursor: pointer;
    font-size: 18px;
}

.top-menu i:before {
    color: white;
    margin-right: 10px;
    font-size: 18px !important;
}

a {
    color: #316BB4;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

h5.card-title,
.card-text-title {
    font-size: 1.1rem;
    font-weight: 500;
}

.invalid-field {
    border: 1px solid #db0707 !important;
    color: #db0707 !important;
}

/******** Immobilie banner part ********/


.headline {
    margin-top: 0;
    font-size: 48px;
    color: rgb(39, 39, 91);
    line-height: 1.2;
    text-align: left;
    margin-bottom: 55px;
}

.immobilie-text > p {
    color: rgb(21, 21, 21);
    line-height: 1.5;
    text-align: left;
    margin-bottom: 0;
}

.immobilie-image {
    max-width: fit-content;
}

.margin-top-50 {
    margin-top: 50px;
}

@media (min-width: 768px) {
    .headline {
        font-weight: 700;
    }
}

@media (max-width: 576px) {
    .immobilie-text > p {
        text-align: justify;
    }
}


/*************************/

.padding-top-50px {
    padding-top: 50px;
}

.padding-25px {
    padding: 25px 0;
}

.image-right-corner {
    position: absolute;
    font-family: "Roboto", sans-serif;
    font-size: 14px;
    left: calc(80%);
}


/******************************** Dots banner part ***************/
.dots {
    margin: 10px 10px 0 0;
}

.dot {
    border-radius: 50%;
    width: 16px;
    height: 16px;
    margin-bottom: 5px;
    border: 1px solid rgb(148, 195, 81);

}

.dot.fill {
    border: 0;
    background-color: rgb(39, 39, 91);
}

/******************************* Dots banner part ***************/


.ph-button {
    padding: .375rem .75rem;
    background-image: -moz-linear-gradient(90deg, rgb(39, 39, 91) 0%, rgb(2, 51, 103) 100%);
    background-image: -webkit-linear-gradient(90deg, rgb(39, 39, 91) 0%, rgb(2, 51, 103) 100%);
    background-image: -ms-linear-gradient(90deg, rgb(39, 39, 91) 0%, rgb(2, 51, 103) 100%);
    color: #fff;
    font-weight: 700;
    border-radius: 0;
    border: 2px solid transparent;
}

.ph-button:not(:disabled):active {
    background-image: linear-gradient(180deg, #316bb4 0, #22418e 100%);
}

.ph-button.primary-btn:hover {
    background: linear-gradient(180deg, #023367 0, #004c99 100%);
}


@media screen and (min-width: 320px) {
    .ph-button {
        padding: 6px 12px;
        font-weight: 400;
    }
}

@media screen and (min-width: 568px) {
    .ph-button {
        font-weight: 700;
    }
}


@media (min-width: 768px) {
    .text-md-nowrap {
        white-space: nowrap !important;
    }
}

/****************** SPINNER STYLE ********************** */


.ui-progress-spinner {
    position: relative;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    display: block
}

.ui-progress-spinner::before {
    content: '';
    display: block;
    padding-top: 100%
}

.ui-progress-spinner-svg {
    -webkit-animation: 2s linear infinite ui-progress-spinner-rotate;
    animation: 2s linear infinite ui-progress-spinner-rotate;
    height: 100%;
    -webkit-transform-origin: center center;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto
}

.ui-progress-spinner-circle {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: 0;
    stroke: #d62d20;
    -webkit-animation: 1.5s ease-in-out infinite ui-progress-spinner-dash, 6s ease-in-out infinite ui-progress-spinner-color;
    animation: 1.5s ease-in-out infinite ui-progress-spinner-dash, 6s ease-in-out infinite ui-progress-spinner-color;
    stroke-linecap: round
}

button:focus {
    outline: 0;
}

@-webkit-keyframes ui-progress-spinner-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@keyframes ui-progress-spinner-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

@-webkit-keyframes ui-progress-spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

@keyframes ui-progress-spinner-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px
    }
}

@-webkit-keyframes ui-progress-spinner-color {
    0%, 100% {
        stroke: #004c99
    }
    25% {
        stroke: #169fdb
    }
    45% {
        stroke: #94c351
    }
    60% {
        stroke: #00a4b1
    }
    75% {
        stroke: #fdc41f
    }
    90% {
        stroke: #ea5167
    }
}

@keyframes ui-progress-spinner-color {
    0%, 100% {
        stroke: #004c99
    }
    25% {
        stroke: #169fdb
    }
    45% {
        stroke: #94c351
    }
    60% {
        stroke: #00a4b1
    }
    75% {
        stroke: #fdc41f
    }
    90% {
        stroke: #ea5167
    }
}

/********************** END SPINNER STYLE ****************/


@media screen and (min-width: 992px) {
    .reverse-text-color {
        color: #27275b !important;
    }
}

