.genericItem{
    display:blocK;
    padding:10px;
    width:400px;
    max-width:100%;
    margin-bottom:6px;
    margin-right:6px;
    text-decoration:none;
}

.genericItem h3{
    margin:0px;
    padding:0px;
}

a.genericItem{
 text-decoration:none;   
}

a.genericItem:hover{
    box-shadwow:0px 0px 5px rgba(0,0,0,0.2);
}#hjelposs{
    display:block;
    position:fixed;
    right:10px;
    bottom:10px;
    border:1px solid #CCC;
    color:#999;
    padding:5px;
    text-decoration:none;
    font-size:80%;
}

#feedbackcontent{
    display:block;
    position:fixed;
    bottom:0px;
    right:0px;
    background:rgba(255,255,255,0.95);
    padding:15px;
    z-index:50;
    max-width:100%;
    box-shadow:0px 0px 5px rgba(0,0,0,0.4);
}

@media only screen and (max-width: 700px) {
  #hjelposs{
    display:none;
  }
}#sysmenu{
    display:block;
    position:fixed;
    top:10px;
    right:10px;
z-index:101;
transition:0.3s all;
}

#sysmenu.open{
    width:200px;    
    height:100vh;  
    top:0px;
    right:0px;
    overflow:auto;
}

.sysName{
    font-size:200%;
    font-weight:bold;
}


#name{
    margin-top:40px;
    margin-bottom:40px;
}

#sysmenu #sysMenuContent{
    display:none;
}

#sysmenu.open #sysMenuContent{
    display:block;
    padding:10px;
}

#sysmenu a{
    text-decoration:none;
    text-align:center;
    padding:5px;
    margin-bottom:7px;
    margin-top:6px;
    display:block;
    text-decoration:none;
    transition:0.3s all;
}

#sysMenuContent select{
    width:100%;
    margin-bottom:4px;
    margin-top:4px;
    padding:6px;
}

#menuToggler{
    display:block;
    width:45px;
    position:relative;
}


#menuToggler>span{
    display:block;
    height:4px;
    width:100%;
    background-color:#999;
    margin-bottom:5px;
    transition:0.4s all;
    position:relative;
    opacity:1;
}

#sysmenu.open #menuToggler{
    left:10px;
    top:15px;
    height:60px;
}

#sysmenu.open #menuToggler>span:nth-child(1){
transform:rotate(45deg);
top:7px;
}

#sysmenu.open #menuToggler>span:nth-child(2){
transform:rotate(-45deg);
top:20px;
}

#sysmenu.open #menuToggler>span:nth-child(3){
transform:rotate(500deg);
opacity:0;
}

#sysMenuContent .toStartpage{

}


#sysMenuContent .toStartpage:hover{

}



#sysMenuContent a:hover{
    box-shadow:0px 0px 5px rgba(255,255,255,0.4);
}


@media only screen and (max-width: 700px) {

#sysmenu{    
transition:0.4s all;
filter:blur(0px);  
opacity:1;
}
    
#sysmenu.open{
    width:100%;
    background-color:rgba(50,50,50,1);
}

#sysmenu.transition{
filter:blur(3px);  
opacity:0.5;
}

    
#sysmenu #sysMenuContent{
font-size:100%;
filter:blur(3px);
padding:20px;
overflow:auto;
max-height:100vh;
}

#sysmenu.open #sysMenuContent{
opacity:1;
filter:blur(0px);
padding:40px;
}

#sysMenuContent a{
    margin-top:10px;
    font-size:120%;
    padding:10px;
}



#menuToggler{
    width:50px;
    transition:0.5s all;
}

#sysmenu.open #menuToggler{
     width:60px;   
}

#sysmenu.open #menuToggler>span:nth-child(2){
transform:rotate(-45deg);
top:22px;
}

#menuToggler>span{
    height:5px;
    margin-bottom:8px;
}

