/*================================== 
        FONTS
===================================*/
@font-face {
  font-family: 'Yanone Kaffeesatz';
  font-style: normal;
  font-weight: 400;
  src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url(https://themes.googleusercontent.com/static/fonts/yanonekaffeesatz/v4/YDAoLskQQ5MOAgvHUQCcLRTHiN2BPBirwIkMLKUspj4.woff) format('woff');
}

/*================================== 
       COMMON STYLE
===================================*/
html,
body {
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.6;
    color: #2c2f34;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0;
	background: url('../images/greyzz.png') repeat;
	
}

h1, h2, h3, h4, h5, h6 {
    padding: 0;
    margin: 0;
    font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;
	font-size: 30px;
}

h4{margin-top:40px;}

a, li {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/*======================================= 
                HEADER 
=======================================*/
header {
    float: left;
    position: relative;
    width: 100%;
    z-index: 99999;
    clear: both;
}
.top-bar {
    float: left;
    width: 100%;
    line-height: 40px;
    background: #fff;
    border-top: 2px solid #008EB3;
	border-bottom: 2px solid #008EB3;
}
.sub-top-bar {
    border-bottom: 1px solid rgba(0,0,0,0.1);
    float: left;
    width: 100%;
}

/*===== Header =====*/

header.header-menu .menu-bar {
    background: #1c1c1c;
}
header.header-menu nav > ul,
header.header-menu nav > ul .mega-menu1 > ul {
    float: left;
}
header.header-menu .header-search > a {
    color: #fff;
}
header.header-menu .search-here {
    background: #161616;
    -webkit-opacity: 0.95;
    -moz-opacity: 0.95;
    -ms-opacity: 0.95;
    -o-opacity: 0.95;
    opacity: 0.95;
}
header.header-menu .search-here > i {
    color: #fff;
}

/*--- footer bottom ---*/
.bottom-bar {
	background-color: #fff;
    float: left;
    width: 100%;
	position: absolute;
	margin-top: 30px;
}
.copyright {
    color: #fff;
    font: 500 14px/50px "Roboto";
    letter-spacing: 1px;
}
.footer-imp-links a {
    color: #fff;
    padding: 10px 10px;
    display: inline-block;
    padding-right: 0;
    font-size: 13px;
}

/******* Current Time********/
.current-time {
    float: left;
    height: 40px;
}
.current-time small {
    color: #2c2f34;
    float: left;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: bold;
}
.current-time > i {
    margin-right: 9px;
}

/*--- logo area ---*/

.logo-bar img { 
/* width: 30%; */
margin: 40px;
}

/* Global CSS that are applied for all screen sizes */

.nav ul {
	max-width: 1240px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1.35em;
	font-weight: 300;
}

.nav li span {
	display: block;
}

.nav a {
	display: block;
	color: rgba(0, 0, 0, .9);
	text-decoration: none;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s;
}

.nav i{
	/* Make the font smoother for Chrome */
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Remove the blue Webkit background when element is tapped */

a, button {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

/* Hover effect for the whole navigation to make the hovered item stand out */

.no-touch .nav ul:hover a {
	color: rgba(0, 0, 0, 0.5);
}

.no-touch .nav ul:hover a:hover {
	color: rgba(0, 0, 0, 0.9);
}

/* Adding some background color to the different menu items */

.nav li:nth-child(6n+1) {	
	background: rgba(46,49,146,1);
	background: -moz-linear-gradient(45deg, rgba(46,49,146,1) 0%, rgba(27,255,255,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(46,49,146,1)), color-stop(100%, rgba(27,255,255,1)));
	background: -webkit-linear-gradient(45deg, rgba(46,49,146,1) 0%, rgba(27,255,255,1) 100%);
	background: -o-linear-gradient(45deg, rgba(46,49,146,1) 0%, rgba(27,255,255,1) 100%);
	background: -ms-linear-gradient(45deg, rgba(46,49,146,1) 0%, rgba(27,255,255,1) 100%);
	background: linear-gradient(45deg, rgba(46,49,146,1) 0%, rgba(27,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e3192', endColorstr='#1bffff', GradientType=1 );
}

.nav li:nth-child(6n+2) {
	background: rgba(55,59,68,1);
	background: -moz-linear-gradient(45deg, rgba(55,59,68,1) 0%, rgba(0,121,145,1) 100%);
	background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(55,59,68,1)), color-stop(100%, rgba(0,21,1145,1)));
	background: -webkit-linear-gradient(45deg, rgba(55,59,68,1) 0%, rgba(0,121,145,1) 100%);
	background: -o-linear-gradient(45deg, rgba(55,59,68,1) 0%, rgba(0,121,145,1) 100%);
	background: -ms-linear-gradient(45deg, rgba(55,59,68,1) 0%, rgba(0,121,145,1) 100%);
	background: linear-gradient(45deg, rgba(55,59,68,1) 0%, rgba(0,121,145,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#373b44', endColorstr='#007991', GradientType=1 );
}

/* Transforms the list into a horizontal navigation */
.nav li {	
	width: 200px;
	height: 200px;	
	text-align: center;
	-webkit-transition: border .5s;
	-moz-transition: border .5s;
	-o-transition: border .5s;
	-ms-transition: border .5s;
	transition: border .5s;	
	display: inline-block;
	margin: 20px;
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;	  
	box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.4);
}

.nav a {
	display: block;
	width: auto;
}

/* hover, focused and active effects that add a little colored border to the different items */
.no-touch .nav li:nth-child(6n+1) a:hover,
.no-touch .nav li:nth-child(6n+1) a:active,
.no-touch .nav li:nth-child(6n+1) a:focus {	
	color: rgb(46,49,146);
}

.no-touch .nav li:nth-child(6n+2) a:hover,
.no-touch .nav li:nth-child(6n+2) a:active,
.no-touch .nav li:nth-child(6n+2) a:focus {	
	color: rgb(66,134,244);
}

/* Placing the icon */

.icon {
	padding-top: 0.55em;
}

.icon + span {
	margin-top: 0.1em;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-o-transition: margin .5s;
	-ms-transition: margin .5s;
	transition: margin .5s;
}

/* Animating the height of the element*/
.nav a {
	height: 10em;
}

.no-touch .nav a:hover ,
.nav a:active ,
.nav a:focus {
	height: 10em;
}	

/* Making the text follow the height animation */
.no-touch .nav a:hover .icon + span {
	margin-top: 3.2em;
	-webkit-transition: margin .5s;
	-moz-transition: margin .5s;
	-o-transition: margin .5s;
	-ms-transition: margin .5s;
	transition: margin .5s;
}

/* Positioning the icons and preparing for the animation*/
.nav i {
	position: relative;
	display: inline-block;
	margin: 0 auto;
	padding: 0.4em;
	border-radius: 50%;
	font-size: 1.8em;
	box-shadow: 0 0 0 30px transparent;
	background: rgba(255,255,255,0.25);
	-webkit-transform: translate3d(0, 0, 0);
	-moz-transform: translate3d(0, 0, 0);
	-o-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition: box-shadow .6s ease-in-out;
	-moz-transition: box-shadow .6s ease-in-out;
	-o-transition: box-shadow .6s ease-in-out;
	-ms-transition: box-shadow .6s ease-in-out;
	transition: box-shadow .6s ease-in-out;
}	

/* Animate the box-shadow to create the effect */
.no-touch .nav a:hover i,
.no-touch .nav a:active i,
.no-touch .nav a:focus i {		
	box-shadow: 0 0 0 0 rgba(0,0,0,0.1);
	-webkit-transition: box-shadow .4s ease-in-out;
	-moz-transition: box-shadow .4s ease-in-out;
	-o-transition: box-shadow .4s ease-in-out;
	-ms-transition: box-shadow .4s ease-in-out;
	transition: box-shadow .4s ease-in-out;
}

/* Styling the toggle menu link and hiding it */
.nav .navtoogle{
	display: none;	
	width: 100%;
	padding: 0.5em 0.5em 0.8em;
	font-family: 'Lato',Calibri,Arial,sans-serif;
	font-weight: normal;
	text-align: left;
	color: rgb(7, 16, 15);
	font-size: 1.2em;
	background: none;	
	border: none;
	border-bottom: 4px solid rgb(221, 221, 221);
	cursor: pointer;
}

.navtoogle i{
	z-index:-1;
}

.icon-menu {
	position: relative;
	top: 3px;
	line-height: 0;
	font-size: 1.6em;
}

.centrado-img-circular{
	display:block;
	margin-left: auto;
	margin-right: auto;
}

img.circular {
	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;	  
	/*box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.4);*/
	border: 1px solid rgba(0, 0, 0, 0.4);
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	transition:filter 0.4s;
	-webkit-transition:-webkit-filter 1s;
}

img.circular:hover {
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
}

@media screen and (max-width: 980px){

	img.circular {
		display: none;
	}
	
	.nav li {	
	width: 80%;
	height: 80px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	}
	
	.nav i {
	font-size: 0.1em;
	margin-top: 20px;
	}
	
	.nav ul {
	font-size: 0.1em;
	font-weight: 100;
	}
	
	h4{color: #FFFFFF;}
	
	.no-touch .nav li:nth-child(6n+1) a:hover,
	.no-touch .nav li:nth-child(6n+1) a:active,
	.no-touch .nav li:nth-child(6n+1) a:focus {
	border: none;
	}
	
	.no-touch .nav li:nth-child(6n+2) a:hover,
	.no-touch .nav li:nth-child(6n+2) a:active,
	.no-touch .nav li:nth-child(6n+2) a:focus {
	border: none; 
	}
	
	h4{margin-top:10px;}
	
	.bottom-bar img{width:100%;}
}

/*--- bloque ---*/
.bloque {
    float: left;
    padding-bottom: 50px;
    text-align: center;
    width: 100%;
	margin-top: 20px;
}