/*
 Theme Name:   ZSI w Słupsku
 Description:  Zespół Szkół Informatycznych w Słupsku rok 2021
 Author:       Krystian Skoczeń
 Author URI:   https://werkris.pl
 Template:     ZSI
 Version:      1.2.4
*/
 
body{
  background-color: #EBECEC;
  margin: 0;
  padding: 0;
  font-family: 'Bahnschrift', sans-serif;
}
.scroll {
	overflow-y: hidden;
}
nav {
	clear: both;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
	background-color: #EBECEC;

}

nav img {
	float: right;
	margin-top: 15px;
	height: 60px;
	padding: 0.5%;
}

.small_img {
	height: 40px;
	margin-top: 1%;
	padding: 0 1%;
}
a{
  text-decoration: none;
}

p, li, a{
  font-size: 2vh;
}

.left_top_menu {
	height: 80px;
	position: relative;
	margin: 0 2%;
}
.small_top_menu {
	height: 7vh;
}

.hamburger {
	float: left;
	position: absolute;
	bottom: 0;
}

.hamburger .line{
  width: 30px;
  height: 2px;
  background-color: #0A64AA;
  display: block;
  margin: 8px auto;
  transition: all 0.3s ease-in-out;
}

.hamburger:hover{
  cursor: pointer;
}
.hamburger:hover .line {
	background-color: #ff6600;
}
li.hamburger {
	width: auto;
	padding: 0 1%;
	transform: translateY(30%);
}

#hamburger.is-active{
  transform: translateY(30%) rotate(90deg);
  border: 0;
}

#hamburger.is-active .line:nth-child(2){
  transition: none;
}

#hamburger .line:nth-child(2){
  transition-delay: 0.3s;
}


#hamburger.is-active .line:nth-child(2){
  opacity: 0;
}

#hamburger.is-active .line:nth-child(1),
#hamburger.is-active .line:nth-child(3){
  width: 30px;
  transform-origin: right;
}

#hamburger.is-active .line:nth-child(1){
  transform: translateY(10px) rotate(45deg);
}

#hamburger.is-active .line:nth-child(3){
  transform: translateY(-10px) rotate(-45deg);
}

.nav {
	width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
}
.nav li{
	display: inline-block;
	transition: all 0.3s ease-in-out;
	color: #0A64AA;
	width: 80px;
	height: auto;
}

.nav li a img {
	margin: 0;
	width: 100%;
	height: auto;
	transform: translateY(-10%);
}
.nav li:hover {
	cursor: pointer;
}
.nav .logo {
	position: absolute;
	right: 0;

}
.nav .logo button {
	border: none;
	background: #0A64AA;
	border-radius: 0;
	width: 48px;
	height: 48px;
}
.nav .logo button img{
	width: 48px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}
.nav .logo:hover button {
	background-color: #ff6600;
}
.nav .logo .logo_glowne {
	width: 100%;
	height: auto;
}

.nav .social {
	border-left: solid 1px #0A64AA;
	padding-left: 4px;
}
.nav .social:nth-child(1) {
	border-right: solid 1px #0A64AA;
}
.nav .phone {
	border-right: solid 1px #0A64AA;
	border-left: solid 1px #0A64AA;
}
.nav .logo {
	border-left: solid 1px #0A64AA;	
	border-right: solid 1px #0A64AA;	
}
.nav .sliding a i {
	left: 0;
	transform: translateX(50%);
}
.nav .search {
	display: none;
}
.nav .sliding button{
	border: none;
	background: #0A64AA;
	border-radius: 0;
	width: 48px;
	height: 48px;
}
.nav .sliding button img{
	width: 48px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);

}

.nav .sliding:hover button{
	background: #ff6600;
}
.sliding p{
	opacity: 0;
	text-transform: uppercase;
	transition: all 0.5s ease-in-out;
	
}
.sliding:hover p {
	display: inline-block;
	transition: all 0.5s ease-in-out;
	opacity: 1;
}
.slide_menu {
	display: inline-block;
	margin: 2%;
	width: 96%;
	height: 55px;
	text-align: center;
	background-color: #0A64AA;
}
.open_slide {
	position: relative;
	display: none;
}
.slide_menu .dropdown:first-child {
}
.slide_menu .dropdown{
	position: relative;
	height: 55px;
	width: calc(12.7% - 0.2%);
	text-align: center;
	color: #0A64AA;
	transition: all 0.3s ease-in-out;
}
@media screen and (max-width: 992px) {
	.open_slide {
		display: none;
	    background-color: #0A64AA;		
	}
	.slide_menu .dropdown {
		width: 100%;
		left: 50%;
	    transform: translateX(-50%);
	    background-color: #0A64AA;
	    color: #EBECEC;
	}
	.slide_menu .dropdown a {
		color: #EBECEC;
	}
}
.slide_menu .dropdown:hover{
	cursor: pointer;
	color: #EBECEC;
	background-color: #ff6600;
	margin: 0;
	transition: all 0.3s ease-in-out;
}

