/* CSS Document */

#dynamiccontent {
	float: left;
	width: 100%;
	margin-bottom: 30px;
}
#dynamiccontent div {
	float: left;
}
#dynamiccontent .row,
#dynamiccontent .text,
#dynamiccontent .bilder,
#dynamiccontent .dokumente,
#dynamiccontent .videos {
	width: 100%;
}
#dynamiccontent .row {
	margin-bottom: 0;
	box-sizing: border-box;
}
/*#dynamiccontent .row:nth-last-child(1) {
	margin-bottom: 0;
}*/


/* Dokumente */



/* Bilder */
#dynamiccontent img {
	max-width: 100%;
}
#dynamiccontent .bild {
	margin-bottom: 30px;
}
#dynamiccontent .bild.nocolumns {
	width: 340px;
	margin: 0 20px 20px 0;
}
#dynamiccontent .bild.nocolumns:nth-child(2n) {
	margin-right: 0;
}



/* Videos */
#dynamiccontent .videos{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -20px;
	margin-right: -20px;
	width: 100%;
	float: none !important;
}
#dynamiccontent .video{
	width: 50%;
	padding: 20px;
	box-sizing: border-box;
}
#dynamiccontent .video__iframe-wrapper{
	width: 100%;
	padding-bottom: 56.25%;
	position: relative;
}
#dynamiccontent .video__iframe-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}
#dynamiccontent .video__subline{
	margin-top: 7px;
	font-size: 0.9rem;
}

#dynamiccontent .video img {
	max-width: 100%;
}
#dynamiccontent .video {
	margin-bottom: 20px;
}
#dynamiccontent .video.adjust.nocolumns {
	margin: 0 20px 20px 0;
	width: 100%;
	height: 378px;
	background-image: url('/modules/DynamicContent/images/video.png');
	background-position: bottom right;
	background-repeat: no-repeat;
}
#dynamiccontent .video.adjust.nocolumns:nth-child(n) {
	margin-right: 0;
}
#dynamiccontent .video.adjust.nocolumns.fancybox {
	height: auto;
}
/* Videos-iframe */
#dynamiccontent .video a {
	position: relative;
    float: left;
	width: 100%;
}
#dynamiccontent .video.adjust.nocolumns img {
	width: 100%;
}
#dynamiccontent .video .play {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 60px; /* Workaround da sonst top: -50% nicht geht? */
}
#dynamiccontent .video .play img {
    position: relative;
    left: -50%;
    top: -50%;
}
#dynamiccontent .video.columns iframe {
	width: 100%;
	height: 100%;
}

#dynamiccontent .video div {
	float: none;
}



/* Google Maps */
#google_maps {
	width: 100%;
	height: 400px;
}
#googlemaps_link {
	clear: left;
}



/**************************************************************************************************
 * 
 * #Media Queries
 * 
 *************************************************************************************************/
/**************************************************************************************************
 * Browser normal
 * 
 * Greater than 959 ()
 *************************************************************************************************/
@media only screen and (max-width: 1199px) {
}



/**************************************************************************************************
 * Browser schmal
 * Smartphone Landscape
 * Smartphone Portrait
 * 
 * Smaller than standard 960 (devices and browsers)
 *************************************************************************************************/
@media only screen and (max-width: 959px) {


}



/**************************************************************************************************
 * Browser schmal
 * 
 * Tablet Portrait size to standard 960 (devices and browsers)
 *************************************************************************************************/
@media only screen and (min-width: 768px) and (max-width: 959px) {

}



/**************************************************************************************************
 * Smartphone Landscape
 * Smartphone Portrait
 * 
 * All Mobile Sizes (devices and browser)
 *************************************************************************************************/
@media only screen and (max-width: 767px) {

	#dynamiccontent .video.adjust.columns > div,
	#dynamiccontent .video.adjust.nocolumns > div,
	#dynamiccontent .video.adjust.columns > div > div,
	#dynamiccontent .video.adjust.nocolumns > div > div {
		height: 237px !important;
	}
	#google_maps_d {
		height: 250px;
	}
	#dynamiccontent .video{
		width: 100%;
	}
}