#sysmenu.open #menuToggler>span{
     margin-bottom:11px;   
}

#sysmenu:not(.open) #menuToggler>span{
    border-radius:2px;
     background-color:rgb(180,180,180);   
}

    
}

body, input, select,textarea{
    font-weight:400;
    font-size:16px;    
}

body, div, span, a, select, input, textarea,nav,form{
    box-sizing:border-box;
    font-family:Rajdhani,Verdana, Geneva, sans-serif;
}

/*
@font-face {
    font-family: 'Rajdhani';
    src: url('https://lib.gang.no/fonts/rajdhani/');
}
*/

body{
    padding:0px;
    margin:0px;
    padding:40px;
    padding-top:10px;
 padding-bottom:10px;
 width:100%;
}

#theMainContent{
    display:block;
    width:calc(100%);
    padding:20px;
}



h1{
    font-size:190%;
    color:#666;
    font-weight:normal;
    line-height:90%;
}


span.prefix{
    display:block;
    font-size:70%;
    opacity:0.4;
}


#mainBgImg{
    display:block;
    height:100vh;
    width:100%;
    background-size:cover;
    background-position: center center;
    position:fixed;
    top:0px;
    left:0px;
    z-index:4;
    filter:saturate(100%) contrast(100%);
    transition:0.5s all;
}

#mainBgImg.lowContrast{
    filter:saturate(30%) contrast(20%) brightness(150%);
}


#theMainContent{
    display:block;
    width:100%;
    position:absolute;
    left:0px;
    top:0px;
    z-index:10;
}


@media only screen and (max-width: 700px) {

body, input, select,textarea{
    font-size:22px;    
}    
  
  
#theMainContent{
 min-height:100vh;   
}
    
    body{
     padding:10px;  
     background-color:rgb(240,240,240) !important;
    }
    
 #theMainContent{
    padding:0px;
    padding:15px;
background:rgba(230,230,230,1)    
 }
 
input[type=text], input[type=password], select, textarea{
 width:100%;
 padding:6px;
 display:block;
 }
}.kursnav{
    display:block;
    width:100%;
}

.kursnav:empty{
    display:none;
}.admwindow{
display:inline-block;
width:400px;
vertical-align:top;
margin:30px;
border:1px solid #CCC;
padding:10px;
max-height:80vh;
overflow:auto;
background-color:rgba(255,255,255,0.5);
}

.admwindow.wide{
width:600px;
}.btn{
display:inline-block;
padding:4px;
padding-left:6px;
padding-right:6px;
vertical-align:top;
margin-left:2px;
margin-right:2px;
text-decoration:none;
color:#666;
margin-bottom:4px;
}

.btn:hover{

}

.plus{
    text-decoration:none;
    padding:0px;
    padding-left:5px;
    padding-right:5px;
}

.go{
    font-size:110%;
    padding:6px;
    padding-left:10px;
    padding-right:10px;
    text-decoration:none;
    display:inline-block;
    vertical-align:top;
    transition:0.3s all;
    text-align:center;
}

.go:hover{
    box-shadow:0px 0px 3px rgba(0,0,0,0.1);
}

.trash{
    display:inline-block;
    background-color:#999;
    color:#FFF;
    padding:4px;
    text-decoration:none;
}


.trash:hover{
    background-color:#CE2C04;    
}


@media only screen and (max-width: 700px) {
a.go{
    width:100%;
    display:block;
    padding-top:10px;
    padding-bottom:10px;
}   
}.kursBooter{
display:inline-block;
width:350px;
height:270px;
background-size:cover;
background-position:center center;
padding-top:150px;
background-color:#CCC;
margin:10px;
text-decoration:none;
vertical-align:top;
}

.kursBooter>div{
    display:block;
    width:100%;
    text-align:center;
    padding:4px;
    font-size:150%;
    background-color:rgba(255,255,255,0.85);
}