.dropdown .dropbtn {
	position: absolute;
	text-transform: uppercase;
	background-color: transparent;
	border: none;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14px;
	color: #fff;
	width: 100%;
	height: 55px;
	margin-top: 0;
}
.dropdown .dropbtn:focus {
	outline: none;
}
.dropdown:hover a{
	color: #EBECEC;
}
.dropdown.active {
	color: #EBECEC;
	background-color: #0A64AA;
}
.dropdown .dropbtn a {
	font-size: 14px;
	text-transform: uppercase; 
	text-decoration: none;
	color: #fff;
}
@media (max-width: 1555px) and (min-width: 1385px){ 
	.dropdown .dropbtn, .dropdown .dropbtn a {
		font-size: 14px;
	}
}
@media (max-width: 1384px) and (min-width: 1215px){ 
	.dropdown .dropbtn, .dropdown .dropbtn a {
		font-size: 12px;
	}
}
@media (max-width: 1214px) and (min-width: 1050px){ 
	.dropdown .dropbtn, .dropdown .dropbtn a {
		font-size: 10px;
	}
}
.dropdown .dropbtn a:hover {
	color: #EBECEC;
}
.dropdown_content a {
  color: #EBECEC;
  padding: 12px 16px;
  text-decoration: none;
}
.dropdown_content{
	display: none;
	width: 100%;
	height: 85vh;
	background-color: #0A64AA;
	margin: 0 0 2% 0;
	border-top: 1px solid #ff6600;
}
.open_dropdown {
	display: inline-block;
	position: relative;
}
.dropdown_content .dropdown_column a {
	padding: 0;
	font-size: 16px;
}
.dropdown_column {
	display: inline-grid;
	width: 25%;
	margin: 2% 0;
	text-align: center;
}
.dropdown_column li { 
	width: 50%;
	border-bottom: solid 1px #EBECEC;
	list-style: none;
}
.dropdown_column li:last-child { 
	border-bottom: none;
}
.dropdown_column li:hover {
	outline: solid 1px #EBECEC;
}
.dropdown_column li button {
	width: 100%;
    height: 100%;
    padding: 4% 0;
    background-color: transparent;
    border: none;
    outline: none;
}
.show {
	display: block;
}
.page_title_header {
	margin-top: 10%;
}
.page_title {
	padding: 2% 0;
}
.page_title .title_main {
	font-size: 25px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #0A64AA;
}
@media only screen and (max-width: 992px) {
	.page_title {
		padding: 5% 0;
		position: relative;
	}
	.page_title .title_main {
		font-size: 40px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	}
	.page_title_header {
		margin: 20% 0 0;
	}
	.page_title_header .title_main {
		bottom: 100%;
	}
}
.container_button {
	padding: 0 2% 4%;
	width: calc(100% - 4%);
	margin: 2% 2% 5%;
    border-bottom: solid 1px #0A64AA;
}
@media only screen and (max-width: 992px) {
	.container_button {
		margin-top: 10%;
	}
}
.container_button_small {
	margin-top: 2%;
	margin-bottom: 5%;
}
@media only screen and (max-width: 992px) {
	.container_button_small {
		margin-top: 10%;
	}
}
.container_button a {
	display: inline-block;
	margin: 1%;
	width: 100%;
}
.container_button .button {
	width: 100%;
	height: 80px;
	font-size: 18px;
	background-color: #0A64AA;
	color: #EBECEC;
	border: none;
}
@media only screen and (max-width: 992px) {
	.container_button .button{
		font-size: 40px;
	}
}

.containery {
	margin-top: 2%;
}
.baner a img {
	width: 100%;
}
.containery:first-child {
	margin-top: 25vh;
}
.aktualnosci .containery:first-child {
	margin-top: 30vh;
}
.baner:first-child {
	margin-top: 18.5vh;
}


