/* woc 2*/
/*      */

/*pre{display: none;}*/
.missing{color:red;}

html{font-size: 100%;}
@font-face {font-family: Awesome; src: url('../../source/fonts/Awesome/FontAwesome.otf');}

body{background-color: #2e2e2e; margin: 0; padding: 0; font: 1rem/1.5rem 'Open sans', sans-serif;}
.wrap,.minifrontpage{max-width: 1200px; margin: auto; padding: 0 1rem;}
.item-page.full .content.wrap{max-width: 100%; padding: 0;}

.bg-light{background-color:#f4f5f5; padding: 1rem 0; border-top:2px solid #ddd; border-bottom:2px solid #ddd;}
.bg-hl{background-color:#0e71a2; padding: 1rem 0; color: #fff;}
.item-page .bg-hl{padding: 3rem 0 1rem 0;}
.bg-hl2{background-color:#38b590; padding-top: 1rem; color: #fff;}

section{padding: 2rem 0;}
section header h2{color: #4c5667; text-align: center; position: relative;}
section header .hr{width: 4rem; border-bottom: solid 2px #4c5667; margin:1rem auto 2rem auto;}
.flexme{display: flex; margin-top: 1rem;}
.flexme > article{flex:1; margin: 0 1rem;}
.flexme > article:first-child{margin-left: 0}
.flexme > article:last-child{margin-right: 0}
.flexme > article h3{margin-top: 0;}


@media screen and (max-width: 800px){
.flexme-3{flex-direction: column;}
.flexme-3 > article{margin: 1rem 0;}
}

@media screen and (max-width: 650px){
.flexme-2{flex-direction: column;}
.flexme-2 > article{margin: 1rem 0;}
}




/*reset et generique*/
.cookie_notification.mobile{bottom: auto;}
ul, ol{margin: 0; padding: 0; list-style: none;}
.simple{margin-bottom: 2rem;}
.simple h4,.simple p{margin: 0;}
.simple h4{display: inline-block;}
ol.simple{margin-left: 0; padding-left: 0; position: relative;}
ol.simple::before{content: "a"; border-left: solid 5px #0c6794; position: absolute; left: 1.15rem; display: block; height: 100%;}
ol.simple li{margin: 3rem 0; counter-increment: step-counter; padding-left: 3.5rem; position: relative;}
ol.simple li::before{content: counter(step-counter); margin: 0 2rem 1rem 0; background: #0c6794; border-radius: 3rem; color: #fff; padding: 0.5rem 1rem; position: absolute; left: 0; top:-0.5rem; font-weight: bold;}
ol.simple li:hover::before{background: #f58220; transition: background ease 500ms;}

ul.simple li{padding: 1rem;}
ul.simple li:nth-child(2n+1){background-color: #f4f5f5;}

a, .ui-widget-content a{color: #2685c8; text-decoration: none;}
a:hover, #publish a:hover{transition: all ease 500ms; color: #f68212;}
a img:hover{opacity: 0.85;}
.item-page ul.simple li{padding: 0.75rem 1.5rem;}
.item-page ul.simple li::before{content: "\f0da"; font-family: "Awesome"; margin-right: 0.5rem; color: #0e71a2;} 
.item-page p a[target="_blank"]::after, .item-page li a[target="_blank"]::after{content: "\f08e"; font-family: "Awesome"; font-size: 90%; font-style: normal; padding: 0 0.2rem 0 0.4rem;}
.item-page p a[href$="pdf"][target="_blank"]::after, .item-page li a[href$="pdf"][target="_blank"]::after{content: "\f1c1"; font-family: "Awesome"; font-size: 90%; font-style: normal; padding: 0 0.2rem 0 0.4rem;}

.b{font-weight: bold;}
.c{text-align: center;}
.clear{clear: both;}

.ico::before{font-family: "Awesome";}
.ico-m{font-size: 2rem;}
.ico-l{font-size: 3rem;}
.ico.email::before{content: "\f0e0";}
.ico-eye::before{content: '\f06e';}
.ico-checked::before{content: "\f05d";}
.ico-flex::before{content: '\f0d0';}
.ico-lang::before{content: '\f086';}
.ico-more::before{content:"\f105";}
.ico-nav::before{content: "\f0c9";}
.ico-pub::before{content: '\f0a1';}
.ico-quality::before{content: '\f219';}
.ico-search::before{content: "\f002";}
.ico-speed::before{content: "\f0e7";}

.ico-open::before{background:rgba(0, 0, 0, 0) url("../images/logo_oa.svg") no-repeat scroll center center / 90% auto; content: ""; display: inline-block; width: 53px; height: 53px; position: relative; top: -12px;}
.ico-info::before {content: "i"; color: #fff; font-family: Georgia,sans-serif; font-weight: bold; padding: 0.25rem 0.85rem;}


@keyframes spin {
  0%   {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

.ico-scrolldown::before{ content:"\f103"; color: #2685c8; margin-right: 1rem; font-size: 2rem}
.ico-sync::before{content:"\f021"; color: #2685c8; margin-right: 1rem; font-size: 2rem; display: inline-block; animation: spin 2s linear infinite; transform-origin: center center;}


.btn{text-align: center; margin-top: 2rem;}
.btn a{background-color: #2685c8; color: #fff; padding: 0.5rem 1rem; text-decoration: none; border-radius: 5px; white-space: nowrap;}
.btn a:hover{background-color: #fff; color:#f68212; box-shadow:0 0 0px 3px #f68212}


.btn-primary{background: #2685c8; color:#fff; padding:0.5rem 1rem; border-radius: 5px; transition: all ease 500ms}
.btn-primary:hover{background: #f68212; color:#fff;}

.item-page h2{margin-top: 3rem;}
.item-page h3{margin-top: 2rem;}

.more{text-align: right; font-weight: bold; margin-top: 1rem;}
.bg-hl .more{text-align: center; margin: 1.5rem 0 0.5rem 0;}
.bg-hl .more a{color: #fff; background-color: #f58220; padding:0.5rem 1rem; border-radius: 5px;}
.bg-hl .more a:hover{transition: all ease 500ms; background-color: #333;}

.msg {border-radius: 2px; display: flex; margin: 30px 0 50px; padding: 0.5rem 1rem;}
.msg > div p{margin: 0; padding: 0;}
.msg .ico{font-size: 2rem; margin-right: 1rem;}
.msg-info {background-color: #cde9f7;}
.msg-info .ico-info::before{background-color: #3d7bac;}
.msg-success{background-color: #cdf7e4;}
.msg-success .ico-success{}
.msg-success .ico-success::before{font-family: "Awesome"; content: "\f00c"; color:#28d586;}

nav.anchors{}
nav.anchors ul {margin: 0 0 2rem; padding: 0;}
nav.anchors ul li {padding: 2px 2rem;}
nav.anchors ul li:nth-child(2n+1) {background-color: #f7f7f7;}
nav.anchors ul li a {font-size: 0.9rem; font-weight: bold; line-height: 1.5rem; position: relative;}
nav.anchors ul li a::before {content: ""; font-family: "Awesome"; left: -1rem; position: absolute; top: -2px; transition: transform 500ms ease 0s;}
nav.anchors ul li a:hover::before {transform: rotate(90deg); transition: transform 500ms ease 0s;}

.back-top {margin: 1rem 0 0; padding: 0; text-align: right;}
.back-top a{position: relative;}
.back-top a::before{content: ""; font-family: "Awesome"; left: -1rem; position: absolute; top: -2px; transition: transform 500ms ease 0s;}
.back-top a:hover::before {top: -10px; transition: top 500ms ease 0s;}


/* top menu */
#header{background-color: #fff; padding: 0.5rem 0;}
#header .wrap{display: flex;}

#header .wrap .logo{flex:1; display: flex;}
#header .wrap .logo span{flex:1; align-self: center; padding: 0 2rem; font-size: 1rem; font-style: italic;}
#header .wrap .logo span a{margin-left: 5px;}
#header .wrap .logo img{vertical-align: top;}

#header .wrap .mod-languages{align-self: center; margin-right: 2rem;}

#header .wrap a{color: #000; display: inline-block; font-size: 1.2rem; margin: 0 0 0 10px; position: relative; text-decoration: none; align-self: center;}
#header .wrap a:hover{color: #a20015; text-decoration: none;}
#header .wrap a::before{padding-right: 5px;}
#header .wrap a.ico-search{margin-right: 25px;}
#header #menu-mobile{display: none;}

#menu{z-index: 10;}
#menu {z-index: 10;}
#menu a:hover, #menu a.mm-next:hover {background-color: rgba(255, 255, 255, 0.1);}
#menu a.mm-next {background-color: rgba(0, 0, 0, 0.2);}
#menu-mobile #mm-0 a, #menu-mobile #mm-0 span, #menu-mobile li.mm-subtitle a {text-transform: none;}
#menu-mobile .mm-menu .mm-list > li::after {border-color: rgba(255, 255, 255, 0.15);}
#menu-mobile li:hover {background-color: #0e71a2;}
/*#menu-mobile .mm-list > li > a, #menu-mobile .mm-list > li > span {font-weight: bold;}*/
#menu-mobile .mm-list li.active a {background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0; border-left: 10px solid #0e71a2;}

#menu-mobile .item-342, #menu-mobile .item-343, #menu-mobile .item-346, #menu-mobile .item-281, #menu-mobile .item-327, #menu-mobile .item-324{background-color: #666;}
#menu-mobile .link-request{background-color: #2685c8;}

@media all and (max-width: 1050px){
#header .wrap .logo span{display: none;}
}

@media all and (max-width: 750px){
#header .wrap a{font-size: 0.9rem;}
#header .wrap .ico-search::before{font-size: 0.9rem;}
.logo img{width: 150px;}
}

@media all and (max-width: 500px){
.logo img{width: 100px;}
#header .wrap .ico-search{font-size: 0; margin-right: 0;}
}


/* diapo */
.diapo{max-height: 400px; overflow: hidden; background: #000;}
.hide{display: none;}
.bxslider{margin-left:0; padding-left: 0; margin: 0;}
.bxslider{transition-timing-function :ease-in;}
.bxslider li{background-color: #000; display: flex; overflow: hidden;}
.bxslider li .caption{position: absolute; left:60%; width:39%; top:0; background: rgba(0,0,0,0.6); flex:1; height: 100%; color: #fff; padding: 1rem;}
.bxslider li .caption h2{margin-bottom: 0; margin-top: 5rem;}
.bxslider li .caption h2 a{color: #fff;}
.bxslider li .caption h3{margin-top: 0.5rem; }
.bxslider li .caption2 h4{margin-bottom: 0;}
.bxslider li .caption2 p{margin: 0.3rem 0;}

.bxslider li .caption.bioconf{background: rgba(22,162,117,0.8);}
.bxslider li .caption.itmconf{background: rgba(16,120,161,0.8);}
.bxslider li .caption.matecconf{background: rgba(173,75,91,0.8);}
.bxslider li .caption.e3sconf{background: rgba(235,94,0,0.8);}
.bxslider li .caption.shsconf{background: rgba(106,64,23,0.8);}
.bxslider li .caption.epjconf{background: rgba(99,83,145,0.8);}


.diapo .bx-wrapper{margin: 0; border: 0;}
.diapo .bx-wrapper img{margin: 0 auto; width: 100%;}
.diapo .bx-wrapper .bx-pager, .diapo .bx-wrapper .bx-controls-auto{top: 0;}
.diapo .bx-wrapper .bx-caption{top:0; background:none; width: 100%; margin: 0; text-align: center;}
.diapo .bx-wrapper .bx-caption span{display: inline-block; padding:0.5em; font-weight: bold; font-size: 1.5rem; margin: 10% 20px 0 20px; background-color: rgba(0,0,0,0.8);}
.bx-controls{display: none;}
.diapo .bx-wrapper .bx-pager.bx-default-pager a{background-color: #fff; box-shadow: inset 0 0 1px rgba(0,0,0,0.5)}
.diapo .bx-wrapper .bx-pager.bx-default-pager a:hover, .diapo .bx-wrapper .bx-pager.bx-default-pager a.active{background-color: #aaa;}


@media all and (max-width: 1300px){
.bxslider li .caption h2{margin-top: 1rem;}	
}

@media all and (max-width: 1100px){
.bxslider li .caption{ bottom: 0; text-align: center;}
.bxslider li .caption >h3, .bxslider li .caption >h3+p{display: none;}
}

@media all and (max-width: 800px){
.bxslider li .caption{width: auto; }
.bxslider li .caption2 h4{font-size: 1rem;}
.bxslider li .caption2 p{display: none;}
}


@media all and (max-width: 720px){
.bxslider li .caption h2{font-size: 1.2rem;}
.bxslider li .caption2 h4{margin-top: 0; font-weight: normal;}
}

@media all and (max-width: 450px){
.bxslider li .caption{left: 50%;}
.bxslider li .caption h2{margin-top: 0; font-size: 1rem;}
.bxslider li .caption2 h4{display: none;}
}




#slogan{background: transparent url("../images/oa_bg.svg") repeat scroll 0 -1px / cover; text-align: center; padding: 2rem 1rem; color: #fff; text-shadow: 0 1px rgba(0, 0, 0, 0.5); font-size: 1.2rem;}
#slogan .wrap{display: flex; min-height: 170px;}
#slogan h2{margin: 0; align-self: center; text-align: center; justify-content: center; flex:1; line-height: 2rem;}


#counters{background-color: #f68212; padding: 1rem 0.5rem;}
#counters>div{ display: flex; max-width: 1200px; margin: 0 auto;}
#counters>div>div{flex: 1; text-align: center; color:#fff;}
#counters>div>div h2{display: inline-block; letter-spacing: 0.1em; margin: 0.5rem; font-size: 1.5rem;}
#counters>div>div p{margin: 0; color: #fff; font-size: 0.9rem;}
#counters>div>div p span{display: block;}


@media screen and (max-width: 600px){
#counters>div, #counters{flex-direction: column;}
#counters>div>div{margin-top: 1.5em;}
}




main{background-color: #fff; padding-bottom: 4rem;}
.hp main{padding-bottom: 0}
article.item-page header, article.component header, .blog header, #conference > header{background:transparent url("../images/oa_bg.svg") repeat scroll 0 -1px / cover;}
.blog .content{padding: 1em 0;}


article nav ul ul li a::after{}
article nav .parent >a{display: none;}
article.item-page{padding-bottom: 1em;}
header h1{color: #fff; font-size: 2em; line-height: 2.2rem; padding: 4rem 0; margin-top: 0; transition: all ease 500ms}
article h2, .component h2{color: #0c6794; line-height: 1.3;}
article .content ul{}

.flexme.why > .flexme{flex:1;}
#com_conference .flexme.why >div:nth-child(1){margin-right: 0.5rem;}
#com_conference .flexme.why >div:nth-child(2){margin-left: 0.5rem;}

@media screen and (max-width: 1000px){
#com_conference .flexme.why{flex-direction: column;}
#com_conference .flexme.why >div:nth-child(1){margin-right: 0;}
#com_conference .flexme.why >div:nth-child(2){margin-left: 0;}
}
@media screen and (max-width: 560px){
#com_conference .flexme.why, #com_conference .flexme.why .flexme{margin: 0;}
#com_conference .flexme.why .flexme{flex-direction: column;}
#com_conference .flexme.why .flexme article{margin: 2rem 0 0 0;}
}


.hp #wocboard{background-color: #eee}


.item-separator{border-bottom: dashed 1px #ccc; margin-bottom: 2em;}


.pagination { clear: both; text-align: center;}
.pagination ul {list-style: outside none none; margin: 0; padding: 0;}
.pagination ul li {display: inline-block; cursor:pointer;}
.pagination ul li a, .pagination ul li span, .pager.pagenav li a {background: #174f82 none repeat scroll 0 0; border-radius: 0.5em; color: #fff; display: inline-block; margin: 0.5em 0.25em; padding: 0.25em 1em;}
.pagination ul li a, .pager.pagenav li a {background: #174f82 none repeat scroll 0 0; color: #fff; text-decoration: none;}
.pagination ul li a:hover, .pager.pagenav li a:hover, .pagination ul li a.current {background: #f58220 none repeat scroll 0 0;}
.pagination ul li span {background: #eee none repeat scroll 0 0; color: #333;}
.pagination ul li span.current{font-weight: bold; cursor:default;}



.pager.pagenav {border-top: 1px solid #ccc; display: flex; justify-content: center; list-style: outside none none; margin: 25px auto 0; padding-top: 10px;}
.pager.pagenav li {}
.pager.pagenav li::before { display: none;}



.flexme-journals:first-of-type{margin-top: 2rem;}
.flexme-journals{margin-top: 0;}
.flexme-journals article{display: flex; flex-direction: column; margin:1rem;}
.flexme-journals article h3{}
.flexme-journals article h3 a{color: #fff; display:block; border-radius: 5px 5px 0 0; opacity: 0.85; padding:0.5em 1em; text-decoration: none; text-align: center; box}
.flexme-journals article h3 a:hover{text-decoration: none; opacity: 1;}
.flexme-journals article p{margin-top: 0; text-align: center; padding: 0 1rem;}
.flexme-journals article p+p{display: none;} /* virer si valider */
.flexme-journals article.bioconf h3 a{background-color: #009162;}
.flexme-journals article.e3sconf h3 a{background-color:#eb5e00;}
.flexme-journals article.epjconf h3 a{background-color:#635391;}
.flexme-journals article.itmconf h3 a{background-color:#1078a1;}
.flexme-journals article.matecconf h3 a{background-color:#ad4b5b;}
.flexme-journals article.shsconf h3 a{background-color:#6a4017;}

.flexme-journals article.bioconf{background-color: #d4ece4;}
.flexme-journals article.e3sconf{background-color: #fce4d4;}
.flexme-journals article.epjconf{background-color: #e4e2ec;}
.flexme-journals article.itmconf{background-color: #d6e8ef;}
.flexme-journals article.matecconf{background-color: #f1e0e3;}
.flexme-journals article.shsconf{background-color: #e6ded8;}


.flexme-journals article figure{margin: 0 1em 1.5em 0;}
.flexme-journals article h3{margin-top: 0; padding-top: 0;}


@media screen and (max-width: 800px){
.flexme-journals{flex-direction: column;}
.flexme-journals article{margin: 1rem 0;}
}



.flexme.illus{}
.flexme.illus >div{align-self: center;}

@media screen and (max-width: 800px){
	.flexme.illus{flex-direction: column;}
	.flexme.illus figure{text-align: center;}
}



/* faq */
section#faq{background:url(../images/faq_bg.jpg) center; padding:3rem 0 0 0; border-top: solid 2px #ddd}
section#faq h3{color: #4c5667}
section#faq .flexme{margin-top:0;}
section#faq .flexme > div{flex:1;}
section#faq .flexme > div:first-child{text-align: center;}
section#faq  img{vertical-align: bottom}


@media screen and (max-width: 700px){
	section#faq{padding-top: 1rem}
	section#faq .flexme{flex-direction: column-reverse; text-align: center;}
	section#faq .flexme > div:first-child{padding-top: 1rem}
}



/* publier */
.benefits h4{background-color: #f4f5f5; text-align: center; padding: 0.5rem;}

/* organisateurs */
.flexme.why{margin-top: 0.5rem;}
.flexme.why article .ico{display: block; text-align: center; margin: 0; color: #f58220; height: 25px;}
.flexme.why article h4{text-align: center; margin-bottom: 0}
#com_conferences .flexme.why article p{margin-top: 0; display: none;}
.flexme.why article a{color: #fff;}
.flexme.why article a:hover{opacity: 0.85;}

.flexme.options article .ico::before{margin: 0; color: #0c6794; margin-right: 0.5rem;}
.flexme.options article h3{}

.contacts h3{text-align: center;}
.contacts figure{text-align: center;}
.contacts figure img{border-radius: 5px; display: inline-block;  border: 1px solid #eee}
.contacts figure figcaption{text-align: center; margin-top: 0.5rem;}

.contacts .flexme{margin-top: 0; border-left: dotted 2px #ccc;}
.contacts .flexme figure{margin-top: 0;}

@media screen and (max-width: 720px){
	.contacts.flexme, .contacts .flexme{flex-direction: column;}
	.contacts h3{text-align: left;}
	.contacts .flexme{border:0;}
	.contacts .flexme figure+figure{margin-top:1rem;}
	.flexme.why article h4{margin-bottom: 1rem;}
}

#conference {background-color: #fff;}
#conference header h2{}

#conference #online-procs{background-color: #f4f5f5; border-top:solid 2px #ddd;}

#conference .ligne{}
#conference .ligne article{background: #fff; padding: 1rem 0.5rem; box-shadow: 2px 2px 0 #e9e9e9;}
#conference .ligne article h2{font-size: 1rem;}
#conference .ligne article h2 a{color: #333; text-decoration: none;}
#conference .ligne article h2 a:hover{color: #f68212;}
#conference .ligne article h3{font-size: 0.9rem; margin: 0.5rem 0; line-height: 1.3rem; font-weight: normal;}
#conference .ligne article figure{text-align: center; margin:0;}
#conference .ligne article figure >a{display: inline-block; width: 100px; height: 150px; border:solid 1px #ccc;}
#conference .ligne article figure img{width: 100px;}
#conference .ligne article figcaption a{text-decoration: none;}
#conference .ligne article figcaption p{margin: 0; color: #000; display: none;}
#conference .ligne article figcaption span{display: none;}

#conference .ligne article.btn{box-shadow: none; background: transparent; align-self: center; padding: 0;}




@media all and (max-width: 900px){
#conference .ligne{flex-direction: column;}
#conference .ligne article, #conference .ligne article:first-child,#conference .ligne article:last-child{margin: 0.5rem 0;}
#conference .ligne article figure{display: flex; margin: 0 0 0 2rem;}
#conference .ligne article figure >a{width: auto; height:auto;}
#conference .ligne article figure figcaption{text-align: left; margin-left:2rem;}
#conference .ligne article figure img{width: 70px;}
}

ul.forth.simple li{background: transparent;}
ul.forth li h4{font-weight: normal;}
ul.forth li a{font-weight: bold;}

.blog.forth{}
.blog.forth .item-separator{border-bottom: solid 1px #ccc; margin-bottom: 1em;}

#conference #forthcoming{background: url(../images/bg_forth.jpg) top center no-repeat;}
#conference #forthcoming ul.simple{margin-bottom: 0}
#conference #forthcoming ul li{padding: 0.75rem 1rem; border-bottom: solid 1px #d4d4d4; background-color: transparent;  box-shadow: 0 1px 0 #fff;}
#conference #forthcoming ul li h4{margin: 0;}
#conference #forthcoming ul li p{}
#conference #forthcoming ul li a{font-weight: bold;}

.content ul.forth li h4{margin: 0;}
.content ul.forth li p{font-size:0.9rem; margin: 0;}


body#accueil #publications-services{padding:2em 0;}

#publications-services{padding-bottom: 2rem; padding-top: 0;}
#publications-services header{}
#publications-services nav{}
#publications-services nav ul{list-style: none; display: flex;}
#publications-services nav ul li{text-align: center; padding: 0; flex:1;}
#publications-services nav ul li:first-child{padding-left: 0;}
#publications-services nav ul li:last-child{padding-right: 0;}
#publications-services nav ul li a{text-decoration: none; display: flex; flex-direction: row; text-align: center; color: #4c5667;}
#publications-services nav ul li a div{flex:0.5;}
#publications-services nav ul li a span.ico{border:solid 2px #f68212; width: 75px; height: 75px; border-radius: 50px; display: inline-block; margin: auto; margin-bottom: 0.5em; box-shadow: 0 0 35px rgba(255,255,255,0.2); transform: scale(0.9); float: right;}
#publications-services nav ul li.revue-oa a span.ico{background: url(../images/logo_oa.svg) no-repeat scroll center center / 80%;}
#publications-services nav ul li.collections a span.ico{background: url(../images/logo_collections.svg)  no-repeat scroll center center / 60%;}
#publications-services nav ul li.search a span.ico{background: url(../images/logo_search.svg)  no-repeat scroll center center / 60%;}
#publications-services nav ul li.publish a span.ico{background: url(../images/logo_plus.svg)  no-repeat scroll center center / 60%;}
#publications-services nav ul li.news a span.ico{background: url(../images/logo_news.svg)  no-repeat scroll center center / 60%;}
#publications-services nav ul li a:hover{color: #f68212;}
#publications-services nav ul li a:hover span.ico{filter: none; transform: scale(1.1); transition: transform ease 500ms}
#publications-services nav ul li h3{margin: 0; font-weight: 700; align-self: center; flex:1; text-align: left; margin-left: 1rem;}
#publications-services nav ul li p{margin: 0.3rem 0 0 0; display: none;}

@media screen and (max-width: 800px){
#publications-services nav ul{flex-direction: column;}
#publications-services nav ul li{border-top:solid 1px #ccc;}
#publications-services nav ul li a div{flex:0;}
#publications-services nav ul li a span.ico{width: 50px; height: 50px;}
#publications-services nav ul li {padding:0.5rem 0;}
}




#publish{background-color: #fff; color: #000; padding: 3rem 0 1rem 0;}
#publish header{color: #fff;  text-align: center;}
#publish header h2{color: #4c5667; font-size: 2rem; line-height: 2.3rem; margin-top: 0}
#publish ul{list-style: none;}
#publish ul.list{float: right; margin: -2rem 2rem 0 3rem; padding: 1rem; background: #fff; color:#333; box-shadow: 3px 5px rgba(0,0,0,0.5); border-radius: 5px}
#publish ul.list li{padding: 0.5rem 0; border-bottom: 1px solid #ccc;}
#publish ul.list li::before{content: "\f046"; display: inline-block; color: #f68212; margin-right: 0.5rem; font: 1.5rem/1.5rem Awesome }
#publish p{text-align: justify;}

#publish .why{margin-top: 3rem;}
#publish .why p{text-align: left; font-size: 0.9rem}



@media screen and (max-width: 600px){
#publish ul.list{ margin-top:0}
#publish div a{margin: 1em; display: inline-block;}
#publish p{text-align: left;}
}

@media screen and (max-width: 500px){
#publish ul.list{float: none; transform: none;}
}

#calendar{background:transparent url("../images/calendar_bg.jpg") repeat scroll 0 0 / cover ; padding: 0.5em 0.5em 1em 0.5em;}
#calendar >div{ margin: 0 auto; max-width: 1200px}
#calendar header h2{color: #0c6794}
#calendar ul{display: flex; list-style: none;}
#calendar ul li{}
#calendar ul li span.ico{}
#calendar ul li a{color: #0c6794; text-transform: uppercase; font-weight: 700; text-decoration: none; display: flex; flex-direction: column; text-align: center; margin-top:-2em;}
#calendar ul li a span.ico{background-color: #0c6794; width: 53px; height: 53px; border-radius: 50px; display: inline-block; margin: auto; margin-bottom: 0.5em;}
#calendar ul li a span.ico::before{font-family: "Awesome"; font-size: 32px; line-height: 33px; display: inline-block; margin-top:9px; color:#fff;}
#calendar ul ul li{display: inline-block;}
#calendar ul ul li:nth-child(1) span.ico::before{content: '\f133';}
#calendar ul ul li:nth-child(2) span.ico::before{content: '\f271'; margin-left: 3px}
#calendar ul li a:hover, #calendar ul li a:hover span.ico::before{color: #f68212}


@media screen and (max-width: 600px){
#calendar ul{flex-direction: column;}
#calendar ul ul{flex-direction: row; text-align: center;}
#calendar ul ul li{width: 100%; margin-top: 1em}
#calendar ul li a{margin-top: 0}
}

@media screen and (max-width: 380px){
#calendar ul li a{display: flex; flex-direction: row; background-color: #0c6794; color: #fff; border-radius: 5px}
#calendar ul li a span{width: 100%}
#calendar ul li a span.ico{width: 32px; height: 32px; margin-left: 0.5em}
#calendar ul li a span.ico::before{font-size: 16px}
#calendar ul li a span:nth-child(2){padding-top: 10px}
#calendar ul ul{flex-direction: column;}
}


#sponsors{background-color: #fff; padding: 1em 0.5em}
#sponsors header{font-size: 0.5em; color: #333; text-align: center; text-transform: uppercase; letter-spacing: 1em; font-weight: normal; padding-bottom: 0.5em}
#sponsors .banners{display: flex; max-width: 1200px; margin: 0 auto}
#sponsors .banners div{width: 100%; text-align: center;}
#sponsors a{display: inline-block; width: 300px; height: 90px; }
#sponsors .fake a{display: inline-block; width: 300px; height: 90px;}
#sponsors .empty a{border:dashed 2px #f68212; line-height: 90px; text-decoration: none; color:#0c6794;}
#sponsors .empty a:hover{border:solid 2px #f68212; text-decoration: underline;}

@media screen and (max-width: 750px){
#sponsors .banners{flex-direction: column;}
#sponsors a{margin-bottom: 1em}
}
@media screen and (max-width: 380px){
#sponsors a img, #sponsors .empty a{width: 250px}
}

#testimonials{background-color: #fff;}


#testimonials header{color: #333;}
#testimonials .mfp-table-row{display: flex;}
#testimonials .mfp-table-cell{width: 100%}
#testimonials .mfp-table-cell:nth-child(1){padding-right: 1em}
#testimonials .mfp-table-cell:nth-child(2){padding-left: 1em}
#testimonials .mfp-table-cell blockquote+p{}
#testimonials .mfp-table-cell blockquote+p::before{content: "\f007"; display: inline-block; font-family: "Awesome"; padding: 0.25em 0.6em; border-radius: 30px; background-color: #eee; margin-right: 0.5em}
#testimonials .mfp-table-cell-inner >br, .mfp-table-cell-inner blockquote + p +p{display: none;}
.pagination .counter{display: none;}

.mfp-table-cell blockquote {background-color: #eee; border: 1px solid #e0e0e0; border-radius: 5px;box-shadow: 0 1px 0 #fff inset; font-style: italic; margin: 5px 0; padding: 10px 15px 10px 25px; position: relative;}
.mfp-table-cell blockquote::before {content: open-quote;display: block; font: bold 40px/40px Arial; left: 2px; position: absolute; top: 0; color:#333;}
.mfp-table-cell blockquote p::after {content: close-quote; display: inline-block;}
.mfp-table-cell blockquote p {display: inline-block; margin: 0; padding: 0;}

@media screen and (max-width: 750px){
#testimonials .mfp-table-row{flex-direction: column;}
#testimonials .mfp-table-cell:nth-child(1), #testimonials .mfp-table-cell:nth-child(2){padding:0}
}


#information{background-color: #38b590;}
#information header{color: #fff;}
#information header h2{margin: 0}
#information nav{display: flex; max-width: 800px; margin:0 auto;}
#information ul{list-style: none; display: flex; width: 100%; flex-direction: row;}
#information ul li{width: 100%}
#information ul li a{color: #fff; text-transform: uppercase; font-weight: 700; text-decoration: none; display: flex; flex-direction: column; text-align: center; }
#information ul li a span.ico{background-color: #333; width: 53px; height: 53px; border-radius: 50px; display: inline-block; margin: auto; margin-bottom: 0.5em;}
#information ul li a span.ico::before{font-family: "Awesome"; font-size: 32px; line-height: 33px; display: inline-block; margin-top:9px; color:#fff;}
#information ul li a span.ico.ico-orga::before{content: '\f14e'}
#information ul li a span.ico.ico-auteur::before{content: '\f02d'}
#information ul li a span.ico.ico-savant::before{content: '\f085'}
#information ul li a span.ico.ico-annonceur::before{content: '\f0a1'}
#information ul li a:hover{color: #333}
#information ul li a:hover span.ico::before{color: #f68212}

@media screen and (max-width: 380px){
#information ul{flex-direction: column;}
#information ul li{margin: 0.5em 0}
#information ul li a{display: flex; flex-direction: row; background-color: #333; color: #fff; border-radius: 5px}
#information ul li a span{width: 100%}
#information ul li a span.ico{width: 32px; height: 32px; margin-left: 0.5em}
#information ul li a span.ico::before{font-size: 16px; line-height: 22px;}
#information ul li a span:nth-child(2){padding-top: 10px}
#information ul li a:hover{color:#f68212}
}


#congress>footer .wrap{display: flex; padding: 2rem 1rem;}
#congress>footer .wrap > div, #congress>footer .wrap > ul{flex:1;}
#congress>footer .wrap a{color: #fff;}
#congress>footer .back-top a{color: #fff; font-size: 0.8rem;}
#congress>footer .back-top a::before{font-size: 2rem; left: -2rem; top:-0.25rem;}
#congress>footer .back-top a:hover::before{top: -0.5rem;}

#congress>footer ul{font-size: 0.9rem;}
#congress>footer ul li{padding: 0.25rem 0;}
#congress>footer ul .separator{font-size: 1rem; color: #fff; font-weight: 600; margin-bottom: 0.5rem; display: block;}

@media screen and (max-width: 600px){
#congress>footer .wrap{flex-direction: column; text-align: center;}
#congress>footer ul .separator{margin-top: 1rem;}
}

/*social*/
.custom.social{text-align: center;}
.custom.social h4{color: #fff; margin-bottom: 0;}
ul.ico-social{display: flex; justify-content: center; margin:0.5rem auto 1rem auto;}
ul.ico-social li{}
ul.ico-social li a::before{font-family: "Awesome"; display: inline-block; color: #fff; font-size: 1.5rem; padding:7px 9px; border-radius: 30px; margin: 0 0 0 1rem;}
ul.ico-social li a:hover::before{opacity: 0.85;}
ul.ico-social li a.twitter::before{content: "\f099"; background-color: #0db2f2;}
ul.ico-social li a.linkedin::before{content: "\f0e1";  background-color: #2489d9;}
ul.ico-social li a.google::before{content: "\f1a0";  background-color: #c83e24;}
ul.ico-social li a.rss::before{content: "\f09e";  background-color: #e76c04;}
ul.ico-social li a.wechat::before{content: "\f1d7";  background-color: #00c80f; font-size: 1.2rem;}


/*form*/

#aiContactSafeForm{border:solid 2px #ccc; padding: 1rem 2rem; width: 60%; margin: 4rem auto 2rem;}

#aiContactSafeForm .s{font-size: 0.9rem;}
#aiContactSafeForm .sep{border-bottom: dashed 2px #ccc; margin: 2rem 0 0 0;}


.countdown_div{display: none;}

@media all and  (max-width: 850px){
	#aiContactSafeForm{width: 100%; box-sizing: border-box; border: 0; padding:0;}
}

.aiContactSafe_row{display: flex; flex-direction: column; margin:2rem 0;}
.aiContactSafe_label{} 


#aiContactSafeForm input[type="text"], #aiContactSafeForm select, #aiContactSafeForm textarea{border:solid 1px #ccc; border-radius: 5px; width: 100%; padding:0.5rem; font-size: 100%; margin-top: 0.5rem; box-sizing: border-box;}
#aiContactSafeForm input:focus, #aiContactSafeForm textarea:focus{border: solid 1px #0c6794;}
#aiContactSafeForm #captcha-code{max-width: 300px;}

.aiContactSafe_contact_form_field_right{display: flex;}
.aics_conf_previous_exists, .aics_conf_previous_edp, .aics_conf_howmany{padding:0.5rem 1rem;}

#div_captcha{border:solid 1px #ccc; padding:1rem; text-align: center;}
#div_captcha_img_200,#div_captcha_img_203{margin: 0 auto;}
.required_field{color: red;}

#aiContactSafeBtns{text-align: center;}
#aiContactSafeSendButton{background-color: #0c6794; border-radius: 5px; color:#fff; padding:0.5rem 2rem; border:0; cursor: pointer; transition: background-color ease 500ms;}
#aiContactSafeSendButton:hover{background-color: #f68212;}

.system-message-container{margin-bottom: 2rem;}
dt.error{color:red; font-weight: bold;}
dd.error.message{margin:1rem 0 0 0;}


#aiContactSafe_row_aics_conf_website_msg.aiContactSafe_row{margin:-1rem 0 2rem 0;}
#aiContactSafe_row_aics_conf_website_msg.aiContactSafe_row p{margin:0;}


#aiContactSafe_row_aics_conf_overseas, #aiContactSafe_row_aics_conf_domestic{float: left; width: 45%; margin-top: 0;}
#aiContactSafe_row_aics_conf_overseas{margin-left: 10%;}
#aiContactSafe_row_aics_conf_number_page{clear: both;}

#aiContactSafe_row_aics_conf_reviewing_note{margin-bottom: 0; margin-top: -2rem;}
#aiContactSafe_row_aics_conf_confirm{display: flex; flex-direction: row; margin-top: -1rem;}
#aiContactSafe_row_aics_conf_confirm #aiContactSafe_label_aics_conf_confirm p{margin:0 0 0 1rem;}


.notice, dt.message, #aiContactSafe_row_aics_copiemail, #aiContactSafe_row_aics_copiemail_fr{display: none;}


/* fix IE>9 */
main{display: block;}



.journal-select{margin-bottom: 3rem}
#main .journal-select ul{list-style: none; margin:1rem 0; padding:0; background: #eee; text-align: center;}
#main .journal-select ul li{display: inline-block; margin:0 0.5rem; transition: all ease 500ms}
#main .journal-select ul li.active a{transform: scale(1.15); opacity: 1}
#main .journal-select ul li a{display: inline-block; padding:0.2rem 1rem; border-radius: 5px; background: #2685c8; text-decoration: none; color:#fff; opacity: 0.6}
#main .journal-select ul li a:hover{opacity: 0.85}


@media all and  (max-width: 800px){
	#main .journal-select ul{padding: 0.5rem}
	#main .journal-select ul li{margin:0.5rem;}
}

.testi{background: #f7f7f7; padding:0.5rem 1rem; margin-bottom: 2rem; border: solid 1px #ddd; border-radius: 5px; box-shadow: inset 0 1px 0 #fff;}
.testi-bioconf blockquote::after, #main .journal-select ul li.bioconf a{background: #009162;}
.testi-e3sconf blockquote::after, #main .journal-select ul li.e3sconf a{background: #eb5e00;}
.testi-epjconf blockquote::after, #main .journal-select ul li.epjconf a{background: #635391;}
.testi-itmconf blockquote::after, #main .journal-select ul li.itmconf a{background: #1078a1;}
.testi-matecconf blockquote::after, #main .journal-select ul li.matecconf a{background: #ad4b5b;}
.testi-shsconf blockquote::after, #main .journal-select ul li.shsconf a{background: #6a4017;}

blockquote {margin:0; padding: 0rem 0 1rem 2rem; position: relative;}
blockquote::before {content: open-quote; display: block;  position: absolute; top: -0.1rem; left: -0.1rem; z-index: 5; color:#fff; font: 50px/60px Arial;}
blockquote::after {position: absolute; top: 0; left: -0.5rem; display: block; width: 30px; height: 30px; content: ""; z-index: 4; border-radius: 5rem}
blockquote p:last-child::after {content: close-quote; display: inline-block;}
blockquote .flexme p:last-child::after {content: ""; display: none;}
blockquote p {display: inline-block; margin: 0; padding: 0;}
blockquote + p{font-size: 90%; text-align: right; margin-top: 0}
blockquote figure{margin:0 1rem 1rem 0;}

@media all and  (max-width: 700px){
	blockquote .flexme{flex-direction: column;}
	blockquote .flexme figure{text-align: center;}
}


#caseStudies{display: flex; margin-bottom: 3rem}
#caseStudies article{flex:1; border:solid 1px #dedede; padding:0.25rem; display: flex;}

#caseStudies article:nth-child(2){margin: 0 0.5rem}
#caseStudies article figure{margin: 0.5rem 1rem; text-align: center;}
#caseStudies article figure a img{border:solid 1px #2685c8;}
#caseStudies article figure a img:hover{border:solid 1px #f68212; transition: all ease 500ms;}

#caseStudies article h2{font-size: 1rem; color:#333; font-weight: normal; flex:1;}


@media all and  (max-width: 1100px){
	#caseStudies article{flex-direction: column; text-align: center;}
}

@media all and  (max-width: 800px){
	#caseStudies{flex-direction: column;}
	#caseStudies article{margin-bottom: 1rem}	
	#caseStudies article:nth-child(2){margin: 0}
	#caseStudies article figure{margin: 0; padding: 0}	
}

p.loader:hover{cursor: pointer; transition: all ease 500ms; color: #f68212;}


.wocboard{}
.flexme.wocboard > div{flex:1;}
.wocboard .member{display: flex; align-items: top; margin-bottom: 2rem; margin-right:2rem;}
.mod_wocboard.wocboard .member-photo span{display: block; width: 80px; height: 80px; border-radius: 10px; background: #555; margin-right: 1rem; display: none;}
.wocboard .member-info{flex:1;}

@media all and  (max-width: 800px){
	.flexme.wocboard{flex-direction: column;}
}

.article-info{margin: 5px 0; padding: 0;}
.article-info .article-info-term{display: none;}
.article-info .published{margin: 0; font-size: 0.9rem; color: #666;}
.item-page figure, .blog figure{margin: 0 2rem 1rem 0; display: inline-block; float: left;}
.item-page figure figcaption{color: #444; font-size: 0.9rem; margin: 5px 0 0; line-height: 130%;}