body {font-family: 'Roboto', sans-serif;}
h2 {text-transform: uppercase; text-align: center; font-family: 'Montserrat', sans-serif; font-size: 46px;}
h3 {font-size: 26px;}
p {margin-bottom: 0; font-size: 16px;}

/* HEADER */
header {position: relative; text-align: center;}
header #otstcfq {padding-top: 15px; padding-bottom: 15px; background-color: #ffffff;}
header #otstcfq img {width: 100%; max-width: 530px;}


header .bg-dark {background-color: #0e5393!important;}
header nav {padding: 15px 0!important; width: 100%; z-index: 1000;}
header nav h1 {margin: 0;}
header nav h1 a {margin-right: 0!important; display: inline!important;}
header nav h1 span {display: none;}
header nav li a {text-transform: uppercase; color: #ffffff!important; font-size: 18px; padding: 0 15px!important;}
header nav li a:hover,
header nav li a:focus {color: #ebad36!important;}
header nav li + li + li + li a {padding-right: 0!important;}
header nav button {margin: 0 15px; padding: 0!important; border: 0!important; margin-left: 0;}
header nav button:hover,
header nav button:focus {text-decoration: none; outline: 0;}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {color: #ebad36!important;}
.navbar-nav {align-items: center;}
header #phone-header {padding-left: 40px!important; font-size: 22px;}
header #phone-header img {width: 22px; margin-top: -4px; margin-right: 8px;}
header #phone-mobile {width: 24px;}

header #banner {text-align: center; bottom: 50%; width: 100%; padding: 0 15px; background: url(../images/therapie-couple.jpg) no-repeat center; background-size: cover; height: 550px; display: flex; flex-direction: column; align-items: center; justify-content: center;}
header #banner p {color: #ffffff; margin: 0; text-shadow: 1px 1px 5px black; line-height: 55px;}
header #banner p:first-child {font-family: 'Cookie', cursive; font-size: 100px; line-height: 62px; margin-bottom: 30px; margin-top: -40px;}
header #banner p br {display: none;}
header #banner p + p {text-transform: uppercase; font-size: 26px; line-height: 36px; margin-top: 5px;}
header #banner a {color: #ffffff; background-color: #ebad36; padding: 10px 20px; display: inline-block; font-size: 22px; margin-top: 30px;}
header #banner a:hover {background: rgba(235, 173, 54, .9);}

header #button-down {position: absolute; bottom: 20px; width: 100%; text-align: center;}
header #button-down a {background: url(../images/arrow-down.png) no-repeat center; display: inline-block; width: 45px; height: 24px;}
header #button-down a:hover,
header #button-down a:focus {background-image: url(../images/arrow-down-hover.png);}

main #services #intro {padding: 50px 0;}
main #services #intro p {font-size: 26px; text-align: center; font-weight: 500;}

main #services #specialite {background: url(../images/therapie.jpg) no-repeat center; padding: 50px 0; color: #ffffff; background-size: cover;}
main #services #specialite h2 {margin-bottom: 15px; font-weight: 400;}
main #services #specialite h3 {text-align: center; font-weight: 400; text-decoration: underline; margin-bottom: 15px;}
main #services #specialite p {font-weight: 300;}

main #blogue {background-color: #eeeeee; padding: 50px 0;}
main #blogue article {margin-bottom: 30px;}
main #blogue h2 {color: #0e5393; margin-bottom: 20px; width: 100%;}
main #blogue .article {background-color: #ffffff; padding: 20px 15px; height: 100%;}
main #blogue .article p.date {color: #aaaaaa; margin: 0 15px;}
main #blogue .article h3 {color: #0e5393; margin: 0 15px; border-bottom: 1px solid #dcdcdc; margin-bottom: 20px; padding-bottom: 11px; line-height: 33px;}
main #blogue .article img {width: 100%; margin-bottom: 5px; display: inline-block;}
main #blogue .article .article-img {display: inline-block; width: 49%; padding-left: 15px; padding-right: 15px;}
main #blogue .article .article-img p {font-size: 12px; font-style: italic;}
main #blogue .article .article-text {display: inline-block; width: 49%; margin-top: 0; vertical-align: top;}
main #blogue .article .article-text a {color: #0e5393;}

main #contact {padding-top: 50px;}
main #contact h2 {color: #0e5393;}
main #contact p {font-size: 26px; text-align: center; font-weight: 500; line-height: 33px;}
main #contact p + p {font-size: 16px; font-weight: 400; border-bottom: 1px solid #dcdcdc; padding-bottom: 20px; margin-bottom: 30px; line-height: 1.5; margin-top: 3px;}
main #contact address {text-align: center;}
main #contact address img {margin-bottom: 15px;}
main #contact address p {font-size: 20px; line-height: 28px; margin-bottom: 40px;}
main #contact address#phone p {font-size: 24px;}
main #contact address#mail p a {color: #0e5393;}

footer iframe {width: 100%; margin-top: 10px;}
footer #footer {background-color: #0e5393; padding-top: 12px; padding-bottom: 10px; margin-top: -8px;}
footer p {color: #ffffff; display: inline-block;}
footer p#hours br {display: none;}
footer p#copyright {font-size: 12px; margin-top: 2px; font-weight: 300; float: right;}

@media(min-width:992px){
    header #phone-mobile {display: none;}
}

@media (max-width: 991px) {
header nav h1 {margin-left: 15px;}
header nav li a {margin-top: 5px;}
header nav li + li + li + li a {padding-right: 15px!important;}
.navbar-collapse {margin-top: 5px;}
.navbar-collapse li {border-top: 1px solid rgba(255,255,255,.1); margin-top: 12px; padding-top: 9px;}
header #banner {height: 350px;}
header #banner p:first-child {font-size: 55px; line-height: 42px; margin-bottom: 10px;}
header #banner p + p {font-size: 18px; line-height: 24px;}
header #banner p br {display: inline;}
header #banner p span {display: none;}
.hide-mobile {display: none;}
.navbar-nav {align-items: normal;}
main #blogue .article .article-img {width: 100%;}
main #blogue .article .article-img p {margin-bottom: 10px;}
main #blogue .article .article-text {width: 100%; padding-left: 15px; padding-right: 15px;}
main #contact address#map p br {display: none;}
footer p {text-align: center; width: 100%;}
footer p#copyright {float: none;}
}

@media (max-width: 480px) {
header nav h1 {width: 220px;}
header nav h1 img {width: 100%; float: left;}
header nav {padding: 21px 0!important;}
.navbar-collapse li {margin-top: 18px; padding-top: 15px;}
.navbar-collapse li:first-child {margin-top: 17px;}
header #banner a {font-size: 18px; padding: 8px 16px; margin-top: 15px;}
main #services #intro p {font-size: 20px;}
h2 {font-size: 37px;}
h3 {font-size: 20px;}
p {font-size: 13px;}
main #blogue .article h3 {line-height: 24px; padding-bottom: 13px;}
main #blogue .article .article-img p {font-size: 9px;}
main #blogue .article .article-text a {font-size: 13px;}
main #contact p {font-size: 20px; line-height: 26px;}
main #contact p + p {font-size: 13px;}
main #contact address#map p br {display: inline;}
main #contact address#mail p {font-size: 19px;}
main #contact address#map p {font-size: 19px; line-height: 26px;}
footer p#hours br {display: inline;}
footer p#hours span {display: none;}
footer p#copyright {font-size: 9px;}
}