@import url("font.css");
@import url("https://fonts.googleapis.com/css?family=Work+Sans:700,400,100%7COpen+Sans:400,600&subset=latin,latin-ext,cyrillic,cyrillic-ext,greek");
:root {
	--brown: #c79f7b;
	--blue: #8ab5ba;
}
body {
	font-family: 'Open sans';
	margin: 0;
	/* font-family: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif; */
}
h1 {
	color: #c79f7b;
	margin: 0;
}
p,
a,
li {
	color: #828282;
	font-size: 18px;
	margin: 0;
	text-decoration: none;
}
.brown {
	color: var(--brown) !important;
}
.blue {
	color: #8ab5ba;
}
.bold {
	font-weight: bold;
}
.uppercase {
	text-transform: uppercase;
}
.one-line-text {
	white-space: nowrap;
}
.normal-text {
	margin-bottom: 1rem;
}
.remove-padding {
	padding: 0;
	margin: 0;
	margin-bottom: 15px;
}
.small-divider {
	margin-top: 4%;
	margin-bottom: 4%;
}
nav {
	z-index: 2;
	position: fixed;
	right: 0;
	width: 100%;
	background: white;
	border-bottom: 1px rgb(206, 206, 206) solid;
	transition: top 0.3s;
}
nav ul {
	float: right;
}
nav ul li a {
	color: var(--blue);
	margin-right: 0 !important;
}
nav ul a,
nav ul li {
	color: var(--blue);
	display: inline-block;
	margin-right: 20px;
	list-style: none;
	vertical-align: middle;
	cursor: pointer;
}
header {
	overflow: hidden;
}
footer {
	text-align: center;
	padding-top: 50px;
	padding-bottom: 10px;
}
.border {
	border: 2px solid var(--brown);
	padding: 9px;
}
.mini-logo {
	width: 45px;
}
.article {
	margin-top: calc(2% + 150px);
	padding-left: 10%;
	padding-right: 10%;
	margin-bottom: 5%;
}
.article-image {
	width: 80%;
	display: block;
	margin: 0 auto;
	margin-bottom: 6%;
}
header {
	margin-top: calc(7% + 150px);
}
#o-mnie {
	display: grid;
	/* width: 100%; */
	grid-template-columns: 50% 1fr;
	/* grid-template-columns: 1fr 1fr 1fr 1fr; */
}
#contact {
	text-align: center;
}
#info-contact-container {
	/* display: flex;
	justify-content: space-between; */
	display: grid; 
	grid-template-columns: 1fr 1fr 1fr;
	row-gap: 20px;
}
.info-contact-container__table {
	min-width: 300px;
}
.upper-h2 {
	font-size: 34px;
	margin-top: 0;
}

.left {
	text-align: left;
}
.brown-button {
	background: #cda98a;
	padding: 2% 4%;
	border: none;
	color: white;
	border-radius: 3px;
	cursor: pointer;
}
.section-header-blue {
	color: #8ab5ba;
	text-align: center;
	margin-top: 80px;
	margin-bottom: 30px;
	font-size: 3em;
}
.section-header {
	background: #cda98a;
	color: white;
	text-align: center;
	padding: 40px;
	margin-top: 40px;
	margin-bottom: 40px;
}
.section-content {
	width: 80%;

	margin: 0 auto;
}
section {
	/* width: 80%; */
	margin: 0 auto;
}
.left {
	/* grid-column: 1; */
	align-self: center;
}
.right {
	/* grid-column: 2/5; */
	align-self: center;
}
.dr-photo {
	width: 80%;
}
.team-photo {
	height: 50vh;
	cursor: pointer;
}

.single-item img {
	height: 400px;
	cursor: pointer;
}
.fancybox-wrap .fancybox {
	/* width: 100%; */
	height: 90%;
}
.fancybox-bg {
	background: #888;
}