#kurscontentW{
    display:block;
    width:100%;
    text-align:center;
    perspective:1000px;
}

#kurscontentC{
    display:inline-block;
    vertical-align:top;
    max-width:1000px;
    width:100%;
}

#kurscontent{
       width:900px;
       max-width:100%;
       display:inline-block;
       vertical-align:top;
       padding:20px;
       background:rgba(245,245,245,1); 
       box-shadow:0px 0px 5px rgba(0,0,0,0.3);
       text-align:left;
       opacity:1;
       transform:rotateY(0deg);
}

#kurscontent.nomenu{
        width:700px;   
}


#kurscontent.preInit{
    opacity:0.0001;
    transform:rotateY(90deg);
}

#kursMaincontent{
display:inline-block;
width:calc(100% - 201px);
padding:20px;
padding-top:0px;
}

#kurscontent.nomenu #kursMaincontent{
        width:100%;   
}

#myStartPage{
    display:block;
    width:100%;
    text-align:center;
}



#kapsnav{
    display:inline-block;
    width:200px;
    padding:10px;
    vertical-align:top;
    min-height:calc(100vh - 130px);
    overflow:auto;
    background:rgba(230,230,230,1)
}

#kapsnav a{
    display:block;
    margin-bottom:3px;
    text-decoration:none;
    margin-bottom:4px;
    padding:2px;
    width:100%;
    padding-left:4px;
    padding-right:4px;
}

#kapsnav a.active{
    position:relative;
    left:10px;
}

.vimeoWrapper{
    display:block;
    padding:0px;
    width:100%;
    text-align:center;

}

.vimeoFrame{
width:100%;
display:inline-block;
height:calc(100vh - 400px);
    min-height:200px;
}

#kursNavToggle{
    display:none;
}



#topBgImg{
    width:680px;
    margin-left:219px;
    height:50vh;
    margin-bottom:calc(-50vh - 6px);
    display:inline-block;
    background-size:cover;
    background-position:center center;
}

#topBgImg .bgGradient{
    display:block;
    height:30vh;
    margin-top:20vh;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.8) 100%);
}


.slideDesign1 h1{
    height:calc(50vh - 0px);
    padding-bottom:40px;
    vertical-align:bottom;
    box-sizing:border-box;
    display:table-cell;
    color:#FFF;
    text-shadow:0px 0px 4px rbga(0,0,0,0.8);
}




@media only screen and (max-width: 910px) {
    
.kursBooter{
display:block;
width:100%;
margin:0px;
margin-top:20px;
margin-bottom:20px;
vertical-align:top;
}


#kapsnav a.active{
    left:0px;
}

#kapsnav{
    display:none;
}


#kursMaincontent{
    width:100%;
    padding:0px;
    margin-top:20px;

}

#kurscontent{
    background:rgba(230,230,230,1);
    box-shadow:none;
}

#kursNavToggle{
    display:block;
    width:60%;
    left:20%;
    position:fixed;
    top:-20px;
    background-color:rgb(0,76,112);
    color:#FFF;
    padding:5px;
    text-align:center;
    text-decoration:none;
    border-bottom-left-radius:4px;
    border-bottom-right-radius:4px;  
    z-index:9;
}


#kurscontent.navMode #kapsnav{
    display:block;
        width:100%;
    border-right:0px;
    min-height:100px;
    padding-top:30px;
}

#kurscontent.navMode #kursMaincontent{
    display:none;

}




#topBgImg{
    width:calc(100% + 30px);
    display:block;
    position:fixed;
    left:-15px;
    top:-15px;
    margin-left:0px;
}

.slideDesign1 h1{
    height:calc(50vh - 30px);
}


}.slidenav{
    display:block;
    text-align:center;
}

.slidenav a{
    display:inline-block;
    padding:5px;
    padding-left:10px;
    padding-right:10px;
    font-size:110%;
    text-decoration:none;
    margin-right:10px;
    min-width:120px;
    text-align:center;
}

