/*

Theme Name: Schmerzfrei-Bewegen
Author: Alexander Hohenecker [ah@code-r.at]
Description: Custom theme created for Schmerzfrei-Bewegen.com based on designs by Kilvia Rodrigues
Version: 0.2

Primary color: #468ab8 (blue)
Secondary color: #64b6b7 (turquoise)
Teritary color: #c5dcf3 (ice blue)
#d8ecec -> #ecf3f3

RJQ64W

*/

BODY {
	background: #383838;
	color: black;
	font-family: sans-serif;
	margin-top: 0;
}

DIV#page {
	background: white;
	width: 1100px;
	margin: 0 auto;
	box-shadow: 0px 0px 12px 0px #00000080;
}

NAV {
	background: #468ab8cc;
	color: #fff;
	padding: 2em 2em;
}

NAV UL {
	list-style: none;
    display: flex;
    padding-left: 0;
    width: 100%;
    justify-content: space-around;
}

NAV a:link, NAV a:visited {
	color: #fff;
	text-decoration: none;
}

NAV LI {
	background: #64b6b7;
    border-radius: 2em;
	white-space: nowrap;
	font-weight: bold;
}

NAV LI a {
	display: inline-block;
    padding: 0.5em 2em;
}

NAV LI:hover {
	background: #64b6b7;
}
NAV LI:hover a {
	color: white;
}
NAV LI.current-menu-item {
	background: #00000040;
}

DIV#banner {
	background-image: url("/wp-content/uploads/Eva-mit-offenen-Haenden.jpg");
	background-size: cover;
	height: 40em;
}

DIV#banner DIV.logo {
	height: 10em;
	position: absolute;
	top: 11em;
}

DIV#banner DIV.logo IMG {
	height: 10em;
}

HEADER H1 {
    text-align: right;
    margin-top: 0em;
    color: #fff;
    padding: 0.6em;
    padding-right: 2em;
    /*background-image: url(/wp-content/uploads/White%20Shape%201.2.png);*/
    background: #64b6b7;
    background-size: cover;
	background-position: center;
    border-bottom-right-radius: 2em;
    margin-bottom: 3em;
}

HR.wp-block-separator {
	border-top: 3px solid #102632;
    margin-bottom: 2em;
}

BODY.home SECTION#content > * {
	margin-bottom: 3em;
}

SECTION#content {
	padding: 0 4em;
	font-size: large;
    line-height: 130%;
}

SECTION#content H1, SECTION#content H2, SECTION#content H3 {
	color: #114946;
}

SECTION#content a:link, SECTION#content a:visited {
	color: #96b590;
	font-weight: bold;
}
SECTION#content > .wp-block-heading {
	text-align: center;
	margin-bottom: 2em;
}

DIV.placeholder {
	background-color: #1026327d;
    color: white;
    border-radius: 1.5em;
    padding: 1em 2em;
    border: 2px dashed white;
}
DIV.placeholder H2 { color: white !important; }

SECTION.services-list {
	display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

DIV.services-item {
    border-radius: 10%;
    overflow: hidden;
    border: 2px solid #4d7775;
	margin-bottom: 3em;
	flex-basis: 40%;
	box-shadow: 4px 3px 12px 0px #00000080;
}

DIV.services-item IMG {
	width: 100%;
}

DIV.services-item H3 {
	margin-top: 0;
}

DIV.services-item DIV.text {
	padding: 1em 1.5em;
    padding-bottom: 0.5em;
}

.contact-container { gap: 6em; }
.contact-info { font-size: larger; }

.article-spotlight {
	background: #94b08b40;
    border-radius: 2em;
}
.article-spotlight IMG {
	object-fit: cover;
    aspect-ratio: 1 / 1;
    border-radius: 2em 0 0 2em;
}

#text-layout {
	border-radius: 2em;
    overflow: hidden;
	text-align: justify;
    color: #144b48;
	margin: 0 2em;
}
.text-layout-image {
	width: 100%;
    max-height: 25em;
    object-fit: cover;
}


#maps-embed { 
	border: 0;
    width: 100%;
    height: 20em;
    border-radius: 1em;
}

FOOTER {
	background: #0b2631;
	color: #82c2c7;
	text-align: center;
	padding: 1em 2em;
    margin-top: 2em;
}

FOOTER a:link, FOOTER a:visited {
	color: #82c2c7;
	text-decoration: none;
}
FOOTER a:hover {
	color: white;
}

FOOTER UL {
	list-style-type: none;
    padding-left: 0;
    display: flex;
    justify-content: center;
}
FOOTER UL LI {
	padding: 0 0.5em;
}

#footer_social {
	display: flex;
    justify-content: space-around;
    width: 25em;
    margin: 0 auto;
	flex-wrap: wrap;
	margin-bottom: 3em;
}

#footer_social H2 {
	flex-basis: 100%;
	font-weight: normal;
    text-transform: uppercase;
    margin-bottom: 1.5em;
}

#footer_social SPAN {
	padding: 0.5em;
    border: 3px solid #91b08c;
    color: #91b08c;
    font-size: 2em;
    vertical-align: bottom;
    border-radius: 20%;
    display: inline-block;
    width: 1em;
    height: 1em;
}