* {
  box-sizing: border-box;
  margin: 0px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 500;
}

.header {
	height: 180px;
	background-color: white;
}

p {
	font: normal normal normal 15px/1.875em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 15px;
    line-height: 1.875em;
    font-family: avenir-lt-w01_35-light1475496, avenir-lt-w05_35-light, sans-serif;
	opacity: 0;
	animation: ani2 2s ease-out 0.5s forwards;
}

h1, h2, h3, h4{
	font: normal normal normal 40px/1.35em questrial,sans-serif;
	opacity: 0;
	animation: ani2 1.5s ease-out forwards;
}

h2, p {
	text-align: center;
	color: black;
	line-height: 1.6;
}

h2 {
	padding-top: 5px;
	font-size: 3rem;
}

.header h2{
	margin-top: 60px;
	font-size: 1.2rem;
	margin-left: 300px;
	text-align: left;
	font: normal normal normal 22px/1.41em questrial,sans-serif;

}

.header p{
	text-align: left;
	margin-left: 300px;
	font-size: 1rem;
	font: normal normal normal 15px/1.875em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
    font-style: normal;
    font-variant-ligatures: normal;
    font-variant-caps: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 15px;
    line-height: 1.5em;
    font-family: avenir-lt-w01_35-light1475496, avenir-lt-w05_35-light, sans-serif;

}

.header a{
	opacity: 0;
	animation: ani2 1s ease-out 0.3s forwards;
	position: absolute;
	right: 100px;
	top: 80px;
}

@keyframes ani2{
	100%{
		opacity:1;
	}
}

@keyframes ani1{
	100%{
		transform:scale(1.55);
	}
}

h3 {
	font-size: 2rem;
}

h1 {
	text-align: center;
	color: black;
	margin-top: 100px;
	font-size: 2.5rem;
}

h4 {
	text-align: center;
	color: white;	
}

.header img {
	position:absolute;
	top: 30px;
	left: 100px;
	opacity: 0;
	animation: ani2 0.5s ease-out forwards;
}


.continut1 {
	background-color: white;
	height: 600px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;

}

.item01 {
	flex: 50%;
	padding-left: 7%;
	padding-right: 7%;
}

.item02 {
	flex: 50%;
}

.item01 h1{
	margin-top: 0px;
	padding-bottom: 20px;
}

.item01 h4{
	padding-bottom: 20px;
	color: black;
	font-size: 1.4rem;
}

.item02 p{
	color: black;
	text-align: left;
}

.cardd-img2 {

	height: 100%;
	background-color:white;
	background-position: center;
	background-size: cover;
}

.pozaa2 {
	background-image: linear-gradient(rgba(4, 9, 30, 0.2),rgba(4, 9, 30, 0.2)), url(images/mana4.jpg);
	background-attachment: fixed;
	opacity: 0;
	animation: ani2 1s ease-out forwards;
}

.continut1 .appstore {
	height: 70px;
	padding-bottom: 5px;
}

.continut1 .googleplay {
	height: 75px;
}

.continut1 .appgoogle {
	padding-top: 20px;
	text-align: center;
}

.continut2 {
	background-color: white;
	height: 720px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;

}

.item1 {
	flex: 50%;
}

.item2 {
	flex: 50%;
	padding: 10%;
}

.item2 h3{
	color: black;
	padding-bottom: 20px;
}

.item2 p{
	color: black;
	text-align: left;
}

.cardd-img {

	height: 100%;
	background-color:white;
	background-position: center;
	background-size: cover;
}

.pozaa {
	background-image: url(images/workinghands.webp);
	opacity: 0;
	animation: ani2 1s ease-out forwards;
}

.continut3 {
	height: 825px;
	background-image: linear-gradient(rgba(4, 9, 30, 0.2),rgba(4, 9, 30, 0.2)), url(images/womandesk.webp);
	background-position: center;
	background-size: cover;
	opacity: 0;
	animation: ani2 1s ease-out forwards;
}

.continut3 .inside-text3 p{
	color: white;
	text-align: left;
	padding-right: 50%;
}

.continut3 .inside-text3 h4{
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: left;
	padding-right: 50%;
}

.continut3 .inside-text3{
	color: white;
}

.continut3 .inside-text3{
	padding-top: 10%;
	padding-left: 20%;
}

.continut4 {
	box-sizing: border-box;
	display: flex;
	justify-content: center;
}

.item {
	background: white;
	width: 100%;
	height: 650px;
}

.item:nth-child(2) {
	background: white;
}

.item h3{
	text-align:center;
	padding-top: 500px;
	bottom: 0;
	color:black;
}	

.item .mijloc {
	color: black;
}

.item p{
	text-align:center;
	padding-top: 10px;
	bottom: 0;
	font-size: 1.2rem;
}	


.card-img {
	height: 475px;
	background-color:white;
	background-position: center;
	background-size: cover;
	opacity: 0;
	animation: ani2 0.5s ease-out forwards;
}

.poza1 {
	background-image: url(images/item-1.webp);
}

.poza2 {
	background-image: url(images/item-2.webp);
}

.poza3 {
	background-image: url(images/item-3.webp);
}

.poza4 {
	background-image: url(images/lady-driver.jpg);
}

.continut5 {
	height: 800px;
	background-image: url(images/mosulica.webp);
	background-position: center;
	background-size: cover;
	opacity: 0;
	animation: ani2 0.5s ease-out forwards;
}

