@import url(https://fonts.googleapis.com/css?family=Raleway:400,300,600,700,800,100,100italic,200,200italic,300italic,400italic,500,500italic,600italic,700italic,800italic,900,900italic);

body {
	/* Location of the image */
  background-image:url(../img/fondo.jpg);
  
  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
  
  /* Pick a solid background color that will be displayed while the background image is loading */
  background-color:#464646;
  
  /* SHORTHAND CSS NOTATION
   * background: url(background-photo.jpg) center center cover no-repeat fixed;
   */
	text-rendering: optimizelegibility;
}

/*  Removable CSS  */

p{color:#666;
	padding:2px;
	font-size:95%;
    font:29px 'Raleway', sans-serif;
	font-weight:100;}
	
.container {
  max-width:1200px;
 /* width:1200px;*/
 margin:3% 15%;
  border:1px solid #666;
  /*position:absolute;*/
  padding:8%;
}

.title{ width:80%;  height:auto; margin:0 auto;}
.title img{ width:100%;}

.formulario{ width:100%; height:auto; margin:0 auto;}

.box
{   border: 1px solid #666;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    color:#fff;
	padding:2px;
	font-size:95%;
    font:21px 'Raleway', sans-serif;
	text-align:center;
   /*margin:0 auto 30px;*/
	overflow:hidden;
	float:left;
}
.box.login
{ height: 260px;
    width: 340px;
    margin: 39px auto;
    /* margin: 3% 32%; */
    float: none;
    position: static;
}

.boxBody
{
    border-top:1px solid #666;
    border-bottom:1px solid #333;
    padding:10px 20px;
}

.box footer
{   /*background:rgba(255,255,255,0.4);*/
background: rgba(255,255,255,0.4); 
    background: rgba(0,0,0,0.3);
padding: 28px 26px;
    /* overflow: hidden; */
    height: 100%;
    border: none;
    width: 100%;
    -webkit-border-radius: 0 0 10px 10px;
    -moz-border-radius: 0 0 10px 10px;
    border-radius: 0 0 10px 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.box label
{
    display:block;
    font-size:95%;
    font:14px 'Raleway', sans-serif;
    margin:10px 0 0 6px;
}
.box footer label{
	float:left;
	margin:4px 0 0;
}
.box footer input[type=checkbox]{
	vertical-align:sub;
	*vertical-align:middle;

}
.box input[type=text],
.box input[type=password],
.txtField,
.cjComboBox
{
    border:1px solid #fff;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.01) inset, 0 0 1px #95a2a7 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.01) inset, 0 0 1px #95a2a7 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    margin:3px 0 4px;
    padding:8px 6px;
    width:270px;
	font-size:95%;
	font:18px 'Raleway', sans-serif;
    display:block;
}
.box input[type=text]:focus,
.box input[type=password]:focus,
.txtField:focus,
.cjComboBox:focus
{
    border:6px solid #f0f7fc;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.04) inset, 0 0 1px #0d6db6 inset;
	color:#333;
	font-size:95%;
	font:18px 'Raleway', sans-serif;
}
.cjComboBox
{
    width:294px;
}
.cjComboBox.small
{
    padding:3px 2px 3px 6px;
    width:100px;
    border-width:3px !important;
}
.txtField.small
{
    padding:3px 6px;
    width:200px;
    border-width:3px !important;
}

.rLink{padding:0 6px 0 0; font-size:11px; float:right;}
.box a{color:#999;}
.box a:hover, .box a:focus{text-decoration:underline;}
.box a:active{color:#f84747;}
.btnLogin
{
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    background:#000;
   /* background:-moz-linear-gradient(top, #eaeaea, #000);
    background:-webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#000));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eaeaea', EndColorStr='#000')";*/
    border:1px solid #000 !important;
    cursor: pointer;
    padding:11px 16px;
     font-size:95%;
    font:14px 'Raleway', sans-serif;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px; 
    color:#fff;
   /* -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px;*/
    margin-left:10px;
    float:right;
	/*padding:7px 21px;*/
}

.btnLogin:hover,
.btnLogin:focus,
.btnLogin:active{
    background:#666;
    /*background:-moz-linear-gradient(top, #7acbed, #badff3);
    background:-webkit-gradient(linear, left top, left bottom, from(#7acbed), to(#badff3));
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')";*/
}
.btnLogin:active
{
    text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; 
}

.creditos{ width:100%;
/*float:left;*/
height:auto;
}

.cre1{  
      clear: both;width: 75%;
 height:auto; margin:0 auto; /*padding:18%;*/ font-size:95%;
    font:11px 'Raleway', sans-serif; color:#333}
.cre2a{ width:15%; height:auto; margin:0 auto; padding:1px; font-size:95%;
    font:11px 'Raleway', sans-serif; text-align:center; color:#666; display:inline-block;}
.cre2b{ width:15%; height:auto; margin:0 auto; padding:1px; font-size:95%;
    font:11px 'Raleway', sans-serif; text-align:center; color:#666; display:inline-block;}
.cre2 img{ width:80%; height:auto; margin:0 auto;}	
.cre3{     clear: both;width:100%; height:auto; margin:0 auto; padding:1px; font-size:95%;
    font:11px 'Raleway', sans-serif; text-align:center; color:#333;}	

	
	
	
/*RESPONSIVE
   ========================================================================= */
 
/*Tablets en horizonal y escritorios normales
   ------------------------------------------------------------------------- */
@media (max-width:1925px) { 
.container {
    width: 65%;
    margin: 2% 10%;
    padding: 8%;
}
}

@media (max-width:1200px) { 
.container {
    width: 65%;
    margin: 2% 8%;

    padding: 10%;
}
}



@media (min-width:768px) and (max-width:1024px) { 
.box.login {
    height: 260px;
    width: 340px;
    margin: 3% 17%;
    float: none;
    position: static;
margin: 37px auto;
}




}

@media (min-width:1024px) {

.cre3 {
  width: 45%
 }
}



@media (min-width:320px) and (max-width:1023px) {

.cre3 {
  width: 68%
 }
}



/*Móviles en horizontal o tablets en vertical
   ------------------------------------------------------------------------- */
@media (max-width:767px) { 

.container {
    width: 75%;
    margin: 5% 2%;
    position: absolute;
    padding: 10%;
}

.title{ width:100%; float:left; height:auto; margin:0 auto; margin-bottom: 32px;}
.title img{ width:110%; float:none;
}

.box.login
{   height: 260px;
	width: 340px;
/*    position: absolute;*/
    margin: 0 auto;
	/*left: 692px;
	top: 474px;
	margin: -130px 0 0 -166px;*/
  margin: 0 auto;
    position: static;
    float: none;
}

.cre1{   
clear: both;
  width: 100%;
    height: auto;
    float: none;
    margin: 0 auto;
   padding: 10% 30% 0 0;
    font-size: 95%;
    font: 11px 'Raleway', sans-serif;
    /* color: rgba(255,255,255,1); */}


.cre2{ width:20%; height:auto; float:left;  padding:1px;font-size:95%; padding:10% 0;
    font:11px 'Raleway', sans-serif; text-align:center; color:#fff;}
.cre2 img{ width:100%; height:auto; margin:0 auto;}	

}
 
/* Móviles en vertical
   ------------------------------------------------------------------------- */
@media (max-width:480px) { 
p{
	padding:2px;
	font-size:95%;
    font:19px 'Raleway', sans-serif;
	font-weight:100;}

.container {
    width: 76%;
    margin: 5% 2%;
    position: absolute;
    padding: 10%;
}




.box label
{
    display:block;
    font-size:95%;
    font:11px 'Raleway', sans-serif;
    margin:10px 0 0 6px;
}

.box.login
{   height: 230px;
	width: 100%;
/*    position: absolute;*/
	margin:10% 2%;
	float:left;
	/*left: 692px;
	top: 474px;
	margin: -130px 0 0 -166px;*/
}

.box input[type=text],
.box input[type=password],
.txtField,
.cjComboBox
{
    border:1px solid #fff;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.01) inset, 0 0 1px #95a2a7 inset;
    -webkit-box-shadow:2px 3px 3px rgba(0, 0, 0, 0.01) inset, 0 0 1px #95a2a7 inset;
    box-shadow:2px 3px 3px rgba(0, 0, 0, 0.06) inset, 0 0 1px #95a2a7 inset;
    margin:3px 0 4px;
    padding:8px 6px;
    width:93%;
    display:block;
	font:11px 'Raleway', sans-serif;
}

.btnLogin
{   font:11px 'Raleway', sans-serif;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0px; 
    color:#fff;
}

.cre1{ width: 100%;
    height: auto;
    /* float: left; */
    margin: 0 auto;
    padding: 10% 10% 0 0;
    font-size: 95%;
    font: 11px 'Raleway', sans-serif; }
.cre2{ width:16%; height:auto; float:left;  padding:1px;font-size:95%; padding:10% 0;
    font:11px 'Raleway', sans-serif; text-align:center; color:#fff;}
.cre2 img{ width:100%; height:auto; margin:0 auto;}		
 }