/* 
    Created on : 28/11/2017, 11:17:52 AM
    Author     : Juan
*/

body {
    height: 100%;
    overflow: hidden;
    width: 100% !important;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

#label1{
    position:relative;
    top:-180px;
}

a{
    color:#0080FF;
    font-size:18px !important;
    font-family:Arial;
    text-decoration:none;
}
.img{
    position:relative;
    left:140px;
    top:-220px;
    height:130px;;
}
.buttonP{
    position:relative;
    left:px;
    top:50px;
}
#divOPU{
    position:relative;
    top:50px;
    font-size:20px;
    font-family: Arial;
    font-weight:bold;
    color:#0080FF;
}

#divCC{
    position:relative;
    top:90px;
    text-align: justify
}

#divRC{

    top:90px;
    text-align: justify
}


.backLeft img{
    width: 100%;
}

.alignCenter{
    text-align:center !important;
}

#back {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -999;
}

#slideBox {
    /*width: 50%;*/
    max-height: 100%;
    height: 100%;
    overflow: hidden;
    margin-left: 50%;
    position: absolute;
    box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.topLayer {
    width: 200%;
    height: 100%;
    position: relative;
    left: 0;
    left: -100%;
}

.left {
    width: 50%;
    height: 100%;
    background: #2C3034;
    left: 0;
    position: absolute;
}

.right {
    /*    width: 50%;
        height: 100%;*/
    background: #f9f9f9;
    right: 0;
    position: absolute;
}


.content h2 {
    color: #0080FF;
    font-family:Arial;
    font-weight: 100;
    font-size: 35px;
}

button {
    background: #03A9F4 !important;
    padding: 10px 1px !important;
    width: auto !important;
    font-weight: 600 !important;
    text-transform:  uppercase !important;
    font-size: 14px !important;
    color: #fff !important;
    line-height: 16px !important;
    letter-spacing: 0.5px !important;
    border-radius: 2px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1) !important;
    border: 0 !important;
    outline: 0;
    margin: 15px 15px 15px 0;
    transition: all 0.25s;
}

button:hover {
    background: #0288D1 !important;
    box-shadow: 0 4px 7px rgba(0,0,0,0.1), 0 3px 6px rgba(0,0,0,0.1) !important;
}
.off {
    background: none;
    color: #03A9F4;
    box-shadow: none;
}

.right .off:hover {
    background: #eee;
    color: #03A9F4;
    box-shadow: none;
}
.left .off:hover {
    box-shadow: none;
    color: #03A9F4;
    background: #363A3D;
}

input {
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    border-bottom: 1px solid #45494C !important;
    font-size: 14px !important;
    color: #959595 !important;
    padding: 8px 0 !important;
    margin-top: 20px !important;
    -webkit-box-shadow:inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;

}
.group 			  { 
    position:relative; 
    margin-bottom: 35px; 
    margin-left: 40px;
}

.inputMaterial 				{
    font-size:18px !important;
    padding:10px 10px 10px 5px !important;
    display:block !important;
    width:218px !important;
    border:none !important;
    border-bottom:1px solid #757575 !important;
    -webkit-box-shadow:inset 0 0px 0px rgba(0, 0, 0, 0.075) !important;

}

.inputMaterial:focus 		{ outline:none;}

/* LABEL ======================================= */

label {
    left:-14px;
    top:-30px;
    color:#999; 
    font-size:14px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}

/* active state */
.inputMaterial:focus ~ label, .inputMaterial:valid ~ label 		{
    top:-60px;
    font-size:14px;
    font-weight:bold;
    color: #0080FF;
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:218px; }
.bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:-65px;
    position:absolute;
    background: #0080FF; 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
}
.bar:before {
    left:50%;
}
.bar:after {
    right:50%; 
}

/* active state */
.inputMaterial:focus ~ .bar:before, .inputMaterial:focus ~ .bar:after {
    width:50%;
}


/* active state */
.inputMaterial:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
}

#footer-box{
    width: 100%;
    height: 50px;
    background: #00695c;
    position: absolute;
    bottom: 0;
}

.footer-text{
    color: #cfd8dc;

}

.sign-up{
    color: white;
    cursor: pointer;
}

.sign-up:hover{
    color: #b2dfdb; 
}