/*PYTANIA*/

.connectedTable td {
  vertical-align:middle !important;
}

.connected {
  padding-left:0;
      border: 2px #fff dashed !important;
}

.dragable {
	list-style: none;
    border-radius: 10px;
    color: rgb(40, 104, 156);
    padding: 5px;
    text-align: center;
    margin-bottom: 10px;
    background: rgb(255, 255, 255);
    cursor: pointer;
}

/*OGÓLNE*/

.btn-white {
    background: #FFF;
    color: #477CB0;
}

.btn-current {
	background: #DFDFE0;
    color: #477CB0;
}

.btn-blue {
    background: #5C90C3;
    color: #FFF;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size:  12px !important;
  line-height: 1.528571429 !important;
  border-radius: 15px;
  border: #FFF;
  font-weight: bold;
}
.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  padding: 10px 16px;
  font-size: 18px !important;
  line-height: 1.33 !important;
  border-radius: 25px;
}
.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px !important;
  line-height: 1.33 !important;
  border-radius: 35px;
}


html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}

body {
font-family: 'Roboto', sans-serif;
color: #666666;
background:none !important;
}

.courseWrapper {
    margin: 30px 0px 0px 30px;
    float: left;
    opacity: 0.3;
    width: 300px;
    background: #FFF;
    border-radius: 10px;

}

.courseIcon {
    padding:5px;
}

.courseIcon img {
    width: 100%;
    border-radius: 6px;
}
.courseName h3 {
font-size: 30px;
    color: #4A4A4A;
    font-weight: normal;
    font-family: Titillium;
  text-align: center;
}
.courseDetails {
    background: #21486F;
    color: #FFF;
    padding: 10px;
    z-index: 10;
    position: relative;
}

.courseDetails table {
width:100%;
}

.courseDetails table tr td {
text-align:center;
width:20%;
font-size:14px;
line-height: 20px !important; 
}

.courseButtons {
z-index: 1;
}

.navbar-nav>li>.dropdown-menu {
z-index: 2000;
}


/*NADPISANIE BOOTSTRAP*/
#bar.navbar-default .navbar-nav>li>a {
text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);
}

.navbar-right {
margin-right:40px !important;}


.glyphicon-user  {
margin-right:5px;
}

#bar.navbar-default .navbar-nav>li>a:hover,  .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.open>a{
color: #1CA8E3;

border-radius: 10px; 
}

.navbar-nav>.open>a{
color:#333 !important;
}

.navbar-default {
background:none !important;
border:none !important; 
-webkit-box-shadow:none !important;
-moz-box-shadow:none !important;
box-shadow:none !important;
}


.progress {
border-radius:0 !important;
}



/*STYLE SLAJDÓW*/
#decor {
position:absolute;
bottom:0;
left:0;
z-index:1000;
width:150%;
}

#decor img {
width:100%;
}

.breadcrumbs{
right: 1%;
top: 1%;
position: absolute;
z-index: 30;}

.breadcrumbs a {
color: white;
}


.breadcrumbs .glyphicon {
font-size: 0.8em !important;
}

.swap {
cursor:pointer;
}

.swap_kontenter {
position:relative;
}

.poziome {
position:relative;}


.opis {
position: absolute;
right: 2%;
bottom: 2%;
color: #fff;
font-style: normal;
font-weight: normal;
padding: 2%;
border-radius: 50%;}

.swap_kontenter .opis {
position: absolute;
right: 4%;
bottom: 2%;
color: #fff;
font-style: normal;
font-weight: normal;
padding: 5%;
border-radius: 50%;
}

.opis .glyphicon {
vertical-align: bottom !important;
}

.wypunkotwanie {
padding: 1% 4%;}

.wypunkotwanie ol {
margin-left:10px;
}

.tekstOzdobneZdjecie {
padding: 1% 4%;
}

.zdjecie {
border-radius: 2%;
width: 100%;
position:relative;
}

.obrotPrawo {
margin-top: 5%;
padding: 10px;
border: 2px solid #1CA8E3;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.22);
}

.obrotLewo {
margin-top: 5%;
padding: 10px;
border: 2px solid #1CA8E3;
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.22);
}

.proste {
margin-top: 5%;
border: 4px solid #1CA8E3;
}

.lewaPolowa {
width: 47%;
}


.prawaPolowa {
width: 51%;
}

#soundProperties {
color:#FFF;
}

#whiteBoard::before{
position: absolute;
display: block;
width: 100%;
height: 100%;
content: ' ';
border-radius: 10px;
background-position: 0% 60%;
}

