/*
Theme Name: Internet Agentur Scherer
Theme URI: https://www.ia-scherer.de
Author: Internet Agentur Scherer
*/

/*
Colors:
blue: #005b9c
orange: #e8500e
*/

/* ---------------------------------------------------------------------- */
/* Local Fonts                                                            */
/* ---------------------------------------------------------------------- */

/* open-sans-300 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-300.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* 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'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-500 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/open-sans-v34-latin-500.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-500.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-500.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-600 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/open-sans-v34-latin-600.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-600.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-600.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-700 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/open-sans-v34-latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-700.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-700.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-800 - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 800;
    src: url('../fonts/open-sans-v34-latin-800.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-800.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-800.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-300italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 300;
    src: url('../fonts/open-sans-v34-latin-300italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-300italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-300italic.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/open-sans-v34-latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-italic.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-500italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 500;
    src: url('../fonts/open-sans-v34-latin-500italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-500italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-500italic.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-600italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    src: url('../fonts/open-sans-v34-latin-600italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-600italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-600italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-600italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-600italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-600italic.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-700italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/open-sans-v34-latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-700italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-700italic.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  /* open-sans-800italic - latin */
  @font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 800;
    src: url('../fonts/open-sans-v34-latin-800italic.eot'); /* IE9 Compat Modes */
    src: local(''),
         url('../fonts/open-sans-v34-latin-800italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('../fonts/open-sans-v34-latin-800italic.woff2') format('woff2'), /* Super Modern Browsers */
         url('../fonts/open-sans-v34-latin-800italic.woff') format('woff'), /* Modern Browsers */
         url('../fonts/open-sans-v34-latin-800italic.ttf') format('truetype'), /* Safari, Android, iOS */
         url('../fonts/open-sans-v34-latin-800italic.svg#OpenSans') format('svg'); /* Legacy iOS */
         font-display: swap;
  }
  
  @font-face {
    font-family: "Handel Gothic ITC W01 Italic";
    src: url("../fonts/.eot"); /* IE9*/
    src: url("666db042d7ca52bc54467315c5018c65.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("../fonts/Handel-Gothic-ITC-W01-Italic.woff2") format("woff2"), /* chrome、firefox */
    url("../fonts/Handel-Gothic-ITC-W01-Italic.woff") format("woff"), /* chrome、firefox */
    url("../fonts/Handel-Gothic-ITC-W01-Italic.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url("666db042d7ca52bc54467315c5018c65.svg#Handel Gothic ITC W01 Italic") format("svg"); /* iOS 4.1- */
    font-display: swap;
  }
  
  
/* ---------------------------------------------------------------------- */
/* Basic Settings                                                         */
/* ---------------------------------------------------------------------- */

html, body {

}

body {
    margin: 0;
    padding: 0;
    background: rgb(253,138,47);
    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); 
    background-size: 400% 400%;
    animation: gradient 25s ease infinite;
    min-height: 100vh;
    color: #252525;
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 500;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

h1, .h1 {
    font-family: "Handel Gothic ITC W01 Italic";
    color: #fff;
    text-shadow: 1px 1px 1px #252525;
    font-size: 2.5em;
}

h2, .h2 {
  font-family: "Handel Gothic ITC W01 Italic";
  color: #fff;
  font-size: 1.6em;
}

h2.top {
  font-family: "Handel Gothic ITC W01 Italic";
  color: #ffffff;
  text-shadow: none;
  font-size: 1.6em;
}

h3, .h3 {
  font-family: "Handel Gothic ITC W01 Italic";
  font-style: normal;
  font-weight: 500;
  color: #fff;
  font-size: 1.6em;
}

h4, .h4 {
  font-family: 'Open Sans';
  color: #fff;
  font-size: 1.5em;
}

p, .p {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.2em;
  color: #fff;
  padding-right: 15px;
  hyphens: auto; 
}

a, .a {
  color: #fff;
  text-decoration: none;
}

ul, li {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-size: 1.0em;
  color: #fff;
  padding-right: 15px;
  hyphens: auto; 
}


/* ---------------------------------------------------------------------- */
/* Header                                                                 */
/* ---------------------------------------------------------------------- */

header {
  max-width: 1920px;
  width: 100%;;
}

.branding {
  max-width: 1920px;
  margin: 0 auto;
  border-bottom: 1px solid black;
  border-image: linear-gradient(to left, rgb(255, 255, 255) 59%, rgba(0, 0, 0,0) 75%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

.anniversary img {
  position: absolute;
  width: 100px;
  top: 10px;
  margin-left: 10px;
}

.brand {
  display: flex;
  flex-direction: row;
  float: right;
}

.imagemark {
  height: 40px;
  margin: 12px 3px 20px 0;
}

.wordmark {
  float: right;
}

h1.wordmark {
  margin: 20px 20px 20px 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 75%;
  float: right;
}

.businesscard {
  text-align: right;
  color: #fff;
  font-family: "Handel Gothic ITC W01 Italic";
  font-size: 0.8em;
  margin: 0 20px 0 0;
}

.businesscard a {
  color: #fff;
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Bootstrap Override                                                     */
/* ---------------------------------------------------------------------- */

section {
  display: flex;
  flex-direction: row;
  width: 100%;
  min-height: 100vh;
  border-right: 1px solid black;
  border-image: linear-gradient(to top, rgb(255, 255, 255) 25%, rgba(0, 0, 0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

.clear {
	clear: both;
}

.wrapper {
  max-width: 1920px;
  margin: 0 auto;
  border-left: 1px solid black;
  border-image: linear-gradient(to bottom, rgb(255, 255, 255) 25%, rgba(0, 0, 0,0) 50%); /* to top - at 50% transparent */
  border-image-slice: 1;
}

.left {
  width: 50%;
}
.right {
  width: 50%;
}

.text {
  margin: 250px 0 50px 0;
  padding: 0 150px 0 150px;
}

/* ---------------------------------------------------------------------- */
/* Blob                                                                   */
/* ---------------------------------------------------------------------- */

#blob {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 200px;
}

#blob canvas {
  width: 1000px;
  align-items: center;
justify-content: center;
}

.controls {
  display: none;
}

.rangeSlider {
  position: relative;
  background: none;
  border: 1px solid #fff;
  border-radius: 6px;
  cursor: pointer;
}
.rangeSlider.rangeSlider__horizontal {
  height: 10px;
  width: 160px;
}
.rangeSlider .rangeSlider__fill {
  border-radius: 7px;
  background: #fff;
  position: absolute;
}
.rangeSlider .rangeSlider__fill:before {
  content: "";
  left: -2px;
  top: -2px;
  bottom: -2px;
  right: -2px;
  border: 2px solid #3F4656;
  border-radius: 6px;
  position: absolute;
}
.rangeSlider .rangeSlider__fill__horizontal {
  height: 100%;
  top: 0;
  left: 0;
}
.rangeSlider .rangeSlider__handle {
  border: 2px solid #3F4656;
  cursor: grab;
  cursor: -webkit-grab;
  display: inline-block;
  width: 22px;
  height: 22px;
  position: absolute;
  background: white;
  border-radius: 50%;
}
.rangeSlider .rangeSlider__handle__horizontal {
  top: -7px;
}

/* ---------------------------------------------------------------------- */
/* Icons                                                                   */
/* ---------------------------------------------------------------------- */

.icon-circle {
  position: absolute;
  margin-top: -260px;
  margin-left: -240px;
}

img.icon-blue, img.icon-green, img.icon-purple, img.icon-orange, img.icon-red {
  position: absolute;
  width: 250px;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-duration: 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

img.icon-blue {
  animation-delay: 0.5s;
  transform: rotate(-110deg) translate(17em) rotate(110deg);
  z-index: 110;
}

img.icon-green {
  animation-delay: 2.5s;
  transform: rotate(-182deg) translate(17em) rotate(182deg);
  z-index: 120;
}

img.icon-purple {
  animation-delay: 1.5s;
  transform: rotate(-254deg) translate(17em) rotate(254deg);
  z-index: 130;
}

img.icon-orange {
  animation-delay: 1.0s;
  transform: rotate(-326deg) translate(17em) rotate(326deg);
  z-index: 140;
}

img.icon-red {
  animation-delay: 2.0s;
  transform: rotate(-38deg) translate(17em) rotate(38deg);
  z-index: 150;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1.0;
  }
}


/* ---------------------------------------------------------------------- */
/* Textslider                                                             */
/* ---------------------------------------------------------------------- */

.text-slide {
  text-align: center;
}

h1.text-slide {
  font-size: 2.0em;
}

.d-md-none {
  display: none !important;
}

u, .u {
	text-decoration: none;
	position: relative;
	padding: 0 8px 12px;
	display: inline-block;
	vertical-align: top;
}

[data-words] {
	overflow: hidden;
}

[data-words]:after {
	display: none !important;
}

.anim-line {
	position: absolute;
	width: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	margin: 0 auto;
	border-radius: 5px;
	background: #ee7000;
	-webkit-transition: opacity .3s linear, width .3s .4s;
	transition: opacity .3s linear, width .3s .4s;
}

.anim-line.line-active {
	opacity: 1;
}

.text-anim-item {
	white-space: nowrap;
	position: absolute;
	left: 50%;
	top: 0;
	-webkit-transform: translate3d(0, -120%, 0);
	transform: translate3d(0, -120%, 0);
}

.text-anim-item.anim-in {
	-webkit-transform: translate3d(-50%, -120%, 0);
	transform: translate3d(-50%, -120%, 0);
	-webkit-animation: textAnimInCenter .6s .3s forwards;
	animation: textAnimInCenter .6s .3s forwards;
}

.text-anim-item.anim-out {
	-webkit-transform: translate3d(-50%, 0%, 0);
	transform: translate3d(-50%, 0%, 0);
	-webkit-animation: textAnimOutCenter .6s  forwards;
	animation: textAnimOutCenter .6s  forwards;
}

@-webkit-keyframes textAnimIn {
	0% {
		-webkit-transform: translate3d(0, -120%, 0);
		transform: translate3d(0, -120%, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0%, 0);
		transform: translate3d(0, 0%, 0);
	}
}

@keyframes textAnimIn {
	0% {
		-webkit-transform: translate3d(0, -120%, 0);
		transform: translate3d(0, -120%, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 0%, 0);
		transform: translate3d(0, 0%, 0);
	}
}

@-webkit-keyframes textAnimOut {
	0% {
		-webkit-transform: translate3d(0, 0%, 0);
		transform: translate3d(0, 0%, 0);
	}

	50% {
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 120%, 0);
		transform: translate3d(0, 120%, 0);
	}
}

@keyframes textAnimOut {
	0% {
		-webkit-transform: translate3d(0, 0%, 0);
		transform: translate3d(0, 0%, 0);
	}

	50% {
		-webkit-transform: translate3d(0, -20%, 0);
		transform: translate3d(0, -20%, 0);
	}

	100% {
		-webkit-transform: translate3d(0, 120%, 0);
		transform: translate3d(0, 120%, 0);
	}
}

@-webkit-keyframes textAnimInCenter {
	0% {
		-webkit-transform: translate3d(-50%, -120%, 0);
		transform: translate3d(-50%, -120%, 0);
	}

	100% {
		-webkit-transform: translate3d(-50%, 10%, 0);
		transform: translate3d(-50%, 10%, 0);
	}
}

@keyframes textAnimInCenter {
	0% {
		-webkit-transform: translate3d(-50%, -120%, 0);
		transform: translate3d(-50%, -120%, 0);
	}

	100% {
		-webkit-transform: translate3d(-50%, 10%, 0);
		transform: translate3d(-50%, 10%, 0);
	}
}

@-webkit-keyframes textAnimOutCenter {
	0% {
		-webkit-transform: translate3d(-50%, 0%, 0);
		transform: translate3d(-50%, 0%, 0);
	}

	50% {
		-webkit-transform: translate3d(-50%, -20%, 0);
		transform: translate3d(-50%, -20%, 0);
	}

	100% {
		-webkit-transform: translate3d(-50%, 120%, 0);
		transform: translate3d(-50%, 120%, 0);
	}
}

@keyframes textAnimOutCenter {
	0% {
		-webkit-transform: translate3d(-50%, 0%, 0);
		transform: translate3d(-50%, 0%, 0);
	}

	50% {
		-webkit-transform: translate3d(-50%, -20%, 0);
		transform: translate3d(-50%, -20%, 0);
	}

	100% {
		-webkit-transform: translate3d(-50%, 120%, 0);
		transform: translate3d(-50%, 120%, 0);
	}
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                 */
/* ---------------------------------------------------------------------- */

.footercard {
  text-align: right;
  color: #fff;
  font-family: "Handel Gothic ITC W01 Italic";
  font-size: 0.8em;
  margin: 0 20px 5px 0;
}

.footercard a {
  color: #fff;
  text-decoration: none;
}

footer {
  bottom: 0;
  max-width: 1920px;
  width: 100%;
  border-right: 1px solid #ffffff;
}

.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
}

.contact {
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid #ffffff;
}

.digitalagentur {
  position: relative;
  width: 25%;
  transition: background-color 2s ease-out;
}

.digitalagentur:hover {
  background:rgb(145, 68, 232)
}

.digitalagentur h3 {
  text-align: center;
  color: #fff;
}

.digitalagentur a {
  text-align: center;
  color: #fff;
  display:block;
  text-decoration: none;
}

.mantastic {
  position: relative;
  width: 25%;
  transition: background-color 2s ease-out;
}

.mantastic:hover {
  background:rgba(68, 210, 232, 1.0);
}

.mantastic h3 {
  text-align: center;
  color: #fff;
}

.mantastic a {
  text-align: center;
  color: #fff;
  display:block;
  text-decoration: none;
}

.bintra {
  position: relative;
  width: 25%;
  transition: background-color 2s ease-out;
}

.bintra:hover {
  background:rgba(233, 85, 67, 1.0)
}

.bintra h3 {
  text-align: center;
  color: #fff;
}

.bintra a {
  text-align: center;
  color: #fff;
  display:block;
  text-decoration: none;
}

.address {
  position: relative;
  width: 25%;
  transition: background-color 2s ease-out;
}

.address h3 {
  text-align: center;
  color: #fff;
}

.address:hover {
  background:rgba(67, 233, 156, 1.0);
}

.address a {
  text-align: center;
  color: #fff;
  display:block;
  text-decoration: none;
}

/* ---------------------------------------------------------------------- */
/* Impressum                                                              */
/* ---------------------------------------------------------------------- */

.leftimprint {
  text-align: right;
  margin: 150px 25px 50px 25px;
}

.rightimprint {
  margin: 150px 25px 50px 25px;
}

.leftimprint a, rightimprint a {
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Datenschutz                                                            */
/* ---------------------------------------------------------------------- */

.site {
  margin: 0;
  padding: 0;
  background: #23a6d5;
  background-size: 400% 400%;
  animation: gradient 25s ease infinite;
  color: #252525;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 500;
}

.privacy {
  margin: 150px 0 50px 0;
  padding: 0 25px 0 25px;
}

.privacy a {
 color: #fff;

}

/* ---------------------------------------------------------------------- */
/* AGB                                                                    */
/* ---------------------------------------------------------------------- */

.h1distance {
  height: 5.1em;
}

.download {
  display: flex;
  align-items:center; 
  margin-bottom: 2.0em;
}

img.pdf {
  width: 50px;
}

/* ---------------------------------------------------------------------- */
/* Kontakt                                                                */
/* ---------------------------------------------------------------------- */

button {
  font-family: "Handel Gothic ITC W01 Italic";
  font-style: normal;
  font-weight: 500;
  background-color: transparent;
  color: #fff;
  font-size: 1.0em;
  border: none;
  text-decoration: none;
  display: inline-block;
}

/* Overlay style */
.overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(67, 233, 156, 0.9);
  z-index: 1000;
}

/* Overlay closing cross */
.overlay .overlay-close {
	width: 80px;
	height: 80px;
	position: absolute;
	right: 20px;
	top: 20px;
	overflow: hidden;
	border: none;
	background: url(../img/cross.png) no-repeat center center;
	text-indent: 200%;
	color: transparent;
	outline: none;
	z-index: 100;
}

/* Menu style */
.overlay .getintouch {
	text-align: center;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
  display: flex;
}

.overlay .getintouchwrapper {
  max-width: 960px; 
  background-color: rgba(233, 85, 67, 1.0);
  margin: 0 auto;
  padding: 30px;
  border: 1px solid #fff;
  border-radius: 25px;
  display: flex;
}

.overlay .getintouchleft {
  width: 50%;
  text-align: right;
  border-right: 1px solid #fff;
}

.overlay .getintouchright {
  width: 50%;
  text-align: left;
}

.overlay h1 {
  padding-right: 15px;
}

.overlay h2 {
  padding-left: 15px;
  margin-top: 100px;
  text-shadow: 1px 1px 1px #252525;
}

.overlay p {
  padding-left: 15px;
}

.overlay a {
  color: #fff;
  text-decoration: none;
}

/* Effects */
.overlay-genie {
	background: transparent;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
	transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
}

.overlay-genie.open {
	visibility: visible;
	opacity: 1;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.overlay-genie svg {
	position: absolute;
	top: 0;
	left: 0;
}

.overlay-genie .overlay-path {
	fill: rgba(67, 233, 156, 0.9);
}

.overlay-genie .getintouch {
	opacity: 0;
	-webkit-transform: scale(0.8) translateY(-48%);
	transform: scale(0.8) translateY(-48%);
	-webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
	transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

.overlay-genie .overlay-close {
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.overlay-genie.open .getintouch,
.overlay-genie.open .overlay-close {
	opacity: 1;
	-webkit-transition-delay: 0.3s;
	transition-delay: 0.3s;
}

.overlay-genie.open .getintouch {
	-webkit-transform: scale(1) translateY(-50%);
	transform: scale(1) translateY(-50%);
}

.overlay-genie.close .getintouch,
.overlay-genie.close .overlay-close {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

@media screen and (max-height: 30.5em) {
	.overlay nav {
		height: 70%;
		font-size: 34px;
	}
	.overlay ul li {
		min-height: 34px;
	}
}


/* ---------------------------------------------------------------------- */
/* Viewports                                                              */
/* ---------------------------------------------------------------------- */

 /* Preselect */
 @media only screen and (max-width: 1920px) {
  .wrapper {
    border-left: 0px;
  }

  section {
    border-right: 0px;
  }

  footer {
    border-right: 0px;
  }

 /* Preselect */
 @media only screen and (max-width: 1600px) {
.text {
  padding: 0 50px 0 50px;
}

 /* Preselect */
 @media only screen and (max-width: 1500px) {
  .text {
    padding: 0 50px 0 50px;
  }

   /* Preselect */
 @media only screen and (max-width: 1400px) {
  section {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 100vh;
  }
  .left {
    width: 100%;
  }
  .right {
    width: 100%;
  }

  .imprint {
    margin: 0 0 50px 0;
  }

  .leftimprint {
    margin-top: 150px;
    padding: 0 25px 0 25px;
  }

  .rightimprint {
    padding: 0 25px 0 25px;
  }
  .digitalagentur, .mantastic, .bintra, .address {
    flex: 50%;
  }
}

 /* Extra large devices (large laptops and desktops, 1200px and up) */
 @media only screen and (max-width: 1200px) {
  body {
    background-size: 800% 800%;
  }
  .overlay .getintouchwrapper {
    width: 90%;
  }

  header {
    position: relative;
  }
  .left {
    position: relative;
    width: 100%;
  }
  .right {
    width: 100%;
    float: right;
  }
  #blob canvas {
    margin-top: 10%;
    width: 800px;
  }
  .icon-circle {
    margin-top: -150px;
    margin-left: -240px;
}
  .contact {
    position: relative;
    width: 100%;
  }
} 

 /* Large devices (laptops/desktops, 992px and up) */
 @media only screen and (max-width: 992px) {
  .text {
    padding: 0 20px 0 20px;
  }  
}

 /* Preselect */
 @media only screen and (max-width: 850px) {
  .contact {
    flex-direction: column;
  }

  .digitalagentur, .mantastic, .bintra, .address {
    width: 100%;
  }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (max-width: 768px) {
  body {
    background-size: 800% 800%;
}
  .overlay .getintouchwrapper {
    flex-flow: column;
  }

  .overlay .getintouchleft {
    width: 100%;
    border-right: 0px;
    border-bottom: 1px solid #fff;
  }

  .overlay .getintouchright {
    width: 320px;
    margin: 0 auto;
  }

  .overlay h2 {
    margin-top: 30px;
  }

  .brand {
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
  }

  .branding {
    border-bottom: 0px;
  }

  .anniversary img {
    width: 100px;
    position: relative;
    display: blocK;
    margin: 0 auto;
  }

  .imagemark {
    height: 40px;
    margin: 8px 3px 20px 0;
  }

  .wordmark {
    float: none;
  }
  .card {
    float: none;
    align-items: center;
    width: 75%;
    margin: 0 auto;
  }
  .businesscard {
    text-align: center;
    margin: 0 0px 0 0;
}
  h1.wordmark {
    text-align: center;
    margin: 20px 0px 20px 0;
  }
  .logoline {
    float: none;
    border-bottom: 1px solid #d9d9d6;
    width: 75%;
    margin: 0 auto;
  }
  #blob canvas {
    width: 800px;
    margin-top: 7px;
  }

  .icon-circle {
    margin-top: -250px;
  }

  h2.top {
    margin-top: 0vh;
  }

}

   /* Preselect */
@media only screen and (max-width: 700px) {
  .icon-circle {
    margin-top: -200px;
    margin-left: -180px;
}
  img.icon-blue, img.icon-green, img.icon-purple, img.icon-orange, img.icon-red {
    width: 200px;
  }
  img.icon-blue {
    animation-delay: 3s;
    transform: rotate(-110deg) translate(13em) rotate(110deg);
    z-index: 110;
  }
  
  img.icon-green {
    animation-delay: 5s;
    transform: rotate(-182deg) translate(13em) rotate(182deg);
    z-index: 120;
  }
  
  img.icon-purple {
    animation-delay: 4s;
    transform: rotate(-254deg) translate(13em) rotate(254deg);
    z-index: 130;
  }
  
  img.icon-orange {
    animation-delay: 3.5s;
    transform: rotate(-326deg) translate(13em) rotate(326deg);
    z-index: 140;
  }
  
  img.icon-red {
    animation-delay: 4.5s;
    transform: rotate(-38deg) translate(13em) rotate(38deg);
    z-index: 150;
  }
}

 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .imagemark {
    height: 30px;
    margin: 12px 0px 20px 0;
  }
  h1.wordmark {
    font-size: 2.0em;
    margin: 20px 0px 7px 0;
  }
  p.more {
    display: none;
  }
}

   /* Preselect */
   @media only screen and (max-width: 550px) {
    h1, h1 {
      font-size: 1.6em;
    }

    h1.wordmark {
      font-size: 1.5em;
      margin: 20px 0px 7px 0;
    }
    #blob {
      margin-top: 100px;
    }
    .icon-circle {
        margin-top: -150px;
        margin-left: -140px;
    }
    img.icon-blue, img.icon-green, img.icon-purple, img.icon-orange, img.icon-red {
      width: 150px;
    }
    img.icon-blue {
      animation-delay: 3s;
      transform: rotate(-110deg) translate(9em) rotate(110deg);
      z-index: 110;
    }
    
    img.icon-green {
      animation-delay: 5s;
      transform: rotate(-182deg) translate(9em) rotate(182deg);
      z-index: 120;
    }
    
    img.icon-purple {
      animation-delay: 4s;
      transform: rotate(-254deg) translate(9em) rotate(254deg);
      z-index: 130;
    }
    
    img.icon-orange {
      animation-delay: 3.5s;
      transform: rotate(-326deg) translate(9em) rotate(326deg);
      z-index: 140;
    }
    
    img.icon-red {
      animation-delay: 4.5s;
      transform: rotate(-38deg) translate(9em) rotate(38deg);
      z-index: 150;
    }
    .text {
      margin: 200px 0 50px 0;
    }
  }