@font-face { font-family: 'MyriadBold'; src: url('font/MyriadPro-Bold.otf') format('opentype'); }
@font-face { font-family: 'MyriadSemi'; src: url('font/MyriadPro-Semibold.otf') format('opentype'); }
@font-face { font-family: 'MyriadReg'; src: url('font/MyriadPro-Regular.otf') format('opentype'); }
@font-face { font-family: 'MyriadLight'; src: url('font/MyriadPro-Light.otf') format('opentype'); }
@font-face {font-family: 'MyriadBolSemiCon'; src: url('font/MyriadPro-BoldSemiCn.otf') format('opentype');}


.divider a:hover{color:#737373 !important; cursor:text; outline: none !important;}
.divider a{color:#737373 !important; cursor:text; outline: none !important;}
.divider a:active{color:#737373 !important; cursor:text; outline: none !important;}
.divider a:visited{color:#737373 !important; cursor:text; outline: none !important;}
 .caption{opacity:0; transition:all 0.2s ease-out;}
 .carousel-center .caption{opacity: 1; transition: all 0.3s ease-out;}
 
 .social{opacity:0; transition:all 0.2s ease-out;}
 .carousel-center .social{opacity: 1; transition: all 0.2s ease-out;}

 .appstore{opacity:0; transition:all 0.2s ease-out;}
 .carousel-center .appstore{opacity: 1; transition: all 0.2s ease-out;}

 .slider{opacity:0; transition:all 0.2s ease-out;}
 .carousel-center .slider{opacity: 1; transition: all 0.2s ease-out;}

 .dark{opacity:0.8; transition:all 0.2s ease; width:291px; height:593px; background:#000; position:absolute; left:0; border-radius:40px; z-index:11;}
 .carousel-center .dark{opacity: 0; transition: all 0.2s ease; width:291px; height:593px; background:#000; position:absolute; left:0; border-radius:40px; z-index:9;}
 
 .social-list{
	 left:-90px;
	 top:90px;
	 position:absolute;
	 list-style: none;
 }
 .social-list li {
	 margin-bottom:10px;	 
 }
 
 #outer2{
 margin:0;
 padding:0;
 width:300px;
 height:300px;
 position:relative;
 float: left;
 }

 #carousel {
   width:980px;
   height:800px;
   position:relative;
   clear:both;
   margin: 0 auto;
   top: 90px;
      }
 #carousel div {
  visibility:hidden; /* hide images until carousel can handle them */
  cursor:pointer; /* otherwise it's not as obvious items can be clicked */
  width:auto;
  }
 
  #item-1{float:left;}
  #item-2{float:left;}
  #item-3{float:left;}
  #item-4{float:left;}
  #item-5{float:left;}
  
 .plus{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:20; opacity:1; }
 .plus_magenta{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:10; opacity:0; }
 

 .plus2{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:20; opacity:1; }
 .plus_magenta2{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:10; opacity:0; }
  
 .plus3{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:20; opacity:1; }
 .plus_magenta3{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:10; opacity:0; }

 .plus4{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:20; opacity:1; }
 .plus_magenta4{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:10; opacity:0; }

 .plus5{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:20; opacity:1; }
 .plus_magenta5{margin-top:80px; margin-left:20px; float:left; position:absolute; z-index:10; opacity:0; }

 .plus3{margin-top:80px; margin-left:20px; float:left; position:absolute; }
 .plus4{margin-top:80px; margin-left:20px; float:left; position:absolute; }
 .plus5{margin-top:80px; margin-left:20px; float:left; position:absolute; }
 
 .box{width:400px; background:#fff; border-radius:5px; height:40px; display:none; overflow:hidden; margin: 0 0 10px; font-family: MyriadBold; font-size:25px;}
 .box p {display: inline !important; margin-top: 0; white-space: nowrap; line-height: 39px; padding: 10px;}
 
 .box2{width:400px; background:#fff; border-radius:5px; height:40px; display:none; overflow:hidden; overflow:hidden; margin: 0 0 10px;}
 .box2 p {display: inline !important; margin-top: 0; white-space: nowrap; line-height: 39px; padding: 10px;}
 
 .box3{width:400px; background:#fff; border-radius:5px; height:40px; display:none; overflow:hidden; overflow:hidden; margin: 0 0 10px;}
 .box3 p {display: inline !important; margin-top: 0; white-space: nowrap; line-height: 39px; padding: 10px;}
 
 .box4{width:400px; background:#fff; border-radius:5px; height:40px; display:none; overflow:hidden; overflow:hidden; margin: 0 0 10px;}
 .box4 p {display: inline !important; margin-top: 0; white-space: nowrap; line-height: 39px; padding: 10px;}
 
 .box5{width:400px; background:#fff; border-radius:5px; height:40px; display:none; overflow:hidden; overflow:hidden; margin: 0 0 10px;}
 .box5 p {display: inline !important; margin-top: 0; white-space: nowrap; line-height: 39px; padding: 10px;}
 
 #white-bar{height:3px; background: #fff; width:100%; margin-top:}
 #absolute{position:absolute; width:100%; top:0; z-index:250;}

 .navbar-nav{font-family: MyriadBolSemiCon; font-size:11px; text-transform:uppercase; letter-spacing:5px;}
           
            .text{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 7px 5px 0 8px !important; transition:background 250ms;}
            .text a {height: 17px; width:17px; display:inline-block; margin-top:-5px; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+-magenta.png) no-repeat; opacity:0; transition:opacity 250ms; outline:0;}
            .text a:hover{opacity:1; transition: opacity 250ms;}
            .text_pink{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 8.3px 5px 0 8px !important; opacity:0;}
            
            .text2{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 7px 5px 0 8px !important; transition:background 250ms;}
            .text2 a {height: 17px; width:17px; display:inline-block; margin-top:-5px; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+-magenta.png) no-repeat; opacity:0; transition:opacity 250ms; outline:0;}
            .text2 a:hover{opacity:1; transition: opacity 250ms;}
            .text_pink2{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 8.3px 5px 0 8px !important; opacity:0;}

            .text3{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 7px 5px 0 8px !important; transition:background 250ms;}
            .text3 a {height: 17px; width:17px; display:inline-block; margin-top:-5px; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+-magenta.png) no-repeat; opacity:0; transition:opacity 250ms; outline:0;}
            .text3 a:hover{opacity:1; transition: opacity 250ms;}
            .text_pink3{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 8.3px 5px 0 8px !important; opacity:0;}

            .text4{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 7px 5px 0 8px !important; transition:background 250ms;}
            .text4 a {height: 17px; width:17px; display:inline-block; margin-top:-5px; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+-magenta.png) no-repeat; opacity:0; transition:opacity 250ms; outline:0;}
            .text4 a:hover{opacity:1; transition: opacity 250ms;}
            .text_pink4{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 8.3px 5px 0 8px !important; opacity:0;}
            
            .text5{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 7px 5px 0 8px !important; transition:background 250ms;}
            .text5 a {height: 17px; width:17px; display:inline-block; margin-top:-5px; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+-magenta.png) no-repeat; opacity:0; transition:opacity 250ms; outline:0;}
            .text5 a:hover{opacity:1; transition: opacity 250ms;}
            .text_pink5{position: absolute; height: 17px; width:17px; display:block; text-align: center; vertical-align: middle; transform-origin: 50% 50%; background: url(../img/+_weiss.png) no-repeat; margin: 8.3px 5px 0 8px !important; opacity:0;}
            
            /*SOCIAL ICONS*/
            .facebook{width:34px; height:34px; background: url(../img/facebook1.png) no-repeat; overflow:hidden;}
            .twitter{width:34px; height:34px; background: url(../img/twitter1.png) no-repeat; overflow:hidden;}
            .youtube{width:34px; height:34px; background: url(../img/youtube1.png) no-repeat; overflow:hidden;}
            .instagram{width:34px; height:34px; background: url(../img/instagramm1.png) no-repeat; overflow:hidden;}


            .facebook a{width:34px; height:34px; display: inline-block; background: url(../img/facebook2.png) no-repeat; opacity:0; transition: opacity 500ms; outline:0;}
            .facebook a:hover{opacity:1; transition: opacity 500ms;}

            .twitter a{width:34px; height:34px; display: inline-block; background: url(../img/twitter2.png) no-repeat; opacity:0; transition: opacity 500ms; outline:0;}
            .twitter a:hover{opacity:1; transition: opacity 500ms;}

            .instagram a{width:34px; height:34px; display: inline-block; background: url(../img/instagramm2.png) no-repeat; opacity:0; transition: opacity 500ms; outline:0;}
            .instagram a:hover{opacity:1; transition: opacity 500ms;}

            .youtube a{width:34px; height:34px; display: inline-block; background: url(../img/youtube2.png) no-repeat; opacity:0; transition: opacity 500ms; outline:0;}
            .youtube a:hover{opacity:1; transition: opacity 500ms;}

.slider{
	position: absolute;
	top:70px;
	left:18px;
	z-index:10;
}

.slider ul{
	position:relative;
	list-style: none;
	padding: 0;
	margin: 0;
	height:450px;
}

.slider ul li {
	position: relative;
	display:block;
	float:left;
	width:255px;
	height:450px;
}

a.control_prev, a.control_next {
  position: absolute;
  top: 40%;
  z-index: 999;
  display: block;
  padding: 4% 3%;
  width: auto;
  height: auto;
  background: #2a2a2a;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 18px;
  opacity: 0.8;
  cursor: pointer;
}
a.control_next {
  right: 0;
}
.social {
	position: absolute;

}

/* use navbar-wrapper to wrap navigation bar, the purpose is to overlay navigation bar above slider */
        .navbar-wrapper {
            position: absolute;
            left: 0;
            width: 100%;
            height: 51px;
        }
        .navbar-wrapper > .container {
            padding: 0;
        }
         @media all and (min-device-width: 1920px){
        body{background:transparent; padding:0; margin:0; overflow-y:hidden; overflow-x:hidden;}
        }
        
        @media all and (min-device-width: 1024px) {
	    body{background:transparent; padding:0; margin:0; overflow-y:scroll; overflow-x:hidden;}
        }

        @media all and (max-width: 768px ){
            .navbar-wrapper {
                position: relative;
                top: 0px;
            }
        }