﻿@media only screen
and (min-width : 1280px) {
	.hp #content {
		margin-top: -400px;
	}
	
	
}

@media only screen
and (min-width : 1400px) {
	.hp #content {
		margin-top: -340px;
	}
}

@media only screen
and (min-width : 801px) {
	.not-desktop,	
	#AccountNav,
	#NavigationMobile	{
		display: none;
	}
	.js .msr-item {
		opacity: 0;
	}
}
@media only screen
and (max-width : 1200px) {
	.msr-item.sw1 .inner-box {
		width: 290px;
		margin: 5px;
	}

	.msr-item.sw2 .inner-box {
		width: 590px;
		margin: 5px;
	}
	.msr-item.sw3 .inner-box {
		width: 890px;
		margin: 5px;
	}
	.msr-item.sw4 .inner-box {
		width: 99%;
		margin: 5px;
	}
    .msr-item.sw3.presentation .inner-box {
        background: rgba(255, 255, 255, 0.89) url("../Images/Design/hp-block-bg-landscape.jpg") no-repeat;
    }
}
@media only screen
and (max-width : 1498px) and (min-width : 1201px) {
	.msr-item.mw1 .inner-box {
		width: 290px;
		margin: 5px;
	}

	.msr-item.mw2 .inner-box {
		width: 590px;
		margin: 5px;
	}
	.msr-item.mw3 .inner-box {
		width: 890px;
		margin: 5px;
	}
	.msr-item.mw4 .inner-box {
		width: 99%;
		margin: 5px;
	}
}

