/* //// MOBIL-VIEWER ///// */



.vid-main-wrapper {
                          width: 100%;
                          max-width: 1400px;

                     /*     height:760px;         muss nicht angegeben werden */
                     /*     background: #FFFFFF;  muss nicht angegeben werden */

                          margin: 0 auto;

                          border:6px solid #AF00FF;       /*lila */
                  }






/*  VIEWER CONTAINER ############################### */

                  .vid-container {
                         position: relative;
                         width:460px;
                         margin-left: 10%;

                         float:left;

                         transform: rotate(0deg);

                         border-top:70px solid #000000;       /*Handy-rahmen */
                         border-left:10px solid #000000;
                         border-right:10px solid #000000;
                         border-bottom:90px solid #000000;
                         border-radius:40px;

                         margin-top: 10px;                    /*Fläche über und unter dem Handy */
                         margin-bottom: 50px;

                         background: #FFFFFF;                  /*damit outline-content auf weiß steht */

                         -moz-box-shadow: 15px 10px 25px rgba(0,0,0,0.15);
                         -webkit-box-shadow: 15px 10px 25px rgba(0,0,0,0.15);
                         box-shadow: 15px 10px 25px rgba(0,0,0,0.15);

                                 }



                         .vid-container iframe,
                         .vid-container object,
                         .vid-container embed {
                                         position: relative;
                                         top: 0;
                                         left: 0;
                                         width: 100%;
                                         height:760px;

                                         border:0px solid #FFDF00;       /*gelb */

                                         }





@media (max-width: 1200px) {

                        .vid-main-wrapper {
                                height:auto;

                        }

                        .vid-container {
                                padding-bottom: 0px;
                                width:460px;
                                height:920px;            /*verdrängt den listencontainer */

                                margin-left: calc(50% - 230px);
                                transform: scale(0.7);

                                margin-top: -140px;
                                margin-bottom: 0px;



                        }

                        .vid-container iframe,
                        .vid-container object,
                        .vid-container embed {

                                 width: 100%;
                                 height:760px;
                                 border:0px solid #00FF00;         /*green */
                         }



                        .vid-list-container {
                                padding-bottom: 20px;
                                width:100%;
                                height:460px;
                        }

}




@media (max-width: 860px) {

                        .vid-main-wrapper {
                                height:auto;

                        }

                        .vid-container {
                                padding-bottom: 0px;
                                width:460px;
                                height:920px;            /*verdrängt den listencontainer */

                                margin-left: calc(50% - 230px);
                                transform: scale(0.7);

                                margin-top: -100px;
                                margin-bottom: -100px;



                        }

                        .vid-container iframe,
                        .vid-container object,
                        .vid-container embed {

                                 width: 100%;
                                 height:760px;
                                 border:0px solid #00FF00;         /*green */
                         }



                        .vid-list-container {
                                padding-bottom: 20px;
                                width:100%;
                                height:460px;
                        }

}



@media (max-width: 600px) {

                        .vid-main-wrapper {
                                height:auto;

                        }

                        .vid-container {
                                padding-bottom: 0px;
                                width:600px;
                                height:1200px;            /*verdrängt den listencontainer */

                                margin-left: calc(50% - 300px);
                                transform: scale(0.5);

                                margin-top: -280px;
                                margin-bottom: -280px;



                        }

                        .vid-container iframe,
                        .vid-container object,
                        .vid-container embed {

                                 width: 100%;
                                 height:1040px;
                                 border:0px solid #00FF00;         /*green */
                         }



                        .vid-list-container {
                                padding-bottom: 20px;
                                width:100%;
                                height:460px;
                        }

}







/*  VIEWER PLAYLIST ############################### */

                 .vid-list-container {
                         width: 50%;
                         height:660px;
                         overflow: hidden;
                         background: #8F8F8F;
                         border-top:120px solid #DFDFDF;          /*Kopfbalken als Abstandhalter +PLUS+ margin-top des vid-containers*/
                         box-shadow: 0px 0px 0px #3F3F3F inset;   /*Innenschatten */
                         }

                 .vid-list-container:hover, .vid-list-container:focus { overflow-y: auto;
                         }

                 ol#vid-list {
                         margin:0;
                         padding:0;
                         background: none;

                         }

                 ol#vid-list li {
                         list-style: none;
                         }

                 ol#vid-list li a {
                         text-decoration: none;
                         background-color: none;
                         height:80px;
                         display:block;
                         padding:10px 0 10px 20px;
                         border-bottom:1px solid #DFDFDF;
                 }

                 ol#vid-list li a:hover {
                         background-color:#7F7F7F;

                 }

                .vid-thumb {
                         float:left;
                         margin-right: 10px;
                    /*     box-shadow: 3px 3px 5px #9F9F9F;        */
                }

                 .active-vid {
                         background:#3A3A3A;

                 }

                 #vid-list .desc {
                         font-family: 'Roboto', sans-serif;
                         font-size: 90%;
                         font-weight: 400;
                         letter-spacing: .03em;
                         color: #FFFFFF;
                         word-spacing: 0.1em;
                         line-height:160%;
                         margin-top:0em;

                         padding-left: 10px;
                         padding-right: 5px;

                 }


                 .imgfix {
                         width:100px;

                 }