@import url('https://fonts.googleapis.com/css2?family=Georama:wght@300&family=Mali:wght@200&display=swap');

	*
	{
  	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}
	
	body
	{
	overflow-x: hidden; 
	}
	
	#banner
	{
    display:flex;
	width: 100%;
    height: 100vh;
	background-image: url("images/bg.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	}
		.photo
	{
		display: none;
	}
	#banner_zatrudniamy
	{
    display:flex;
	width: 100%;
    height: 100vh;
	background-image: url("images/bg-zatrudniamy.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	}
	.bg
	{
		display: block;
		position: absolute;
		width: 100%;
		height: 40vh;
		top: 30%;
		text-align: center;
		background-color: rgba(255, 255, 255, 0.4);
	}
		#banner_polityka
	{
    display:flex;
	width: 100%;
    height: 100vh;
	background-image: url("images/bg_polityka.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	}
	.bg_polityka
	{
		display: block;
		position: absolute;
		width: 100%;
		height: 40vh;
		top: 30%;
		text-align: center;
		background-color: rgba(0, 0, 139, 0.4);
	}
	.one
	{
		display: flex;
		position: relative;
		width: 100%;
		height: auto;
		font-family: 'Georama', sans-serif;
		font-size: 30px;
		background-color: #2c62aa;
		color: white;
		justify-content: center;
		text-align: center;
		padding-top: 5%;
		padding-bottom: 5%;
	}
	.two
	{
		display: flex;
		position: relative;
		width: 100%;
		height: auto;
		font-family: 'Georama', sans-serif;
		font-size: 22px;
		background-color: white;
		text-align: justify;
		color: black;
		padding-bottom: 5%;
		padding-top: 5%;
		padding-left: 5%;
		padding-right: 5%;
	}
	.three
		{
		display: flex;
		position: relative;
		width: 100%;
		height: auto;
		font-family: 'Georama', sans-serif;
		font-size: 26px;
		background-color: #2c62aa;
		color: white;
		justify-content: center;
		padding-bottom: 2%;
	}
	
	.center
	{
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		font-family: 'Georama', sans-serif;
		font-size: 22px;
		background-color: white;
		color: black;
		text-align: center;
		padding-bottom: 2%;
		padding-top: 2%;
	}
	.title_bg
	{
		width: 100%;
		display: flex;
		position: absolute;
		padding-top: 15vh;
		padding-right: 3%;
		justify-content: center;
		font-size: 65px;
		font-family: 'Georama', sans-serif;
		color: white;
		font-weight: bold;
	}
	.title
	{
		width: 100%;
		display: flex;
		position: absolute;
		left: 60%;
		top: 66%;
		padding-right: 3%;
		justify-content: center;
		font-size: 50px;
		font-family: 'Georama', sans-serif;
		color: white;
		font-weight: bold;
	}
	.content
	{
		width: 100%;
		display: flex;
		position: absolute;
		left: 60%;
		top: 75%;
		padding-right: 5%;
		text-align: center;
		justify-content: center;
		font-family: 'Georama', sans-serif;
		font-size: 36px;
		color: white;
		font-weight: bold;
	}

	.aos-init.aos-animate
	{
		display: flex;
		width: 100%;
		height: auto;
		justify-content: center;
	}
	
	/*ABOUT*/
	
	.about
	{
	display:flex;
	width: 100%;
    height: 100vh;
	background-image: url("images/ewelina.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;	
	}
	
	.us
	{
		display: flex;
		flex-wrap: wrap;
		position: relative;
		width: 100%;
		height: 100vh;
	}
	.title-box
	{
		width: 100%;
		display: block;
		position: absolute;
		width: 100%;
		padding-right: 50%;
		padding-left: 15%;
		padding-bottom: 20%;
		text-align: left;
		font-family: 'Georama', sans-serif;
		font-size: 49px;
		font-weight: bold;
		color: black;
		top: 12%;
	}
	.box
	{
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		padding-right: 50%;
		top: 5%;
		font-family: 'Georama', sans-serif;
		font-size: 29px;
		text-align: left;
		top: 19%;
		left: 5%;
		color: black;
		padding-top: 5%;
		padding-left: 10%;
	}

	/*TEACHERS*/
	.teachers
	{
	display: block;
	width: 100%;
    height: 100vh;
	background-color: #2c62aa;
	}
	
	.flex-box
	{
		display: flex;
		width: 100%;
		height: auto;
		position: relative;
		padding-left: 12%;
		padding-right: 12%;
		align-items: center;
	}

	
	.title-teachers
	{
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 5%;
		padding-bottom: 4%;
		text-align: center;
		justify-content: center;
		font-size: 49px;
		font-family: 'Georama', sans-serif;
		color: white;
		font-weight: bold;
	}
	
	/*CLEAR*/
	
	#clear
	{
		width: 100%;
		clear: both;
	}
	
	/*COMMENT*/
	.comments
	{
	display: flex;
	width: 100%;
    height: auto;
	background-color: white;
	}
	
	.flex-box
	{
		display: flex;
		width: 100%;
		height: auto;
		position: relative;
		padding-left: 5%;
		padding-right: 5%;
		padding-top: 2%;
		padding-bottom: 2%;
		align-items: center;
	}
	.comennt_one
	{
		display: flex;
		width: 150px;
		height: auto;
	}
	.comennt_one img
	{
		width: 100%;
		height: auto;
	}
	.comment_content
	{
		width: 100%;
		display: block;
		font-family: 'Georama', sans-serif;
		font-size: 23px;
		color: black;
		margin-left: 2%;
	}
	
		.comennt_one_px
	{
		display: flex;
		width: 250px;
		height: auto;
	}
	.comennt_one_px img
	{
		width: 250px;
		height:pauto;
	}
	
	.title-comment
	{
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 5%;
		padding-bottom: 4%;
		text-align: center;
		justify-content: center;
		font-size: 49px;
		font-weight: bold;
		font-family: 'Georama', sans-serif;
		color: black;
	}
	
	/*PRICE*/
	
	.price
	{
	display: block;
	width: 100%;
    height: auto;
	background-color: #2c62aa;
	}
	.price-box
	{
	display: block;
	width: 100%;
	height: auto;
	position: relative
	}
	.title-price
	{
		display: block;
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 5%;
		padding-bottom: 0%;
		text-align: center;
		justify-content: center;
		font-size: 49px;
		font-family: 'Georama', sans-serif;
		color: white;
		font-weight: bold;
	}
	.flex-box-price
	{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		justify-content: center;
		align-items: center;
		padding-bottom: 5%;
	}
	.price-image
	{
	width: 600px;
	margin-right: 3%;
	}
	.price-image img
	{
	width: 600px;
	height: auto;
	margin-right: 3%;
	}
	.price-image-one
	{
	width: 600px;
	}
	.price-image-one img
	{
	width: 600px;
	height: auto;
	}
	
	/*CONTACT*/
	
	#contact
	{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: auto;
		background-image: url("images/bg-contact.webp");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-family: 'Georama', sans-serif;
		}
	.form
	{
		display: flex;
		position: relative;
		width: 40%;
		height: auto;
	}
	
	.ewelina_kontakt
	{
		display: flex;
		position: relative;
		width: 60%;
		height: auto;
	}
	.ewelina_kontakt img
	{
		width: 250px;
		height: 318px;
		margin-top: 45%;
		margin-left: 5%;
	}
	
	.title-contacts
	{
	display: block;
	width: 100%;
	height: auto;
	position: relative
	font-weight: bold;
	}
	.title-contact
	{
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		padding-top: 5%;
		padding-right: 50%;
		font-family: 'Georama', sans-serif;
		color: black;
		font-size: 39px;
		text-transform: uppercase;
		letter-spacing: 3px;
		text-align: center;
	}
	.title-contact-one
	{
		display: block;
		position: absolute;
		width: 100%;
		height: auto;
		padding-top: 10%;
		padding-right: 50%;
		font-family: 'Georama', sans-serif;
		color: black;
		text-align: center;
		font-size: 29px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 3px;
	}
	.contact-form 
	{
		position: relative;
        width: 100%;
		height: auto;
		margin-top: 35%;
		margin-left: 20%;
		margin-bottom: 20%;
	}


        .contact-form em 
		{
		color: black;
		font-size: 18px;
        }

        .contact-form .item {
            position: relative;
            margin: 32px 0;
			font-family: 'Georama', sans-serif;
        }

        .contact-form input, .contact-form textarea {
            padding: 10px 35px;
            width: 100%;
            font-size: 18px;
			font-family: 'Georama', sans-serif;
			background-color: #71a2e3;
            border: none;
			color: black;
            box-sizing: border-box;
        }

        .contact-form label {
            position: absolute;
			color: black;
			bottom: 0px;
			font-family: 'Georama', sans-serif;
			left: 5px;
            transition: 1s all;
            font-size: 1,25em;
            line-height: 40px;
			border: none;
        }

        .contact-form input:focus, .contact-form textarea:focus {
            border: none;
        }

        .contact-form input:focus + label, .contact-form input:valid + label {
            bottom: 40px;
            font-size: 1em;
        	border: none;
			}

        .contact-form input:valid {
            background-repeat: no-repeat;
            background-position: 1% 50%;
            border: 1px solid #0c2419;
            background-color: #71a2e3;
			font-size: 18px;

        }

        .contact-form textarea + label {
            top: 0;
        }

        .contact-form textarea:focus + label, .contact-form textarea:valid + label {
            top: -32px;
            font-size: 1em;
        }

        .contact-form textarea:valid 
		{
            border: none;
        }

        .contact-form input[type="submit"] 
		{
            border: none;
            background-image: none;
            background-color: #71a2e3;
			font-size: 22px;
			color: black;
        }

        .contact-form input[type="submit"]:hover 
		{
        cursor: pointer;
		opacity: 0.7;
		}
		
	
	.mail
	{
		display: block;
		position: absolute;
		top: 50%;
		text-align: center;
		font-size: 32px;
		font-family: 'Georama', sans-serif;
		color: #2c62aa;
	}
	#contact-1
	{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		height: 95vh;
		background-image: url("images/bg-contact.webp");
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		font-family: 'Georama', sans-serif;
		justify-content: center;
		}
	#prv
	{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		background: #2c62aa;
	}
	#prv h1
	{
		display: block;
		position: relative;
		text-align: center;
		font-family: 'Georama', sans-serif;
		color: white;
		padding-top: 1%;
		padding-bottom: 1%;
		font-size: 36px;
	}

	#prv p
	{
		display: block;
		position: relative;
		text-align: center;
		font-family: 'Georama', sans-serif;
		color: black;
		padding-left: 10%;
		padding-right: 10%;
		padding-bottom: 8%;
		padding-top: 8%;
		font-size: 24px;
		background: white;
	}
	.link
	{
	display: block;
	width: 30%;
	position: relative;

	right: 0%;
	margin-left: 20%;
	text-decoration: none;
	color: white;
	font-size: 18px;
	font-family: 'Georama', sans-serif;
	}
	.bymada
	{
	display: block;
	position: relative;
	padding-left: 45%;
	width: 70%;
	color: white;
	font-size: 18px;
	font-family: 'Georama', sans-serif;
	}
	
	/*FOOTER*/
	
	.footer-box
	{
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
		border-top: solid 1px #0c2419;
		background-color: #2c62aa;
		font-family: 'Georama', sans-serif;
		color: white;
	}