.hero-btn {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  padding: 12px 34px;
  position: relative;
  cursor: pointer;
}
.hero-btn:hover{
  border: 1px solid #f44336;
  background: linear-gradient(to right,  #FCF6BA, #BF953F, #B38728, #AA771C, #FBF5B7 );
  transition: 1s;
}

.hero-btn2 {
  display: inline-block;
  text-decoration: none;
  color: #000;
  border: 1px solid #000;
  padding: 12px 34px;
  position: relative;
  cursor: pointer;
}
.hero-btn2:hover{
  border: 1px solid #f44336;
  background: linear-gradient(to right,  #FCF6BA, #BF953F, #B38728, #AA771C, #FBF5B7 );
  color: #fff;
  border: 1px solid #fff;
  transition: 0.5s;
}

/*.hero-btn2 {
  display: block;
  text-decoration: none;
  color: #fff;
  background: linear-gradient(to right,  #FCF6BA, #BF953F, #B38728, #AA771C, #FBF5B7 );
  border-radius: 12px;
  padding: 12px 34px;
  position: relative;
  cursor: pointer;
}*/

.continut5 div {
	padding-left: 15%;
	padding-top: 200px;
}

.continut5 h3 {
	padding-top: 30px;
	color: white;
}

.continut5 p {
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: left;
	font-size: 1.5rem;
	color: white;
}

.footer{
	height: 180px;
}

.footer p{
	color: black;
	padding-top: 50px;
}
.footer a{
	padding:10px;
	color:#696969;
	font-size: 14px;
}	
.footer{
  width: 100%;
  text-align: center;
  padding: 30px 0;
}
.icons .fa{
  color: black;
  margin: 0 13px;
  cursor: pointer;
  padding: 18px 0;
}
.fa-heart-o{
  color: black;
}

.continut6 {
	height: 600px;
	background-image: url(images/masina1.jpg);
	background-position: center;
	background-size: cover;
	opacity: 0;
	animation: ani2 0.5s ease-out forwards;
}
.continut7 {
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 50px;
}
.continut7 h2{
	font-size:2rem;
}
.container-footer{
	text-align: center;
	padding-top: 20px;
}
.continut8 img {
	padding: 5px;
	height: 70px;
	display:inline-block;
}
.continut9 img {
	padding: 20px;
	height: 200px;
	display:inline-block;
}
.reveal {
	position: relative;
	transform: translateY(150px);
	opacity: 0;
	transition: all 1s ease;
}

.reveal.active {
	transform: translateY(0px);
	opacity: 1;
}

@media (max-width: 1400px) {
.card-img {
	height: 350px;
}
.item h3 {
	padding-top: 380px;
}
}




@media (max-width: 1000px) {
	.header a{
		right: 20px;
	}
  .continut4 {
    flex-direction: column;
	box-sizing: border-box;
  }
  .continut1 {
    flex-direction: column-reverse;
	box-sizing: border-box;
	height: 1000px;
  }  

  .continut2 {
    flex-direction: column;
	box-sizing: border-box;
  }
/*  .header img {
    position:relative;
	width: 150px;
	height: 150px;
	margin-top: -150px;
	margin-left: auto;
	margin-right: auto;
	display:block;
}*/
.header img {
	margin-left: -90px;
}
.header h2{
	margin-left: 180px;
	font-size: 1.1rem;
}
.header p{
	margin-left: 180px;
}

.continut1 p{
	font-size: 1rem;
	padding-left: 5%;
	padding-right: 5%;
}
.continut3 {
	height: 600px;
}
.continut3 .inside-text3 p{
	padding-right: 5%;
	font-size: 1rem;
}
.continut3 .inside-text3{
	padding-left: 5%;
}
.continut1 {
	border-left: 0px;
	border-right: 0px;
}
/*.header p{
	font-size: 1.2rem;
}
.header h2{
	font-size: 1.5rem;
	padding-top: 100px;
}*/
.continut5 div {
	padding-top: 10px;
}

.continut5 p {
	padding: 10px;
}

.continut5 .appstore{
	margin-top: 300px;
}

.continut6 {
	height: 400px;
}
.continut7 {
	padding-left: 5%;
	padding-right: 5%;
}
.continut8 img {
	height: 40px;
}

.pozaa2 {
	background-image: linear-gradient(rgba(4, 9, 30, 0.2),rgba(4, 9, 30, 0.2)), url(images/doorhandle.jpg);
	background-attachment: scroll;
	height:300px;
}
}

@media (min-width: 1900px) {
  .continut6 {
    height: 800px;
  }
    .continut5 {
    height: 1000px;
  }
}

@media (min-width: 1200px) {
.item01 p{
	padding-top: 50px;
}
.continut1 .appgoogle {
	padding-top: 50px;
}
}

@media (max-width: 1100px) {
	.continut8 br{
		display:none;
	}
}


@media (max-width: 600px) {
.header a {
	text-align: center;	
	top: 170px;
	left: 50%;
  transform: translate(-50%, -50%);
}
.continut3 {
	height: 500px;
}
.continut3 .inside-text3 {
	padding-top: 5%;
}
.continut3 .inside-text3 h4{
	font-size: 2vh;
	padding-right: 2%;
}
.continut6 {
	height: 200px;
}
}



@media (max-width: 400px) {
.header h2{
	font-size: 15px;
	margin-left: 140px;
}

.header p{
	font-size: 10px;
	margin-left: 140px;
}

.header a {
	top: 200px;
}
.header img {
	height: 120px;
}

.card-img {
	height: 300px;
}
.item h3 {
	padding-top: 350px;
}

.continut3 {
	height: 450px;
}
.continut3 .inside-text3 h4{
	font-size: 1.6vh;
	padding-top: 5%;
	padding-right: 2%;
}
.continut3 .inside-text3 p{
	font-size: 1vh;
}
.continut3 .inside-text3 h3{
	font-size: 1.4vh;
}
}