@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700'); /* GENERIC ============================================================================================================================================ */ html { height: 100%; box-sizing: border-box; font-size: 14px; } .invalid { border: 4px solid #d60; } *, *:before, *:after { box-sizing: inherit; } body { position: relative; min-height: 100%; overflow-x: hidden; font-family: 'Roboto', sans-serif; font-weight: 300; color: #666; font-size: 1rem; line-height: 1.2rem; //background: url('images/LogoFond.svg') center center no-repeat fixed, #fff; background: #fff; margin: 0px; } .dN{ display : none; } button:focus, button:active { outline: none !important; box-shadow: none; } .btn:focus, .btn:active { outline: none !important; box-shadow: none !important; } a, #a, fab { color: #d60; text-decoration: none; outline: 0; } a:hover, #a:hover, fab:hover{ color: #9a4700; text-decoration: none; cursor: pointer; } p{ margin-bottom: .5rem; } b{ font-weight: 700; } video{ padding-top: .5rem; } mark{ background-color: transparent; font-weight: 700; color: #4dcdcf; margin: -.2rem; } .progress{ border-color: #ccc; } .progress-bar { color: #666; background-color: #eeb27f; } .fa-user{ color: #fff; } #menuAdmin{ display: none; } .myuser{ color: #fff; height: 1.6rem; margin-bottom: 1rem; } .validmessages{ color: #fff; } .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th, .table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border: 1px solid #999; } .table-bordered2 > tbody > tr > td, .table-bordered2 > tbody > tr > th, .table-bordered2 > thead > tr > td, .table-bordered2 > thead > tr > th { padding: 7px; border: 1px solid #333; } /* MASONRY ============================================================================================================================================ */ .card { border-radius: 0; border: .1rem solid rgba(0, 0, 0, .075); box-shadow: 0 0 .8rem rgba(0, 0, 0, .075); margin: .5rem !important; //transition: transform .4s ease; } .card:hover { //transform: scale(1.05); } .cardnoscale { background-color: rgba(255, 255, 255, 0.5); border-radius: 0; border: .1rem solid rgba(0, 0, 0, .075); box-shadow: 0 0 .8rem rgba(0, 0, 0, .075); margin: .5rem !important; } .archived{ opacity: 30%; } .incomplet{ background-color: #eaa366; } .highlighted{ background-color: rgba(221, 102, 0, 0.2); } .card-text br { margin-bottom: .5rem; } .lastmemberslogo img{ max-width: 8rem; height: auto; } .documentslogo img{ max-width: 8rem; height: auto; } .allmembersadmin{ text-align: right; } .allmembersadmin .cxo{ text-align: left; } .allmembersadmin .fixed-btn{ background: none; border: none; padding: 2px; cursor: pointer; } .allmembersadmin .fa-edit, .allmembersadmin .fa-folder, .allmembersadmin .fa-folder-open, .allmembersadmin .fa-trash-alt{ color: #d60; font-size: 1rem; } .allmembersadmin .fa-edit:hover, .allmembersadmin .fa-folder:hover, .allmembersadmin .fa-folder-open:hover, .allmembersadmin .fa-trash-alt:hover{ color: #9a4700; } * { box-sizing: border-box; } .grid { /*max-width: 1200px; background: #FF0055;*/ } .newspage{ display: none; } /* clearfix */ .grid:after { content: ''; display: block; clear: both; } .grid-sizer, .grid-item { width: 33.3%; } .gridnews-sizer, .gridnews-item { width: 50%; } .grid-item--width2 { width: 66.666%; } .gridnews-item--width2 { width: 100%; } /* .grid-item--width3 { width: 60%; } .grid-item--height2 { height: 200px; } .grid-item--height3 { height: 260px; } .grid-item--height4 { height: 360px; } */ @media (max-width: 575px) { .grid-sizer, .grid-item { width: 100%; } } @media (min-width: 576px) and (max-width: 767px) { .grid-sizer, .grid-item { width: 50%; } .grid-item--width2 { width: 100%; } } @media (max-width: 575px) { .gridnews-sizer, .gridnews-item { width: 100%; } } @media (min-width: 576px) and (max-width: 767px) { .gridnews-sizer, .gridnews-item { width: 100%; } .grid-item--width2 { width: 100%; } } /* POPOVERS ============================================================================================================================================ */ .launcher{ //position: relative; //z-index: 9999; } /*.mypop{ position: fixed; z-index: 9999; width: 80%; left: 10%; top: 30vh; border: 1px solid #ccc; background-color: rgba(255, 255, 255, 0.9); padding: 1rem; align: center; color: #333; pointer-events: none; }*/ .mypop{ border: 1px solid #ccc; background-color: rgba(0, 0, 0, 0.7); padding: 1rem; align: center; color: #fff; pointer-events: none; width: 80%; left: 10%; top:50px; position:absolute; } /* SECTIONS ============================================================================================================================================ */ /*.centerflex { display: flex; display: -webkit-flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }*/ .centerflex { display: flex; flex-direction: column; align-items: center; justify-content: center; } .fullviewport{ height: 100vh; } /* smartphones, touchscreens */ @media (hover: none) and (pointer: coarse) { .fullviewport{ height: auto; } } .bottompad{ padding-bottom: 6rem; } .section-title{ font-weight: 400; font-size: 2rem; line-height: 2.2rem; color: #fff; text-shadow: .1rem .1rem .4rem black; } /* Calques */ .light { background-color: rgba(255, 255, 255, 0.5); z-index: 1000!important; } .lighter { background-color: rgba(255, 255, 255, 0.75); z-index: 1000!important; } .nocalk { z-index: 1000!important; } .dark { background-color: rgba(0, 0, 0, 0.2); z-index: 1000!important; } .darker { background-color: rgba(0, 0, 0, 0.5); z-index: 1000!important; } /* HISTORY ============================================================================================================================================ */ .history_icon{ transform: scale(.6); bottom:0; } .history_card { padding: 0; margin: 0; //background-color: rgba(255, 255, 255, 0.5); border-radius: 0; //border: .1rem solid rgba(0, 0, 0, .075); //box-shadow: 0 0 .8rem rgba(0, 0, 0, .075); //margin: .5rem !important; } .timeline { position:relative; z-index:1; } .myoverlay { background-image: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,1)); position:absolute; top:0; bottom:0; left:0; right:0; display:block; z-index:1000; pointer-events: none; } /* COMBIEN ============================================================================================================================================ */ #combien{ background: #d60; } #combien{ color: #333; } #wiskli a{ color: #333; } #wiskli a:hover{ color: #fff; } /* COMMENT ============================================================================================================================================ */ #comment1{ background: linear-gradient(rgba(221, 102, 0, 0.8), rgba(221, 102, 0, 0.8)), url('images/comment_bg.jpg') top center no-repeat fixed; background-blend-mode: multiply; //background: #d60; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #comment1{ background: linear-gradient(rgba(221, 102, 0, 0.8), rgba(221, 102, 0, 0.8)), url('images/comment_bg2.jpg') top center no-repeat fixed; background-blend-mode: multiply; } } #comment1{ color: #ccc; } #comment2{ background: linear-gradient(rgba(221, 102, 0, 0.8), rgba(221, 102, 0, 0.8)), url('images/comment_bg.jpg') top center no-repeat fixed; background-blend-mode: multiply; //background: #d60; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #comment2{ background: linear-gradient(rgba(221, 102, 0, 0.8), rgba(221, 102, 0, 0.8)), url('images/comment_bg2.jpg') top center no-repeat fixed; background-blend-mode: multiply; } } #comment2{ color: #ccc; } /* BUSINESS ============================================================================================================================================ */ #business{ background: url('images/business.jpg') top center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #business{ background: url('images/business.jpg') top center no-repeat, #fff; } } #business{ color: #fff; } /* SCHOOLS ============================================================================================================================================ */ #school1{ background: url('images/school1.jpg') center center no-repeat fixed, #fff; color: #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #school1{ background: url('images/school1.jpg') center center no-repeat, #fff; } } #school2{ background: url('images/school2.jpg') center center no-repeat fixed, #fff; color: #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #school2{ background: url('images/school2.jpg') center center no-repeat, #fff; } } .incubateurs{ opacity: .8; width: 80%; } @media (min-width: 1024px) { .incubateurs{ opacity: .8; width: 60%; } } .ecoles{ width: 100%; position: absolute; display: block; z-index: 1000; left: 50%; transform: translate(-50%, 0); } .condorcet{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 14%; top: 41%; left: 27%; } .epl{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 12%; top: 41%; left: 50%; } .henallux{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 7%; top: 51%; left: 55%; } .gramme{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 12%; top: 35%; left: 70%; } .ulg{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 12%; top: 45%; left: 70%; } .hepl{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 12%; top: 58%; left: 70%; } .schumann{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 8%; top: 72%; left: 60%; } .polytech{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 10%; top: 54%; left: 38%; } .venturelab{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 12%; top: 41%; left: 70%; } .yump{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 8%; top: 48%; left: 32%; } .startlab{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 10%; top: 57%; left: 30%; } .linkube{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 10%; top: 58%; left: 50%; } .yncubator{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 10%; top: 40%; left: 50%; } .heracles{ opacity: 1; position: absolute; display: block; z-index: 1000; width: 10%; top: 48%; left: 50%; } /* WHO ============================================================================================================================================ */ #who{ background: url('images/shuttle.jpg') top center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #who{ background: url('images/shuttle.jpg') top center no-repeat, #fff; } } #who a{ color: #333; } #who a:hover{ color: #d60; } #who .bigicon a:hover{ color: #d60; } /* NUMBERS ============================================================================================================================================ */ #numbers{ background: url('images/pexels2.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #numbers{ background: url('images/pexels2.jpg') top center no-repeat, #fff; } } .dataleft { text-align: left; } .dataright { text-align: right; } @media (max-width: 767px) { .dataright, .dataleft { text-align: center; } } .darkchiffres { background-color: rgba(0, 0, 0, 0.2); color: #ccc; text-align: center; padding: 1rem 2rem 2rem 4rem; z-index: 1000!important; padding: 1rem 0rem; } /* BELGIUM ============================================================================================================================================ */ /*#belgium .fixed { background-image: url('images/web4.jpg'); z-index: -1; }*/ #belgium{ background: url('images/web4.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #belgium{ background: url('images/web4.jpg') center center no-repeat, #fff; } } #belgium{ color: #333; } .namur{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 13%; top: 49%; left: 58%; } .mons{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 12%; top: 48%; left: 31%; } .charleroi{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 15%; top: 52%; left: 40%; } .bruxelles{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 15%; top: 29%; left: 51%; } .gembloux{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 17%; top: 43%; left: 53%; } .lln{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 22%; top: 38%; left: 50%; } .liege{ opacity: .8; position: absolute; display: block; z-index: 1000; width: 11%; top: 41%; left: 80%; } .leslogos{ margin-left: -4rem; transform: scale(0.9, 0.9); } .aic{ position: absolute; display: block; z-index: 1000; bottom: 3.8rem; left: 9rem; } .esa{ position: absolute; display: block; z-index: 1000; bottom: 9.5rem; left: 0rem; } .nbia{ position: absolute; display: block; z-index: 1000; bottom: 6.7rem; left: 9rem; } .technoport{ position: absolute; display: block; z-index: 1000; bottom: 6.5rem; left: 0rem; } .calpoly{ position: absolute; display: block; z-index: 1000; bottom: 3.5rem; left: 0rem; } .texas{ position: absolute; display: block; z-index: 1000; bottom: 0rem; left: 19rem; } .ubi{ position: absolute; display: block; z-index: 1000; bottom: 0rem; left: 9rem; } .tides{ position: absolute; display: block; z-index: 1000; bottom: 0rem; left: 0rem; } /* SUPPORT ============================================================================================================================================ */ #support{ background: url('images/labs3.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #support{ background: url('images/labs3.jpg') center center no-repeat fixed, #fff; } } /* TEAM & LASTMEMBERS ============================================================================================================================================ */ #team{ background: url('images/labs.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #team{ background: url('images/labs.jpg') center center no-repeat, #fff; } } #lastMembers{ background: url('images/labs.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #lastMembers{ background: url('images/labs.jpg') center center no-repeat, #fff; } } .card-img-top{ border-radius: 0; } .owl-stage{ display:flex; } .card{ height: 100%; } .card_v{ width: 100%; } .owl-theme{ } .owl-dot span { background: #eeb27f !important; } .owl-dot.active span, .owl-dot:hover span { background: #d60!important; } .gray{ transition: filter .5s ease-in-out; } .gray{ filter: grayscale(100%); } .gray:hover{ filter: grayscale(0%); } .gray:active{ filter: grayscale(0%); } /* TAGCLOUD ============================================================================================================================================ */ /*#tagCloud .fixed { background-image: url('images/dell_burn.jpg'); z-index: -1; }*/ #tagCloud{ background: url('images/dell_burn.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #tagCloud{ background: url('images/dell_burn.jpg') center center no-repeat, #fff; } } #myCanvas{ width: 100%; height: 200px; padding-bottom: 2rem; } @media (min-width: 992px) { #myCanvas{ width: 100%; height: 320px; } } @media (min-width: 1200px) { #myCanvas{ width: 100%; height: 360px; } } .lightTags ul li{ color: #fc0; } /* MATMAX ============================================================================================================================================ */ .iframe-container { overflow: hidden; padding-top: 100%; position: relative; } .iframe-container iframe { //padding: .5rem; margin-top: -5.5rem; border: 0; height: 130%; left: 0; position: absolute; top: 0; width: 100%; } .matmax-text { color: #333; } .matmax-text a { color: #333; } .matmax-text a:hover { color: #fff; } /* PROJECT ============================================================================================================================================ */ #project{ background: url('images/circuit.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #project{ background: url('images/circuit.jpg') center center no-repeat, #fff; } } #project{ color: #ccc; } #project a:hover{ color: #fff; } #project .bigicon a:hover{ color: #fff; } /* SLP ============================================================================================================================================ */ #slp{ background: url('images/slp_bg.jpg') center center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #slp{ background: url('images/slp_bg.jpg') center center no-repeat, #fff; } } #slp{ color: #ccc; } #slp a:hover{ color: #fff; } /* THELABS ============================================================================================================================================ */ #thelabs{ background: url('images/labo1.jpg') left center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #slp{ background: url('images/slp_bg.jpg') center center no-repeat, #fff; } } #thelabs{ color: #333; } #thelabs a:hover{ color: #000; } /* Startech ============================================================================================================================================ */ #startech{ background: url('images/st.jpg') top center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #wiskli{ background: url('images/green_bg.jpg') center left no-repeat, #fff; } } #startech{ color: #333; } #slp a:hover{ color: #fff; } .news_card { height: 100%; padding: 1rem; margin: .5rem; background-color: rgba(255, 255, 255, 0.7); border-radius: 0; //border: .1rem solid rgba(0, 0, 0, .075); //box-shadow: 0 0 .8rem rgba(0, 0, 0, .075); //margin: .5rem !important; } /* WISKLI ============================================================================================================================================ */ #wiskli{ background: url('images/wiskli_bg.jpg') top center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #wiskli{ background: url('images/wiskli_bg.jpg') center center no-repeat, #fff; } } #wiskli{ color: #333; } #wiskli a{ color: #333; } #wiskli a:hover{ color: #fff; } /* GREENBOOSTER ============================================================================================================================================ */ #greenbooster{ background: url('images/green_bg.jpg') bottom center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #greenbooster{ background: url('images/green_bg.jpg') center left no-repeat, #fff; } } #greenbooster{ color: #333; } #greenbooster a{ color: #333; } #greenbooster a:hover{ color: #fff; } /* INSCRIPTION ============================================================================================================================================ */ #inscription{ background: url('images/medtech_bg.jpg') bottom center no-repeat fixed, #fff; color: #333; } /* MEDTECHPROGRAM ============================================================================================================================================ */ #medtechprogram{ background: url('images/medtech_bg.jpg') bottom center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #medtechprogram{ background: url('images/medtech_bg.jpg') center left no-repeat, #fff; } } #medtechprogram{ color: #333; } #medtechprogram a{ color: #d60; } #medtechprogram a:hover{ color: #9a4700; } /* TRLISO ============================================================================================================================================ */ #trliso{ background: url('images/trliso_bg.jpg') bottom center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #trliso{ background: url('images/trliso_bg.jpg') bottom left no-repeat, #fff; } } #trliso{ color: #DDD; } #trliso a{ color: #fff; } #trliso a:hover{ color: #fff; } /* MEDTECHCOM ============================================================================================================================================ */ #medtechcom{ background: url('images/doigt_bg.jpg') top left no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #trliso{ background: url('images/doigt_bg.jpg') top left no-repeat, #fff; } } #medtechcom{ color: #ccc; } #medtechcom a{ color: #fff; } #medtechcom a:hover{ color: #f15f22; } /* TRLISO2 ============================================================================================================================================ */ #trliso2{ background: url('images/trliso_bg.jpg') bottom center no-repeat fixed, #fff; } /*-------- iPads (portrait and landscape) --------*/ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { #trliso2{ background: url('images/trliso_bg.jpg') bottom left no-repeat, #fff; } } #trliso2{ color: #333; } #trliso2 a{ color: #000; } #trliso2 a:hover{ color: #000; } /* CONTACTFORM ============================================================================================================================================ */ /*#contactform .fixed { background-image: url('images/fibo_1.svg'); z-index: -1; }*/ .googlemap{ height: 660px; } #contactform{ color: #666; } /* STYLING ============================================================================================================================================ */ .acolor{ color: #d60; } .back-acolor{ background-color: #d60; } .memberlogo img{ //max-height : 8rem; //width: auto; } .myborder{ border: 1px solid #ccc; } .hidden{ display : none; } .mymargintop1{ margin-top: 0.2rem; } #a2aright{ display: flex; justify-content: right; } .spaceattop{ padding-top: 5rem; } .firstdiv{ padding-bottom: .2rem; } .tobottom{ position: absolute; bottom: 0; } .alignbottom{ bottom: 0; } .set_totalimages{ font-weight: 400; font-size: 0.9rem; padding-bottom: .5rem; } .thumb{ padding: .2rem; } /*--- Enleve les decos obtrusives de Firefox --*/ select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { border: none; } /*--- Enleve le jaune pale des input autofill --*/ input { filter: none; } /*--- Fin enleve les decos obtrusives de Firefox --*/ .grow { transition: all .2s ease-in-out; } .grow:hover { transform: scale(1.1); } TEXT STYLING ============================================================================================================================================ */ .color1{ color: #666; } .color2{ color: #d60; } .text700{ font-weight: 700; } .text400{ font-weight: 400; } .text300{ font-weight: 300; } .text0{ font-size: 2rem; line-height: 2.2rem; } .text1{ font-size: 1.6rem; line-height: 1.8rem; } .text2{ font-size: 1.2rem; line-height: 1.4rem; } .text3{ font-size: 1rem; line-height: 1.2rem; } .bigicon{ font-size: 3.6rem; line-height: 4rem; } .poppy{ font-weight: 400; } .tooltip-inner { //max-width: 200px; //padding: 3px 8px; //color: #fff; //text-align: center; background-color: #fff; border: 1px solid #ccc; //border-radius: .25rem; } .tooltip-main { color: #d60; font-size: .8rem; line-height: 1rem; padding:0; //margin-top: 1rem; overflow: hidden; font-family: 'Open Sans', sans-serif; background-color: #fff; font-weight: 300; text-align: center !important; } .softweb a{ color: #666; font-weight: 400; } .softweb a:hover{ color: #d60; font-weight: 400; } .title_1{ color: #666; font-weight: 700; font-size: 1.4rem; line-height: 1.6rem; padding-bottom: .2rem; } .title_first{ color: #d60; font-weight: 700; font-size: 1.2rem; line-height: 1.4rem; padding-bottom: .2rem; } .title_next{ color: #d60; font-weight: 700; font-size: 1.2rem; line-height: 1.4rem; padding-top: .8rem; padding-bottom: .2rem; } .titlenews{ margin-top:.5rem; font-weight: 700; font-size: 1.5rem; line-height: 1.6rem; color: #d60; } .titlenewspinned{ font-weight: 700; color: #d60; } .titlenews a, .titlenewspinned a{ font-weight: 700; color: #d60; cursor: pointer; } .titlenews a:hover, .titlenewspinned a:hover{ font-weight: 700; color: #9a4700; cursor: pointer; } .newsbigtitle{ font-weight: 700; color: #d60; font-size: 1.8rem; line-height: 2rem; } .newshead{ color: #9a4700; font-weight: 400; font-size: 1.2rem; line-height: 1.4rem; } .titlecat{ font-size: 1.2rem; line-height: 1.4rem; cursor: pointer; padding-bottom: .2rem; display: inline-block; position: relative; transition: 0.5s; } .titlecat:before { font-weight: 400; color: #9a4700; content: '> '; position: relative; margin-left: -1rem; opacity: 0; left: 0rem; transition: 0.5s; } .titlecat:hover{ color: #9a4700; padding-left: 1rem; transition: 0.5s; } .titlecat:hover:before { color: #9a4700; display: inline; opacity: 1; transition: 0.5s; } .titlefilm{ font-size: 1.2rem; line-height: 1.4rem; cursor: pointer; padding-bottom: .2rem; display: inline-block; position: relative; transition: 0.5s; } .titlefilm:before { font-weight: 700; color: #9a4700; content: '>'; position: relative; margin-left: -1rem; opacity: 0; left: 0rem; transition: 0.5s; } .titlefilm:hover{ padding-left: 1rem; transition: 0.5s; } .titlefilm:hover:before { display: inline; opacity: 1; transition: 0.5s; } .titlefilm2{ font-size: 1rem; line-height: 1.2rem; padding-bottom: .2rem; } #facebooktwitter { float: right; } .alignright { text-align: right; } .aligncenter { text-align: center; } .smalltext { font-size: 0.8rem; line-height: 0.8rem; } .legende { font-size: 0.8rem; position: absolute; z-index:2; top: -.25rem; } .newslegende { margin-left: .4rem; width: 100%; font-weight: 700; font-size: 0.9rem; line-height: 1rem; position: absolute; bottom: 0; } .newsdate { width: 100%; font-weight: 400; font-size: 0.8rem; line-height: 1rem; } .newslire{ width: 100%; } .newsadmin{ width: 100%; margin-bottom: -1rem; } .admin{ width: 100%; } .bio{ font-weight: 400; font-size: 0.9rem; line-height: 1rem; } .news_short{ font-weight: 300; font-size: 1rem; line-height: 1.2rem; width: 100%; } .news_short_pinned{ font-weight: 400; font-size: 1rem; line-height: 1.2rem; width: 100%; } .row.modalpadcenter{ text-align: center; } .modal-content{ //background-color: #fff; color: #333; background-color: rgba(255, 255, 255, 0.85); border: 1px solid #ccc; font-size: 1.2rem; line-height: 1.4rem; } .modal-header { background-color: #d60; color: #fff; border-bottom: 1px solid #ccc; } .close{ color: #666; opacity: 1; font-weight: 400; text-shadow: 0 0px 0; filter: alpha(opacity=100); } .close:hover, .close:focus{ color: #9a4700 !important; opacity: 1; } .modal-title{ margin-right: -2rem; text-align: center; } .mypage{ color: #666; display: inline-block; padding: .2rem; border: 1px solid #ccc; } .mypage.active{ color: #d60; background-color: #eeb27f; } #signature{ z-index: 2000; position:relative; bottom:0; width:100%; height:60px; background: lightblue; } /* PORTFOLIO ============================================================================================================================================ */ img.film-image { max-width: 100%; transform: scale(1); } .portfolio-item { overflow: hidden; } .portfolio-item a { /*cursor: pointer;*/ } .portfolio-item img:hover { transform: scale(1.5); cursor: zoom-in; } .portfolio-item img { transition: transform .4s ease; } .portfolio-item-fade{ overflow: hidden; opacity: .3; } /* CONTAINERS ============================================================================================================================================ */ .container.menu { padding: 0rem .6rem 0rem; } .container.void { padding: 1rem 1rem 1rem; } .container.full { padding: 0 .4rem 0; } .main { margin-bottom: 32rem; // see footer } .container.page { padding: 0 .5rem 0; } .container.foot { padding: .8rem .6rem .8rem; margin-bottom: .8rem; margin-top: .8rem; width: 100vw; } .container.equipe { padding: 0px; margin-bottom: .8rem; font-size: .8rem; line-height: .9rem; } .container.lightborder { padding: .8rem .6rem .6rem; margin-bottom: .8rem; background-color: rgba(255, 255, 255, 0.2); border: 1px solid #ccc; } .container.archive { padding: .8rem .6rem .8rem; margin-bottom: .8rem; background-color: rgba(255, 255, 255, 0.2); border: 1px solid #ccc; opacity: .5; } /* ROWS ============================================================================================================================================ */ .stroke { border: 1px solid #ccc; } .row.padding { padding: 2rem 0 1rem; } .nopad { padding: 0; } .row.head { height:20rem; margin-top: -20rem; padding: 0; } .row.rowpad [class*=col-] { padding: 0 .4rem 0; } .row.imagesrow [class*=col-] { padding: 0.2rem; } .row.no-padding [class*=col-] { padding: 0; } .row.banner-row [class*=col-] { padding: 0 0 0 .4rem; } .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } /* COLUMNS ============================================================================================================================================ */ .col{ padding: 0; } .twoColumns{ -webkit-column-gap: 1.5rem; -moz-column-gap: 1.5rem; column-gap: 1.5rem; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; } /*--- Extra Bootstrap Column Padding --*/ [class*="col-"] { padding: 1rem; } .filmcol{ padding-left: 2rem; } .fullcol{ height: 100%; } .logocol{ padding: 2rem; text-align: center; //background-color: #553322; } /* NAVIGATION ============================================================================================================================================ */ .navbar { position:fixed; min-height: 6rem; padding: .7rem .8rem; text-transform: uppercase; font-size: 1rem; font-weight: 700; letter-spacing: .02rem; //transition: background-color .5s ease 0s; //background: rgba(0, 159, 163, 0.4)!important; background: rgba(0, 0, 0, 0.4)!important } .navbar-brand img { height: 4rem; } nav.navbar .navbar-toggler { margin-top: -0.3rem; } .navbar-nav li { padding-left: 0.2rem; } .navbar-nav .nav-link { font-weight: 400; color: #d60; padding-top: .8rem; } .navbar-nav .nav-link:hover { color: #fff; } /*.navbar-nav .nav-link.active{ outline: none; }*/ .navbar.solid { background: rgba(0, 0, 0, .8)!important; transition: background-color 1s ease 0s; } /*--- Nav Scrolling Offset --*/ .offset:before { height: 7rem; margin-top: -7rem; content: ""; display: block; } /* SUBMENUS ============================================================================================================================================ */ /*(https://startbootstrap.com/snippets/animated-navbar-dropdown) */ @media (min-width: 992px) { .animate { animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-fill-mode: both; -webkit-animation-fill-mode: both; } } @keyframes slideIn { 0% { transform: translateY(3rem); opacity: 0; } 100% { transform:translateY(0rem); opacity: 1; } 0% { transform: translateY(3rem); opacity: 0; } } @-webkit-keyframes slideIn { 0% { -webkit-transform: transform; -webkit-opacity: 0; } 100% { -webkit-transform: translateY(0); -webkit-opacity: 1; } 0% { -webkit-transform: translateY(3rem); -webkit-opacity: 0; } } .slideIn { -webkit-animation-name: slideIn; animation-name: slideIn; } /* ajoute par moi*/ .dropdown-toggle::after { display:none; } .dropdown-menu{ background-color: rgba(0, 0, 0, 0.7); text-align:center; width: auto; } .dropdown{ text-align:center; } .dropdown-item{ font-size: 1rem; font-weight: 400; letter-spacing: .02rem; color: #d60; } .dropdown-item:hover{ color: #fff; background-color: transparent; } .button, .dropdown-menu{ margin:4px auto } .dropdown-menu.w300{ width: 300px; left: 50%; margin-left:-150px; margin-top: 0px; } .dropdown-menu.w200{ width: 200px; left: 50%; margin-left:-100px; margin-top: 0px; } /* SUBMENUS =================================================== */ .dropdown:hover>.dropdown-menu { display: block; } .dropdown-submenu:hover>.dropdown-menu { display: block; } .dropdown-submenu2:hover>.dropdown-menu { display: block; } .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu{ top: 0; left: -100px; margin-top: -.56rem; } .dropdown-submenu2 .dropdown-menu{ top: 0; left: -150px; margin-top: 1.65rem; } .dropdown-item:focus, .dropdown-item:hover { background-color: transparent; color: #fff; } /* LANDING PAGE ============================================================================================================================================ */ .home-inner { background-image: url('images/open_1.jpg'); } .landingcaption { width: 100%; max-width: 100%; position: absolute; top: 45vh; z-index: 1; } .shadow { -webkit-filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); filter: drop-shadow( 3px 3px 2px rgba(0, 0, 0, .7)); } .landingcaption h1 { color: white; font-size: 4.5rem; font-weight: 700; letter-spacing: .3rem; //text-shadow: .1rem .1rem .8rem black; padding-bottom: 1rem; } .landingcaption h3 { top: 60vh; color: white; font-size: 1.5rem; font-weight: 400; //text-shadow: .1rem .1rem .5rem black; padding-bottom: 2rem; } .landingcaption .openingphrase { top: 100vh; color: white; letter-spacing: -.1rem; font-size: 3rem; font-weight: 400; text-shadow: .1rem .1rem .5rem black; padding-bottom: 2rem; } .arrow { position: absolute; top: 90vh; left: 50%; margin-left: -10px; width: 60px; height: 50px; /*change with size of arrow to make it sit on bottom of page*/ } /* PARALLAX ============================================================================================================================================ */ .w-screen{ margin: -1rem -1rem 0; height: 25rem; overflow: hidden; } .head_img{ background-attachment: fixed; background: linear-gradient(rgba(221, 102, 0, 0.8), rgba(221, 102, 0, 0.8)), url("slides/14.jpg") no-repeat; background-blend-mode: multiply; background-size: 100% auto; background-position: top; min-height: 26rem; } .filmhead_img{ position: relative; background-attachment: fixed; background-size: 100% auto; background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("_img/../slir/w1500-h1500-c1x1-q100/_img/") no-repeat; filter: blur(6px); -webkit-filter: blur(6px); background-size: 100% auto; background-position: top; min-height: 26rem; } .caption { color: #FFFFFF; margin-top: 0rem; z-index:1000; position: absolute; padding: 0rem; margin-left: -1px; text-shadow: .1rem .1rem .5rem black; } .caption2 { width:100%; color: #fc0; margin-top: 0rem; z-index:1000; position: relative; padding: 0rem; margin-left: -1px; text-shadow: .1rem .1rem .5rem black; } /*.bottom-align-text { position: absolute; padding-bottom: 1rem; bottom: 0; left: 0; }*/ .titrepage{ font-weight: 400; color: #fff; font-size: 3rem; line-height: 3.3rem; position: absolute; padding-bottom: 6rem; bottom: 0; left: 0; } .titrepage2{ font-weight: 400; color: #fff; font-size: 2.5rem; line-height: 2.6rem; position: absolute; padding-bottom: 6rem; bottom: 0; left: 0; } .soustitrepage{ font-size: 1.6rem; line-height: 1.8rem; font-weight: 300; font-style: italic; color: #fff; position: absolute; padding-bottom: 2rem; bottom: 0; left: 0; } .banners{ right: 0; position: absolute; padding-bottom: 2rem; justify-content: end; bottom: 0; } /*.bottom-align-text2 { position: absolute; padding-bottom: 1.6rem; padding-right: 1rem; bottom: 0; text-align: right; } .caption h3 { font-size: 2rem; //text-transform: uppercase; font-weight: 400; line-height: 2.2rem; } .caption h4 { font-size: 1.4rem; font-weight: 400; line-height: 1.4rem; } .caption h5 { font-size: 1.2rem; font-weight: 400; line-height: 1.2rem; } .caption p { font-size: 1.2rem; line-height: 1.4rem; font-weight: 400; text-shadow: .1rem .1rem .5rem black; }*/ /* FORMS ============================================================================================================================================ */ .custom-control-label:before{ background-color: #eeb27f !important; border-color: #999999 !important; } .custom-checkbox .custom-control-input:checked~.custom-control-label::before{ background-color: #d60 !important; } .custom-control-label{ line-height: 1.5rem; } input::-webkit-input-placeholder { color: #d60 !important; opacity: 1; } input::-moz-placeholder { color: #d60 !important; opacity: 1; } input:-ms-input-placeholder { color: #d60 !important; opacity: 1; } textarea::-webkit-input-placeholder { color: #d60 !important; opacity: 1; } textarea::-moz-placeholder { color: #d60 !important; opacity: 1; } textarea:-ms-input-placeholder { color: #d60 !important; opacity: 1; } .mycheckbox{ background-color: #fff; border-color: #ccc; } .input-group-text{ color: #666; background-color: #eeb27f; border-color: #ccc; } .custom-file-label{ font-weight: 400; color: #d60; background-color: #fff; border-color: #ccc; } input[type]{ color: #666; background-color: #fff; border-color: #ccc; } input[type]:focus { color: #666; background-color: #fff; } .input-group textarea{ line-height: 1.2rem; color: #666; background: #fff; border-color: #ccc; } .input-group textarea:focus{ color: #666; background: #fff; } .textarea-container { position:relative; width: 100%; } .explainbio{ position:absolute; top: 0.2rem; left: 2.8rem; } .my-select { padding-left: .5rem; background-color: #fff; color: #d60; border-color: #ccc; } .my-select:focus { color: #666; background-color: #d60; } select { /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("images/down.png") #fff no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("images/down.png") #fff no-repeat calc(100% - 1rem) !important; /* Better placement regardless of input width */ border-radius: 0 !important color: #666; } select:focus { /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("images/down.png") #fff no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("images/down.png") #fff no-repeat calc(100% - 1rem) !important; /* Better placement regardless of input width */ color: #666; } .form-control{ border-radius: 0 !important } .form-control:required { background-color: #eaa366; } .form-control .contact:required { background-color: #125; } .alert-success{ font-size: 14px; color: #666; background-color: #eeb27f; border-radius: 4px; border-color: #ccc; padding: .4rem .6rem .5rem; margin: 0px; } .alert-danger{ font-size: 14px; color: red; //background-color: #d60; background-color: #FFCC00; border-color: #ccc; padding: .4rem .6rem .4rem; margin: 0px; } .formtitle { font-size: 1.2rem; } input[readonly].myreadonly{ background-color: #fff; } .custom-file{ border-radius: 0 !important } .custom-file-input ~ .custom-file-label::after { font-size: 14px; content: "Choisir"; background-color: #eeb27f; color: #666; border-color: #ccc; cursor: pointer; } .custom-file-label{ font-size: 14px; } input[type="text fa"] { font-family: "Font Awesome 5 Free", "FontAwesome"; font-size: 1em; font-weight: 700; } .fa-eye.big{ color: #FFCC00; font-size: 1.5rem; margin-right: .5rem; padding-top: .3rem; } label.error { position: absolute; background: rgba(0, 0, 0, 0.5); margin-bottom: 2rem; padding: .5rem; top: -1.8rem; left: 1rem; color: #000000; font-size: 1rem; /*font-weight: normal; display: inline-block; box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.6);*/ z-index: 5; } label.error:before { content: ""; border: .5rem solid transparent; /*border-top: .5rem solid #ee0101;*/ border-top: .5rem solid rgba(0, 0, 0, 0.5); position: absolute; bottom: -1rem; } input[type=checkbox]{ -webkit-appearance:checkbox; } /* BUTTONS ============================================================================================================================================ */ .btn-primary{ font-weight: 400; color: #333; background-color: #eeb27f; border: none; } .btnactive{ color: #fff; background-color: #d60; } .btn-primary:hover, .btn-primary:hover, .btn-primary:active{ background-color: #d60 !important; } .btn-info{ font-weight: 400; color: #d60; background-color: #eeb27f !important; border: #ccc solid 1px; } .btn-info:hover, .btn-info:hover, .btn-info:focus, .btn-info:active{ background-color: #d60 !important; border: #ccc solid 1px; } .back-to-top { cursor: pointer; position: fixed; z-index: 2000; bottom: 20px; right: 14px; display: none; } .svg-inline--fa-chevron-up { color: white; } /* Boutons sur image */ .spec-container .fixed-btn-1 { left: 1rem; } .spec-container .fixed-btn-2 { left: 2.2rem; } .spec-container .fixed-btn-3 { left: 3.2rem; bottom: .9rem; } .spec-container .fixed-btn-4 { left: 4.6rem; } .fixed-btn-1, .fixed-btn-2, .fixed-btn-3, .fixed-btn-4 { color: #9a4700; background: none; border: none; padding: 0; margin: 0; cursor: pointer; position: absolute; bottom: .8rem; } .spec-container { /*display: inline-block;*/ position: relative; } .overlay { background: rgba(0,0,0,0.5); opacity: 0; position: absolute; top:0; left:0; width:100%; height:100%; transition:opacity 0.5s ease; } .spec-container .fa-edit, .spec-container .fa-eye, .spec-container .fa-eye-slash, .spec-container .fa-folder, .spec-container .fa-folder-open, .spec-container .fa-trash-alt{ color: #FFFFFF; font-size: .8rem; filter:drop-shadow(1px 1px 1px black); } /* FOOTER ============================================================================================================================================ */ footer { background: linear-gradient(rgba(88, 40, 0, 0.8), rgba(221, 102, 0, 0.8)), url("images/footer_img.jpg") no-repeat; background-blend-mode: multiply; background-size: cover; margin-top: 2rem; margin-bottom: -1rem; position: absolute; right: 0; bottom: 0; left: 0; width: 100vw !important; } footer svg.svg-inline--fa { font-size: 2rem; margin: 0rem .2rem 0 0; } footer a{ color: #fff; cursor: pointer; } footer a:hover{ color: #d60} bottomlogo{ position: absolute; bottom: 0; color: #fff; background-color: #155; } /*#tobottom { margin-top: 1rem; } .container .foot{ position: relative; } .gobottom{ position: absolute; bottom: 0; }*/ /* MEDIA QUERIES ============================================================================================================================================ */ /* Devices under 992px (lg) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media (max-width: 991px) { .border-right{ border: none !important; } .btn-lg { padding: .7rem 1.2rem; font-size: 1rem; } .narrow h1 { font-size: 2.1rem; } /* Modifications pour le menu ============================= */ .nav-item{ text-align: left; } .dropdown-toggle::after { display:none; } .dropdown-menu{ font-size: 0.8rem; line-height: 0.9rem; text-align:left; width: auto; } .dropdown{ text-align:left; } .button, .dropdown-menu{ margin:4px auto } .dropdown-menu.w300{ width: 100%; left: 50%; margin-left: 0px; } .dropdown-menu.w200{ width: 200px; left: 50%; margin-left: 0px; } .navbar { background: rgba(0, 0, 0, 0.9)!important; } .navbar.solid { background: rgba(0, 0, 0, .9)!important; } /* Fin Modifications pour le menu ========================= */ .leslogos{ transform: scale(0.6, 0.6); margin-left: -5.5rem; } } /* Devices under 768px (md) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media (max-width: 767px) { .container.main { margin-bottom: 16rem; } .text2{ font-size: 1rem; line-height: 1.2rem; } .arrow { position: absolute; top: 70vh; left: 50%; margin-left: -10px; width: 60px; height: 50px; /*change with size of arrow to make it sit on bottom of page*/ } .landingcaption h3 { font-size: 1rem; } .twoColumns{ -webkit-column-gap: 1.5rem; -moz-column-gap: 1.5rem; column-gap: 1.5rem; -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } /*.custom-file{ padding-bottom: 1rem; }*/ .newslegende { margin-top: .8rem; position: relative; } .titrepage2{ font-weight: 400; color: #fff; font-size: 1.5rem; line-height: 1.6rem; position: absolute; padding-bottom: 8rem; bottom: 0; left: 0; } .titrepage{ font-size: 2rem; line-height: 2.2rem; position: absolute; padding-bottom: 6rem; bottom: 0; left: 0; } .soustitrepage{ font-size: 1.2rem; line-height: 1.4rem; font-weight: 300; font-style: italic; color: #fff; position: absolute; padding-bottom: 3rem; bottom: 0; left: 0; } .bottompad{ padding-bottom: 0rem; } } /* Devices under 576px (sm) +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media (max-width: 575px) { .titrepage2{ font-weight: 400; color: #fff; font-size: 1.2rem; line-height: 1.3rem; position: absolute; padding-bottom: 8rem; bottom: 0; left: 0; } .soustitrepage{ font-size: 1rem; line-height: 1.1rem; font-weight: 300; font-style: italic; color: #fff; position: absolute; padding-bottom: 3rem; bottom: 0; left: 0; } .text0{ font-size: 1.6rem; line-height: 1.8rem; } .text2{ font-size: 1rem; line-height: 1.2rem; } .logocol{ padding: 8rem; text-align: center; //background-color: #553322; } .sm_spacer { margin-top: 2rem; } .titlenews{ font-size: 1.5rem; line-height: 1.6rem; color: #d60; } .section-title{ font-size: 1.8rem; line-height: 2rem; } .title_first{ padding-top: .8rem; } .container.menu { padding: 0; } .portfolio-item img:hover { transform: none; cursor: pointer; } .bottom-align-text2 { left: 0; } .w-screen{ margin: 0rem -1rem; height: 16rem; // Conditionne la hauteur de placement du texte (caption) background-color: #F12580; overflow: hidden; } .head_img{ min-height: 18rem; background-size: 140% auto; } .caption { margin-bottom: -2rem; } .caption2 { margin-bottom: 1rem; } .bottom-align-text2 { padding-bottom: 0rem; } .col.2ndcol{ padding-left: 5rem; } .container.equipe{ margin-top: .8rem; } .navbar-brand img { margin-left: -0.5rem; } nav.navbar .navbar-toggler { margin-right: -0.8rem; } .caption h3 { font-size: 1.4rem; text-transform: uppercase; font-weight: 700; line-height: 1.6rem; } .caption h4 { font-size: 1.2rem; font-weight: 400; line-height: 1.4rem; } .caption h5 { font-size: 1rem; font-weight: 400; line-height: 1.2rem; } .caption p { font-size: 1rem; line-height: 1.2rem; font-weight: 400; text-shadow: .1rem .1rem .5rem black; } .bottom-align-text2 { padding-right: 1rem; text-align: left; } #facebooktwitter { display: flex; justify-content: right; } .navbar-brand img { margin-left: .1rem; height: 4rem; } .container.page { margin-left: -1rem; width: 100vw; padding: 0 .5rem 0; } .modal-content{ font-size: 1rem; line-height: 1.2rem; } .googlemap{ height: 660px; } .centerflex { display: block; } } /*============ BOOTSTRAP BREAK POINTS: Extra small (xs) devices (portrait phones, less than 576px) No media query since this is the default in Bootstrap Small (sm) devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } Medium (md) devices (tablets, 768px and up) @media (min-width: 768px) { ... } Large (lg) devices (desktops, 992px and up) @media (min-width: 992px) { ... } Extra (xl) large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... } =============*/