@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,800italic,700italic&subset=latin,latin-ext);

body 
{
	width: 100%;
	margin: 0 0 0 0;
}

#main-wrapper
{
	background-image: url("../images/bg-img.jpg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	text-align: center;
}

#top-navigation
{
	width: 100%;
	text-align: center;
}

#top-navigation #logotype
{
	max-width: 281px;
	display: inline-block;
	margin-top: 30px;
}

#top-navigation #logotype img
{
	max-width: 281px;
}

#top-navigation #phone
{
	max-width: 320px;
	display: inline-block;
	margin: 55px 0 0 50px;
	vertical-align: top;
}

#top-navigation #phone img
{
	max-width: 320px;
}

#top-navigation #navigation
{
	height: 39px;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	margin: 59px 0 0 100px;
}

@media screen and (max-width:1600px)
{
	#top-navigation #navigation
	{
		height: 40px;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		margin: 59px 0 0 40px;
	}
}

@media screen and (max-width:1360px)
{
	#top-navigation #navigation
	{
		height: 40px;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		margin: 59px 0 0 -15px;
	}
	
	#top-navigation #phone
	{
		max-width: 320px;
		display: inline-block;
		margin: 55px 0 0 25px;
		vertical-align: top;
	}
}

#top-navigation #navigation .item
{
	display: inline-block;
	vertical-align: top;
	margin: 8px 0 0 0;
	height: 40px;
}

#top-navigation #navigation .item a
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 22px;
	text-decoration: none;
	color: #553e98;
	margin-left: 50px;
}

#top-navigation #navigation .item a:hover
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	font-size: 22px;
	text-decoration: none;
	color: #553e98;
	margin-left: 50px;
}

#top-navigation #navigation .item .bar
{
	background-color: #553e98;
	height: 5px;
}

#top-navigation #navigation .item #one
{
	width: 85px;
	margin: 1px 0 0 50px;
}

#top-navigation #navigation .item #two
{
	width: 90px;
	margin: 1px 0 0 50px;
}

#top-navigation #navigation .item #three
{
	width: 120px;
	margin: 1px 0 0 50px;
}

#top-navigation #navigation .item #four
{
	width: 125px;
	margin: 1px 0 0 50px;
}

#top-navigation #fb-navigation
{
	height: 50px;
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	margin: 50px 0 0 80px;
}

@media screen and (max-width: 1480px)
{
	#top-navigation #fb-navigation
	{
		height: 50px;
		overflow: hidden;
		display: inline-block;
		vertical-align: top;
		margin: 50px 0 0 20px;
	}
}

@media screen and (max-width: 1420px)
{
	#top-navigation #fb-navigation
	{
		display: none;
	}
}

#top-navigation #menu-fb
{
	width: 20px;
	margin: 13px 0 0 0;
}

#top-navigation #menu-fb #fb-bar
{
	background-color: #3b5998;
	height: 5px;
}

#hero-animation
{
	width: 100%;
	text-align: center;
}

#hero-animation #man
{
	margin: 0 0 0 0;
}

#hero-animation #cr
{
	margin: -240px 0 0 60px;
}

@media screen and (max-width: 600px)
{
	#hero-animation #man img
	{
		width: 70%;
		margin: -20% 0 35% 0;
	}
	
	#hero-animation #cr img
	{
		display: none;
	}
}

#offer-background
{
	width: 100%;
	text-align: center;
}

#offer-background #ima
{
	z-index: 1;	
}

#offer-background #ima img
{
	width: 100%;
	max-height: 1031px;
	height: 1031px;
	margin: -40px 0 0 0;
	z-index: 1;
}

#offer
{
	margin: -940px 0 0 0;
	z-index: 2;
}

#offer #slog
{
	margin: 0 0 30px 0;
}


@media screen and (max-width: 740px)
{
	#offer-background #ima img
	{
		width: 100%;
		min-height: 800px;
		margin: -40px 0 0 0;
	}
	
	#offer
	{
		margin: -850px 0 0 0;
		z-index: 2;
	}
	
	#offer #slog img
	{
		width: 95%;
	}
}

#offer #offer-1
{
	display: inline-block;
	z-index: 2;
}

#offer #offer-1 img
{
	display: inline;
	margin: 0 30px 0 0;
	z-index: 2;
}

#offer #offer-2
{
	display: inline-block;
	margin: -26px 0 0 0;
	vertical-align: top;
}

#prices
{
	width: 100%;
}

@media screen and (max-width: 1680px)
{
	#prices
	{
		width: 100%;
		margin: -50px 0 0 0;
	}
}

@media screen and (max-width: 1480px)
{
	#prices
	{
		width: 100%;
		margin: -60px 0 0 0;
	}
}

