/* ###############################################  TESTAREA START ############### ########################################*/



/* #################################################  TESTAREA END #######################################################*/

.card-holder {  
  position: fixed;
  width: 0px;
  overflow: visible;
}

.card-wrapper {
  display: inline-block;
  float: right;
  clear: both;
}

.card {
  position: relative;
  left: 32px;
  padding: 16px 32px 16px 64px;
  margin: 8px;  
  x-box-shadow: 0 0 8px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 8px 0 8px -8px rgba(0, 0, 0, 0.5);
  background: #fff;
  transition: all 0.3s ease-in-out 0.1s;
}

.card:hover {
  position: relative;
  left: 100%;
  margin-left: -32px;
  box-shadow: 
    0 -8px 8px -8px rgba(0, 0, 0, 0.5),
    0 8px 8px -8px rgba(0, 0, 0, 0.5);
  transition: all 0.3s ease-in-out;
}

.card-content {
  display: inline-block;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}

.bg-01 { background: #539770; }
.bg-02 { background: #4B7D74; }
.bg-03 { background: #8DC2BC; }
.bg-04 { background: #EDD6B4; }
.bg-05 { background: #BE7467; }
.bg-06 { background: #E2AE63; }
/* #######################################  THIS PART WORK HARD FOR EUFRAK! #############################################*/

/*----------------------------------------------------- externe Links   ----------------------------------------------*/
a[target ="_blank"] {
padding-right: 22px;
background: transparent url(/content/lessons/_bilder/icons/links-target-blank.gif) no-repeat right;}

a.pdf-link {
padding-right: 20px;
background: transparent url(/content/lessons/_bilder/icons/pdf.gif) no-repeat right;}

a[href $=".pdf"] {
padding-right: 20px;
background: transparent url(/content/lessons/_bilder/icons/pdf.gif) no-repeat right;}

a[href $=".wmv"], a[href $=".avi"], a[href $=".mpeg"], a[href $=".mov"], a[href $=".flv"] {
padding-right: 20px;
background: transparent url(/content/lessons/_bilder/icons/movie.gif) no-repeat right;}

/*----------------------------------------------------- Accordion 4 x grey  ----------------------------------------------*/
/*Acco*/
.ac-container {
    max-width: 100%;
}

.ac-container label {
    height: 30px !important;
    line-height: 21px !important;
    font-size: 12px !important;
    font-family: 'Open Sans','Arial Narrow',Arial,sans-serif !important;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #fff;
    background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: linear-gradient(top,#fff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff',endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),1px 0 0 rgba(255,255,255,0.9) inset,0 2px 2px rgba(0,0,0,0.1);
    font-size: 12px;
    height: 30px;
    line-height: 20px;
}

.ac-container {
    width: 100%;
    margin: 10px auto 30px auto;
    text-align: left;
}

.ac-container label:hover {
    background: #fff;
}

.ac-container input:checked + label,.ac-container input:checked + label:hover {
    background: #f1f2f3;
    color: #666;
    text-shadow: 0 1px 1px rgba(255,255,255,0.6);
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3),0 2px 2px rgba(0,0,0,0.1);
    height: 30px;
    line-height: 21px;
    font-size: 13px;
}

.ac-container label:hover:after,.ac-container input:checked + label:hover:after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    right: 13px;
    top: 7px;
    background: transparent url(../images/arrow_down.png) no-repeat center center;
}

.ac-container input:checked + label:hover:after {
    background-image: url(../images/arrow_up.png);
}

.ac-container input {
    display: none;
}

.ac-container article {
    background: rgba(255,255,255,0.5);
    margin-top: -1px;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    height: 0;
    position: relative;
    z-index: 10;
    -webkit-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -moz-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -o-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    -ms-transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
    transition: height 0.3s ease-in-out,box-shadow 0.6s linear;
}

.ac-container article p {
    font-style: normal;
    color: #777;
    line-height: 23px;
    font-size: 10px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    font: normal normal 12px 'Open Sans';
}

.ac-container input:checked ~ article {
    -webkit-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -moz-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -o-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    -ms-transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    transition: height 0.5s ease-in-out,box-shadow 0.1s linear;
    box-shadow: 0 0 0 1px rgba(155,155,155,0.3);
}

.ac-container input:checked ~ article.ac-small {
    height: 100%;
}

.ac-container input:checked ~ article.ac-medium {
    height: 100%;
}

.ac-container input:checked ~ article.ac-large {
    height: 100%;
}
/*--------------------------------------------------------------------------------  Accordion 4 x grey  ENDE --------------------------------------------------------*/
/*-----------------------------------------------------------------------------------------------  lightbox -----------------------------------------------------------------*/
.lightbox2 {
    position: relative;
    left: 0px;
    top: 0px;
    bottom: 10px;
    z-index: auto;
}
.lightbox2-icon {
    position: relative;
    top: 10px;
    left: 10px;
    display: inline-block;
    background: url("/content/lessons/_bilder/icons/open_lightbox.png");
    background-repeat: no-repeat;
    background-position: top right;
    background-color: transparent;
    z-index: 9999;
}
/* ------------------------------------------------------  myEUFRAK-LernCampus - Hintergrund  -------------------------------------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=cyrillic,latin,greek);
body {
  background: #dddfff;
  font-family: 'Open Sans', sans-serif;
  background-image:url('/content/lessons/_bilder/backgrounds/bg_academy_xmas2.jpg');
  background-image:url('/content/lessons/_bilder/backgrounds/bg_academy_new-years2020.jpg');
  background-image:url('/content/lessons/_bilder/backgrounds/bg_academy_table.jpg');
  -moz-background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* ---------------------------------------------------  Hintergrundbild nach Login  ---------------------------------------------------------*/
html:not(.popup) body:not(.ef-user-signed-in) {
  background-image: url('/assets/images/Penguins.jpg');
  background-size: cover;
}

/* ----------------------------------------------         Videobackground    ------------------------------------------------------------------*/
#video-background {
/*  making the video fullscreen  */
  position: fixed;
  right: 0; 
  bottom: 0;
  min-width: 100%; 
  min-height: 100%;
  width: auto; 
  height: auto;
  z-index: -100;
}

/*Box Titles*/
div.block .title {
  background:#FFF;
  border: 4px solid #ccc;
  border-bottom: 0px;
  position: relative;
  top: 8px; 
}

/*Box Content*/
div.block .content {
  border: 4px solid #ccc;
  box-shadow: 0 1px 1px rgba(0,0,0,0); /*shadow*/
  border-radius: 8px;
}

/*Handle in a different way blocks within a block*/
div.block div.block .content {
  border: 0px;
}

/*Hide top left radious when then block has a Header*/
div.block .blockHeader ~ .content {
  border-top-left-radius: 0px;
}

/*Consistency with toolbars*/
div.block .toolbar {
  border: 4px solid #ccc;
  border-bottom: 0px;
  border-top-left-radius: 8px; 
  border-top-right-radius: 8px;  
}

/* Hide radious on box after a toolbar*/
div.block .toolbar ~ .content {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-top:0px;
}
/*--------------------------------------------------------------------  Navigationsleiste ---------------------------------------------------------------*/
#ef-navbar {
  background-color: #075283;
}

navbar form.navbar-form span.search-handle {
      background-color: #567DAB;
}
/*--------------------------------------------------------------------  GLOSSARY ---------------------------------------------------------------------*/
.ef-glossary-termX {  
  background:#00FF00;
}
/*--------------------------------------------------------------------  iFRAME responseible --------------------------------------------------------*/
iframe {
  max-width: 100%;
}
/*--------------------------------------------------------------------  responsive Videos -------------------------------------------------------------*/
.responsive-video {
    position: relative;
    padding-bottom: 56.25%; 
    padding-top: 25px;
    height: 0;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}/*--------------------------------------------------------------------  TOOLTIP ------------------------------------------------------------------------*/
div.tooltip.in
{
  opacity:1;
}

div.tooltip .tooltip-inner
{
  background: #f0f0f0;
  border: 2px dashed #cdcdcd;
  box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.15);
  max-width: 800px;
  font-family: Courier;
  font-size: 12px;
  color: #333333;
}
/*--------------------------------------------------------------------- ZOOM EFFEKTE für Bilder -----------------------------------------------*/
.eufrak_img_zoom1-1_15:hover{
    color: #424242;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.15);
  -ms-transform: scale(1.15); /* IE 9 */
  -webkit-transform: scale(1.15); /* Safari and Chrome */
}

.eufrak_img_zoom1-1_5:hover{
    color: #424242;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(1.5);
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari and Chrome */
}

.eufrak_img_zoom1-2:hover{
    color: #424242;
  -webkit-transition: all .3s ease-in;
  -moz-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  transition: all .3s ease-in;
  opacity: 1;
  transform: scale(2);
  -ms-transform: scale(2); /* IE 9 */
  -webkit-transform: scale(2); /* Safari and Chrome */
}
/*----------------------------------------------------------------------------------------  Lupeneffekt ------------------------------------------------------------------------------------*/

.zoom { display:inline-block; position: relative; }
.zoom img { display: block; }
.zoom img::selection { background-color: transparent; }


/* #################################################     NOT IN USE  START   ###########################################*/



/* #################################################     NOT IN USE  END  #############################################*/

/*---------------------------------------------------------------------------------   EUFRAK INDIVIDUAL END    ----------------------------------------------------------------*/

/* DO NOT ADD/EDIT AFTER THIS LINE */
#ef-navbar, #ef-navbar li a.dropdown-toggle[aria-expanded="true"]{background-color:#075283;border-color:#075283;}
body{background-color:#f5f5f5;}
.breadcrumb-x, .breadcrumb-x ol{background-color:#f5f5f5;border-color:#f5f5f5;}
.navbar-inverse{background-color:#04329c;border-color:#04329c;}