@import url("https://fonts.googleapis.com/css?family=Acme|Lobster|Patua+One|Rubik|Sniglet");
* {
  box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

header,
section {
  overflow-x: hidden;
}

/* :root { */
  /* --Sniglet-font: "Sniglet", cursive; */
  /* --Rubik: "Rubik", cursive; */
  /* --Patua: "Patua One", cursive; */
  /* --Lobster: "lobster", cursive; */
  /* --light-black: #2e2c2caf; */
  /* --bggradient: linear-gradient(to bottom, #dd2476, #ff512f); */
  /* --light-gray: rgba(255, 255, 255, 0.877); */
/* } */

header i {
	color: #e72a79;
	background-color:f039;
}

header a {
  font-family: var(--Sniglet-font);
  font-size: 0.9em;
  color: black;
}
header .nav-item:last-child {
  padding-right: 15.5em;
}

header .nav-item {
  padding: 0.9em;
}

header .navbar-brand {
  padding-left: 12%;
}

header.active {
  color: #e72a79;
  text-decoration: none;
}

header .nav-link:hover {
  color: #e72a79;
  text-decoration: none;
}

header .nav-link:active {
  color: #e72a79;
  text-decoration: none;
}

header .row .col-md-7 {
  padding: 22vmin 1vmin;
  padding-bottom: 35vmin;
}

header .row .col-md-5 {
  padding: 4.2vmin 1vmin;
}

header .row .col-md-5 img {
  width: 90%;
}

header {
  background: #ff512f;
  /* fallback for old browsers */
  background: var(--bggradient);
}

header .container .col-md-7 {
  font-family: "Rubik", sans-serif;
}

header .container .col-md-7 h6 {
  padding: 1vmin;
  letter-spacing: 4px;
}

header .container .col-md-7 h1 {
  font-size: 8.5vmin;
  font-weight: bold;
  padding: 0.1em 0em;
}

header .container .col-md-7 p {
  padding: 1vmin 5vmin;
}

.primary-btn {
  border-radius: 30px;
  font-weight: bold;
}

/********** section 1 **************/

.section-1 a {
	color: #e72a79;
	text-decoration: none;
}

.section-1 {
  padding: 10vmin 0vmin;
}

.section-1 .row .col-md-6 .pray img {
  opacity: 0.8;
  width: 100%;
  border-radius: 0.2em;
}

.section-1 .row .col-md-6:last-child {
  position: relative;
}

.section-1 .row .col-md-6 .panel {
  position: absolute;
  top: 7vmin;
  left: -18vmin;
  background: white;
  border-radius: 3px;
  text-align: left;
  padding: 5vmin 5vmin 5vmin 10vmin;
  box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
  font-family: var(--Rubik);
  z-index: 1;
}

.section-1 .row .col-md-6 .panel h1 {
  font-weight: bold;
  padding: 0.4em 0;
  font-size: 2em;
}

.section-1 .row .col-md-6 .panel p {
  font-size: 1.1em;
  color: rgba(0, 0, 0, 0.5);
}

/* Contact */

.contact {
  padding: 10vmin 0vmin;
}

.divlogocontact {
	width: 100%;
	height: 500px;
	background: url('assets/fotkakontakt1.jpg') no-repeat;
    background-position: center;
}

.textunderdivlogocontact h2{
	font-size: 25px;
	text-align: center;
}

.contact img {
	margin-left: 50%;
	width: 100%;
	height: 100%;
}

@media(max-width: 768px) { 
       .contact img {
    margin-left: 0%;
	width: 100%;
	height: 100%; 
} }

.contact .row .col-md-6 .pray img {
  opacity: 0.8;
  width: 100%;
  border-radius: 0.2em;
}

.contact .row .col-md-6:last-child {
  position: relative;
}

.contact .row .col-md-6 .panel {
  position: absolute;
  top: 7vmin;
  left: -18vmin;
  background: white;
  border-radius: 3px;
  text-align: left;
  padding: 5vmin 5vmin 5vmin 10vmin;
  box-shadow: 0px 25px 42px rgba(0, 0, 0, 0.2);
  font-family: var(--Rubik);
  z-index: 1;
}

.contact .row .col-md-6 .panel h1 {
  font-weight: bold;
  padding: 0.4em 0;
  font-size: 2em;
}

.contact .row .col-md-6 .panel p {
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.5);
}