/**************************************************************************************************
 * Smartphone Landscape
 * 
 * Mobile Landscape Size to Tablet Portrait (devices and browsers)
 *************************************************************************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {

}



/**************************************************************************************************
 * Smartphone Portrait
 * 
 * Mobile Portrait Size to Mobile Landscape Size (devices and browsers)
 *************************************************************************************************/
@media only screen and (max-width: 479px) {


}










/**************************************************************************************************
 * 
 * Bilder-/Videohöhe in Relation zu Breite
 * & inline-Bild
 * 
 *************************************************************************************************/
#dynamiccontent .bild.alpha,
#dynamiccontent .video.alpha{
	clear: left;
}
#dynamiccontent .bild.adjust,
#dynamiccontent .video.adjust {
	overflow: hidden;
}
#dynamiccontent .bild.adjust img,
#dynamiccontent .video.adjust img {
	width: 100%;
}
#dynamiccontent .bild_outer {
	position: relative;
	top: 50%;
}
#dynamiccontent .bild_middle {
	height: 1000px;
	position: relative;
	top: -500px
}
#dynamiccontent .bild_inner {
	height: 1000px;
	display: table-cell;
	vertical-align: middle;
	float: none;
}
/* Browser breit */
/*@media only screen and (min-width: 960px) {*/
	#dynamiccontent .bild.adjust.one      , #dynamiccontent .video.adjust.one      {height:  22px;}
	#dynamiccontent .bild.adjust.two      , #dynamiccontent .video.adjust.two      {height:  56px;}
	#dynamiccontent .bild.adjust.three    , #dynamiccontent .video.adjust.three    {height:  90px;}
	#dynamiccontent .bild.adjust.four     , #dynamiccontent .video.adjust.four     {height: 123px;}
	#dynamiccontent .bild.adjust.five     , #dynamiccontent .video.adjust.five     {height: 157px;}
	#dynamiccontent .bild.adjust.six      , #dynamiccontent .video.adjust.six      {height: 191px;}
	#dynamiccontent .bild.adjust.seven    , #dynamiccontent .video.adjust.seven    {height: 225px;}
	#dynamiccontent .bild.adjust.eight    , #dynamiccontent .video.adjust.eight    {height: 258px;}
	#dynamiccontent .bild.adjust.nine     , #dynamiccontent .video.adjust.nine     {height: 292px;}
	#dynamiccontent .bild.adjust.ten      , #dynamiccontent .video.adjust.ten      {height: 326px;}
	#dynamiccontent .bild.adjust.eleven   , #dynamiccontent .video.adjust.eleven   {height: 360px;}
	#dynamiccontent .bild.adjust.twelve   , #dynamiccontent .video.adjust.twelve   {height: 393px;}
	#dynamiccontent .bild.adjust.thirteen , #dynamiccontent .video.adjust.thirteen {height: 427px;}
	#dynamiccontent .bild.adjust.fourteen , #dynamiccontent .video.adjust.fourteen {height: 461px;}
	#dynamiccontent .bild.adjust.fifteen  , #dynamiccontent .video.adjust.fifteen  {height: 495px;}
	#dynamiccontent .bild.adjust.sixteen  , #dynamiccontent .video.adjust.sixteen  {height: 528px;}
