/* Template for Home © admotion*/


#sprachen {right: 150px; top: 20px; color: #fff;}
#sprachen li a {color: #fff;}
#container-header { background: transparent;position: absolute; width: 100%;}
h1 {color: #fff; text-align: center; font-size: 25px; margin-bottom: 20px; text-decoration: none;text-shadow: 0 0 0;}
#logo  {margin: 100px auto 0 ; padding: 0; width: 100%;}
#logo p {color: #fff; text-align: center;}
#logo a {color: #fff !important;}

#showbox { height: 300px;}
#showbox video { height: 300px; width: auto; }

.teasertitel {position: absolute; width: 100%; top: 100%; left: 0; font-size: 30px; line-height: 130%;}
.teasertitel a {line-height: 130% !important;}

#teasers {display: block; width: 80%; margin: -80px auto 0; animation: slideIn 1s ease-out;}
#teaser1 img, #teaser2 img, #teaser3 img { width: 30px;}
#teaser1 a, #teaser2 a, #teaser3 a { line-height: 200%; color: #fff;}

#teaser1 { width: 300px; height: 300px; border-radius: 50%; background: url(/images/Teaser/teaser-psycho-therapie.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 25px; position: relative;transition: 0.2s; margin: 0 auto 100px;}
#teaser2 { width: 300px; height: 300px; border-radius: 50%; background: url(/images/Teaser/teaser-coaching.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 25px;position: relative;transition: 0.2s; margin: 0 auto 100px;}
#teaser3 { width: 300px; height: 300px; border-radius: 50%; background: url(/images/Teaser/teaser-paar-therapie.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 25px;position: relative;transition: 0.2s; margin: 0 auto 100px;}

#teaser1 p {display: none;transition: 0.2s; }
#teaser1:hover p {display: block; }
#teaser1:hover p:hover {transform: scale(1.1); transition: 0.2s;}
#teaser1:hover { transform: scale(1.1); background: #24308d; transition: 0.2s;}
#teaser1 .teasertitel a {color: #24308d;}
#teaser1 .teasertitel p {display: block;}

#teaser2 p {display: none;transition: 0.2s; }
#teaser2:hover p {display: block; }
#teaser2:hover p:hover {transform: scale(1.1); transition: 0.2s;}
#teaser2:hover { transform: scale(1.1); background: #9d1002; transition: 0.2s;}
#teaser2 .teasertitel a {color: #9d1002;}
#teaser2 .teasertitel p {display: block;}

#teaser3 p {display: none;transition: 0.2s; }
#teaser3:hover p {display: block; }
#teaser3:hover p:hover {transform: scale(1.1); transition: 0.2s;}
#teaser3:hover { transform: scale(1.1); background: #f5a555; transition: 0.2s;}
#teaser3 .teasertitel a {color: #f5a555;}
#teaser3 .teasertitel p {display: block;}


#menu-small { margin-top: 0 !important;}


@keyframes slideIn {
    0% {padding-top: 300px; opacity: 0; }
    20% {padding-top: 300px; opacity: 0; }
    100% {padding-top: 00px; opacity: 1; }
}


@media(min-width:768px){
#showbox { height: auto;}
#showbox video { height: auto; width: 100%; }
#logo  {margin: 120px auto 0 ; padding: 0; width: 100%;}

    #teasers {display: flex; justify-content: space-between; width: 80%; margin: -75px auto 0;}

    #teaser1 { width: 180px; height: 180px; border-radius: 50%; background: url(/images/Teaser/teaser-psycho-therapie.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 18PX; position: relative;transition: 0.2s;}
    #teaser2 { width: 180px; height: 180px; border-radius: 50%; background: url(/images/Teaser/teaser-coaching.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 18PX;position: relative;transition: 0.2s;}
    #teaser3 { width: 180px; height: 180px; border-radius: 50%; background: url(/images/Teaser/teaser-paar-therapie.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 18PX;position: relative;transition: 0.2s;}
    #teaser1 img, #teaser2 img, #teaser3 img { width: 20px;}
    #teaser1 a, #teaser2 a, #teaser3 a { line-height: 150%; color: #fff;}
    .teasertitel { font-size: 20px; top: 105%;}

}


@media(min-width:1250px){
    h1 {color: #fff; text-align: center; font-size: 60px; margin-bottom: 20px; text-decoration: none;text-shadow: 0 0 0;}
    .teasertitel {position: absolute; width: 100%; top: 105%; left: 0; font-size: 30px; line-height: 130%;}
    #teasers {display: flex; justify-content: space-between; width: 80%; margin: -100px auto 0;}

    #teaser1 img, #teaser2 img, #teaser3 img { width: 30px;}
    #teaser1 a, #teaser2 a, #teaser3 a { line-height: 200%; color: #fff;}
    #teaser1 { width: 300px; height: 300px; border-radius: 50%; background: url(/images/Teaser/teaser-psycho-therapie.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 25px; position: relative;transition: 0.2s;}
    #teaser2 { width: 300px; height: 300px; border-radius: 50%; background: url(/images/Teaser/teaser-coaching.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 25px;position: relative;transition: 0.2s;}
    #teaser3 { width: 300px; height: 300px; border-radius: 50%; background: url(/images/Teaser/teaser-paar-therapie.jpg); background-size: cover; display: flex; justify-content: center; align-items: center; font-family: 'Piazzolla', serif; color: #fff; font-size: 25px;position: relative;transition: 0.2s;}
    
    #logo {margin-top: 200px;}
    
}


@media(min-width:1500px){
   
        #teasers {display: flex; justify-content: space-between; width: 80%; margin: -200px auto 0;}

}