/* OKIENKO MODALNE - ZMIANA KOLORU */
.modal-dialog {
color: black; 
}

.modal-header {
background:rgba(0, 51, 131, 0.65);
color: #FFF;
}

.close {
margin-top: -2px;
background-color: #FFF;
padding: 2px 5px;
border-radius: 5px;}


/*Summary*/
.slideSummary_cook {
height: 90%;
position: absolute;
bottom: 0;
right:0;
} 

#slideSummary_content{
position: absolute;
left:3%;
top:10%;
width: 60%;
text-align: left;
}
#slideSummary_content p {
margin: 30px 0px; 
}


/*Overwiew*/
#slideOverview  {
position: absolute;
left:18%;
bottom:10%;
}
#slideOverview div{
}
#pasek {
height:92%;
margin:2%;
width:12%;
top: 0;
position:absolute;
left:0;
border-radius:6px;
}

.overviewDecor {
position:absolute;
bottom:5%;
right:5%;
height:40%;

}

.overviewDecorPhoto{
position:absolute;
bottom:5%;
padding:10px;
right:5%;
height:45%;
border-radius: 2%;
border: 2px solid #1CA8E3;
transform: rotate(5deg);
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-o-transform: rotate(5deg);
box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.22);
}

.wypunktowanie {
position:relative;
z-index:10;}
.bigTitle {
position:absolute;
top:5%;
left:15%;
border-bottom:3px solid #DDD;
padding:20px 20px 0 20px;
margin-bottom:0;
}
.bigTitle h2 {
margin-top:0;
}
.bigTitle p {
}

.ppcontrols ul.bottom {
border-bottom: #000 solid 15px;
}
.ppcontrols {
bottom:10px !important;
}



/*Tablica*/
#contentFrame {
position: relative; 
}

#whiteBoard {
width: 100%;
height: 96%;
color:#FFF;
}
.corner {
position: relative; 
height:24px;
z-index: 2;
}
#whiteBoard td {
vertical-align: top; 
}
#markersImage {
left: 20%;
top: 20px;
position: absolute;
}
#content-wrapper {
position: relative;
height:80%;
border-radius: 10px;
background:white;
background: white;
margin-bottom: 20px;
margin-top: 20px;
}

#content-wrapper2 {
position: relative;
height: 100%;
width: 100%;
border-radius: 10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#246caf+0,035184+0,477cb0+100 */
background: rgb(36,108,175); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(36,108,175,1) 0%, rgba(3,81,132,1) 0%, rgba(71,124,176,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(36,108,175,1)), color-stop(0%,rgba(3,81,132,1)), color-stop(100%,rgba(71,124,176,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(36,108,175,1) 0%,rgba(3,81,132,1) 0%,rgba(71,124,176,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(36,108,175,1) 0%,rgba(3,81,132,1) 0%,rgba(71,124,176,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(36,108,175,1) 0%,rgba(3,81,132,1) 0%,rgba(71,124,176,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(36,108,175,1) 0%,rgba(3,81,132,1) 0%,rgba(71,124,176,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#246caf', endColorstr='#477cb0',GradientType=0 ); /* IE6-9 */

}


#content {
position: relative;
height: 100%;
width: 100%;
  border-radius: 10px;

}


/*#content-wrapper::before {
position: absolute;
display: block;
width: 100%;
height: 100%;
background-image: url(cmsImages/tlo1_blur.jpg);
filter: url('../cmsImages/blur.svg#blur');
background-position: 100% 50%;
filter: blur(20px);
-webkit-filter: blur(20px);
background-size: cover;
content: ' ';
background-size: 125%;
border-radius: 10px;
}*/


#leftBelt {
width: 28px;
position: relative;
}
#rightBelt {
width: 24px;
position: relative;
}

.rightSpacerColumn {
width: 30px; 
}

body {
overflow-y:hidden;
min-height: 500px;
}

/*Menu górne*/
#bar {
margin-top: 20px;
}

#bar.navbar-default .navbar-nav>.active>a, #bar.navbar-default .navbar-nav>.active>a:focus, #bar.navbar-default {
color: #FFF;
background: none !important;
}

#bar.navbar-default .navbar-nav>li>a {
color: #FFF;
}

#bar.navbar-default .navbar-nav>li>a:hover {
color: #1CA8E3;
}

#bar.navbar-brand, #bar.navbar-nav>li>a {
text-shadow: none;
}

