*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-size: 16px;
  font-family: Lato, sans-serif !important;
  color: #222324;
  line-height: 1.6;
  background-color: #fff;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  font-family: Montserrat, sans-serif !important;
  line-height: 1.2;
  color: #242424;
  margin-top: 0;
  margin-bottom: .5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-transform: capitalize;
  margin-bottom: 0.75rem;
}



@media (max-width: 768px) {
  html, body {
    font-size: 50%;
	  width: 100%;
		  
  }
	


	
}

svg {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  overflow: visible;
}

.svg-icon {
  cursor: pointer;
}
.svg-icon path {
  stroke: rgba(87, 87, 87, 0.9);
  fill: none;
  stroke-width: 1;
}

input, button {
  outline: none;
  border: none;
}


.cont {
  position: relative;
  height: 100%;
  background-color: F8F8F8;
  background-size: cover;
  overflow: auto;
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

.demo {
  position: absolute;
  left: 30%;
  width: 30rem;
  height: 100%;
  overflow: hidden;
}

.login {
  position: relative;
  height: 60%;
 
  -webkit-transform: scale(1);
          transform: scale(1);
}
.login.inactive {
  opacity: 0;
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}
.login__check {
  position: absolute;
  top: 16rem;
  left: 13.5rem;
  width: 14rem;
  height: 2.8rem;
  background: #575757;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.login__check:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 2.8rem;
  height: 5.2rem;
  background: #575757;
  box-shadow: inset -0.2rem -2rem 2rem rgba(0, 0, 0, 0.2);
}
.login__form {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  padding: 1.5rem 2.5rem;
  text-align: center;
}
.login__row {
  height: 5rem;
  padding-top: 1rem;
}
.login__icon {
  margin-bottom: -0.4rem;
  margin-right: 0.5rem;
}
.login__icon.name path {
  stroke-dasharray: 73.50196075439453;
  stroke-dashoffset: 73.50196075439453;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}
.login__icon.pass path {
  stroke-dasharray: 92.10662841796875;
  stroke-dashoffset: 92.10662841796875;
  -webkit-animation: animatePath 2s 0.5s forwards;
          animation: animatePath 2s 0.5s forwards;
}
.login__input {
  display: inline-block;
  width: 22rem;
  height: 100%;
  padding-left: 1.5rem;
  font-size: 1.5rem;
  background: transparent;
  color: #FFFFFF;
	line-height: 4rem;
}
.login__submit {
  position: relative;
  width: 75%;
  height: 4rem;
  font-size: 1.5rem;
  border-radius: 3rem;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: width 0.3s 0.15s, font-size 0.1s 0.15s, all ease-in-out 0.4s;
  transition: width 0.3s 0.15s, font-size 0.1s 0.15s, all ease-in-out 0.4s;
	
	color: #fff;

background: transparent;
border-width: 0.0625rem;
border-style: solid;
border-color: #fff;
	
	
}
.login__submit:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  width: 3rem;
  height: 3rem;
  border: 2px dotted #575757;
  border-radius: 50%;
  border-left: none;
  border-bottom: none;
  -webkit-transition: opacity 0.1s 0.4s;
  transition: opacity 0.1s 0.4s;
  opacity: 0;
}


.login__submit:focus,
.login__submit:hover {
  background: #d7b065;
  color: #ffffff;
}




.login__submit.processing {
  width: 4rem;
  font-size: 0;
}
.login__submit.processing:after {
  opacity: 1;
  -webkit-animation: rotate 0.5s 0.4s infinite linear;
          animation: rotate 0.5s 0.4s infinite linear;
}
.login__submit.success {
  -webkit-transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
  transition: opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
  transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s;
  transition: transform 0.3s 0.1s ease-out, opacity 0.1s 0.3s, background-color 0.1s 0.3s, -webkit-transform 0.3s 0.1s ease-out;
  -webkit-transform: scale(30);
          transform: scale(30);
  opacity: 0.9;
}
.login__submit.success:after {
  -webkit-transition: opacity 0.1s 0s;
  transition: opacity 0.1s 0s;
  opacity: 0;
  -webkit-animation: none;
          animation: none;
}
.login__signup {
  font-size: 1.2rem;
  color: #ABA8AE;
}
.login__signup a {
  color: #575757;
  cursor: pointer;
}

.app {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  display: none;
  -webkit-transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transition: opacity 0.1s, -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  transition: opacity 0.1s, transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25), -webkit-transform 0.3s cubic-bezier(0.68, -0.45, 0.465, 1.25);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
