.full-height {
    height: 100vh;
}

.flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
}

.position-ref {
    position: relative;
}

.top-right {
    position: absolute;
    right: 10px;
    top: 18px;
}

.content {
    text-align: center;
}

.title {
    font-size: 84px;
}

.links > a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.m-b-md {
    margin-bottom: 30px;
}

 button {
   background-color: rgb(43, 184, 62);
   position: relative;
   color: #fff;
   border: none;
   padding: 1.25em 2em;
   font-size: 0.75em;
   letter-spacing: 1px;
   text-transform: uppercase;
   cursor: pointer;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
   -webkit-transition: background 0.25s cubic-bezier(0.55, 0, 0.1, 1);
   transition: background 0.25s cubic-bezier(0.55, 0, 0.1, 1);
 }
 button:hover {
   background: #70ec7b;
   color: #000;
 }
 button:focus {
   outline: none;
 }

 /**
  * Overlay
  * -- only show for tablet and up
  */
 @media only screen and (min-width: 40em) {
   .c-modal-overlay {
     display: -webkit-box;
     display: flex;
     -webkit-box-align: center;
             align-items: center;
     -webkit-box-pack: center;
             justify-content: center;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 5;
     background-color: rgba(0, 0, 0, 0.6);
     opacity: 0;
     visibility: hidden;
     -webkit-backface-visibility: hidden;
             backface-visibility: hidden;
     -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
     transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   }
   .c-modal-overlay.active {
     opacity: 1;
     visibility: visible;
   }
 }
 /**
  * Modal
  */
 .c-modal {
   display: -webkit-box;
   display: flex;
   -webkit-box-align: center;
           align-items: center;
   -webkit-box-pack: center;
           justify-content: center;
   position: relative;
   margin: 0 auto;
   background-color: #fff;
   width: 350px;
   max-width: 75rem;
   min-height: 20rem;
   padding: 1.5rem;
   border-radius: 10px;
   opacity: 0;
   overflow-y: auto;
   visibility: hidden;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transform: scale(1.2);
           transform: scale(1.2);
   -webkit-transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
 }
 .c-modal .close-modal {
   position: absolute;
   cursor: pointer;
   top: 5px;
   right: 15px;
   opacity: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1), transform 0.6s cubic-bezier(0.55, 0, 0.1, 1), -webkit-transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   -webkit-transition-delay: 0.3s;
           transition-delay: 0.3s;
 }
 .c-modal .close-modal svg {
   width: 1.75em;
   height: 1.75em;
 }
 .c-modal .c-modal-content {
     text-align: center;
   opacity: 0;
   -webkit-backface-visibility: hidden;
           backface-visibility: hidden;
   -webkit-transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
   -webkit-transition-delay: 0.3s;
           transition-delay: 0.3s;
 }
 .c-modal.active {
   visibility: visible;
   opacity: 1;
   z-index: 100;
   -webkit-transform: scale(1);
           transform: scale(1);
 }
 .c-modal.active .c-modal-content {
   opacity: 1;
 }
 .c-modal.active .close-modal {
   -webkit-transform: translateY(10px);
           transform: translateY(10px);
   opacity: 1;
 }

 /**
  * Mobile styling
  */
 @media only screen and (max-width: 39.9375em) {
   h1 {
     font-size: 1.5rem;
   }

   .c-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     -webkit-overflow-scrolling: touch;
     border-radius: 0;
     -webkit-transform: scale(1.1);
             transform: scale(1.1);
     padding: 0 !important;
   }

   .close-modal {
     right: 20px !important;
     top: 50px !important;
   }
 }
 .login-logo{
     width: 160px;
 }
.btn_icon{
    width: 30px;
    height: 30px;
    border: none;
    margin-right: 15px;
    padding: 5px;
}
.facebook_btn{
    display: flex;
    align-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #fff;
    background: #1776f1;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0 4px 16px rgba(23, 118, 241,0.3);
    margin: 0 15px;
}
.google_btn{
    display: flex;
    align-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
    background: #fff;
    border-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0 4px 16px rgba(23, 118, 241,0.3);
    margin: 0 15px;
}

.facebook_btn:hover{
    text-decoration: none ;
    color: #f2f2f2;
    transform: scale(0.95);
    transition: ease .2s all;
}
.google_btn:hover{
    text-decoration: none ;
    color: #808080;
    transform: scale(0.95);
    transition: ease .2s all;
}