.container {
  max-width: 960px;
}

/*
 * Custom translucent site header
 */

.site-header {
  background-color: rgba(0, 0, 0, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.site-header a {
  color: #8e8e8e;
  transition: color 0.15s ease-in-out;
}
.site-header a:hover {
  color: #fff;
  text-decoration: none;
}

/*
 * Dummy devices (replace them with your own or something else entirely!)
 */

.product-device {
  position: absolute;
  /* bottom: -30%; */
  width: 200px;
  height: 385px;
  background-color: #333;
  border-radius: 21px;
  transform: rotate(10deg);
  box-shadow: -10px 10px 10px #666;
}

.product-device::before {
  position: absolute;
  top: 25px;
  right: 10px;
  bottom: 25px;
  left: 10px;
  content: '';
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.product-device-2 {
  right: auto;
  bottom: 0%;
  left: 320px;
  /* background-color: #e5e5e5; */
  /* overflow: hidden; */
}

.syy-desktop {
  z-index: 1;
  background-size: 180px 396px;
  background-position: 10px 25px;
  /* background-image: url(../assets/image/desktop.jpeg); */
  background-repeat: no-repeat;
}

.syy-phone {
  border-radius:5px;
  overflow:hidden;
  height:335px;
  margin:25px 10px;
}

.syy-desktop2 {
  transform: rotate(0deg) !important;
  left: 100px !important;
}

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}

.copyright {
  padding-top: 1rem;
  padding-bottom: 0.375rem;
  text-align: center;
}

.copyright .p-small {
  padding-top: 1.375rem;
  border-top: 1px solid #eee;
  color: #333;
}

.copyright a {
  color: #333;
  text-decoration: none;
}

.copyrighttext a {
  color: #333;
  text-decoration: none;
}

.syy-text-bg-light {
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
}

.syy-screen {
  height: 80vh;
}

@media (max-width: 1550px) {
  .syy-desktop1 {
    display: none !important;
  }
}

@media (max-width: 1300px) {
  .syy-screen img {
    height: 400px !important;
  }
  .syy-screen {
    height: 800px;
  }
}

@media (max-width: 1150px) {
  .syy-desktop2 {
    display: none !important;
  }
  .syy-screen img {
    height: 500px !important;
  }
  .syy-screen {
    height: 900px;
  }
}

@media (max-width: 880px) {
  .syy-screen img {
    height: 400px !important;
  }
  .syy-screen {
    height: 700px;
  }
}

@media (max-width: 700px) {
  .syy-screen img {
    height: 350px !important;
  }
  .syy-screen {
    height: 600px;
  }
}

@media (max-width: 600px) {
  .syy-screen img {
    height: 250px !important;
  }
  .syy-screen {
    height: 500px;
  }
}

@media (max-width: 450px) {
  .syy-screen img {
    height: 220px !important;
  }
  .syy-screen {
    height: 450px;
  }
}

@media (min-width: 768px) {
  .syytext {
    font-size: 1.5rem;
  }
}

@media (max-width: 768px) {
  .syytext {
    font-size: 1rem;
  }
}

.syytext {
  width: 21em;
  white-space: nowrap;
  overflow: hidden;
  /* border-right: 0.1em solid; */
  display: flex;
}
.syytext1 {
  animation: syytextAnimate 1s steps(16), syytextCursor 1s steps(1) infinite;
}
.syytext2 {
  animation: syytextAnimate 1s steps(15), syytextCursor 1s steps(1) infinite;
}
.syytext3 {
  animation: syytextAnimate 1s steps(21), syytextCursor 1s steps(1) infinite;
}
@keyframes syytextAnimate {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes syytextCursor {
  50% {
    border-color: transparent;
  }
  100% {
    border-color: black;
  }
}