.carousel-indicators {
    top: 80%;
    left: 15%;
    z-index: auto;
}

.carousel-indicators li {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 1px;
    cursor: pointer;
    background-color: #000\9;
    background-color: rgba(0,0,0,0);
    border: 1px solid #fff;
    border-radius: 0;
}

.carousel-indicators .active{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 1px;
    cursor: pointer;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
}
.carousel-inner {
	width: calc(100% - 4%);
	margin: 0 2%;
}
.carousel-inner img { 
	width: auto;
	height: 100%;
	object-fit: cover;
}
.containery .row {
	margin: 2%;
	height: auto;
	border-bottom: solid 1px #0A64AA;
}
.containery_center {
	padding-bottom: 10vh;
}
.containery:nth-child(2) .row {
    padding-top: 2%;	
}
.containery .row .containery_main {
	margin: 0 0 0 1%;
	height: 60%;
	padding: 0;
	color: #0A64AA;
	/** background-color: #0A64AA; 
	animation: main_img-left 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;	**/
}


.containery .row .containery_main .table {
	border: 1;
	border-color: #00000a; 
}
.containery .row .containery_main .table tr:hover {
	opacity: 0.5;
}
.containery .row .containery_main .table .table_header:hover {
	opacity: 1;
}
.containery .row .containery_main .table .table_header {
	text-transform: uppercase;
	font-weight: bolder;
}

/**@keyframes 
	main_img-left
	{
		0%{transform:translateX(-300%)}
		100%{transform:translateX(0)}
	}**/
.date {
    padding: 0 2%;
    color: #0A64AA;
    text-align: left;
}
.main_img {
	width: 350px;
	max-width: 100%;
	height: 350px;
	position: absolute;
	right: 0;
	transform: translateX(-60%);
	/** border: solid 25px #0A64AA;
	animation: main_img-left 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay: 1.5s; **/
	object-fit: cover;
}

.main_img2 {
	width: 350px;
	max-width: 100%;
	height: 350px;
	position: absolute;
    transform: translateX(205%);
}

/**@keyframes 
	title-right {
		0%{transform:translateX(200%)}
		100%{transform:translateX(0)}
	}**/
.news {
	min-height: 400px;
	position: relative;
}

.news_tm {
	position: static;
	margin-top: 15%;
}

/**.news_tm .title {
		transform: translateY(-60%);
}
.news_tm .news_more {
		transform: translateY(-100%);
}
.news_pr{
	position: static;
}
.news_pr .title, .news_pr .news_more {
	transform: translateY(0);
}*/

.center {
	text-align: center;
}
.center p {
	text-transform: uppercase;
	font-weight: bolder;
}
.center ul {
	list-style-type: none;
}
.main_txt {
	color: #0A64AA;
	/**animation: main_img-left 3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation-delay: 1.5s;**/
}
.main_txt .right {
	display: flex;
	justify-content: flex-end;
}
.main_txt ul {
	list-style: disc;
}
.alone_photo {
	height: 40vh;
}
@media (max-width: 1520px){
	.main_img {
		transform: translateX(-50%);
	}
}
@media (max-width: 1400px){
	.containery .row .containery_main {
		margin: 0 0 0 9%;
	}
	.main_img {
		transform: translateX(-50%);
	}
}
@media (max-width: 1280px){
	.containery .row .containery_main {
		margin: 0;
	}
	.main_img {
		transform: translateX(-20%);
	}
	.date {
		padding: 0 5%;
	}
}
@media only screen and (max-width: 992px) {
	.main_txt p a, .main_txt ul li a, .main_txt ol li a, .main_txt ul li, .main_txt ol li{
		font-size: 32px;
	}
}
@media (max-height: 900px) {
	.containery:first-child {
	margin-top: 30vh;
}
	.main_txt {
		margin: 4%;
	}
}
.main_txt p {
	font-size: 2vh;
}
.main_txt img {
	position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}