@media screen and (max-width: 1360px)
{
	#prices
	{
		width: 100%;
		margin: -65px 0 0 0;
	}
}

@media screen and (max-width: 1280px)
{
	#prices
	{
		width: 100%;
		margin: -70px 0 0 0;
	}
}

@media screen and (max-width: 1156px)
{
	#prices
	{
		width: 100%;
		margin: -100px 0 0 0;
	}
}

@media screen and (max-width: 900px)
{
	#prices
	{
		width: 100%;
		margin: -125px 0 0 0;
	}
}

@media screen and (max-width: 700px)
{
	#prices
	{
		width: 100%;
		margin: 350px 0 0 0;
	}
}

#prices #prices-bg
{
	margin: -26px 0 0 0;
}

#prices #prices-txt
{
	width: 100%;
	margin: -160px 0 0 0;
}

#prices #prices-txt #tf
{
	display: inline-block;
	vertical-align: top;
}

#prices #prices-txt #ff
{
	display: inline-block;
	vertical-align: top;
	margin: -30px 0 0 30px;
}

#courses
{
	width: 100%;
	margin: 100px 0 0 0;
	text-align: center;
}

#courses #pre-def-line
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 26px;
	text-decoration: none;
	color: #3a3a3a;
	width: 45%;
	margin: 160px auto auto auto;
	text-align: left;
}

#courses .next-def-line 
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 22px;
	text-decoration: none;
	color: #3a3a3a;
	width: 45%;
	margin: 20px auto auto auto;
	text-align: left;
}

@media screen and (max-width: 700px)
{
	#courses
	{
		width: 100%;
		margin: 0 0 0 0;
		text-align: center;
	}
}

#courses #first-line-text
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 30px;
	text-decoration: none;
	color: #553e98;
	margin: 140px 0 0 0;
}

#courses #second-line-text
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 62px;
	text-decoration: none;
	color: #553e98;
	margin: 30px 0 50px 0;
}

#courses #third-line-text
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 62px;
	text-decoration: none;
	color: #553e98;
	margin: 100px 0 50px 0;
}

@media screen and (min-width: 741px)
{
		
#courses #one
{
	background: url("../images/pieciolatki_foto_srodek.jpg");
	background-position: center center;
	background-attachment: fixed;
	width: 79.2%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 10.5%;
}

#courses #one:hover
{
	cursor: pointer;
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url("../images/pieciolatki_foto_srodek.jpg") center center fixed;
}

#courses #two
{
	background-image: url("../images/6-8_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-attachment: fixed;
	width: 79.2%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 10.5%;
}

#courses #two:hover
{
	cursor: pointer;
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url("../images/6-8_tlo_srodek.jpg") center center fixed;
}

#courses #three
{
	background-image: url("../images/9-11_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-attachment: fixed;
	width: 79.2%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 10.5%;
}

#courses #three:hover
{
	cursor: pointer;
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url("../images/9-11_tlo_srodek.jpg") center center fixed;
}

#courses #four
{
	background-image: url("../images/12-14_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-attachment: fixed;
	width: 79.2%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 10.5%;
}

#courses #four:hover
{
	cursor: pointer;
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url("../images/12-14_tlo_srodek.jpg") center center fixed;
}

#courses #five
{
	background-image: url("../images/15-18_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-attachment: fixed;
	width: 79.2%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 10.5%;
}

#courses #five:hover
{
	cursor: pointer;
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url("../images/15-18_tlo_srodek.jpg") center center fixed;
}

#courses #six
{
	background-image: url("../images/dopracy_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-attachment: fixed;
	width: 79.2%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 10.5%;
	
}

#courses #six:hover
{
	cursor: pointer;
	background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ),url("../images/dopracy_tlo_srodek.jpg") center center fixed;
}
}

.desc-wrap
{
	padding: 90px 60px 0 60px;
	height: 450px;
}

.head-txt
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 64px;
	text-decoration: none;
	color: #FFFFFF;
	margin: 0 0 90px 0;
}

.desc-txt
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	color: #FFFFFF;
}



#gallery-bg
{
	background-color: #20104d;
	margin: 150px 0 0 0;
}

#mob-gal-ico
	{
		display: none;
	}


#gallery-img img
{
	width: 100%;
}

.button-area
{
	width: 90px;
	height: 90vh;
	display: inline-block;
	vertical-align: top;
}

#up
{
	cursor: pointer;	
}

#down
{
	cursor: pointer;	
}


.button-area .button-gallery
{
	background-color: #553e98;
	width: 90px;
	height: 90px;
	text-align: center;
	margin: 35vh 0 0 0;
}

.button-gallery img
{
	margin: 27% 0 0 0;
}

#gallery-area
{
	display: inline-block;
	overflow: hidden;
	margin: 3% -4px 0 -4px;
	vertical-align: top;
	width: 62.5vw;
	height: 72vh;
}	

#gallery-head
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 56px;
	text-decoration: none;
	color: #FFFFFF;
	padding: 60px 0 20px 0;
}

#roll
{
	margin: -511vh 0 0 0;
}

#roll img
{
	margin: -4px 0 0 0;
	width: 62.5vw;
	height: 73vh;
}

@media screen and (max-width:740px) and (orientation: portrait)
{

	.button-area
	{
		display: none;
	}	
	
	#gallery-area
	{
		display: none;
	}
	
	#mob-gal-ico
	{
		display: block;
		margin: 20px 0 0 0;
	}
}

#about-us
{
	width: 100%;
}

#about-us #about-us-head
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 62px;
	text-decoration: none;
	color: #553e98;
	margin: 30px 0 50px 0;
}

