html{ overflow-x:hidden } body{ background-color: #f8f9fa; font-size:16px; font-weight:400; font-family: 'lato', sans-serif; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; -webkit-font-smoothing:subpixel-antialiased; color: #0C3450; line-height: 1.4; margin-top: 70px; -webkit-backface-visibility:hidden; backface-visibility:hidden; overflow-x:hidden; } b, strong { font-weight: bold; } h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-weight: 400; font-family: 'Montserrat', sans-serif; } .fs-7{ font-size: 0.6rem !important; } .fs-8{ font-size: 0.75rem !important; } .orateur_title{ text-align: center; display: block; } .footer-area { background: #222; } .footer-area h3 { font-size: 20px; color: #fff; font-weight: 700; padding-bottom: 10px; letter-spacing: .5px; } .footer-area p { font-size: 12px; color: #fff; line-height: 20px; margin: 0; margin-right: 0px; margin-left: 0px; padding-right: 0px; } .footer-area .footer-social li { display: inline-block; } .footer-area .footer-social li a { color: #000; background: #fff; width: 35px; height: 35px; line-height: 35px; display: block; text-align: center; border-radius: 4px; font-size: 15px; margin-right: 5px; transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -webkit-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; } #copyright { background: #6c757d; text-align: center; } #copyright p { line-height: 42px; color: #fff; font-size: 14px; margin: 0; } .pulsecover { height: 100px; width: 200px; /*overflow: hidden;*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: white; margin: auto; z-index: 9999999; -webkit-transform: translateX(100%); transform: translateX(100%); animation: 2s linear 0.1s infinite running slidein; will-change: transform; /*-webkit-animation: pulsate linear 2s infinite; -moz-animation: pulsate linear 2s infinite; -o-animation: pulsate linear 2s infinite; animation: pulsate linear 2s infinite; clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%);*/ } @keyframes slidein { 0% { transform: translateX(0%); } 20% { transform: translateX(100%);} 100% { transform: translateX(100%); } } .pulse { height: 100px; width: 200px; /*overflow: hidden;*/ position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; z-index: 9999998; opacity: 0; animation: 2s pulsate linear 0.1s infinite; } .pulse:after { content: ''; display: block; background: url('data:image/svg+xml;utf8,') 0 0 no-repeat; width: 100%; height: 100%; position: absolute; } .pulse:before { content: ''; position: absolute; z-index: -1; left: 2px; right: 2px; bottom: 0; top: 16px; margin: auto; height: 3px; } @-webkit-keyframes pulsate { 0% { opacity: 0.4; } 4% { opacity: 0.6; } 15% { opacity: 0.8; } 20% { opacity: 1; } 80% { opacity:0; } 90% { opacity: 0; } 100% { opacity:0; } } @keyframes pulsate { 0% { opacity:0.4; } 4% { opacity: 0.6; } 15% { opacity: 0.8; } 20% { opacity:1; } 80% { opacity:0; } 90% { opacity: 0; } 100% { opacity:0; } } .orateur img { width: 50px; min-width: 50px; max-width: 50px; height: 50px; min-height: 50px; max-height: 50px; } .orateur { display: flex; flex-direction: row; } .orateur p { display: flex; flex-direction: row; } .orateur a { text-decoration: none; } .equipe .member img { border-radius:50%; -webkit-filter: grayscale(100%); filter: grayscale(100%); } .equipe .member .member-info { padding-left: 30px; } .equipe .member h4 { font-weight: 700; margin-bottom: 5px; font-size: 20px; color: #2c4964; } .equipe .member span { display: block; font-size: 15px; padding-bottom: 10px; position: relative; font-weight: 500; } .equipe .member .social { margin-top: 12px; display: flex; align-items: center; justify-content: flex-start; } .equipe .member .social a { transition: ease-in-out 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 50px; width: 32px; height: 32px; background: #8dc63f; } .equipe .member .social a + a { margin-left: 8px; } .equipe .member .social a i { color: #fff; font-size: 16px; margin: 0 2px; } .actu-item { background-color: #fff; border-radius: 4px; margin: 20px 5px; box-shadow: 0 0 20px rgba(0,0,0,.2); -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .actu-item .actu-image { width: 100%; max-width: 100%; border-bottom: 1px dashed #ccc; position: relative; overflow: hidden; height: 232px; } .actu-item .descr { padding: 30px 15px; color: #212121; position: relative; } .actu-item .descr h3 { line-height: 30px; margin-bottom: 15px; } .actu-item .descr h3 a { text-decoration: none; font-weight: 400; text-align: center; font-size: 20px; color: #212121; -webkit-transition: all 300ms ease-in-out; -moz-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out; } .actu-item .tag { position: absolute; text-transform: uppercase; top: -40px; left: 20px; padding: 4px 27px; background-color: #fff; color: #e0004d; border-radius: 4px; display: block; font-size: 14px; font-weight: 500; box-shadow: 0 3px 16px rgba(35,31,32,.15); } .about .video-box { background: url("../img/slide/slide-1.jpg") center center no-repeat; background-size: auto; background-size: cover; min-height: 500px; } .about .icon-boxes h4 { font-size: 18px; color: #4b7dab; margin-bottom: 15px; } .about .icon-boxes h3 { font-size: 28px; font-weight: 700; color: #2c4964; margin-bottom: 15px; } .about .icon-box { margin-top: 40px; } .about .icon-box .icon { float: left; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 2px solid #8dc2f1; border-radius: 50px; transition: 0.5s; } .about .icon-box .icon i { color: #1977cc; font-size: 32px; } .about .icon-box:hover .icon { background: #1977cc; border-color: #1977cc; } .about .icon-box:hover .icon i { color: #fff; } .about .icon-box .title { margin-left: 85px; font-weight: 700; margin-bottom: 10px; font-size: 18px; } .about .icon-box .title a { color: #343a40; transition: 0.3s; } .about .icon-box .title a:hover { color: #1977cc; } .about .icon-box .description { margin-left: 85px; line-height: 24px; font-size: 14px; } .les-eme .content { padding: 30px; background: #000000; border-radius: 4px; color: #fff; } a{ -webkit-transition:all .2s linear; -moz-transition:all .2s linear; -o-transition:all .2s linear; transition:all .2s linear } a:hover{ text-decoration:none } a a:focus{ outline:none } option{ max-width: 600px; } .btn { font-weight: 300; font-family: 'Montserrat', sans-serif; } :root { --bs-link-color: #017fb7; --bs-link-hover-color: #B0F2B4; } p{ /*font-weight:400;font-family:lato,sans-serif;margin:0;font-size:18px*/ } /*ul,ol{ list-style:outside none none;margin:0;padding:0 } ul li,ol li{ list-style:none }*/ .hero-heading{ font-size:40px;font-weight:700;color:#fff;text-transform:capitalize;line-height:70px;letter-spacing:.1rem } .hero-sub-heading{font-size:20px;font-weight:400;color:#e6e6e6;line-height:45px;letter-spacing:.1rem} .section-titile-bg{display:inline;font-size:115px;font-weight:700;height:100%;left:-173px;opacity:.1;position:absolute;top:-14px;width:100%;text-align:center} .section-title-header p{text:center;font-weight:400;line-height:26px;padding-bottom:36px} .section-title{font-size:36px;color:#212121;line-height:52px;padding-bottom:20px;font-weight:700;text-align:center;/*text-transform:uppercase;*/position:relative;margin-bottom:15px} .section-subcontent{font-size:16px;text:center;font-weight:400;line-height:26px;padding-bottom:36px} .section-sub{text-transform:uppercase;font-size:24px;line-height:52px;padding-bottom:15px;margin-bottom:30px;position:relative} .section-sub:before{position:absolute;content:'';height:1px;width:45px;left:50%;bottom:10px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#e0004d} .subtitle{font-size:15px;margin-top:20px;font-weight:500;margin-bottom:10px} .inner-title{font-size:24px;font-weight:700;text-tranform:capitalize} .page-tagline{font-size:24px;font-weight:400;color:#ddd} .page-title{font-size:62px;font-weight:700;color:#fff} .btn{ /*border-radius:4px;cursor:pointer;font-weight:400;color:#fff;text-transform:uppercase;-webkit-transition:all .2s linear;-moz-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;display:inline-block*/} .btn i{margin-right:0px}.btn:focus,.btn:active{box-shadow:none;outline:none;/*color:#fff*/} .btn-common{background-color:#e0004d;position:relative;z-index:1} .btn-common:hover{color:#fff;background:#f50057;box-shadow:0 6px 22px rgba(0,0,0,.1);transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out} .btn-border{color:#fff;background-color:transparent;border:1px solid #fff} .btn-border:hover{color:#fff;background-color:rgba(255,255,255,.2)} .btn-lg{padding:12px 34px;text-transform:uppercase;font-size:14px} .btn-rm{padding:7px 10px;text-transform:capitalize} button:focus{outline:none!important} .icon-close,.icon-check{color:#e0004d} .bg-drack{background:#f1f1f1} .bg-white{background:#fff} .mb-30{margin-bottom:30px} .mt-30{margin-top:30px} a.back-to-top{display:none;position:fixed;bottom:18px;right:15px;text-decoration:none} a.back-to-top i{ display:block;font-size:22px; width:40px;height:40px; line-height:40px; color:#fff; background:#e0004d; border-radius:0; text-align:center; transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -webkit-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; box-shadow:0 0 4px rgba(0,0,0,.14),0 4px 8px rgba(0,0,0,.28) } a.back-to-top:hover,a.back-to-top:focus{ text-decoration:none } #preloader1,#preloader { position: fixed; background: #fff; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999999999; } @keyframes animation-loader { 0% { top: 8px; left: 70px; } 3.13% { top: 18.0px; left: 100.0px; } 6.25% { top: 30.0px; left: 120.0px; } 9.38% { top: 46.0px; left: 150.0px; } 12.5% { top: 80.0px; left: 180.0px; } 15.63% { top: 100.0px; left: 200.0px; } 18.75% { top: 120.0px; left: 220.0px; } 21.88% { top: 138.0px; left: 260.0px; } 25% { top: 140.0px; left: 280.0px; } 28.13% { top: 130.0px; left: 320.0px; } 31.25% { top: 120.0px; left: 330.0px; } 34.38% { top: 80.0px; left: 352.0px; } 37.5% { top: 70.0px; left: 350.0px; } 40.63% { top: 60.0px; left: 350.0px; } 43.75% { top: 30.0px; left: 335.0px; } 46.88% { top: 12.0px; left: 310.0px; } 50% { top: 10px; left: 280px; } 53.13% { top: 15.0px; left: 260.0px; } 56.25% { top: 40.0px; left: 210.0px; } 59.38% { top: 70.0px; left: 180.0px; } 62.5% { top: 80.0px; left: 180.0px; } 65.63% { top: 86.0px; left: 170.0px; } 68.75% { top: 90.0px; left: 162.0px; } 71.88% { top: 130.0px; left: 110.0px; } 75% { top: 140.0px; left: 60.0px; } 78.13% { top: 120.0px; left: 20.0px; } 81.25% { top: 100.0px; left: 2.0px; } 84.38% { top: 58.0px; left: 5.0px; } 87.5% { top: 40.0px; left: 10.0px; } 90.63% { top: 25.0px; left: 20.0px; } 100% { top: 12.0px; left: 40.0px; } } @keyframes revealCircle { to { transform: rotate(180deg); } } .parent-loader { width: 356px; height: 200px; position: relative; z-index: 900; } .parent-loader .div { position: relative; width: 356px; height: 200px; z-index: 900; } .parent-loader .div:before, .parent-loader .div:after { content: ""; position: absolute; top: 0; left: 0; z-index: 900; width: 154px; height: 154px; border: 10px solid black; border-radius: 80% 0 55% 50% / 55% 0 80% 50%; transform: rotate(45deg); } .parent-loader .div:after { left: auto; right: 0; transform: rotate(-135deg); } .parent-loader .div1, .parent-loader .div2, .parent-loader .div3 { width: 15px; height: 15px; border-radius: 100%; background: red; z-index: 900; position: absolute; animation-name: animation-loader; animation-timing-function: linear; animation-duration: 10s; animation-iteration-count: infinite; box-shadow: 0 0 10px red; } .parent-loader .div1 { transition-timing-function: cubic-bezier(0.75, 1.1, 0.25, 0.1); transform-origin: center left; opacity: 1; z-index: 901; } .parent-loader .div2 { animation-delay: 0.08s; transition-timing-function: cubic-bezier(0.75, 1.1, 0.25, 0.1); transform-origin: center left; opacity: 0.8; filter: blur(4px); } .parent-loader .div3 { animation-delay: 0.12s; transition-timing-function: cubic-bezier(0.75, 1.1, 0.25, 0.1); transform-origin: center left; opacity: 0.7; filter: blur(4px); } .bottom-overflow-fade { mask-image: linear-gradient(to bottom, black 0%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%); } .form-control-sm { display: inline-block; width: auto; } .card-header { background-color: rgba(0,0,0,.0); } .form-group { margin-bottom: 1rem; } a.linkSource:hover{ cursor:pointer; } .home h1, .home h2, .home h3, .bgcontact h4{ font-size: 2.0rem; font-weight: 700; color:#017fb7; line-height: 200%; } .home h2, .home h3{ font-size: 2.3rem; line-height: 115%; } .bgcontact h4{ font-size: 1.8rem; line-height: 200%; } .home a.btn{ font-weight: 600; } h1{ font-size: 1.2rem; font-weight: normal; } .darker{ filter: brightness(0.85); } a.printBtn{ top: 8px; right: 32px; position: absolute; z-index: 2; text-decoration: none; color: white !important; font-weight: normal; font-size: 12px; } #chartContainerYEAR{ border-bottom: 1px dashed #ccc; } .counter-section { background: #0095da; overflow: hidden; position: relative; } .counter-section .counter span { color: #fefefe; font-size: 26px; font-weight: 400; text-transform: uppercase; } .counter-section .counter p { font-size: 14px; color: #999; font-weight: 700; text-transform: uppercase; } .counts .count-box i { position: absolute; top: -25px; left: 50%; transform: translateX(-50%); font-size: 20px; background: #e0004d; color: #fff; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; } .counts .count-box { height: 100%; padding: 30px 20px 25px 20px; width: 100%; position: relative; text-align: center; background: #fff; } .counts .count-box span { font-family: josefin sans,sans-serif; color:#0095da; font-size: 36px; display: block; font-weight: 600; /*color: #082744;*/ } .ripple{position:relative; transform:translate3d(0,0,0)} .ripple:after{content:"";display:block;position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,#000 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10,10);opacity:0;transition:transform .5s,opacity 1s} .ripple:active:after{transform:scale(0,0);opacity:.2;transition:0s} .category-name-photo{ padding: 5px 20px 7px 20px; background: #FFF; width: auto; font-size:16px; border-radius: 5px; border: 1px solid #CCC; font-weight: 400; font-family: 'Montserrat', sans-serif; /*border-bottom:0;*/ box-shadow: 0 0 5px rgba(0,0,0,.15) !important; /*margin-top: -40px;*/ margin-bottom: 15px; } /*.bg-pattern::after { content: ""; background-image: url('/2023/assets/img/background/18410.jpg'); background-size: cover; background-repeat: repeat-y; position: absolute; z-index: -1; top: 0px; right: 0px; bottom: 0px; left: 0px; opacity: 0.45; }*/ .category-name-border:not(:first-child){ border-top: 1px dashed #AAA; } .creator-body{ background: #EEE; border-radius: 10px 0px 0px 10px; position: relative; border: 1px solid #CCC; box-shadow: 0 6px 15px rgba(0,0,0,.15) !important; /* position: absolute; top: 25px;*/ border-right: 0; width: 270px; } .btn, .btn-img { font-family: 'Montserrat', sans-serif; } .shadow { box-shadow: 0px 5px 5px rgba(0,0,0,.15) !important; } .h2.notlogged { font-size: 1.6em; font-family: 'Montserrat', sans-serif; color: #EE7B30; font-weight: bold; text-transform: uppercase; } .content{ /*padding-bottom: 25px;*/ } .navbar-dark .navbar-text { color: rgb(255, 255, 255); } .badge{ /*color:#0C3450;*/ padding: .35em .35em; } .social h3 .badge{ font-size:2rem; padding: .35em .35em .35em 0; } .pink{ color: #e43879; } .category-item{ background: #013450; color: #fff; width:100%; display: inline-block; } .category-item:not(:first-child){ margin-top:1rem; } .floating-menu{ border-radius: 50px; z-index: 999; padding: 2px 5px; left: 0px; width: 64px; position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .photos-menu{ padding-left: 0; } .photos-menu li a{display: block; padding: 16px 16px; color: #fff; border-radius: 35px; position: relative; -webkit-transition: none; -o-transition: none; transition: none; text-align: center;} .photos-menu li a:hover, .photos-menu li a:active, .photos-menu li a.active{background:rgba(244,244,244,.3)} .float-title{display: none;left: 75px;color: #333;position: fixed;background: #fff;padding: 5px;} .photos-menu li a:hover .float-title{display: inline-block;} .photos-menu li{ list-style: none; } .photos-menu li.first{ font-size:12px; text-align: center; padding-top: 5px; color:#fff; margin-bottom:5px; } .menu-bg{ background-image:-webkit-linear-gradient(top,#e43879 0,#0396dc 100%); background-image:-o-linear-gradient(top,#e43879 0,#0396dc 100%); background-image:-webkit-gradient(linear,left top,left bottom,from(#e43879),to(#0396dc)); background-image:linear-gradient(to bottom,#e43879 0,#0396dc 100%); background-repeat:repeat-x; position:absolute; width:100%; height:100%; border-radius:0 30px 30px 0; z-index:-1; top:0; left:0; -webkit-transition:.1s; -o-transition:.1s; transition:.1s } @media (max-width: 767.98px){ nav.navbar{ background: white; } nav.navbar li.nav-item{ margin-bottom: 10px; } #topbar ul:not(.navbar-nav.right) .nav-item.active a.nav-link::after, #topbar .nav-item:hover a.nav-link::after { width: 100%; } } #dropC{ max-height: 500px; overflow-y: scroll; right: 0; left: auto; } .logo-customer-hover { max-width: 120px; max-height: 120px; position: absolute; top: -35%; left: 20px; z-index: 1; box-shadow: 2px 2px 10px #999; } .customer-banner { font-size: 24px; font-weight: normal; margin-bottom: 0px; color: #EE7B30; height: 100px; border-top: 2px solid #999; border-bottom: 2px solid #999; padding: 0; position: relative; } .customer-banner-inner { position: absolute; overflow: hidden; right: 0; left: 0; top: 0; bottom: 0; } .customer-banner-inner img{ position: absolute; overflow: hidden; right: 0; left: 0; top: -50%; /*animation-duration: 20s; opacity: 0.4; animation-delay: 0s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; animation-name: customer-banner-anim; animation-fill-mode: both; transform-origin: center;*/ } .customer-banner h1{ padding: 11px 15px 14px 15px; position: absolute; /*height: 100%; text-shadow: 1px 1px #ddd; background-color: rgba(255,255,255,0.3);*/ text-transform: uppercase; } @-webkit-keyframes customer-banner-anim{ 0% { top: -250%; } 100% { top: -50%; } } #customerTab .nav-link:focus, #customerTab .nav-link:hover { color: #EE7B30; background: #EFEFEF; } .bg-dark { background-color: #013450 !important; } .text-justify{ text-align: justify !important; } /*-------------------------------------------------------------- # Top Bar --------------------------------------------------------------*/ #topbar { background: #fff; height: 40px; font-size: 14px; transition: all 0.5s; z-index: 996; } #topbar.topbar-scrolled { top: -40px; } #topbar .contact-info a { line-height: 1; color: #000; transition: 0.3s; text-decoration: none; } #topbar .contact-info a:hover { color: #999; } #topbar .contact-info i { color: #1977cc; padding-right: 4px; margin-left: 15px; line-height: 0; } #topbar .contact-info i:first-child { margin-left: 0; } #topbar .social-links a { color: #437099; padding-left: 15px; display: inline-block; line-height: 1px; transition: 0.3s; } #topbar .social-links a:hover { color: #999; } #topbar .social-links a:first-child { border-left: 0; } .navbar-nav a{ font-family: 'Montserrat', sans-serif; } .navbar a:not(.navbar-brand):hover, .navbar a:not(.navbar-brand) i:hover, .navbar .active, .navbar li:hover > a:not(.navbar-brand) { /*color: #FFF;*/ border-color: #FFFFFF; } #topbar .navbar a:not(.navbar-brand) i{ color: rgba(255,255,255,.55); } #topbar .navbar-nav .nav-item:hover a.nav-link,#topbar .navbar-nav .nav-item.active a:first-child{ color:#017fb7; } /*#topbar .navbar-dark #navbarId.navbar-nav a:not(.navbar-brand):hover, #topbar .navbar a:not(.navbar-brand) i:hover, #topbar .navbar .active, .navbar li:hover > a:not(.navbar-brand) { border-color: #FFFFFF; } #topbar .navbar-dark #navbarId.navbar-nav a:not(.navbar-brand) i{ color: rgba(255,255,255,.95); } #topbar .navbar-dark .navbar-nav .nav-link{ color: rgba(255,255,255,.95); } #topbar .navbar-dark #navbarId.navbar-nav .nav-item:hover a.nav-link,#topbar .navbar-nav .nav-item.active a:first-child{ color:#EEE; } #topbar .navbar-nav .nav-item:hover a::before,#topbar .navbar-nav .nav-item.active a::before{ -webkit-transform:scale3d(1,1,1); -moz-transform:scale3d(1,1,1); -ms-transform:scale3d(1,1,1); -o-transform:scale3d(1,1,1); transform:scale3d(1,1,1); }*/ #topbar .navbar-nav .nav-item a, #topbar .navbar-nav .nav-item a.nav-link { padding: 5px 0; text-transform: uppercase; font-weight: 600; -webkit-transition: all .3s ease-out 0s; -moz-transition: all .3s ease-out 0s; -ms-transition: all .3s ease-out 0s; -o-transition: all .3s ease-out 0s; transition: all .3s ease-out 0s; position: relative; line-height: 24px; letter-spacing: 2px; display: flex; align-items: center; justify-content: flex-start; font-size: 18px; white-space: nowrap; color: #000; } #topbar ul:not(.navbar-nav.right) .nav-item a.nav-link::after { content: ""; position: absolute; width:0%; left: calc(15% / 2); bottom: 0; right: 0; margin: 0; height: 2px; opacity: 0; background-color: #017fb7; transition: opacity .12s cubic-bezier(0.455, 0.03, 0.515, 0.955),width .12s cubic-bezier(0.455, 0.03, 0.515, 0.955),height .12s cubic-bezier(0.455, 0.03, 0.515, 0.955),top .12s cubic-bezier(0.455, 0.03, 0.515, 0.955),bottom .12s cubic-bezier(0.455, 0.03, 0.515, 0.955); } #topbar ul:not(.navbar-nav.right) .nav-item.active a.nav-link::after, #topbar .nav-item:hover a.nav-link::after{ opacity: 1; width:85%; } .navbar-brand { padding-top: 0.3325rem; } .input-group-text { padding: .675rem .75rem; border-radius: 0 .375rem .375rem 0; } /*-------------------------------------------------------------- # Evenements --------------------------------------------------------------*/ .loading-shield { position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.4); display: flex; z-index: 100000; } .spinner{ padding:10px; background:rgba(255,255,255,1); border-radius: 20px; display: flex; flex-direction: column; position: relative; } .spinner small{ bottom: 50px; position: absolute; display: block; left: 0; right: 0; } .card-top h1.card-title{ font-size:36px; color:#017fb7; text-transform: uppercase; font-weight: 600; padding-right:auto; } .card-top p.card-text{ font-size: 30px; text-shadow: 1px 1px 5px #FFF; color: #017fb7; font-weight: 600; padding-right:auto; } @media (min-width: 768px) { .card-top h1.card-title{ padding-right:25%; } .card-top p.card-text{ padding-right:25%; } } .row.bibliotheque .border-top { /*background: rgba(111, 162, 135, 0.1);*/ background: #017fb7; } .row.agenda .border-top { /*background: rgba(111, 135, 162, 0.1);*/ background: #017fb7; } .row.comment_posted .border-top { /*background: rgba(135, 111, 162, 0.1);*/ background: #017fb7; } .row.comment_received .border-top { /*background: rgba(162, 135, 111, 0.1);*/ background: #017fb7; } .divBlockCategory { width: 115px; height: 30px; position: absolute; top: 0px; right: 0px; text-align: center; border-radius:0 0 0 10px; } .divBlockCategory p { color: #fff; font-size: 9px; text-align: center; margin: 0; line-height: 1.5em; text-transform: uppercase; padding: 10px 0; } .divBlockDate { background: #B0F2B4; width: 80px; height: 80px; position: absolute; top: -30px; left: -30px; text-align: center; z-index: 2; border-radius: 50px; padding: 20px 10px 10px 10px; } .divBlockDate p { color: #fff; font-size: 12px; text-align: center; margin: 0; line-height: 1.5em; text-transform: uppercase; padding: 0; display: grid; } .divBlockDate p strong { display: block; font-size: 26px; font-weight: 600; text-align: center; margin-bottom: 6px; } .divBlockLetter { z-index: 2; background: #B0F2B4; width: 60px; height: 60px; position: absolute; top: -25px; left: -25px; text-align: center; border-radius: 50px; padding: 0px 10px 0px 10px; } .divBlockLetter p { color: #fff; font-size: 11px; text-align: center; margin: 0; line-height: 1.5em; text-transform: uppercase; padding: 21px 0px 0 0px; } .divBlockLetter p strong { display: block; font-size: 36px; font-weight: 700; text-align: center; margin-bottom: 6px; } .divBlockIcon { z-index: 2; background: #B0F2B4; width: 60px; height: 60px; position: absolute; top: -15px; left: -15px; text-align: center; border-radius: 50px; padding: 0px 10px 0px 10px; } .divBlockIcon p { color: #fff; font-size: 11px; text-align: center; margin: 0; line-height: 1.5em; text-transform: uppercase; padding: 18px 0px 0 4px; } .divBlockIcon p strong { display: block; font-size: 26px; font-weight: 600; text-align: center; margin-bottom: 6px; } .cropper-container { min-height: 500px !important; } #agendaContent img.no-grid, #agendaContent.grid img.grid, #membersContent img.no-grid, #membersContent.grid img.grid, #bibliothequeContent img.no-grid, #bibliothequeContent.grid img.grid{ display: block; } #agendaContent img.grid, #agendaContent.grid img.no-grid, #membersContent img.grid, #membersContent.grid img.no-grid, #bibliothequeContent img.grid, #bibliothequeContent.grid img.no-grid{ display: none; } #agendaContent, #agendaContent.grid, #membersContent, #membersContent.grid, #bibliothequeContent, #bibliothequeContent.grid { justify-content: center !important; } #agendaContent.grid, #membersContent.grid, #bibliothequeContent.grid { justify-content: start !important; } #agendaContent .item, #agendaContent .item.grid, #membersContent .item, #membersContent .item.grid, #bibliothequeContent .item, #bibliothequeContent .item.grid { display:flex; flex: 0 0 auto; width: 100%; padding-left: 3.5rem !important; padding-right: 3.5rem !important; } #agendaContent .item h5.card-title, #membersContent .item h5.card-title, #bibliothequeContent .item h5.card-title{ font-size:18px; text-transform: uppercase; color:#017fb7; font-weight: 700; } #agendaContent .item .card-header, #agendaContent .item.grid .card-header, #membersContent .item .card-header, #membersContent .item.grid .card-header, #bibliothequeContent .item .card-header, #bibliothequeContent .item.grid .card-header{ display:flex; flex: 0 0 auto; width: 100%; padding-left: 0; padding-right: 0; } #agendaContent .item .card-header img, #agendaContent .item.grid .card-header img, #membersContent .item .card-header img, #membersContent .item.grid .card-header img, #bibliothequeContent .item .card-header img, #bibliothequeContent .item.grid .card-header img{ z-index: 1; width: 100%; position: relative; border-bottom-left-radius: 0rem !important; border-top-left-radius: 0.375rem !important; border-top-right-radius: 0.375rem !important; } #agendaContent .item .card-body, #agendaContent .item.grid .card-body, #membersContent .item .card-body, #membersContent .item.grid .card-body, #bibliothequeContent .item .card-body, #bibliothequeContent .item.grid .card-body { padding: 0.75rem 1rem; padding-left: 1rem; } #agendaContent .item .card-body .card-text, #agendaContent .item.grid .card-body .card-text, #membersContent .item .card-body .card-text, #membersContent .item.grid .card-body .card-text, #bibliothequeContent .item .card-body .card-text, #bibliothequeContent .item.grid .card-body .card-text { font-size: .875em; } #agendaContent .item .card-body .item-body, #agendaContent .item.grid .card-body .item-body, #membersContent .item .card-body .item-body, #membersContent .item.grid .card-body .item-body, #bibliothequeContent .item .card-body .item-body, #bibliothequeContent .item.grid .card-body .item-body{ max-height: 100px; height: 100px; font-size: 13px; overflow-y: hidden; } #agendaContent .item .card-footer, #agendaContent .item.grid .card-footer, #membersContent .item .card-footer, #membersContent .item.grid .card-footer, #bibliothequeContent .item .card-footer, #bibliothequeContent .item.grid .card-footer { padding-right: 1rem ; } #agendaContent .item .col-right, #membersContent .item .col-right, #bibliothequeContent .item .col-right { flex: 0 0 auto; width: 100%; } @media (min-width: 768px) { #agendaContent .item { flex: 0 0 auto; width: 100%; } #membersContent .item, #bibliothequeContent .item { flex: 0 0 auto; width: 66.66666667%; margin-right: 0 !important; margin-left: 0 !important; } #agendaContent .item .card-header img, #membersContent .item .card-header img, #bibliothequeContent .item .card-header img{ border-bottom-left-radius: 0rem !important; border-top-left-radius: 0.375rem !important; border-top-right-radius: 0 !important; } #membersContent .item .card-header img, #bibliothequeContent .item .card-header img{ /*max-width: 150px; max-height: 150px;*/ } #agendaContent .item .card-body { padding-left: 1rem; } #membersContent .item .card-body, #bibliothequeContent .item .card-body { padding-left: 1.5rem; } #agendaContent .item .card-body .item-body, #agendaContent .item.grid .card-body .item-body, #membersContent .item .card-body .item-body, #membersContent .item.grid .card-body .item-body, #bibliothequeContent .item .card-body .item-body, #bibliothequeContent .item.grid .card-body .item-body{ /*max-height: 170px; height: 170px;*/ max-height: 150px; height: auto; font-size: 13px; overflow-y: hidden; } #agendaContent .item .card-footer, #membersContent .item .card-footer, #bibliothequeContent .item .card-footer { padding-right: 1.5rem ; } #agendaContent .item .col-left { flex: 0 0 auto; width: 41.66666667%; } #membersContent .item .col-left, #bibliothequeContent .item .col-left { flex: 0 0 auto; width: auto; } #agendaContent .item .col-right { flex: 0 0 auto; width: 58.33333333%; } #membersContent .item .col-right, #bibliothequeContent .item .col-right { flex: 1 0 0%; width: auto; } #agendaContent .item.grid, #membersContent .item.grid, #bibliothequeContent .item.grid { flex: 0 0 auto; width: 50%; } #membersContent .item.grid .card-header{ padding-left: 0; padding-right: 0; } #bibliothequeContent .item.grid .card-header{ /*padding-left: 1.5rem !important; padding-right: 1.5rem !important;*/ } #membersContent .item.grid .card-header img{ max-width: 100%; max-height: inherit; padding-left: 0; padding-right: 0; margin-right: auto !important; margin-left: auto !important; } #bibliothequeContent .item.grid .card-header img{ /* max-width: 150px; max-height: 150px; padding-left: 1.5rem !important; padding-right: 1.5rem !important; margin-right: auto !important; margin-left: auto !important;*/ } #agendaContent .item.grid .card-body, #membersContent .item.grid .card-body, #bibliothequeContent .item.grid .card-body { padding-left: 1rem; } #agendaContent .item.grid .card-footer, #membersContent .item.grid .card-footer, #bibliothequeContent .item.grid .card-footer { padding-right: 1rem ; } #agendaContent .item.grid .col-left { flex: 0 0 auto; width: 100%; } #membersContent .item.grid .col-left, #bibliothequeContent .item.grid .col-left { flex: 0 0 auto; width: 100%; } #agendaContent .item.grid .col-right, #membersContent .item.grid .col-right, #bibliothequeContent .item.grid .col-right { flex: 0 0 auto; width: 100%; } } @media (min-width: 992px) { #agendaContent .item { flex: 0 0 auto; width: 100%; } #membersContent .item, #bibliothequeContent .item { flex: 0 0 auto; width: 66.66666667%; } #agendaContent .item .card-body { padding-left: 1.5rem; } #membersContent .item .card-body, #bibliothequeContent .item .card-body { padding-left: 2.5rem; } #agendaContent .item.grid, #membersContent .item.grid, #bibliothequeContent .item.grid { flex: 0 0 auto; width: 50%; } #agendaContent .item.grid .card-body, #membersContent .item.grid .card-body, #bibliothequeContent .item.grid .card-body { padding-left: 1rem; } #agendaContent .item.grid .col-left { flex: 0 0 auto; width: 100%; } #membersContent .item.grid .col-left, #bibliothequeContent .item.grid .col-left { flex: 0 0 auto; width: 100%; } #agendaContent .item.grid .col-right, #membersContent .item.grid .col-right, #bibliothequeContent .item.grid .col-right { flex: 0 0 auto; width: 100%; } } @media (min-width: 1200px) { #agendaContent .item { flex: 0 0 auto; width: 100%; } #membersContent .item, #bibliothequeContent .item { flex: 0 0 auto; width: 66.66666667%; } #agendaContent .item.grid, #membersContent .item.grid, #bibliothequeContent .item.grid { flex: 0 0 auto; width: 33.33333333%; } #agendaContent .item.grid .col-left { flex: 0 0 auto; width: 100%; } #membersContent .item.grid .col-left, #membersContent .item.grid .col-left { flex: 0 0 auto; width: 100%; } #agendaContent .item.grid .col-right, #membersContent .item.grid .col-right, #bibliothequeContent .item.grid .col-right { flex: 0 0 auto; width: 100%; } } .modal-header .close, .modal-header .mailbox-attachment-close { padding: 1rem; margin: -1rem -1rem -1rem auto; } button.close, button.mailbox-attachment-close { padding: 0; background-color: transparent; border: 0; } .close, .mailbox-attachment-close { float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; color: #000; text-shadow: 0 1px 0 #fff; opacity: .5; } #modalCrop { } #topbar .navbar-nav .nav-item a.dropdown-item{ padding:5px 10px; font-size: 17px; font-weight: normal; } .jumbotron{ padding: 0rem 0rem 0 0; margin-bottom: 0rem; border-radius: 0; } .jumbotron .container, .jumbotron .container-fluid { z-index: 2; position: relative; } .imghome{ max-width:800px; } @media (max-width: 1280px) { .imghome{ max-width:100%; } } /*-------------------------------------------------------------- # Header --------------------------------------------------------------*/ #header { background: #fff; transition: all 0.5s; z-index: 997; padding: 0px 0 0 0; /*height: 90px;*/ top: 40px; box-shadow: 0px 2px 15px rgba(25, 119, 204, 0.1); } #header.header-scrolled { top: 0; } .big{ font-size:40px; } .form-wrapper{ border-radius: 7px; } .form-wrapper label{ font-weight: bold; } .programme-item h5 { font-weight: bold; font-size:1rem; color: #f89206; } .programme-item i { font-size: 15px; } .membre .programme-item, .schedule .programme-item{ background : #FFF; } #map{ /*height: 450px;*/ } .bg-white{ background : #ffffff; } .schedule .schedule-tab-title{ padding-right: 0px; } .card.cart-box{ min-height:300px; } .sample { position: relative; } .navbar li:hover > a:not(.navbar-brand){ border-color: #B0F2B4; } .modal-content{ background: #f0f5f3; } .modal-title{ color: #017fb7; font-weight: 600; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: #017fb7; --bs-btn-border-color: #017fb7; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #65937b; --bs-btn-hover-border-color: #017fb7; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #65937b; --bs-btn-active-border-color: #017fb7; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #017fb7; --bs-btn-disabled-border-color: #017fb7; border-radius: 50px; } .btn-primary:hover,.btn-primary.nav-link:hover { --bs-btn-color: #fff; --bs-btn-bg: #B0F2B4; --bs-btn-border-color: #B0F2B4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B0F2B4; --bs-btn-hover-border-color: #B0F2B4; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #B0F2B4; --bs-btn-active-border-color: #B0F2B4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B0F2B4; --bs-btn-disabled-border-color: #B0F2B4; border-radius: 50px; } .btn-primary-light { --bs-btn-color: #333; --bs-btn-bg: #e1f2e9; --bs-btn-border-color: #e1f2e9; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #017fb7; --bs-btn-hover-border-color: #e1f2e9; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #017fb7; --bs-btn-active-border-color: #e1f2e9; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #e1f2e9; --bs-btn-disabled-border-color: #e1f2e9; border-radius: 50px; } .btn-primary-light:hover,.btn-primary-light.nav-link:hover { --bs-btn-color: #fff; --bs-btn-bg: #017fb7; --bs-btn-border-color: #017fb7; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #65937b; --bs-btn-hover-border-color: #017fb7; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #65937b; --bs-btn-active-border-color: #017fb7; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #017fb7; --bs-btn-disabled-border-color: #017fb7; border-radius: 50px; } .btn-violet { --bs-btn-color: #fff; --bs-btn-bg: #B0F2B4; --bs-btn-border-color: #B0F2B4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B0F2B4; --bs-btn-hover-border-color: #B0F2B4; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #B0F2B4; --bs-btn-active-border-color: #B0F2B4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B0F2B4; --bs-btn-disabled-border-color: #B0F2B4; border-radius: 50px; } .btn-violet:hover,.btn-violet.nav-link:hover { --bs-btn-color: #fff; --bs-btn-bg: #017fb7; --bs-btn-border-color: #017fb7; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #65937b; --bs-btn-hover-border-color: #017fb7; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #65937b; --bs-btn-active-border-color: #017fb7; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #017fb7; --bs-btn-disabled-border-color: #017fb7; border-radius: 50px; } .btn-violet-light { --bs-btn-color: #333; --bs-btn-bg: #B0F2B4; --bs-btn-border-color: #B0F2B4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B0F2B4; --bs-btn-hover-border-color: #B0F2B4; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #B0F2B4; --bs-btn-active-border-color: #B0F2B4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B0F2B4; --bs-btn-disabled-border-color: #B0F2B4; border-radius: 50px; } .btn-violet-light:hover,.btn-violet-light.nav-link:hover { --bs-btn-color: #333; --bs-btn-bg: #B0F2B4; --bs-btn-border-color: #B0F2B4; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B0F2B4; --bs-btn-hover-border-color: #B0F2B4; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #B0F2B4; --bs-btn-active-border-color: #B0F2B4; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B0F2B4; --bs-btn-disabled-border-color: #B0F2B4; border-radius: 50px; } .btn-warning-light { --bs-btn-color: #333; --bs-btn-bg: #ffcb5c; --bs-btn-border-color: #ffcb5c; --bs-btn-hover-color: #333; --bs-btn-hover-bg: #F2E2BA; --bs-btn-hover-border-color: #ffcb5c; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #F2E2BA; --bs-btn-active-border-color: #ffcb5c; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #ffcb5c; --bs-btn-disabled-border-color: #ffcb5c; border-radius: 50px; } .btn-warning-light:hover,.btn-warning-light.nav-link:hover { --bs-btn-color: #333; --bs-btn-bg: #ffcb5c; --bs-btn-border-color: #ffcb5c; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #ffcb5c; --bs-btn-hover-border-color: #ffcb5c; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #B0F2B4; --bs-btn-active-border-color: #ffcb5c; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #ffcb5c; --bs-btn-disabled-border-color: #ffcb5c; border-radius: 50px; } .txt-primary{ color: #017fb7; } .txt-violet{ color: #B0F2B4; } .txt-danger{ color: #dda782; } .btn-danger { --bs-btn-color: #fff; --bs-btn-bg: #dda782; --bs-btn-border-color: #dda782; --bs-btn-hover-color: #333; --bs-btn-hover-bg: #F2BAC9; --bs-btn-hover-border-color: #dda782; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #F2BAC9; --bs-btn-active-border-color: #dda782; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #dda782; --bs-btn-disabled-border-color: #dda782; border-radius: 50px; } .btn-danger:hover,.btn-danger.nav-link:hover { --bs-btn-color: #333; --bs-btn-bg: #F2BAC9; --bs-btn-border-color: #F2BAC9; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #dda782; --bs-btn-hover-border-color: #F2BAC9; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #dda782; --bs-btn-active-border-color: #F2BAC9; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #F2BAC9; --bs-btn-disabled-border-color: #F2BAC9; border-radius: 50px; } .btn-danger-light { --bs-btn-color: #333; --bs-btn-bg: #F2BAC9; --bs-btn-border-color: #F2BAC9; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #F2BAC9; --bs-btn-hover-border-color: #F2BAC9; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #F2BAC9; --bs-btn-active-border-color: #F2BAC9; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #F2BAC9; --bs-btn-disabled-border-color: #F2BAC9; border-radius: 50px; } .btn-danger-light:hover,.btn-danger-light.nav-link:hover { --bs-btn-color: #333; --bs-btn-bg: #F2BAC9; --bs-btn-border-color: #F2BAC9; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #F2BAC9; --bs-btn-hover-border-color: #F2BAC9; --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: #F2BAC9; --bs-btn-active-border-color: #F2BAC9; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #F2BAC9; --bs-btn-disabled-border-color: #F2BAC9; border-radius: 50px; } .btn-secondary, .btn-secondary:hover, .btn-danger, .btn-danger:hover, .btn-warning, .btn-warning:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover { border-radius: 50px; } .bgcontact{ background-image: url('../img/banners/bg_footer_contact.png'); background-repeat: no-repeat; background-position: center center; background-size: cover; } .form-check-input:checked { background-color: #017fb7; border-color: #017fb7; } .ribbonFake { width: 36px; height: 36px; padding: 0; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); } .ribbonFake > .content { color: white; font-size: 0.8rem; text-align: center; font-weight: 400; padding: 3px; border-radius: 30px; width: 28px; height: 28px; line-height: 22px; } .ribbon { position: absolute; z-index: 3; left: -14px; top: -12px; filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5)); } .ribbon > .content { color: white; font-size: 1.25rem; text-align: center; font-weight: 400; border-radius: 30px; background: #B3682B linear-gradient(45deg, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.25) 100%); /*padding: 8px 2px 4px;*/ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 100%); width: 30px; min-height: 30px; transition: clip-path 1s, padding 1s, background 1s; } .ribbon.slant-up > .content { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% calc(100% - 6px), 0 100%); } .ribbon.slant-down > .content { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 6px), 0 calc(100% - 12px)); } .ribbon.down > .content { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 50% 100%, 0 calc(100% - 8px)); } .ribbon.up > .content { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); } .ribbon.check > .content { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 40% 100%, 0 calc(100% - 12px)); } .slick-no-slide .inner { display: inline-block; } .block-creator{ position: absolute; top: 30px; right: 0; display: block; height: 105px; width: 270px; } #navbarId .navbar-dark .navbar-nav .nav-link { color: #EEE; } #navbarId .navbar-nav .nav-item:hover a.nav-link, #navbarId .navbar-nav .nav-item.active a:first-child { color: rgba(255,255,255,.65); } #navbarId .navbar a:not(.navbar-brand):hover, #navbarId .navbar a:not(.navbar-brand) i:hover, #navbarId .navbar .active, #navbarId .navbar li:hover > a:not(.navbar-brand) { color: rgba(255,255,255,.65); border-color: #EEE; } main{ padding-top:20px; } .membre .programme-item .btn-light, .schedule .programme-item .btn-light { background-color: #e8e9ea; border-color: #e8e9ea; } .membre .programme-item .card-body, .schedule .programme-item .card-body { padding: 0.8rem; } .schedule .programme-item .card-body:first-child { background: #ffffff; } .membre .card.theme-item, .schedule .card.theme-item{ margin-top: 1rem; } .membre .text-muted, .schedule .text-muted{ font-size:14px; } label:not(.form-check-label):not(.custom-file-label) { font-weight: 700; } label { display: inline-block; margin-bottom: .5rem; font-weight:bold; } .badge-blue{ background: rgba(31,170,225,1); } .badge-orange{ background: rgba(224,0,77,1); } .badge-green{ background: rgba(224,0,77,1); } .alert-green{ color: #fff; background-color: #8dc63f; border-color: #badbcc; } .img-hover{ width: 150px; height: 150px; vertical-align: middle; position: absolute; background: rgba(0,0,0,0.2); border-radius: 100px; opacity: 0; } .img-hover:hover{ opacity: 1; cursor: pointer; } .img-hover a { background: rgba(255,255,255,0.9); padding: 10px; color: black; } select.form-control{ -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } .section-bg { background-color: #f1f7fd; } .section-title { text-align: center; padding-bottom: 30px; } .category { font-size: 11px; font-weight: normal; font-style: italic; } .category a{ text-decoration: none; } .section-title h2, .section-title h3, .section-title .h2, .section-title .h3, .section-title h1 { font-size: 32px; font-weight: bold; margin-bottom: 20px; padding-bottom: 20px; position: relative; text-transform:uppercase; color: #2c4964; } .section-title h3,.section-title .h3 { font-size: 28px; } .section-title h2::before, .section-title h3::before, .section-title h1::before{ content: ''; position: absolute; display: block; width: 120px; height: 1px; background: #ddd; bottom: 1px; left: calc(50% - 60px); } .section-title h2::after, .section-title h3::after, .section-title h1::after { content: ''; position: absolute; display: block; width: 40px; height: 3px; background: #1977cc; bottom: 0; left: calc(50% - 20px); } .section-title p { margin-bottom: 0; font-weight: normal; line-height:normal; margin: 0; font-size: 16px; } #itemsTable tr td, #itemsTable tr th{ vertical-align:middle; } .dataTables_wrapper .dataTables_paginate .paginate_button { min-width: 0.5em !important; padding: 0em !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { padding: 0; } div.dataTables_wrapper div.dataTables_length select { width: 100% !important; } .dataTables_wrapper .dataTables_paginate { padding: 0 !important; margin: 0px 0 !important; } div.dataTables_wrapper div.dataTables_paginate ul.pagination { margin: 0px 0 !important; } .filter-border, .filter-border-md{ border-left: 1px solid #CCC; border-right: 1px solid #CCC; border-top: 0; border-bottom: 0; padding-left: 45px; padding-right: 45px; padding-top: 0; padding-bottom: 0; } @media (max-width: 767.98px){ .card-top h1.card-title{ font-size:26px; text-transform: uppercase; padding-right: 20%; } .card-top p.card-text{ font-size:15px; text-shadow: 1px 1px 5px #FFF; padding-right: 20%; } .filter-border{ border-top: 1px solid #CCC; border-bottom: 1px solid #CCC; border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; padding-top: 20px; padding-bottom: 20px; } .filter-border-md{ border-top: 0px solid #CCC; border-bottom: 0px solid #CCC; border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; padding-top: 0px; padding-bottom: 20px; } } .stick { position: fixed; width: 26.7%; top: 00px; } .abs { position: absolute; bottom: 0px; width: 92.5%; } .errors li{ list-style: none; width: 100%; text-align: center; } .errors ul{ padding-left: 0; margin-bottom: 0; } .schedule-tab-title{ box-shadow:0 0 10px #ccc; } .btn-light{ border: 1px solid #dee2e6 !important; } .btn.btn-light:focus, .btn.btn-light:active { box-shadow: none; outline: none; color: #333; } .border { border: 1px solid #dee2e6 !important; } .card-body p.lead { font-size: 1rem; text-decoration: underline; } .schedule-tab-title h4.text-muted{ border-bottom: 1px solid #ddd; } @media (max-width: 768px){ .form-wrapper .text-right{ text-align: center !important; } .form-wrapper .btn-primary{ display: block; margin: 0 auto; } } .dropdown-menu.menu-right[data-bs-popper] { right: 0; left:auto; } .login-logo, .register-logo { font-size: 2.1rem; font-weight: 300; margin-bottom: .9rem; text-align: center; } .login-logo a, .register-logo a { color: #495057; } .login-page, .register-page { -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-color: #e9ecef; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100vh; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .login-box, .register-box { width: 360px; } @media (max-width: 576px) { .login-box, .register-box { margin-top: .5rem; width: 90%; } } .login-box .card, .register-box .card { margin-bottom: 0; } .login-card-body, .register-card-body { background-color: #fff; border-top: 0; color: #666; padding: 20px; } .login-card-body .input-group .form-control, .register-card-body .input-group .form-control { border-right: 0; } .login-card-body .input-group .form-control:focus, .register-card-body .input-group .form-control:focus { box-shadow: none; } .login-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, .login-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text, .register-card-body .input-group .form-control:focus ~ .input-group-prepend .input-group-text, .register-card-body .input-group .form-control:focus ~ .input-group-append .input-group-text { border-color: #80bdff; } .login-card-body .input-group .form-control.is-valid:focus, .register-card-body .input-group .form-control.is-valid:focus { box-shadow: none; } .login-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, .login-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text, .register-card-body .input-group .form-control.is-valid ~ .input-group-prepend .input-group-text, .register-card-body .input-group .form-control.is-valid ~ .input-group-append .input-group-text { border-color: #28a745; } .login-card-body .input-group .form-control.is-invalid:focus, .register-card-body .input-group .form-control.is-invalid:focus { box-shadow: none; } .login-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text, .register-card-body .input-group .form-control.is-invalid ~ .input-group-append .input-group-text { border-color: #dc3545; } .login-card-body .input-group .input-group-text, .register-card-body .input-group .input-group-text { background-color: transparent; border-bottom-right-radius: 0.25rem; border-left: 0; border-top-right-radius: 0.25rem; color: #777; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .login-box-msg, .register-box-msg { margin: 0; padding: 0 20px 20px; text-align: center; } .social-auth-links { margin: 10px 0; } .dark-mode .login-card-body, .dark-mode .register-card-body { background-color: #343a40; border-color: #6c757d; color: #fff; } .dark-mode .login-logo a, .dark-mode .register-logo a { color: #fff; } .home-item h2 { margin-bottom: 0; } h2 { font-size: 18px; font-weight: normal; color: #EE7B30; } h2#title_modal{ color: #017fb7; } h2 a { color: #EE7B30; text-decoration: none; } a, a:hover { color: #0C3450; text-decoration: none; } .published { font-size: 11px; font-weight: normal; font-style: italic; } .published a{ text-decoration: none; } .home-item { padding-bottom: 20px; padding-top: 30px; border-top: 1px dashed #ccc; } .btn-group-xs > .btn, .btn-xs { padding: .36rem .55rem; border-radius: 1.2rem; } .input-group-sm > .custom-select, .input-group-sm > .form-control, .input-group-sm > .input-group-append > .btn, .input-group-sm > .input-group-append > .input-group-text, .input-group-sm > .input-group-prepend > .btn, .input-group-sm > .input-group-prepend > .input-group-text { padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; } .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-sm > .custom-select, .input-group-sm > .form-control:not(textarea) { height: calc(1.8125rem + 2px); } .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .btn, .input-group.has-validation > .input-group-append:nth-last-child(n+3) > .input-group-text, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .btn, .input-group:not(.has-validation) > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .img-container, .img-container-2, .img-preview { background-color: #017fb7 !important; } h5.photo-card-title { font-size: 14px; font-family: 'Montserrat', sans-serif; } .a_propos{ text-align:justify; } .hover-zoom { /*transform: scale(1.1); transition: all 0.3s linear; */ } .bg-image { position: relative; overflow: hidden; background-repeat: no-repeat; background-size: cover; background-position: 50%; } .hover-zoom img, .hover-zoom video { transition: all 0.2s ease-out; } .hover-zoom:hover img, .hover-zoom:hover video { transform: scale(1.1); } .social i{ font-size: 1.5em; padding: 3px; } .img-block{ width: 55px; background: #fff; text-align: center; } .communique-item .chapeau { font-weight: normal; } .communique-customer-home { font-size: 11px; font-weight: normal; padding: .4em; } .content.home .jumbotron { position: relative; overflow: hidden; background-color:black; /*margin-top: 80px;*/ max-height: 500px; height: 500px; } .jumbotron video { position: absolute; z-index: 1; top: 0; width:100%; height:100%; /* object-fit is not supported on IE */ object-fit: cover; object-position: center; opacity:0.5; } .blue { color: #0095da; } .img-circle{ border-radius:50%; } ul.evenement-menu { padding-left: 0; } ul.evenement-menu li { list-style: none; } ul.evenement-menu li.first { text-align: center; color: #fff; font-size: 12px; line-height: normal; padding: 5px; } h1.heading{ font-size: 2.5rem; font-weight: 700; } .container { /*background: #fff;*/ } .pt-6{ padding-top: 4.2em !important; } .footer, .footer .container { background: #017fb7; color:#fff; } .footer a { color:#fff; } .footer #menu-bottom-1 .nav-item a.nav-link { font-size:18px; font-weight: 400; text-transform: uppercase; text-align: end; padding:0.2rem 0; } .footer #menu-bottom-1 .nav-item.active a.nav-link { color:#B0F2B4; } footer .footer-top { border-top: 1px solid #FFF; display: block; font-size: 0.8em; margin: 0; padding: 10px 0; text-align: center; } footer .footer-bottom { clear: both; display: block; font-size: 10px; line-height: 24px; margin: 0; text-align: center; } .section-padding{ padding-top:50px; padding-bottom:50px; } .jumbotron.middle{ margin-bottom: 0; background: transparent; } #contact-map .card{ box-shadow: 0 0 20px rgba(0,0,0,.2); } i.one{ color:#fff; padding:10px; font-size:20px; } .one_container{ height: 45px; width: 45px; padding: 3px; margin-right: 10px; margin-bottom: 20px; display: inline-block; text-align: center; border-radius: 50px; background: #0095da; } a { color: #0C3450; text-decoration: underline; } .progress-bar{ font-size: 0.8rem; } .edito-section div.box{ padding:20px; box-shadow: 0px 0px 10px #ccc; background: #fff; } .googlemap-wrapper iframe{ width:100%; } .slick-slide .inner { margin: 0 15px; padding: 5px; } .textshadow{ text-shadow: 1px 1px 2px #000; } li.nav-item { list-style: none; } .slick-slide .inner { background: #ffffff; box-shadow: 0 0 10px #ccc; max-width: 140px; display:block; } .slick-track { align-items: stretch !important; display: flex !important; padding: 10px 0 10px 0; } .slick-initialized .slick-slide { display: flex !important; } .slick-slide { display: none; float: left; height: auto!important; min-height: 1px; } #dropzone:before { content: 'Cliquez-ici ou Déposez votre fichier ici'; } #dropzone { width: 100%; min-height: 70px; height: 100%; border: 2px dashed blue; border-radius: 3px; background-color: white; color: gray; font-family: sans-serif; font-size: 22px; display: flex; justify-content: center; align-items: center; transition: 400ms; } #dropzone:hover { cursor: pointer; } fieldset{ padding: 30px 20px 15px 20px; border:1px solid #ccc; margin-top: 20px; margin-bottom: 40px; display: block; position: relative; background: #f8f9fa; } fieldset legend{ padding: 2px 8px; position: absolute; background: #fff; top: -15px; left: 10px; border: 1px solid #ccc; font-size: 1rem; width: auto; text-transform: uppercase; color: #666; border-radius: 5px; box-shadow: 0 0 5px #ccc; } .action { padding:10px 10px 10px 10px; } .dataTables_length{ text-align: right; } .corner-top{ /*border: 1px solid #ccc; border-bottom: 0; border-radius: 10px 10px 0 0;*/ padding: 5px 20px ; color: #999; } .green{ color:#8dc63f; } .btn.btn-green { background-color: #8dc63f; color:#FFF; position: relative; z-index: 1; } .btn-green:hover { color:#FFFFFF; background-color: #8dc63f; } .badge-green{ color:#FFFFFF; background-color: #8dc63f; } .btn.btn-blue{ background-color: #0095da; color:#FFF; position: relative; z-index: 1; } .btn-blue:hover{ color:#FFFFFF; background-color: #1977cc; } .badge-blue{ color:#FFFFFF; background-color: #0095da; } .orange{ color:#f7941e !important; } .btn.btn-orange{ background-color: #f7941e; color:#FFF; position: relative; z-index: 1; } .btn.btn-orange:hover{ color:#FFFFFF; background-color: #f08200; } .badge-orange{ color:#FFFFFF; background-color: #f7941e; } #edito { /*background: #f3f4f3;*/ } #toast-container .toast { background-color: #007bff; } #toast-container .toast-success { background-color: #28a745; color:#fff; } #toast-container .toast-error { background-color: #dc3545; color:#fff; } #toast-container .toast-info { background-color: #17a2b8; color:#000; } #toast-container .toast-warning { background-color: #ffc107; color:#000; } .toast-bottom-full-width .toast, .toast-top-full-width .toast { max-width: inherit; } .offcanvas { z-index: 1065; } .offcanvas, .offcanvas-end { width: 600px; } .offcanvas-btn { z-index: 10; position: fixed; top: auto; bottom: 14px; right: 0px; width: auto; border-radius: 5px 0 0 5px; } .nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #0095da; } p[data-type="component-text"] { margin-bottom: 20px; } h3[data-type="component-text"] { margin-bottom: 30px; } .equipe img { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%); } @keyframes slide{ 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-1692px, 0, 0); } } .shadow-md { box-shadow: 0 10px 10px rgba(0,0,0,.3) !important; } .content.home, .container.top{ } .profile .card { box-shadow: 0 1px 3px 0 rgba(0,0,0,.1), 0 1px 2px 0 rgba(0,0,0,.06); } .profile .card { position: relative; display: flex; flex-direction: column; min-width: 0; word-wrap: break-word; background-color: #fff; background-clip: border-box; border: 1px solid #dee2e6 ; border-radius: .25rem; } .profile .card-body { flex: 1 1 auto; min-height: 1px; padding: 1rem; } .profile .gutters-sm { margin-right: -8px; margin-left: -8px; } .profile .gutters-sm>.col, .profile .gutters-sm>[class*=col-] { padding-right: 8px; padding-left: 8px; } .profile .mb-3, .profile .my-3 { margin-bottom: 1rem!important; } .profile .bg-gray-300 { background-color: #e2e8f0; } .profile .shadow-none { box-shadow: none!important; } /* About Me ---------------------*/ .profile .about-text h3 { font-size: 45px; font-weight: 700; margin: 0 0 6px; } @media (max-width: 767px) { .profile .about-text h3 { font-size: 35px; } } .profile .about-text h6 { font-weight: 600; margin-bottom: 15px; } @media (max-width: 767px) { .profile .about-text h6 { font-size: 18px; } } .profile .about-text p { font-size: 18px; max-width: 450px; } .profile .about-text p mark { font-weight: 600; color: #20247b; } .profile .about-list { padding-top: 10px; } .profile .about-list .media { padding: 5px 0; } .profile .about-list label { color: #20247b; font-weight: 600; width: 88px; margin: 0; position: relative; } .profile .about-list label:after { content: ""; position: absolute; top: 0; bottom: 0; right: 11px; width: 1px; height: 12px; background: #20247b; -moz-transform: rotate(15deg); -o-transform: rotate(15deg); -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); margin: auto; opacity: 0.5; } .profile .about-list p { margin: 0; font-size: 15px; } @media (max-width: 991px) { .profile .about-avatar { margin-top: 30px; } } .profile .about-section .counter { padding: 22px 20px; background: #ffffff; border-radius: 10px; box-shadow: 0 0 30px rgba(31, 45, 61, 0.125); } .profile .about-section .counter .count-data { margin-top: 10px; margin-bottom: 10px; } .profile .about-section .counter .count { font-weight: 700; color: #20247b; margin: 0 0 5px; } .profile .about-section .counter p { font-weight: 600; margin: 0; } .profile mark { background-image: linear-gradient(rgba(252, 83, 86, 0.6), rgba(252, 83, 86, 0.6)); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 bottom; background-color: transparent; padding: 0; color: currentColor; } .profile .theme-color { color: #fc5356; } .profile .dark-color { color: #20247b; } /* ............................................................... */ /* ............................................................... */ #bloc1{ position: sticky; height: 232px; } #retrobg { position: absolute; top: 0px; left: 0; right: 0; height: 25vh; bottom: 80vh; overflow: hidden; transition: all 0.5s ease-in-out; display: block; } .scrolled #retrobg { bottom: 80vh; height: 20vh; } #retrobg-sky { position: absolute; display: flex; align-items: flex-end; justify-content: center; top: 0; width: 100%; height: 25vh; /*bottom: 80vh; background: url('../img/bg_sky.png') repeat-x; background:linear-gradient(#2184c7, #bad9e7);*/ background-size: cover; transition: all 0.5s ease-in-out; /*background: linear-gradient(#c0e9fa, #87CEEB);*/ } .scrolled #retrobg-sky { bottom: 80vh; height: 20vh; } #retrobg-sky { background: linear-gradient(#FFF, #FFF); } .morning #retrobg-sky { background: linear-gradient(#FFF, #D4F4FF 30%, #8ed8f3 100%); } .day #retrobg-sky { /*background:linear-gradient(#2184c7, #bad9e7 50%);*/ } .evening #retrobg-sky { /*background: linear-gradient(#FFF, #2184c7 30%, #CD7941 100%);*/ } .night #retrobg-sky { background:linear-gradient(#01152b, #032a54 50%); } /* ............................................................... */ :root { --animation-time: 20s; --animation-delay: 5s; --animation-top: 10px; --animation-left: 0px; --scale-logo: 0.2; --scale-logo-round: 0.15; --scale-fleche: 0.9; --scale-coeur: 0.9; --opacity-coeur: 0.9; --duration-plane: 3s; --scale-plane: 0.4; --scale-client: 0.3; --translate-client: 400px; } #retrobg-megaphones { position: absolute; width: 100%; height: 100%; opacity: 1; /*transition: all 0.5s ease-in-out;*/ top: 0; } #retrobg-megaphones .megaphone { position: absolute; opacity: 0; bottom:-210px; left:32%; animation-timing-function: ease-in; animation-iteration-count: 1; animation-duration: 5s; animation-delay:1s; animation-fill-mode: forwards; transform:scale(0.2) translateY(0px); animation-name: megaphone-anim; /*transition: all 0.5s ease-in-out;*/ } @-webkit-keyframes megaphone-anim { 0% { opacity: 0; transform:scale(0.2) translateY(0px); } 5% { opacity: 1; transform:scale(0.2) translateY(0px); } 10% { transform:scale(0.2) translateY(-240px) rotate(0deg); } 30% { transform:scale(0.2) translateY(-240px) rotate(0deg); } 35% { transform:scale(0.3) translateY(-245px) rotate(-20deg); } 40% { transform:scale(0.2) translateY(-240px) rotate(0deg); } 95% { opacity: 1; transform:scale(0.2) translateY(-240px); } 100% { opacity: 0; transform:scale(0.2) translateY(0px); } } #retrobg-clients { position: absolute; width: 100%; height: 100%; opacity: 1; /*transition: all 0.5s ease-in-out;*/ top: 0; } #retrobg-clients .client-fixe { position: absolute; opacity: 0; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-name: clients-fixe-anim; animation-fill-mode: forwards; transform:scale(var(--scale-client)) translateY(0) rotate(0deg); transform-origin: center; /*transition: all 0.5s ease-in-out;*/ } #retrobg-clients .client-fixe img{ border-radius: 50px; padding: 0px; border: 1px solid #ddd; box-shadow: 0 0 20px #ccc; } @-webkit-keyframes clients-fixe-anim { 0% { opacity: 0; transform:scale(var(--scale-client)) translateY(0) rotate(-10deg); } 10% { opacity: 1; transform:scale(calc(var(--scale-client))) translateY(0px) rotate(-10deg); } 90% { opacity: 1; transform:scale(calc(var(--scale-client) - 0.1)) translateY(-18px) rotate(-10deg); } 100% { opacity: 0; transform:scale(calc(var(--scale-client) - 0.1)) translateY(-20px) rotate(-10deg); } } #retrobg-clients .client { position: absolute; opacity: 1; top: -50px; animation-timing-function: linear; animation-iteration-count: 1; animation-name: clients-anim; animation-fill-mode: forwards; transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg); transform-origin: center; /*transition: all 0.5s ease-in-out;*/ } #retrobg-clients .client img{ border-radius: 50px; padding: 0px; border: 1px solid #ddd; box-shadow: 0 0 20px #ccc; } @-webkit-keyframes clients-anim { 0% { transform:scale(var(--scale-client)) translateY(-50px) translateX(0px) rotate(0deg); } 100% { transform:scale(calc(var(--scale-client) - 0.1)) translateY(calc( ( 1.5 / var(--scale-client) ) * 250px )) translateX(var(--translate-client)) rotate(-220deg); } } @-webkit-keyframes clients-anim-1 { 0% { transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg); } 100% { transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(400px) rotate(-220deg); } } @-webkit-keyframes clients-anim-2 { 0% { transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg); } 100% { transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(250px) rotate(-420deg); } } @-webkit-keyframes clients-anim-3 { 0% { transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg); } 100% { transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(-350px) rotate(320deg); } } @-webkit-keyframes clients-anim-4 { 0% { transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg); } 100% { transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(300px) rotate(420deg); } } @-webkit-keyframes clients-anim-5 { 0% { transform:scale(var(--scale-client)) translateY(-200px) translateX(0px) rotate(0deg); } 100% { transform:scale(var(--scale-client)) translateY(calc(250% / var(--scale-client))) translateX(-400px) rotate(600deg); } } #retrobg-words { position: absolute; width: 100%; height: 100%; opacity: 1; /*transition: all 0.5s ease-in-out;*/ top: 0; } #retrobg-words .word { position: absolute; opacity: 0; font-size: 30px; font-family: 'Amatic SC', cursive; animation-timing-function: ease-in-out; animation-iteration-count: 1; animation-fill-mode: forwards; transform:scale(0.9); animation-name: words-anim; text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; /*transition: all 0.5s ease-in-out;*/ } .night #retrobg-words .word { color:#eeeeee; text-shadow: none; } @-webkit-keyframes words-anim { 0% { opacity: 0; transform:scale(0.9); } 5% { opacity: 1; } 50% { opacity: 0.8; } 95% { opacity: 1; } 100% { opacity: 0; transform:scale(1); } } #retrobg-clouds { position: absolute; width: 100%; height: 100%; opacity: 1; transition: all 0.5s ease-in-out; top: 0px; } #retrobg-clouds .cloud { position: absolute; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; animation-name: clouds-anim; transition: all 0.5s ease-in-out; left:0; } @-webkit-keyframes clouds-anim { 0% { opacity: 0; left:0; } 5% { opacity: 1; } 50% { opacity: 1; } 90% { opacity: 1; } 95% { opacity: 1; left:100%; } 100% { opacity: 0; left:100%; } } #retrobg-all { position: absolute; width: 100%; height: 100%; opacity: 1; top: 0px; bottom: 0px; } #retrobg-all #fleche{ position: absolute; opacity: 1; left:30%; top:100%; transform: translateX(0px) scale(var(--scale-fleche)); animation: fleche-anim 6s 1 linear; } @keyframes fleche-anim { 0% { top:100%; transform: translateX(0px) scale(var(--scale-fleche)); } 100% { top:-130%; transform: translateX(250px) scale(0); } } @keyframes fleche-anim-back { 0% { top:100%; transform: translateX(0px) rotate(-60deg) scale(var(--scale-fleche)); } 100% { top:-100%; transform: translateX(-250px) rotate(-60deg) scale(0); } } #retrobg-all #coeur{ position: absolute; opacity: 0; left:60%; transform: scale(var(--scale-coeur)); animation: coeur-anim 6s 1 ease-in-out; } @keyframes coeur-anim { 0% { opacity: 0; } 20% { opacity: var(--opacity-coeur); } 80% { opacity: var(--opacity-coeur); } 100% { opacity: 0; } } #retrobg-all .planeWrapper { position: absolute; opacity: 1; left:-100px; top:100px; width: 20px; height: 20px; animation-fill-mode: forwards; offset-path: path("M 0 -93 Q 105 -45 256 -26 Q 344 -16 424 -32 Q 530 -54 662 -51 Q 776 -51 865 -72 Q 940 -88 1019 -70 Q 1104 -53 1236 -70 Q 1437 -103 1661 -84"); animation: move-wrapper calc(var(--duration-plane) * 4) ease-in-out 1; } @keyframes move-wrapper { 0% {offset-distance: 0%;} 100% {offset-distance: 100%;} } /*@keyframes move-wrapper { 0% {left:-100px;transform: translateY(0px);} 20% {transform: translateY(-50px);} 30% {transform: translateY(-30px);} 40% {transform: translateY(-50px);} 60% {transform: translateY(-40px);} 80% {transform: translateY(-60px);} 100% {left:1450px;transform: translateY(-100px);} }*/ #retrobg-all .plane { position: absolute; opacity: 1; top: 0px; right:0px; transform: scale(var(--scale-plane)); animation: plane-anim calc(var(--duration-plane) + 1s) cubic-bezier(.45,.05,.55,.95) infinite; /*animation: x-axis 6s 1 linear;*/ } @keyframes plane-anim { 0% {transform: scale(var(--scale-plane)) translateY(0) rotateX(0) rotateZ(-20deg);} 25% {transform: scale(var(--scale-plane)) translateY(-30px) rotateX(40deg) rotateZ(0);} 50% {transform: scale(var(--scale-plane)) translateY(0) rotateX(0) rotateZ(20deg);} 75% {transform: scale(var(--scale-plane)) translateY(30px) rotateX(-40deg) rotateZ(0);} 100% {transform: scale(var(--scale-plane)) translateY(0) rotateX(0) rotateZ(-20deg);} } .plane .wingRight { position: absolute; width: 0; height: 0; border-left: 22.5px solid transparent; border-right: 12.5px solid transparent; border-bottom: 115px solid #facfe4; transform: rotate(61deg); z-index:4; } .plane .bottom { position: relative; width: 0; height: 0; border-left: 12.5px solid transparent; border-right: 12.5px solid transparent; border-bottom: 25.5px solid #e82e8a; top: 71px; transform: rotate(-5deg); left:-52.5px; z-index:3; } .plane .top { position:absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 30px solid #f79bc9; top: 65px; transform: rotate(5deg); left:-60px; z-index:1; } .plane .middle { position: absolute; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 135px solid #f79bc9; top: -13.5px; transform: rotate(72deg); left:-7.5px; z-index:2; } .plane .wingLeft { position: absolute; width: 0; height: 0; border-left: 25px solid transparent; border-bottom: 135px solid #facfe4; transform: rotate(78deg) skewY(-35deg); left:-18.5px; z-index:3; top:-30px; } @keyframes x-axis { 0% { transform: scale(0.1) translateX(0px); opacity:0; } 5% { opacity:1; } 50% { transform: scale(0.4) translateX(600px); } 95% { opacity:1; } 100% { opacity:0; transform: scale(0.1) translateX(1200px); } } @keyframes y-axis { 0% { transform: translateY(0px); } 100% { transform: translateY(-150px); } } #retrobg-verticalLogos { position: absolute; width: 100%; height: 100%; opacity: 0; top: 0; animation-timing-function:ease-out; animation-iteration-count: 1; animation-delay: 1s; animation-fill-mode: forwards; animation-duration: 1s; animation-name: verticalLogos-anim; } @-webkit-keyframes verticalLogos-anim { 0% { top: 35%; opacity:0; } 50% { top: 17%; opacity:0; } 100% { top: 0%; opacity:1; } } #retrobg-verticalLogos #verticalLogo { position: absolute; opacity: 1; animation-timing-function:linear; animation-iteration-count: 1; animation-delay: 2s; animation-duration: 3s; animation-name: verticalLogo-anim; /*transition: all 0.5s ease-in-out;*/ bottom:-40px; right: -115px; transform: scale( var(--scale-logo) ); filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 1)); } .night #retrobg-verticalLogos #verticalLogo { /*animation-name: verticalLogo-night-anim; */ filter: drop-shadow(0px 0px 5px rgba(255, 255, 255, 0.5)); } @-webkit-keyframes verticalLogo-night-anim { 0% { transform: scale(0.25); opacity:1; /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/ /*filter: drop-shadow(0 0 0 0 rgba(0, 0, 0, 0.7));*/ filter: drop-shadow(0 0 transparent); } 5% { transform: scale(0.26); /*box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);*/ filter: drop-shadow(0 0 transparent); } 10% { transform: scale(0.25); opacity:1; /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/ filter: drop-shadow(0 0 transparent); } 100% { transform: scale(0.25); opacity:1; /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/ filter: drop-shadow(0 0 transparent); } } @-webkit-keyframes verticalLogo-anim { 0% { opacity:1; /*transform: scale(0.25); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);*/ /*filter: drop-shadow(0 0 0 0 rgba(0, 0, 0, 0.7)); filter: drop-shadow(0px 0px 3pxrgba(255, 255, 255, 1)); */ } 100% { opacity:1; /*transform: scale(0.25); box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 1));*/ } } #retrobg-verticalLogos #verticalRoundLogo { position: absolute; opacity: 1; animation-timing-function:ease-in-out; animation-iteration-count: infinite; animation-delay: 2s; animation-duration: 12s; animation-name: verticalRoundLogo-anim; /*transition: all 0.5s ease-in-out;*/ bottom:-90px; right: -10px; transform: scale( var(--scale-logo-round) ) rotate(0deg); filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.7)); } .night #retrobg-verticalLogos #verticalRoundLogo { filter: drop-shadow(0px 10px 10px rgba(255, 255, 255, 0.5)); filter: drop-shadow(none); } @-webkit-keyframes verticalRoundLogo-anim { 0% { transform: scale( var(--scale-logo-round) ) rotate(0deg); opacity:1; } 70% { transform: scale( var(--scale-logo-round) ) rotate(200deg); } 100% { transform: scale( var(--scale-logo-round) ) rotate(360deg); opacity:1; } } #retrobg-lines { position: absolute; width: 100%; height: 100%; opacity: 1; transition: all 0.5s ease-in-out; top: 0px; } #retrobg-lines .line { position: absolute; opacity: 0; animation-timing-function: linear; animation-iteration-count: infinite; /*animation-name: clouds-anim;*/ transition: all 0.5s ease-in-out; left:0; } #retrobg-sky #retrobg-lines .line { width: 1320px; height: 100px; mask-image: url('../img/banner/Mask.png'); mask-position: -700% center; mask-repeat: no-repeat; animation: mask-play-forward 5s linear 1 ; /*cubic-bezier(.5,0,.5,1) alternate*/ animation-fill-mode: both; } @-webkit-keyframes mask-play { from { -webkit-mask-position: -1500% center; mask-position: -1500% center; } to { -webkit-mask-position: 1500% center; mask-position: 1500% center; } } @-webkit-keyframes mask-play-forward { 0% { -webkit-mask-position: -700% center; mask-position: -700% center; } 1% { -webkit-mask-position: -700% center; mask-position: -700% center; } 20% { -webkit-mask-position: 50% center; mask-position: 50% center; } 80% { -webkit-mask-position: 50% center; mask-position: 50% center; } 99% { -webkit-mask-position: 800% center; mask-position: 800% center; } 100% { -webkit-mask-position: 800% center; mask-position: 800% center; } } @-webkit-keyframes mask-play-backward { 0% { -webkit-mask-position: 800% center; mask-position: 800% center; } 1% { -webkit-mask-position: 800% center; mask-position: 800% center; } 20% { -webkit-mask-position: 50% center; mask-position: 50% center; } 80% { -webkit-mask-position: 50% center; mask-position: 50% center; } 99% { -webkit-mask-position: -700% center; mask-position: -700% center; } 100% { -webkit-mask-position: -700% center; mask-position: -700% center; } } /*@keyframes mask-play { from { -webkit-mask-position: -1500% center; mask-position: -1500% center; } to { -webkit-mask-position: 1500% center; mask-position: 1500% center; } }*/ /* ............................................................... */ #retrobg-mountains-left { left: 0; clip-path: polygon(0% 100%, 0% 55%, 5% 60%, 10% 55%, 20% 50%, 25% 42%, 30% 38%, 33% 35%, 40% 45%, 50% 50%, 60% 70%, 70% 85%, 75% 82%, 80% 91%, 85% 90%, 90% 95%, 95% 98%, 100% 100%); } #retrobg-mountains-right { right: 0; clip-path: polygon(0% 100%, 5% 95%, 10% 85%, 15% 87%, 20% 80%, 25% 78%, 30% 65%, 40% 70%, 50% 57%, 60% 53%, 67% 68%, 70% 70%, 75% 66%, 80% 55%, 90% 50%, 95% 60%, 100% 57%, 100% 100%); } /* ............................................................... */ #retrobg-ground { position: absolute; overflow: hidden; bottom: 80vh; width: 100%; margin: 0 auto; height: 20vh; left: 0; transform-origin: center left; transition: all 0.3s ease-in-out; } /* ............................................................... */ #retrobg-stars { position: absolute; width: 100%; height: 60vh; opacity: 0; animation: rotate 500s infinite linear; } .night #retrobg-stars { opacity: 1; } .retrobg-star { position: absolute; border-radius: 50%; width: 2px; height: 2px; background-color: #fff; transition: all 2s ease-in-out; animation: 6s ease-in-out infinite alternate retrobg-star-glow-anim; box-shadow: 0 0 5px 2px rgba(200, 200, 200, 0.4); } .retrobg-star:nth-child(1n+0) { animation-delay: 0.1s; opacity: .1; } .retrobg-star:nth-child(2n+0) { animation-delay: 0.2s; opacity: .3; } .retrobg-star:nth-child(3n+0) { animation-delay: 0.3s; opacity: .5; } .retrobg-star:nth-child(4n+0) { animation-delay: 0.4s; opacity: .3; } .retrobg-star:nth-child(5n+0) { animation-delay: 0.5s; opacity: .2; } .retrobg-star:nth-child(6n+0) { animation-delay: 0.6s; opacity: .4; } .retrobg-star:nth-child(7n+0) { animation-delay: 0.7s; opacity: .1; } .retrobg-star:nth-child(8n+0) { animation-delay: 0.8s; opacity: .5; } .retrobg-star:nth-child(9n+0) { animation-delay: 0.9s; opacity: .4; } .retrobg-star:nth-child(10n+0) { animation-delay: 1.0s; opacity: .2; } @keyframes retrobg-star-glow-anim { from { box-shadow: 0 0 5px 2px rgba(200, 200, 200, 0.2); } to { box-shadow: 0 0 10px 5px rgba(240, 240, 240, 0.4); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } #status{ color:#333; background:#FFF; padding:10px; } .connexion-text{ font-size:14px; font-family: 'Montserrat', sans-serif; color:rgba(0,0,0,.55); font-weight: 400; } @-webkit-keyframes pulsate-btn { 0% { transform: scale(0.6, 0.6); opacity: 1; } 100% { transform: scale(1, 1); opacity: 0; } } @keyframes pulsate-btn { 0% { transform: scale(0.6, 0.6); opacity: 1; } 100% { transform: scale(1, 1); opacity: 0; } } @media (max-width: 767.98px){ .section{padding-top:3rem;padding-bottom:3rem} .navbar-dark .navbar-nav .nav-link { color: rgba(0,0,0,.55); } .navbar-nav .nav-item:hover a.nav-link,.navbar-nav .nav-item.active a:first-child{ color:rgba(0,0,0,.95); } .navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover { color: rgba(0,0,0,.75); } .navbar a:not(.navbar-brand) i { color: rgba(0,0,0,.55); } .block-creator{ position: relative; top: 0; right: 0; display: block; width: 100%; clear: both; } .offcanvas-btn { top: auto; bottom: 14px; } .offcanvas, .offcanvas-end { width: 100%; } }