/*  Section 2  */

.cover {
  width: 100%;
  height: 55vmin;
  background: url("../assets/pexels-photo-452738.jpeg");
  background-position: -24rem -19rem;
  background-size: 150%;
  position: relative;
}

.cover .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}

.cover .content {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  padding-top: 19vmin;
}

.cover .content > h1 {
  font-family: var(--Patua);
  font-size: 6vmin;
  color: whitesmoke;
}

.cover .content > p {
  font-family: var(--Rubik);
  font-size: 2vmin;
  color: #e5e5e5;
}

.numbers .rect {
  position: relative;
  z-index: 1;
  background: white;
  width: 17rem;
  height: 12rem;
  padding-top: 3.5vmin;
  margin: 1rem;
  border-radius: 0.5em;
  box-shadow: 1px 2px 50px 0px rgba(255, 0, 0, 0.349);
}

.numbers {
  margin-top: -15vmin;
}

.numbers .rect h1 {
  font-size: 5rem;
  color: tomato;
}

.numbers .rect > p {
  font-family: var(--Patua);
}

.purchase > h1 {
  padding-top: 15vmin;
  padding-bottom: 0.1em;
  font-family: var(--Lobster);
}

.purchase > p {
  color: var(--light-black);
  font-size: 3vmin;
  padding-bottom: 10vmin;
}

.purchase .cards .card {
  width: 22rem;
  margin: 3vmin 3vmin;
}

.cards div {
  padding: 0;
  margin: 0;
}

.cards .title {
  background: rgba(208, 241, 241, 0.199);
  padding: 1.4em 2.5em;
  font-size: 2vmin;
}

.card .card-text {
  padding: 2.5rem 3rem;
  color: var(--light-black);
}

.card-body .pricing {
  background: rgba(208, 241, 241, 0.199);
  border-top-right-radius: 170px;
  border-top-left-radius: 170px;
}

.card-body .pricing > h1 {
  font-size: 10vmin;
  padding: 1em 0.5em;
}

/* Section 3 */

.section-3 {
  height: 70vmin;
  margin-top: 15vmin;
  background: var(--bggradient);
}

.section-3 .col-md-12 > h1 {
  padding: 2em 0 0.5em 0;
  color: whitesmoke;
  font-size: 6vmin;
}

.section-3 .col-md-12 > p {
  padding: 0 4em;
  padding-bottom: 2em;
  color: var(--light-gray);
  font-size: 3vmin;
}

.section-3 .desktop {
  background: white;
  display: inline-block;
  border-radius: 3em;
  padding: 2vmin 4.5vmin;
  margin: 1em;
}

.section-3 .desktop h3 {
  font-size: 4vmin;
}

.section-3 .desktop p {
  font-size: 2vmin;
}

/* recenzje */

.section-4 a {
	color: #e72a79;
	text-decoration: none;
}

.section-4 .container h1 {
  font-size: 4vmin;
  padding-top: 5vmin;
}

.section-4 .team {
  padding: 10vmin 0vmin;
}

.section-4 .card {
  height: 50em;
  width: 32em; /* IMPOTANT */
  margin-top: 0vmin;
}

.section-4 .card .card-text {
  padding: 0.5em;
}

.section-4 .card-body > a {
  font-size: 1.5em;
}

.section-4 .carousel-item {
  padding-left: 3rem;
}

.border-radius {
  border-radius: 340px;
  width: 80%;
}

/* team */

.section-5 a {
	color: #e72a79;
	text-decoration: none;
}

.section-5 .container h1 {
  font-size: 4vmin;
  padding-top: 5vmin;
}

.section-5 .team {
  padding: 10vmin 0vmin;
}

.section-5 .card {
  height: 50em;
  width: 30em; /* IMPOTANT */
  margin-top: 0vmin;
  margin-left: 66%;
}

