/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */
 
/* Carousel base class */
.carousel {
  height: 680px;
  margin-bottom: 0;
  max-width:1100px;
  margin-right:auto;
  margin-left:auto;
  overflow:hidden;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
}
 
/* Declare heights because of positioning of img element */
.carousel .item {
  /*height: 500px;
 
  background-color: #999;*/
}
 
#myCarousel .container{width:100%; padding:0 20px;}
.carousel-inner > .item > img {
    top: 0;
    left: 0;
    margin-right:auto;
    margin-left:auto;   
}
.carousel-inner {
    position: relative;
    width: 90%;
    overflow: visible;
    margin-right: auto;
    margin-left: auto;
    }
    
.carousel-control{
position: absolute;
width:50px; 
height:80px; 
background-color: #EFB606; 
top:50%;
margin-top: -40px; 
opacity:1;
text-shadow:none; 
}
 
.carousel-control img{
    display:block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 44%;
    width: 26px;
    height: 34px; }
.carousel-control:hover{opacity:1;}
.carousel-control.left,.carousel-control.right
 {background-image:none;}
 
 .glyphicon{
 top:30%;
 font-size: 30px;
 font-weight:bold;
 }
   
.slider-bg {
    position: absolute;
    margin-top: 170px;
    width: 78%;
    right: 0;
}
.slider-bg img{width:100%}
 
/*.slider1 .slider-bg {
    width:100%
}*/
 
.slider1 .Graphic1{
    position:absolute;
    width: 55%;
    right: 0;
    margin-top: 0;
    }
    
.slider1 .Graphic2{
    position: absolute;
    margin-top: 30%;
    width: 40%;
    right: 40%;
}
    
.mobile-slider img{max-width:100%;} 
 /* .slide2 {
  background: url(slider/slide-2-mit-rand.png) no-repeat;
    background-size: 70%;
    background-position: 90% 50%;}*/
 
/*.slide3 {
    background: url(slider/slide-3-mit-rand.png) no-repeat;
    background-size: 70%;
    background-position: 56% 68%;
}*/
    
.slider-text{
    position:absolute;
    width:450px;
    z-index: 10;
}   
    
    
.grey-box  {
    position:absolute;
    display:block;
    background-color: #dadada;
    margin-top:10px;
    padding: 10px;
    width:320px;
    z-index:10;
}
.slick-slide {
    min-height: 600px;
}
.slider-text p{font-size:14px;}
 
  .slider-text.video-slider{
  position:static; margin:0 auto;
  }
    .slider-text.video-slider li{
    list-style-type: none;
    text-align: center;
}
 .video-slider .video-modal-btn{display:none;}
 #video-slide{margin-top:150px;}
 

 /*germany carousel */
.germany .slider4.slider-bg, 
.germany .slider5.slider-bg,
.germany .slider6.slider-bg {
    position: absolute;
    margin-top: 0;
	width: 40%;
    right: 20px;
}   

.germany .slider1 .Graphic1 {
    width:auto;
    margin-top: 230px;
}
.germany .slider2.slider-bg {
    margin-top: 230px;
} 

.germany .slider4.slider-text,
.germany .slider5.slider-text,
.germany .slider6.slider-text {
    max-width: 450px;
    width: 50%;
}

.germany .slider4.slider-bg img,
.germany .slider5.slider-bg img, 
.germany .slider6.slider-bg img  {
    width: auto;
    max-height: 600px;
}
/*end germany carousel */

/* RESPONSIVE CSS
-------------------------------------------------- */
 
@media (max-width: 768px) {
.carousel {
    height: auto;
    min-height:500px;
    }
    
 .carousel-inner {
    width: auto;
    margin-right: 50px;
    margin-left: 50px;
}
 
 .grey-box {
    position:static;
    width: auto;
}
 .slider-text{
 position:static;
    width:auto;
}   
 
.slider1 .Graphic2.slider-bg {
position:static;
 
    right:auto;
    margin:0 auto;
    width:85%;   
}
.slider1 .Graphic1  {
position:static;
 
    right:auto;
    margin:0 auto;
    width:85%;
    
}
 
 
 
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 1.4;
  }
  
  .no-switch.desktop-only{display:block;}


   /* germany carousel */
.germany .mobile-slider img {
    width: 100%;
    margin: 0 auto;
}
.germany .slider4.slider-text,
.germany .slider5.slider-text,
.germany .slider6.slider-text {
    width: 100%;
}
.germany .slider1 .Graphic1 {
    margin-top:0;
}
/* end germany carousel */


}


/* -----------------------Challenge CARDS carousel-------------------------------------------*/


/* Carousel base class */

