/** Fonts **/
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800&display=swap');

/** Default grid items definition **/

body {
	margin: 0;
}

.container {
	width: 960px;
	margin: 0 auto;
}

.header {
	background-image: url("../img/header-bg.png");
	min-height: 681px;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
}

.header .hero-container {
	position: relative;
}

.header .hero-container:after {
	content: "";
	position: absolute;
	bottom: -110px;
    right: 28%;
	background: url("../img/members-overlay.png");
	background-repeat: no-repeat;
	width: 426px;
	height: 501px;
	z-index: 1;
}

.navbar {
	grid-area: navbar;
}

.navbar-contact {
	grid-area: navbar-contact;
}

.navbar-contact p {
	float: right;
	margin: 0 0 0 7px;
}

.header .navbar-contact p,
.header .navbar-contact a {
	color: #ffffff;
	font-weight: bold;
	font-size: 18px;
	line-height: 25px;
	font-family: 'Open Sans', sans-serif;
}

.header .navbar-contact p {
	margin: 0 0 0 7px;
}

.hero {
	grid-area: hero;
	padding: 75px 0 200px 0;
}

.hero h1,
.sc-content h1 {
	font-weight: 800;
	font-size: 63px;
	line-height: 65px; 
	font-family: 'Open Sans', sans-serif;
	letter-spacing: -2.52px;
	color: #FFFFFF;
	margin: 0 0 15px 0;
}

.gallery h1,
.pricelist h1,
.about-us h1,
.contact h1,
.gallery h2,
.pricelist h2,
.about-us h2,
.contact h2,
.gallery .sc-content h3,
.pricelist .sc-content h3,
.about-us .sc-content h3,
.contact h3 .sc-content {
	color: #00C2E3;
}

.hero h3,
.sc-content h3 {
	font-weight: bold;
	font-size: 24px;
	line-height: 24px; 
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 0;
	color: #FFFFFF;
	margin: 0 0 30px 0;
}

.hero .hero-socials img:first-child {
	margin-right: 10px;
}

.nav { 
	display: grid;
  	grid-template-areas: 'navbar navbar navbar navbar navbar-contact navbar-contact navbar-contact';
    grid-template-columns: 118px 118px 118px 118px 118px 118px 118px;
    grid-column-gap: 22px;
}

.blue-wrap {
	width: 1236px;
	margin: 0 auto;
	background: #00C2E3;
	border-radius: 6px;
}

.blue-wrap:first-child {
	border-radius: 0 0 6px 6px;
}

.blue-wrap.overflowed {
	position: relative;
	bottom: -22px;
	z-index: 2;
}

.navbar-nav {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	list-style-type: none;
	padding: 0;
}

.navbar-nav li {
	padding-right: 20px;
}

.navbar-nav li a {
	text-align: left;
	font-weight: bold; 
	font-size: 18px;
	line-height: 25px; 
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	text-decoration: none;
}

.navbar-contact {
	text-align: right;
	font-weight: bold; 
	font-size: 18px;
	line-height: 25px; 
	font-family: 'Open Sans', sans-serif;
	color: #ffffff;
	margin: 9px 0;
}

.header-info-block h3 {
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	line-height: 28px;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 0;
	color: #ffffff;
	padding: 19px 0 23px 0;
	margin: 0;
}

.header-info-block a {
	color: #FFED57;
	text-decoration: none;
}

.header-info-block h3 strong {
	color: #FFED57;
}

.gallery {
	padding: 90px 0 68px 0;
	overflow: hidden;
}

.gallery h2,
.pricelist h2,
.about-us h2,
.contact h2,
.sc-content h2 {
	font-weight: 800;
	font-size: 48px;
	line-height: 48px;
	font-family: 'Open Sans', sans-serif;
	letter-spacing: -1.92px;
	color: #00C2E3;
	margin: 0 0 69px 0;
}

.gallery /*.gallery-wrap*/ .gallery-img {
	float: left;
	overflow: hidden;
	margin: 0 10px 8px 0;
}

.gallery /*.gallery-wrap*/ .gallery-img img {
	border-radius: 6px;
}

.gallery /*.gallery-wrap*/ .gallery-img.gallery-img-third {
	width: 367px;
}

.gallery /*.gallery-wrap*/ .gallery-img.gallery-img-fourth {
	width: 582px;
	margin-right: 0;
}

.gallery /*.gallery-wrap*/ .gallery-img.gallery-img-half {
	width: 475px;
}

.gallery /*.gallery-wrap*/ .gallery-img.gallery-img-half.last {
	margin-right: 0;
}

.gray-wrap {
	width: 1236px;
	background-color: #F6F6F6;
	border-radius: 6px;
	margin: 0 auto;
	padding: 47px 0 65px 0;
}

