body
{
	background: url(images/clouds.jpg) no-repeat left top;
	text-align: center;
	margin: 0px;
	overflow-x:hidden;
	background-size: cover;
}

.divNav{
    width:Calc(100% - 20px);
    position:absolute;
    top:0px;
    left:0px;
    color:White;
    z-index:2500;    
    text-align:right;
    padding:10px;
}

.divNav ul li
{
    display:inline;
    margin-right:20px;
    font-family: 'Roboto-Light';
    font-size:12pt;
    cursor:pointer;
    padding:5px 0px 5px 0px;
    }
    
#liRegistrar{
    ont-weight: bold;
    border: 1px solid white;
    border-radius: 5px;
    padding: 5px;
    margin-top: -5px;
    background-color: #ffffff24;
}


@font-face {
		font-family: 'Roboto-Bold';
		src: url('fonts/Roboto-Bold.ttf');
	}
	
@font-face {
		font-family: 'Roboto-Light';
		src: url('fonts/Roboto-Light.ttf');
	}

.OpacityLayer
{
    width:100%;
    height:100%;
    position:absolute;
    background-color:rgba(113, 177, 252, 0.7);
    z-index:1000;
    }
    
.Nube360
{
    z-index:900;
    background: url(images/Nube360.jpg) left top;
    background-color:none !important;
    animation-name: MoveBackGround;
    animation-duration: 300s;
    animation-iteration-count: infinite;
    animation-delay:0s;
}

@keyframes MoveBackGround {
  0%   {background-position: 0% top; }
  /*25%  {background-position: 50% top; }
  50%  {background-position: 100% top; }
  75%  {background-position: 150% top; }*/
  100% {background-position: 500% top; }
 }


.FootLayer
{
    width:110%;
    height:auto;
    min-height:25%;
    position:absolute;
    background-color:White;
    z-index:2000;
    bottom:-80px;
    left:-50px;
    transform:rotate(-5deg);
    }
    
.divContent
{
    background-color:white;
    width:100%;
    top:100vh;
    position:absolute;
    z-index:2600;
    font-family: 'Roboto-Light';
    color:Gray;
    font-size:12pt;
    }
    
.divContent h2
{
    font-family: 'Roboto-Bold' !important;
    font-size: 22pt;
    }
    
.divCaracteristicas
{
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    margin-top:40px;
    line-height: 1.42857143;
    background-color: #fff;
    /*border: 1px solid #ddd;*/
    border-radius: 33px;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    width:Calc(25% - 40px);
    float:left;
    margin-left:6.5%;
    min-height:275px;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    color: #00aafe;
    opacity:0;
    }

.divCaracteristicas h2{
    color:black;
}

#divSubTPlanes {
    margin-bottom: 15px;
}

.divPlanes
{
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 40px;
    line-height: 1.42857143;
    background-color: #fff;
    -webkit-transition: border .2s ease-in-out;
    -o-transition: border .2s ease-in-out;
    transition: border .2s ease-in-out;
    width: Calc(20% - 6px);
    float: left;
    margin-left: 2%;
    min-height: 1000px;
    box-shadow: 0 10px 29px 0 rgb(68 88 144 / 10%);
    transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
    color: gray;
    opacity: 0;
    }

.divPlanRecomendado{
    border:5px solid #64a7eb;
}

.divPlanes h2{
    color:#64a7eb;
}

.divPlanes h3{
    color: black;
}

.divPlanes ul{
    list-style:none;
    padding:0px;
}

.divPlanes li {
    border-bottom: 1px solid gray;
    color: black;
    font-family: 'Roboto-Light';
    padding: 10px 0px 10px 0px;
}

.btnProbalo {
    background-color: #64a7eb;
    color: white;
    padding: 10px;
    width: 80%;
    margin-left: 7.5%;
    border-radius: 5px;
    font-weight: bold;
    font-family: 'Roboto-Bold';
    margin-bottom: 15px;
    cursor: pointer;
}

#divRecomendado {
    background-color: #64a7eb;
    color: white;
    width: 110%;
    margin-left: -5%;
    padding: 5px 0px 5px 0px;
    margin-top: -63px;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 1.2em;
    border-radius: 5px 5px 0px 0px;
}
    
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: rgb( 235, 248, 255 );
    color: rgb( 0, 170, 254 );
    font-size: 30px;
    line-height: 0.933;
    line-height: 2.3;
}
    