@media only screen and (max-width : 980px) {
    .theme-page .msr-item, .theme-page .msr-item.w1, .theme-page .msr-item.w2, .theme-page .msr-item.w3 {
        width: auto;
        margin: 0 0 12px;
        min-width: 0;
    }
}
@media only screen
and (max-width : 800px) {
	/* General */
    body {	
        width: auto;
        margin: 0;
        padding: 0;
    }
    
	header {
		padding: 12px 6px 6px;
	}
	
	.std .header-inner .h1 {
	background: none; height:0px; width:100%;
	
	}
	
	#content {
		background-color: #fff;
	}
	
    img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {
        max-width: 100%;
    }
    
    img {
        height: auto;
    }
    
    textarea,table,td,th,code,pre,samp {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        hyphens: auto;
        word-wrap: break-word;
    }
    .std .main-content p,
	.std .main-content li	{
		font-size: 20px;
		line-height: 24px;
	}
	
	.std .main-content li	{
		margin-left: 12px;
	}
	
	.std .main-content h1 + p,
	.std .main-content h1 + li {
		margin-top: 24px;
	}
	/*---*/
	
	.std #content h2, .std #content h3, .std #content h4, .std #content h5, .std #content h6 {
		overflow: visible;
	}
	
	/************************
	*         TABLES        *
	*************************/
	#content table {
		max-width: 100%;
	}
	
	#content table p,
	#content table li	{
		font-size: 12px;
		line-height: 12px;
		word-wrap: normal;
		word-break: normal;
	}

	.masonry-tbl{
		margin:10px auto;
		width:100%;
	}
	
	/************************
	*          NAV          *
	*************************/
	#AccountNav ul {
		padding: 0;
	}
	#AccountNav li {
		margin-bottom: 1px;
	}
	
	#AccountNav li a {
		text-align: center;
		padding: 11px 28px;
		background: transparent;
		color: #fff;
		font-size: 24px;
		line-height: 24px;
		padding: 12px;
	}
	
	#NavigationSideBar a, #NavigationMobile a {
		display: block;
		font-size: 24px;
		line-height: 24px;
		white-space: normal;
		color: #fff;
	}
	
	.nav .ul-nav {
		padding: 0;
		background-color: transparent;
	}
	
	.nav .ul-nav li {
		margin-bottom: 1px;
	}
		
	.nav .ul-nav li a {
		color: #fff;
		display: block;
		font: normal 32px/32px 'Trump Gothic W01 East', Arial, Tahoma, sans-serif;
	}
	
	.nav .ul-sub-nav li a {
		color: #fff;
		display: block;
		font: normal 32px/32px 'Trump Gothic W01 East', Arial, Tahoma, sans-serif;
	}
	
	.std .ul-nav {
		width: 100%;
	}
	
	.std ul.ul-sub-nav {
		background-color: transparent;
	}
	
	.std .ul-sub-nav li a:link, .std .ul-sub-nav li a:visited, .std .ul-sub-nav li a:hover, .std .ul-sub-nav li a:active, .std .ul-sub-nav li a:focus {
		color: #fff;
	}
	
	.std .ul-sub-nav li a {
		background-color: inherit;
		padding: 17px 25px;
	}
	
	.std .ul-sub-nav li:first-child a {
		padding-top: 17px;
	}
	
	.std .ul-sub-nav li.on a {
		background: #93a7c6 none;
	}
	
	/*-HP --*/
	
	.hp #content {
		margin: 0;
		height: auto !important;
	}
	.library.w2 .theme-box > div {
		width: 100% !important;
	}
	.inner-box {
		padding: 12px;
	}
	
	.div-nav {
		display: none;
	}
		
	.msr-item, .msr-item.w1, .msr-item.w2, .msr-item.w3{
		width: auto!important;
		position:relative!important;
		top: 0!important;
		left: 0!important;
		margin: 0 0 12px;
        min-width:initial;
	}
	
	.msr-item.w1 .inner-box,
	.msr-item.w2 .inner-box,
	.msr-item.w3 .inner-box	{
		width: auto;
        min-width:0;
		margin: 0;
		padding: 12px;
	}
        .msr-item.video .inner-box {
            padding:0px;
        }
	#main-wrapper .main-content {
		margin: 0;
	}
	
	.std h1 {
		font-size: 48px;
		line-height: 48px;
		margin-top: 0;
		padding: 0;
	}
	
	
	
	.hp h2,
	.std h2	{
		font-size: 36px;
		line-height: 36px;
		padding: 0;
		margin: 0 0 12px;
	}
	
	.std p + h2,
	.std p + .h2,
	.std ul + h2,
	.std ul + .h2 {
		margin-top: 24px;
	}
	
	.std h3	{
		font-size: 28px;
		line-height: 28px;
	}
	
	.hp h4,
	.std h4	{
		font-size: 24px;
		line-height: 24px;
	}
	
	.hp h5,
	.std h5	{
		font-size: 20px;
		line-height: 20px;
	}
	
	.hp h6,
	.std h6	{
		font-size: 18px;
		line-height: 18px;
	}
	
	.theme-box > div {
		padding: 12px 0;
	}
	
	
	
	.inner-box div.theme-box p,
	.inner-box div.theme-box span,
	.inner-box div.theme-box li,
	.descr,
	body.supply_chains .story .theme-box p,
	body.supply_chains .story .theme-box span,
	body.supply_chains .story .theme-box li {
		font-size: 18px;
		line-height: 23px;
	}
	
	.descr {
		margin: 12px 0;
	}
	
	.inner-box p.more {
		position: static;
		margin: 0 -12px -12px 0;
	}
	
	.inner-box p.more a {
		font-size: 20px;
		line-height: 24px;
	}
	
	/* General standard */
	.std #main-wrapper {
		padding: 0;
	}
	
	
	
	.std .main-content {
		padding: 12px;
	}
	
	.std .main-content ol,
	.std .main-content ul	{
		margin: 5px 0;
	}
	
	.right, .left {
		float: none;
		margin: 12px 0;
		width: 100%;
		height: auto;
	}
	
	.std .see-also h2 {
		font-size: 24px;
	}
	
	.see-also .inner-box ul li {
		font-size: 16px;
		line-height: 24px;
	}
	
	.std .see-also .inner-box {
		background: #a71680 url(../Images/Design/bg-see-also_v2.png) 0 0 no-repeat;
		background-size: auto 100%;
	}
	
	/* Banner */
	.header-inner {
		height: auto;
	}
	
	.std .header-inner {
		background: none;
	}
	
	.not-desktop .header {
		padding: 12px 6px 6px;
		background: none;
	}
	
	.not-desktop .header-inner {
		margin: 0 48px;
		position: relative;
		z-index: 1;
		padding: 0;
	}
		
	.header-inner h1 {
		position: static;
		padding: 0;
	}
	
	h1 a,
	.h1 a	{
		width: auto;
		text-align: center;
		display: block;
	}

	#wrapper .logo-wrapper.desktop,
	#wrapper .logo-wrapper.desktop {
		display: none;
	}
	
	#epca {
		position: static;
	}
	
	#wrapper .logo-wrapper.not-desktop,
	#wrapper .logo-wrapper.not-desktop {
		display: inline-block;
		vertical-align: middle;
		text-align:center;
		width: 37%;
	}

	.NavigationSideBar.not-desktop {
		background: url("/frontend/images/design/mobile-menu-icon.gif") no-repeat scroll left top transparent;
		display: inline-block;
		vertical-align: middle;
		text-align:center;
		height: 27px;
		width: 6%;
		position: relative;
		z-index: 1;		
	}
	
	#wrapper .logo-wrapper,
	#wrapper .logo-wrapper {
		display: inline-block;
		vertical-align: middle;
		text-align:right;
		width: 48%;
	}
	
	#wrapper .not-desktop .logo,
	#wrapper .not-desktop .logo {
		height: auto;
		text-align: center;
		vertical-align: middle;
	}
	
	#wrapper  .not-desktop .people {
		width: 37%;
		max-width: 65px;
	}
	
	#wrapper  .not-desktop .txt {
		width: 63%;
		max-width: 111px;
	}

	
	
	/* Menu */
	.not-desktop {
		display: block;
	}
	
	.menu.not-desktop {
		/* float: right; */
		display: inline-block;
		vertical-align:middle;
		position: relative;
		z-index: 1;
		width: 6%;
		height: 36px;
		padding: 0;
		background: transparent url('../Images/Design/user-grey-big.png') no-repeat 50% 50%;
}

	.not-desktop span {
		display: block;
		color: transparent;
		line-height: 0;
		font-size: 0px;
	}
	
	.menu.desktop {
		display: none;
	}
	
	
	
	/* Organisation */
	.organisation .profile-datas {
		min-height: 0;
	}
	
	.main-content .organisation .company {
		font-size: 13px;
		line-height: 13px;
		overflow: hidden;
	}
	
	.organisation .cv-desc {
		width: auto;
		position: static;
	}
	
	.js .organisation .cv {
		clear: left;
	}
	
	.js .organisation .cv h6 {
		position: relative;
		top: 0;
		left: 0;
		margin: 6px 0;
		float: none;
		clear: left;
		display: inline-block;
	}
	
	
	
	/* Slider */
	.box_skitter {
		display: none;
	}
	
	
	/*  box 1 - epca  */
	
	.presentation .inner-box {
		background: #fff none!important;
		padding: 12px;
		min-height: initial;
	}	
    
	#wrapper {
		padding: 0;
	}
	
	.presentation h2 {
		font-size: 48px;
		margin: 12px 0 24px;
		padding: 0;
	}	
	
	.presentation .ul-presentation {
		padding-left: 18px;
	}
	
	.presentation .ul-presentation li {
		font-size: 20px;
		line-height: 24px;
		margin-top: 12px;
	}
	
	/* Focus meeting */
	.focus-workshop .inner-box .event-link a {
		position: static;
		display: block;
		margin: 12px 0 0;
	}
	
	.focus-meeting .inner-box {
		padding: 12px;
	}
	
	.event-wrapper {
		position: static;
	}	
	
	.js .event-wrapper {
		display: block;
	}
	
	.event-details {
		padding: 12px;
		display: block;
	}
	
	.focus-meeting .event-details  .event-title {
		font-size: 24px;
		line-height: 24px;
		text-align: center;
	}
		
	.focus-meeting .event-details .event-date {
		font-size: 36px;	
		line-height: 36px;
		text-align: center;
	}
	
	.focus-meeting .event-details .event-venue {
		font-size: 28px;
		line-height: 28px;
		text-align: center;
	}
	
	.inner-box .event-link {
		position: static;
		margin: 0 -12px -12px;
	}
	
	.focus-meeting .inner-box .event-link a {
		position: static;
		display: block;
		height: auto;
		padding: 24px 6px;
		text-align: center;
		line-height: 26px;
	}
	
	/* FAQ */
	.ul-faq {
		padding: 0;
	}
	
	
	/* Organisation */
	.std .main-content .tabs-ul {
		margin: 0;
	}

	.std .main-content .tabs-ul li {
		display: block;
		width: auto;
	}
	
	.std .tabs-ul li a {
		display: block;
		padding: 24px 0;
		width: auto;
		height: auto;
	}
	
	.std .main-content .tabs-container {
		padding: 12px;
		margin: 12px 0;
	}
		
	.organisation  .profile {
		width: auto;
		display: block;
		float: none;
	}
	
	.organisation .role {
		margin: 36px 0 0;
	}
		
	
	
	
	.photo img,
	.video img {
		width: 100%;
	}
	
	div.partners > a {
		width: 100%;
		text-align: center;
		margin: 12px 0;
	}
	
	.annual_meeting .meeting {
		float: none;
		width: auto;
	}
	
	.std .main-content .meeting p {
		font-size: 20px;
		line-height: 24px;
	}
	

	.annual_meeting .inner-box .msr-item {
		display: inline-block;
		vertical-align: bottom;
		margin: 0;
		padding: 3px;
	}
	
	.annual_meeting .msr-item.w1 .inner-box,
	.annual_meeting .msr-item.w2 .inner-box,
	.annual_meeting .msr-item.w3 .inner-box {
		padding: 3px;
	}
	
	.annual_meeting a.download.left,
	.annual_meeting a.download.right,
	.annual_meeting a.download img {
		margin: 0;
	}
		
		
	/***********************************
	*         Meetings (Page)          *
	************************************/
	.content {
		margin: 0;
		padding: 0;
	}
	
	.annual_meeting .focus-meeting,
	.annual_meeting .what-meeting,
	.annual_meeting .see-also {
		width: auto;
	}

	
	.annual_meeting .other-workshops .theme-box {
		margin: 0;
		padding: 0;
	}
	 
	.annual_meeting .other-workshops .theme-box p {
		font-size:20px;
		line-height:20px;
	}

	.annual_meeting .other-workshops .theme-box .title {
		margin-bottom: 12px;
	}

	.annual_meeting .other-workshops .theme-box .time {
		color: #004A93;
		margin-bottom: 12px;
	}
	 
	 
	 
	/***********************************
	*         Meetings (Page)          *
	************************************/
	body.supply_chains [class^="msr-item"] .inner-box {
		padding: 6px;
	}


	/*******************************
	*       MEMBERS COMPANIES      *
	********************************/
	#form-members .alphabet  ul {
		margin: 0;
		padding: 0;
	}
	 
	#form-members  .select {
		margin: 12px auto;
		display: block;
	}

	#form-members  .alphabet ul {
		text-align: center;
	}
	 
	
	 
	#form-members  .alphabet li {
		margin: 3px auto;
	}

	#form-members  .alphabet li a {
		line-height: 46px;
	} 

	
	/***************
	*   BOX QUOTE  *
	***************/
	body.education  .quote .inner-box {
		padding-bottom: 24px;
	}
	
	
	/******************************
	*   PUBLICATIONS AND VIDEOS   *
	*******************************/
	.search fieldset > label {
		font-size: 20px;
		margin-bottom: 24px;
		font-weight:  bold;
	}
	
	/*********************
	/*		COOKIES		*/
	*********************/
	#denyCookies {
		position: static !important;
		margin: 6px auto !important;
		font-size: 40px;
	}
	
}




 
/* smartphones (portrait and landscape) ----------- */
@media only screen
and (max-width : 641px) {
	.search span[id^='cbl'] label {
		display: block;
		width: auto;
	}
	
	.search .keywords input {
		width: auto;
	}
	
	.result h4 {
		margin: auto;
	}
	
	.result .year,
	.result .keys {
		position: static;
		margin: 6px 0;
	}
	
	a.btn {
		padding: 6px;
	}
}



@media only screen
and (max-width : 900px) {
/* footer */
	.div-footer	{
		padding: 0;
		margin: 0;
	}
	
	.footer {
		padding: 12px;
		margin: 0;
	}
	
	.nav-footer {
		float: none;
	}
	
	.nav-footer li {
		width: 50%;
		margin: 0;
		float: left;
		text-align :center;
	}
	
	.nav-footer li a {
		font-size: 20px;
		line-height: 24px;
		height: auto;
		padding: 12px 0; 
	}
	
	.ul-social-footer {
		margin-top: 36px;
		float: none;
		width: 100%;
	}
	
	.ul-social-footer li {
		width: 24%;
		margin: 0;
		text-align: center;
		float: none;
	}

}

@media only screen
and (max-width : 480px) {
	
	#epca {
		width: 120px;
	}
	#wrapper .logo-wrapper, #wrapper .logo-wrapper {
		text-align: center;
	}
	
}