@import '../assets/purecss/pure.css';

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v34-latin-regular.eot');
  src: local('Open Sans'),
       url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'),
       url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'),
       url('../fonts/open-sans-v34-latin-regular.woff') format('woff'),
       url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'),
       url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg');
}


/*  ******************************
****** Basis *****************
****************************** */

html, button, input, select, textarea,

.pure-g [class *= "pure-u"] {
  font-family: "Open Sans", sans-serif;
}

.clearer:after {
  content: " ";
  clear: both;
  display: block;
  visibility: hidden;
  height: 0px;
}


* {
  box-sizing: border-box;
}

.pure-button-invert {
  background: #fff !important;
  color: #1F8DD6 !important;
  border-radius: 5px !important;
  font-size: 120% !important;
}

.pure-menu-selected .pure-menu-link,
.pure-menu-selected .pure-menu-link:visited {
  color: #fff;
}


p > a,
p > a:visited {
  color: #6FBEF3;
}

p > a.pure-button:visited {
  color: #fff;
}

/*  ******************************
****** Menu  *****************
****************************** */

.home-menu {
  padding: 0.5em;
  text-align: center;
  box-shadow: 0 1px 1px rgba(0,0,0, 0.10);
}
.home-menu {
  background: #2d3e50;
}
.pure-menu.pure-menu-fixed {
  border-bottom: none;
  z-index: 4;
}

.home-menu .pure-menu-heading {
  color: white;
  font-weight: 400;
  font-size: 120%;
}

.home-menu .pure-menu-selected a {
  color: white;
}

.home-menu a {
  color: #6FBEF3;
}
.home-menu li a:hover,
.home-menu li a:focus {
  background: none;
  border: none;
  color: #AECFE5;
}

.home-menu img {
  display: inline-block;
  vertical-align: middle;
  height: 65px;
  border-radius: 5px;
}

.home-menu .pure-menu-heading {
  padding: 0 20px;
}

@media (min-width: 48em) {
  .home-menu {
    text-align: left;
  }
  .home-menu ul {
    float: right;
  }
}

/*  ******************************
****** Hamburger Icon ************
****************************** */

.mm-menu.mm-offcanvas {
  display: none;
}

.mmenu-icon-container {
  float: right;
  padding-top: 10px;
}

.pure-menu-horizontal .pure-menu-list {
  display: none;
  padding-top: 10px;
}

@media (min-width: 48em) {
  .mmenu-icon-container {
    /*display: none;*/
  }

  .pure-menu-horizontal .pure-menu-list {
    display: inline-block;
  }
}

#hamburger {
   border: 1px solid #6FBEF3;
   display: block;
   width: 45px;
   padding: 5px 10px;

   overflow: hidden;
}
#hamburger span {
	background: #6FBEF3;
	display: block;
	height: 3px;
	margin: 5px 0;
	position: relative;
	transform: rotate( 0 );
	top: 0;
	left: 0;
	opacity: 1;
	transition: none 0.5s ease;
	transition-property: transform, top, left, opacity;
}

html.mm-opened #hamburger {
  border-color: #AECFE5;
}

html.mm-opened #hamburger span {
  background: #AECFE5;
}

html.mm-opened #hamburger span.top-bar {
   transform: rotate( 45deg );
   top: 9px;
}
html.mm-opened #hamburger span.middle-bar {
   opacity: 0;
   left: -40px;
}
html.mm-opened #hamburger span.bottom-bar {
   transform: rotate( -45deg );
   top: -7px;
}

/*  ******************************
****** Submenu  *****************
****************************** */

.submenu-list {
  list-style-type: none;
  padding-left: 0;
}

.submenu-sibling {
  padding: 8px;
  border-bottom: 1px solid #6FBEF3;
}

.submenu-link {
  text-decoration: none;
  color: #000;
  display: block;
}

.submenu-link:hover {
  color: #6FBEF3;
}

.submenu-active > .submenu-link {
  color: #6FBEF3;
}


/*
* -- SPLASH STYLES --
* This is the blue top section that appears on the page.
*/
.home .splash-container {
  background: #1f8dd6;
  padding: 62px 1em 1em 1em;

}

