html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body{
  font-family: 'Roboto', sans-serif;
  color: #fff;
  text-align: center;
}

#secd_info a{
  color: white;
}

#secd_info b{
  background-color: rgba(0, 0, 0, 0.3);
  padding-left: 10px;
  padding-right: 10px;
}

#prim_info{
  position: absolute;
  top: 20px;
  left: 20px;
  width: 50%;
  text-align: left;
}

#prim_info .h1{
  font-weight: 200;
  font-size: 100px;
}

#prim_info .h2{
  font-weight: 100;
  font-size: 60px;
  padding-left: 20px;
}



#secd_info{
  position: absolute;
  bottom: 80px;
  right: 80px;
  text-align: right;
}

#secd_info .h1{
  font-weight: 300;
  font-size: 60px;
  padding-bottom: 20px;
}



#contact{
  position: absolute;
  top: 25%;
  height: 50%;
  width: 100%;
}

#contact .contFrag{
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(66, 66, 66, 0.7);
  padding: 15px;
  width: 20%;
  color: rgb(63, 63, 68);
}

#contact h1{
  color: #fff;
  width: 100%;
  text-align: center;
  position: absolute;
  font-size: 45px;
  top: -35%;

  /*animation: swoosh 1000ms linear both;*/
}

#contact .contFrag h2{
  margin: 0px;
}

#contact #skype{
  left: 20%;
  top: 10%;
}

#contact #mail{
  left: 40%;
  top: 40%;
}

#contact #ts{
  right: 20%;
  top: 70%;
}

#contact > .contFrag{
  animation: swuup 750ms linear both;
}

#background{
  z-index: 100;
}

#canvas-basic {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#legal{
  position: absolute;
  bottom: 0px;
  left: 0;
  color: rgba(141, 141, 150, 0.57);
  transition: all 250ms ease-out;
  width: 70%;
  text-align: center;
}

#legal i{
  color: rgb(255, 91, 91);
}

#legal.inContact{
  width: 100%;
  text-align: center;
}

.btn{
  font-size: 30px;
  padding: 5px;
  padding-left: 13px;
  padding-right: 13px;
  position: absolute;
  cursor: pointer;
  margin-top: 22px;
  background-color: rgba(227, 227, 227, 0.2);
}

.btn::before, .btn::after{
  background-color: #fff;
  position: absolute;
  height: 2px;
  width: 0px;
  content: "";
  transition-duration: 250ms;
  transition-timing-function: ease-out;
}

.btn::before{
  top: 0;
  left: 0px;
}

.btn::after{
  bottom: 0;
  right: 0px;
}

.btn:hover:before, .btn:hover:after{
  width: 100%;
}

.h1{
  text-shadow: 0 0 7px rgba(255, 255, 255, 0.5);
}

.entry{
  font-weight: 100;
  font-size: 40px;
  display: block;
  padding-top: 10px;
}

.entry b{
    font-weight: 300;
}

#tr1{
    animation-name: tr1;
    animation-duration: 700ms;
    animation-timing-function: ease-out;
}

#tr2{
    animation-name: tr2;
    animation-duration: 700ms;
    animation-timing-function: ease-in-out;
}

@keyframes tr1 {
  0%{
    d: path("M0 0 L0 0 L0 75 Z");
  }

  100%{
    d: path("M0 0 L90 0 L0 75 Z");
  }
}

@keyframes tr2 {
  0%{
    d: path("M12 100 L100 100 L100 100 Z");
  }

  100%{
    d: path("M12 100 L100 100 L100 10 Z");
  }
}

@keyframes swuup {
  0% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.2% { transform: matrix3d(0.673, 0.192, 0, 0, 0.126, 0.673, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.5% { transform: matrix3d(0.743, 0.25, 0, 0, 0.163, 0.743, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.41% { transform: matrix3d(0.836, 0.301, 0, 0, 0.196, 0.836, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.01% { transform: matrix3d(0.94, 0.308, 0, 0, 0.201, 0.94, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.71% { transform: matrix3d(1.032, 0.234, 0, 0, 0.154, 1.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.51% { transform: matrix3d(1.044, 0.212, 0, 0, 0.14, 1.044, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.92% { transform: matrix3d(1.07, 0.098, 0, 0, 0.066, 1.07, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.92% { transform: matrix3d(1.069, 0.077, 0, 0, 0.052, 1.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(1.038, -0.001, 0, 0, -0.001, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(1.016, -0.015, 0, 0, -0.01, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.43% { transform: matrix3d(1.006, -0.017, 0, 0, -0.011, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  34.63% { transform: matrix3d(0.997, -0.014, 0, 0, -0.01, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40.14% { transform: matrix3d(0.992, -0.007, 0, 0, -0.005, 0.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(1, 0.001, 0, 0, 0.001, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.36% { transform: matrix3d(1.001, 0.001, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  81.48% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  84.68% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes swoosh {
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, 0, 0, 1); }
  1.3% { transform: matrix3d(3.905, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -237.02, 0, 0, 1); }
  2.55% { transform: matrix3d(4.554, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -182.798, 0, 0, 1); }
  4.1% { transform: matrix3d(4.025, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -125.912, 0, 0, 1); }
  5.71% { transform: matrix3d(3.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -79.596, 0, 0, 1); }
  8.11% { transform: matrix3d(1.82, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -31.647, 0, 0, 1); }
  8.81% { transform: matrix3d(1.581, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -21.84, 0, 0, 1); }
  11.96% { transform: matrix3d(1.034, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 4.825, 0, 0, 1); }
  12.11% { transform: matrix3d(1.023, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 5.53, 0, 0, 1); }
  15.07% { transform: matrix3d(0.947, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 12.662, 0, 0, 1); }
  16.12% { transform: matrix3d(0.951, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 13.007, 0, 0, 1); }
  27.23% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.352, 0, 0, 1); }
  27.58% { transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 2.121, 0, 0, 1); }
  38.34% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.311, 0, 0, 1); }
  40.09% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.291, 0, 0, 1); }
  50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -0.048, 0, 0, 1); }
  60.56% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.007, 0, 0, 1); }
  82.78% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@media (max-width: 960px) {

  #prim_info{
    top: 5px;
  }

  #prim_info .h1{
    font-size: 60px;
    display: block;
  }

  #prim_info .h2{
    font-size: 30px;
    padding-left: 0;
  }

  #secd_info{
    bottom: 20px;
    right: 20px;
  }

  #secd_info .h1{
    font-size: 30px;
  }

  .entry{
    font-size: 20px;
  }

  #legal{
	display: none;
    font-size: 15px;
    width: 35%;
	bottom: 50px;
    background-color: rgba(46, 46, 46, 0.3);
    color: rgba(199, 199, 199, 0.8);
  }

  .btn{
    width: 30px;
    height: 28px;
    overflow: hidden;
  }

  #contact .contFrag{
    width: 60%;
  }

  #contact h1{
    font-size: 25px;
  }

  #contact #skype{
    right: 0%;
    left: auto;
    top: 5%;
  }

  #contact #mail{
    right: 0%;
    left: auto;
    top: 35%;
  }

  #contact #ts{
    right: 0%;
    left: auto;
    top: 65%;
  }
}