/*MENU*/
.dropdown-menu .sub-menu {
  left: 100%;
  margin-top: -1px;
  position: absolute;
  top: 0;
  visibility: hidden; }

.dropdown-menu li:hover .sub-menu {
  visibility: visible; }

.dropdown:hover .dropdown-menu {
  display: block; }

.nav-tabs .dropdown-menu {
  margin-top: 0; }

.nav-pills .dropdown-menu {
  margin-top: 0; }

.navbar .dropdown-menu {
  margin-top: 0; }

.navbar .sub-menu:before {
  border-bottom: 7px solid transparent;
  border-left: none;
  border-right: 7px solid rgba(0, 0, 0, 0.2);
  border-top: 7px solid transparent;
  left: -7px;
  top: 10px; }

.navbar .sub-menu:after {
  border-bottom: 6px solid transparent;
  border-left: none;
  border-right: 6px solid #ffffff;
  border-top: 6px solid transparent;
  left: -6px;
  left: 10px;
  top: 11px; }

@font-face {
  font-family: 'Lato-Regular';
  src: url("../fonts/Lato-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Lato-Light';
  src: url("../fonts/Lato-Light.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'Lato-Bold';
  src: url("../fonts/Lato-Bold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

* {
  font-family: 'Lato-Regular', sans-serif; }

.modal-lg .modal-content {
  /*-webkit-box-shadow: 0 0px 3px rgba(0,0,0,.3) !important;
	box-shadow: 0 0px 3px rgba(0,0,0,.3) !important;*/
  background: white;
  background: -moz-linear-gradient(-45deg, white 0%, white 54%, #fafafa 55%, #fafafa 55%, #fafafa 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, white), color-stop(54%, white), color-stop(55%, #fafafa), color-stop(55%, #fafafa), color-stop(100%, #fafafa));
  background: -webkit-linear-gradient(-45deg, white 0%, white 54%, #fafafa 55%, #fafafa 55%, #fafafa 100%);
  background: -o-linear-gradient(-45deg, white 0%, white 54%, #fafafa 55%, #fafafa 55%, #fafafa 100%);
  background: -ms-linear-gradient(-45deg, white 0%, white 54%, #fafafa 55%, #fafafa 55%, #fafafa 100%);
  background: linear-gradient(135deg, white 0%, white 54%, #fafafa 55%, #fafafa 55%, #fafafa 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa', GradientType=1 ); }

.modal-header {
  border-bottom: 0; }
  .modal-header .close {
    margin-top: -2px;
    font-size: 30px; }

.modal-title {
  margin: 0;
  font-family: 'Lato-Bold';
  text-align: center;
  font-size: 50px !important;
  margin-top: 35px; }

.modal-body p {
  text-align: center;
  font-size: 90px !important;
  font-family: 'Castforce';
  margin: 10px 0 40px; }
  .modal-body p a {
    text-decoration: none !important;
    color: #009cd3; }
    .modal-body p a:hover {
      color: #009cd3; }

.modal-body h4 {
  font-family: 'Lato-Regular';
  font-size: 20px;
  text-align: center; }

.modal-body ul {
  text-align: center;
  margin-left: -40px;
  margin-top: 5px; }
  .modal-body ul li {
    display: inline-block;
    list-style: none; }
    .modal-body ul li a {
      color: #525252;
      font-size: 30px;
      display: block;
      padding: 10px 15px;
      text-decoration: none; }
      .modal-body ul li a.fa-facebook {
        color: #3b5998; }
      .modal-body ul li a.fa-twitter {
        color: #1da1f2; }
      .modal-body ul li a.fa-youtube {
        color: #ee1c1b; }
      .modal-body ul li a:hover {
        color: #009cd3; }

.float-label-control {
  position: relative;
  margin-bottom: 1.5em; }

.float-label-control ::-webkit-input-placeholder {
  color: transparent; }

.float-label-control :-moz-placeholder {
  color: transparent; }

.float-label-control ::-moz-placeholder {
  color: transparent; }

.float-label-control :-ms-input-placeholder {
  color: transparent; }

.float-label-control input:-webkit-autofill,
.float-label-control textarea:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
  -moz-box-shadow: 0 0 0 1000px white inset !important;
  box-shadow: 0 0 0 1000px white inset !important; }

.float-label-control input, .float-label-control textarea, .float-label-control label {
  font-size: 13px;
  box-shadow: none;
  -webkit-box-shadow: none; }

.float-label-control input:focus,
.float-label-control textarea:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
  border-bottom-width: 2px;
  padding-bottom: 0; }

.float-label-control textarea:focus {
  padding-bottom: 4px; }

.float-label-control input, .float-label-control textarea {
  display: block;
  width: 100%;
  padding: 0.1em 0em 1px 0em;
  border-radius: 0px;
  outline: none;
  margin: 0px;
  background: none; }

.float-label-control textarea {
  padding: 0.1em 0em 5px 0em; }

.float-label-control label {
  position: absolute;
  font-weight: normal;
  top: -1.0em;
  left: 0.08em;
  color: #aaaaaa;
  z-index: 0;
  font-size: 0.85em;
  -moz-animation: float-labels 300ms none ease-out;
  -webkit-animation: float-labels 300ms none ease-out;
  -o-animation: float-labels 300ms none ease-out;
  -ms-animation: float-labels 300ms none ease-out;
  -khtml-animation: float-labels 300ms none ease-out;
  animation: float-labels 300ms none ease-out;
  /* There is a bug sometimes pausing the animation. This avoids that.*/
  animation-play-state: running !important;
  -webkit-animation-play-state: running !important; }

.float-label-control input.empty + label,
.float-label-control textarea.empty + label {
  top: 0.7em;
  font-size: 14px;
  animation: none;
  -webkit-animation: none; }

.float-label-control input:not(.empty) + label,
.float-label-control textarea:not(.empty) + label {
  z-index: 1; }

.float-label-control input:not(.empty):focus + label,
.float-label-control textarea:not(.empty):focus + label {
  color: #aaaaaa; }

.float-label-control.label-bottom label {
  -moz-animation: float-labels-bottom 300ms none ease-out;
  -webkit-animation: float-labels-bottom 300ms none ease-out;
  -o-animation: float-labels-bottom 300ms none ease-out;
  -ms-animation: float-labels-bottom 300ms none ease-out;
  -khtml-animation: float-labels-bottom 300ms none ease-out;
  animation: float-labels-bottom 300ms none ease-out; }

.float-label-control.label-bottom input:not(.empty) + label,
.float-label-control.label-bottom textarea:not(.empty) + label {
  top: 3em; }

@keyframes float-labels {
  0% {
    opacity: 1;
    color: #aaa;
    top: 0.7em;
    font-size: 14px; }
  20% {
    font-size: 14px;
    opacity: 0; }
  30% {
    top: 0.7em; }
  50% {
    opacity: 0;
    font-size: 0.85em; }
  100% {
    top: -1em;
    opacity: 1; } }

@-webkit-keyframes float-labels {
  0% {
    opacity: 1;
    color: #aaa;
    top: 0.7em;
    font-size: 14px; }
  20% {
    font-size: 14px;
    opacity: 0; }
  30% {
    top: 0.7em; }
  50% {
    opacity: 0;
    font-size: 0.85em; }
  100% {
    top: -1em;
    opacity: 1; } }

@keyframes float-labels-bottom {
  0% {
    opacity: 1;
    color: #aaa;
    top: 0.7em;
    font-size: 14px; }
  20% {
    font-size: 14px;
    opacity: 0; }
  30% {
    top: 0.7em; }
  50% {
    opacity: 0;
    font-size: 0.85em; }
  100% {
    top: 3em;
    opacity: 1; } }

@-webkit-keyframes float-labels-bottom {
  0% {
    opacity: 1;
    color: #aaa;
    top: 0.7em;
    font-size: 14px; }
  20% {
    font-size: 14px;
    opacity: 0; }
  30% {
    top: 0.7em; }
  50% {
    opacity: 0;
    font-size: 0.85em; }
  100% {
    top: 3em;
    opacity: 1; } }

body, html {
  width: 100%;
  height: 100%;
  margin: 0; }

.first_bg {
  background: #009cd3;
  background: -moz-linear-gradient(top, #009cd3 0%, #009cd3 57%, #0790bd 68%, #009cd3 80%, #009cd3 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #009cd3), color-stop(57%, #009cd3), color-stop(68%, #0790bd), color-stop(80%, #009cd3), color-stop(100%, #009cd3));
  background: -webkit-linear-gradient(top, #009cd3 0%, #009cd3 57%, #0790bd 68%, #009cd3 80%, #009cd3 100%);
  background: -o-linear-gradient(top, #009cd3 0%, #009cd3 57%, #0790bd 68%, #009cd3 80%, #009cd3 100%);
  background: -ms-linear-gradient(top, #009cd3 0%, #009cd3 57%, #0790bd 68%, #009cd3 80%, #009cd3 100%);
  background: linear-gradient(to bottom, #009cd3 0%, #009cd3 57%, #0790bd 68%, #009cd3 80%, #009cd3 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009cd3', endColorstr='#009cd3', GradientType=0 ); }

.container-fluid {
  padding-right: 35px;
  padding-left: 35px; }

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
  color: #009cd3;
  background-color: transparent; }

.navbar-inverse {
  background-color: transparent;
  border-color: transparent;
  border-radius: 0 !important; }
  .navbar-inverse .navbar-nav > li > a {
    font-family: 'Castforce';
    color: #009cd3;
    font-size: 18px;
    padding-bottom: 5px; }
    .navbar-inverse .navbar-nav > li > a:hover {
      color: #212121;
      text-decoration: none;
      border-bottom: 1px solid #ccc; }
  .navbar-inverse .navbar-brand img {
    width: 35px; }

@media (min-width: 768px) {
  .navbar-inverse {
    top: 15px; }
    .navbar-inverse .navbar-nav {
      margin-top: 17px; } }

h1 {
  text-align: center;
  font-family: 'Castforce';
  font-size: 120px;
  margin-top: 18%;
  position: absolute;
  width: 100%; }
  h1 span {
    /*text-shadow: #212121 -4px 4px 0;*/ }
  h1 .char1, h1 .char2, h1 .char3 {
    color: #009cd3; }

.shadow_title {
  margin-top: 28%;
  width: 100%;
  text-align: center;
  position: absolute; }
  .shadow_title img {
    opacity: 0.3;
    height: 35px;
    width: 270px; }

.modal-lg {
  width: 95%;
  height: 90%; }
  .modal-lg .modal-content {
    height: 100%;
    border-radius: 0; }

.modal-backdrop {
  background: transparent; }

.modal-content {
  -webkit-box-shadow: 0 0 0 0;
  border: 0;
  box-shadow: 0 0 0 0 !important; }

/*SESION*/
.block_space {
  padding: 80px 175px; }

.block_form, .block_diagonal {
  float: left;
  height: 100%;
  background-color: #fff; }

.block_form {
  width: 60%;
  z-index: 1; }

.block_diagonal {
  width: 25%;
  z-index: 2;
  -webkit-box-shadow: 4px 0px 3px -2px rgba(79, 79, 79, 0.76);
  -moz-box-shadow: 4px 0px 3px -2px rgba(79, 79, 79, 0.76);
  box-shadow: 4px 0px 3px -2px rgba(79, 79, 79, 0.76);
  position: absolute;
  top: 0;
  right: 45%;
  transform: matrix(1, 0, -0.25, 1, 150, 0); }
  .block_diagonal .block_menu {
    transform: matrix(1, 0, 0, 1, 150, 0);
    position: relative;
    width: 170px;
    height: 150px;
    margin: 30px 130px;
    right: -20px;
    text-align: center;
    list-style: none;
    background-color: rgba(255, 255, 255, 0.8);
    cursor: pointer; }
    .block_diagonal .block_menu a {
      color: #009cd3;
      padding: 60px 25px;
      display: block; }
      .block_diagonal .block_menu a:hover, .block_diagonal .block_menu a:focus {
        color: #fff;
        text-decoration: none; }
    .block_diagonal .block_menu:first-child {
      margin-top: 80px; }
    .block_diagonal .block_menu:hover, .block_diagonal .block_menu.active {
      transform: matrix(1, 0, 0, 1, 170, 0);
      background-color: rgba(0, 156, 211, 0.8);
      color: #fff; }
      .block_diagonal .block_menu:hover a, .block_diagonal .block_menu.active a {
        color: #fff; }
    .block_diagonal .block_menu h5 {
      transform: matrix(1, 0, 0.3, 1, 0, 0);
      font-size: 14px; }
    .block_diagonal .block_menu .fa {
      transform: matrix(3, 0, 0.9, 3, -10, -10); }

.block_bg {
  position: absolute;
  z-index: 1;
  right: 0;
  height: 100%;
  width: 42%;
  background: url('../images/bg_promart.jpg') top center no-repeat;
  background-size: cover; }

.move_block {
  transition: all .2s ease-in-out; }

h4 {
  font-family: 'Lato-Regular', sans-serif;
  font-weight: 700;
  line-height: 3;
  margin-bottom: 0;
  color: #bfbfbf; }

.form-control {
  background-color: transparent !important;
  border-radius: 0;
  border: 0;
  box-shadow: 0 0 0 0; }

.pass_control {
  border-bottom: 1px solid #fe9424; }

.user_control {
  border-bottom: 1px solid #fe9424; }

.btn-primary {
  background-color: #ff6f00 !important;
  border-color: #ff6f00 !important;
  text-align: center;
  text-indent: -115px;
  font-size: 14px;
  padding: 10px 20px;
  border-radius: 0;
  border: 0;
  height: 40px;
  width: 100%;
  margin-top: 20px; }

  .btn-primary:hover {
    background-color: #262626 !important; }

.form-control:focus {
  border-color: #ff6f00 !important;
}

.contact_us {
  padding: 0; }
  .contact_us li {
    list-style: none;
    margin-bottom: 25px; }
    .contact_us li .fa {
      font-size: 18px;
      margin-right: 8px;
      color: #009cd3; }
    .contact_us li p {
      font-size: 13px;
      color: #757575;
      font-weight: bold; }
    .contact_us li h6 {
      font-size: 14px;
      color: #757575; }

.panel {
  margin-bottom: 0; }

.panel-heading {
  padding: 0; }

@media (min-width: 1900px) {
  .btn-primary {
    height: 60px;
    text-indent: -80px;
    font-size: 20px; }
  .block_space {
    padding: 160px 330px 0; }
    .block_space img {
      width: 215px; }
  .block_bg {
    width: 45%; }
  h4 {
    font-size: 28px; }
  .block_diagonal {
    width: 20%; }
    .block_diagonal .block_menu {
      transform: matrix(1, 0, 0, 1, 180, 0);
      width: 290px;
      height: 240px;
      right: 0px;
      margin: 30px 188px; }
      .block_diagonal .block_menu:first-child {
        margin-top: 160px; }
      .block_diagonal .block_menu:hover, .block_diagonal .block_menu.active {
        transform: matrix(1, 0, 0, 1, 200, 0); }
  .float-label-control {
    margin-bottom: 30px; }
  .float-label-control label {
    font-size: 20px; }
  .form-control {
    height: 60px;
    font-size: 24px !important; }
  .float-label-control input.empty + label, .float-label-control textarea.empty + label {
    font-size: 24px; }
  .block_diagonal .block_menu .fa {
    transform: matrix(6, 0, 1.4, 6, -25, 25); }
  .block_diagonal .block_menu h5 {
    transform: matrix(1, 0, 0.3, 1, -8, 60);
    font-size: 18px; }
  .contact_us li .fa {
    font-size: 25px; }
  .contact_us li h6, .contact_us li p {
    font-size: 18px; } }

@media screen and (max-width: 768px) {
    .block_space {
        text-align: center;
    }

    .float-label-control {
        margin-bottom: 2.5em;
    }

    body {
        overflow: hidden;
    }

    .panel {
        box-shadow: 0 0 0 !important;
    }
}