/*

Theme Name: Ruggeweh-Theme


Theme URI: 
https://www.ruecken-schmerz.ch/

Description: Das WordPress-Theme für die Landing-Page

Version: 1.00

Author: Lukas Yu


Text Domain: ruggeweh
Domain Path: /languages
*/

body{
    font-family: 'Roboto', sans-serif;
}
h2 {
    margin-bottom: 0.5em !important;
}
a:hover{
    text-decoration: none !important;
}

/* Header */
.navbar-brand {
    display: flex !important;
    width: 10em;
}
.nav-item {
    padding: 0.2em;
    transition: border-color .5s;
    border-bottom: 1px solid transparent;
}
.nav-item:hover {
    border-color: grey;
}

/* Main content */
.container.article {
    max-width: 768px;
    margin: 0 auto;
}

.background-blue {
    background-image: url(img/headerbild_blau2.jpg);
}
.background-grey {
    background-color: lightgrey;
}

.light-transparent {
    background-color: rgba(255,255,255,.5);
}

.parallax {
    background-attachment: fixed;
    background-size: cover;
}

/* Angled blocks effect with svg */
.angle {
    height: 3em;
    width: 100%;
    position: abolute;
}
.angle > .fill-grey {
    fill: lightgrey;
    stroke: transparent;
}
.angle > .fill-white {
    fill: white;
    stroke: transparent;
}

/* Bootstrap accordion arrows */
.accordion-btn[data-toggle="collapse"]:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f106";
    float: right;
}
.accordion-btn[data-toggle="collapse"].collapsed:after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f107";
}

footer {
    background-color: lightgrey;
}

.social-media {
    margin-top: -3em;
}
.social-circle {
    margin: 0 .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    height: 2em;
    width: 2em;
    font-size: 1.5em;
    color: white;
    background-color: #555555;
}
.social-circle:hover {
    background-color: grey;
    transition: color .2s;
}
.social-circle.facebook:hover {
    color: #4267B2;
}
.social-circle.instagram:hover {
    color: #c13584;
}
.social-circle.youtube:hover {
    color: #FF0000;
}

#logo-bechterew {
    height: 5em;
}
#logo-rheumaliga {
    height: 4em;
}
#logo-msd {
    height: 4em;
}