.innhald .slidenav{
    margin-bottom:20px;
}
#slidenavC{
display:block;
transition:0.3s all;
}

#slidenavC.fixed{
position:fixed;
left:0px;
width:100%;
display:block;
z-index:999999;

}

#slidenavC.fixed a{
    background:rgba(255,255,255,0.9);
}

#slidenavC.fixed a:hover{
 background-color:rgba(100,100,100,0.9);   
}

.goNext{
transition:0.4s all;
}

.goNext.notYet{
    background-color:rgba(0,0,0,0.1);
    opacity:0.5;
    color:#333;
}

.goNext.notYet .gonextIcon{
    filter:blur(3px);
}.question{
    display:block;
    margin-bottom:20px;
    padding:15px;
    background-color:rgba(255,255,255,0.8);
    width:100%;
}

.sureIndicator{
    background:rgba(0,0,0,0.1);
    padding:4px;
    display:block;
}

.question label{
    margin-top:4px;
    padding:4px;
    margin-bottom:4px;
    transition:0.3s all;
}

.question img{
    width:100%;
    height:auto;
}

.question label:hover{
    background:rgba(255,255,255,0.9);
    box-shadow:0px 0px 4px rgba(0,0,0,0.1);
}

.questionsSubmit{
    display:block;
    width:100%;
    font-size:120%;
    text-align:center;
    padding:8px;
    background-color: rgb(0,76,112);
    color:#FFF;
    border-radius:0px;
    box-shadow:none;
    border:0px;
}


.percentRight{
    font-size:350%;
    display:block;
    width:100%;
    text-align:center;
    margin-bottom:20px;
}

.percentRight>span{
    font-size:40%;
    display:block;
    width:100%;
}

.question label.chkd{
    border:1px solid #CCC;
    border-left:8px solid #CCC;
}
form label{
    display:block;
    margin-bottom:20px;
}

form label strong{
    display:block;
}


form label p{
    margin:0px;
    font-size:80%;
}

.formLangGroup{
    display:block;
    padding:13px;
    margin-bottom:10px;
    background:rgba(255,255,255,0.5);
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    width:500px;
    max-width:100%;
}

.formLangGroup label:not(:first-child){
    margin-top:10px;
}

textarea{
    width:400px;
    max-width:100%;
    border:1px solid #CCC;
    padding:9px;
    
}

.topForm{
    display:block;
    background:rgba(255,255,255,0.8);
    padding:20px;
    margin-bottom:20px;
}

.bottomTools{
display:block;
position:fixed;
text-align:center;
font-size:120%;
padding:5px;
background:rgba(240,240,240,0.97);
left:0px;
bottom:0px;
width:100%;
box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}#thelogo{
    max-height:110px;
    display:inline-block;
}#kompetanseForm{
    display:block;
    width:100%;
    padding:20px;
    border-bottom:1px solid #007FB2;
}

#goKompetanse{
    display:inline-block;
    font-size:150%;
    padding:10px;
    background-color:#007FB2;
    color:#FFF;
    text-decoration:none;
    position:relative;
    top:55px;
}

.goIcon{
    display:inline-block;
    margin-left:20px;
    width:25px;
    height:10px;
    opacity:0.6;
    position:relative;
    top:-5px;
    left:-8px;
    transition:0.5s all;
}

a:hover .goIcon{
    top:5px;
    opacity:0.9;
}

.goIcon>span{
    display:block;
    background-color:rgb(255,255,255);
    height:5px;
    position:relative;

}



.goIcon>span:nth-child(1){
    transform:rotate(45deg);
    left:-5px;
    top:5px;
}

.goIcon>span:nth-child(2){
    transform:rotate(-45deg);
    left:10px;
}

#kompetanseForm>label{
    display:inline-block;
    vertical-align:top;
    padding:10px;
    margin:10px;
}