.pricelist-wrap p {
	font-weight: normal;
	font-size: 17px;
	line-height: 34px;
	letter-spacing: 0;
	color: #444444;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}

.about-us--grid {
	display: grid;
  	grid-template-areas: 'about-image about-image about-image about-text about-text about-text about-text';
    grid-template-columns: 118px 118px 118px 118px 118px 118px 118px;
    grid-column-gap: 22px;
}

.about-us--image {
	grid-area: about-image;
	overflow: hidden;
}

.about-us--text,
.contact--grid .where p,
.contact--grid .work-hours ul,
.contact--grid .work-hours p,
.sc-content p {
	grid-area: about-text;
	font-weight: normal;
	font-size: 17px;
	line-height: 34px;
	letter-spacing: 0;
	color: #444444;
	font-family: 'Open Sans', sans-serif;
	margin: 0;
}

.about-us--text a,
.contact--grid .where a,
.contact--grid .work-hours a,
.contact--grid .work-hours a,
.sc-content a,
.gallery a,
.pricelist-wrap a {
	color: #00C2E3;
	text-decoration: none;
}

.about-us--text p {
	margin: 0 0 20px 0;
}

.about-us {
	padding: 68px 0 124px 0;
}

.contact {
	padding: 0 0 86px 0;
}

.contact--grid {
	display: grid;
  	grid-template-areas: 'where where where work-hours work-hours work-hours work-hours';
    grid-template-columns: 118px 118px 118px 118px 118px 118px 118px;
    grid-column-gap: 22px;
    padding: 0 0 48px 0;
}

.where {
	grid-area: where;
}

.work-hours {
	grid-area: work-hours;
}

.contact--grid .work-hours ul {
	list-style-type: none;
	padding-left: 10px;
}

.contact--grid .work-hours ul li {
	position: relative;
}

.contact--grid .work-hours ul li:before {
	content: "-";
	position: absolute;
	left: -10px;
}

.contact--map {
    position: relative;
    padding-bottom: 367px;
    height: 0;
    overflow: hidden;
}
.contact--map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.navbar-contact--items {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

@media screen and (min-width: 480px) and (max-width: 960px) {
	body {
		width: 1280px;
	}
}

@media screen and (max-width: 480px) {
	.container,
	.blue-wrap,
	.gray-wrap {
		max-width: 100%;
	}

	.nav,
	.about-us--grid,
	.contact--grid {
		display: flex;
		padding: 0 20px;
		flex-direction: column;
	}

	.header {
		min-height: 786px;
		background: url("../img/doktorke-mobilni.jpg");
		background-position: center;
	}

	.hero {
		padding-top: 65px;
		text-align: center;
	}

	.hero h1,
	.sc-content h1 {
		font-size: 54px;
		line-height: 52px;
	}

	.header-info-block h3 {
		font-size: 20px;
		line-height: 28px;
		padding: 19px 10px 23px 10px;
	}

	.navbar,
	.hero-container:after {
		display: none;
	}

	.navbar-contact {
		text-align: center;
	}

	.navbar-contact span {
		float: none;
		position: relative;
    	top: -10px;
	}

	.blue-wrap {
		width: auto;
		margin: 0 15px;
	}

	.blue-wrap.overflowed {
		bottom: -120px;
	}

	.gallerry .gallery-img,
	.gallery .gallery-img.gallery-img-third,
	.gallery .gallery-img.gallery-img-fourth,
	.gallery .gallery-img.gallery-img-half,
	.gallery .gallery-img.gallery-img-half.last {
		width: 90%;
		margin: 0 auto 5px auto;
		float: unset;
	}

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

	.gallery h2,
	.pricelist h2,
	.about-us h2,
	.contact h2,
	.sc-content h2 {
		padding: 0 20px;
		font-size: 36px;
		line-height: 48px;
		margin-bottom: 27px;
	}

	.pricelist-wrap {
		padding: 0 20px;
	}

	.pricelist-wrap p {
		font-size: 15px;
		line-height: 28px;
	}

	.about-us--text,
	.contact--grid .where p, 
	.contact--grid .work-hours ul, 
	.contact--grid .work-hours p {
		font-size: 15px;
		line-height: 28px;
	}

	.contact--map {
		margin: 0 20px;
		padding-bottom: 369px;
	}

	.contact--grid {
		padding-bottom: 30px;
	}

	.about-us--image img {
		width: 100%;
	}

	.gallery {
		padding: 77px 0 20px 0;
	}

	.gray-wrap {
		padding: 35px 0 65px 0;
	}

	.about-us {
		padding: 29px 0;
	}

	.where {
		padding: 0 0 20px 0;
	}

	.header .navbar-contact p,
	.header .navbar-contact p a {
		font-size: 16px;
		line-height: 22px;
	}

	.navbar-contact--items {
		justify-content: center;
	}
}

@media screen and (max-width: 375px) {
	.header-info-block h3 {
		font-size: 16px;
		line-height: 22px;
	}

	.nav {
		padding: 0 15px;
	}

	.navbar-contact--items {
		justify-content: center;
	}

	.hero h1 {
		font-size: 48px;
		line-height: 45px;
	}

	.hero h3 {
		font-size: 22px;
		margin: 0 0 18px 0;
	}

	.header {
		height: 568px;
		min-height: 568px;
	}

	.hero {
    	padding-top: 30px;
	}

	.blue-wrap.overflowed {
		bottom: 22px;
	}
}