@font-face {
  font-family: 'Fajardo';
  font-style: normal;
  font-weight: 700;
  src: url('../public/fonts/James_Fajardo.eot?#iefix') format('embedded-opentype'),
  		url('../public/fonts/James_Fajardo.ttf') format('truetype'),
  		url('../public/fonts/James_Fajardo.eot');		
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: normal;
  src: url('../public/fonts/Open-Sans-regular.eot');
  src: url('../public/fonts/Open-Sans-regular.eot?#iefix') format('embedded-opentype'),
       local('Open Sans'),
       local('Open-Sans-regular'),
       url('../public/fonts/Open-Sans-regular.woff2') format('woff2'),
       url('../public/fonts/Open-Sans-regular.woff') format('woff'),
       url('../public/fonts/Open-Sans-regular.ttf') format('truetype'),
       url('../public/fonts/Open-Sans-regular.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 700;
  font-style: normal;
  src: url('../public/fonts/Open-Sans-700.eot');
  src: url('../public/fonts/Open-Sans-700.eot?#iefix') format('embedded-opentype'),
       local('Open Sans Bold'),
       local('Open-Sans-700'),
       url('../public/fonts/Open-Sans-700.woff2') format('woff2'),
       url('../public/fonts/Open-Sans-700.woff') format('woff'),
       url('../public/fonts/Open-Sans-700.ttf') format('truetype'),
       url('../public/fonts/Open-Sans-700.svg#OpenSans') format('svg');
}

@font-face {
  font-family: 'Open Sans';
  font-weight: 400;
  font-style: italic;
  src: url('../public/fonts/Open-Sans-italic.eot');
  src: url('../public/fonts/Open-Sans-italic.eot?#iefix') format('embedded-opentype'),
       local('Open Sans Italic'),
       local('Open-Sans-italic'),
       url('../public/fonts/Open-Sans-italic.woff2') format('woff2'),
       url('../public/fonts/Open-Sans-italic.woff') format('woff'),
       url('../public/fonts/Open-Sans-italic.ttf') format('truetype'),
       url('../public/fonts/Open-Sans-italic.svg#OpenSans') format('svg');
}

body, html {
	font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
	height: 100%;
}

#socialbtn-panel {
	float: right;
	margin-right: 35px;
	width: 60%;
	min-width: 350px;
	color: #fff;
}

#socialbtn-panel .btn-social {
	line-height: 2;
	padding-left: calc(1.6em + 20px);
	text-transform: none;
}

#socialbtn-panel .btn-social .fa {
	width: calc(1em + 10px);
	line-height: 1.8;
}

legend {
	color: inherit;
}

.btn-social {
	position: relative;
	padding-left: 44px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 1.2em !important;
}

.btn-social>:first-child {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 32px;
	line-height: 40px;
	font-size: 1.2em;
	text-align: center;
	border-right: 1px solid rgba(0, 0, 0, 0.2)
}

.btn-facebook {
	color: #fff !important;
	background-color: #3a5996;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active,
	.btn-facebook.active {
	color: #fff;
	background-color: #2d4073;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-google-plus {
	color: #fff;
	background-color: #dc4b38;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-google-plus:hover, .btn-google-plus:focus, .btn-google-plus:active,
	.btn-google-plus.active {
	color: #fff;
	background-color: #c13320;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-ldap {
	color: #fff;
	background-color: #2271eb;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-ldap:hover, .btn-ldap:focus, .btn-ldap:active, .btn-ldap.active {
	color: #fff;
	background-color: #105aca;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-cert {
	color: #fff !important;
	text-transform: none;
	background-color: #5ab85a;
	border-color: rgba(0, 0, 0, 0.2);
}

.btn-cert:hover, .btn-cert:focus, .btn-cert:active, .btn-cert.active {
	color: #fff;
	background-color: #419641;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-userpass {
	color: #fff;
	background-color: #e7921d;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-userpass:hover, .btn-userpass:focus, .btn-userpass:active,
	.btn-userpass.active, .open>.dropdown-toggle.btn-userpass {
	color: #fff;
	background-color: #d87907;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-twitter {
	color: #fff !important;
	background-color: #44abdd;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-twitter:hover, .btn-twitter:focus, .btn-twitter:active,
	.btn-twitter.active, .open>.dropdown-toggle.btn-twitter {
	color: #fff;
	background-color: #2794e7;
	border-color: rgba(0, 0, 0, 0.2)
}

.btn-social:active, .btn-social.active, .open>.dropdown-toggle.btn-social
	{
	background-image: none
}

#login-box {
	width: 22em;
	margin: 0 auto;
	font-family: 'Open Sans', sans-serif !important;
	background-color: #fff;
	background-image: none;
	color: #333;
	font-size: 1.2em;
}

#login-box legend {
	font-size: 1.8em;
	text-align: center;
	font-weight: 300;
}

#login-box label {
	font-weight: 300;
	font-size: 1.35em;
	display: block;
}

#login-box input {
	width: 100%;
}

#login-box .loginButton {
	text-align: center;
}
/* Efectos al mostrar/ocultar */
.show-effect {
	-webkit-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-moz-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	-o-transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	transition: visibility 0s linear 0.5s, opacity 0.5s linear;
	visibility: hidden;
	opacity: 0;
}

.show-effect-visible {
	visibility: visible !important;
	opacity: 1 !important;
	transition-delay: 0s !important;
}

#cookieNotification .text, #cookieNotification .btn {
	font-size: 1.3em;
}

#cookieReqAlert {
	text-align: right;
}

#cookieReqAlert .text, #cookieReqAlert .btn {
	font-size: 1.1em;
}

#cookieReqAlert .text.title {
	font-size: 1.2em;
	font-weight: bold;
}

#cookieReqAlert .text.url {
	text-decoration: underline;
	font-weight: bold;
}

@media only screen and (min-width :992px) {
	#login-left {
		height: 100%;
	}
}

@media only screen and (max-width:991px) {
	#clock{
		margin-top: 16px;
	}
	#clock #date {
		font-size: 2em;
		margin-top: 16px;
	}
	#login-right {
		height: auto;
		padding: 0;
	}
	#socialbtn-panel {
		float: none;
		margin: 25px auto;
		width: 80%;
		min-width: 150px;
	}
	#login-box {
		margin: 25px auto;
	}
}