#kompetanseResult{
    display:block;
    width:95%;
    margin-left:2%;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 4px rgba(0,0,0,0.1);
    padding:20px;
}

@media only screen and (max-width: 700px) {
#kompetanseResult{
    width:100%;
    margin-left:0%;
    padding:10px;
}
}

.kompetanseTabell{
    display:table;
    width:100%;
    border-collapse:collapse;
}

.kompetanseTabell td{
    border:1px solid #CCC;
    padding-left:6px;
    padding-right:6px;
}



tr.good td:first-child{
border-left: 10px solid green;
}

tr.overdue td:first-child{
border-left: 10px solid #CCC;
}

.kompetanseTabell tr.overdue td, .kompetanseTabell tr.nottaken td{
    background-color:rgb(230,230,230);
}


#kompetanseCompletion{
    display:block;
    font-size:200%;
    color:#CCC;
    margin-bottom:20px;
    margin-top:20px;
}

#kompetanseCompletion>span{
     font-size:100%;   
}

.completionBar{
    display:block;
    width:100%;
    max-width:500px;
    height:20px;
    background:#CCC;
}

.completionBar span{
    transition:1.5s all;
    display:block;
    height:20px;
    background-color:#60A500;;
}

.howfar{
    font-size:80%;
}

.purringChk{
    display:none;
}

#purreForm input, #purreForm a{
    display:none;
}

#purreForm.purrGo input, #purreForm.purrGo a{
    display:inline;
}


#purreForm.purrGo .purringChk, 
#kompetanseTabell.purred .purringChk{
    display:table-cell;
}

#purringSubmitW{
    display:sticky;
    bottom:0px;
    display:block;
    padding:5px;
    padding-right:0px;
    width:100%;
    text-align:right;
}

#purringSubmitW input{
background: linear-gradient(45deg, rgba(143,196,0,1) 0%,rgba(98,173,0,1) 100%);
padding:10px;
border:0px;
color:#FFF;
font-weight:bold;
font-size:120%;
}.kursSpmResW h3.kap{
    font-size:170%;
    color:#999;
    font-weight:normal;
    margin-bottom:10px;
    margin-top:50px;
}
    


.barsContainer{
    display:block;
    width:80px;
    height:100px;
    border-bottom:1px solid #CCC;
    text-align:center;
}

.kursSpmC{
    background:rgba(255,255,255,0.8);
    padding:20px;
    margin-bottom:20px;
    box-shadow:0px 0px 5px rgba(0,0,0,0.3);
    display:block;
    vertical-align:top;
    width:calc(100% - 20px);
    margin-left:20px;
}

.kursSpmRG{
    display:inline-block;
    vertical-align:top;
}

.kursSpmRG .barsContainer{
      vertical-align:bottom;  
}

.kursSpmRG .barsContainer>div{
    display:inline-block;
    width:20px;
    vertical-align:bottom;
    background:#CCC;
}

.kursSpmDetails{
    display:inline-block;
    vertical-align:top;
    width:400px;
    max-width:100%;
}

.kursSpmDetails h4{
    color:#666;
    margin:0px;
    padding:0px;
    font-size:130%;
}

.kursSpmRG>.barsContainer>.statBar:first-child{
    background-color:#60A500;
}

.kursSpmRG>.barsContainer>.statBar:nth-child(2){
    background-color:#AA1300;
}

.kursSpmOpts{
    display:inline-block;
    vertical-align:top;
    width:400px;


    max-width:100%;
}

.kursSpmOpts>a{
display:block;
padding-top:10px;
padding-bottom:10px;
width:100%;
border-left: 1px solid #CCC;
margin-bottom:5px;
}

.kursSpmOpts>a:hover{
    box-shadow:0px 0px 5px rgba(0,0,0,0.4);
}

.spmOptBar{
    display:block;
    margin-bottom:6px;
    height:6px;
    background-color:#CCC;
}

.spmOptBar.rightAnswr{
    background-color:#90AF75;
}

