/*
 * 3 types of display:
 * large screen 1024+ - full stuff
 * medium screen 768+ - no random image
 * mobile <768 - mobile design
 */
@media screen and (min-width: 1024px) {
    .minimize_lt1024 {display: block; }
}

@media screen and (min-width: 768px) {
    .menu { display: block; }
    #js-open-menu_commerciaux .menu { display: none; } 
    .open-leftmenu { display: none; }
    .open-mainmenu { display: none; }
    .open-othermenu { display: none; }
    .minimize_lt768 {display: block; }
}

@media screen and (max-width: 1023px) {
    .minimize_lt1024 { display: none; }
    #header-bcd {
        width: 100%;
        margin: 0px 0px 0px 0px;
    }
    #header-b {
        margin-left: 0px;
        width: 33.33%;
    }
    #header-c {
        width: 33.33%;
    }
    #header-d {
        width: 33.33%;
    }
    #topslmod2_inside {
        margin-left: 2%;
        margin-right: 2%;
    }
}

@media screen and (max-width: 767px) {
	#wrapper {
		margin: 0px 0px 0px 0px;
		width: 100%;
	}
	#innerwrapper {
		margin: 0px 0px 0px 0px;
		width: 100%;
	}
	#maincolumn1 {
		float: left;
		width: 100%;
	}
	#maincolumn2 {
		clear:  both;
		float: left;
		width: 100%;
	}
    #search {
        width: 60%;
    }
    #topsl {
        padding-top: 0px;
        margin-left: 0%;
    }
    #topsl img {
        max-width: 426px;
    }
    /** HOME PAGE NEWS BOX **/
    #topsl-news {
        background-color: #f5f5f5;
        width: 100%;
        margin-bottom: 8px;
        display: block;
        xxposition: relative;
    }
    #topslnews_inside {
        display: block;
        margin-top: 2%;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
    }

    #topsl-news div.newsbox_col1 {
        position: relative;
        float: left;
        width: 100%;
        z-index: 2;
    }
    #topsl-news div.newsbox_col2 {
        float: left;
        width: 100%;
        margin: 0;
        z-index: 1;
    }
    #topsl-news div.newsbox_title {
        color: #FEBE42;
        background: rgba(45, 45, 45, 0.7);
        text-align: center;
    }
    #topsl-news div.newsbox_subtitle {
        display: none;
    }
    #topsl-news div.newsbox_more a {
        color: #FEBE42;
        float: right;
        background: rgba(45, 45, 45, 0.7);
    }
    #topsl-news .newsbox_img {
        position: relative;
        float: left;
        width: 100%;
        margin-top: -68px;
        z-index: 1;
    }
    #topsl-news .newsbox_img img {
        max-width: 767px;
        width: 100%;
    }

    #topslmod1 {
		clear:  both;
		float: left;
		width: 94%;
        max-width: 747px;
        margin-top: 25px;
        margin-left: 3%;
        margin-right: 3%;
        box-shadow: -2px 2px 8px 0px;
    }
    #topslmod1_inside {
        max-width: 747px;
    }
    #topslmod2 {
		clear:  both;
		float: left;
		width: 94%;
        max-width: 747px;
        margin-top: 25px;
        margin-left: 3%;
        margin-right: 3%;
        box-shadow: -2px 2px 8px 0px;
    }
    #topslmod2_inside {
        max-width: 747px;
        margin: 0;
    }
    #topslmod3 {
		clear:  both;
		float: left;
		width: 94%;
        max-width: 747px;
        margin-top: 25px;
        margin-left: 3%;
        margin-right: 3%;
        box-shadow: -2px 2px 8px 0px;
    }
    #topslmod3_inside {
        max-width: 747px;
    }

    /*Hide big image in 3 boxes*/
    #topslmod1 .red-title img {
        display: none;
    }
    #topslmod2 .orang-title img {
        display: none;
    }
    #topslmod3 .blue-title img {
        display: none;
    }

    #topheader {
        border-bottom: 0px solid #90BBD0;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    #header-abcd, #header-bcd {
        margin: 0;
		clear:  both;
		float: left;
		width: 100%;
    }
	#header-b, #header-c, #header-d  {
		clear:  both;
		float: left;
		width: 100%;
        margin: 0;
	}
    #header-bcd h3 {
        padding: 3px 0px 2px 28px;
    }
    #sectioncontent {
        margin-top: 0px;
    }

	.floatbox {
		clear:  both;
		float: left;
	}

    /* for joomla elements in blog */
    .items-row .item, .column {
        clear: both;
        xxxwidth: auto !important;
        float: left;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }
    
    #content {
        padding: 28px 2.5% 29px 2.5%;
        margin: 0;
        width: 90%;
    }

    
    /* Pour les images taille fixe ou variable*/
    #content .cdf_image_flex100 img, #content img.cdf_image_flex100 {
        width: 100%;
    }

	#content img.cdfs_vignettes_texte {
    	max-width: 120px;
	}
    #content div.item-separator {
        padding-bottom: 18px;
    }

    #content .cols-3 .column-1 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    #content item.column-2 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }
    #content item.column-3 {
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
    }

    #content div.items-row .cols-3 {
        width: 100%;
    }

    #content div.blogturquoise, div.bloggris {
        width: 100%;
    }
    #content div.blogturquoise, div.bloggris div.items-row.cols-3 {
        width: 100%;
    }
    /* home page musées*/

    /*First levels main menus in uppercase */
    #pageslide ul.menu > li {
        text-transform: none;
    }
    div.moduletable > ul.menu > li {
        text-transform: none;
    }
    div.moduletable > ul.menu > li > ul > li {
        text-transform: none;
    }
    
    /*
     * List acteurs. Try this to move 3 cols as 3 rows
     */
    #jexecproc_left {
        clear: both;
        float: left;
        width: 80%;
    }

    #jexecproc_right {
        clear: both;
        float: left;
        width: 80%;
    }

    #jexecproc_left50 {
        clear: both;
        float: left;
        width: 80%;
    }

    #jexecproc_right50 {
        clear: both;
        float: left;
        width: 80%;
    }

    #jexecproc_middle {
        clear: both;
        float: left;
        width: 80%;
    }

    #jexecproc_leftsmall {
        clear: both;
        float: left;
        width: 80%;
    }

    #jexecproc_rightbig {
        clear: both;
        float: left;
        width: 80%;
    }
    /* add small left margin for menu items */
    #header-bcd ul {
        padding-left: 32px;
    }

    img {
        max-width: 100%;
        height: auto !important;
    }
    /* make breadcrumb bigger and text middle */
    #breadcrumbs {
        max-width: 100% !important;
        height: auto !important;
        margin-top: 0px;
        min-height: 40px;
    }
    #breadcrumbs div.breadcrumbs {
        padding: 10px 0px 0px 28px;
    }

    #maincontent .column {
        width: 100% !important;
        clear:both;
        float:left
    }
    .column div.moduletable, .column div.moduletable_menu {
        float: none;
        width: auto !important;
    }
    /*
     * Contact form
     */
    .contact form fieldset dt {
        max-width: 80px;
    }
    .contact input, .contact textarea {
        max-width: 160px;
    }

    /* center (more or less) search bar */
    #search {
        margin-top: 12px;
        margin-right: 3px;
        float: left;
    }
    /*smaller margin between searchtext and button
    #search #cse-search-form td.gsc-input {
        padding-right: 5px;
    }
    
    /* PAGE ACCUEIL MUSEES SEPARER LES BLOCK VERTICALMENT */
    .column-2 p.cdfs_mih_titre,
    .column-3 p.cdfs_mih_titre {
        margin-top: 20px;
    }
    
    /* Styles for cdf_col1 and cdf_col2 setup. It allows to input two columns format with JCE. JCE config styles cdf_Col1 per profile! */
    div.cdf_col1 {
    	width: 90%;
    	float: left;
    	clear: both;
    	margin: 0px 0px 0px 0px;
    	
    }
    div.cdf_col2 {
    	width: 90%;
    	float: left;
    	clear: both;
    	margin: 0px 0px 0px 0px;
    }

}