.splash {
  width: 80%;
  max-width: 1100px;
  margin: auto;
  text-align: center;
  text-transform: uppercase;
}

/* This is the main heading that appears on the blue section */
.splash-head {
  font-size: 20px;
  font-weight: bold;
  color: white;
  border: 3px solid white;
  padding: 1em 1.6em;
  font-weight: 100;
  border-radius: 5px;
  line-height: 1em;
}

/* This is the subheading that appears on the blue section */
.splash-subhead {
  color: white;
  letter-spacing: 0.05em;
  opacity: 0.8;
}



@media (min-width: 48em) {
  .splash {
    width: 50%;
  }

  .splash-head {
    font-size: 250%;
  }
}

@media (min-width: 78em) {
  .splash-head {
    font-size: 300%;
  }
}

/*  ******************************
****** Content ***************
****************************** */

.home #content {
  background: white;
}

#content > .inside {
  min-height: 95vh;
}

#content > .inside > .content-container {
  padding: 0.5em;
  padding-top: 62px;
  max-width: 1100px;
  margin: auto;
}

.home #content > .inside > .content-container {
  padding-top: 0.5em;
}

#content > .inside div[class*="pure-u-"] {
  padding: 2em;
}

#content > .inside *[class*="pure-less-padding"] {
  padding: 0.5em;
}

.splash-head.hh-map  {
  background-image: url("../imgs/Fotolia_90539717_L.jpg");
  background-size: cover;
  background-position: center center;
  padding: 0;
}

.splash-logo-container {
  background-color: rgba(45, 62, 80, 0.5);
  padding: 120px 100px;
}

.splash-logo-container .logo {
  margin: auto;
}

.splash-head.herren-imgs {
  font-size: 100%;
}

.herr-profil {
  position: relative;
  padding: 10px;
}
.herr-profil img {
  width: 100%;
}

.herr-info {
  position: absolute;
  margin: 10px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(45,62,80,0);
  transition: background 0.3s;
}

.herr-text {
  opacity: 0;
  position: absolute;
  padding: 5px;
  bottom: 0;
  /*transform: translateY(-50%);*/
  transition: opacity 0.3s;
  text-transform: none;
  line-height: normal;
}

.herr-info:hover {
  background: rgba(45,62,80,0.8);
}

.herr-info:hover .herr-text {

  opacity: 1;
}


/* // Ribbon // */
.ribbon {
  background: #2d3e50;
  color: #fff;
}

.ribbon .inside {
  margin: auto;
  max-width: 800px;
}

/* // Leistungen // */
.leistung-content {
  border-bottom: 1px solid #1f8dd6;
  margin-bottom: 24px;
  padding-bottom: 24px;
}

.leistung-content ul {
  padding-left: 20px;
}

.leistung-content .btn-container {
  text-align: center;
}

.leistung-icon {
  display: block;
  text-align: center;
}

.leistung-icon::before {
  font-size: 700%;
}

.leistung-headline,
.leistung-icon::before {
  color: #1f8dd6;
}

.leistung-link {
  text-align: center;
}

@media (min-width: 48em) {
  .leistung-content {
    border: none;
    padding-bottom: 0;
  }
}


/*  ******************************
****** Footer  ***************
****************************** */

footer {
  background: #2d3e50;
  padding: 0.5em;
  color: #fff;
  text-align: center;
}

footer .inside {
  max-width: 1100px;
  margin: auto;
}

footer a, footer a:visited {
  color: #fff;
}

footer .footer-copyright {
  margin: 1em 0;
}

footer .footer-copyright,
footer .footer-navi {
  text-align: center;
}

footer .footer-navi ul {
  padding-left: 0;
}

footer .footer-navi li {
  display: inline-block;
}

footer .footer-navi a {
  text-decoration: none;
  padding: 0 5px;
}

footer .footer-navi a:hover {
  background: none;
  border: none;
  color: #AECFE5;
}

@media (min-width: 48em) {
  footer .footer-copyright {
    text-align: left;
  }
  footer .footer-navi {
    text-align: right;
  }
}