@font-face {
    font-family: GeosansLight;
    src: url(/fonts/GeosansLight.ttf);
}
body{
margin: 0;

}

video { 
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  transition: 1s opacity;
}


/*--------------------------CUBE-------------------------*/

section{
  position: relative;
  float: left;
  clear:both;
  width: 13%;
  /*margin-left: -15%;*/
}
    

    #cube {
      width: 100%;
      height: 100%;
      position: absolute;
      
      
      -webkit-transform-style: preserve-3d;/* positioned in 3D space*/
      -moz-transform-style: preserve-3d;
      -o-transform-style: preserve-3d;
      transform-style: preserve-3d;
      
      -webkit-transition: -webkit-transform 1s;
      -moz-transition: -moz-transform 1s;
      -o-transition: -o-transform 1s;
      transition: transform 1s;
    }

    #cube figure {
      margin: 0;/*Keep the cube in the container*/
      display: block;
      position: absolute;
      width: 400px;
      height: 400px;
      border: 2px solid rgb(255,255,255);
      text-align: center;
    }


#cube figure p{
    color: #fff;
    font-family: GeosansLight;
    font-weight: 400;
    text-align: left;
    font-size: medium;
}

#cube figure div.p{
    color: #fff;
    font-family: GeosansLight;
    font-weight: 400;
    text-align: left;
    font-size: medium;
    padding:5%;
}



    
    
    #cube .back, .right, .left, .top, .bottom {
      border-style:solid;
      border-width:2px;	
      border-color:rgb(255,255,255);
}

    
    

    #cube .front  {
      -webkit-transform: translateZ( 100px );
      -moz-transform: translateZ( 100px );
      -o-transform: translateZ( 100px );
      transform: translateZ( 100px );
    }
    #cube .back   {
      -webkit-transform: rotateX( -180deg ) translateZ( 100px );
      -moz-transform: rotateX( -180deg ) translateZ( 100px );
      -o-transform: rotateX( -180deg ) translateZ( 100px );
      transform: rotateX( -180deg ) translateZ( 100px );
    }
    #cube .right {
      -webkit-transform: rotateY(   90deg ) translateZ( 100px );
      -moz-transform: rotateY(   90deg ) translateZ( 100px );
      -o-transform: rotateY(   90deg ) translateZ( 100px );
      transform: rotateY(   90deg ) translateZ( 100px );
    }
    #cube .left {
      -webkit-transform: rotateY(  -90deg ) translateZ( 100px );
      -moz-transform: rotateY(  -90deg ) translateZ( 100px );
      -o-transform: rotateY(  -90deg ) translateZ( 100px );
      transform: rotateY(  -90deg ) translateZ( 100px );
    }
    #cube .top {
      -webkit-transform: rotateX(   90deg ) translateZ( 100px );
      -moz-transform: rotateX(   90deg ) translateZ( 100px );
      -o-transform: rotateX(   90deg ) translateZ( 100px );
      transform: rotateX(   90deg ) translateZ( 100px );
    }
    #cube .bottom {
      -webkit-transform: rotateX(  -90deg ) translateZ( 100px );
      -moz-transform: rotateX(  -90deg ) translateZ( 100px );
      -o-transform: rotateX(  -90deg ) translateZ( 100px );
      transform: rotateX(  -90deg ) translateZ( 100px );
    }

    
   
  

/* BUTTON CONTROLL CUBE*/


    .containerCUBE {
      width: 400px;
      height: 400px;
      position: relative;
     /* margin-top: 13%;
      margin-left: 35%;*/
      float:right;
      clear:both;
      margin-right:28%;
      border: 1px solid #CCC;
      -webkit-perspective: 1000000px;
      -moz-perspective: 1000000px;
      -o-perspective: 1000000px;
      perspective: 1000000px;
    }

#options {
  position: absolute;
  z-index: 100;
  margin-left: 10%;
  margin-top:3%;
  display: inline-block;

}




button {
  width: 90px;
  height:90px;
  
  padding: .4rem;
  border: none; 
  margin-left: 36%;
  font-size: 0.8em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.23);
  border-bottom: 1px solid #CFCCCF;/*#1b9bff;*/
  color: #fff;
  border-radius: 100%; 
  cursor: pointer;
  transition: .3s background;
}

button:hover { 
   background: rgba(0,0,0,0.5);
}
button.show-bottom:hover { 
   background: rgba(66,220,163,0.5);
}
button.show-right:hover { 
   background: rgba(79,220,212,0.5);
}

button.show-top:hover { 
   background: rgba(89,178,220,0.5);
}
button.show-front:hover { 
   background: rgba(88,129,220,0.5);
}

