/*   Typos   MDC 2018 */
@font-face {
  font-family: 'Graphik LC Web';
  src: url('../fonts/Graphik-Semibold-Web.eot');
  src: url('../fonts/Graphik-Semibold-Web.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Graphik-Semibold-Web.woff2') format('woff2'),
       url('../fonts/Graphik-Semibold-Web.woff') format('woff');
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}

.Graphik-Semibold-Web {
  font-family: 'Graphik LC Web';
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Graphik Web';
  src: url('../fonts/Graphik-Regular-Web.eot');
  src: url('../fonts/Graphik-Regular-Web.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Graphik-Regular-Web.woff2') format('woff2'),
       url('../fonts/Graphik-Regular-Web.woff') format('woff');
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

.Graphik-Regular-Web {
  font-family: 'Graphik Web';
  font-weight:  400;
  font-style:   normal;
  font-stretch: normal;
}

@font-face {
  font-family: 'Produkt Web';
  src: url('../fonts/Produkt-Semibold-Web.eot');
  src: url('../fonts/Produkt-Semibold-Web.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Produkt-Semibold-Web.woff2') format('woff2'),
       url('../fonts/Produkt-Semibold-Web.woff') format('woff');
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}

.Produkt-Semibold-Web {
  font-family: 'Produkt Web';
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}




section {
	display: block;
}
body {
	margin-top: 1%;
    margin-left: 0px;
	margin-right: 0px;
	font-family:"Graphik Web", "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	line-height: 18px;
	color: #333;
	background-color: #fff;
}

.container-fluid {
  max-width: 1600px;
  min-width: 768px;
  margin: 0 auto;
  background-color: white
}  

.row-fluid {
   max-width: 1200px;
   min-width: 768px;
   margin: 0 auto;
	*
   zoom: 1;
}

.footerlogos{
  background: #001489;
  margin-top: 0px;
/* min-width: 1200px; */
  /* max-width: 1600px; */
}



.navigation {
	padding: 0px 0;
	border-top: 0px solid rgba(0,0,0,0.075);
	border-bottom: 0px solid rgba(0,0,0,0.075);
	margin-bottom: 0px;
}

.nav-collapse {
  float: right;
}

.span12 {
		width: 1200px;
	} 

img { 
 max-width: 100%;
 height: auto;
}


/* Media Query FrontPage MDC */





/* Landscape tablets and MEDIUM Desktops and Laptops */
@media (min-width: 992px) and (max-width: 1199px) {
	.container-fluid
    .row-fluid 
}

/* Portrait tablets and SMALL desktops */
@media (min-width: 768px) and (max-width: 991px) {
  .container-fluid {
   max-width: 991px;
   min-width: 768px;}
    .row-fluid {
   max-width: 981px;
   min-width: 758px;
   margin: 0 auto;
	*
   zoom: 0;} 
  
}

/* Samsung Galaxy S5 and other Full HD resolution (landscape) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px)
  and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {
   
  .container-fluid {
    max-width: 640px;
    min-width: 360px;
    float: left;
   }
  .row-fluid {
    max-width: 640px;
    min-width: 360px;
    margin: 0 auto;
	*
   zoom: 0;
   } 
}

/* Samsung Galaxy S5 and other Full HD resolution(Portrait) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) 
and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) 
@media screen(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi)and (device-width: 1440px)and (orientation: portrait){ 
.container-fluid {
   max-width: 1440px;
   min-width: 360px;}
    .row-fluid {
   max-width: 1200px;
   min-width: 360px;
   margin: 0 auto;
	*
   zoom: 0;} 
}

/* iPhone 6 (landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
  .container-fluid {max-width: 667px;
   min-width: 375px;}
    .row-fluid {
   max-width: 667px;
   min-width: 375px;
   margin: 0 auto;
	*
   zoom: 0;} 
}

/* iPhone 6+ (landscape) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {
 
  .container-fluid {max-width: 736px;
   min-width: 414px;}
    .row-fluid {
   max-width: 736px;
   min-width: 414px;
   margin: 0 auto;
	*
   zoom: 0; } 
}


/* Landscape phones and portrait tablets iPad */
@media (min-width: 480px) and (max-width: 767px) {

	.container-fluid 
    .row-fluid 
    
}
	

/* Landscape SmartPhones and SMALLER */
@media only screen and (min-width: 320px) and (max-width: 425px) {
.container-fluid {max-width: 425px;
   min-width: 321px;}
    .row-fluid {
   max-width: 425px;
   min-width: 321px;
   margin: 0 auto;
	*
   zoom: 0; } 
}

 /* Portrait SmartPhones and SMALLER */
@media only screen and (min-device-width: 320px) and (max-device-width: 425px) {

  .container-fluid {max-width: 425px;
   min-width: 320px;}
  .row-fluid {
   max-width: 415px;
   min-width: 310px;
   margin: 0 auto;
	*
   zoom: 1; } 
   
}

 /* Portrait SmartPhones and SMALLER */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {

  .container-fluid {max-width: 480px;
   min-width: 320px;}
  .row-fluid {
   max-width: 460px;
   min-width: 300px;
   margin: 0 auto;
	*
   zoom: 1;
} 
   
}


/*   Estils  menu principal al front-end */
div.aikonmenu {
	font-size: 13px;
	position: fixed;
	top: 60;
	left: 20px;
	right: 20px;
	max-width: 100%;
	background-color: #121316;
	z-index: 9999999;
	box-shadow: none;
	direction: ltr;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

div.aikonmenu .menuwrapper {
	top:25px;	float: none;	position: relative;	height: 100%;	width: 100%;	margin-left: 2%;	margin-right: 2%;  
  background-color: white;
}

/*   Estils  menu principal al front-end   JCC 2018 */

/* Menus top level */
  /*  This is to draw the bar below every main item  */
  

div.aikonmenu .menuwrapper {
	top:25px;
	float: none !important;
	position: relative;
	height: 100%;
	width: 100%;
	margin-left: 2%;
	margin-right: 2%;  
    background-color: white;
    padding-bottom: 1.29%;
}

div.aikonmenu .logo img {
    max-height: 100% !important;
     padding: 0% 0 !important;
    float: left;
    margin-left: auto;
  margin-top: -2px !important;

}


/* Mobile screen */
div.aikonmenu .respotrigger.cf {
  float: right;
  margin-right: 10%;
} 

/* per ocultar els triangles d'estat JCC */
div.aikonmenu ul li.deeper a::after { display: none !important; }

.aikonmenu a.aikon-menu-logo {/* margin-left: 15px; !important */ }
div.aikonmenu .logo  {  margin-top: -18px !important; }

.aikonmenu ul li a {  font-family: 'Graphik LC Web', "helvetica"; }
/* Common to all submenu items  */
.aikonmenu li ul li		{ border-bottom: 1px solid white; }
.aikonmenu li ul li a	{ color: white !important; }
.aikonmenu li ul li a:hover	{ background-color: white !important; border-bottom-width: 1px; }
.aikonmenu li.item-576 a,
.aikonmenu li.item-577 a,
.aikonmenu li.item-578 a,
.aikonmenu li.item-579 a,
.aikonmenu li.item-580 a		{ border-bottom: 4px solid white; padding-bottom: 8px; }
/* about color: #001489 */
.aikonmenu li.item-576 a:hover, 
.aikonmenu li.item-576 a:active, 
.aikonmenu li.item-576 a:focus	{ border-bottom-color: #001489; color: #001489; }
.aikonmenu li.item-576.active a	{ border-bottom-color: #001489; color: #001489; background-color: white; }
.aikonmenu li.item-576 ul.nav-child li a	{ color: white !important; background-color: #001489; }
.aikonmenu li.item-576 ul li a:hover	{ color: #001489 !important; }
/* research color: #7f8cc4 */
.aikonmenu li.item-577 a:active,
.aikonmenu li.item-577 a:focus,
.aikonmenu li.item-577 a:hover	{ border-bottom-color: #7f8cc4; color: #7f8cc4; }
.aikonmenu li.item-577.active a	{ border-bottom-color: #7f8cc4; color: #7f8cc4; background-color: white; }
.aikonmenu li.item-577 ul.nav-child li a	{ color: white !important; background-color: #7f8cc4; }
.aikonmenu li.item-577 ul li a:hover	{ color: #7f8cc4 !important; }
/* industry color: #E04E39 */
.aikonmenu li.item-578 a:active,
.aikonmenu li.item-578 a:hover	{ border-bottom-color: #E04E39; color: #E04E39; }
.aikonmenu li.item-578.active a { border-bottom-color: #E04E39; color: #E04E39; background-color: white; }
.aikonmenu li.item-578 ul.nav-child li a	{ color: white !important; background-color: #E04E39; }
.aikonmenu li.item-578 ul li a:hover	{ color: #E04E39 !important; }
/* studies color: #009F4D */
.aikonmenu li.item-579 a:hover	{ border-bottom-color: #009F4D; color: #009F4D; }
.aikonmenu li.item-579.active a	{ border-bottom-color: #009F4D; color: #009F4D; background-color: white; }
.aikonmenu li.item-579 ul.nav-child li a	{ color: white !important; background-color: #009F4D; }
.aikonmenu li.item-579 ul li a:hover	{ color: #009F4D !important; }
/* outreach */
.aikonmenu li.item-580 a:hover	{ border-bottom-color: #FFC72C; color: #FFC72C; }

/*  Right (less important) menu items  */
.aikonmenu li.item-584 a,
.aikonmenu li.item-585 a, 
.aikonmenu li.item-586 a { font-size: 11px !important;  font-family: 'Graphik LC Web';, "helvetica"; }
.aikonmenu li.item-584 a:hover,
.aikonmenu li.item-585 a:hover, 
.aikonmenu li.item-586 a:hover {  border-bottom: 4px solid #333; color: #333; }
.aikonmenu li.item-584 a { margin-left: 64px; }


@font-face {
  font-family: 'Graphik LC Web';
  src: url('../fonts/Graphik-Semibold-Web.eot');
  src: url('../fonts/Graphik-Semibold-Web.eot?#iefix') format('embedded-opentype'),
       url('../fonts/Graphik-Semibold-Web.woff2') format('woff2'),
       url('../fonts/Graphik-Semibold-Web.woff') format('woff');
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}

.Graphik-Semibold-Web {
  font-family: 'Graphik LC Web';
  font-weight:  600;
  font-style:   normal;
  font-stretch: normal;
}


/*  Selected Videos section  */
div.selvideos {  margin-top: 48px; margin-bottom: 12px; }
div.selvideos .ju-slider-wrap {  border: none;  }
.selvideos .ju-slider-title {
  font-family: 'Produkt Web'; line-height: 24px; font-size: 16px; color: #001489; text-transform: none !important;
  min-height: 56px; width: 70%;  background: white;
  transition: margin-top 1s;  -webkit-transition: margin-top 1s;
  margin: -32px 18px 4px 4px; padding: 8px 8px;
  border-top: 8px solid #666;
  float: left;
}
.selvideos .ju-slider-title:hover {  margin-top: -64px;  }
.selvideos h3  {
  font-family: 'Graphik LC Web'; line-height: 30px; text-indent: 0px; text-transform: none; font-size: 24px;
  color: #001489; background: #fff; border-bottom: 1px solid #001489; border-top: 1px solid rgba(255,255,255,0.15); margin: 0 !important;
}
.video_ktt .ju-slider-title,
.video_ind .ju-slider-title {  border-top-color: #E04E39;  }
.video_out .ju-slider-title {  border-top-color: #d7ac2f;  }
/* .video_res .ju-slider-title {  border-top-color: #7f8cc4;  } */
.video_res .ju-slider-title {  border-top-color: #001489;  }
.selvideos .ju-contentslider .ju-slider-image-inner {  border: none !important;  }

/*  Events & Colloquium fine tuning JCC 20180419 */
.bt-cs_events .bt-inner img {
  padding-bottom: 8px;
  background-color: rgb(0, 20, 137);
  width: 104%;
  max-height: 192px;
  object-fit: cover;
}
/* KAR - 20181005 - oculta linea azul en colloquium
.bt-row-first .news-line-blue {
  display: none;
*/
.footer  {
  display: none;
}
.bt-cs_news .news-slider-title {
  border-top: none;
}
.bt-cs .bt-inner img {
  padding-bottom: 8px;
  background-color: rgb(0, 20, 137);
}

/* CTA Button for Movile at the bottom */
.cta {
  border: none;
  border-radius: 0em;
  box-shadow: none;
  display: block;
  font-size: 1em;
   height:54px;
   width:298px;
   padding: 5px;
  background-color: #00b0b9;
}

.cta:hover{background-color:#001489}
.cta:active {color: #001489;}
.cta{ 
overflow:hidden; 
position:fixed; 
width:auto;left:0px;right:0px;bottom:0%;z-index:300;;-webkit-transition: all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;}
.hover
#cta .hover: {color:#001489; margin:0;}

/* Invisible Desk for CTA */
@media (min-width: 767px)
 .cta { display: none; }
@media (min-device-width: 767px) {
.cta { display: none; }
  
/* CTA2 Button for DESK in lateral */
.cta2 {
  border: none;
  border-radius: 0em;
  box-shadow: none;
  display: scroll;
  font-size: 1em;
   height:298px;
   width:54px;
   padding: 5px;
  background-color: #00b0b9;
  display:scroll;
  position:fixed;
  bottom:30%;
  right:0px;
  z-index:300; }
  
.cta2:hover {background-color:#001489}
.cta2:active {color: #001489;}


/* Invisible Movile for CTA2 */
@media (max-width: 768px)
 .cta2 { display: none; }
@media (max-device-width: 768px) {
.cta2 { display: none; }