.divCaracteristicas h2
{
    font-size:16pt;
    }
    
.Footer
{
    width:100%;
    float:left;
    background-color:#619cda;
    color:White;
    margin-top:150px;
    padding-bottom:30px;
    }
    
.FooterRotate
{
    width:110%;
    float:left;
    background-color:#619cda;
    margin-top:-60px;
    margin-left:-50px;
    height:110px;
    transform:rotate(-4deg);
    }
    
.FooterSep
{
	width:100vw;
	float:left;
	height:1px;
	margin-top:15px;
	margin-bottom:5px;
	background: -moz-linear-gradient(left, rgba(150,150,150,0) 0%, rgba(153,153,153,1) 48%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(150,150,150,0) 0%,rgba(153,153,153,1) 48%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(150,150,150,0) 0%,rgba(153,153,153,1) 48%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00969696', endColorstr='#00000000',GradientType=1 ); /* IE6-9 */
    }

.FooterCopyRight
{
    width:100%;
    text-align:center;
    float:left;
    /*margin-top:20px;*/
    font-family:'Roboto-Light';
    font-size:10pt;
    }
    
.FooterCopyRight a
{
    text-decoration:none;
    font-family:'Roboto-Bold';
    }    

    
.divContactForm
{
    width:50%;
    float:left;
    text-align: left;
    margin-top:20px;
    }
    
.divContactForm #frameMap
{
    width:90% !important;
    }

.ContactenosLateral
{
    display:none;
    }

#Enc01
{
	background: url(images/Encabezado01.jpg) no-repeat left top;	
	float:left;
	width:  80px;
	height: 142px;
}

#Enc02
{
	background: url(images/Encabezado02.jpg) no-repeat left top;	
	float: left;
	width:  443px;
	height: 142px;
}

#Enc03
{
	background: url(images/Encabezado03.jpg) no-repeat left top;	
	float: left;
	width:  100%;
	height: 142px;
}

#Enc04
{
	background: url(images/Encabezado04.jpg) no-repeat left top;	
	float: left;
	width:  80px;
	height: 142px;
}


#wrap  
{
	position: absolute;
	top: 43%; /* Buscamos el centro horizontal (relativo) del navegador */
	/*left: 50%; /* Buscamos el centro vertical (relativo) del navegador */
	width: 100%; /* Definimos el ancho del objeto a centrar */
	height: 352px; /* Definimos el alto del objeto a centrar */
	margin-top: -176px; /* Restamos la mitad de la altura del objeto con un margin-top */
	/*margin-left: -250px; /* Restamos la mitad de la anchura del objeto con un margin-left */
	z-index:2500;
	text-align:center;
	/*-webkit-opacity:0;
	Animo el ingreso
	-webkit-animation: AnimaIn 0.7s;
	-webkit-animation-delay: 1s;
	-webkit-animation-fill-mode: forwards;
	
	-moz-opacity:0;
	-moz-animation: AnimaIn 0.7s;
	-moz-animation-delay: 1s;
	-moz-animation-fill-mode: forwards;
	
	-ms-opacity:0;
	-ms-animation: AnimaIn 0.7s;
	-ms-animation-delay: 1s;
	-ms-animation-fill-mode: forwards;
    */
}


#login-box 
{
	width:100%;
	height: 352px;
	/*padding: 58px 76px 0 76px;*/
	color: white;
	font-family: 'Roboto-Light',sans-serif,Arial, Helvetica;
	font-size:14pt;
	/*background: url(images/login-box-backg.png) no-repeat left top;*/
	text-align: center;
    text-shadow:2px 2px gray;
	/*
	-webkit-animation: AnimaTitulo 0.5s;
	-webkit-animation-delay: 1s;
	-webkit-animation-fill-mode: forwards;
	
	-moz-animation: AnimaTitulo 0.5s;
	-moz-animation-delay: 1s;
	-moz-animation-fill-mode: forwards;
*/
}
/*
@-webkit-keyframes AnimaIn
{
    0% {opacity:1; top:-352px;}
    70% {opacity:1; top:55%;}
    100% {opacity:1; top:50%;}
}


@-moz-keyframes AnimaIn
{
    0% {opacity:1;top:-352px;}
    70% {opacity:1;top:55%;}
    100% {opacity:1;top:50%;}
}

@-ms-keyframes AnimaIn
{
    0% {opacity:1;top:-352px;}
    70% {opacity; top:55%;}
    100% {opacity; top:50%;}
}

@-webkit-keyframes AnimaTitulo
{
    0% {opacity:0.1;}
    50% {opacity:0.5;}
    100% {opacity:1;}
}

@-moz-keyframes AnimaTitulo
{
    0% {opacity:0.1;}
    50% {opacity:0.5;}
    100% {opacity:1;}
}
*/
#login-box h2 
{
	padding:0;
	margin:0;
	color: white;
	font-family: 'Roboto-Bold';
	font-size:2.5em;
	letter-spacing:13px;
    text-shadow: 2px 2px grey;
    margin-top: -50px !important;
}

#login-box h4 
{
    font-size:18pt;
    font-weight: normal;
    margin: 0px;
    text-shadow: 2px 2px grey;
}


#login-box img {
	border:none;
}

