@font-face { font-family: 'Quicksand'; font-style: normal; font-weight: 300; src: url(Quicksand-VariableFont_wght.ttf) format('truetype'); font-display: swap; }
    body { margin: 0; padding: 0; font-size: 22px; font-family: 'Quicksand', Arial, sans-serif; }
    .back_top { position: fixed; bottom: 30px; margin: 10px; right: 30px; width: 80px; height: 80px; display: block; opacity: 0.4; transition: .5s; background-image: url(informatique-herault-css/creation-sites-internet-34/fleche-page2.png); cursor: pointer; background-color: transparent; border: 0; background-size: contain; background-repeat: no-repeat; }
    .back_top:hover { opacity: 0.9; transition: .5s; }
    h1 { font-size: 50px; padding: 0; margin: 0; color: #003C55; text-align: center; font-weight: 300; }
    h2 { font-size: 30px; padding: 40px 0 0 0; margin: 0; color: #003C55; text-align: center; font-weight: 300; }
    a:link, a:visited { color: #FFF; text-decoration: none; }
    a:hover { color: #00AFFE; text-decoration: none; }
    .basliens { width: 100%; text-align: center; margin: 65px 0 0 0; color: #FFF; background-color: #000; min-height: 450px; bottom: 0; }
    .basliens a:link, .basliens a:visited { color: #FFF; }
    .basliens a:hover { color: #4FD1FE; }
    .sarl_dbc { width: auto; padding: 50px 0; text-align: center; }
    .sarl_dbc .txtinfo { font-size: 22px; color: #4FD1FE; }
    .sarl_dbc .bleu { color: #4FD1FE; }
    .sarl_dbc_informatique_site_internet { max-width: 1150px; margin: 0 auto; padding: 40px; }
    .dbc_informatique { overflow: hidden; padding: 25px; text-align: justify; }
    .dbc_informatique .img500 { max-width: 500px; width: 100%; height: auto; float: right; margin: 0 15px; }
    .dbc_informatique a:link, .dbc_informatique a:visited { color: #019CC8; }
    .dbc_informatique a:hover { color: #012A8D; }
    .popup { position: absolute; top: 200px; width: 500px; text-align: center; font-size: 24px; padding: 30px; font-style: italic; left: 30%; color: #000; background-color: rgba(255,255,255,0.6); border-radius: 25px; }
    .btns { position: absolute; right: 0; top: 20px; z-index: 100000; overflow: hidden; }
    .btnlangue { transition: all .4s; border: 0; margin: 7px; display: inline-block; vertical-align: middle; }
    .btnlanguetxt { font-size: 36px; color: #242365; text-shadow: 1px 0 0 #FFF, 1px 1px 0 #FFF, 0 1px 0 #FFF, -1px 1px 0 #FFF, -1px 0 0 #FFF, -1px -1px 0 #FFF, 0 -1px 0 #FFF, 1px -1px 0 #FFF; }
    .btnlangue:hover { opacity: 0.7; transition: all .4s; border: 0; }
    .box { display: grid; grid-template-columns: repeat(auto-fit, minmax(29%, auto)); background: linear-gradient(0deg, #009FE3, #003C55); color: #FFF; padding: 10px; }
    .activity { padding: 20px; }
    .centrer { text-align: center; }
    .rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; z-index: 100; display: block; }
    .rslides li { position: absolute; display: none; width: 100%; left: 0; top: 0; z-index: 100; }
    .rslides li:first-child { position: relative; display: block; float: left; }
    .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; z-index: 100; }
    .centered-btns_tabs { position: relative; margin-top: -55px; text-align: center; z-index: 1000; padding: 0; list-style: none; }
    .centered-btns_tabs li { display: inline-block; margin-right: 5px; }
    .centered-btns_tabs a { text-indent: -9999px; overflow: hidden; border-radius: 20px; background: rgba(0,0,0,0.2); display: inline-block; box-shadow: inset 0 0 2px 0 rgba(0,0,0,0.3); width: 15px; height: 15px; border: #CCC 1px solid; margin: 5px; }
    .centered-btns_here a { background: rgba(0,0,0,0.8); }
    .slider1 { background-color: #DADBDC; z-index: 100; display: block; }
    .reveal-loaded .reveal [class*="reveal-"] { opacity: 0; transform: translateY(50px); }
    .reveal-loaded [class*="reveal"] { transition: 1s cubic-bezier(.5, 0, 0, 1); }
    .reveal-loaded .reveal-2 { transition-delay: .1s; transform: translateX(30px); }
    .reveal-loaded .reveal-3 { transition-delay: .2s; }
    .reveal-loaded .reveal-4 { transition-delay: .3s; transform: translateX(-30px); }
    .boutonu { width: 260px; height: 260px; text-align: center; margin: 10px; display: inline-block; }
    .bouton { background-color: #000; color: #fff; display: inline-block; margin: 10px; width: 260px; height: 260px; overflow: hidden; position: relative; text-align: center; border: 3px solid #333; border-radius: 15px; }
    .bouton figcaption { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 260px; height: 260px; align-items: center; z-index: 1; display: flex; flex-direction: column; justify-content: center; line-height: 1.1em; opacity: 1; z-index: 2; transition-delay: 0.1s; font-size: 24px; font-family: sans-serif; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; }
    .bouton:hover > img { opacity: 1; transition: all .5s; }
    .bouton > img { opacity: 0.7; }
    .menu { background-color: #3FA8CA; text-align: center; width: auto; }
    .herault { color: #FFF; padding: 10px; display: inline-block; transition: all .3s; box-sizing: border-box; }
    .herault:hover { color: #036; background-color: #0FF; transition: all .3s; box-sizing: border-box; }
	.linkbas { display: inline-block; margin: 6px 4px; padding: 8px 14px; border: 1px solid #226288; color: #18445F; text-decoration: none; line-height: 1.4; transition: all .3s; }
	.linkbas:visited { color: #18445F; }
	.linkbas:hover { color: #D426CD; border-color: #FFF; }    
	.yoga-link { display: inline-block; margin-top: 30px; padding: 15px 20px; border-top: 1px solid rgba(255,255,255,0.3); font-size: 14px; font-style: italic; }

    @media only screen and (max-width: 768px) {
        .btns { display: none; }
        .btnlangue { opacity: 0.5; transition: all .4s; border: 0; padding: 5px; display: inline-block; }
        .back_top { bottom: 10px; right: 10px; width: 40px; height: 40px; background-size: cover; }
        .sarl_dbc_informatique_site_internet { padding: 10px; }
        .popup { display: none; }
        .centered-btns_tabs { display: none; }
        .box { display: block; }
        .activity { padding: 15px; display: block; width: 90%; }
        .reveal-loaded .reveal [class*="reveal-"] { opacity: 0; transform: translateY(20px); }
        .reveal-loaded .reveal-2 { transition-delay: .1s; transform: translateX(10px); }
        .reveal-loaded .reveal-4 { transition-delay: .3s; transform: translateX(-10px); }
        .herault { width: 100%; }
    }

    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
        .reveal-loaded .reveal [class*="reveal-"] { opacity: 1 !important; transform: none !important; }
    }