.Block-Footer{
	position: absolute;
    bottom: 40px;
    z-index: 25;
    margin-left: 40px;
	width:40%;
	color:#fff;
}
.item-main-image{position:absolute; right:0;}
.item-action-btn {
	z-index: 20;
    position: absolute;
    left: 50%;
	margin-left:-111px;
	margin-top:25%;
	
	}
	
#myCards .item-main-content h3{margin-bottom:25px; margin-top:0;font-size:30px;}
#myCards .item-main-content h4{line-height: 1.2; font-size:18px;}
#myCards .item-description{font-size:16px;}
#myCards .card-footnote{font-size:15px;}
#myCards .cleancontentarea{height:690px;}
#myCards .carousel-inner {

    width: 100%;

}

#myCards{ margin: 0 auto; max-width:none;}
#myCards.carousel {

  margin-bottom: 0;
}
.content #myCards .Block-Footer p {
    line-height: 130%;
}
#myCards.carousel .item{height: 700px; background-color:#4abdad!important;}
 
 #myCards .item{max-width:100%;}/* width adjustment for home page card*/
 #myCards .item ~ .item{max-width:950px;  margin: 0 auto;}
 #myCards .card-divider{margin-right:50%;}

  /* Since positioning the image, we need to help out the caption */
#myCards .carousel-caption {
  z-index: 10;
  width:42%;
  padding:40px;
  left:0;
  top:0;
  text-align:left;
  text-shadow: none;
  background-color: #4abdad;
  margin-left: 0;
}
  #myCards .carousel-caption p { font-size: 16px; line-height: 120%;}
  
 /* intro card  */ 
 
 .home > .red ~ .red {
    border: none;
}
 
  #myCards .item{max-width:100%;}
  #myCards .item ~ .item{max-width:950px; margin: 0 auto;}

 #myCards .intro-card .carousel-caption {
    background-color: #fff;
    margin-left: 0;
    width: 100%;
    z-index: 0;
    padding-left: 0;
    padding-right: 45%;
    margin-top: 0;
    padding-top: 0;
}

	#myCards .intro-card .item-action-btn {left:60%; margin-top: 35%;}
	#myCards .intro-card .Block-Footer {bottom:250px; margin-left: 0px; color:#000;}
	#myCards .intro-card .item-main-image {bottom:20px;}
	.content   #myCards .Block-Footer p { line-height: 130%;}

	#myCards .intro-card .item-main-content h3{color:#000;}
	#myCards .intro-card .item-main-content h4{color:#000; width:125%;}
	#myCards .intro-card .item-description{color:#000;}
	#myCards .intro-card .item-main-image-mobile{display:none;}
/* Declare heights because of positioning of img element */





#myCards .carousel-inner > .item > .card-image {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
}
#myCards .carousel-inner > .item > .card-image img{
  height:100%;

}
#myCards .btn-primary{background-color:#000;margin-bottom:0px;}

#myCards .item-main-content h4 {
    line-height: 1.2;
    font-size: 18px;
    width: 125%;
}
#myCards .item-main-content h3 {
    width: 125%;
}
#myCards .random-button{width:230px;  z-index:15;     z-index: 15;
    position: absolute;
    left: 50%;
margin-left: -111px;
top: 50%;
    margin-top: -111px;
	
	}

/* MARKETING CONTENT
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
  margin-bottom: 20px;
  text-align: center;
}
.marketing h2 {
  font-weight: normal;
}
.marketing .col-lg-4 p {
  margin-right: 10px;
  margin-left: 10px;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 80px 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  font-weight: 300;
  line-height: 1;
  letter-spacing: -1px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */


@media (max-width: 992px) {
	item-main-image-mobile
#myCards .intro-card .item-main-image-mobile{display:block;}
#myCards .intro-card .item-main-image{display:none;}
#myCards .intro-card .carousel-caption {padding-right:0;}	
#myCards .intro-card .item-action-btn {left: 50%; margin-top:-70%;}	

#myCards .item-main-image{position:static; max-width: 500px; padding:20px; margin: 0 auto;}
#myCards .item-main-image img{width:100%;}
#myCards .item-action-btn {position:absolute; margin-top:-100%;  }
#myCards .item-action-btn img{}
#myCards.carousel .item {background-color:#fff;}
#myCards .item-main-content h3{font-size:30px;}
#myCards .item-main-content h3,
#myCards .item-main-content h4{color:#000; width:100%;}
#myCards .item-description{color:#000;}
#myCards .card-divider{border-top: 1px solid #000; width:80%; margin-left:0;}
#myCards .Block-Footer{ position: static; text-align: center;}
#myCards .Block-Footer br{display:none;}
#myCards .card-footnote{color:#000;}
#myCards .Block-Footer p{color:#000;}
#myCards .Block-Footer{width:100%; padding:20px; margin-left:0;}

  
#myCards .carousel-caption {width:100%; position:static}  
#myCards.carousel {height: 1300px; max-width: 550px;}
#myCards.carousel .item {height: 1300px;}  
#myCards .carousel-caption{padding:20px; background-color:#fff;}
#myCards .carousel-caption img{margin: 0 auto;}
.random-button {
    width: 50%;
    z-index: 15;
    z-index: 15;
    position:absolute;
   /* margin-left:-25%;*/
    top: 20%;
    margin-top: auto;
}

#myCards .carousel-inner > .item > .card-image{height:auto;}
#myCards .carousel-inner > .item > .card-image img{width:100%;}
.random-button img {width:100%}
.random-button a
{
    display: block;
	position:absolute;
    margin: 0 auto;
}
}
@media (max-width: 768px){

#myCards .carousel-inner {
	 margin-right:0;
    margin-left: 0;
}



}