@media(max-width: 1320px) {
      .section-5 .card {
            height: 50em;
			width: 26em; /* IMPOTANT */
			margin-top: 0vmin;
			margin-left: 35%;
      }
}

@media(max-width: 1020px) {
      .section-5 .card {
            height: 50em;
			width: 22em; /* IMPOTANT */
			margin-top: 0vmin;
			margin-left: 20%;
      }
}

@media(max-width: 768px) {
      .section-5 .card {
            height: 50em;
			width: 22em; /* IMPOTANT */
			margin-top: 0vmin;
			margin-left: 0%;
      }
}

.section-5 .card .card-text {
  padding: 0.5em;
}

.section-5 .card-body > a {
  font-size: 1.5em;
}

.section-5 .carousel-item {
  padding-left: 3rem;
}

.border-radius {
  border-radius: 340px;
  width: 80%;
}


footer {
  background: rgba(0, 0, 0, 0.815);
  overflow-x: hidden;
  padding: 14vmin 18vmin;
}

footer p > span {
  color: #ff512f;
}

footer input {
  border: none !important;
}

footer input::placeholder {
  color: white !important;
}

footer .input-group .input-group-text {
  background: var(--bggradient);
  border: none;
}

footer .column i {
  color: #dd2476;
}

/* It is Adjacent sibling combinator */

footer .column i + i {
  padding: 0 0.5em;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.815);
  z-index: 9999;
  transition: all 1.5s ease;
}

/*--------------- gallery page --------------- */
/* .container .row { */
	/* margin-left: 22px; */
/* } */


.gallery {
	margin: 0 auto;
	width: 100%;
	text-align: center;
	padding-top: 20px;
}

.gallery img {
	transition: 1s;
	padding: 45px;
	width: 450px;
}
.gallery img:hover {
	filter: grayscale(100%);
	transform: scale(1.1);
}

/* @media(max-width: 768px) { */
      /* .gallery img { */
            /* text-align: center; */
			/* text-decoration:none; */
			/* margin-top: 20px; */
      /* } */

.bordering {
	box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.5);
}

.list-inline filterList li{
	color: black;
}
/*--------------- scrollbar --------------- */

body::-webkit-scrollbar {
    width: 0.9em;
}

body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgb(255, 255, 255), 0);
}

body::-webkit-scrollbar-thumb {
  background-color: #e72a79;/*#222222; #2196F3;*/
  border-radius: 10px;
}

/* SLIDER */

#slider {
	overflow: hidden;
}
#slider figure {
	position: relative;
	width: 500%;
	margin: 0;
	left: 0;
	animation: 20s slider infinite
}
#slider figure img {
	width: 20%;
	float: left;
}

@keyframes slider {
	0% {
		left: 0;
	}
	20% {
		left: 0;
	}
	25% {	
		left: -100%;
	}
	45% {
		left: -100%;
	}
	50% {
		left: -200%;
	}	
	70%	{
		left: -200%;
	}
	75% {
		left: -200%;
	}
	95% {
		left: -200%;
		}
}		

.collab {
      text-align: right;
}

.collab p {
      font-weight: lighter !important;
      margin-bottom: 20px;
}

@media(max-width: 768px) {
      .collab p {
            text-align: center;
			text-decoration:none;
			font-size: 13px;
      }
}

.hr {
      background: rgba(255, 255, 255, 0.2);
      height: 1px;
	  text-decoration:none;
}


.info h4 {
	  color: white;
      font-size: 18px;
      font-weight: lighter;
	  text-decoration:none;
}

.info p {
      color: grey;
      font-weight: lighter;
	  text-decoration:none;
}

.info li {
      font-weight: lighter;
      color: #fff;
      font-size: 18px;
      padding-left: 20px;
	  text-decoration:none;
}

.info a {
	color: black;
	text-decoration: none;
}

.info i {
	color: black;
	text-decoration:none;
}

.info i:hover {
	color: #e72a79;
    text-decoration: none;
}

.rosecolorhover:hover {
	color: #e72a79;
    text-decoration: none;
}

/* @media(max-width: 768px) { */
      /* .info { */
            /* text-align: center; */
			/* text-decoration:none; */
			/* margin-right: 50px; */
			/* margin-left: -30px; */
      /* } */
