* {
  box-sizing: border-box;
}
html{
  position: relative;
}
.body-wrapper {
  min-height: 100%;
  margin-top: 50px;
}
@font-face {
  font-family: 'PrimoFont';
  src: url("font/f37-Regular.ttf") format("truetype");
}

body {
 background: #FAF5EC;
 color: #692d55;
}

h1 {
  font-family: "PrimoFont", sans-serif;
  margin-top: 40px;
  margin-bottom: 50px;
}
.ui-effects-wrapper{
  display: inline;
}
.icon {
  vertical-align: bottom;
  width: auto;
  margin-bottom:20px; 
}

.icon2{
  margin-left: 10px;
  margin-right: 10px;
}

@media screen and (max-width: 767px){
  .icon{
    max-width: 30%;
  }
  .icon2{
    margin-left: 10px;
    margin-right: 10px;
  }
  .icon3{
    max-width: 23.5%;
  }
}

@media screen and (max-width: 479px){
  .icon{
    max-width: 30%;
  }
  .icon2{
    margin-left: 10px;
    margin-right: 10px;
  }
  .icon3{
    max-width: 23.5%;
  }
}


@keyframes jump1 {
	0%, 50%, 80%, 100% {
		-webkit-transform: translateY(0)rotate(0deg);
		-ms-transform:     translateY(0)rotate(0deg);
		transform:         translateY(0)rotate(0deg);
  }
  20% {
		-webkit-transform: translateY(-40px)rotate(-20deg);
		-ms-transform:     translateY(-40px)rotate(-20deg);
		transform:         translateY(-40px)rotate(-20deg);
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px);
	}
	60% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px);
	}
}
.icon1 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: 2;
}

.icon1:hover {
  animation-name: jump1;
  -moz-animation-name: jump1;
}
@keyframes jump2 {
	0%, 100% {
		-webkit-transform: translateY(0);
		-ms-transform:     translateY(0);
		transform:         translateY(0);
  }
  20% {
		-webkit-transform: translateY(-40px);
		-ms-transform:     translateY(-40px);
		transform:         translateY(-40px);
	}
	40% {
		-webkit-transform: translateY(30px);
		-ms-transform:     translateY(30px);
		transform:         translateY(30px);
	}
	60% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px);
  }
  80% {
		-webkit-transform: translateY(10px);
		-ms-transform:     translateY(10px);
		transform:         translateY(10px);
	}
}
.icon2 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: 2;
}

.icon2:hover {
  animation-name: jump2;
  -moz-animation-name: jump2;
}
@keyframes jump3 {
	0%, 50%, 80%, 100% {
		-webkit-transform: translateY(0)rotate(0deg);
		-ms-transform:     translateY(0)rotate(0deg);
		transform:         translateY(0)rotate(0deg);
  }
  20% {
		-webkit-transform: translateY(-40px)rotate(20deg);
		-ms-transform:     translateY(-40px)rotate(20deg);
		transform:         translateY(-40px)rotate(20deg);
	}
	40% {
		-webkit-transform: translateY(-30px);
		-ms-transform:     translateY(-30px);
		transform:         translateY(-30px);
	}
	60% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px);
	}
}
.icon3 {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  -webkit-animation-iteration-count: 2;
}

.icon3:hover {
  animation-name: jump3;
  -moz-animation-name: jump3;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		-webkit-transform: translateY (0);
		-ms-transform:     translateY(0);
		transform:         translateY(0);
	}
	40% {
		-webkit-transform: translateY(-20px);
		-ms-transform:     translateY(-20px);
		transform:         translateY(-20px);
	}
	60% {
		-webkit-transform: translateY(-10px);
		-ms-transform:     translateY(-10px);
		transform:         translateY(-10px);
	}
}

.button {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
  background: #f53c3c;
  border: 2px solid #f53c3c;
  text-decoration: none !important;
  border-radius: 28px;
  color: #faf5eb;
  display: inline-block;
  font-family: "PrimoFont",sans-serif;
  font-size: 16px;
  font-weight: 700; 
  height: 42px;
  line-height: 38px;
  padding: 0 20px;
  text-align: center;
  white-space: nowrap;
  margin-top: 40px;
}

a:hover {
  cursor: pointer;
  color: #faf5eb;
  animation-name: bounce;
  -moz-animation-name: bounce;
}