@import url('https://fonts.googleapis.com/css?family=Heebo:100&display=swap');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scroll-behavior: smooth
}

body {
	background: black;
	color: white;
	font-family: Tahoma;
  	overflow-x: hidden;
  	overflow-y: scroll;
}

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background-image: url("https://images.pexels.com/photos/2418471/pexels-photo-2418471.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: rgb(0,0,0,.5);
    background-blend-mode: overlay;
}

.container {
	margin-right: auto;
  	margin-left:  auto; 
  	max-width: 960px;
  	padding-right: 10px; 
  	padding-left:  10px; 
}

a {
	text-decoration: none;
	color: inherit;
}

li {
	list-style: none;
}

#nav-bar {
	display: flex;
	justify-content: center;
	float: right;
	margin-right: 5%;
	margin-top: 2%;
}

.active {
     border-bottom: 5px solid white;
     color: white;
     padding-bottom: 2px;
 }

#main-heading {
	display: flex;
	float: left;
	margin-left: 3%;
	margin-top: 2.2%;
	font-size: 4vw;
	text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

#sub-heading {
	margin-top: 5.5%;
	margin-left: 8.7%;
	font-size: 2vw;
	position: absolute;
	font-family: 'Heebo', sans-serif;
	text-shadow: 2px 2px 8px black;
}

ul li {
	padding: 15px;
}

.link{
  display: inline-block;
  color: white;
  font-size: 2vw;
  cursor: pointer;
  position: relative;
  font-family: 'Heebo', sans-serif;
}

.three{
  padding: 15px;
}

.three::before{
  content: ' ';
  display: block;
  position: absolute;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
  height: 100%;
  width: 0;
  top: -5px;
  left: 50%;
  transition: 0.4s width, 0.4s left;
}

.three:hover::before{
  top: -5px;
  left: -7px;
  width: calc(100% + 10px);
}

.three::after{
  content: ' ';
  display: block;
  position: absolute;
  border-left: 5px solid white;
  border-right: 5px solid white;
  height: 0;
  width: calc(100% + 5px);
  top: 50%;
  left: -7px;
  transition: 0.4s height, 0.4s top;
}

.three:hover::after{
  height: calc(100% + 10px);
  top: -5px;
  left: -7px;
}


.about {
	display: flex;
	border: 2px solid white;
	border-right: none;
	border-left: none;
	padding: 70px 0 70px 0;
	margin-top: 11.5%;
	background-color: rgba(0,0,0,0.4);
	text-align: center;
	font-family: Arial;
	text-shadow: 1px 1px 1px #000;
	width: 100%;
	box-shadow: 0px 3px 10px rgba(0,0,0,.8)
}


.about h1 {
	padding: 10px;
	font-size: 4vw;
	margin-top: -30px;
	font-family: Tahoma;
	text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
    -webkit-animation: blur-out-contract 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
	animation: blur-out-contract 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}

@-webkit-keyframes blur-out-contract {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes blur-out-contract {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    letter-spacing: -0.5em;
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}

.about p {
	padding: 20px;
	font-size: 1.2vw;
	font-family: 'Heebo', sans-serif;
	-webkit-animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
	        animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}


@-webkit-keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}
@keyframes text-blur-out {
  0% {
    -webkit-filter: blur(0.01);
            filter: blur(0.01);
  }
  100% {
    -webkit-filter: blur(12px) opacity(0%);
            filter: blur(12px) opacity(0%);
  }
}


.box {
	display: inline-block;
	float: left;
	width: 30%;
  margin: 0 auto;
	padding: 10px 20px 30px 20px;
	margin-top: 30px;
	text-align: center;
	margin-right: 30px;
	background-color: rgba(0,0,0,0.5);
	border-radius: 15px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  transition: all .2s ease-in-out;
}

.box:hover {
	transform: scale(1.2);
  background-color: rgba(0,0,0,0.7);
  box-shadow: none;
}

.box h1 {
	padding: 10px;
	font-family: 'Raleway', sans-serif;
	-webkit-animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
	        animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}

.box p {
	 font-family: 'Heebo', sans-serif;
	 -webkit-animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
	        animation: text-blur-out 1.2s cubic-bezier(0.550, 0.085, 0.680, 0.530) reverse both;
}

.arrow-top {
	position: absolute;
  	text-align: center;
  	z-index: 9;
	  right: 0;
  	left: 0;
  	top: 100%;
  	bottom: 15px;
  	margin-top: 86%;
  	transform: rotate(179deg);
}