#about-us #about-content
{
	width: 100%;
}

#about-content #about-lek
{
	display: inline-block;
	vertical-align: top;
	width: 25%;
}

#about-content #about-lek img
{
	border: 0px;
}

#about-content #first-line-about
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 24px;
	text-decoration: none;
	color: #3a3a3a;
	margin: auto auto auto auto;
	text-align: left;
}

#about-content .next-line-about
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	text-decoration: none;
	color: #3a3a3a;
	margin: 20px auto auto auto;
	text-align: left;
}

#line-about-wrap
{
	display: inline-block;
	vertical-align: top;
	width: 50%;
	margin: 100px 0 0 0;
}

@media screen and (max-width: 700px)
{
	#line-about-wrap
	{
		width: 90%;
		margin: 100px 0 0 0;
	}
	
	#about-content #about-lek
	{
		width: 90%;
	}
}

#about-sp
{
	width: 100%;
}

#about-sp img
{
	width: 100%;
}

#bottom-contact
{
	margin: 40px 0 60px 0;
}

#bottom-contact-ad
{
	width: 30vw;
	height: 12vh;
	margin: 70px auto;
	overflow: hidden;
}

#bottom-contact-ad #con-ad img
{
	width: 30vw;
	height: 12vh;
	margin: 0 0 0 0;
}

#bottom-contact-ad #con-map img
{
	width: 30vw;
	height: 12vh;
	margin: -5px 0 0 0;
}

#bottom-contact-fb img
{
	width: 35vw;
	margin: 70px 0 0 0;
}

#bottom-contact-ph img
{
	width: 35vw;
}


@media screen and (max-width:740px)
{
	
	#bottom-contact-ad
{
	width: 50vw;
	height: 22vh;
	margin: 70px auto;
	overflow: hidden;
}

#bottom-contact-ad #con-ad img
{
	width: 50vw;
	height: 18vh;
	margin: 0 0 0 0;
}

#bottom-contact-ad #con-map img
{
	width: 50vw;
	height: 18vh;
	margin: 0 0 0 0;
}

	#bottom-contact-fb img
	{
		width: 55vw;
		margin: 70px 0 0 0;
	}

	#bottom-contact-ph img
	{
		width: 55vw;
	}
}




@media screen and (max-width:550px) and (orientation: portrait)
{
#bottom-contact-ad #con-ad img
{
	height: 10vh;
	margin: 0 0 0 0;
}

#bottom-contact-ad #con-map img
{
	height: 10vh;
	margin: 0 0 0 0;
}

	#bottom-contact-ad
{
	width: 50vw;
	height: 10vh;
	margin: 40px auto;
	overflow: hidden;
}

#bottom-contact-fb img
	{
		width: 55vw;
		margin: 40px 0 0 0;
	}
}


@media screen and (max-width:1360px)
{
	#top-navigation
	{
		display: none;
	}
	
	#hero-animation
	{
		padding-top: 160px;	
	}
	
	#mob-navigation
	{
		display: block;
		width: 100%;
		background-color: #FFFFFF;
		padding: 10px 0 10px 0;
	}
	
	#mob-logotype
	{
		display: inline-block;
		vertical-align: top;
		width: 50%;
		text-align: left;
		padding: 0 0 0 30px;
	}
	
	#mob-logotype img
	{
		width: 250px;
	}
	
	#menu-ico
	{
		display: inline-block;	
		width: 30%;
		text-align: right;
		padding: 30px 30px 10px 0;
	}
	
	#menu-items
	{
		display: none;
	}
	
	.mob-item
	{
		margin: 20px 0 30px 0;
	}
	
	.mob-item a
	{
		text-decoration: none;
		color: #000000;
		font-family: 'Open Sans', sans-serif;
		font-weight: 800;
		font-size: 40px;
	}
	
	.mob-bar
	{
		background-color: #553e98;
		height: 4px;
		min-width: 250px;
		width: 20%;
		margin: 6px auto;
	}
	
	#mob-fb
	{
		margin: 60px 0 20px 0;
	}
}

