.mobile{display:none;} /*********************************************** Example use only - Delete when done..! ***********************************************/ body {font-family: 'Ropa Sans', sans-serif;} body#home #bkg_top, body#list #bkg_top, body#single #bkg_top, body#about #bkg_top {position: absolute; width: 100%; height: 100%; top:0px; right:0; z-index: 1; } body#home #bkg_bottom, body#list #bkg_bottom, body#single #bkg_bottom, body#about #bkg_bottom {position: absolute; width: 100%; height: 100%; bottom:0; right:0; z-index: 1; } body#home #bkg_top {background: url("images/bk_test1h.png") no-repeat 0% 0%; background-size: 100% auto; pointer-events: none;} body#home #bkg_bottom {background: url("images/bk_blur.png") no-repeat 0% 100%; background-size: 100% auto; pointer-events: none; } body#list #bkg_top {background: url("images/bk_mosaic.png") no-repeat 0% 0%; background-size: 100% auto; pointer-events: none;} body#list #bkg_bottom {background: url("images/bk_board.png") no-repeat 0% 100%; background-size: 100% auto; pointer-events: none; } body#single #bkg_top {background: url("images/bk_test1h.png") no-repeat 0% 0%; background-size: 100% auto; pointer-events: none;} body#single #bkg_top2 {background: url("images/bk_test2h.png") no-repeat 0% 0%; background-size: 100% auto; pointer-events: none; position:absolute; top:0; right:0; width:100%; height:100%; z-index: 1;} body#single #bkg_bottom {background: url("images/bk_blur.png") no-repeat 0% 100%; background-size: 100% auto; pointer-events: none; } body#about #bkg_top {background: url("images/bk_test1h.png") no-repeat 0% 0%; background-size: 100% auto; pointer-events: none;} body#about #bkg_bottom {background: url("images/bk_blur.png") no-repeat 0% 100%; background-size: 100% auto; pointer-events: none; } .parallax-window {min-height: 400px; background: transparent;} @font-face { font-family: 'dk_pisangregular'; src: url('../webfont/DK Pisang-webfont.eot'); src: url('../webfont/DK Pisang-webfont.eot?#iefix') format('embedded-opentype'), url('../webfont/DK Pisang-webfont.woff2') format('woff2'), url('../webfont/DK Pisang-webfont.woff') format('woff'), url('../webfont/DK Pisang-webfont.ttf') format('truetype'), url('../webfont/DK Pisang-webfont.svg#dk_pisangregular') format('svg'); font-weight: normal; font-style: normal; } #pageWrap {position: relative; overflow: auto;} #contentWrap {width: 1200px; margin: 0 auto; position: relative; z-index: 99;} a {-webkit-transition: color linear .4s; -moz-transition: color linear .4s; -o-transition: color linear .4s; transition: color linear .4s;} header {position: relative; width: 100%; display: block; clear: both; overflow: auto; margin: 0 0 20px -10px; height: auto;} .logo {display:block;background: url("/img/logo_tiroir_culturel.svg") no-repeat right top; width: 349px; height: 96px; overflow: hidden; margin: 45px 0 0 0; float: left;} .logo a {display: block; padding-top: 200px; } #list .logo {background: url("/img/logo_repertoire.svg") no-repeat right top;} #single .logo {background: url("images/logo-single.png?v=2019-05-06") no-repeat right top;} nav {width: 60%; margin: 0; float: right;} nav a {text-decoration: none;} .topNav {float: right; display: block; width: 100%; margin: 0 0 10px 0;} .mainNav ul, .topNav ul {width: auto; margin:0; float: right;} .mainNav ul li, .topNav ul li {display:inline-block; list-style: none; cursor:pointer !important;} .mainNav ul li, .topNav ul li {/*padding-left: 10px;*/} .mainNav ul li a {display: block; font-family: 'dk_pisangregular'; padding: 10px 15px; font-size: 1.25em; -webkit-transition: background linear .3s; -moz-transition: background linear .3s; -o-transition: background linear .3s; transition: background linear .3s;} .mainNav ul li a:hover {background:rgba(0,0,0,0.8); /*-webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;*/ color:white;} #list .mainNav ul li a:hover {/*background:#C1B0A2;*/} #single .mainNav ul li a:hover {background:#F3E9CB;} /*.mainNav ul li.active {margin: 0 10px;}*/ /*.mainNav ul li.active {background:rgba(0,0,0,0.8); -webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color:white;}*/ .mainNav ul li.active a {background: #000; /*-webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;*/ color: #FFF;} #list .mainNav ul li.active a {color: #FFF;} #single .mainNav ul li.active a {color: #F63D24;} .mainNav ul li.active a:hover {background: #000!important; cursor: pointer; /*-webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;*/} .topNav ul li a {display: block; padding: 15px 8px 8px 8px; background: rgba(255,240,156,0.5); font-family: 'Ropa Sans', sans-serif; font-size: 0.85em; -webkit-transition: background linear .3s; -moz-transition: background linear .3s; -o-transition: background linear .3s; transition: background linear .3s;} .topNav ul li a:hover {background: rgba(255,240,156,0.85);} /*HOME ACCROCHE*/ .blocAccroche {margin: 4em auto; text-align: center;} .blocAccroche span {display: inline-block; font-size: 1.5em; background: rgba(0,0,0,0.8); padding: 12px 12px 10px 12px; color:#ffed99; text-align: center;} /*HOME VIDEO + CTA*/ .blocVideo {margin-bottom: 20px;} .blocVideo .blocAccroche h2 { text-align:left; } .blocVideo .blocAccroche h2 span { display:inline; box-decoration-break:clone; /*box-shadow:0.5em 0 0 rgba(0,0,0,0.8), -0.5em 0 0 rgba(0,0,0,0.8);*/ background-color:rgba(0,0,0,0.8); line-height:94px; font-size:72px; padding-top:0px; padding-bottom:0px; text-transform:uppercase; } .blocVideo p { font-size:24px; text-transform:uppercase; font-family: 'Ropa Sans'; color:black; } .video {padding: 15px 15px 10px 15px; background: rgba(0,0,0,0.8);} .video {margin: 0; } .cte_recherche, .cte_afficher {border: 10px solid #000; width: 100%; background: rgba(255,237,158,0.1); margin: 0 0 22px 15px; padding: 15px 10px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } .cte_recherche p, .cte_afficher p {text-align: center; font-family: 'Ropa Sans', sans-serif; font-size: 1.5em; color: #000; margin: 0;} .cte_recherche p span, .cte_afficher p span {display: block; font-family: 'dk_pisangregular'; font-size: 2.65em; padding: 15px 0 10px 0;} .cte_recherche p.poignee, .cte_afficher p.poignee {padding-top:8px; margin-top: 7px;} .cte_recherche p.poignee span, .cte_afficher p.poignee span {background: url("images/poignee.png") no-repeat center top; padding: 10px 5px; margin-bottom: -12px; position: relative; z-index: 9999;} .cte_recherche p a, .cte_afficher p a {background: rgba(0,0,0,0.8); display: block; text-decoration: none; color: #fff8e9; padding: 15px 0 12px 0; position: relative; z-index: 999; -webkit-transition: background linear .2s; -moz-transition: background linear .2s; -o-transition: background linear .2s; transition: background linear .2s;} .cte_recherche p a:hover, .cte_afficher p a:hover {background: rgba(223,67,21,0.8);} /*HOME PREVIEW*/ .blocPreview {background: rgba(0,0,0,0.8); padding: 15px 10px;} .blocPreview article {padding: 0; background: rgba(255,255,255,0.9); -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; -webkit-transition: background linear .2s; -moz-transition: background linear .2s; -o-transition: background linear .2s; transition: background linear .2s; } .blocPreview article:hover {background: rgba(255,255,255,1);} .blocPreview .previewImgContainer {position: relative; height: auto; overflow: hidden;} .blocPreview .previewImgContainer img {width: 100%; height: auto;} .blocPreview .ctgLabel {display: inline; /*width: auto;*/ text-decoration: none; float: left; /*position: absolute; left:0; bottom: 0; padding: 0px 10px;*/ font-size: 0.9em; -webkit-transition: background linear .2s; -moz-transition: background linear .2s; -o-transition: background linear .2s; transition: background linear .2s;} /*22JUIN2015 - AJOUT*/ .verticalaccordion {position: absolute; bottom:0; z-index: 999} .verticalaccordion ul {margin: 0; padding: 0; list-style:none; width: 220px;} .verticalaccordion ul li {display:inline; float: left; overflow: hidden; margin: 0; padding: 0; list-style:none; height:28px; width: 16px; -webkit-transition: width .25s; -moz-transition: width .25s; -o-transition: width .25s; transition: width .25s;} .verticalaccordion ul li a {height: 28px; padding: 40px 10px 0 10px!important;} .verticalaccordion li.activeCat a {padding-top:5px!important;z-index:33;} .verticalaccordion li.activeCat{width:156px; z-index:30;} li.cat_artdelascene {background: #f9897d;} li.cat_artvisuel {background: #add597;} li.cat_artmediatique {background: #d8e9d6;} li.cat_lieuculturel {background: #feecae;} li.cat_litterature {background: #c1b0a2;} li.cat_metierdart {background: #af85a2;} li.cat_museologie {background: #b1d7dd;} li.cat_savoirfairetrad {background: #e8e0cf;} li.cat_patrimoine {background: #eec49c;} .verticalaccordion ul li:hover a {padding: 5px 10px 0px 10px!important;} /*--------*/ /*modif 09 juillet 2015*/ .subscribe {} .subscribe .steps {background: #df4315; display: inline-block; width: 30px; height: 30px; padding: 6px 10px; -webkit-border-right-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; font-size: 1.25em;} .subscribe .steplines {padding-left: 35px; font-size: 1.25em;} .subscribe .steplines .steps {margin-left: -35px; font-size: 1em; padding: 4px 10px;} .subscribe .important {background: #31130B; padding: 20px 20px 1px 20px; -webkit-border-right-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;} .subscribe .important h3 {font-size :1.5em; color: #df4315;} .subscribe .notes ul {list-style: none; margin: 0;} .subscribe a {color:#df4315;} #about p a{color:#df4315;} footer{ margin-top:6em!important; } .condition { width: 570px!important; } /*-----instagram------*/ #instagram{ background: url('images/instagram_icon.png') no-repeat -2px -2px; background-size: 42px; } /*----------*/ /* ----- ajout 8 juin 2016-------*/ #filtre-mobile{display:none;} /*------------------------------*/ .blocPreview .ctgLabel:hover {/*background: #cef0bb;*/} .blocPreview .profilPic {display: inline-block; float: left; overflow: hidden; margin: 8px; -webkit-border-right-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .blocPreview .profilName {text-align: left; padding: 20px 8px 0 0; width: calc(100% - 76px);} .blocPreview .profilName a {text-decoration: none; text-align: left; line-height: 1em;} .blocPreview p.tag {display: block; clear: both; padding: 8px; margin: 0; text-align: left;} .blocPreview p.tag a {color:#01bdbd;} .blocPreview p.tag a:hover {color:#007272;} /*LIST VIEW*/ .listView {padding: 18px 8px 5px 8px!important;} .sortBy {padding: 10px; margin-right: 0px; background: rgba(0,0,0,0.8); display: flex; flex-wrap: wrap; justify-content: space-between;} .sortBy input, .sortBy select, .sortBy .SumoSelect { width:calc((100% - 70px) / 4); font-family:'Ropa Sans', sans-serif; } .sortBy label {display: block; width: 100%; font-family: 'Ropa Sans', sans-serif; font-size: 1.15em; color:#FFF; text-align: left; padding: 0; margin: 0;} .sortBy select {display: block; width: 100%; height: 30px; padding: 0 5px;} .listView article {display: inline-block;} .listView .ctgLabel {padding: 4px 10px;} .sideCol {} h3.filterColTitle {font-size: 1.5em; line-height: 1.45em; margin: 5px 0 0 0; border-bottom: 10px Solid #000; opacity: 0.85;} h3.filterColTitle span {display:block; font-size: 1.8em;} h4.filterTitle {margin: 10px 0 0 0; } ul.catgFilter {list-style: none; margin: 0; padding: 10px 0 0 0;width:168px;} ul.catgFilter li {display: block; margin: 0 0 5px 0;} ul.catgFilter li a {text-decoration: none; padding: 5px 8px; margin: 0 0 5px 0; display: inline-block; float: left; font-size: 0.85em; -webkit-transition: background linear .2s; -moz-transition: background linear .2s; -o-transition: background linear .2s; transition: background linear .2s;} ul.catgFilter li a:hover {background: #000; color:#FFF;} .cat_artdelascene a {background: #f9897d;} .cat_artvisuel a {background: #add597;} .cat_artmediatique a {background: #d8e9d6;} .cat_lieuculturel a {background: #feecae;} .cat_litterature a {background: #c1b0a2;} .cat_metierdart a {background: #af85a2;} .cat_museologie a {background: #b1d7dd;} .cat_savoirfairetrad a {background: #e8e0cf;} .cat_patrimoine a {background: #eec49c;} .filterCity, .filterKeyword {background: rgba(0,0,0,0.8); display: block; clear: both; overflow: auto; padding: 5px; margin-top: 10px;} .filterKeyword {padding: 12px 5px 12px 15px; -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2;} .filterKeyword a {font-size: 0.85em; color: #fff;} .filterKeyword a:hover {color: #01bdbd;} .pageBrowser {background: rgba(0,0,0,0.8); display: inline-block; clear: both; overflow: auto; padding: 10px 15px; margin: 15px 0 0 0px;} .pageBrowser a.previous, .pageBrowser a.next {background: url("images/nextprev.png") no-repeat 0px 1px; display: inline-block; width: 12px; height: 16px; margin: 2px 0 -2px; overflow: hidden; } .pageBrowser a.previous span, .pageBrowser a.next span {display: block; padding-top: 50px;} .pageBrowser a.next {background: url("images/nextprev.png") no-repeat -14px 1px;} .pageBrowser a.page {padding: 0 4px; color: #FFF;} .pageBrowser a.active {background: #FFF; color: #000; width: 16px; height: 16px; text-align: center; text-decoration: none; -webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} /*SINGLE*/ .fiche h2.profilName {color:#FFF; font-size: 2.5em; margin-left: -12px;} .fiche .profilCatg {display: block; clear:both; overflow: auto;} .fiche .profilCatg ul {list-style: none; margin:0; display: inline-block;} .fiche .profilCatg a {display: inline-block; text-decoration: none; font-size: 0.85em; padding: 5px 10px; margin: 0;} .print-page {display:inline-block;vertical-align:middle;} .fiche .profilCatg ul li {display:inline-block;} .fiche .profilCatg a.backToSearch {display: inline-block; background: #000 url("images/back_search.png") no-repeat 50% 50%; width: 40px; height: 30px; overflow: hidden; margin: 10px 15px 10px 0; vertical-align:middle; } .fiche .profilCatg a.backToSearch span {display: block; padding-top: 50px;} .fiche .capsule {background: rgba(0,0,0,0.8); padding: 10px 10px 5px 10px; margin-top: 30px;} .fiche .capsule iframe {} .profilText {background:#FFF; padding: 15px; margin-top: 30px;} .profilText h3 {font-size: 2em; padding: 5px 0 10px 0;} .profilText p {line-height: 1.25em;} .fiche .portfolio {background: rgba(0,0,0,0.8); padding: 15px;} .fiche .portfolio h3 {color:#fff; font-size: 2em; padding: 5px 0 10px 0; text-align:left;} .fiche .portfolio ul {list-style: none; margin: 0; padding: 0;} .fiche .portfolio ul li {margin: 0; padding: 0 0 15px 0;} .profile .profilPic {display: inline-block; overflow: hidden; border: 10px solid #000; margin: 0 70px; -webkit-border-right-radius: 200px; -moz-border-radius: 200px; border-radius: 200px; } .profile .profilPin {display: block; background: #000; margin: -178px 0 0 0; padding: 175px 15px 15px 15px; text-align: center; -webkit-border-bottom-right-radius: 8px; -webkit-border-bottom-left-radius: 8px; -moz-border-radius-bottomright: 8px; -moz-border-radius-bottomleft: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px;} .profile .profilPin p {margin: 0 auto; padding: 0 0 0 25px; display: inline-block; background: url("images/pinrouge.png") no-repeat 0% 50%; font-size: 1.25em; color: #FFF;} .contact {background: rgba(0,0,0,0.8); display: block; overflow: auto; padding: 15px; margin: 30px 0 0 0; -webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .contact p.profilPhone {text-align: center; font-size: 2em; color:#FFF; margin-top: 20px;} .contact .profilEmail {background: rgba(255,255,255,0.8); margin: 0 20px 20px 20px; -webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-transition: all linear .2s; -moz-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s;} .contact .profilEmail:hover {background: rgba(170,51,48,1);} .contact .profilEmail a {background: url("images/mail.png") no-repeat 10px 50%; display: block; text-decoration: none; padding: 25px 10px 25px 70px; } .contact .profilEmail a span {display: block; font-size: 1.65em;} .contact .profilEmail a:hover {} .map {background: rgba(0,0,0,0.8); -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .ggMap {margin: 30px 0 0 0; position: relative;} /*temp*/.pinperso {background: url("images/marker.png") no-repeat 50% 50%; position: absolute; width: 28px; height: 41px; top: 50%; left: 50%; margin: -20px 0 0 -14px; } p.adresse {margin: 15px; font-size: 1.25em; line-height:1.15em; color:#FFF;} .userSocial {list-style: none; margin: 0 0 0 15px;} .userSocial li {display: inline-block; text-align: right; width: 38px; height: 38px; margin-right: 5px; overflow: hidden; color: #FFF;} .userSocial li a {display: block; width: 100%; padding-top: 60px; background: url("images/socialprofil.png") no-repeat 0px 0px; -webkit-transition: all linear .2s; -moz-transition: all linear .2s; -o-transition: all linear .2s; transition: all linear .2s;} .userSocial li a:hover {opacity: 0.75;} .userSocial li.flicker a {background-position: 0px 0px;} .userSocial li.vimeo a {background-position: -46px 0px;} .userSocial li.facebook a {background-position: -91px 0px;} .userSocial li.googleplus a {background-position: -136px 0px;} .userSocial li.twitter a {background-position: -181px 0px;} .userSocial li.pinterest a {background-position: -227px 0px;} .userSocial li.youtube a {background-position: -273px 0px;} .tags {background: rgba(255,255,255,1); display:block; padding: 15px; margin-top: 30px; -webkit-border-right-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;} .tags h4 {font-size: 1.65em; font-family: 'dk_pisangregular'; padding: 5px 0 10px 25px; background: url("images/tag.png") no-repeat 0 -1px;} .tags p {margin: 0;} .tags p a {color:#01bdbd;} .tags p a:hover {color:#007272;} /*A PROPOS*/ #about .blocAccroche {text-align: left; margin: 4em 0 0 0;} #about .blocAccroche span {display: inline-block; font-size: 1.5em; background: rgba(0,0,0,0.8); padding: 17px 12px 8px 15px; color:#FFF;} #about .blocAccroche span.subtitle {font-size: 0.8em; padding: 6px 12px 4px 15px;} .about {background: rgba(0,0,0,0.9); padding: 25px 15px 0px 15px; line-height: 1.15em; color:#fff; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px;} .about p {line-height: 1.25em;} .about h3 {font-size:2em; color:#FFF;} .about article.grid_6 {width:570px; margin-left: 75px;} .partner {padding-left:10px;} .formrow {width: 100%; clear: both; overflow: auto; margin-bottom: 1em;} .grid_50 {width: 50%; float: left; padding-right: 20px;} .grid_100 {width: 100%; float: left; padding-right: 20px;} .formrow input[type="button"], .formrow input[type="submit"], .formrow input[type="reset"] {float:right; margin:15px 0 0 0;} .terms {background: rgba(0,0,0,0.9); padding: 15px 15px 0px 15px; line-height: 1.15em; color:#fff; margin-top:1em;} .terms {padding: 15px 15px 1px 15px; } .terms article {margin: 0; } .terms article a {color:#00DEFF;} .terms article.grid_8 {width:780px;} .terms h3 {color:#FFF; padding: 10px 0 0 0;} .terms p {line-height: 1.25em;} footer {position: relative; background: rgba(0,0,0,0.8); margin:0; padding: 15px 10px; overflow: auto; color: #FFF;} #footerLeft {float: left; width: 50%;} #footerCTA a {display: inline-block; float: left; color:#FFF; border: 4px solid #FFF; padding: 10px 15px; opacity: 0.85; margin: 3px 12px 0 5px; font-size: 1.15em; text-decoration: none; text-align: center;} #footerCTA a span {display: block; font-family: 'dk_pisangregular'; font-size: 2em; line-height: 1.05em;} #footerRight {float: right; width: 48%;} #footerSocial .footLogo {background: url("images/logofooter.png") no-repeat right top; width:115px; height: 55px; display: inline-block; float: right; margin: 15px 25px 10px 0; } #footerSocial .footSocial {display: block; clear: both; text-align: right; margin: 5px 25px 10px 0; } #footerSocial .footSocial a {display: inline-block; text-align: right; width: 23px; height: 23px; overflow: hidden; color: #FFF; background: url("images/social.png") no-repeat 0px 0px;} #footerSocial .footSocial a span {display: block; padding-top: 50px;} #footerSocial .footSocial a.footFacebook {background-position: -32px 0px;} #footerSocial .footSocial a.footTwitter {background-position: -1px 0px;} #footerSocial .footSocial a.footVimeo {background-position: -64px 0px;} #footerSocial .footSocial a.footGoogleplus {background-position: -94px 0px;} #footerSocial .footSocial a:hover {opacity: 0.5;} #footerCredential nav {margin:18px 25px 0 0; float: right; width: 50%;} #footerCredential nav ul {list-style: none; margin: 0 -3px 0 0; float: right;} #footerCredential nav ul li {display: inline-block; height: 15px; border-left : 1px solid #FFF;} #footerCredential nav ul li a {display: block; color:#01bdbd; margin-top: -2px; padding: 0 3px 0 6px; } #footerCredential nav ul li.first {border: none;} #footerCredential nav ul li a:hover {color:#FFF;} .footCredits {float: right; width: 40%; text-align: right; margin: 0 25px 0 0;} .footCredits p {font-size: 0.9em; line-height: 1.25em;} .footCredits p span {display: block; font-size:1.15em;} /*temp*/ .grid-highlight { margin-bottom:12px; } .grid-highlight [class^="grid_"] { line-height:30px; text-align:center; background-color:#F1F1F1; } h1, h2, h3, h4, h5, h6 { color:#000;} h1, h2, h3 { font-family: 'dk_pisangregular'; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight:inherit; color:inherit; } h1 { font-size:38px; line-height:40px; } h2 { font-size:32px; line-height:34px; } h3 { font-size:24px; line-height:26px; } h4 { font-size:17px; line-height:19px; } h5 { font-size:14px; line-height:16px; } h6 { font-size:11px; line-height:13px; } .soutitre {display: inline-block; font-size: 2em; background: rgba(0,0,0,0.8); padding: 0.45em; text-align: center;} h3.soutitre {font-size: 2em;} h4.soutitre {font-size: 1.45em; font-family: 'dk_pisangregular'; color:#FFF;} .homePreview {color:#e2865c; } h3.listTitle {background: rgba(0,0,0,0.8); color:#FFF; margin-left: -11px; font-size: 2.45em; line-height: 0.75em; padding-bottom: 0.18em; } h3.listTitle span {display:block; font-size: 0.42em; } .mainNav a { display: inline-block; float: left; border: 4px solid rgba(0,0,0,0.8); padding: 10px 15px; opacity: 0.85; margin: 3px 5px 0 5px; font-size: 1.15em; text-decoration: none; text-align: center; font-family: 'Ropa Sans', sans-serif !important; } .mainNav a span { display: block; font-family: 'dk_pisangregular'; font-size: 2em; line-height: 1.05em; } /*********************************************** Screen 1200px+ ***********************************************/ .example { } /*********************************************** Screen Smaller than 1199px ***********************************************/ @media only screen and (min-width:960px) and (max-width: 1199px) { .example { } } /*********************************************** Tablet (Smaller than 959px) ***********************************************/ @media only screen and (min-width:768px) and (max-width: 959px) { .example { } } /*********************************************** Mobile (portrait 300px) ***********************************************/ @media only screen and (max-width:767px) { .example { } } /*********************************************** Mobile (landscape 420px) ***********************************************/ @media only screen and (min-width: 480px) and (max-width: 767px) { .example { } } .previewArtist { display: flex; flex-wrap: wrap; align-items:flex-start; }