.rightPercent{
    font-size:200%;
    color:#CCC;
    display:inline-block;
    padding:20px;
    padding-top:0px;
    vertical-align:top;
    width:130px;
    line-height:50%;
    text-align:center;
}

.rightPercent>span{
font-size:50%;
}

@media only screen and (max-width: 700px) {
.rightPercent{
width:100%;
display:block;
} 

.kursSpmC{
    width:100%;
    margin-left:0px;    
}
}@keyframes goIconAni {
    0% { left: 3px;}
    50%{ left : 8px;}
    100%{ left: 3px;}
}

.gonextIcon{
    width:20px;
    height:15px;
    display:inline-block;
        position:relative;
        top:0px;
        margin-left:4px;
animation: goIconAni 2s linear infinite;        
}



.gonextIcon>span{
    background-color:rgb(0,76,112);
    height:3px;
    display:block;
    width:75%;
    position:relative;
    left:3px;

}

.gonextIcon>span:nth-child(1){
    transform:rotate(45deg);
    top:4px;
}
.gonextIcon>span:nth-child(2){
    transform:rotate(-45deg);
    top:10px;
}




.slidenav a:hover .gonextIcon>span{
    background-color:#FFF;
}#centerloginW{
    text-align:center;
    display:block;
    width:100%;
    opacity:1;
    transition:0.5s all;
}

#centerloginW.init{
    opacity:0.00001;
}

.centerlogin{
    padding:20px;
    display:inline-block;
    width:100%;
    max-width:500px;
}

.centerlogin .msg{
    font-size:160%;
    display:block;
    text-align:center;
    padding:30px;
}


.centerlogin label{
    margin-bottom:30px;
}

.centerlogin label strong{
    display:block;
}

.centerlogin input{
    width:100%;
    font-size:130%;
}

.authButton{
    display:block;
    background:#FFF;
    text-decoration:none;
    font-size:140%;
    padding:20px;
    width:100%;
    transition:0.4s all;
    margin-top:30px;
    margin-bottom:20px;
}

.authButton:hover{
    box-shadow:0px 0px 5px rgba(0,0,0,0.4);
}

.clusterBrand{
    width:100%;
    height:120px;
    background-position:center center;
    background-repeat:no-repeat;
    background-size:contain;
    display:block;
}

.clusterWelcome{
    background-color:rgba(255,255,255,0.8);
    padding:20px;
    font-size:120%;
}

#loggedOut{
    background-color:rgba(30,30,30,0.9);
background: linear-gradient(135deg, rgba(28,28,28,0.97) 0%,rgba(0,59,73,.97) 100%);
    color:#FFF;
    display:block;
    width:100%;
    height:100vh;
    padding:20px;
    padding-top:60px;
    font-size:130%;
    z-index:1000;
    position:fixed;
    left:0px;
    top:0px;
    transition:0.4s all;
    text-align:center;
}

@media only screen and (min-width: 700px) {
.centerlogin{
    max-width:370px;
    font-size:100%;
}

.centerlogin input{
    padding:9px;
}
    
}@media only screen and (min-width: 900px) {

#nyslide .formLangGroup{
    display:inline-block;
    width:400px;
    margin:30px;
    vertical-align:top;
}

}

.formLangGroup select{
    max-width:96%;
    display:block;
}

#theQR{
display:block;
margin-top:30px;
margin-bottom:30px;
}

#theQR img{
display:block;
width:400px;
height:400px;

}

.orderValue{
    opacity:0.7;
    font-size:90%;
}.slideImage{
    display:block;
    width:100%;
    height:auto;
    margin-top:10px;
    margin-bottom:20px;
}

.quote{
display:block;
padding-left:6%;
color:#155070;
padding-left:20px;
font-size:150%;
max-width:90%;
padding-bottom:20px;
padding-top:20px;
}

#qrReader{
   display:block;
   width:100%;
   height:70vh;
   max-height:600px;
}