@media screen and (max-width: 450px)
{
	#mob-logotype img
	{
		width: 90%;
	}
	
	#menu-ico img
	{
		width: 40%;
	}
	

}

@media screen and (min-width: 1361px)
{
	#mob-navigation
	{
		display: none;
	}
}


@media screen and (max-width: 740px)
{
	#courses #one
{
	background: url("../images/pieciolatki_foto_srodek.jpg");
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 268px;
	overflow: hidden;
	margin: 50px 0 30px 0;
}



#courses #two
{
	background-image: url("../images/6-8_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 0;
}



#courses #three
{
	background-image: url("../images/9-11_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 0;
}


#courses #four
{
	background-image: url("../images/12-14_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 0;
}


#courses #five
{
	background-image: url("../images/15-18_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 0;
}


#courses #six
{
	background-image: url("../images/dopracy_tlo_srodek.jpg");
	background-color: #000000;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 268px;
	overflow: hidden;
	margin: 0 0 30px 0;
	
}



#courses 
{
	margin: 450px 0 0 0;
}

#gallery-img img
{
	width: 100%;
	margin: -5px 0 0 0;
}

#offer-1
{
	text-align: center;
	margin-bottom: 25px;
}

#offer-2
{
	text-align: center;
}

#offer-1 img
{
	width: 80%;
	margin: auto;
}

#offer-2 img
{
	width: 92%;
	margin: auto auto auto -25px;
}

}



@media screen and (max-width: 700px)
{
		#courses #pre-def-line
	{
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;
		font-size: 26px;
		text-decoration: none;
		color: #3a3a3a;
		width: 90%;
		margin: 570px auto auto auto;
		text-align: left;
	}
	
	
	#courses .next-def-line 
	{
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		font-size: 22px;
		text-decoration: none;
		color: #3a3a3a;
		width: 90%;
		margin: 20px auto auto auto;
		text-align: left;
	}
	
	#offer-background #ima img
	{
		width: 100%;
		min-height: 2000px;
		margin: -40px 0 0 0;
	}
	
	#offer
	{
		margin: -1800px 0 0 0;
		z-index: 2;
	}
}



@media screen and (max-width: 370px)
{
		#courses #pre-def-line
	{
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;
		font-size: 26px;
		text-decoration: none;
		color: #3a3a3a;
		width: 90%;
		margin: -200px auto auto auto;
		text-align: left;
	}
	
	
	#courses .next-def-line 
	{
		font-family: 'Open Sans', sans-serif;
		font-weight: 600;
		font-size: 22px;
		text-decoration: none;
		color: #3a3a3a;
		width: 90%;
		margin: 20px auto auto auto;
		text-align: left;
	}
	
	#offer-background #ima img
	{
		width: 100%;
		min-height: 1600px;
		margin: -40px 0 0 0;
	}
	
	#offer
	{
		margin: -1400px 0 0 0;
		z-index: 2;
	}
	

}

@media screen and (max-width:320px)
{
			#offer-2 img
{
	width: 80%;
	margin: auto auto auto -25px;
}

#courses #pre-def-line
	{
		font-family: 'Open Sans', sans-serif;
		font-weight: 700;
		font-size: 26px;
		text-decoration: none;
		color: #3a3a3a;
		width: 90%;
		margin: -150px auto auto auto;
		text-align: left;
	}
	
	#offer-background #ima img
	{
		width: 100%;
		min-height: 1600px;
		margin: -20px 0 0 0;
	}
}

@media screen and (max-width:740px) and (orientation:landscape)
{
	.desc-wrap
{
	padding: 2px 10px 0 10px;
	height: 450px;
}

.head-txt
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 26px;
	text-decoration: none;
	color: #FFFFFF;
	margin: 25% 0 10px 0;
}

.desc-txt
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 12px;
	text-decoration: none;
	color: #FFFFFF;
	text-align: justify;
	margin: 35% 0 0 0;
}
}

@media screen and (max-width:740px) and (orientation:portrait)
{
	.desc-wrap
{
	padding: 2px 10px 0 10px;
	height: 450px;
}

.head-txt
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 26px;
	text-decoration: none;
	color: #FFFFFF;
	margin: 40% 0 10px 0;
}

.desc-txt
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
	font-size: 11px;
	text-decoration: none;
	color: #FFFFFF;
	text-align: justify;
	margin: 38% 0 0 0;
}
}