body {
    font-family: 'Roboto', sans-serif;
}
.page-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 100vh;
}
.content {
    width: 55%;
    height: 100%;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.copyright-box {
    display: flex;
    flex-direction: column;
}
.blue {
    width: 45%;
    height: 100%;
    background-color: #0089FF;
    
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    
    -webkit-clip-path: ellipse(100% 70% at 100% 50%);
    clip-path: ellipse(100% 70% at 100% 50%);
    
/*    -webkit-clip-path: circle(80% at 120% 50%);*/

}

.btn-primary {
    display: inline-block;
    padding: 15px 25px;

    font-size: 14px;
    line-height: normal;
    text-decoration: none;
    color: #000;
    background-color: #0089FF;
    border-radius: 60px;
/*    border: 2px solid #ff0000;*/
    
    transition: all 0.35s; 
}
.btn-primary:hover {
/*    color: #000;*/
    background-color: #0066be;
/*    box-shadow: 2px 2px 10px rgba(158, 187, 211, 0.5);*/
/*    background-color: transparent;*/
/*    border: 2px solid #ff0000;*/
}
a.btn-primary {
    color: #FFF;
    text-decoration: none;
}
button.btn-primary {
    color: #FFF;
    text-decoration: none;
    border: none;
}

.btn-primary:not(:disabled):not(.disabled):tab-active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #FC4A1E;
    border-color: transparent;
}
.btn-primary i {
    transition: all 0.35s; 
}
.btn-primary:hover i {
    transform: translate3d(4px, 0, 0);
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button-bevel;
}

.text-item {
    align-self: flex-end;
    margin-bottom: -100px;
}
.social-item {
    align-self: flex-end;
    padding-bottom: 30px;
}
.social-item a {
    font-size: 14px;
    color: #707070;
    margin: 0 10px;
}

/*
.phone-item a {
    background-color: #f2f2f2;
    padding: 2px 10px;
    display: inline-block;
    border-radius: 15px;
}
*/

@keyframes clip-anim {
  0% {
    -webkit-clip-path: ellipse(0px 0px at 50% 50%);
  }
  20% {
    -webkit-clip-path: ellipse(90px 90px at 50% 50%);
  }
  50% {
    -webkit-clip-path: ellipse(90px 90px at 50% 50%);
  } 
  100% {
    -webkit-clip-path: ellipse(100% 70% at 100% 50%);
  }
}
.clip-anim {
    animation-name: clip-anim;
    animation-duration: 3.0s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
@keyframes clip-anim-mobile {
  0% {
    -webkit-clip-path: ellipse(0px 0px at 50% 50%);
  }
  20% {
    -webkit-clip-path: ellipse(60px 60px at 50% 50%);
  }
  55% {
    -webkit-clip-path: ellipse(60px 60px at 50% 50%);
  } 
  100% {
    -webkit-clip-path: ellipse(70% 100% at 50% 0%);
  }
}

@keyframes clip-anim-out {
  0% {
    -webkit-clip-path: ellipse(0px 0px at 100% 50%);
      opacity: 0;
  }
  20% {
    -webkit-clip-path: ellipse(00px 00px at 70% 50%);
      opacity: 0;
/*      background-color: #EEE;*/
  }
  57% {
    -webkit-clip-path: ellipse(00px 00px at 70% 50%);
      opacity: 0.7;
  } 
  100% {
    -webkit-clip-path: ellipse(105% 105% at 100% 50%);
      opacity: 1;
  }
}
.clip-anim-out {
    animation-name: clip-anim-out;
    animation-duration: 3.0s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
@keyframes clip-anim-out-mobile {
  0% {
    -webkit-clip-path: ellipse(0px 0px at 0 0);
      opacity: 0;
  }
  20% {
    -webkit-clip-path: ellipse(00px 00px at 50% 0);
      opacity: 0;
  }
  60% {
   -webkit-clip-path: ellipse(0% 0% at 50% 0%);
      opacity: 0.5;
  } 
  100% {
    -webkit-clip-path: ellipse(100% 110% at 50% 0%);
      opacity: 1;
  }
}


@keyframes fadeInUpSm {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fadeInUpSm {
    animation-name: fadeInUpSm;
    animation-duration: 0.5s;
}














.circle-mask {
    width: 100%;
    height: 70vh;
    background-color: #0089FF;
    -webkit-clip-path: circle(86% at 50% -50%);
}

.circle {
    width: 200vw;
    height: 200vw;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: #0089FF;
    border-radius: 50%;
    transition: all 1s;
    transform-origin: center;
    
/*    transform: translateX(-50%) translateY(-50%);*/
}

.circle:hover {
/*
    width: 200vw;
    height: 200vw;
*/
    
/*    left: -25vw;*/
    
/*
    width: 350vw;
    height: 350vh;
*/
    transform: scale(0.1);
    background-color: #0089FF;
    transition: all 1s;
}

.wrapper {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}







/* Small devices (landscape phones, less than 768px) */
@media screen and (max-width: 768px) {

.page-wrapper {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    height: 100vh;
}
.content {
    width: 100%;
/*    height: 100%;*/
}
.blue {
    width: 100%;
    height: 30%;
    background-color: #0089FF;
    
    -webkit-clip-path: ellipse(70% 100% at 50% 0%);
}
    
.clip-anim {
    animation-name: clip-anim-mobile;
    animation-duration: 2.5s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}
.clip-anim-out {
    animation-name: clip-anim-out-mobile;
    animation-duration: 2.5s;
    animation-delay: 0.5s;
    animation-fill-mode: both;
}  
.text-item {
    margin-bottom: 0px;
}
.social-item {
    padding-bottom: 0px;
}  
    
img.logo  {
    width: 80px;
    height: auto;
}  
    
}