/*****************************TOP Image Carousel *********************************/

#topsection {position:relative;}
#topsection .container{width:100%; padding:0; height: 790px;}
#topsection .carousel-indicators{display:none;}
#topsection #desktop-navigation{position:absolute; z-index:10; width:90%; }
#topsection .container-fluid{position:relative; left:auto;}

#topsection .row{margin-right:0; margin-left:0;}
#topsection .navbar-nav{margin:10px 0;}
#topsection .carousel { max-width: none; height:800px;}
#topsection .anim-scroll img {
    opacity: 0.7;
	 margin-left: 20px;
}

#topsection .navbar>.container-fluid .navbar-brand {
    margin-left: 20%;
}
#topsection .slider1 .Graphic1 {
    
    width: auto;
    right: auto;
}
#topsection .slider-bg {
    position: static;
    margin-top: auto;
    width: auto;
    right: auto;
}
#topsection .scroll-down{z-index:11;}
#topsection .navbar {
    min-height: auto;
}
#topsection .carousel-control {
background-color: transparent;}
#topsection .navbar.navbar-default{margin:0;}

#topsection .carousel-inner {width: 100%;}

#topsection .desktop-only img{width:100%;}

#topsection .slider-text {
    position: absolute;
    z-index: 15;
    color: #fff;
    left: 50%;
    top: 150px;
    list-style-type:none;
}

#topsection .gray-play {
    display: block;
    position: absolute;
    width: 70px;
    top: 320px;
}

#topsection .gray-play img{width:60px;}
#topsection .media-block
{position: absolute;
    top: 450px;
    z-index: 20;
    left: 60%;
	width:500px;
}

@media (min-width: 769px) and (max-width: 1360px) {
#topsection .desktop-only img {
    height: 790px;
    width: auto;
}	
#topsection .navbar>.container-fluid .navbar-brand {
    margin-left: 0%;
}

#topsection #desktop-navigation{ width:95%; }
}



@media (min-width: 769px) and (max-width: 1160px) {
#topsection .slider-text {
    left: 50px;
}
#topsection #desktop-navigation {
    position: absolute;
    z-index: 10;
    right: 30px;
    left: 0;
}

#topsection .container-fluid {
    left: 30px;
}
#topsection .media-block {
    left: 28%;
}
}

@media (max-width: 768px) {
.imagefile	 img{width:100%;}
#topsection {height:1050px; background-color:#000;}
#topsection .carousel {
    height: 750px;
}
#topsection #desktop-navigation{position:absolute; }	
#topsection .carousel-inner {

    margin-left: 0;
}


#topsection .carousel-control {
    top: 25%;
}
#topsection .navbar-brand {
    top: 0;
}
#topsection .mobile-slider img {
    width: 100%;
}
#topsection  .scroll-down {
    position: absolute;
    bottom: 0px;
}

#topsection .anim-scroll img {
    margin-left: 0;
}
#topsection .container-fluid{margin-right:15px; margin-left:15px;}
#topsection .navbar.navbar-default{
    margin-top: 20px;
}
#topsection .container-fluid {
    background-color: transparent;
}
#topsection .media-block {
    left:auto;
    width: 100%;
	top: auto;
    position:static;
    
   
}
#topsection #desktop-navigation {
    right: auto;
    left: auto;
    width: 100%;
}
#topsection .container-fluid {
    left: auto;
}
.anim-scroll img {
    
     margin-left: auto; 
}
#topsection .slider-text {

    width: 100%;
    left: auto;
    top: 40%;
	padding:20px;
	text-align: center;
}

#topsection .gray-play {
    display: block;
    position: relative;
    top: -80px;
    margin: 0 auto;
}
#topsection .carousel {
    background-color:#000;
}
}

@media (max-width: 640px) {
#topsection {height:1150px;}
#topsection .carousel {
    height: 750px;}
}
/****************************END Top Image Carousel *****************************************************/