/*
 * Template Name: 404 (1) Template
 * Author: @vitatemplates
*/
.wrapper {
  height: 100vh;
  display: flex;
  align-items: center; }

body {
  overflow-x: hidden; }

.square {
  width: 300px;
  height: 300px;
  overflow: hidden;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-radius: 35px; }
  .square .video {
    width: 150%;
    height: 150%;
    margin-left: -25%;
    margin-top: -25%;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg); }
    .square .video:before {
      background-color: rgba(114, 192, 44, 0.7);
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1; }
    .square .video #video {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover; }
  .square .text {
    position: absolute;
    z-index: 10;
    top: 120px;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff; }
    .square .text a {
      background-color: #fff;
      padding: .5rem 1rem;
      border-radius: 2rem;
      color: #000;
      text-decoration: none; }
      .square .text a:hover {
        background-color: #3498db;
        color: #fff;
        border: 2px solid #fff; }

@media (max-width: 767px) {
  .square {
    width: 150px;
    height: 150px; }
    .square .text {
      top: 55px; }
      .square .text h3 {
        font-size: 2rem; }
      .square .text h5 {
        font-size: .9rem; }
      .square .text a {
        padding: .3rem .5rem !important;
        font-size: .8rem; } }

/*# sourceMappingURL=404-1.css.map */