#login-box-name {
	float: left;
	display:inline;
	width:33%;
	text-align: right;
	padding: 14px 0px 0 0;
	margin:12px 5px 7px 0
}

#login-box-namePassword {
	float:left;
	display:inline;
	width:33%;
	text-align: right;
	padding: 14px 0px 0 0;
	margin:-6px 5px 20px 0
}

#login-box-field {
	float: left;
	display:inline;
	width:230px;
	margin:0;
	margin:20px 0 7px 0;
}

.box-fields
{
    width:50%;
    margin-left:25%;
    float:left;
    display:block;
    }

.form-login  {
	display: block;
    width: 80%;
    height: 20px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: white;
    background-color: rgba(255, 255, 255, 0.2);
    background-image: none;
    border: 1px solid white;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    outline: none;
}


.login-box-options  {
	clear:both;
	padding-left:87px;
	font-size: 11px;
}

.login-box-options a {
	color: #ebebeb;
	font-size: 11px;
}


.btnLoginDiv
{
    /*margin-left:90px;*/
    }

.btnLogin
{
    padding: 9px 40px;
    border-radius: 30px;
    font-size: 16px;
    color: #fff;
    border: 1px solid #fff;
    display: inline-block;
    background-color: transparent;
    position: relative;
    cursor:pointer;
    text-shadow: 2px 2px grey;
    }


.btnLogin:hover {
    background-color: #FFFFFF;
    color: #00aafe;
    -webkit-box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13);
    box-shadow: 2.5px 4.33px 10px 0px rgba(0, 0, 0, 0.13);
    text-shadow: 1px 1px grey;
}


@media only screen 
and (min-width : 240px) 
and (max-width : 1023px) 
{
    body
    {
        background-size: unset;
	overflow-x:hidden;
        }
        
    .divNav ul li 
    {
        font-size:9pt;
    }
        
        
    #wrap
    {
        top:43%;
        }
            
    #login-box h2 
    {
        font-size:1.2em;
        margin-top:0px !important;
    }
    
    #login-box h4 {
        font-size: 12pt;
        font-weight: normal;
        margin: 5px;
        margin-top:0px !important;
    }
    
    #login-box-field
    {
        margin:0px;
        }
        
    #login-box-field
    {
        margin:0px 0px 20px 0px;
        }
        
    #login-box-namePassword {
        margin: -6px 5px 5px 0;
    }
    
    .FootLayer 
    {
        left:-10px;
    }
    
    .FooterRotate
    {
        margin-left:0px;
        }
        
    .divCaracteristicas
    {
        width:77% !important;
        margin-top:5px;
        }

    .divPlanes
    {
        width:85%;
        min-height:0px;
        }

    .divPlanRecomendado
    {
        width:Calc(85% - 10px) !important;
        min-height:0px;
        }
                
    .divContactForm
    {
        width:Calc(100% - 20px);
        padding:10px;
        }
        
    .divContactForm #frameMap
    {
        width:100% !important;
        }

    #divSubTCaract{
        width:90%;
        margin-left:5%;
    }

}