/*Menu lewe*/
#courseMenu{
top:85px;
position:absolute;
right:0;
bottom: 60px;
min-width: 200px; 
border-radius: 10px;
background: rgba(255, 255, 255, 0.74);
padding: 10px 30px 10px 30px;
width: 100%;
}



.courseHeader {
position: relative;
top: 0;
right: 0;
padding-right: 25px;
z-index: 20;
}

#courseMenuTitle {
margin-bottom: 0;
color:#0C407D;
}
#courseMenuSubtitle {
margin-top: 0px;
color:#0C407D;
}
#leftColumn {
text-align: right;
width: 18%;
position:relative;
}
#leftColumn h5.sectionHeader {
color:#1CA8E3;
margin-bottom: 0px;
margin-top: 19px;
padding: 2px 2px;
font-weight: bold;
}
#leftColumn h5.active {
color:#FFF;
background: #1CA8E3;
}

#leftColumn a.active {
border-right: 2px #1CA8E3 solid; 
border-radius: 0;
color:#1CA8E3 !important;
font-weight: bold;
text-shadow:none !important;
}
#leftColumn .nav>li>a {
padding: 0 3px;
color:#333;


}

.progress {
margin-bottom: 0px;
background-color:white;
}




#soundProperties {
bottom:20px;
position:absolute;
right:0px;
padding-right:20px;

}

#bNotes{
z-index: 200;
}

.pager {
position: absolute;
width: 100%;
bottom: 0;
}

.pager li>a {
border-radius: 10px;
}

/*Przyciski ogólne*/
.qbLogo {
height:30px;
width:30px;
margin-top:-5px;
}

#bNotes {
position: absolute;
right: 20px;
top: -60px;
z-index: 1000;
}
.menuButton {
position: absolute;
left: -10px;
top: 20px;
z-index: 1000;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.previousSlide {
position: absolute;
z-index:1000;
}
.nextSlide {
position: absolute;
z-index:1000;
}
.btn-circle.btn-xl {
border-radius: 50%;
left:-90%;
}

.zdjecie_poziome {
width: 70% !important;
margin: 0 15%;
position:relative;
}

.zdjecie_poziome img{
width:100%;
margin-top: 1%;
}

/* responsywne */
@media screen and (max-height: 700px) {
.proste {
margin-top: 0!important;
}
.zdjecie {
width: 95% !important;
}

}

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

#content p,#content .btn,#content div,#content span,#content h4, #content ol {
font-size: 14px ;
line-height:19px;s
}

.smaller {
font-size: 13px !important;
line-height:17px !important;
}

.bigger {
font-size: 24px !important;
line-height:36px !important;
}

#footer>div.container-fluid {
display: none;
}
#footer {
min-height: 0;
}
#content h1 {
font-size: 30px;  
}
#content h2 {
font-size: 30px;
color:  #46C8FF; 
margin-top:15px;
}
#content h3 {
font-size: 23px;  
}
#bNotes {
font-size: 100%;
padding-right: 25px;
}
.menuButton {
font-size: 160%;
padding-left: 20px;
}
.previousSlide {
left: 1.5%;
top: 45%;
}
.nextSlide {
right: 1.5%;
top: 45%;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 40px;

}

.btn-circle.btn-xl .glyphicon {
line-height: 40px;}

#napisy span {
font-size: 30px !important;
}

#napisy {
width: 80%;
height: 50px;
line-height: 35px;
overflow: hidden;
padding: 8px 15px 15px 14px;
margin: 15px auto 10px 10%;
position: absolute;
bottom: 40px;
border-radius: 10px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.75);}


.opis .glyphicon {
font-size: 2em !important;
}

.breadcrumbs{
font-size: 0.8em !important;}

}

@media screen and (min-width: 1301px) and (max-width: 1400px) {

#content p,#content .btn,#content div,#content span,#content h4, #content ol {
font-size: 16px;
line-height:22px ;
}

.smaller {
font-size: 13px !important;
line-height:19px !important;
}

.bigger {
font-size: 24px !important;
line-height:36px !important;
}

#footer>div.container-fluid {
display: none;
}
#footer {
min-height: 0;
}
#content h1 {
font-size: 30px;  
}
#content h2 {
font-size: 30px;
color:  #46C8FF;  
}
#content h3 {
font-size: 23px;  
}

#bNotes {
font-size: 100%;
padding-right: 25px;
}
.menuButton {
font-size: 160%;
padding-left: 40px;
}
.previousSlide {
left: 1.5%;
top: 45%;
}
.nextSlide {
right: 1.5%;
top: 45%;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 40px;
}

