@charset "UTF-8";
/* CSS Document */
@font-face {
    font-family: moon_light; 
    src: url("font/Moon_Light.otf") format("opentype");
}
@font-face { 
	font-family: moon_bold;
    src: url("font/Moon_Bold.otf") format("opentype");
} 
html,
body {
   width: 100%;
   height: 100%;
   padding: 0px;
   margin: 0px; 
   font-family: moon_light; 
    -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   -ms-text-size-adjust: 100%;
   -webkit-texts-size-adjust: 100%;
   -webkit-backface-visibility: hidden;   
}  

*{box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;position:relative;}
.background_color{background-color: #dfdfdf; background-image: linear-gradient(to bottom, #dddbd1, #d2dbdc);} 
.border-radius{border-radius:3px;-webkit-border-radius:3px;-o-border-radius:3px;}
.border{border:1px solid #d8dbdf;}
.text_color{color:#292929;}
.style {
-webkit-box-align: stretch;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    border: 0 solid #000;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin: 0;
    position: relative;
}
.icons {background-image:url(icons/icons.png);flex-grow: 0; flex-shrink: 0;}
.logo {width:30px;height:30px;overflow:hidden;}
.chat_column_1:hover .logo {width:105px;}
/*Page Layout*/
.page_container {
    width: 100%;
    margin: 0px;
    top: 0;
    height: 100%;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    position: relative;
    z-index: 2;
    overflow: hidden;
    -moz-transform-origin: center;
    -webkit-transform-origin: center;
    transform-origin: center;
    -moz-animation: app-enter .3s cubic-bezier(.1, .82, .25, 1);
    -webkit-animation: app-enter .3s cubic-bezier(.1, .82, .25, 1);
    animation: app-enter .3s cubic-bezier(.1, .82, .25, 1);
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #f7f7f7;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -moz-flex:;
    display: -ms-flexbox;
    display: flex;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
}
.column-left {
    -o-flex: 0 0 40%;
    -ms-flex: 0 0 40%;
    -webkit-flex: 0 0 40%;
    -ms-flex: 0 0 40%;
    flex: 0 0 40%;
    max-width: 550px;
    min-width: 320px;
    z-index: 2;
}

.bg {
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  -o-background-size:cover;
}

.animation_background {
   position:absolute;
   width:100%;
   height:100%;
  background: linear-gradient(314deg, rgba(255,0,223,0.5), rgba(255, 0, 0, 0.09), rgba(62,0,255,0.5), rgba(255,0,234,0.5), rgba(255,0,0,0.5), rgba(0, 139, 191, 0.71));
   background-size: 1200% 1200%;

  /* -webkit-animation: bgAnimation 15s ease infinite;
   -moz-animation: bgAnimation 15s ease infinite;
   -o-animation: bgAnimation 15s ease infinite;
   animation: bgAnimation 15s ease infinite;*/
}

@-webkit-keyframes bgAnimation {
    0%{background-position:17% 0%}
    50%{background-position:84% 100%}
    100%{background-position:17% 0%}
}
@-moz-keyframes bgAnimation {
    0%{background-position:17% 0%}
    50%{background-position:84% 100%}
    100%{background-position:17% 0%}
}
@-o-keyframes bgAnimation {
    0%{background-position:17% 0%}
    50%{background-position:84% 100%}
    100%{background-position:17% 0%}
}
@keyframes bgAnimation { 
    0%{background-position:17% 0%}
    50%{background-position:84% 100%}
    100%{background-position:17% 0%}
}

.slider_container {
   position:absolute;
   width:100%;
   height:100%;
}
.slider_in {
   position:relative;
   width:100%;
   overflow:hidden;
   height:100%;
}
.slider-item {
  width:100%; 
  position:absolute;
  padding:50px 30px;
  bottom:0px;
  color:#ffffff;
   word-break: break-all; 
}
.column-right {
    -o-flex: 3;
    -ms-flex: 3;
    -webkit-flex: 3;
    -ms-flex: 3;
    flex: 3;
    min-width: 0;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    z-index: 1;
	background-color:#FAFAFA;
}
.column_right_header {
  width:100%;
  padding:30px;
  display:inline-block;
  -webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
    animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
	z-index:6;
}
.column_right_header_in {
   float:right; 
   -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.column_right_title {
  float:left;
  color:#0C0C0C;
  font-weight:300;
  font-size:14px; 
  line-height: 36px;
  padding-right: 30px;
}
.column_right_header_button {
  text-align:center;
  padding:10px 25px;
  color:#ffffff;
  font-weight:600;
  font-size:14px;
  border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  background-color:#5B93FC;
  cursor:pointer;
}
.slider_header {
  position:relative;
  width:100%;
  font-size:25px;
  font-weight:600; 
  margin-bottom:15px;
  font-family: moon_bold;
  word-break: break-all;
  white-space: nowrap;
}
.slider_item_information {
  position:relative;
  width:100%;
  font-size:20px;
  font-weight:500; 
  font-family: moon_light;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  word-break: break-word;
  hyphens: auto;
}
.display {
    display: none;
} 
.column_right_middle_container {
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-60%);
    z-index: 5;
	width:100%;
	
}
.system_logo {
   width:100%;
   max-width:200px;
   height:200px;
   margin:0px auto;
       -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
    animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
}
.system_logo img {
   width:100%;	
}
.day_wellcome {
 position:absolute;
 width:100%;
 padding: 65% 0px 20px 0px;
 bottom:0px;
 left:0px;
 opacity:.8;
}
.day {
  background-image:url(../uploads/time_of_day/day.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}
.night {
  background-image:url(../uploads/time_of_day/day.jpg);
  background-repeat:no-repeat;
  background-size:cover;
}
.day_wellcome:before {
   position:absolute;
   content:"";
   width:100%;
   height:100%;
   top: 0px;
   background: linear-gradient(to bottom, #FAFAFA 0%, transparent 100%);
}

.day_text , .night_text {
   display:none;
   padding-left: 20px;
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
	font-family: moon_bold;
}
.show_time{
  display:block;
}
.login_note {
  width:100%;
  text-align:center;
  font-size:18px;
  font-weight: 500;
  color: #1D406D;
      -webkit-animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
    animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
}
.login_form {
   width:100%;
   max-width:350px;
   margin:0px auto;
   padding-top:30px;
       -webkit-animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
    animation: well-animation1 1s cubic-bezier(.1, .82, .25, 1);
}
.login_form_item {
   width:100%;
   padding:10px 0px;
   display:inline-block;
}
.forgot_pass {
   width:100%;
   padding: 3px 5px; 
   display:inline-block;
   text-align:right;
}
.forgot_pass a {
  text-decoration:none;
  color:#949494;
  font-size:13px;
  font-weight:300;
}
.input_field {
  outline:none;
  border: 1px solid rgba(29, 64, 109, 0.28);
  border-radius:8px;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  padding:10px;
  color:#444444;
  width:100%;
  font-size:14px;
  text-align:center; 
}
.button {
    width: 100%;
    height: 35px;
    padding: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    color: rgba(255,255,255,1);
    font: bold 15px/35px moon_light;
    border: 1px solid rgba(255,255,255,0);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    /*background-image: rgba(251,251,251,0);
    background-image: -webkit-linear-gradient(top, #5b93fc 0%,#5b93fc 100%);
    background-image: -moz-linear-gradient(top, #5b93fc 0%,#5b93fc 100%);
    background-image: -o-linear-gradient(top, #5b93fc 0%,#5b93fc 100%);
    background-image: -ms-linear-gradient(top, #5b93fc 0%,#5b93fc 100%);
    background-image: linear-gradient(top, #5b93fc 0%,#5b93fc 100%);
	*/
	outline:none;
	cursor:pointer;
}
.register_form_item {
    width: 100%;
    padding: 5px 0px;
    display: inline-block;
}
.gender {
   float:left;
   display:inline-block;
   margin-right:10px;
}
label {
    font-size: .8rem;
	font-family: moon_bold;
    color: #9e9e9e;
}
[type="radio"]:not(:checked), [type="radio"]:checked {
    position: absolute;
    opacity: 0;
    pointer-events: none;
	overflow: visible;
	font-size: 100%;
    line-height: 1.15;
    margin: 0;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}
[type="radio"]:not(:checked)+span, [type="radio"]:checked+span {
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    -webkit-transition: .28s ease;
    transition: .28s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after {
    border: 2px solid #5b93fc;
}
[type="radio"]:not(:checked)+span:after {
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after {
    border: 2px solid #5b93fc;
}
[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after, [type="radio"]:checked+span:before, [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border-radius: 3px;
}
[type="checkbox"], [type="radio"] {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border: 2px solid #5b93fc;
}
[type="radio"]:not(:checked)+span:before, [type="radio"]:not(:checked)+span:after, [type="radio"]:checked+span:before, [type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:before, [type="radio"].with-gap:checked+span:after {
    border-radius: 3px;
}
[type="radio"]:checked+span:before {
    border: 2px solid transparent;
}
[type="radio"]:checked+span:after, [type="radio"].with-gap:checked+span:after {
    background-color: #5b93fc;
}
[type="radio"]+span:before, [type="radio"]+span:after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    margin: 4px;
    width: 16px;
    height: 16px;
    z-index: 0;
    -webkit-transition: .28s ease;
    transition: .28s ease;
}
[type="radio"]:checked+span:after {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}  
.hide {
  display:none !important;
}
/*Text Animations*/
.slider_header_1 {
transition: all 0.2s ease-out;-webkit-animation: fadeInUp 0.2s ease-in-out 0.2s;animation: fadeInUp 0.2s ease-in-out 0.2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.slider_item_information_1 {
transition: all 0.4s ease-out;-webkit-animation: fadeInUp 0.4s ease-in-out 0.4s;animation: fadeInUp 0.4s ease-in-out 0.4s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.slider_header_2 {
transition: all 0.2s ease-out;-webkit-animation: fadeInRight 0.2s ease-in-out 0.2s;animation: fadeInRight 0.2s ease-in-out 0.2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.slider_item_information_2 {
transition: all 0.4s ease-out;-webkit-animation: fadeInRight 0.4s ease-in-out 0.4s;animation: fadeInRight 0.4s ease-in-out 0.4s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.slider_header_3 {
transition: all 0.2s ease-out;-webkit-animation: bounceInRight 0.2s ease-in-out 0.2s;animation: bounceInRight 0.2s ease-in-out 0.2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.slider_item_information_3 {
transition: all 0.4s ease-out;-webkit-animation: bounceInRight 0.4s ease-in-out 0.4s;animation: bounceInRight 0.4s ease-in-out 0.4s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
.day_night {
transition: all 0.7s ease-out;-webkit-animation: slideInUp 0.7s ease-in-out 0.7s;animation: slideInUp 0.7s ease-in-out 0.7s;-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
 .background-video {
  background-position: top center;
  background-repeat: no-repeat;
  bottom: 0;
  left: 0;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
}

video,
source {
  bottom: 0;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: absolute;
}

.loaded .ytplayer-container {
  display: block;
}

.loaded .placeholder-image {
  opacity: 0;
}

.ytplayer-container {
  bottom: 0;
  height: 100%;
  left: 0;
  min-width: 100%;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 3;
}

.placeholder-image {
  height: 100%;
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
}

.ytplayer-shield {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
}

.ytplayer-player {
  position: absolute;
}
.left_in {
-webkit-animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
    animation: well-animation2 1s cubic-bezier(.1, .82, .25, 1);
}
.drawer-scale {
   -webkit-transform-origin: center center;
   transform-origin: center center;
   -webkit-animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
   animation: drawer-scale 750ms cubic-bezier(.1, .82, .25, 1);
}
@-webkit-keyframes drawer-scale {
   0%,
   20% {
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0)
   }
   100% {
      -webkit-transform: scale 1, 1;
      transform: scale 1, 1
   }
}

@keyframes drawer-scale {
   0%,
   20% {
      -webkit-transform: scale(0, 0);
      transform: scale(0, 0)
   }
   100% {
      -webkit-transform: scale 1, 1;
      transform: scale 1, 1
   }
}
@-webkit-keyframes well-animation1 {
   0%,
   25% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
   }
   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
   }
}

@keyframes well-animation1 {
   0%,
   25% {
      -webkit-transform: translateY(-50px);
      transform: translateY(-50px);
      opacity: 0
   }
   100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
      opacity: 1
   }
}
@-webkit-keyframes well-animation2 {
   0%,
   25% {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      opacity: 0
   }
   100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
   }
}

@keyframes well-animation2 {
   0%,
   25% {
      -webkit-transform: translateX(-50px);
      transform: translateX(-50px);
      opacity: 0
   }
   100% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
      opacity: 1
   }
}
@media screen and (max-width:1280px) {
.page_container {
    width: 100%; 
    margin: 0px;
    top: 0px;
    height: calc(100% - 0px);
    height: -webkit-calc(100% - 0px);
    height: -moz-calc(100% - 0px);
    border-radius: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0), 0 0px 0px 0 rgba(0, 0, 0, 0);
}	 
}
@media screen and (max-width:700px) {
.column-left {
    display:none;
}	 
.column_right_header { 
    padding: 5px;
}
.column_right_middle_container {
	left:0;
	padding:15px;
}
}
@media screen and (max-width:500px) { 
.column_right_title {
   display:none;
}
.system_logo { 
    max-width: 150px;
    height: 150px;
}
label {
    font-size: .8rem;
    color: #444;
}
}