/* Table of Content ================================================== #Font-Face #Site Styles #Page Styles #Media Queries SlickNav*/ /* #Font-Face ================================================== */ @font-face { font-family: 'PlaidM'; src: url('../../fonts/PlaidM.eot'); src: url('../../fonts/PlaidM.eot?iefix') format('eot'), url('../../fonts/PlaidM.woff') format('woff'), url('../../fonts/PlaidM.ttf') format('truetype'), url('../../fonts/PlaidM.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'RandoDisplay-Regular'; src: url('../../fonts/RandoDisplay-Regular.eot'); src: url('../../fonts/RandoDisplay-Regular.eot?iefix') format('eot'), url('../../fonts/RandoDisplay-Regular.woff') format('woff'), url('../../fonts/RandoDisplay-Regular.ttf') format('truetype'), url('../../fonts/RandoDisplay-Regular.svg') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'NotoSans'; src: url('../../fonts/NotoSans.eot'); src: url('../../fonts/NotoSans.eot?iefix') format('eot'), url('../../fonts/NotoSans.woff') format('woff'), url('../../fonts/NotoSans.ttf') format('truetype'), url('../../fonts/NotoSans.svg') format('svg'); font-weight: normal; font-style: normal; } /* #Site Styles ================================================== */ body { font-family:'PlaidM',Sans-Serif; font-weight:100; line-height:1.5em; font-size:15px; } /* Header */ #header {background-color: #000; color:#fff;} #banner-logo {height:60px; display:flex; justify-content:flex-start; align-items:stretch; align-content:center;} #banner-logo a {align-self:center; padding-left:20px;} #banner-logo img {width:180px; } #main-menu {height:60px;} #main-menu ul {list-style:none; margin:0; padding:0; height:100%; display:flex; justify-content:center; align-items:stretch; align-content:center;} #main-menu li {margin: 0 1px 0 0; padding: 0 40px 0 0; align-self:center; background-image:url(../../images/main-menu-li-separator.png); background-repeat: no-repeat; background-position: center right;} #main-menu li:last-child {margin:0; background-image:none;} #main-menu li a {color: #fff; padding: 20px 6px; font-size: 1.2em;} #logo-and-tagline {position: relative; display: flex;} #logo-and-tagline-left, #logo-and-tagline-right {width: 25%;} #logo-and-tagline-center {width: 50%;} /* Main menu toggle */ .dropdown-box-item {} .dropdown-box-item-body {display: none; position: absolute; z-index: 900; background-color: #000; top: 60px; width: 100%; left: 0; text-align: center; padding-top: 10%;} a.dropdown-toggle-info {color: #5d5a58; text-decoration: none;} a.dropdown-toggle-info span.dropdown-box-arrow {display: inline-block; width: 20px; height: 14px; padding-left: 10px;overflow: hidden; background-image: url("images/grey-arrow.png"); background-position: right -27px; background-size: 20px auto; background-repeat: no-repeat; transition: all 0s ease 0s;} a.dropdown-toggle-info.open span.dropdown-box-arrow {background: url("images/grey-arrow.png") right -12px no-repeat, none; background-size: 20px auto; transition: all 0s ease 0s;} a.dropdown-toggle-info.open {background-color:rgba(255,255,255,0.2);} .main-menu-level-2 {overflow: hidden; display: inline-block;} .main-menu-sublevels {padding:0 15%;} #main-menu li .main-menu-level-2 a {width: auto; display: inline-block; font-size: 3.2em; line-height: 1.2em; padding: 0 30px; margin: 0; text-align: center; text-transform: uppercase; font-family: "RandoDisplay-Regular", Times, "Times New Roman", "serif"; color: #595959;} #main-menu li .main-menu-level-2 a:hover {color: #fff} /* End Main menu toggle */ #banner-right-menu {height:60px;} #banner-right-menu ul {list-style:none; margin:0; padding:0; height:100%; display:flex; justify-content:flex-start;} #banner-right-menu li {margin:0; padding:0; display:flex; flex-direction:row; height:100%; align-items:center; } #banner-right-menu li#banner-tickets-button { background-color:#adaad0; padding:0 82px; } #banner-right-menu li#banner-tickets-button a { color:#fff; } #banner-right-menu li#banner-calendar-button { background-color:#ddedfb; padding:0 15px;} #banner-right-menu li#banner-calendar-button a { color:transparent; width:30px; height:30px; overflow:hidden; background-image:url(../../images/banner-calendar-button-picto.png); background-repeat: no-repeat; background-size: contain;} #banner-right-menu li:last-child {position: absolute; right: 10px;} #menuToggle a {padding:0 7px 0 17px; display:inline-block;} #menuToggle span { display: block; width: 26px; height: 1px; margin-bottom: 6px; position: relative; background: #cdcdcd; z-index: 1; transform-origin: 4px 0px; transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease;} #menuToggle span:first-child { transform-origin: 0% 0%; margin-top: 10px;} #menuToggle span:nth-last-child(2) {transform-origin: 0% 100%;} #menuToggle .menuToggleTrigger.shortcutsopen span { opacity: 1; transform: rotate(45deg) translate(0px, 0px); } #menuToggle .menuToggleTrigger.shortcutsopen span:nth-last-child(3), #menuToggle .menuToggleTrigger.shortcutsopen span:last-child { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2);} #menuToggle .menuToggleTrigger.shortcutsopen span:nth-last-child(2) { transform: rotate(-45deg) translate(-2px, 3px); } #mobile-tickets-button a {background-color: #adaad0; width: 100%; display: none; color: #fff; text-align: center; padding: 10px 0;} #mobile-tickets-button a:hover {background-color: #908cbb;} /* END Header */ /* Shortcuts */ #shortcuts-overlay {position: absolute; width: 100%; height: 680px; background-color: rgba(0,0,0,1); display: none; z-index: 10; overflow: hidden;} #shortcuts-overlay.default {display:none;} #shortcuts-overlay.shortcutsopen {display:inline-block;} #shortcuts-overlay-links {display:flex; flex-wrap:wrap; justify-content:center; align-items:center; padding:10% 15% 0} a.shortcuts-overlay-link {font-size:3.2em; line-height:1.2em;; padding:0 30px; margin:0; text-align:center; text-transform:uppercase; font-family:"RandoDisplay-Regular", Times, "Times New Roman", "serif"; color:#595959} a.shortcuts-overlay-link:hover {color:#fff;} #shortcuts-overlay-footer { position: absolute; bottom: 0; padding-bottom:18px; width: 100%; text-align: center; background-color: #000;} .shortcuts-overlay-footer-half {width:49%; display:inline-block; font-family:'NotoSans',Sans-Serif; font-size: 11px;} #shortcuts-overlay-footer-content {color:#595959; padding-top:21px; border-top: solid 1px #595959;} #shortcuts-overlay-footer-content a, #shortcuts-overlay-footer-content a:active, #shortcuts-overlay-footer-content a:focus {color:#595959} #shortcuts-overlay-footer-content a:hover {color:#fff} /* END Shortcuts */ /* Sticky js - header is fixed on top when scrolling down the page*/ .header-is-stuck #header { position: fixed; top: -1px; left: 0; right: 0; animation: stickAnim 2s; z-index: 9999; margin: 0 auto;} .header-is-stuck #shortcuts-overlay {position:fixed; top:58px;} /* Footer */ #footer-legal-newsletter {background-color: #ebebeb; height: 60px; background-image: url(../../images/footer-legal-newsletter-bkg.gif); background-position: center;} #footer-faqs-content {min-height:250px; margin-top:100px;} #footer-faqs-content ul {margin:0; padding:0; list-style: none; } #footer-faqs-content li {margin:0; padding:0 0 18px 0; font-size:21px; color:#000;} #footer-faqs-content li a:hover {text-decoration:underline;} #footer-legal {background-color:#ebebeb; display:flex; height:60px;} #footer-legal ul {margin:0; padding:0; list-style:none; align-self:center} #footer-legal li {margin:0 .3em 0 0; padding:0; color:#000; display: inline-block;} #footer-legal li::after {content:"."; padding-left:.5em; font-size:1.4em;} #footer-legal li:last-child::after {content:""; padding-left:0; } #footer-legal li a:hover {text-decoration:underline;} #footer-newsletter {background-color:#f7f7f7; display:flex; height:60px;} #footer-newsletter-content {align-self:center; margin:0 0 0 24px;} #footer-newsletter-content .footer-newsletter-label {margin:0 .3em 0 0; display: inline-block;} #footer-newsletter-content .footer-newsletter-label::after {content:"."; padding-left:.5em; font-size:1.4em;} form.footer-newsletter-form {margin:0; padding:0; display:inline-block;} form.footer-newsletter-form input[type="text"] {margin:0; display:inline-block; border:none; background: transparent;} form.footer-newsletter-form input[type="text"]:focus {background:#fff; border:0;} form.footer-newsletter-form input[type="submit"] {display:inline-block; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } form.footer-newsletter-form input[type="submit"]:hover {border:none; background-color:#ebebeb } #footer-location-content, #footer-contact-content, #footer-social-networks-content {display:flex; align-items:flex-end; height:170px; margin-bottom:3em; flex-wrap:wrap} #footer-location-content, #footer-contact-content {font-size:1.1em;} #footer-location-content ul, #footer-contact-content ul {margin:0; padding:0;} #footer-location-content li, #footer-contact-content li {margin:0; padding: 0 0 3px 0;} #footer-location-content li a, #footer-contact-content li a,#footer-location-content li a:active, #footer-contact-content li a:active {color:#000; text-decoration:none;} #footer-contact-content li a:hover, #footer-location-content li a:hover, #footer-social-networks-links a:hover, #footer-social-networks-copyrights a:hover {text-decoration:underline;} #footer-social-networks-links, #footer-social-networks-copyrights {width:100%; padding:0; display:inline-block; margin:0 0 0 24px;} #footer-social-networks-copyrights {font-size: 0.8em; line-height: 1.2em;} #footer-social-networks-links {bottom:-2em; position:relative;} .footer-offset {margin-left:80px!important;} /* END Footer */ .buttonlike {padding: 6px 20px; border-radius:15px; font-size:11px;} .buttonlike.standard {background-color:#d1d1d1; color:#fff;} .buttonlike.standard:hover {background-color:#adaad0;} .text-align-left {text-align: left} .text-align-right {text-align: right} /* #Page Styles ================================================== */ /* Homepage - Splash poster */ #home-splash {position: absolute; top: 0; z-index: 9999; width: 100%; height: 100%; display: flex; background: rgba(0,0,0,0.8); justify-content: center; align-items: center; flex-direction: column} #home-splash-logo {display: inline-block; width: 100%; text-align: center; margin-bottom: 15px;} #home-splash-logo img {width: 600px;} #home-splash h1 {color: #fff; text-transform: uppercase; font-family: "RandoDisplay-Regular", "Times New Roman", "serif"; font-size: 2em; line-height: 1.6em;} /* Homepage - Banner */ #homebanner {background-color: #000;} #homebanner-content {width:100%; height:680px; background-color: #000; position:relative; overflow:hidden; display:flex} #homebanner-content img {width:100%; height:100%; object-fit: cover;} #homebanner-content a {color: #fff;} .homebanner-half-area {width:50%; height:100%; display:flex; flex-wrap: wrap } .homebanner-quarter-area {width:50%; display:inline-block; overflow: hidden} #homebanner-season-area {width:100%; display:inline-block; overflow: hidden; position:relative;} #homebanner-mainsquare {display:flex; height:100%; width:100%; opacity: 1; position: absolute;} .label {pointer-events: none; z-index: 5; position: absolute; margin: 0 auto; top: 45%; text-align: center; width: 100%; text-transform: uppercase; font-family: "RandoDisplay-Regular", "Times New Roman", "serif"; font-size: 2.2em;} #homebanner-season-area .label {font-size: 3em;} #homebanner-mainsquare:hover, #homebanner-mainsquare:focus {opacity: 1;} #homebanner-season-area a img { -webkit-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out; } #homebanner-season-area a:hover img { -webkit-transition: all 200ms ease; -ms-transition: all 200ms ease; -moz-transition: all 200ms ease; transition: all 200ms ease; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); -moz-transform: scale(1.3); transform: scale(1.3);} .homebanner-quarter-area {position:relative; } .homebanner-bg-picture {display:flex; height:100%; width:100%; opacity: 1; position: absolute;} #homebanner-quarter-area-1 {margin: 0 0 -8px -8px; border-bottom: 8px solid #000; border-left: 8px solid #000;} #homebanner-quarter-area-2 {margin: 0 0 -8px -8px; border-bottom: 8px solid #000; border-left: 8px solid #000;} #homebanner-quarter-area-3 {margin: -8px 0 0 -8px; border-top: 8px solid #000; border-left: 8px solid #000;} #homebanner-quarter-area-4 {margin: -8px 0 0 -8px; border-top: 8px solid #000; border-left: 8px solid #000;} .homebanner-quarter-area a img { -webkit-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out; } .homebanner-quarter-area a:hover img { -webkit-transition: all 200ms ease; -ms-transition: all 200ms ease; -moz-transition: all 200ms ease; transition: all 200ms ease; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); -moz-transform: scale(1.3); transform: scale(1.3);} .quarter-label {pointer-events:none; text-align:left; bottom:0; position:absolute; padding:0 20% 7% 8%; z-index:5; font-size:1.2em; line-height:1.5em;} .quarter-label-title {margin-right:.7em;} .quarter-label-title::after {content:"."; padding-left:.9em; } .quarter-label-artistes {line-height: 1em; display: inline-block;} .quarter-label-date {border-bottom: 1px solid #fff; padding-bottom: .5em;} .homebanner-quarter-area:hover .homebanner-bg-picture, .homebanner-quarter-area:focus .homebanner-bg-picture {opacity: 1;} /* END Homepage - Banner */ /* Homepage - Abonnements */ #home-subscribe-content {background-image:url(../../images/home-subscribe-background.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; height: 450px; display:flex;} #home-subscribe-button {align-self: center; text-align:center; width: 100%; padding: 0 20%; } #home-subscribe-content h2 {text-transform:uppercase; font-family:"RandoDisplay-Regular", "Times New Roman", "serif"; font-size: 3.4em; line-height:1.1em; color:#fff; margin-bottom: .6em;} #home-subscribe-button .buttonlike.standard {font-size: 1.2em; background-color: #b3b1b1;} /* END Homepage - Abonnements */ /* Season Grid */ #season-grid-controls { width: 90%; margin: 50px auto 60px; border-top: 1px solid #000; border-bottom: 1px solid #000; height: 58px; overflow: hidden;} #season-grid-controls ul {height: 58px; margin:0; padding:0; list-style:none; position:relative; display:flex; } #season-grid-controls li {display: inline-block; margin: 0; border-right: 1px solid #000; font-size: 13px; padding: 20px; align-self: center;} #season-grid-controls li span {margin-right: 10px; padding: 2px; border-radius: 50%; background-color:#ccc; color:#fff; font-family:'NotoSans',Sans-Serif; font-size: 11px; display:inline-block; width:20px; height:20px; text-align:center } #season-grid-controls li:last-child {border-right:none; } #season-grid-controls .season-grid-search-form-label {margin:0 .3em 0 0; display: inline-block; background-image:url(../../images/button-submit-search.svg); background-repeat: no-repeat; background-size: 20px; background-position: left center; padding-left: 2em;} #season-grid-controls .season-grid-search-form-label::after {content:"."; padding-left:.5em; font-size:1.4em;} form.season-grid-search-form {margin:0; padding:0; display:inline-block;} form.season-grid-search-form input[type="text"] {margin:0; display:inline-block; border:none; background: transparent;} form.season-grid-search-form input[type="text"]:focus {background:#fff; border:0;} form.season-grid-search-form input[type="submit"] {display:inline-block; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } form.season-grid-search-form input[type="submit"]:hover {border:none; background-color:#ebebeb } #season-grid-content {width:90%; margin:40px auto; display:flex; flex-wrap: wrap; border-bottom: 1px solid #000; } .grid-item {width:33.333%; display: flex; flex-wrap: wrap; } .grid-item-picture {width:386px; height:270px; display:inline-block; margin:0 auto; overflow:hidden; margin-bottom:18px } .objectfit { width:100%; height:100%; object-fit:cover; } a.grid-item-link img { -webkit-transition: all 200ms ease-out; -ms-transition: all 200ms ease-out; -moz-transition: all 200ms ease-out; transition: all 200ms ease-out; } a.grid-item-link:hover img { -webkit-transition: all 200ms ease; -ms-transition: all 200ms ease; -moz-transition: all 200ms ease; transition: all 200ms ease; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); -moz-transform: scale(1.3); transform: scale(1.3);} .grid-item-info {width:100%; margin: 0 16% 0 8%; height:173px; position:relative;} .grid-item-type {position:absolute; top:8px; right:-18%;} .grid-item-type span {padding: 5px; border-radius: 50%; background-color:#ccc; color:#fff; font-family:'NotoSans',Sans-Serif; font-size: 13px; display:inline-block; width:20px; height:20px; text-align:center } .grid-item-date { border-bottom: 1px solid #000; padding-bottom:.2em; line-height:1.7em; display:inline;} .grid-item-date.calendar {display: inline-block; width: 170px; font-size: .8em;} .grid-item-title { font-size: 1.6em; margin: 10px 0 16px 0; line-height: 1.2em; } .grid-item-title.calendar {display: inline-block; width: 170px; font-size: 1.4em;} .grid-item-casting { font-family: 'NotoSans',Sans-Serif; font-size: 11px;} .grid-item-casting.calendar {display: inline-block; width: 170px;} .event-type-s {background-color:#676bfb!important; color:#fff;} .event-type-xs {background-color:#FF8080!important; color:#fff;} .event-type-e {background-color:#a6dce1!important; color:#fff;} #calendar-content table.grid td span.event-type-e {background-color:#a6dce1!important; color:#000;} .day-full-event-type-e {background-color:#ccc!important; color:#000;} .event-type-unknown {background-color:#676bfb!important; color:#fff;} .event-type-d, .event-type-t {background-color:transparent!important; color:transparent;} /* END Season Grid */ /* Season Grid - Pro */ #season-grid-content.pro-grid {width: 100%; border-bottom: 0;} #season-grid-content.pro-grid .grid-item-picture {width: 90%; height: 180px;} #season-grid-content.pro-grid .grid-item-title {font-size: 1.6em; margin: 10px 18% 16px 0; line-height: 1.2em;} #season-grid-content.pro-grid .grid-item-info {width: 90%; margin: 0 auto;} #season-grid-content.pro-grid .grid-item-type {position: absolute; top: 8px; right: 0;} /* END Season Grid - Pro */ /* Calendar */ #calendar {background-color: #ebebeb;} #calendar-slider-controls {width:90%; height:42px; margin:0 auto 30px; padding-top:50px; position:relative} #calendar-slider-control-left, #calendar-slider-control-month, #calendar-slider-control-right {display:inline-block} .rotate-180 { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg);} #calendar-slider-control-left {text-align: left; position: absolute; left: 0; bottom: 0;} #calendar-slider-control-left a {display:inline-block; width: 38px; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } #calendar-slider-control-month {text-align: center; padding-top: 10px; width:100%; font-family:"RandoDisplay-Regular", "Times New Roman", "serif"; font-size: 1.6em; text-transform: uppercase} #calendar-slider-control-right {text-align: right; position:absolute; right:0; bottom:0;} #calendar-slider-control-right a {display:inline-block; width: 38px; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } #calendar-controls {width:90%; margin:10px auto 60px; border-top:1px solid #000; border-bottom:1px solid #000; height:58px; overflow: hidden;} #calendar-controls ul {height: 58px; margin:0; padding:0; list-style:none; position:relative; display:flex; } #calendar-controls li {display: inline-block; margin: 0; border-right: 1px solid #000; font-size: 13px; padding: 20px; align-self: center;} #calendar-controls li span {margin-right: 10px; padding: 2px; border-radius: 50%; background-color:#ccc; color:#fff; font-family:'NotoSans',Sans-Serif; font-size: 11px; display:inline-block; width:20px; height:20px; text-align:center } #calendar-controls li:last-child {border-right:none; } #calendar-controls .calendar-search-form-label {margin:0 .3em 0 0; display: inline-block; background-image:url(../../images/button-submit-search.svg); background-repeat: no-repeat; background-size: 20px; background-position: left center; padding-left: 2em;} #calendar-controls .calendar-search-form-label::after {content:"."; padding-left:.5em; font-size:1.4em;} form.calendar-search-form {margin:0; padding:0; display:inline-block;} form.calendar-search-form input[type="text"] {margin:0; display:inline-block; border:none; background: transparent;} form.calendar-search-form input[type="text"]:focus {background:#fff; border:0;} form.calendar-search-form input[type="submit"] {display:inline-block; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } form.calendar-search-form input[type="submit"]:hover {border:none; background-color:#ebebeb } #calendar-content {display: inline-block; padding-bottom:60px;} #calendar-content-grid {width:44%;} #calendar-content-results {width:50%;} #calendar-content-grid {margin-right:6%;} #calendar-content {width:90%; margin:40px auto 0; display:flex; flex-wrap: wrap; } #calendar-content table.grid {border-top: 1px solid #000;} #calendar-content table.grid {width: 100%} #calendar-content table.grid tr {height:60px;} #calendar-content table.grid td {vertical-align: middle; border-bottom:1px solid #000; text-align:center; font-family:'NotoSans',Sans-Serif; font-size: 11px; width:14%} #calendar-content table.grid td a.event-link {outline: 0; text-decoration: none; vertical-align: middle; position: relative;} #calendar-content table.grid td.prev-next-month {color:rgba(0,0,0,0.4)} #calendar-content table.grid td span {padding: 2px; border-radius: 50%; background-color: #ccc; color: #fff; font-family: 'NotoSans',Sans-Serif; font-size: 11px; display: inline-block; width: 20px; height: 20px; text-align: center; } #calendar-content table.grid td span:nth-child(even) {position:absolute; left:-6px; top:-6px;} .calendar-content-results-content {width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap;} .calendar-content-results-content .grid-item {width: 48%; display: flex; flex-wrap: wrap; background-color: #fff; margin: 0 2%; border-bottom: 1px solid #000;} .calendar-content-results-content .grid-item:nth-child(2n) {margin-right:0;} .calendar-content-results-content .grid-item:nth-child(2n+1) {margin-left:0;} .calendar-content-results-content .grid-item-picture { width: 386px; height: 220px; display: inline-block; margin: 0 auto; overflow: hidden; margin-bottom: 18px;} .calendar-content-results-content .grid-item-info {width:100%; margin: 0 16% 0 8%; height: 184px; position: relative;} .calendar-content-results-content .grid-item-info .grid-item-type { position:absolute; top:8px; right:-18%;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type {width:100%; margin:0; height:58px; overflow:hidden; text-align:right;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type ul { margin:10px 0 0 0; padding:0; list-style:none; position: relative; display:inline-block; text-align:right;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type li { display:inline-block; margin:0; font-size: 3px; align-self:center; text-transform:uppercase; vertical-align:top;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type li span { margin-left:10px; padding:2px; border-radius:50%; background-color:#ccc; color:#fff; font-family: 'NotoSans',Sans-Serif; font-size:11px; display:inline-block; width:20px; height:20px; text-align: center;} /* END Calendar */ /* Performance - Banner */ #performance-banner {background-color: #000;} #performance-banner-content {width:100%; height:450px; background-color: #000; position:relative; overflow:hidden; display:flex;} #performance-banner-content img {width:100%; height:100%; object-fit:cover;} #performance-banner-content a {color:#fff;} .performance-banner-half-area {width:50%; height:100%; display:flex; flex-wrap:wrap;} #performance-banner-picture {width:100%; display:inline-block; overflow: hidden; position:relative;} #performance-banner-picture-content {display:flex; height:100%; width:100%; position: absolute;} .performance-banner-bg-picture {display:flex; height:100%; width:100%; position: absolute;} #performance-banner-data {color:#fff; align-self:center; width:100%; text-align:center;} #performance-banner-data h2, #performance-banner-data h3 {color:#fff; text-transform: uppercase; font-family: "RandoDisplay-Regular", "Times New Roman", "serif"; font-weight:100; padding:0 15%;} #performance-banner-data h2 {font-size: 3em; margin: 0 0 .5em 0;} #performance-banner-data h3 {font-size: 1.8em; line-height: 1.2em; } #performance-banner-data .performance-banner-data-sous-titre {margin-top: 1em; display: inline-block; font-family: 'PlaidM',Sans-Serif;} /* END Performance - Banner */ /* Performance - Data */ #performance-content {border-bottom:1px solid #000; padding-bottom:40px;} .performance-offset {margin-left: 80px !important; margin-right: 80px !important; margin-top:60px;} #performance-main {display:inline-block; width:61%; vertical-align:top; border-top:1px solid #000; padding:0; margin-right:5%;} #performance-main-event-type {width:100%; margin:0 auto 40px; height:58px; overflow: hidden;} #performance-main-event-type ul {height: 58px; margin:0; padding:0; list-style:none; position:relative; display:flex; } #performance-main-event-type li {display: inline-block; margin: 0; font-size: 13px; padding: 20px; align-self: center; text-transform: uppercase} #performance-main-event-type li span {margin-right: 10px; padding: 2px; border-radius: 50%; background-color:#ccc; color:#fff; font-family:'NotoSans',Sans-Serif; font-size: 11px; display:inline-block; width:20px; height:20px; text-align:center } #performance-main-event-type li:first-child {padding-left:0; } #performance-main-event-type li:last-child {border-right:none; } .performance-main-headline {font-size:1.5em; line-height:1.4em; margin:0 0 30px 20px; width:82%;} .performance-main-abstract {margin:0 0 0 29%;} .performance-main-summary {font-size:1em; line-height:1.6em; margin:0 0 15px 0;} .performance-main-media-slider {} .performance-main-credits {font-family:'NotoSans',Sans-Serif; font-size: 11px;} #performance-side {display:inline-block; width:33%; vertical-align:top; border-top:1px solid #000; padding:0} #performance-side h2 {margin:30px 0; padding:0; text-transform:uppercase; font-family: "RandoDisplay-Regular", "Times New Roman", "serif"; font-size:1.5em; } #performance-associated-event {padding:0 0 10px 20px; border-bottom:1px solid #000;} #performance-associated-event-row {display: flex;} #performance-associated-event-title-area, #performance-associated-event-picture-area {width: 50%; display: flex; overflow: hidden; flex-direction: row;} #performance-associated-event-title-area {margin-right:10px;} #performance-associated-event-picture { width: 188px; height: 120px; display: inline-block; overflow: hidden; position: relative;} #performance-associated-event-picture-area img {width: 100%; height: 100%; object-fit: cover;} #performance-agenda {padding:0; border-bottom:1px solid #000;} #performance-agenda h2 {padding:0 20px 18px 20px; margin-bottom:10px;} #performance-agenda table {border-top: 1px solid #000;} #performance-agenda table.list {width: 100%} #performance-agenda table.list tr {height:50px;} #performance-agenda table.list tr.soldout td {color:rgba(0,0,0,0.3)} #performance-agenda table.list td {vertical-align: middle; border-bottom:1px solid #000; } #performance-agenda table.list td:first-child {padding-left:20px; } #performance-agenda table.list td:last-child {padding-right:20px; text-align:right } .performance-agenda-day, .performance-agenda-soldout, .performance-agenda-last-seats, #performance-agenda-duration {font-family:'NotoSans',Sans-Serif; font-size: 11px; text-transform: uppercase} #performance-agenda table.list tr.soldout td .performance-agenda-soldout {color:rgba(0,0,0,1)} #performance-agenda-duration {height:50px; display: flex; width: 100%; padding-left: 20px;} #performance-agenda-duration span {align-self: center; } #performance-press {padding:0 20px 10px 20px; border-bottom:1px solid #000;} #performance-press p {margin:0; padding:0;} .press-row-abstract {margin-bottom:20px;} #performance-press h3 {margin:0; padding:0; text-transform:none; font-family:'PlaidM',Sans-Serif; font-size:1em; } .press-row-abstract p {font-family:'NotoSans',Sans-Serif; font-size: 11px;} #performance-download-files { margin: 20px 0; } #performance-download-files a { padding: 0 20px 10px 20px; } #performance-download-files-formholder {display:inline-block; width:100%; margin-top: 20px; background-color:#F7F7F7; padding:10px;} .performance-download-files-form-label {margin:0 .3em 0 0; display: inline-block; background-image:url(../../images/button-submit-lock.svg); background-repeat: no-repeat; background-size:16px; background-position: left center; padding-left: 2em;} .performance-download-files-form-label::after {content:"."; padding-left:.5em; font-size:1.4em;} form.performance-download-files-form {margin:0; padding:0; display:inline-block; } form.performance-download-files-form input[type="password"] {margin:0; display:inline-block; border:none; background: transparent; width:170px;} form.performance-download-files-form input[type="password"]:focus {background:#fff; border:0;} form.performance-download-files-form input[type="submit"] {display:inline-block; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } form.performance-download-files-form input[type="submit"]:hover {border:none; background-color:#ebebeb } /* END Performance - Data */ /* Team grid */ #team-grid {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;} .team-grid-item {width: 33%; margin-bottom: 20px;} .team-grid-item-inner {padding: 0 20px 0 0;} .team-grid-item-picture {width: 100%; height: 170px; display: inline-block; margin: 0 auto; overflow: hidden; margin-bottom: 18px; background-color: #f2f2f2;} .team-grid-name, .team-grid-function, .team-grid-email {display: inline-block; vertical-align: top; width: 100%;} .team-grid-name {font-size: 1.2em; margin-bottom: .5em} .team-grid-function {margin-bottom: 8px;} .team-grid-function, .team-grid-email {font-family: 'NotoSans',Sans-Serif; font-size: .8em; line-height: 1.2em;} /* END Team grid */ /* Standard page - Data */ #standard-page-content {border-top:1px solid #000; border-bottom:1px solid #000; padding-bottom:40px;} .standard-page-offset {margin-left: 80px !important; margin-right: 80px !important; margin-top:60px;} #standard-page-main {display:inline-block; width:61%; vertical-align:top; padding:0; margin:0 17% 0 20px;} #standard-page-side {display:inline-block; width:20%; vertical-align:top; padding:0;} #standard-page-main h1 {font-size:1em; line-height:1.4em; margin:10px 0 60px 0; } #standard-page-main h2 {font-size:1.4em; line-height:1.4em; margin:10px 0 20px 0; text-transform: inherit; border-bottom:1px solid #000; display:inline-block;} #standard-page-main h3 {font-size:1.4em; line-height:1.4em; margin:10px 0; text-transform: inherit; } #standard-page-main a:hover {text-decoration:underline;} .standard-page-main-headline {font-size:1.5em; line-height:1.4em; margin:0 0 20px 0; width:82%;} .standard-page-main-abstract {width:82%; margin:0 0 60px 0;} .standard-page-main-section img {margin:20px 0 0; max-width: 100%; height:auto;} .standard-page-main-section {margin:0 0 30px 22%;} #standard-page-side #side-menu {margin:90px 0 0 0; padding:0; } #standard-page-side #side-menu li {font-size: 1.4em; line-height: 1.2em; margin: 0; padding: 0 0 .4em 0;} #standard-page-side #side-menu li a {color:rgba(0,0,0,0.4)} #standard-page-side #side-menu li a.active, #standard-page-side #side-menu li a:hover, #standard-page-side #side-menu li a:active {color:rgba(0,0,0,1.00)} #side-menu > li > .side-menu-sublevel > li {font-size: 18px!important; line-height: 1.2em!important; margin: 0!important; padding: 0 0 .4em 0!important;} ul.side-menu-sublevel li a {color:rgba(0,0,0,0.4)!important} ul.side-menu-sublevel li a.active, ul.side-menu-sublevel li a:hover, ul.side-menu-sublevel li a:active {color:rgba(0,0,0,1.00)!important} #standard-download-files { margin: 20px 0; } #standard-download-files a { padding: 0 20px 10px 20px; } #standard-download-files-formholder {display:inline-block; width:100%; background-color:#F7F7F7; padding:10px;} .standard-download-files-form-label {margin:0 .3em 0 0; display: inline-block; background-image:url(../../images/button-submit-lock.svg); background-repeat: no-repeat; background-size:16px; background-position: left center; padding-left: 2em;} .standard-download-files-form-label::after {content:"."; padding-left:.5em; font-size:1.4em;} form.standard-download-files-form {margin:0; padding:0; display:inline-block; } form.standard-download-files-form input[type="password"] {margin:0; display:inline-block; border:none; background: transparent; width:170px;} form.standard-download-files-form input[type="password"]:focus {background:#fff; border:0;} form.standard-download-files-form input[type="submit"] {display:inline-block; border:none; background: transparent; color:transparent; margin: 0; padding: 6px 5px; background-image:url(../../images/button-submit-arrow.svg); background-repeat: no-repeat; background-size: cover; background-size: 90%; height: 30px; background-position: center center; } form.standard-download-files-form input[type="submit"]:hover {border:none; background-color:#ebebeb } #logo-sponsoring img {display:inline-block; height:40px; padding-left:30px;} .video-legend {margin:10px 0 30px; font-family:'NotoSans',Sans-Serif; font-size: 11px;} img.publication { max-width: 250px; display: block; margin-bottom: 20px;} /* #Media Queries ================================================== */ @media only screen and (max-width: 1400px) { #banner-right-menu li#banner-tickets-button {padding: 0 50px;} #home-subscribe-button {padding: 0 15%;} #footer-bottom-blocks .four.columns, #footer-bottom-blocks .eight.columns {font-size:12px;} #footer-location-content, #footer-contact-content, #footer-social-networks-content {margin-top:1em; font-size:1em;} #footer-contact-content {margin-left: 10px;} #footer-social-networks-content {margin-left:40px; } #footer-social-networks-links, #footer-social-networks-copyrights {margin: 0;} .grid-item-picture {width: 320px; height: 200px;} #performance-associated-event {padding:0 0 10px 0;} #performance-agenda h2 {padding:0 0 10px 0;} #performance-agenda table.list td:first-child {padding-left:0;} #performance-agenda table.list td:last-child {padding-right:0;} #performance-press {padding:0 0 10px 0;} .performance-main-abstract {margin: 0 0 0 19%;} #performance-agenda-duration {padding-left:0;} #standard-page-side {width:19%; } .standard-page-main-section {margin: 0 0 30px 12%;} .calendar-content-results-content .grid-item-info .grid-item-type {position: relative;top: 0;right: 0;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type {width: auto;margin: 0;height: auto;overflow: hidden;text-align: right;display: inline-block;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type ul {margin: 0;} .calendar-content-results-content .grid-item-info .buttonlike.standard {vertical-align: top;} .grid-item-title.calendar {font-size: 1.2em;} } @media only screen and (max-width: 1119px) { #banner-right-menu li#banner-tickets-button {padding: 0 30px;} .homebanner-half-area, .homebanner-quarter-area {width:100%;} #home-subscribe-content h2 {font-size:2.4em;} form.footer-newsletter-form input[type="text"] {width: 190px;} #footer-social-networks-links, #footer-social-networks-copyrights {margin: 0;} .grid-item-picture {width: 275px; height: 180px;} #performance-banner .container {width:100%} #performance-banner-content {flex-direction:column;} .performance-banner-half-area {width:100%;} .performance-banner-half-area.right {position:absolute;} .performance-main-abstract {margin:0;} .performance-main-headline {margin:0 0 30px 0; width:100%;} .standard-page-main-headline {margin:0 0 30px 0; width:100%;} .standard-page-main-abstract {margin:0;} .standard-page-main-section {margin: 0 0 30px 0;} #standard-page-main {width:61%; margin:0 16% 0 0;} team-grid-item {width: 50%;} } @media only screen and (max-width: 959px) { #banner-right-menu li#banner-tickets-button {padding: 0 7px;} #main-menu li {padding: 0 20px 0 0;} #main-menu li a {font-size: 1em;} #homebanner-content {flex-direction: column;} .homebanner-half-area {width: 100%;} .homebanner-quarter-area {width: 50%;} .homebanner-half-area.left {height: 60%;} .quarter-label {padding: 0 8% 7% 8%;} #home-subscribe-button {padding: 0 10%;} #home-subscribe-content h2 {font-size:2.4em;} .footer-offset {margin-left:10px!important;} #footer-newsletter-content {margin-left:10px;} #footer-bottom-blocks .four.columns, #footer-bottom-blocks .eight.columns {display: inline-block;} #footer-bottom-blocks .four.columns {width:48%;} #footer-legal-newsletter {background-color: #ebebeb; height: auto;} form.footer-newsletter-form input[type="text"] {width: 190px;} #footer-contact-content, #footer-social-networks-content {margin-left:10px; } #footer-social-networks-links, #footer-social-networks-copyrights {margin: 0;} #footer-social-networks-links {bottom:inherit; position:relative;} #footer-legal li::after {padding-left: .2em;} #footer-legal li {margin:0;} .shortcuts-overlay-footer-half {width:100%; text-align:center;} a.shortcuts-overlay-link, #main-menu li .main-menu-level-2 a {font-size: 2.8em;} .grid-item {width:49%} .grid-item-picture {width:320px; height: 200px;} .performance-offset {margin-left: 40px !important; margin-right: 40px !important; } .standard-page-offset {margin-left: 40px !important; margin-right: 40px !important; } #performance-main {width:100%; margin-right:0;} #performance-side {width:100%; } .performance-main-headline {margin:0 0 30px 0; width:100%;} .performance-main-abstract {margin:0;} #performance-associated-event {padding: 0 0 40px 0; } #performance-agenda {padding: 0 0 40px 0; } #performance-press {padding: 0 0 40px 0; border-bottom:none;} #standard-page-main {width:100%; margin-right:0;} #standard-page-side {width:100%; } .standard-page-main-headline {margin:0 0 30px 0; width:100%;} .standard-page-main-abstract {margin:0;} #calendar-content-grid {width:100%; margin: 0 0 50px 0;} #calendar-content-results {width:100%; margin: 0 0 50px 0;} .grid-item-date.calendar, .grid-item-title.calendar, .grid-item-casting.calendar {width: 200px;} .calendar-content-results-content .grid-item-info {width: 100%; margin: 0 16% 0 8%; height: 184px; position: relative;} .calendar-content-results-content .grid-item-info .grid-item-type {position: absolute; top: 8px; right: -18%; text-align: right;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type {width: 100%; margin: 0; height: 58px; overflow: hidden; text-align: right;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type ul { margin: 10px 0 0 0; padding: 0; list-style: none; position: relative; display: inline-block; text-align: right;} .calendar-content-results-content .grid-item-info .grid-item-type .performance-main-event-type li { display: inline-block; margin: 0; font-size: 3px; align-self: center; text-transform: uppercase; vertical-align: top;} .team-grid-item {width: 33%;} } @media only screen and (max-width: 767px) { #home-splash-logo img {width: 400px;} #home-splash h1 {font-size: 1.em;} #mobile-tickets-button a {display: inline-block;} .homebanner-half-area, .homebanner-quarter-area {width: 100%;} .homebanner-half-area.left {height: 30%;} .homebanner-half-area.left #homebanner-season-area .label {font-size: 1.8em;} #home-subscribe-button {padding: 0 10%;} #home-subscribe-content h2 {font-size: 2.4em;} .footer-offset {margin-left: 10px !important;} #footer-newsletter-content {margin-left: 10px;} #footer-bottom-blocks .four.columns, #footer-bottom-blocks .eight.columns {width: 100%;} #footer-legal-newsletter {background-color: #ebebeb;height: auto;} form.footer-newsletter-form input[type="text"] {width: 190px;} #footer-location-content, #footer-contact-content, #footer-social-networks-content {height: auto; margin-top: 1em; font-size: 1em} #footer-contact-content, #footer-social-networks-content {margin-left: 10px;} #footer-social-networks-links, #footer-social-networks-copyrights {margin: 0;} #footer-social-networks-links {bottom: inherit;position: relative;} .shortcuts-overlay-footer-half {width: 100%;text-align: center;} #season-grid-content, #season-grid-controls {width: 100%;} .grid-item {width: 100%;} .grid-item-picture {width: 100%; height: 250px;} #season-grid-controls, #season-grid-controls li {border: none;} #season-grid-controls li {padding: 0 20px 10px 0;} #season-grid-controls ul {border: none;height: auto;display: inline-block;} #season-grid-controls {height: auto;} #homebanner-content {height: 900px;} .performance-offset {margin-left: 0px !important;margin-right: 0px !important;} .standard-page-offset {margin-left: 0px !important; margin-right: 0px !important;} .calendar-content-results-content .grid-item {width: 100%;margin: 0 0 20px 0;} .calendar-content-results-content .grid-item, .calendar-content-results-content .grid-item:nth-child(2n), .calendar-content-results-content .grid-item:nth-child(2n+1) {margin: 0 0 20px 0;} #calendar-controls {margin: 10px auto 40px; border-bottom: 0; height: auto;} #calendar-controls ul {height: auto;margin: 0;padding: 0;display: inline-block;} #calendar-controls li {display: inline-block;margin: 0;border-right: 0;font-size: 13px;padding: 5px 0;align-self: center;width: 100%;} .team-grid-item {width: 50%;} } @media only screen and (max-width: 480px) { #home-splash-logo img {width: 300px;} #home-splash h1 {font-size: 1.2em;} #homebanner .container {width:100%} #home-subscribe .container {width:100%} #calendar-slider-control-month {font-size: 1.4em;} #calendar-content table.grid td span {font-size: 9px;} .grid-item-date.calendar, .grid-item-title.calendar, .grid-item-casting.calendar {width:150px;} .grid-item-title.calendar {font-size: 1.2em;} .homebanner-half-area.left #homebanner-season-area .label {font-size: 1.8em;} .grid-item-picture {width: 100%; height: 200px;} .grid-item-info {margin: 0 16% 0 0;} .team-grid-item {width: 100%;} .team-grid-item-inner {padding: 0;} }