.main_txt .odys_img {
	width: 270px;
	height: auto;
}
.main_img_uz img{
	left: 0;
	transform: translateX(0); 
}
.main_txt .col-md-4 .img {
	width: 100%;
	height: 350px;
	object-fit: contain;
}
.main_txt .title, .title {
	text-transform: uppercase;
	font-weight: bold;
	font-size: 4vh;
	color: #0A64AA;
	/** animation: title-right 4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; **/
}
.main_txt table td {
	font-size: 2vh;
}
.newsletter { 
	background-color: #EBECEC;
	color: #0A64AA;
	/**position: relative;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);**/
	display: none;
	margin: 1% 2%;
	width: 600px;
	height: 720px;
	border: none;
	border-radius: 0;
}
.news .panel { 
	background-color: #EBECEC;
	color: #0A64AA;
	/**position: relative;
	top: 50%;
	left: 50%;
	transform: translateX(-50%);**/
	display: none;
	margin: 1% 2%;
	width: 100%;
	height: auto;
	border: none;
	border-radius: 0;
}
.news_more {
  width: 250px;
  height: 40px;
  position: relative;
  background: #ff6600;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  color: #EBECEC;
}
.news_more:hover {
	color: #EBECEC;
}
.news_more:focus, .news_more:active {
	border-radius: 0;
	outline: none;
}
.news_more:before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  border-right: 50px solid #EBECEC;
  border-top: 40px solid transparent;
}
.page_photo {
	margin: 0 2%;
	padding: 0 0 4%;	
	border-bottom: solid 1px #0A64AA;
}
.page_photo img {
	padding: 0;
	width: 100%;
	height: 300px;
	max-height: 100%;
	object-fit: cover;
}
.page_photo .pp_title {
	font-size: 20px;
	color: #0A64AA;
	text-align: center;
}
.containery_margin {
	margin-top: 20vh;
}
.containery .shl {
    width: auto;
    height: auto;
    text-align: center;
}
.containery .shl .shl_item{
	height: 460px;
	position: relative;
}

.containery .shl_rek .shl_item {
	height: 560px;
} 
.containery .shl .shl_item i {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
}
.containery:nth-child(2) .row.shl {
	padding: 0;
}
.containery .shl .shield{
    height: auto;
    position: static;
    display: inline-block;
    padding-top: 4%;
    transition: all 0.3s ease-in-out;
    padding-bottom: 4%;
}
.containery .shl .shl_item {
	display: inline-block;
	text-align: center;
	padding-top: 8%;
	transition: all 0.3s ease-in-out;
}
.containery .shl .shl_item:hover {
	transition: all 0.3s ease-in-out;
	background-color: #ff6600;
	cursor: pointer;
}
.containery .shl .shl_item:hover p, .containery .shl .shl_item:hover i{
	color: #EBECEC;

}
.containery .shl_item img, .containery .shield img {
    width: 20vh;
}
.containery .shl p {
	padding-top: 6%;
	font-size: 25px;
}
.containery .shl i {
	display: block;
	color: #ff6600;
	padding-bottom: 8%;
	padding-top: 4%;
}
@media screen and (max-width: 1540px) {
	.containery .shl .shl_item {
		height: 420px;
	}
	.containery .shl_rek .shl_item {
		height: 500px;
	}
}
@media screen and (max-width: 1400px) {
	.containery .shl .shl_item {
		height: 380px;
	}
	.containery .shl_rek .shl_item {
		height: 430px;
	}
	.containery .shl_item img {
		width: 160px;
	}	
	.containery .shl p {
		font-size: 25px;
	}
}
@media screen and (min-width: 992px) and (max-width: 1280px) {
	.containery .shl .shl_item {
		height: 300px;
	}
	.containery .shl_rek .shl_item {
		height: 340px;
	}
	.containery .shl_item img {
		max-width: 120px;
	}
	.containery .shl p {
		font-size: 20px;
	}	
}

/* CONTACT */
.contact {
	margin: 25vh 2% 0;
	border-bottom: solid 1px #0A64AA;
}
.contact .map {
	padding: 0;
}
.contact .map iframe {
	width: 100%;
	height: 450px;
}
.contact .contact_text {
	color: #0A64AA;
	text-align: center;
}
.contact .contact_text h4 {
	padding-top: 3%;
}
.contact .contact_text .fas {
	font-size: 25px;
}
.containery .row .containery_main .cytat {

	text-align: right;
	color: #0A64AA;
}
.containery_follow .news{
	padding-bottom: 2%;
	padding-left: calc(5% - 2%);
	margin: 0;
}
.containery_main_cytat {
	padding-right: calc(7% - 2%);
}
.containery_follow .containery_main_img_follow {
	width: 30%;
}
.contact .contact_text h4:first-child {
	padding-top: 0;
	margin-top: 0;
}

