body {  }


/* @font-face kit by Fonts2u (http://www.fonts2u.com) */ 
@font-face {font-family:"RobotoThin";
            src:url("../../fonts/Roboto-Thin.eot?") format("eot"),
                url("../../fonts/Roboto-Thin.woff") format("woff"),
                url("../../fonts/Roboto-Thin.ttf") format("truetype"),
                url("../../fonts/Roboto-Thin.svg#Roboto-Thin") format("svg");font-weight:normal;font-style:normal;}

@font-face {
    font-family: 'Quicksand';
    src: url('../font/Quicksand_Book.eot');
    src: url('../font/Quicksand_Book.eot?#iefix') format('embedded-opentype'), url('../font/Quicksand_Book.woff') format('woff'), url('../font/Quicksand_Book.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Quicksand-Bold';
    src: url('../font/Quicksand_Bold.eot');
    src: url('../font/Quicksand_Bold.eot?#iefix') format('embedded-opentype'), url('../font/Quicksand_Bold.woff') format('woff'), url('../font/Quicksand_Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.container { width:auto; padding:0;}

.wrap { background: url(../images/bgLogin.jpg) no-repeat center bottom fixed; font-family:Quicksand; background-size: cover; height: 100%;overflow: hidden;}
.wrap .wrap_login { width:320px; height:100vh; background-image: linear-gradient(to top, rgba(255,255,255,0.75), rgba(255,255,255,1)); padding:18vh 0 0 70px;}
.wrap .wrap_login:after { content:''; width:50px; height:100vh; background:rgba(0,0,0,0.1); display: block; position: absolute; top: 0; left: 0; }
.wrap .wrap_login h2 { font-size:25px; font-family:Quicksand; color:#000;  padding:0 0 20px;}
.wrap .wrap_login h4 { font-size: 14px; font-family: Quicksand; color:#000; padding: 20px 0 0;}
a:link { text-decoration: none; color: #000;}
a:visited { text-decoration: none; color: #000;}

.wrap .logo { width:80px; }
.wrap .logo img { width:100%;}
.wrap .bg_login { background: url( ../Images/graphic_login.jpg) no-repeat  center/*center center fixed*/; /*-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;*/ background-size: cover; height:100vh; width:50%; position: absolute; top: 0; /*opacity:0.2;*/ }
.form_login span { font-style:italic; font-size: 14px; line-height: 16px; display: block; padding: 0 10px 0 0;}

.form_login div { padding:5px 10px; border-bottom: solid 1px #999; }
.form_login div:first-child, .form_login span + div { border-top:solid 1px rgba(255, 255, 255, 0.2);}
.form_login input { border:0; background:none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);  padding:0;}
.form_login input:focus { border:0; background:none; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0);}

.field-validation-error { color:#fff; font-style:italic;}

/*input:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fb763d inset !important; color: #fff !important; }
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fb763d inset !important; color:red; }*/
input::-webkit-input-placeholder { color: #888 !important;}
input:-moz-placeholder { color: #888 !important; }
input::-moz-placeholder { color: #888 !important; }
input:-ms-input-placeholder { color: #888 !important; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: #888;
    /*-webkit-box-shadow: 0 0 0px 1000px #fb763d inset;*/
    transition: background-color 5000s ease-in-out 0s;
}

.form_login button[type*="submit"] { text-transform:uppercase; margin:20px 0; border:none; background:#fa6728; color:#fff; font-size:18px; padding: 15px 30px 15px 60px; border: solid 1px #fff; border-left: none; border-radius: 0 28px 28px 0; margin:40px 15px 0 -60px; transition:all linear 0.2s;}
.form_login button[type*="submit"]:hover { background:#d4551f;}

.form_login button[type*="button"][id*="btn"] { text-transform:uppercase; font-family: Quicksand-Bold; color: #fff; font-size: 16px; padding: 10px 20px 10px 40px; width: calc(100% + 60px); border: none; border-radius: 50px; margin: 40px 0 20px; text-align: left; transition: all linear 0.2s;
background: #fa6728; /* Old browsers */
background: -moz-linear-gradient(-45deg, #fa6728 1%, #fa6728 58%, #efb326 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #fa6728 1%,#fa6728 58%,#efb326 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #fa6728 1%,#fa6728 58%,#efb326 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fa6728', endColorstr='#efb326',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

/*.form_login button[type*="button"][id*="btn"]:hover { background:#d4551f;}*/

.form_login button[type*="button"] {  background:none; border:none;}
.wrap_login .bottom { position:absolute; bottom:0; padding:8px 0;}

/*--------------------------------------- Anime Maps ---------------------------------------*/
.anime_maps {height: 100vh; width: 50%; position:absolute; z-index:999; top:0;}

.map1 { width: 15px; height: 15px; border:solid 3px #fff; position: absolute; -webkit-animation: map1 2s infinite; animation: map1 2s infinite; opacity:0.15; transition:all linear 0.2s; border-radius:50%; left:33%; top:30vh;}
.map1:after, .map1:before, .map2:after, .map2:before, .map3:after, .map3:before, .map4:after, .map4:before, .map5:after, .map5:before { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
.map1:after, .map2:after, .map3:after, .map4:after, .map5:after { border-top-color: #fff; border-width: 6px; margin-left: -6px;}
.map1:hover, .map2:hover, .map3:hover, .map4:hover, .map5:hover  { -webkit-animation-play-state:paused; animation-play-state:paused; opacity:1;}

@-webkit-keyframes map1 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}
@keyframes map1 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}

.map2 { width: 15px; height: 15px; border:solid 3px #fff; position: absolute; -webkit-animation: example 1.6s infinite; animation: map2 1.6s infinite; opacity:0.15; transition:all linear 0.2s; border-radius:50%;left:70%; top:40vh;}

@-webkit-keyframes map2 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}
@keyframes map2 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}

.map3 { width: 15px; height: 15px; border:solid 3px #fff; position: absolute; -webkit-animation: example 3.1s infinite; animation: map3 3.1s infinite; opacity:0.15; transition:all linear 0.2s; border-radius:50%;left:70%; top:65vh;}

@-webkit-keyframes map3 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}
@keyframes map3 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}

.map4 { width: 15px; height: 15px; border:solid 3px #fff; position: absolute; -webkit-animation: example 1.1s infinite; animation: map4 1.1s infinite; opacity:0.15; transition:all linear 0.2s; border-radius:50%;left:60%; top:48vh;}

@-webkit-keyframes map4 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}
@keyframes map4 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}

.map5 { width: 15px; height: 15px; border:solid 3px #fff; position: absolute; -webkit-animation: map5 2.3s infinite; animation: map5 2.3s infinite; opacity:0.15; transition:all linear 0.2s; border-radius:50%; left:23%; top:55vh;}

@-webkit-keyframes map5 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}
@keyframes map5 {
    0%   {opacity:0;}
    50%  {opacity:0.5;}
    100%  {opacity:0;}
}

/*-------------------------------------- Anim logo -----------------------*/
.wrap_logo { position: relative; z-index: 9999; width: 110px; height: 105px; margin: 40vh auto 0;}
.logo1 { width: 35px; height: 35px; position: absolute; -webkit-animation: logo1 8s; animation: logo1 8s;transition:all linear 0.2s;  left:19px; top:0;}
@-webkit-keyframes logo1 {
    0%   {left:19px; top:0; opacity:0;}
    10%   {left:19px; top:0; opacity:0;}
    20%  {left:-20px; top:-50px; opacity:1;}
    30%  {left:19px; top:0;}
}
@keyframes logo1 {
    0%   {left:19px; top:0; opacity:0;}
    10%   {left:19px; top:0; opacity:0;}
    20%  {left:-20px; top:-50px; opacity:1;}
    30%  {left:19px; top:0;}
}
.logo2 { width: 35px; height: 35px; position: absolute; -webkit-animation: logo2 8s; animation: logo2 8s;transition:all linear 0.2s;  left:55px; top:0;}
@-webkit-keyframes logo2 {
    0%   {left:55px; top:0; opacity:0;}
    30%   {left:55px; top:0; opacity:0;}
    40%  {left:110px; top:-50px; opacity:1;}
    50%  {left:55px; top:0;}
}
@keyframes logo2 {
    0%   {left:55px; top:0; opacity:0;}
    30%   {left:55px; top:0; opacity:0;}
    40%  {left:110px; top:-50px; opacity:1;}
    50%  {left:55px; top:0;}
}
.logo3 { width: 35px; height: 35px; position: absolute; -webkit-animation: logo3 8s; animation: logo3 8s;transition:all linear 0.2s;  left:55px; top:35px;}
@-webkit-keyframes logo3 {
    0%   {left:55px; top:0; opacity:0;}
    50%   {left:55px; top:35px; opacity:0;}
    60%  {left:110px; top:100px; opacity:1;}
    70%  {left:55px; top:35px;}
}
@keyframes logo3 {
    0%   {left:55px; top:35px; opacity:0;}
    50%   {left:55px; top:35px; opacity:0;}
    60%  {left:110px; top:100px; opacity:1;}
    70%  {left:55px; top:35px;}
}
.logo4 { width: 35px; height: 35px; position: absolute; -webkit-animation: logo4 8s; animation: logo4 8s;transition:all linear 0.2s;  left:18px; top:35px;}
@-webkit-keyframes logo4 {
    0%   {left:18px; top:35px; opacity:0;}
    70%   {left:18px; top:35px; opacity:0;}
    80%  {left:-20px; top:100px; opacity:1;}
    90%  {left:18px; top:35px;}
}
@keyframes logo4 {
    0%   {left:18px; top:35px; opacity:0;}
    70%   {left:18px; top:35px; opacity:0;}
    80%  {left:-20px; top:100px; opacity:1;}
    90%  {left:18px; top:35px;}
}
.logo5 { width: 110px; height: 32px; position: absolute; -webkit-animation: logo5 8s; animation: logo5 8s;transition:all linear 0.2s;  left:0; top:83px;}
@-webkit-keyframes logo5 {
    0%   {left:55px; top:0; opacity:0;}
    80%  {left:110px; top:-50px; opacity:1;}
    100%  {left:55px; top:0;}
}
@keyframes logo5 {
    0%   { left:0; top:150px; opacity:0;}
    90%   { left:0; top:150px; opacity:0;}
    100%  { left:0; top:83px;}
}

.maps { display:none;}
.anime_maps { display:inherit;}



/*---------------------------------------- RESPONSIVE --------------------*/

@media screen and (max-height: 580px) {
    .wrap .wrap_login { padding:15vh 60px 0;}
}

@media screen and (max-width: 720px) {
    /*.wrap .bg_login { background: url( ../Images/bg_login.jpg) no-repeat;     background-size: cover;}*/
    .wrap .wrapbg_login, .wrap .bg_login, .wrap .wrap_login { width:100%;}
    .wrap .wrapbg_login, .wrap .bg_login { height:40vh;}
    .wrap .wrap_login {background-image: linear-gradient(to top, rgba(255,255,255,0.3), rgba(255,255,255,1));}
    .wrap .wrap_logo { margin: 6vh auto 0;}
    .wrap .anime_maps { width:100%; height: 40vh;}
    
    .anime_maps .map1 {top:3vh;}
    .anime_maps .map2 {top:5vh;}
    .anime_maps .map3 {top:22vh;}
    .anime_maps .map4 {top:18vh;}
    .anime_maps .map5 {top:15vh;}
    }
@media screen and (max-width: 480px) {
    .wrap .wrap_login { padding: 50px 20px 40px 40px; }
    .form_login div { margin: 0 -40px; padding: 10px 40px;}
    .wrap .wrap_login h2 { font-size:25px; padding:0 0 10px;}
    .form_login button[type*="submit"] { margin:20px 15px 0 -40px; padding: 15px 30px 15px 40px;}
    .wrap .wrap_login:after {width: 30px;}
}

@media screen and (max-height: 480px) {
    .wrap .wrap_login { padding: 5vh 40px 0;}
    .form_login div { padding: 10px 40px; margin: 0 -40px;}
    .wrap .wrap_login h2 { font-size:30px;}
    .form_login button[type*="submit"] { margin: 40px 15px 0 -40px;     padding: 15px 30px 15px 40px;}
}

@media screen and (max-height: 414px) {
    .wrap .wrapbg_login { width:30%; height:100vh; }
    .wrap .bg_login { width:30%; height:100vh;}
    .wrap .logo { margin:30vh auto;}
    .wrap .wrap_login { width:70%; height:100vh; padding: 5vh 40px 0;}
    .form_login div { padding: 10px 40px; margin: 0 -40px;}
    .wrap .wrap_login h2 { font-size:30px; padding:0 0 10px;}
    .form_login button[type*="submit"] { margin: 20px 15px 0 -40px; padding: 15px 30px 15px 40px;}
    .wrap_login .bottom { left:20px; color:#fff;}
}

@media screen and (max-width: 320px) {
    .wrap .wrapbg_login, .wrap .bg_login { height: 30vh;}

}

.loader,
.loader:after {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.loader {
    font-size: 10px;
    z-index: 9999;
    position: fixed;
    top: 50vh;
    left: 50%;
    margin: -40px 0 0 -40px;
    text-indent: -9999em;
    border-top: 5px solid rgba(255, 255, 255, 0.2);
    border-right: 5px solid rgba(255, 255, 255, 0.2);
    border-bottom: 5px solid rgba(255, 255, 255, 0.2);
    border-left: 5px solid #fc532d;
    -webkit-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-animation: load8 1.1s infinite linear;
    animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
    .loader { left: 50% ;}
}


.k-loading-image { background-image:none !important; display:none;}