/*}*/
/* Browser schmal - Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
	#dynamiccontent .bild.adjust.one      , #dynamiccontent .video.adjust.one      {height:  15px;}
	#dynamiccontent .bild.adjust.two      , #dynamiccontent .video.adjust.two      {height:  42px;}
	#dynamiccontent .bild.adjust.three    , #dynamiccontent .video.adjust.three    {height:  69px;}
	#dynamiccontent .bild.adjust.four     , #dynamiccontent .video.adjust.four     {height:  96px;}
	#dynamiccontent .bild.adjust.five     , #dynamiccontent .video.adjust.five     {height: 123px;}
	#dynamiccontent .bild.adjust.six      , #dynamiccontent .video.adjust.six      {height: 150px;}
	#dynamiccontent .bild.adjust.seven    , #dynamiccontent .video.adjust.seven    {height: 177px;}
	#dynamiccontent .bild.adjust.eight    , #dynamiccontent .video.adjust.eight    {height: 204px;}
	#dynamiccontent .bild.adjust.nine     , #dynamiccontent .video.adjust.nine     {height: 231px;}
	#dynamiccontent .bild.adjust.ten      , #dynamiccontent .video.adjust.ten      {height: 285px;}
	#dynamiccontent .bild.adjust.eleven   , #dynamiccontent .video.adjust.eleven   {height: 385px;}
	#dynamiccontent .bild.adjust.twelve   , #dynamiccontent .video.adjust.twelve   {height: 312px;}
	#dynamiccontent .bild.adjust.thirteen , #dynamiccontent .video.adjust.thirteen {height: 339px;}
	#dynamiccontent .bild.adjust.fourteen , #dynamiccontent .video.adjust.fourteen {height: 366px;}
	#dynamiccontent .bild.adjust.fifteen  , #dynamiccontent .video.adjust.fifteen  {height: 393px;}
	#dynamiccontent .bild.adjust.sixteen  , #dynamiccontent .video.adjust.sixteen  {height: 420px;}
}
/* Smartphone Landscape - Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#dynamiccontent .bild.adjust.one      , #dynamiccontent .video.one      ,
	#dynamiccontent .bild.adjust.two      , #dynamiccontent .video.two      ,
	#dynamiccontent .bild.adjust.three    , #dynamiccontent .video.three    ,
	#dynamiccontent .bild.adjust.four     , #dynamiccontent .video.four     ,
	#dynamiccontent .bild.adjust.five     , #dynamiccontent .video.five     ,
	#dynamiccontent .bild.adjust.six      , #dynamiccontent .video.six      ,
	#dynamiccontent .bild.adjust.seven    , #dynamiccontent .video.seven    ,
	#dynamiccontent .bild.adjust.eight    , #dynamiccontent .video.eight    ,
	#dynamiccontent .bild.adjust.nine     , #dynamiccontent .video.nine     ,
	#dynamiccontent .bild.adjust.ten      , #dynamiccontent .video.ten      ,
	#dynamiccontent .bild.adjust.eleven   , #dynamiccontent .video.eleven   ,
	#dynamiccontent .bild.adjust.twelve   , #dynamiccontent .video.twelve   ,
	#dynamiccontent .bild.adjust.thirteen , #dynamiccontent .video.thirteen ,
	#dynamiccontent .bild.adjust.fourteen , #dynamiccontent .video.fourteen ,
	#dynamiccontent .bild.adjust.fifteen  , #dynamiccontent .video.fifteen  ,
	#dynamiccontent .bild.adjust.sixteen  , #dynamiccontent .video.sixteen  {height: 236px;}
}
/* Smartphone Portrait - Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	#dynamiccontent .bild.adjust.one      , #dynamiccontent .video.one      ,
	#dynamiccontent .bild.adjust.two      , #dynamiccontent .video.two      ,
	#dynamiccontent .bild.adjust.three    , #dynamiccontent .video.three    ,
	#dynamiccontent .bild.adjust.four     , #dynamiccontent .video.four     ,
	#dynamiccontent .bild.adjust.five     , #dynamiccontent .video.five     ,
	#dynamiccontent .bild.adjust.six      , #dynamiccontent .video.six      ,
	#dynamiccontent .bild.adjust.seven    , #dynamiccontent .video.seven    ,
	#dynamiccontent .bild.adjust.eight    , #dynamiccontent .video.eight    ,
	#dynamiccontent .bild.adjust.nine     , #dynamiccontent .video.nine     ,
	#dynamiccontent .bild.adjust.ten      , #dynamiccontent .video.ten      ,
	#dynamiccontent .bild.adjust.eleven   , #dynamiccontent .video.eleven   ,
	#dynamiccontent .bild.adjust.twelve   , #dynamiccontent .video.twelve   ,
	#dynamiccontent .bild.adjust.thirteen , #dynamiccontent .video.thirteen ,
	#dynamiccontent .bild.adjust.fourteen , #dynamiccontent .video.fourteen ,
	#dynamiccontent .bild.adjust.fifteen  , #dynamiccontent .video.fifteen  ,
	#dynamiccontent .bild.adjust.sixteen  , #dynamiccontent .video.sixteen  {height: 168px;}
}