/* GALLERY */
.gallery {
	margin: 15% 2% 0;
}
.gallery .gallery_title {
	text-align: center;
	text-transform: uppercase;
	color: #0A64AA;
	font-weight: bold;
}
.gallery .row {
	margin: 0;
}
.gallery .gallery_img {
	padding: 0;
}
.gallery .row .gallery_img .container_img img {
	width: 100%;
	height: 400px;
	max-height: 100%;
	object-fit: cover;
}
.gallery .container_img .layer {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    display: none;
}
.gallery .container_img .layer p, .gallery .container_img .layer .fa {
	font-size: 50px;
	color: #EBECEC;
}
.hover:hover .layer {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.image-set {
	margin-top: 5%;
}
.image-set .img-responsive {
	width: 100%;
	height: 300px;
	object-fit: cover;
}
.dumni .row .gallery_img .container_img img {
	height: 550px;
	object-fit: contain;
}
/* CERT */
.footer_contact {
	text-align: center;
	padding: 2%;
	padding-bottom: 0;
	height: auto;
}
.footer_contact ul {
	list-style: none;
}
.footer_contact a {
	text-decoration: none;
}
.footer_contact img {
	max-width: 100%;
}
.footer_contact a img {
	height: 200px;
	width: 200px;
	object-fit: contain;
}
.cert {
	padding: 0 2%;
	width: 100%;
}
.cert ul {
	padding-bottom: 2%;
	text-align: center;
	/*border-bottom: solid 1px #0A64AA;*/
}
.cert ul li {
	text-decoration: none;
	width: 10%;
	display: inline-block;
	margin: 0;
}
.cert ul li:first-child {
	margin: 0;
}
@media(max-width: 1280px){
	.cert ul li {
		margin: 0 3px;
	}
	.cert ul li:first-child {
		margin: 0;
	}
}
@media(max-width: 992px){
	.cert ul li {
		margin: 0 2px;
	}
	.cert ul li:first-child {
		margin: 0;
	}
}

.cert .cert_img {
	width: 100%;
	height: 100px;
	object-fit: contain;
}
.cert .cert_img:hover {
	transform: scale(2);
	cursor: zoom-in;
}
.qr:first-child {
	text-align: end;
}
.qr:last-child {
	text-align: start;
}
.qr img {
	width: 40%;
	height: auto;
}
/* FOOTER */
footer {
	margin: 4% 2% 0;
}
.footer {
	color: #0A64AA;
	width: 100%;
	height: 30px;
	z-index: 101;
}
.footer p {
	text-align: right;	
}
.our_teacher {
	width: auto;
	margin: 2% 0;
}
.our_teacher .teacher:first-child {
	margin: 2% 0 0;
}
.our_teacher .teacher {
	position: relative;
    left: 50%;
    transform: translateX(-50%);
	background-color: #0A64AA;
	color: #EBECEC;
	width: 60%;
	height: 70px;
	border: 1px solid #EBECEC;
}
.our_teacher .teacher p {
	font-size: 18px;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	text-align: center;
}
.our_teacher .panel{
	background-color: #EBECEC;
	color: #0A64AA;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	margin: 0 2%;
	width: 56%;
	border: none;
	border-radius: 0;
}
.our_teacher .panel img{
	position: relative;
	right: 0;
	width: 20%;
}
.teacher:focus {
	outline: none;
}
/**@media only screen and (max-width: 992px) {
	.scroll {
		overflow-y: scroll;
	}
	.slide_menu {
		display: none;
	}
	.open_slide {
		display: inline-block;
	}
	.open_slide .dropdown {
		width: 100%;
	}
}**/

@media only screen and (min-width: 768px) and (max-width: 992px) {
	.slide_menu .dropdown:first-child {
		border-left: none;
	}
	.slide_menu .dropdown {
		margin: 0;
		border: none
	}
	.dropdown .dropbtn {
		font-size: 32px;
	}
	.dropdown .dropbtn a {
		font-size: 32px;
	}
	.containery:first-child {
		margin-top: 15vh;
	}
	.containery .title {
		font-size: 40px;
	}
	.containery .more {
		font-size: 26px;
		width: 80%;
	}
	.containery {
		margin-top: 1%;
	}
	.main_txt p{
		font-size: 32px;
	}
	.main_img {
	    position: relative;
	    right: -30%;
	    margin: 2% 0;
	}

	.dropdown_column {
		display: inline-grid;
		width: 45%;
		margin: 2% 0;
	}
	.dropdown_column li { 
		width: 75%;
		border-bottom: solid 1px #EBECEC;
		list-style: none;
		padding: 2% 0;
	} 
	.dropdown_content .dropdown_column a {
		font-size: 32px;
	}
	.modal-content {
		width: 80%;
	}
	.carousel-indicators li, .carousel-indicators .active{
		width: 10px;
		height: 10px;
	}
	.qr img {
		width: 70%;
		height: auto;
	}
}


.img-background {
	width: 60%; height: auto; position: absolute; right: 50%; transform: translateX(50%); top: 50%; 
}

@media only screen and (max-width: 991px) {
	.left_top_menu {
		height: 100px;
		position: relative;
		margin: 0 2%;
	}
	.nav li {
		width: 100px;
	}
	.hamburger .line {
		width: 60px;
		height: 4px;
		margin: 12px auto;
	}
	#hamburger.is-active .line:nth-child(1), #hamburger.is-active .line:nth-child(3){
		width: 60px;
		height: 4px;
		margin: 8px auto;
	}
	#hamburger.is-active .line:nth-child(1){
	  transform: translateY(20px) rotate(45deg);
	}

	#hamburger.is-active .line:nth-child(3){
	  transform: translateY(-15px) rotate(-45deg);
	}
	.nav .sliding {

	}
	.nav .sliding button, .nav .logo button {
	width: 68px;
	height: 68px;
	}
	.nav .sliding button img{
		width: 68px;
	}
	img.rekrutacja_logo {
		width: 5vw;
		height: auto;
	}
	.containery:first-child {
		margin-top: 5vh;
	}
	.carousel-indicators {
	    left: 25%;
	}
	.carousel-indicators li {
	    width: 30px;
	    height: 30px;
	    margin: 2px;
	}

	.carousel-indicators .active{
	    width: 30px;
	    height: 30px;
	    margin: 2px;
	}
	.containery .shl_item img {
		width: 80%;
	}
	.containery .shl p {
		font-size: 35px;
	}
	.containery .shl .shl_item i {
		position: static;
	}
}

