.jumbotron {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron h1 {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}
.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button ::first-letter{
	text-transform: uppercase;
}
.pytanie{
	margin:20px 0;
	padding:20px;
	font-size:larger;
	font-weight:bold;
	width:90%;
	box-sizing:border-box;
	text-align:left;
	background: #343a40;
	color: #ffffff;
}
.odpowiedzlitera{
	margin:20px;
	padding:20px 25px;
	font-size:larger;
	font-weight:bold;
	box-sizing:border-box;
	text-align:left;
	border: 2px solid #343a40;
	color: #343a40;
	float: left;
	text-align:center;
}
.odpowiedz{
	margin:20px;
	padding:20px;
	font-size:larger;
	font-weight:bold;
	width:80%;
	box-sizing:border-box;
	text-align:left;
	float: left;
}
.kontenerodp{
	vertical-align:center;
}
.liner{
	width:87%;
	clear:both;
}
.liner hr{
	border: 3px dashed #343a40;
    border-style: none none dashed; 
    color: #fff; 
    background-color: #fff;
	padding-top:5px;
}
.odpowiedzlitera:hover {
	background: yellow;
}
.nastepne{
	margin:20px;
	padding:20px 50px;
	font-size:larger;
	font-weight:bold;
	box-sizing:border-box;
	text-align:left;
	background: #343a40;
	color: #ffffff;
	float: left;
	text-align:center;	
}
@media all and (orientation: portrait) {
	.left1, .right1{
		  display:none;
	  }
	article{
		width:100%;
		height:80%;
		float:left;
	}
	object{
		width:100%;
		height:100%;
		float:left;
		overflow:hidden !important;
		box-sizing:border-box;
	}
	.ans1, .ans2 {
		width:100%;
		box-sizing:border-box;
		float:left;
		height:25vh;
		text-align:center;
		overflow-x: hidden !important;
		overflow-y: scroll;
	}
	.opdf{
		width:100%; 
		height:65vh; 
		float:left; 
		overflow:hidden !important; 
		box-sizing:border-box;
	}
  .breadcrumbs{
	  width:100%;
	  margin-top:0.5%;
	  margin-bottom:0.5%;
	  background:#f4511e;
	  box-sizing:border-box;
  }
  .breadcrumbsinner{
	  width:95%;
	  margin-left:auto;
	  margin-right:auto;
	  line-height:200%;
	  color: #ffffff;
	  font-size: 12px;
  }
  .breadcrumbs a{
	  color:#ffffff;
	  text-decoration:none;
  }
	.btnobszar, .btnmain, .btnkwalifikacja{
		vertical-align:middle; 
		width:90% !important;
	}
}
@media all and (orientation: landscape) {
	.left1, .right1{
		width:20%;
		box-sizing:border-box;
		float:left;
		height:80%;
		text-align:center;
	}
	article{
		width:80%;
		float:left;
		height:95%;
		overflow-y:scroll;
	}
	object{
		width:90%;
		height:100%;
		float:left;
		overflow:hidden !important;
		box-sizing:border-box;
	}
	.ans1, .ans2 {
		width:20%;
		box-sizing:border-box;
		float:left;
		height:80vh;
		text-align:center;
		overflow-x: hidden !important;
		overflow-y: scroll !important;
	}
	.opdf{
		width:80%; 
		height:80vh; 
		float:left; 
		overflow:hidden !important; 
		box-sizing:border-box;
	}
  .breadcrumbs{
	  width:100%;
	  background:#f4511e;
	  box-sizing:border-box;
  }
  .breadcrumbsinner{
	  width:75%;
	  margin-left:auto;
	  margin-right:auto;
	  line-height:150%;
	  color: #ffffff;
	  font-size: 18px;
  }
  .breadcrumbs a{
	  color:#ffffff;
	  text-decoration:none;
  }
	.btnobszar{
		vertical-align:middle; 
		width:40% !important;
	}
	.btnmain{
		vertical-align:middle; 
		width:45% !important;
	}
	.btnkwalifikacja{
		vertical-align:middle; 
		width:23% !important;
	}
	
}
  .clear{
	  clear:both !important;
  }

	input[type="radio"] {
		display:none;
	}
	input[type="radio"] + label{
		outline-offset: 4px;
		margin: 3px 6px;
		cursor: pointer;
		padding: 0px 4px;
		border: 1px solid red;
		color: red;
		font: bold 16px Arial;
		position: relative;
	}
	input[type="radio"]:checked + label{
		background: rgb(0,0,0);
		color: rgb(0,0,0);
		border: 1px solid black; 
	}
	.perfect input[type="radio"] + label{
		background: green;
	}
	table{
		border-collapse: collapse;
		background: #ffffff;
		width:90%;
	}
	td{
		padding: 0px;
	}
	.odpowiedzi {
		margin: 5px; 
	}

	.odpowiedzi th {
		padding: 4px;
		width:1.5em;
		font: bold 13px Arial; 
		text-align: center;    
	} 
	.odpowiedzi td {
		padding: 10px 10px; 
		margin: 0px;
		text-align: center;
	}

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #f4511e;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 150px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
 }
.button2 {
  background-color: #6abc57;
 }
 

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 25px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}
.button ::first-letter{
	text-transform: uppercase;
}
.pytanie{
	margin:20px 0;
	padding:20px;
	font-size:larger;
	font-weight:bold;
	width:90%;
	box-sizing:border-box;
	text-align:left;
	background: #343a40;
	color: #ffffff;
}
.odpowiedzlitera{
	margin:20px;
	padding:20px 25px;
	font-size:larger;
	font-weight:bold;
	box-sizing:border-box;
	text-align:left;
	border: 2px solid #343a40;
	color: #343a40;
	float: left;
	text-align:center;
}
.odpowiedz{
	margin:20px;
	padding:20px;
	font-size:larger;
	font-weight:bold;
	width:80%;
	box-sizing:border-box;
	text-align:left;
	float: left;
}
.kontenerodp{
	vertical-align:center;
}
.liner{
	width:87%;
	clear:both;
}
.liner hr{
	border: 3px dashed #343a40;
    border-style: none none dashed; 
    color: #fff; 
    background-color: #fff;
	padding-top:5px;
}
.odpowiedzlitera:hover {
	background: yellow;
}
.nastepne{
	margin:20px;
	padding:20px 50px;
	font-size:larger;
	font-weight:bold;
	box-sizing:border-box;
	text-align:left;
	background: #343a40;
	color: #ffffff;
	float: left;
	text-align:center;	
}