.show-buttons{width: 50%;}


    #cube.show-front {
      -webkit-transform: translateZ( -100px );
      -moz-transform: translateZ( -100px );
      -o-transform: translateZ( -100px );
      transform: translateZ( -100px );
    }
    #cube.show-back {
      -webkit-transform: translateZ( -100px ) rotateX( -180deg );
      -moz-transform: translateZ( -100px ) rotateX( -180deg );
      -o-transform: translateZ( -100px ) rotateX( -180deg );
      transform: translateZ( -100px ) rotateX( -180deg );
    }
    #cube.show-right {
      -webkit-transform: translateZ( -100px ) rotateY(  -90deg );
      -moz-transform: translateZ( -100px ) rotateY(  -90deg );
      -o-transform: translateZ( -100px ) rotateY(  -90deg );
      transform: translateZ( -100px ) rotateY(  -90deg );
    }
    #cube.show-left {
      -webkit-transform: translateZ( -100px ) rotateY(   90deg );
      -moz-transform: translateZ( -100px ) rotateY(   90deg );
      -o-transform: translateZ( -100px ) rotateY(   90deg );
      transform: translateZ( -100px ) rotateY(   90deg );
    }
    #cube.show-top {
      -webkit-transform: translateZ( -100px ) rotateX(  -90deg );
      -moz-transform: translateZ( -100px ) rotateX(  -90deg );
      -o-transform: translateZ( -100px ) rotateX(  -90deg );
      transform: translateZ( -100px ) rotateX(  -90deg );
    }
    #cube.show-bottom {
      -webkit-transform: translateZ( -100px ) rotateX(   90deg );
      -moz-transform: translateZ( -100px ) rotateX(   90deg );
      -o-transform: translateZ( -100px ) rotateX(   90deg );
      transform: translateZ( -100px ) rotateX(   90deg );
    }

/*INSIDE CUBE*/