.app.active {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app.active .app__user-photo {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app.active .app__meeting {
  -webkit-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
}
.app.active .app__logout {
  -webkit-transform: scale(1);
          transform: scale(1);
}
.app__top {
  position: relative;
  height: 28rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 6rem 1.5rem 2rem;
  text-align: center;
}
.app__bot {
  position: relative;
  height: 25rem;
  background: #575757;
}
.app__menu-btn {
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  width: 1.8rem;
  height: 1.7rem;
  cursor: pointer;
}
.app__menu-btn span, .app__menu-btn:before, .app__menu-btn:after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.6);
}
.app__menu-btn span {
  top: 0.8rem;
}
.app__menu-btn:before {
  content: "";
  top: 0;
}
.app__menu-btn:after {
  content: "";
  bottom: 0;
}
.app__icon {
  position: absolute;
  top: 2rem;
	color: #575757;
}
.app__icon.search {
  right: 1.5rem;
  stroke-dasharray: 61.847137451171875;
  stroke-dashoffset: 61.847137451171875;
  -webkit-animation: animatePath 0.5s 0.5s forwards;
          animation: animatePath 0.5s 0.5s forwards;
}
.app__hello {
  font-size: 2.2rem;
  color: #fff;
  font-weight: normal;
  margin-bottom: 3rem;
}
.app__user {
  position: relative;
  display: inline-block;
  width: 9rem;
  height: 9rem;
  margin-bottom: 3rem;
}
.app__user-photo {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
  transition: -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
  transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
  transition: transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55), -webkit-transform 0.3s 0.2s cubic-bezier(0.62, 0.35, 0.56, 1.55);
  -webkit-transform: scale(0);
          transform: scale(0);
}
.app__user-notif {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  line-height: 3rem;
  text-align: center;
  background: #50D2C2;
  color: #fff;
  font-size: 1.5rem;
}
.app__month:after {
  content: "";
  display: table;
  clear: both;
}
.app__month-name {
  display: inline-block;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.2rem;
  text-transform: uppercase;
}
.app__month-btn {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-left: none;
  border-bottom: none;
  cursor: pointer;
}
.app__month-btn.left {
  float: left;
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.app__month-btn.right {
  float: right;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.app__days {
  height: 7rem;
  padding: 1.5rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.app__day {
  width: 14%;
  text-align: center;
  font-size: 1.2rem;
}
.app__day.weekday {
  color: #919197;
  text-transform: uppercase;
}
.app__day.date {
  font-size: 1.2rem;
  font-weight: bold;
  color: #3C3C43;
}
.app__meeting {
  position: relative;
  height: 6rem;
  border-top: 1px solid #EEEEEF;
  padding: 1rem 2rem 1rem 7.5rem;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: transform 0.3s, opacity 0.3s;
  transition: transform 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
}
.app__meeting:nth-child(1) {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}
.app__meeting:nth-child(2) {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.app__meeting:nth-child(3) {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.app__meeting:nth-child(4) {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}
.app__meeting:nth-child(5) {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s;
}
.app__meeting-photo {
  position: absolute;
  left: 2rem;
  top: 1rem;
  width: 4rem;
  height: 4rem;
}
.app__meeting-name {
  color: #000;
  font-size: 1.3rem;
}
.app__meeting-info {
  color: #949498;
  font-size: 1.1rem;
}
.app__logout {
  position: absolute;
  bottom: 3.3rem;
  right: 3.3rem;
  width: 4.6rem;
  height: 4.6rem;
  margin-right: -2.3rem;
  margin-bottom: -2.3rem;
  background: #FC3768;
  color: #fff;
  font-size: 2rem;
  border-radius: 50%;
  cursor: pointer;
  -webkit-transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s;
  transition: bottom 0.4s 0.1s, right 0.4s 0.1s, transform 0.4s 0.4s, opacity 0.1s 0.7s, background-color 0.1s 0.7s, -webkit-transform 0.4s 0.4s;
  -webkit-transform: scale(0);
          transform: scale(0);
}
.app__logout.clicked {
  bottom: 50%;
  right: 50%;
  -webkit-transform: scale(30) !important;
          transform: scale(30) !important;
  opacity: 0.9;
}
.app__logout.clicked svg {
  opacity: 0;
}
.app__logout-icon {
  position: absolute;
  width: 3rem;
  height: 3rem;
  top: 50%;
  left: 50%;
  margin-left: -1.5rem;
  margin-top: -1.5rem;
  -webkit-transition: opacity 0.1s;
  transition: opacity 0.1s;
}
.app__logout-icon path {
  stroke-width: 4px;
  stroke-dasharray: 64.36235046386719;
  stroke-dashoffset: 64.36235046386719;
  -webkit-animation: animatePath 0.5s 0.5s forwards;
          animation: animatePath 0.5s 0.5s forwards;
}

.ripple {
  position: absolute;
  width: 15rem;
  height: 15rem;
  margin-left: -7.5rem;
  margin-top: -7.5rem;
  background: rgba(0, 0, 0, 0.4);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-animation: animRipple 0.4s;
          animation: animRipple 0.4s;
  border-radius: 50%;
}

@-webkit-keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}

@keyframes animRipple {
  to {
    -webkit-transform: scale(3.5);
            transform: scale(3.5);
    opacity: 0;
  }
}
@-webkit-keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animatePath {
  to {
    stroke-dashoffset: 0;
  }
}
.clock {
	display: inline-block;
	font-family: "Lato";
	color:#575757;
	font-size:80pt;
	line-height: 100pt;
	text-shadow:0 -1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(255, 255, 255, .5);
	font-weight:300;
}

.date {
	display: inline-block;
	font-family: "Lato", bold;
	color:#575757;
	font-size:17pt;
	line-height: 40pt;
	text-shadow:0 -1px 3px rgba(0, 0, 0, .3), 0 1px 2px rgba(255, 255, 255, .5);
	font-weight:400;
}

#date_time {
	right: 3%;
	bottom: 2%;
	height: 25%;
	position: fixed;
}

@media only screen and (max-width: 479px) {
   .mobile-hide{ display: none !important; }
}
/*---------------------------------------
  Navigation section              
-----------------------------------------*/

.custom-navbar {
  border: none;
  margin-bottom: 0;
  text-align: center;

}

.custom-navbar .navbar-brand {
  color: #444;
  font-weight: normal;
  font-size: 20px;
	max-height: 120px;
	  padding-top: 10%;

}

.custom-navbar .nav li a {
  font-size: 12px;
  font-weight: normal;
  color: #656565;
  letter-spacing: 1px;
  -webkit-transition: all ease-in-out 0.4s;
  transition: all ease-in-out 0.4s;
  padding: 0;
  margin: 15px;
}

.custom-navbar .navbar-nav > li > a:hover,
.custom-navbar .navbar-nav > li > a:focus {
  background-color: transparent;
  color: #ffa400;
}

.custom-navbar .navbar-nav li a:after {
  content: "";
  position: absolute;
  display: block;
  width: 0px;
  height: 2px;
  margin: auto;
  background: transparent;
  transition: width .3s ease, background-color .3s ease;
}

.custom-navbar .navbar-nav li a:hover:after,
.custom-navbar .nav li.active > a:after {
  background: #000000;
  color: #ffffff;
  width: 100%;
}

.custom-navbar .nav li.active > a {
  background-color: transparent;
  color: #d7b065;/**color: #454545; */
}

.custom-navbar .navbar-toggle {
  border: none;
  padding-top: 12px;
}

.custom-navbar .navbar-toggle {
  background-color: transparent;
}

.custom-navbar .navbar-toggle .icon-bar {
  background: #000000;
  border-color: transparent;
}

@media(min-width:768px) {
    .custom-navbar {
      border-bottom: 0;
      background: 0 0; 
    }
    .custom-navbar.top-nav-collapse {
      background: #ffffff;
      box-shadow:0 40px 100px rgba(0,0,0,.2);
      padding: 10px 0;
    }
	
	

}



.slider-container {
  width: 300px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.slider-container .back-bar {
  height: 10px;
  position: relative;
}
.slider-container .back-bar .selected-bar {
  position: absolute;
  height: 100%;
}
.slider-container .back-bar .pointer {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: red;
  cursor: col-resize;
  opacity: 1;
  z-index: 2;
}
.slider-container .back-bar .pointer.last-active {
  z-index: 3;
}
.slider-container .back-bar .pointer-label {
  position: absolute;
  top: -17px;
  font-size: 8px;
  background: white;
  white-space: nowrap;
  line-height: 1;
}
.slider-container .back-bar .focused {
  z-index: 10;
}
.slider-container .clickable-dummy {
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.slider-container .scale {
  top: 2px;
  position: relative;
}
.slider-container .scale span {
  position: absolute;
  height: 5px;
  border-left: 1px solid #999;
  font-size: 0;
}
.slider-container .scale ins {
  font-size: 9px;
  text-decoration: none;
  position: absolute;
  left: 0;
  top: 5px;
  color: #999;
  line-height: 1;
}
.slider-container.slider-readonly .clickable-dummy,
.slider-container.slider-readonly .pointer {
  cursor: auto;
}

.login__form {
background-image: url("/images/overlay.png"), linear-gradient(45deg, #726193 20%, #e37b7c 60%, #ffe4b4);
background-size: 100% 100%, auto;}




/* Promo Block v2 */
.s-promo-block-v2:before {
  background-image: linear-gradient(145deg, rgba(152, 119, 234, 0.7) -25%, #c54041 100%);
  background-repeat: repeat-x;
}

/* Promo Block v3 */
.reg-hr-line:before {
  background-image: linear-gradient(145deg, rgba(152, 119, 234, 0.9) -25%, #c54041 100%);
  background-repeat: repeat-x;
}

.reg-hr-line {
  position: relative;
  padding-bottom: 1.875rem;
}

.reg-hr-line:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0.1875rem;
  background-image: linear-gradient(145deg, rgba(152, 119, 234, 0.9) -25%, #13b1cd 100%);
  background-repeat: repeat-x;
  content: " ";
}

/* Promo Block v4 */
.backgroundreg {
  position: relative;
  z-index: 1;
}

.backgroundreg:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(34, 35, 36, 0.3) 0%, rgba(19, 177, 205, 0.6) 100%);
  background-repeat: repeat-x;
  content: " ";
}



.g-margin-b-70--md {
    margin-bottom: 4.375rem;
  }


.regdatefont-weight {
  font-weight: 300 !important;
}

  .regdate-font-size {
    font-size: 2rem !important;
  }

.regdate-opacity {
  color: rgba(255, 255, 255, 1.0) !important;
}

 .regdatefont {
    font-size: 12.4375rem !important;
  }

.regdate {
  line-height: .8;
  margin-right: 1rem;
}

.regdate-month, .regdate-year {
  display: block;
  line-height: 1.3;
}

.regdate-month {
  vertical-align: top;
}

::selection {
  color: #fff;
  background: #4a76c5;
  text-shadow: none;
}

::-webkit-selection {
  color: #fff;
  background: #c54041;
  text-shadow: none;
}

:active,
:focus {
  outline: none;
}


.backgroundcoverfull {
  height: 100vh;
}

/* Small screen / phone */
@media (min-width: 34em) {
  .g-fullheight--sm {
    height: 100vh;
}
}

/* Medium screen / tablet */
@media (min-width: 48em) {
  .g-fullheight--md {
    height: 100vh;
  }
}

/* Extra large screen / wide desktop */
@media (min-width: 62em) {
  .g-fullheight--lg {
    height: 100vh;
  }
}

/*----------------------------------
  Vertical Center Align
------------------------------------*/
.g-ver-center--xs {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  -webkit-transform: translate3d(0, -50%, 0);
  transform: translate3d(0, -50%, 0);
}

/* Small screen / phone */
@media (min-width: 34em) {
  .regaligncenter {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

/* Medium screen / tablet */
@media (min-width: 48em) {
  .g-ver-center--md {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}

/* Extra large screen / wide desktop */
@media (min-width: 62em) {
  .g-ver-center--lg {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    -webkit-transform: translate3d(0, -50%, 0);
    transform: translate3d(0, -50%, 0);
  }
}




::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:   #FFFFFF !important;  
	opacity: 0.8;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
      color:   #FFFFFF !important;  
	opacity: 0.8;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
      color:   #FFFFFF !important;  
	opacity: 0.8;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
      color:   #FFFFFF !important;  
	opacity: 0.8;
}

::-ms-input-placeholder { /* Microsoft Edge */
      color:   #FFFFFF !important;  
	opacity: 0.8;
}


::placeholder { /* Most modern browsers support this now. */
     color:   #FFFFFF !important;  
	opacity: 0.8;
}


.sopt {
 background-color:  skyblue;
}

select {

  /* make arrow and background */

  
  background-position:
    calc(100% - 21px) calc(1em + 2px),
    calc(100% - 16px) calc(1em + 2px),
    100% 0;
  background-size:
    5px 5px,
    5px 5px,
    2.5em 2.5em;
  background-repeat: no-repeat;

  /* styling and reset */

  

  /* reset */

  border-radius: 0;
  margin: 0;      
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance:none;
  -moz-appearance:none;
}