/* Global defines ----------------------------------------------*/
:root {
  --swa-primary-bg-color: white;
  --swa-content-bg-color: white;
  --swa-h2-color: black;
}

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans serif;
  background-color: var(--swa-primary-bg-color);
}

p {
  padding-left: 20px;
}


/* --- swa defines ------------------------------------------------------*/
#container {
  display:none; /* none if landing page is displayed */
}

.swa-h2 {
  color:var(--swa-h2-color);
  text-shadow: 5px 5px 10px #ababab;
  margin-bottom: 20px;
  text-align: center;
}

h2::before {
  content: " # ";
  font-weight: bold;
  font-style: oblique;
}

.swa-btn {
  background-color: orange;
  color:white;
  margin-bottom: 20px;
}

#swa-logo {
  width:100%;
  max-width: 300px;
  box-shadow: 5px 5px 5px grey;
}

.swa-nav-bg  {
  /* background-color: #e4c142; */
  background-image: linear-gradient(to right, yellow, orange);
  opacity: 90%;
}

.swa-border {
  border: 1px solid orange;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 20px;
  box-shadow: 10px 10px 10px grey;
}

#swa-cta {
  background-color: orange;
  text-align: center;
  font-weight: bold;
  font-size: 30px;;
  margin-top: 20px;
  width:300px;
  height:auto;
  position:absolute;
  top:50px;
  left:50px;
  rotate: -30deg;
  opacity: 90%;
  padding-left: 20px;

}

.swa-person {
  text-align: center;
}

.swa-card {
  margin-bottom: 20px;
  border-top: 1px solid lightgrey;
  border-left: 1px solid grey;
  padding-top: 20px;
  padding-bottom: 20px;
  box-shadow: 5px 5px 10px lightgrey;
  display:flex;
  align-content: center;
  justify-content: center;
}

.swa-whyus {
  background-color: #efefef;
  margin-bottom:20px;
  margin-left: 20px; 
  margin-right: 20px;
  padding:10px;
  border: 1px solid orange;
  font-style: italic;
}

.swa-img {

  object-fit: contain;
  width:50%;
  
}

.swa-txt-center {
  text-align: center;
}

#content {
  background-color: var(--swa-content-bg-color);
  padding: 5%;
 }

.social-links a {
  font-size: 50px;
  margin-right: 12px;
  color: #333;
}

.social-links a:hover {
  color: #1877f2; /* Facebook-Blau */
}


/* --- landing pages defines -------------------------------------------*/
#lp {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../img/SWA lp.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

#lp-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

#lp-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

#lp-text button:hover {
  background-color: #555;
  color: white;
}