#qrForma button{
display:block;
width:100%;
padding:30px;
font-size:150%;
margin:0px;
box-sizing:border-box;
left:0px;
}

.qrOblig{
    display:block;
    width:100%;
    padding:10px;
    color:#FFF;
    background: linear-gradient(135deg, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%);
    font-size:120%;
    text-align:center;
}

.qrSigned{
display:block;
width:100%;
padding:4px;
background: linear-gradient(135deg, rgba(205,235,142,1) 0%,rgba(165,201,86,1) 100%);
color:#333;
margin-top:10px;
margin-bottom:10px;
text-align:center;
}


.theslide{
display:block;

}table{
    width:100%;
    border-collapse:collapse;
}

table td{
border:1px solid #CCC;
}#slideContent{
    display:block;
    background:rgba(50,50,50,0.99);
    color:#CCC;
    padding:15px;
    position:fixed;
    right:0px;
    top:0px;
    height:100vh;
    z-index:100;
    padding-top:70px;
    width:500px;
    box-shadow:inset 0px 0px 5px rbga(0,0,0,0.8);
    max-width:100%;
    overflow:auto;
}.imgSelectorPool div{
display:inline-block;
width:200px;
margin:10px;

}

.imgSelectorPool img{
    width:100%;
    display:block;
}.slideCardW{
width: 260px;
height: 180px;
perspective: 1000px;
max-width:100%;
    display:inline-block;
    margin:20px;
}


.slideCard{
    display:block;
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 1s;
  transform-style: preserve-3d;

}

.slideCardFront{
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
 overflow:hidden;
 transition:1s all;
}

.cardFace{
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  color:#FFF;
  text-align:center;
  background-position:center center;
}

.slideCardFront{
overflow:hidden;
background-size:cover;
background-image: linear-gradient(45deg, rgba(150,150,150,1) 1%,rgba(200,200,200,1) 100%); 
/*
filter: blur(4px) saturate(40%) brightness(50%);
*/
transform:0.5s all;
}

.slideCardFront strong{
    display:block;
    transform:rotate(-45deg);
    text-shadow:0px 0px 5px rgba(0,0,0,0.5);
    position:relative;
    top:90px;
    background-color:rgba(0,0,0,0.5);
    left:60px;
    font-weight:normal;
}

.slideCard:hover .slideCardFront, .turned .slideCardFront{
/*
filter: blur(0px) saturate(100%) brightness(100%);
*/
}

.slideCardBack{
transform: rotateY( 180deg );
color:#FFF;
background: linear-gradient(45deg, rgba(237,246,252,1) 0%,rgba(227,234,242,1) 100%);  
  background-size:contain;
  padding:20px;
background: linear-gradient(45deg, rgba(0,76,117,1) 0%,rgba(0,107,150,1) 100%);
color:#FFF;
text-shadow:0px 0px 5px rgba(0,0,0,0.5);
overflow:auto;
}

.slideCardBack p{
    margin:0px;
    padding:0px;
    margin-bottom:5px;
}

.slideCardW.turned .slideCard{
transform: rotateY(180deg);
}

.slideCard strong{
font-size:150%;
font-family:Rajdhani,Verdana, Geneva, sans-serif
}


.cardInstruction{
    display:block;
    border:1px solid #ff670f;
    padding:5px;
    font-size:110%;
    text-align:center;
    margin-top:10px;
    margin-bottom:10px;
}

.slideCardW.preCard{
filter:blur(1px) saturation(30%);
transform:0.5s all;
}


@media only screen and (max-width: 800px) {
.slideCardW{
width: 100%;
height:350px;
margin:0px;
margin-bottom:10px;
margin-top:10px;
}

.slideCardFront strong{
    top:240px;
    left:auto;
    right:-80px;
}
}.startSideTema{
    display:inline-block;
    vertical-align:top;
    background:rgba(255,255,255,0.3);
    padding:20px;
    margin-bottom:20px;
    margin-top:20px;
    width:1200px;
    padding-top:30px;
    max-width:100%;
    box-shadow:0px 0px 6px rgba(0,0,0,0.1);
}

