/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++ STARTBILD GANZES FENSTER +++++++++++++++++++++ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#head
   {
   background-image: url("../images/global/background.jpg");
   }
      	      	      	
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
   #content
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      align-content: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      padding-left: 2%;
      padding-right: 2%;
      padding-top: 1%;
      padding-bottom: 1%;
      background-color: rgb(255,255,255);
      overflow: hidden;
      }
      @media only screen and (min-width: 769px)
      	{
      	#content{width: 46%;}
      	}
      	      	      	
   #content_text
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      align-content: flex-start;
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
      }
      	      	      	
      #content_text h2
      	{
      	text-align: center;
      	}
      	      	      	
      #content_text p
      	{
      	text-align: justify;
      	}
      	      	      	
      	#content_text p sup
      	   {
      	   
      	   }
      	      	      	
      #content_text a
      	{
      	text-align: center;
      	}
      	      	      	
      #content_text #bild_rahmen
      	{
      	padding: 0;
      	text-align: center;
      	margin-left: auto;
      	margin-right: auto;
      	height: auto;
      	max-height: 350px;
      	width: auto;
      	max-width: 80%;
      	overflow: hidden;
      	}
      	      	      	
      #content_text img
      	{
      	height: auto;
      	max-height: 100%;
      	width: auto;
      	max-width: 100%;
      	-webkit-transition: transform 1.5s ease-in-out;
      	-moz-transition: transform 1.5s ease-in-out;
      	transition: transform 1.5s ease-in-out;
      	}
      	      	      	
      	#content_text img:hover
      	   {
      	   -moz-transform: scale(1.2, 1.2);
       	   -webkit-transform: scale(1.2, 1.2);
       	   -o-transform: scale(1.2, 1.2);
       	   -ms-transform: scale(1.2, 1.2);
      	   transform: scale(1.2, 1.2);
      	   -webkit-transition: transform 1.5s ease-in-out;
      	   -moz-transition: transform 1.5s ease-in-out;
      	   transition: transform 1.5s ease-in-out;
      	   }
      @media only screen and (min-width: 1200px)
      	{
      	.animate-left
      	   {
      	   padding-left: 10%;
      	   padding-right: 25%;
      	   }
      	.animate-right
      	   {
      	   padding-left: 25%;
      	   padding-right: 10%;
      	   }
      	}
      	      	      	
   #content_special
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      align-content: center;
      -webkit-justify-content: center;
      justify-content: center;
      width: 100%;
      min-height: 50%;
      background-position: center;
      -moz-background-size: cover;
      -o-background-size: cover;
      -webkit-background-size: cover;
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      }
      	      	      	
   #content_special_text
      {
      display: -webkit-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-align-items: center;
      align-items: center;
      align-content: center;
      -webkit-justify-content: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.5);
      }
      	      	      	
      #content_special_text p
      	{padding: 2%;
      	text-align: center;
      	font-size: 150%;
      	font-weight: bold;
      	color: rgb(255,255,255);
      	text-shadow: -2px -2px 2px rgb(0,0,0), -2px 2px 2px rgb(0,0,0), 2px -2px 2px rgb(0,0,0), 2px 2px 2px rgb(0,0,0);
      	}
      	      	      	
      	#content_special_text p sup
      	   {
      	   font-style: italic;
      	   font-size: 60%;
      	   font-weight: normal;
      	   color: rgb(0,0,0);
      	   text-shadow: -1px -1px 1px rgb(255,255,255), -1px 1px 1px rgb(255,255,255), 1px -1px 1px rgb(255,255,255), 1px 1px 1px rgb(255,255,255);
      	   }
      	      	      	
      #content_special_text img
      	{
      	height: auto;
      	max-height: 350px;
      	width: auto;
      	max-width: 80%;
      	}
      	      	      	
/* ------------------------------------------------------------------------- */
/* ------------------------------- Animation ------------------------------- */
/* ------------------------------------------------------------------------- */
.animate-right
   {
   opacity: 0;
   visibility: hidden;
   transform: translate(-200px, 0)
   }
      	      	      	
   .animate-right.animated
      {
      opacity: 1;
      visibility: visible;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transition: -webkit-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
      -moz-transition: -moz-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
      transition: transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms
      }
      	      	      	
.animate-left
   {
   opacity: 0;
   visibility: hidden;
   transform: translate(200px, 0)
   }
      	      	      	
   .animate-left.animated
      {
      opacity: 1;
      visibility: visible;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: rotate(0, 0);
      -moz-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transition: -webkit-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
      -moz-transition: -moz-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
      transition: transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms
      }
      	      	      	
.animate-up
   {
   opacity: 0;
   visibility: hidden;
   -webkit-transform: translate(0, 100px);
   -moz-transform: translate(0, 100px);
   transform: translate(0, 100px)
   }
      	      	      	
   .animate-up.animated
      {
      opacity: 1;
      visibility: visible;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-transform: translate(0, 0);
      -moz-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transition: -webkit-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
      -moz-transition: -moz-transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms;
      transition: transform 800ms ease-out 200ms, opacity 800ms ease-out 200ms
      }
      	      	      	
/* ################################################################################## */
/* ################################## MOBILE VERSION ################################## */
/* ################################################################################## */
@media only screen and (max-width: 768px)
   {
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* +++++++++++++++++++++++++ WEITERER INHALT +++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#container
   {
   
   }
      	      	      	
   #content
      {
      width: 96%;
      }
      	      	      	
      #content_text h2
      	{
      	text-align: center;
      	}
      	      	      	
      #content_text p
      	{
      	text-align: justify;
      	}
      	      	      	
      	#content_text p sup
      	   {
      	   
      	   }
      	      	      	
      #content_text img
      	{
      	height: auto;
      	max-height: 200px;
      	width: auto;
      	max-width: 90%;
      	}
      	      	      	
   #content_special
      {
      padding-left: 3%;
      padding-right: 3%;
      }
      	      	      	
   #content_special_text
      {
      background-color: rgb(53,145,232);
      padding-left: 3%;
      padding-right: 3%;
      padding-top: 10px;
      padding-bottom: 10px;
      }
      	      	      	
      #content_special_text p
      	{
      	text-align: center;
      	}
      	      	      	
      	#content_special_text p sup
      	   {
      	   text-align: right;
      	   text-style: italic;
      	   }
      	      	      	
      #content_special_text img
      	{
      	height: auto;
      	max-height: 200px;
      	width: auto;
      	max-width: 90%;
      	}
   }