*{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing:border-box; } body{ margin:0; padding:0; font-family: sans-serif; } header{ margin:0 auto; width:100%; } header img{ margin-left:120px; } #wrap{ padding-top:20px; width:1100px; margin:0 auto; } a{ text-decoration:none; } h1{ margin: 15px -15px 5px 15px; padding:0; font-size:2.0em; color:#1d0b78; display:inline-block; } h2{ margin: 15px 15px; font-size:1.3em; color:#1d0b78; display:inline-block; } h3{ margin:15px; display:inline-block; color:#1d0b78; } p{ margin:0 15px; color:#1d0b78; text-decoration:none; } /*1ERE COLONNE*/ #ateliers{ margin:0 10px; overflow: hidden; } #ateliers:after { content: ""; /* Important, sinon l'élément n'est pas généré. */ display: table; clear: both; } #ateliers ul{ padding:0; margin:0; list-style-type:none; } #ateliers ul li{ height: 300px; margin-bottom:15px; background-color: #2bc7cd; } /*2EME COLONNE*/ #news{ background-color:#a51616; margin:0 10px 10px 10px; overflow: hidden; } #news img{ height:350px; } .article1, .article2, .article3, .article4{ background-color:#ffaa7f; } .suite{ text-align:right; } /*3EME COLONNE*/ .map{ background-color:#6059d2; height: 300px; margin:0 0 15px 10px; } .agenda{ background-color: #ca52ae; height: 300px; margin:0 0 0px 10px; } /*RESPONSIVE*/ .col-2, .col-4, .col-6, .col-8, .col-10, .col-12{ float:left; position:relative; } .row:before, .row:after{ content: ""; display:table; } .row:after{ clear:both; } .row{ margin: 0 -10px; zoom: 1; } .col-1{ width:8.33333%; } .col-2{ width:16.66667%; } .col-3{ width:25%; } .col-4{ width:33.33333%; } .col-5{ width:41.66667%; } .col-6{ width:50%; } .col-7{ width:58.33333%; } .col-8{ width:66.66666%; } .col-9{ width:75%; } .col-10{ width:83.33333%; } .col-11{ width:91.66667%; } .col-12{ width:100%; } @media only screen and (min-width:640px) { .col-m-1{ width:8.33333%; } .col-m-2{ width:16.66667%; } .col-m-3{ width:25%; } .col-m-4{ width:33.33333%; } .col-m-5{ width:41.66667%; } .col-m-6{ width:50%; } .col-m-7{ width:58.33333%; } .col-m-8{ width:66.66666%; } .col-m-9{ width:75%; } .col-m-10{ width:83.33333%; } .col-m-11{ width:91.66667%; } .col-m-12{ width:100%; } } @media only screen and (min-width:1024px) { .col-l-1{ width:8.33333%; } .col-l-2{ width:16.66667%; } .col-l-3{ width:25%; } .col-l-4{ width:33.33333%; } .col-l-5{ width:41.66667%; } .col-l-6{ width:50%; } .col-l-7{ width:58.33333%; } .col-l-8{ width:66.66666%; } .col-l-9{ width:75%; } .col-l-10{ width:83.33333%; } .col-l-11{ width:91.66667%; } .col-l-12{ width:100%; } }