.temaBlock{
    display:inline-block;
    width:400px;
    margin-right:20px;
    text-align:left;
    vertical-align:top;
    box-sizing:border-box;
}

.startSideTema h2, .startSideTema h3{
    font-weight:normal;
}

.startSideTema h2{
    margin:0px;
    padding:0px;
    display:block;
    width:100%;
    box-sizing:border-box;
    text-align:center;
    color:#227D93;
    font-size:200%;
    margin-bottom:20px;
}

.temaBlock h3{
    margin:0px;
    padding:0px;
    font-size:140%;
    color:#999;
    font-weight:500;
}

.temaBlock.temaDox{
    width:340px;
}

.temaBlock.temaDox a{
    display:block;
    margin-top:10px;
    margin-bottom:5px;
    padding:10px;
    background:rgba(255,255,255,0.5);
    box-shadow:0px 0px 5px rgba(0,0,0,0.1);
    width:100%;
    text-decoration:none;
}

.temaBlock.temaDox a:hover{
     background:rgba(255,255,255,0.8);
    box-shadow:0px 0px 5px rgba(0,0,0,0.3);    
}

.temaBlock .kursBooter{
    margin-left:0px;
}

.temaBlock.temaVideos{
width:723px;
}


@media only screen and (max-width: 800px) {
.temaBlock{
max-width:100%;   
display:block;
margin-bottom:20px;
width:100% !important;
}

.startSideTema h2{
margin-top:50px !important;    
}


.temaBlock .kursBooter{
    margin-bottom:50px !important;
    box-shadow:0px 0px 6px rgba(0,0,0,0.6);
}

.startSideTema .kursBooter > div{
    font-size:130%;
}

.temaBlock.temaDox{
    width:100%;
}

}.document{
    display:block;
    padding:20px;
    color:rgb(240,240,240);
}

.document h1{
color:#CCC;    
}

.document a{
color:#FFF;
}.blurred{
    filter:blur(3px);
    opacity:0.5;
}
/* COLOR FILE: PRE RENDERED  */



#sysmenu.open{
background:rgba(40,40,40,0.99);
color:rgb(255,255,255);
box-shadow:inset 0px 0px 5px rgba(0,0,0,0.5);
}




#sysMenuContent a{
color:rgb(255,255,255);

}




body{
background-color:rgba(0,0,0,0.1);
}




#sysMenuContent a:hover{
background-color:rgba(0,0,0,0.4);
}




.btn{
background-color:rgb(0,76,112);
color:rgb(255,255,255);
}




#kapsnav{
border-right:2px solid rgb(0,76,112);
}




#kapsnav a{
background:rgba(0,0,0,0.1);
color:rgb(0,76,112);
}




#kapsnav a.active{
background:rgb(0,76,112);
color:rgb(255,255,255);
}




a{
color:rgb(0,76,112);
}




.genericItem{
background:rgba(255,255,255,0.8);
box-shadow:0px 0px 5px rgba(0,0,0,0.1);
}




.plus{
border:2px solid rgb(0,76,112);
}




.kursBooter:hover{
box-shadow:0px 0px 5px rgba(0,76,112,0.9);
}




.slidenav a{
border: 1px solid rgba(0,0,0,0.4);
}




.slidenav a:hover{
border: 1px solid rgb(0,76,112);
color:rgb(255,255,255);
background-color:rgb(0,76,112);
}




.go{
border:1px solid rgba(0,0,0,0.4);
}




.go:hover{
border:1px solid rgb(0,76,112);
}




.authButton{
background:rgb(0,76,112);
color:rgb(255,255,255);
}



/* COLOR FILE: PRE RENDERED END */