.arrow-scroll {
	position: absolute;
  	text-align: center;
  	z-index: 9;
  	right: 0;
  	left: 0;
  	bottom: 15px;
}
.arrow-scroll__wrap {
  display: inline-block;
  transition: all ease-in-out 0.2s;
  cursor: pointer;
}
.arrow-scroll__wrap:hover {
  opacity: 0.5;
}
.arrow-scroll__wrap_animated {
  animation: arrow-scroll 1.7s infinite ease;
}
@keyframes arrow-scroll {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
  55% {
    transform: translateY(-7px);
  }
  100% {
    transform: translateY(0);
  }
}


.cashregisters {		
	display: inline-block;
	float: left;
	width: 30%;
  position: relative;
  margin: 0 auto;
	margin-top: 10%;
	margin-left: 5%;
	background-color: rgba(0,0,0,.4);
	padding: 10px;
	border-radius: 15px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cashregisters h1 {
	font-size: 2.2vw;
	padding: 20px;
	font-family: 'Raleway', sans-serif;
}

.cashregisters p {
	font-size: 1.2vw;
	font-family: 'Heebo', sans-serif;
}

.pointofsale {
	display: inline-block;
	float: right;
	width: 30%;
  position: relative;
  margin: 0 auto;
	margin-top: 20%;
	margin-right: 5%;
	background-color: rgba(0,0,0,.4);
	padding: 10px;
	border-radius: 15px;
	text-align: right;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.pointofsale h1 {
	font-size: 2.2vw;
	padding: 20px;
	font-family: 'Raleway', sans-serif;
}

.pointofsale p {
	font-size: 1.2vw;
	font-family: 'Heebo', sans-serif;
}

.andmore{
	display: inline-block;
	width: 70%;
  position: relative;
  margin: 0 auto;
	text-align: center;
	margin-top: 5%;
	float: right;
	margin-right: 15%;
	margin-bottom: 10%;
	background-color: rgba(0,0,0,.4);
	padding: 10px;
	border-radius: 15px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.andmore h1 {
	font-size: 2.2vw;
	padding: 20px;
	font-family: 'Raleway', sans-serif;
}

.andmore p {
	font-size: 1.2vw;
	font-family: 'Heebo', sans-serif;
}

footer {
    clear: both;
    position: relative;
    height: 80px;
    margin-top: -200px;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-family: 'Heebo', sans-serif;
    font-size: 1.2vw;
}

.footer-main {
  transition: all .2s ease-in-out;
}

.footer-main:hover {
  transform: scale(1.3);
  background-color: rgba(0,0,0,0.4);
  padding: 20px;
}

@media only screen and (max-width: 360px) {
 .about {
  padding: 40px 0 20px 0;
  margin-bottom: 12%;
 }

 .about h1 {
  font-size: 9vw;
 }

 .about p {
  font-size: 3.8vw;
 }

 .box {
  width: 100%;
  zoom: 0.8;
 }

 #nav-bar {
  margin-top: 5%;
  margin-bottom: 5%;
 }

 .arrow-top {
  display: none;
 }

.link {
  font-size: 4.1vw;
  padding: 0;
}

.active {
  border-bottom: 2px solid white;
}

#main-heading {
  justify-content: center;
  float: none;
  font-size: 11.5vw;
}

#sub-heading {
  display: flex;
  justify-content: center;
  margin-top: 0;
  margin-left: 0;
  font-size: 5vw;
  position: static;
}

.tree {
  padding: 0;
}

.cashregisters {
  width: 90%;
}

.cashregisters h1 {
  font-size: 6vw;
}

.cashregisters p {
  font-size: 4.3vw;
}

.pointofsale {
  width: 90%;
}

.pointofsale h1 {
  font-size: 6vw;
}

.pointofsale p {
  font-size: 4.3vw;
}

.andmore {
  width: 100%;
  margin-right: 0;
}

.andmore h1 {
  font-size: 6vw;
}

.andmore p {
  font-size: 4.4vw;
}

footer {
  font-size: 4vw;
}

.arrow-scroll {
  bottom: 20px;
  zoom: 0.9;
}

}

@media only screen and (max-width: 1360px) {
  .box {
    margin-top: 10%;
  }

  .arrow-top {
    margin-top: 110%;
  }
}

@media only screen and (min-width: 1366px) {
  .box {
    margin-top: 10px;
  }

  .arrow-scroll {
     bottom: 5px;
  }

  .about {
    padding: 60px 0 60px 0;
  }
}

/*
@media only screen and (max-width: 1400px) {

}


@media only screen and (max-width: 1360px) {

}

@media only screen and (max-width: 768px) {
  
}

@media only screen and (max-width: 360px) {


}

@media only screen and (max-width: 320px) {

}
*/