@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
@font-face {
    font-family: "Flogin";
    src: url("../fonts-login/flaticon.eot");
    src: url("../fonts-login/flaticon.eot#iefix") format("embedded-opentype"),
    url("../fonts-login/flaticon.woff") format("woff"),
    url("../fonts-login/flaticon.ttf") format("truetype"),
    url("../fonts-login/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "optiventas";
    src: url("../fonts/flaticon.eot");
    src: url("../fonts/flaticon.eot#iefix") format("embedded-opentype"),
        url("../fonts/flaticon.woff") format("woff"),
        url("../fonts/flaticon.ttf") format("truetype"),
        url("../fonts/flaticon.svg") format("svg");
}
@font-face {
    font-family: "opti";
    src: url("../fonts-main/flaticon.eot");
    src: url("../fonts-main/flaticon.eot#iefix") format("embedded-opentype"),
        url("../fonts-main/flaticon.woff") format("woff"),
        url("../fonts-main/flaticon.ttf") format("truetype"),
        url("../fonts-main/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "oftalmologo";
    src: url("../fonts-optica/flaticon.eot");
    src: url("../fonts-optica/flaticon.eot#iefix") format("embedded-opentype"),
    url("../fonts-optica/flaticon.woff") format("woff"),
    url("../fonts-optica/flaticon.ttf") format("truetype"),
    url("../fonts-optica/flaticon.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
body{
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: white;
    background-color: #f2f6f8;
    background-color: #f2f6f8;
    background: rgba(242,246,248,1);
    background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
    background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
    background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
    background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
    background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#b5c6d0', GradientType=0 );
}
header{
    font-weight: 400;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 28px;
    text-align: left;
    background: #bd1e1e;
    padding: 0px 0px 12px 0px;
}
.gxdstudio:before{
    font-family: 'opti';
    content: "\e00c";
    color: red;
    position: relative;
    top: 0px;
    margin: 0px 1px;
}
.figLogoOptiventas{
    width: 100%;
    display: inline-block;
    background-color: white;
}
.demo{
    position: relative;
    font-size: 16px;
    font-weight: bold;
    top: -1px;
    left: 5%;
}
.logoOpVe{
    display: block;
    margin: 0px auto;
    vertical-align: middle;
    position: relative;
    top: 0px;
    max-width: 325px;
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 58px 10px;
}
.cl-input{
    position: relative;
}
.msgBye{
    -webkit-animation: bounceOut 0.75s !important;
}
@-webkit-keyframes bounceOut {
  20% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  50%, 55% {
    opacity: 1;
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
}
.msgAlertLogin{
    display: none;
    margin: 7px auto;
    background: #E46062;
    color: white;
    position: absolute;
    left: 0px;
    right: 0px;
    font-size: 12px;
    border-radius: .5em;
    padding: 2px 17px;
    box-sizing: border-box;
    width: 86%;
    -webkit-animation: bounceIn 0.75s;
}

@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.creditos{
    color: #384433;
    text-decoration: none;
    font-weight: 400;
}
.btnDemo{
    border: 1px solid rgba(255,255,255,.6);
    color: white;
    border-radius: .5em;
    font-size: 15px !important;
    font-weight: normal;
    position: relative;
    display: inline-block;
    margin: 0px;
    right: 5%;
    top: 3px;
    float: right;
    padding: 5px 10px;
}
.btnDemo a{
    display: block;
    color: white;
    text-decoration: none;
    -webkit-transition: .7s;
    -o-transition: .7s;
    transition: .7s;
    border-bottom: 1px solid transparent;
}
.btnDemo a:hover{
    -webkit-transition: all .7s;
    -o-transition: all .7s;
    transition: all .7s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.62);
}
.content-login{
    position: relative;
    text-align: center;
    height: 567px;
}
figure{
    margin: 20px;
}
.content-login img{
    display: block;
    width: 87%;
    margin: 0px auto;
    margin-bottom: 11px;
}
.content-logo{
    z-index: -1;
    display: block;
}
.contenedor{
    display: block;
    background: rgb(224, 224, 224);
    padding: 10px;
    border-radius: 9px;
    border-top: 10px solid #bd1e1e;
    position: relative;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
#frmLogin span{
    color: white;
    font-size: 12px;
}
input {
    border-radius: 0.5em;
    border: 1px solid rgba(200, 200, 200, 0.64) !important;
    color: #6F6F6F;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    margin-top: 5px;
    padding: 8px 15px;
    padding-left: 40px;
    width: 100%;
    outline: 0px;
    box-sizing: border-box;
    -webkit-transition: all .8s;
    -o-transition: all .8s;
    transition: all .8s;
}
.cl-user:before{
    font-family: "Flogin";
    font-size: 18px;
    color: rgba(128, 128, 128, 0.67);
    content: "\e002";
    position: absolute;
    left: 13px;
    top: 8px;
}
.cl-clave:before{
    font-family: "Flogin";
    font-size: 18px;
    color: rgba(128, 128, 128, 0.67);
    content: "\e001";
    position: absolute;
    left: 13px;
    top: 8px;
}
section div{
    margin: 2px auto;
}
button{
    border: none;
    background-color: #bd1e1e;
    border-radius: 0.5em;
    color: white;
    margin-top: 9px;
    padding: 9px 0px;
    border-bottom: 6px solid #b6071e;
    width: 100%;
    outline: 0px;
    position: relative;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}
button:after{
    font-family: "Flogin";
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    content: "\e000";
    position: relative;
    top: 3px;
    left: 15px;
}
button:hover{
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    background: #bd1e1e;
    border-bottom: 6px solid #58030f;
}
button:active {
    background-color: #b6071e;
}
input:focus,
input.focus {
    border: 1px solid rgb(0, 181, 222) !important;
    box-shadow: 0px 0px 3px rgba(0, 181, 222, 0.5) ;
}
input[placeholder]{
    font-size: 15px; 
}
input::-webkit-input-placeholder{
  color: rgba(0,0,0,.3);
}
.preload{
    width: 13% !important;
    position: absolute !important;
    top: 13px !important;
    left: 85px !important;
}
.row{
    max-width: 300px;
    width: 80%;
    position: relative;
    /* top: calc(55% - 250px); */
    /* left: 50%; */
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(0%, 15%);
}
footer{
    font-family: 'Roboto Condensed', sans-serif;
    background: #E0E0E0;
    color: #1D1D1D;
    font-size: 12px;
    font-weight: 100;
    padding: 5px 20px;
    text-align: right;
}
@media screen and (min-width: 616px){

    body{
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        color: white;

        background-color: #f2f6f8;
        background: rgba(242,246,248,1);
        background: -moz-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
        background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(242,246,248,1)), color-stop(100%, rgba(181,198,208,1)));
        background: -webkit-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
        background: -o-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
        background: -ms-linear-gradient(top, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
        background: linear-gradient(to bottom, rgba(242,246,248,1) 0%, rgba(181,198,208,1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f2f6f8', endColorstr='#b5c6d0', GradientType=0 );
        background-attachment: fixed;
        height: 100%;
    }
    header{
        padding: 0px;
        height: 75px;
    }
    .figLogoOptiventas{
        width: initial;
        display: inline-block;
    }
    .logoOpVe{
        width: 207px;
        padding: 15px 15px 14px 15px;
        box-sizing: initial;
    }
    .demo{
        font-weight: normal;
        font-size: inherit;
        left: 9px;
        position: relative;
        top: -26px;
    }
    .btnDemo{
        margin-left: 69px;
        padding: 10px 20px;
        position: absolute;
        top: 17px;
        left: 293px;
        width: 135px;
    }
    .content-login{
        top: initial;
    }
    .row{
        position: absolute;
        top: calc(50% - 290px);
        left: 50%;
        /* -webkit-transform: translate(-50%, -50%); */
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, 13%);
    }
    .content-login img{
        display: block;
        width: 100%;
        margin: 0px;
    }
    .contenedor{
        padding: 21px 21px 12px 21px;
    }
    .cl-studio{
        color: rgba(90, 99, 99, 0.95);
        font-weight: 100;
    }
    footer{
        position: absolute;
        bottom: 0px;
        left: 0px;
        right: 0px;
    }
    
}