/*ncrespo1.css 161024.1410, WD 161026.1035*/

/* Font for icons */
@font-face {
    font-family: epfl-icons;
    src: url(http://static.epfl.ch/latest/fonts/epfl-icons.eot);
    src: url(http://static.epfl.ch/latest/fonts/epfl-icons.eot?#iefix) format("embedded-opentype"), url(http://static.epfl.ch/latest/fonts/epfl-icons.woff) format("woff"), url(http://static.epfl.ch/latest/fonts/epfl-icons.ttf) format("truetype"), url(http://static.epfl.ch/latest/fonts/epfl-icons.svg#epfl-icons) format("svg");
    font-weight: 400;
    font-style: normal
}

/* code pour les vidÃos youtube*/
/* Video youtube */
.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}
.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    max-height:372px;
}

/* Code pour le mode responsif */
@media screen and (max-width:800px){

    .video-container iframe, .video-container object, .video-container embed {
    	max-height:none!important;
    }

    /* Prevent wierd behaviour with ios orientation */
    html {
	-webkit-text-size-adjust: 100%;
    }

    /*-------------------------------------------------------------------------
    ** Général
    **-----------------------------------------------------------------------*/

    /* Fait que les boites de droite prènent toute la largeur qui leur est disponible */
    .box {
        width: auto!important;
    }

    /* Les grosses boites occupent bien toute la largeur de l'écran */
    #header2013, 
    #main-content, 
    #footer {
        width: 100%!important;
    }

    .content,
    #content,
    .right-col {
        width: 100%!important;
        height: 100%!important;
    }

    /* Fait en sorte que les images qui sont sensée faire la largeur de la 
    /* boite de gauche prennent la largeur de l'écran en mode responsif */
    /* IMPORTANT donner une classe en JS */
    img[width="652"],
    img[width="651"],
    img[width="655"] {
        width:100%;
    }

    /* Liens  */
    a:not(.selected-field) {
        background-position: bottom!important;  
    }
    
    .content p {
        margin-right:0;
    }

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

    /*-------------------------------------------------------------------------
    ** Petit burger
    **-----------------------------------------------------------------------*/

    .top-toggle {
        float: right;
        cursor: pointer;
        margin-top: 8px;
        line-height: 1;
        font-weight: 400;
    }

    .top-toggle::before {
        font-family: epfl-icons;
        font-style: normal;
        speak: none;
        width: 1em;
        line-height: 1em;
        font-size: 2.5em;
    }

    .top-toggle.opened {
        background-color: black; 
        color: white;
    }

    .top-toggle#burger::before {
        content: "\f05f";
    }

    .top-toggle#search {
        margin-left: 6px;
    }

    .top-toggle#search::before {
        content: "\f057";
    }

    /*-------------------------------------------------------------------------
    ** Header EPFL
    **-----------------------------------------------------------------------*/

    #header2013 {
        padding: 0px !important;
    }

    /* Navigation */
    #header2013 #nav-menus {
        display: none;
        width:100%;
        border-bottom: rgb(221,221,221) 1px solid;
        padding-bottom: 1px;
        margin-bottom: 5px; 
    }

    #header2013 ul#main-menus li.menu {
        width: 100%;
        border-top: rgb(221,221,221) 1px solid;
        padding-bottom: 0;
    }

    #header2013 ul#main-menus li.menu a {
        border-left: none;
        font-size: 16px;
        text-transform: none;
    }

    #header2013 ul#main-menus li.menu a span,
    #header2013 ul#main-menus li.menu a acronym {
        display: inline;
    }

    #header2013 ul#main-menus li.menu a span::after,
    #header2013 ul#main-menus li.menu a acronym::after {
        content: " ";
    }

    #header2013 #nav-menus ul#main-menus li.menu .navigation-panel {
        width: 90vw;
        width: calc(100vw - 32px);
        width: -webkit-calc(100vw - 32px);
        width: -moz-calc(100vw - 32px);
        position: absolute;
    }

    #header2013 #nav-menus ul#main-menus li.menu .navigation-panel{
        left: 0;
        top: 110px;
    }

    #header2013 #nav-menus ul#main-menus li.menu .navigation-panel#school-panel{
        top: 73px;
    }

    #header2013 #nav-menus ul#main-menus li.menu .navigation-panel#brief-panel{
        top: 37px;
    }

    #header2013 #nav-menus ul#main-menus li.menu .navigation-panel.hidden{
        display: none;
    }

    #header2013 #nav-menus ul#main-menus li.menu .navigation-panel .group-2-cols {
        width: 100%;
    }

    #header2013 #nav-search {
        display: none;
        width: 100%;
    }

    #header2013 #nav-search #search-box {
        width: 100%;
    }

    #header2013 #nav-search #search-box form#header_searchform input.search {
        width: 46.5%;
        width: calc(100% - 145px - 16px);
        width: -webkit-calc(100% - 145px - 16px);
        width: -moz-calc(100% - 145px - 16px);
        max-width: 162px;
        float: right;
        position: absolute !important;
        right: 145px;
    }

    #header2013 #nav-search #search-box form#header_searchform .search-filter {
        float: right !important;
        position: absolute!important;
        right: 25px;
    }

    #header2013 #nav-search #search-box form#header_searchform button.search-button {
        float: right!important;
        position: absolute;
        right: 0;
    }

    /*-------------------------------------------------------------------------
    ** Remove acronyme
    **-----------------------------------------------------------------------*/

    #main-content .header h1 acronym {
        display: none;
    }

    /*-------------------------------------------------------------------------
    ** Breadcrumb et language
    **-----------------------------------------------------------------------*/

    #main-content .header {
        position: relative;
    }

    #main-content .header h1 {
        margin-bottom: 5px;
        padding-bottom: 0;
        padding-top: 22px;
        font-size: 19.6px;
        line-height: initial;
    }

    #main-content .header #languages:not(.rd8020-lang) {
        visibility: hidden;
    }

    #main-content .header #languages {
        position: absolute;
        width: 100%;
        margin-top: 0px!important; 
        top: 0px;
        line-height: initial;
        right: 0;
        text-align: right;
    }

    #main-content .header #languages li {
        display: inline-block;
        font-size: 13px;
        padding-left: 30px;
        padding-right: 10px;
    }

    #main-content .header #languages li#fr span.resp-icon-lang::before {
        content:'FR';
    }

    #main-content .header #languages li#en span.resp-icon-lang::before  {
        content:'EN';
    }

    #main-content .header #languages li span.lang {
        display: none;
    }

    #main-content .header #breadcrumbs {
        display: none;
    }

    /*-------------------------------------------------------------------------
    ** Layout standard navigation rouge
    **-----------------------------------------------------------------------*/

    #main-content #main-navigation {
        width: auto;
    }


    /* retrait du noir */
    #main-navigation .dropdown.current {
	background-color:#ae0010;
    }

    #main-content #main-navigation .dropdown:hover {
        margin-bottom: 0px;
	background-color: #ae0010;
    }

    #main-content #main-navigation ul.topnav {
        display: none;
        width: 100% !important;
    }

    #main-content #main-navigation ul.topnav li {
        width:100% !important;
        padding: 0 0 0 0 !important;
        height: auto !important;
        min-height: 30px;
        
        border: none; 
        border-top: 1px solid white;
    }
    
    #main-content #main-navigation ul.topnav li a,
    #main-content #main-navigation #goTo {
        padding-left: 8px;
        padding-bottom: 4px;
        padding-top: 8px;
        display: block;
    }
    
    #main-navigation li.nc-respond-forbid-click ul.menu > li > a {
        color: black !important;
        background-color: white;
    }
    
    #main-navigation ul.topnav li:not(.nc-respond-forbid-click.rd-menu-open) a {
        padding-left: 22px!important;
    } 

    #main-content #main-navigation #goTo::before {
        font-family: epfl-icons;
        content: "\f015";
    }
    
    #main-navigation ul.topnav li.nc-respond-forbid-click > a::before {
        font-family: epfl-icons;
        content: "\f015";
	float:right;
	padding-right:10px;
    }
    
    #main-navigation ul.topnav li.nc-respond-forbid-click.rd-menu-open > a::before {
        font-family: epfl-icons;
        content: "\f011";
	float:left;
	padding-right:0px;
    }

    #main-content #main-navigation #goTo.open::before {
        content: "\f011";
    }

    #main-content #main-navigation #goTo {
        cursor: pointer;
    }

    #main-content #main-navigation ul.topnav li.nc-respond-forbid-click > a:first-child {
        pointer-events: none !important;
    }
 
    #main-content #main-navigation ul.topnav li.homeLink {
        display: none;
    }

    #main-content #main-navigation ul.topnav li.homeLink a {
        width: auto!important;
    }

    #main-content #main-navigation ul.topnav li.dropdown ul.menu {
        position: relative!important;
        /*margin-top: 8px*/;
        top: 0!important;
        left: 0!important;
        width: 100%;
        border: none;
    }

    #main-content #main-navigation ul.topnav li.dropdown ul.menu.hidden {
        display: none;
    }

    /*-------------------------------------------------------------------------
    ** 2e menu rouge (tree) 
    **-----------------------------------------------------------------------*/

    .tree a,
    .tree ul a {
        width: 100%;
    }

    /*-------------------------------------------------------------------------
    ** Portail image 3 colonnes 
    **-----------------------------------------------------------------------*/

    /* Permet un affichage correct des link portail pour pas que le backgroud se repete*/
    #main-content .linksarea .portalLink {
        width: 100%;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #main-content .linksarea .portalLink .innerWrapper {
        width: auto;
        height: 56vw;
        height: calc((100vw -16px) * 186 / 326);
        height: -webkit-calc((100vw - 16px) * 186 / 326);
        height: -moz-calc((100vw - 16px) * 186 / 326);
    }

    #main-content .linksarea .portalLink .innerWrapper .innerSpacer h3 {
        font-size: 4vw !important;
    }

    #main-content .linksarea .portalLink .innerWrapper .innerSpacer .desc p {
        font-size: 4vw !important;
        line-height: 1.4em !important;
    }

    /* font for links in portal bottom links */
    .portalBottomLinks .linksList h3 {
	font-size: 20px;
    }

    /*-------------------------------------------------------------------------
    ** Layout portail liens en fin de page
    **-----------------------------------------------------------------------*/

    .portalBottomLinks div.linksList:not(.lastInRow) {
	margin-bottom: 20px;
    }

    /*-------------------------------------------------------------------------
    ** Layout portail liens en fin de page
    **-----------------------------------------------------------------------*/

    #main-content .linksarea .portalBottomLinks .linksList {
        float: none;
        width: auto;
    }
    
    /*-------------------------------------------------------------------------
    ** Layout portail reseaux sociaux
    **-----------------------------------------------------------------------*/

    /* Affichage responsif de la barre de réseaux sociaux */
    #main-content .socialBar .socialBarItem {
        box-sizing: border-box;
        border: 1px solid white;
        margin: 0px;
        width: 50% !important;
    }

    /*-------------------------------------------------------------------------
    ** NEWS
    **-----------------------------------------------------------------------*/

    .actuBox .fullbox {
        width: auto !important;
    }

    .actuBox ul.news-list, 
    .actuBox ul.news-list li {
        width: auto !important;
        height: auto;
    }

    .actuBox ul.news-list > li a img.news-img, 
    .actuBox ul.news-list > li a div.news-video-overlay {
        width: 49% !important;
        height: 100% !important;
    }

    .actuBox ul.news-list > li .news-text {
        width: 49%;
        height: auto;
        margin-left: auto;
    }

    .actuBox ul.news-list > li .news-text h2 {
        line-height: 1.0em !important;
        font-size: 3.8vw !important;
    }

    .actuBox ul.news-list > li .news-text span.date {
        font-size: 2.5vw !important;
    }

    .actuBox ul.news-list > li .news-text .heading {
        line-height: 1.0em !important;
        font-size: 2.9vw !important;
    }

    /*-------------------------------------------------------------------------
    ** MEMENTOBOX TODO : A mettre en forme
    **-----------------------------------------------------------------------*/

    .mementoBox ul.memento > li .summary {
        width: auto !important;
        height: auto;
        margin-bottom: 10px;
    }

    .mementoBox ul.memento > li .right {
        margin-top: 10px !important;
    }

    .mementoBox ul.memento > li .right, .mementoBox .right .people {
        width: auto !important;
        height: auto !important;
    }

    .mementoBox ul.memento > li a img {
        width: auto;
        height: auto;
    }

}