/*colours inside cube general set*/
.blue{/*background-color:blue;*/background-color:#000; color:#fff; width:380px; height:380px; }
.green{/*background-color:green;*/ background-color:#000; color:#fff; padding: 10px; width:380px; height:380px;}
.yellow{/*background-color:yellow;*/ background-color:#000; width:400px; height:380px; padding-top:5%;}
.pink{/*background-color:pink;*/ background-color:#000; color:#fff; padding: 10px; width:380px; height:380px;}
.purple{/*background-color:purple;*/ background-color:#000; color:#fff; padding: 10px; width:380px; height:380px;}
.red{background-color:lavender; width:400px; height:400px;
    /*background-image:url('http://www.demoteket.dk/startbootstrap-grayscale-1.0.4/img/logo_demo.png');
    background-repeat:no-repeat;
    background-size:102%;
    background-position:center;*/
}

img.logo_demo{width:400px; height:400px;}


/*END colours inside cube general set*/
div.insideDiv2 a{
    color: #42dca3;
    font-style: oblique;}

/*EVENTS*/
.insideDiv{
    overflow-y: scroll;
    width:400px;
    height:400px;
    
}

div.insideDiv::-webkit-scrollbar {display: none;}
div.insideDiv::-o-scrollbar {display: none;}
div.insideDiv::-ms-scrollbar {display: none;}
div.insideDiv::-moz-scrollbar {display: none;}

div.insideDiv a{
    color: #42dca3;
    font-style: oblique;}

    /*END EVENTS*/
    
/*GUIDE*/
iframe.youtube-player{
border: 1px solid #1D740C;
height: 290px;
width: 398px;
z-index:200;
}

div.red h2{

color: #fff;
font-family: GeosansLight;
font-size: 200%;}
/*END GUIDE*/

/*RETURNS_BIBLIOTEKS*/

.col { 
 /* float: left;
  padding: 9px 0 0 29px;*/
  width: 100%;
    
  color:#fff;
  font-family:GeosansLight;
}


 
h2.firsth2{margin-top: 0; color:#fff;} 
h2 { 
    font-family:GeosansLight;
    font-variant: small-caps;
    text-align:center;
    margin-top:87px;
    margin:0 auto;
    font-size:large;
    margin-top: 100px;
    
}

.clickme, .clickme1{
    color:#42dca3;
    font-family:GeosansLight;
    text-decoration:underline;

   }
   
.box, .box2{display: none;}
table{
    text-align:center;
    width:100%;

    padding-bottom:5%;
    border:1px dashed;
    border-top:none;
    
}
table tr:hover{cursor:pointer;}

ol li{
    width:auto;
    float:none;
    text-align:left;
    font-size:medium;
    margin-top:10px;
}

 
ul { 
  list-style: none; 
  margin: 0; 
  padding: 0; 
color: #fff;
    float: left;
    text-align: center;
}
 
li { 
  float: left; 
  width: 400px;
  font-size:small;
    margin: 0 auto;
    text-align: center;
    color:#fff;
}
 

li a{
    color:#42dca3;
    
}
/*END ABOUT_BIBLIOTEKS*/







@media only screen and (min-width : 320px) {
    
body{margin: 0 auto; width:30%;}

div.iframeContainer{width: 106%;height: 640px;}

iframe{width:340px;}

/*INSIDE CUBE*/

/*colours inside cube general set*/

div.insideDiv{width:290px; height:290px; padding:5px;}
/*div.insideDiv p{text-align:left;}*/

.green{ color:#fff; width:300px; height:300px;}
.yellow{ width:300px; height:250px;}
.pink{ color:#fff;  width:300px; height:300px;}
.purple{ color:#fff; width:300px; height:295px;}
.red{/*background-color:red;*/ width:300px; height:300px; margin:0 auto; /*background-size:100%; background-position:left center;*/}

div.insideDivRed{width:300px; height:290px; overflow-y: scroll;}
div.insideDivRed::-webkit-scrollbar { display: none;}
div.insideDivRed::-o-scrollbar { display: none; }
div.insideDivRed::-ms-scrollbar { display: none; }
div.insideDivRed::-moz-scrollbar { display: none; }
img.logo_demo{width:300px; height:300px; z-index:200;}

/*END colours inside cube general set*/
iframe.youtube-player{width:298px; height:235px;}

div.insideDiv2{width:280px; height:280px; overflow-y: scroll;}
div.insideDiv2::-webkit-scrollbar { display: none;}
div.insideDiv2::-o-scrollbar { display: none; }
div.insideDiv2::-ms-scrollbar { display: none; }
div.insideDiv2::-moz-scrollbar { display: none; }

div.insideDiv3{width:300px; height:285px; overflow-y: scroll;}
div.insideDiv3::-webkit-scrollbar { display: none;}
div.insideDiv3::-o-scrollbar { display: none; }
div.insideDiv3::-ms-scrollbar { display: none; }
div.insideDiv3::-moz-scrollbar { display: none; }

div.yellow ul>li{width:300px;}

ol{margin-left:-5%;}
table{margin-left:-6.1%;}


/*BUTTONS QUERIES*/

.containerCUBE {
    width: 300px; 
    height: 300px; 
    margin-right:auto;
      margin-top:0;
    float:right;
    clear:both;
}
#cube figure {width: 300px; height: 300px;}


#options {
    margin-left: -25%;
    margin-top:0;
    float:left;
    clear:both;
}
#show-buttons{margin-left:0;}
#show-buttons button {
  width: 70px;
  height:70px;
  padding:0;
  /*margin-left: 1%;*/
  font-size: 0.6em;
  }

}

/*END BUTTONS QUERIES*/

/*QUERIES TABLET LANDSCAPE*/
@media only screen and (min-width:320px) and (max-width : 480px) {
    
section.containerCUBE {
    width: 200px; 
    height: 200px; 
    margin-right:-95%;
    margin-top:0;
    float:right;
    clear:both;
}
#cube figure {width: 200px; height: 200px;}


section#options {
    margin-left: -25%;
    margin-top:0;
    float:left;
    clear:both;
}
#show-buttons{margin-left:0;}
#show-buttons button {
  width: 60px;
  height:60px;
  padding:0;
  /*margin-left: 1%;*/
  font-size: 0.6em;
  /*background-color:blue;*/
  }
 div.red{ width: 200px; height:200px;}
img.logo_demo{ width: 200px;height:200px;}
    
  

div.insideDiv{width:190px; height:190px; padding:5px;}
/*div.insideDiv p{text-align:left;}*/

.green{ color:#fff; width:200px; height:200px;}
.yellow{ width:200px; height:150px;}
.pink{ color:#fff;  width:200px; height:200px;}
.purple{ color:#fff; width:200px; height:195px;}
.red{ width:200px; height:200px;}

div.insideDivRed{width:200px; height:190px;}
img.logo_demo{width:200px; height:200px}

/*END colours inside cube general set*/
iframe.youtube-player{width:198px; height:135px;}

div.insideDiv2{width:180px; height:180px;}

div.insideDiv3{width:200px; height:185px;}

div.yellow ul>li{width:200px;}


    
    
    
    
}

    
@media only screen and (max-width : 768px) {
    .containerCUBE {
    width: 200px; 
    height: 200px; 
    margin-right:auto;
      margin-top:0;
    float:right;
    clear:both;
}
#cube figure {width: 200px; height: 200px;}


#options {
    margin-left: 0;
    margin-top:0;
    float:left;
    clear:both;
}
#show-buttons{margin-left:0;}
#show-buttons button {
  width: 60px;
  height:60px;
  padding:0;
  /*margin-left: 1%;*/
  font-size: 9px;
  }
 div.red{ width: 200px; height:200px;}
img.logo_demo{ width: 200px;height:200px;}
}

/*TABLET POTRAIT*/
@media only screen and (min-width:600px) and (max-width : 768px) {
    
    .containerCUBE {
    width: 300px; 
    height: 300px; 
    margin-right:auto;
    margin-top:0;
    float:right;
    clear:both;
}
#cube figure {width: 300px; height: 300px;}


section#options {
    margin-left: -30%;
    margin-top:0;
    float:left;
    clear:both;
}
#show-buttons{margin-left:0;}
#show-buttons button {
  width: 60px;
  height:60px;
  padding:0;
  /*margin-left: 1%;*/
  font-size: 0.6em;
  }
 div.red{ width: 300px; height:300px;}
img.logo_demo{ width: 300px;height:300px;}
    
}