/* Google Fonts */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url("css.css");


* {
    margin: 0;
    padding: 0;
}

/* set global font to Open Sans */
body {
font-family: 'Ubuntu', 'sans-serif';
background: url("bckg.png") repeat scroll 0 0;

}

#baner {
width: 100%;
height: auto;
display: inline-block;
padding-bottom: 10px;
}


h4 {
  color: #303F9F;
  font-size: 20px;
  letter-spacing: 0px;
  text-align: center;
  text-decoration: none;
}

h5 {
  font-size: 15px;
  letter-spacing: 0px;
  text-align: center;
  text-decoration: none;
}


a {
text-decoration: none;
}

#instructions {
font: 16px;
color: #009688;
font-weight: bold; 
margin: 0px auto; 
margin-left: auto;
margin-right: auto;
line-height: 30px;
border-radius: 5px;
}

.opis {
font-size: 17px;
float: right;
color: #303F9F;
font-weight: bold;
}

.paper {
padding: 37px 55px 27px;
position: relative;
border: 1px solid #B5B5B5;
background: #F3ECE2;
background: -webkit-linear-gradient(top, #DFE8EC 0%, #F3ECE2 8%) 0 57px;
background: -moz-linear-gradient(top, #DFE8EC 0%, #F3ECE2 8%) 0 57px;
background: linear-gradient(top, #DFE8EC 0%, #F3ECE2 8%) 0 57px;
-webkit-background-size: 100% 30px;
-moz-background-size: 100% 30px;
-ms-background-size: 100% 30px;
background-size: 100% 30px;
}

.paper::after {
content:''; 
position:absolute; 
width:0px; 
top:0; 
left:39px; 
bottom:0; 
border-left:1px solid #F8D3D3;
}


*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100vh;
}

h1 {
  padding: 50px 0;
  font-weight: 400;
  text-align: center;
}

p {
  margin: 0 0 20px;
  line-height: 1.5;
}

main {
  min-width: 320px;
  max-width: 800px;
  padding: 20px;
  margin: 0 auto;

}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

/**************************************/
/*              ZAKŁADKI              */
/**************************************/


label.p,
label.f,
label.a,
label.n,
label.g,
label.c

 {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 15px 25px;
  font-weight: 600;
  text-align: center;
  color: #bbb;
  border: 1px solid transparent;
}

label.p:before,
label.f:before,
label.a:before,
label.n:before,
label.g:before,
label.c:before {

  font-weight: normal;
  margin-right: 10px;
}

label.p[for*='1']:before { content: ' PL '; }
label.p[for*='2']:before { content: ' EN '; }

label.a[for*='1']:before { content: 'Kl. IV'; }


label.n[for*='1']:before { content: 'Kl. IV'; }
label.n[for*='2']:before { content: 'Kl. V'; }
label.n[for*='3']:before { content: 'Kl. VI'; }
label.n[for*='4']:before { content: 'Kl. VII'; }
label.n[for*='5']:before { content: 'Kl. VIII'; }


label.g[for*='1']:before { content: 'Stolice'; }

label.c[for*='1']:before { content: 'Pierwiastki'; }

label.f[for*='1']:before { content: 'Alfabet grecki'; }

/* label[for*='4']:before { content: '\f1a9'; } */

label.p:hover,
label.f:hover,
label.a:hover,
label.n:hover,
label.g:hover, 
label.c:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label.p,
input:checked + label.f,
input:checked + label.a,
input:checked + label.n,
input:checked + label.g,
input:checked + label.c {
  color: #fff;
  border: 1px solid #ddd;
  border-top: 2px solid orange;
  border-bottom: 1px solid #fff;
  background-color: #008896;
}

#p_tab1:checked ~ #p_content1,
#p_tab2:checked ~ #p_content2,
#p_tab3:checked ~ #p_content3,
#p_tab4:checked ~ #p_content4,
#p_tab5:checked ~ #p_content5 {
  display: block;
}

#a_tab1:checked ~ #a_content1,
#a_tab2:checked ~ #a_content2,
#a_tab3:checked ~ #a_content3,
#a_tab4:checked ~ #a_content4,
#a_tab5:checked ~ #a_content5 {
  display: block;
}


#n_tab1:checked ~ #n_content1,
#n_tab2:checked ~ #n_content2,
#n_tab3:checked ~ #n_content3,
#n_tab4:checked ~ #n_content4,
#n_tab5:checked ~ #n_content5 {
  display: block;
}

#g_tab1:checked ~ #g_content1,
#g_tab2:checked ~ #g_content2,
#g_tab3:checked ~ #g_content3,
#g_tab4:checked ~ #g_content4,
#g_tab5:checked ~ #g_content5 {
  display: block;
}

#c_tab1:checked ~ #c_content1,
#c_tab2:checked ~ #c_content2,
#c_tab3:checked ~ #c_content3,
#c_tab4:checked ~ #c_content4,
#c_tab5:checked ~ #c_content5 {
  display: block;
}


#f_tab1:checked ~ #f_content1,
#f_tab2:checked ~ #f_content2,
#f_tab3:checked ~ #f_content3,
#f_tab4:checked ~ #f_content4,
#f_tab5:checked ~ #f_content5 {
  display: block;
}


/**************************************/
/* Karta przedmiotu głównego          */
/**************************************/

.cards {

	padding-right: 0%;
}

.card {

  background-size: 8%;
  background-position: 10px;
  background-repeat: no-repeat;
  
  
  
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	width: 99%;
	float: left;
	display: inline;
	padding: 10px;
	
	background-color: #F8ECC2;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
   
	text-align: center;
	/* background-color: #fefefe; */
}

.przedmiot {
	 color: #009688;
     font-size: 20px;
	 position: relative;   
	 display: flex;
	 align-items: center;
	 height: 50px;
	 font-weight: bold;
	 justify-content: center; 
}

img {
	width: 10%;
	height: 10%;
	float: left;
	/* background-color: #fefefe; */
}


/* Polityka prywatności */
li,
ul,
ol {
margin-left: 20px;	
padding: 5px;
}

#pp_title {

}

#pp_paragraph {
padding: 15px;
font-weight: bold; 
text-align: center;
}


#policy {
margin: 0px auto; 
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}


@media screen and (max-width: 650px) {
	
	.card {
  
  background-size: 12%;
	}
	
  label.a,
  label.n,
  label.c,
  label.g  {
    font-size: 0;
  }
  
  label.a:before,
  label.n:before,
  label.c:before ,
  label.g:before
  {
    margin: 0;
    font-size: 18px;
  }
}

@media screen and (max-width: 400px) {
  label.a,
  label.n,
  label.c,
  label.g {
    padding: 15px;
  }
}