.btn-circle.btn-xl .glyphicon {
line-height: 40px;}

#napisy span {
font-size: 30px !important;
}

#napisy {
width: 80%;
height: 50px;
line-height: 35px;
overflow: hidden;
padding: 8px 15px 15px 14px;
margin: 15px auto 10px 10%;
position: absolute;
bottom: 40px;
border-radius: 10px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.75);}


.opis .glyphicon {
font-size: 2em !important;
}
.breadcrumbs{
font-size: 0.8em !important;}

}

@media screen and (min-width: 1401px) and (max-width: 1700px) {

#content p,#content .btn,#content div,#content span,#content h4, #content ol {
font-size: 19px;
line-height:30px;
}
.smaller {
font-size: 16px !important;
line-height:22px !important;
}
.bigger {
font-size: 40px !important;
line-height:55px !important;
}
#content h1 {
font-size: 50px;  
}
#content h2 {
font-size: 37px;
color:#46C8FF;   
}
#content h3 {
font-size: 30px;  
}
#bNotes {
font-size: 100%;
padding-right: 25px;
}
.menuButton {
font-size: 180%;
padding-left: 40px;
}
.previousSlide {
left: 1.5%;
top: 45%;
}
.nextSlide {
right: 1.5%;
top: 45%;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 40px;
}

.btn-circle.btn-xl .glyphicon {
line-height: 40px;}

#napisy span {
font-size: 30px !important;
line-height: 20px !important;
}

#napisy {
width: 80%;
height: 60px;
line-height: 35px;
overflow: hidden;
padding: 8px 15px 15px 14px;
margin: 15px auto 10px 10%;
position: absolute;
bottom: 40px;
border-radius: 10px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.75);
}

.opis .glyphicon {
font-size: 2em !important;
}

.breadcrumbs{
font-size: 0.8em !important;}


}

@media screen and (min-width: 1701px) and (max-width: 1950px) {

#content p,#content .btn,#content div,#content span,#content h4,  #content ol {
font-size: 22px;
line-height:30px;
}

.smaller {
font-size: 16px !important;
line-height:30px !important;
}

.bigger {
font-size: 22px !important;
line-height:55px !important;
}
#content h1 {
font-size: 70px;  
}
#content h2 {
font-size: 50px;
color:  #46C8FF;    
}
#content h3 {
font-size: 35px;  
}
#bNotes {
font-size: 100%;
}
.menuButton {
font-size: 180%;
padding-left: 40px;
}
.previousSlide {
left: 1.5%;
top: 45%;
}
.nextSlide {
right: 1.5%;
top: 45%;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 40px;
}

.btn-circle.btn-xl .glyphicon {
line-height: 40px;}

#napisy span {
font-size: 30px !important;
}

#napisy {
width: 80%;
height: 60px;
line-height: 35px;
overflow: hidden;
padding: 8px 15px 15px 14px;
margin: 15px auto 10px 10%;
position: absolute;
bottom: 40px;
border-radius: 10px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.75);}


.opis .glyphicon {
font-size: 2em !important;
}
.breadcrumbs{
font-size: 1em !important;}

}

@media screen and (min-width: 1951px) {  
#content p,#content .btn,#content div,#content span,#content h4, #content ol {
font-size: 30px;
line-height:40px;
}

.smaller {
font-size: 22px !important;
line-height:30px !important;
}

.bigger {
font-size: 60px !important;
line-height:75px !important;
}
#content h1 {
font-size: 70px;  
}
#content h2 {
font-size: 60px;
color:  #46C8FF;    
}
#content h3 {
font-size: 45px;  
}

.menuButton {
font-size: 200%;
padding-left: 40px;
}
.previousSlide {
left: 1.5%;
top: 45%;
}
.nextSlide {
position: absolute;
right: 1.5%;
top: 45%;
}
.btn-circle.btn-xl {
width: 70px;
height: 70px;
padding: 10px 16px;
font-size: 24px;
line-height: 40px;
}

.btn-circle.btn-xl .glyphicon {
line-height: 40px;}

#napisy span {
font-size: 30px !important;
line-height: 50px;
}

#napisy {
width: 80%;
height: 80px;
line-height: 35px;
overflow: hidden;
padding: 8px 15px 15px 14px;
margin: 15px auto 10px 10%;
position: absolute;
bottom: 40px;
border-radius: 10px;
vertical-align: middle;
background: rgba(255, 255, 255, 0.75);}


.opis .glyphicon {
font-size: 2em !important;
}

.breadcrumbs{
font-size: 1em !important;}

}