@import url("https://fonts.googleapis.com/css2?family=Maven+Pro:wght@400;700&family=Noto+Sans:wght@400;700&family=Poppins:wght@300;400;600&display=swap");

*,
:after,
:before {
  box-sizing: border-box;

  outline: 0;
}

html {
  -ms-text-size-adjust: 100%;

  -webkit-text-size-adjust: 100%;
}

body {
  overflow: hidden;

  margin: 0;

  padding: 0;
}

a,
button,
h1,
h2,
h3,
h4,
h5,
h6,
input,
p,
small,
span {
  text-rendering: optimizelegibility;

  -webkit-font-smoothing: antialiased;

  -webkit-text-size-adjust: 100%;

  -ms-text-size-adjust: 100%;

  text-size-adjust: 100%;

  font-feature-settings: "kern";
}

a,
a:active,
a:hover,
a:visited {
  font-family: "maven pro", "noto sans", sans-serif;

  font-size: 0.75rem;

  line-height: 1rem;

  text-transform: uppercase;

  color: #000;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-decoration: none;
}

ul {
  padding: 0;

  margin: 0;

  list-style: none;
}

li {
  text-align: -webkit-match-parent;
}

.banner {
  position: absolute;

  width: 100vw;

  height: 100vh;

  overflow: hidden;
}

.banner-img {
  position: absolute;

  width: 100%;

  height: 100%;

  background: no-repeat 50% 50%;

  background-size: cover;

  animation: animate 65s linear infinite;

  opacity: 1;

  transform: scale(1.2);
}

.banner-img:nth-child(1) {
  animation-name: animate-1;

  z-index: 3;
}

.banner-img:nth-child(2) {
  animation-name: animate-2;

  z-index: 2;
}

.banner-img:nth-child(3) {
  animation-name: animate-3;

  z-index: 1;
}

.banner-img:nth-child(4) {
  animation-name: animate-4;

  z-index: 0;
}

@keyframes animate-1 {
  0% {
    opacity: 1;

    transform: scale(1.2);
  }

  1.5% {
    opacity: 1;
  }

  23% {
    opacity: 1;
  }

  26% {
    opacity: 0;

    transform: scale(1);
  }

  100% {
    opacity: 0;

    transform: scale(1.2);
  }

  98% {
    opacity: 0;

    transform: scale(1.22);
  }

  100% {
    opacity: 1;
  }
}

@keyframes animate-2 {
  23% {
    opacity: 1;

    transform: scale(1.2);
  }

  26% {
    opacity: 1;
  }

  48% {
    opacity: 1;
  }

  51% {
    opacity: 0;

    transform: scale(1);
  }

  100% {
    opacity: 0;

    transform: scale(1.2);
  }
}

@keyframes animate-3 {
  48% {
    opacity: 1;

    transform: scale(1.2);
  }

  51% {
    opacity: 1;
  }

  73% {
    opacity: 1;
  }

  76% {
    opacity: 0;

    transform: scale(1);
  }

  100% {
    opacity: 0;

    transform: scale(1.2);
  }
}

@keyframes animate-4 {
  73% {
    opacity: 1;

    transform: scale(1.2);
  }

  76% {
    opacity: 1;
  }

  98% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform: scale(1);
  }
}

.component-anouncer {
  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 50;

  background-color: rgba(0, 0, 0, 0.75);

  text-align: center;
}

.wstone-cry {
  font-family: "Poppins";

  text-align: center;

  text-transform: uppercase;

  padding: 0px 30px;

  font-weight: 400;

  color: #fff;
}

.wstone-cry img {
  margin: 10px;
}

.wstone-cry span {
  display: block;

  font-size: 36px;
}

.social {
  display: flex;

  align-items: center;

  justify-content: center;

  margin: 20px;
}

.social ul li:first-child {
  margin-left: 0;
}

.social ul li {
  display: inline-block;

  margin-left: 48px;
}

/*

.social ul li a {

  display: block;

  font-size: 0;

  line-height: 0;

  width: 20px;

  height: 20px;

}

*/

/*

.social-sharing-item {

	margin: 0px 15px;

}

*/

.social-sharing-item i {
  font-size: 20px;

  color: #fff;
}

.social-sharing-item i:hover {
  color: #d73c2e;
}

h3 {
  display: block;

  font-family: "Maven pro", "Noto sans", sans-serif;

  font-size: 1.25rem;

  font-weight: 300;

  line-height: 1em;

  letter-spacing: 5px;

  color: white;
}

h3 span {
  color: #ff360d;
}

@media only screen and (max-width: 600px) {
  ..wstone-cry img {
    margin: 15px;
  }

  .wstone-cry {
    padding: 0px 4px;

    line-height: 1;
  }

  .wstone-cry span {
    font-size: 28px;
  }

  .social ul li {
    margin-left: 30px;
  }

  h3 {
    line-height: 1.25em;
  }
}

/* 

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

  .wstone-cry {

    padding: 0px 10px;

    font-weight: 400;

    color: #fff;

  }



  ..wstone-cry span {

    font-size: 24px;

  }



  .wstone-cryy img {

    width: 250px;

  }

  

  .social {

    margin: 10px;

  }



  .social ul li {

    margin-left: 38px;

  }



  h3 {

    font-size: 1.25rem;

  }

}

*/