/* } */
#fb::before {
      display: inline-block;
      content: '';
      border-radius: 100%;
      height: 4px;
      width: 4px;
      margin-right: 6px;
      background: #3b5998;
	  text-decoration:none;
}


#ig::before {
      display: inline-block;
      content: '';
      border-radius: 100%;
      height: 4px;
      width: 4px;
      margin-right: 6px;
      background: #fcaf45;
	  text-decoration:none;
}

#media, #address {
      text-align: center;
	  text-decoration:none;
}

#media, #address p{
	  font-size: 25px;
      text-align: center;
	  text-decoration:none;
}

#media ul {
      list-style: none;
	  text-decoration:none;
}

#media ul li {
      display: inline-block;
	  text-decoration:none;
}

.footer {
	background-color: white;
}

.wow fadeInUp" {
	color: black;
}

@media(max-width: 768px) {
      .collab, #personal, #media, #address {
            text-align: center;
			text-decoration:none;
      }

      .info ul {
            margin: 0 0 0 -22px;
            padding: 0;
			text-decoration:none;
      }
}


/*--------------- podpis section --------------- */

.davidburdelak {
      width: 100%;
      margin: 0 auto;
      text-align: center;
      padding: 1em 0;
      background: #0C0C0C;
	  text-decoration: none;
	  color: white;
}

.container0 {
	text-align: left;
}

.container1 {
	text-align: center;
	word-spacing: 5px;
}

.container2 {
	font-size: 14px;
	word-spacing: 5px;
}

.container3 {
	text-align: right;
	margin-right: 2%;
	font-size: 11px;
}

.davidburdelak span {
      color: white;
      font-weight: 400;
	  font-size: 11px;
	  text-transform: uppercase;
	  letter-spacing: 3px;
	  padding: 66px 30px;
	  position:relative;
	  display:block;
	  margin-top: -5px;
	  margin-bottom: -5px;
	  text-decoration: none;
}

.davidburdelak a{
	text-decoration: none;
	color: white;
}

.davidburdelak a:hover {
	text-decoration: none;
}

@media(max-width: 768px) {
      .davidburdelak {
            text-align: center;
			text-decoration:none;
      }
}

/* Back to Top Button */

#back-to-top-btn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 26px;
	width: 50px;
	height: 50px;
	background-color: #fff;
	color: #e72a79;
	cursor: pointer;
	outline: none;
	border: 3px solid #e72a79;
	border-radius: 50%;
	transition-duration: 0.2s;
	transition-timing-function: easy-in-out;
	transition-property: background-color, color;
}

#back-to-top-btn:hover, #back-to-top-btn:focus {
	background-color: #e72a79;
	color: #fff
}

@media(max-width: 992px) {
	#back-to-top-btn {
		font-size: 20px;
		width: 40px;
		height: 40px;
	}
}
@media(max-width:768px) {
	#back-to-top-btn {
		font-size: 18px;
		width: 32px;
		height: 32px;
	}
}

.btnEntrace {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: btnEntrace;
}

@keyframes btnEntrace {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

.btnExit {
	animation-duration: 0.25s;
	animation-fill-mode: both;
	animation-name: btnExit;
}

@keyframes btnExit {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}
}

/*--------------- scroll down icon animation --------------- */
.scroll-down {
      position: absolute;
      left: 50%;
      bottom: 100px;
      display: block;
      text-align: center;
      font-size: 20px;
      z-index: 0;
      text-decoration: none;
      text-shadow: 0;
      width: 13px;
      height: 13px;
      border-bottom: 2px solid #fff;
      border-right: 2px solid #fff;
      -webkit-transform: translate(-50%, 0) rotate(45deg);
      animation: fade_move_down 3s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

@keyframes fade_move_down {
      0% {
            transform: translate(0, -20px) rotate(45deg);
            opacity: 0;
      }
      50% {
            opacity: 1;
      }
      100% {
            transform: translate(0, 20px) rotate(45deg);
            opacity: 0;
      }
}

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #e72a79; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 75px; /* Rounded corners */
  font-size: 11px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}