.baner_ogolne  img{
	height: 30vh;
    width: 96%;
    object-fit: cover;
    margin: 2%;
}
.containery .drzwi {
	height: 500px;
	background-color: #2476B9;
}
.containery .drzwi .title {
	color: #EBECEC;
	padding-top: 5vh;
}
.containery .drzwi .wejdz_napis {
	font-size: 20vh;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translateX(-50%);
	padding: 0;
	color: #EBECEC;
}
.containery .drzwi .drzwi_click .wejdz {
	position: absolute;
	border: solid 2px #2476B9;
}
.containery .drzwi .drzwi_click .wejdz:hover {
	opacity: 0;
}

.containery .drzwi .drzwi_img {
	border: solid 2px #fff;
} 
@media only screen and (max-width: 767px) {
	.baner:first-child {
    margin-top: 18.5vh;
	}
	.left_top_menu {
		height: 100px;
	}
	nav img {
		height: 80px;
		margin-top: 10px;
	}
	.main_img {
	    position: relative;
	    width: 100%;
	    margin: 2% 0;
	}
	.dropdown_column li {
    	width: 100%;
    }
	.cert .cert_img {
	    height: auto;
	}
	.our_teacher .teacher {
		position: relative;
	    left: 50%;
	    transform: translateX(-50%);
		background-color: #0A64AA;
		color: #EBECEC;
		width: calc(100% - 4%);


	}
	.carousel-indicators li, .carousel-indicators .active{
		width: 10px;
		height: 10px;
	}
	.containery .shl_item img, .containery .shield img {
    width: 50%;
	}
	.qr {
		display: none;
	}
}
@media only screen and (min-width: 992px) {
	.col-na-7 {
		width: 14%;
	}
}

/*
Pop-Up bullshit right here
*/

 .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
        }

        .popup-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .popup-content {
            background-color: white;
            padding: 20px;
            border-radius: 5px;
            position: relative;
            max-width: 80%;
            max-height: 80%;
            overflow: auto;
        }

        .close-popup {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 5px 10px;
            font-size: 18px;
            cursor: pointer;
            background-color: #f44336;
            color: white;
            border: none;
            border-radius: 4px;
        }

        .close-popup:hover {
            background-color: #d32f2f;
        }

        .popup-image {
            max-width: 100%;
            height: auto;
            display: block;
            max-width: 70vw;
            max-height: 70vh;
        }