:root {
    --main-color: #4d646b;
    --blue1: #3bafbf;
    --blue2: #075576;
    --blue3: #3071c8;
}

body {
    font-family: 'Montserrat', sans-serif;
    color: var(--main-color);
}

p a:hover {
    color: var(--main-color);
}

p a {
    color: var(--blue2);
}

/

/* ==== Responsive Stuff ==== */
@media (max-width: 575px) {
    .navbar-title,
    .brand-text,
    .li-container li a {
        font-size: 15px;
    }

    h2 {
        font-size: 1.4rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .navbar-brand img {
        width: 75%;
    }
}

/* ==== Retina ==== */
img.r200 {
    max-width: 100px;
}

img.r400 {
    max-width: 200px;
}

/* ==== Animation ====*/
.animcontainer {
    background-image: linear-gradient(to right, #3bafbf 40%, #3071c8 80%);
    background-color: #3bafbf;
    min-height: 500px;		/*changed from 600*/
}

.ani_img {
    visibility: hidden;
    max-width: 100%;
    height: auto;
}

@media (max-width: 761px){
    .switch_img {
    }
}

@media (max-width: 762px){
    .switch_img {
        content: url("/assets/img/logo_fixed.png");
    }
}

.ani_canvas {
    display: block;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

/* ==== Container  ==== */
.container-fade {
    background-image: linear-gradient(to right, #3bafbf 40%, #3071c8 80%); /*#3071c8*/
    color: #FFF;
    padding: 0 !important;
}

.container-fade-2 {
    background-image: linear-gradient(to right, #92c4d5 20%, #a0ce4e 80%);
    padding: 0 !important;
    color: #fff;
}

.container-fade .col-md-12 {
    margin-bottom: 40px;
}

.container-spacing {
    margin-top: 40px;
    margin-bottom: 40px;
}

.container-padding {
    padding-top: 40px;
    padding-bottom: 40px;
}

.container-parallax {
    max-width: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax1 {
    background-image: url("./assets/img/datenschutz3.jpg");
}

.parallax2 {
    background-image: url("./assets/img/e-commerce2.jpg");
}

.container-blue {
    background: #3bafbf;
    color: #fff;
}

.container-blue-2 {
    background: #3071c8;
    color: #fff;
}

/* ==== Transition ==== */
.transition {
    position: relative;
    width: 100%;
    min-height: 55px;
    overflow: hidden;

    /*background: url("./assets/img/pattern.png");*/
}

.transition-2 {
    width: 100%;
    height: 5px;
    background: rgba(0,0,0,0.5);
    position: relative;
    top: 0px;
}

.transition-test {
    width: 100%;
    height: 24px;
    background: url("./assets/img/transition_test2.png");
}

.triangle-up {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 0px 2400px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
}

.tu-blue {
    border-color: transparent transparent transparent #3bafbf;
}

.tu-blue-2 {
    border-color: transparent transparent transparent #3071c8;
}

.triangle-up-shadow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 0 0 2400px;
    border-color: transparent transparent transparent rgba(0,0,0,0.5);
    left: 0px;
    top: 0;
    position: absolute;
}

.triangle-down {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 2400px 50px 0px;
    border-color: transparent #fff transparent transparent;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.td-blue {
    border-color: transparent #3bafbf transparent transparent;
}

.td-blue-2 {
    border-color: transparent #3071c8 transparent transparent;
}

.triangle-down-shadow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2400px 50px 0;
    border-color: transparent rgba(0,0,0,0.5) transparent transparent;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

.triangle-down-2 {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 2400px 0px 0px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
}

.td-2-blue {
    border-color: #3bafbf transparent transparent transparent;
}

.triangle-down-2-shadow {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 2400px 0px 0;
    border-color: rgba(0,0,0,0.5) transparent transparent transparent;
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
}

.carousel .triangle-down {
    border-color: transparent #3bafbf transparent transparent;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
}

.carousel .triangle-down-shadow {
    right: 0;
    top: 5px;
    position: absolute;
    z-index: 1;
}

#carouselProjektmanagement .carousel-caption {
    color: var(--main-color) !important;
}

#carouselProjektmanagement .carousel-indicators li {
    background-color: rgba(59, 175, 191, 0.5);
}

#carouselProjektmanagement .carousel-indicators li.active {
    background-color: var(--blue1);
}

a.cpm .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#3bafbf' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

a.cpm .carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#3bafbf' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* ==== Separator === */
.separator {
    width: 50%;
    margin: auto;
    min-height: 3px;
    background: url("./assets/img/pattern.png");
}

.separator-left {
    width: 50%;
    min-height: 3px;
    background: url("./assets/img/pattern.png");
}

@media (max-width: 767px) {
    .separator-left {
        margin: auto;
    }
}

/* ==== Image ==== */
.center-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    max-width: 100%;
}

@media (max-width: 767px) {
    .col-md-4 .rounded-circle {
        max-width: 29% !important;
    }
}

.title-img {
    max-width: 100%;
}

/* ==== Lists ==== */
ul.tfg-list {
    list-style-image: url("./assets/img/list-icon.png");
}

/* ==== Anchor ==== */
/* ==== Rows ===*/
.iNeedSpace {
    margin: 100px 0px;
}

.tfg-leistungen .col-md-4,
.tfg-leistungen .col-md-6 {
    padding-top: 10px;
    padding-bottom: 10px;
    transition: 0.2s ease-in-out;
}

.tfg-leistungen .col-md-4 a,
.tfg-leistungen .col-md-4 a:hover,
.tfg-leistungen .col-md-6 a,
.tfg-leistungen .col-md-6 a:hover {
    color: #fff;
    text-decoration: none;
}

.tfg-leistungen .col-md-4:hover,
.tfg-leistungen .col-md-6:hover {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    transition: 0.2s ease-in-out;
}

/* ==== Column ==== */
.frosted {
    background: rgba(255,255,255,0.2);
    padding-top: 25px;
    padding-bottom: 25px;
}

/* ==== Buttons ==== */
.btn-datanis {
    background: #92c4d5;
    text-transform: uppercase;
    color: #ffffff;
    width: 100%;
    max-width: 240px;
    border-radius: 2px;
    padding: 10px 29px;
}

.btn-white-border {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    border-radius: 2px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
}

.btn-white-border:hover {
    background: rgba(255,255,255,1);
    color: var(--main-color);
}

.btn-equal {
    width: 150px;
    padding: 10px;
}

.btn-datanis:hover {
    background: #2f576f;
}

.btn-slider {
    border-radius: 2px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    padding: 10px 50px;
}

.btn-slider:hover {
    background: rgba(255,255,255,1);
    color: var(--main-color);
}

.btn {
    transition: 0.4s ease-in-out;
    border-radius: 2px;
}

.btn-med {
    padding: 10px 50px;
}

.btn-big {
    width: 80%;
    padding-top: 15px;
    padding-bottom: 15px;
}

.btn-tfg {
    background: var(--blue1);
    color: #fff;
}

.btn-contact {
    border: 2px solid var(--blue1);
    color: var(--blue1);
    background: transparent;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
}

.btn-contact:hover,
.btn-contact:active {
    border-color: var(--blue2);
    background: var(--blue2);
    color: var(--blue2);
    color: #fff;
}

@media (max-width: 767px) {
    .button-group {
        margin: 0 auto;
        text-align: center;
    }
}

@media (max-width: 350px) {
    .btn-equal {
        width: 49%;
    }
}

.btn-tfg:hover,
.btn-tfg:active {
    background: var(--blue2);
}

.btn-map {
    color: var(--main-color);
    background-image: url(./assets/img/map-drawing.jpg);
    transition: 0s;
    background-size: cover;
    background-position: top;
}

/* ==== Text Alignments ==== */
@media (max-width: 767px) {
    .center-sm {
        text-align: center;
    }
}

/*==== Slider ====*/
.referenzen .d-content {
    width: 100%;
    background: #3bafbf;
}

@media (min-width: 953px)  and (max-width: 1199px) {
    .d-content {
        height: 500px;
    }
}

@media (min-width: 1200px) {
    .d-content {
        height: 600px;
    }
}

@media (min-width: 769px) and (max-width: 952px) {
    .d-content {
        height: 500px;
    }
}

@media (min-width: 200px) and (max-width: 768px) {
    .d-content {
        height: 700px;
    }
}

.referenzen ul.d-list {
    text-align: left;
    padding: 0 0 0 16px;
    list-style-image: url("./assets/img/list-icon-white.png");
}

a.rm-link {
    color: var(--blue2);
}

a.rm-link:hover {
    color: var(--blue1);
    text-decoration: none;
}

.carousel .col-md-4 {
    text-align: left;
}

/* ==== Footer ==== */
.footer {
    height: 250px;			/*250*/
    position: relative;
}

@media (max-width: 991px) {
    .footer {
        height: 300px;		/*300*/
    }
}

@media (max-width: 767px) {
    .footer {
        height: 450px;
    }
}

@media (max-width: 575px) {
    .footer {
        height: 480px;
    }
}

.footer .container {
}

.footer-content {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    text-align: left;
}

.content {
    position: relative;
    z-index: 2;
}

.footer-content .col-md-12,
.footer-content .col-md-4 {
    padding-bottom: 15px;
}

a.footer-link {
    color: #fff;
}

.imp a {
    color: var(--blue1);
}

.s-image {
    padding-top: 120px;
}

@media (min-width: 768px) {
    .img2 {
        display: none;
    }
}

@media (max-width: 767px) {
    .img1 {
        display: none;
    }
}
}