.fancybox-overlay {
	background: rgba(0, 0, 0, 0.8) !important;
}
.slick-next:before,
.slick-prev:before {
	color: black !important;
}
#map {
	margin-top: 50px;
	height: 400px;
	/* width: 80%; */
	/* margin: 0 auto; */
}
.fb-box {
	position: fixed !important;
	top: calc(10% + 100px);
	/* left: 0px; */
	/* width: 300px; */
	margin-left: -180px;
	/* margin-left: 200px; */
	animation-name: animation-fb-box-in;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.fb-icon {
	vertical-align: top;
	margin-left: 0px;
}
.fb-page {
	box-sizing: border-box;
	margin-right: -5px;
}
.fb-box:hover {
	animation-name: animation-fb-box-out;
	animation-duration: 1s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.phone {
	display: none;
	background-color: green;
	position: fixed;
	right: 2em;
	bottom: 2em;
	border-radius: 100%;
	padding: 10px;
	z-index: 1;
	animation: rotatephone 2s ease-in infinite;
}
.phone-icon {
	width: 35px;
	height: 35px;
	background: url(../img/phone.png) no-repeat;
	background-size: contain;
}
.shadow-phone {
	animation: shadowphone 2s ease-in infinite;
}
.border-phone {
	animation: borderphone 2s ease-in infinite;
	border: 1px solid black;
	padding: 9px !important;
	background: none !important;
}
.shadow-phone,
.border-phone {
	display: none;
	width: 35px;
	height: 35px;
	position: fixed;
	right: 2em;
	bottom: 2em;
	border-radius: 100%;
	padding: 10px;
	z-index: 0;
	background: black;
	opacity: 0.3;
}
@keyframes borderphone {
	0% {
		transform: scale(1.8);
	}
	30% {
		transform: scale(1.8);
	}
	100% {
		transform: scale(2.8);
		opacity: 0.1;
	}
}
@keyframes shadowphone {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.8);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes rotatephone {
	0% {
		transform: rotate(0deg);
	}
	5% {
		transform: rotate(90deg);
	}
	20% {
		transform: rotate(0deg);
	}
	25% {
		transform: rotate(90deg);
	}
	40% {
		transform: rotate(0deg);
	}
	55% {
		transform: rotate(90deg);
	}
	60% {
		transform: rotate(0deg);
	}
	65% {
		transform: rotate(90deg);
	}
	100% {
		transform: rotate(0deg);
	}
}
@keyframes animation-fb-box-out {
	from {
		margin-left: -180px;
	}
	to {
		margin-left: 0px;
	}
}
@keyframes animation-fb-box-in {
	from {
		margin-left: 0px;
	}
	to {
		margin-left: -180px;
	}
}

#table-price-list,
.table {
	border-collapse: collapse;
	width: 100%;
}
#table-price-list td:nth-child(2),
.table td:nth-child(2) {
	width: 20%;
	text-align: center;
}
#table-price-list td:nth-child(1),
.table td:nth-child(1) {
	width: 80%;
}
#table-price-list tr:nth-child(odd),
.table tr:nth-child(2n-1) {
	background-color: #f8f8f8;
}
#table-price-list td,
.table td,
.table th {
	border: 1px solid rgb(204, 204, 204);
	color: #828282;
	font-size: 13px;
	padding: 15px 10px;
}
.table th {
	font-size: 1.4rem;
}
.hr-before-map {
	width: 50%;
}
#rejestracja-online {
	width: 100%;
}
#contener-register {
	display: flex;
	align-items: center;
	margin-top: 7%;
	margin-bottom: 5%;
}
#contener-register__banner {
	width: 70%;
	margin-right: 5%;
}
#contener-register__button a {
	/* width: 85%; */
	padding: 6% 15%;
	font-size: 16px;
	display: flex;
	justify-content: center;
	/* word-break: break-all; */
}
#contener-register__button {
	width: 80%;
}
#tel-contact-dom:after {
	content: "12 445 35 04";
}
#tel-contact:after {
	content: "508 502 802";
}
#email-contact:after {
	content: "kontakt@dentalartsstudio.pl";
}

.mt-0 {
	margin-top: 0;
}

@media (min-width: 1100px) {
	header {
		margin-top: 5%;
	}
}
@media (min-width: 700px) {
	header {
		margin-top: calc(7% + 85px);
	}
}
@media (max-width: 1010px) {
	#team.section-content {
		margin-top: 2rem;
		grid-template-columns: 1fr !important;
	}
	#info-contact-container{
		/* flex-direction: column; */
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 900px) {
	.phone,
	.shadow-phone,
	.border-phone {
		display: inline-block;
	}
}
@media (max-width: 900px) {
	#email-contact:after {
		content: "E-mail" !important;
	}
	#contener-register {
		flex-direction: column;
	}
	#contener-register__banner {
		width: 100%;
		margin-right: 0;
	}
	#contener-register__button {
		width: 80%;

		/* display: flex; */
		/* flex-direction: row; */
		/* justify-content: space-between; */
	}
	#contener-register__button a {
		padding: 2% 4%;
	}
}
@media (min-width: 600px) {
	#info-contact-container .parking {
	grid-column-start: 2;
	}
}
@media (max-width: 600px) {
	#info-contact-container {
		/* flex-direction: column; */
		grid-template-columns: 1fr;
		justify-items: center;
	}
	.info-contact-container__info{
		margin-bottom: 2rem;
	}
	.fb-box {
		display: none;
	}
	#tel-contact:after {
		content: "Zadzwoń" !important;
	}
	#o-mnie {
		display: grid;
		grid-template-columns: 1fr;
	}
	#o-mnie div {
		grid-column: 1;
		width: 100%;
	}
	.dr-photo {
		width: 100%;
	}
}
