芝麻web文件管理V1.00

编辑当前文件:/home/asmplong/www/dist/css/style.css

body { padding:0; font-family:"Montserrat", arial; font-size:14px; color:#1c333e; margin:0; padding-bottom:0; background:#f5f5f5; transition:0.2s all ease-out; }
.tiny-body { padding:0; }
a { color:#1c333e; }
a:hover { color:#267da5; }
.bg-whitegrey { background:#f5f5f5; }
header { position:fixed; width:100%; z-index:1030; top:0; left:0; background: rgba(15, 15, 45, 0.3);  transition:0.2s all ease-out; }
header.tiny-header { position:fixed; height:145px; box-shadow:0 10px 20px -10px rgba(0,0,0,0.2); transition:0.2s all ease-out; background: linear-gradient(270deg, #1d578e 0%, #128aba 100%); }

header .ref_top { text-align:left; font-size:12px; margin:0; color:#fff; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.3); }
header .ref_top .dropdown-menu { font-size:13px; border:none; top:auto; background:#1077a8; padding:15px; }

header .ref_top .dropdown-menu a { color:#fff }
header .ref_top .dropdown-menu a:hover { background:#1077a8; color:#f5f5f5; }

header > .container { padding: 10px 15px 10px 15px; }
header.tiny-header >  .container { padding: 10px 15px 10px 15px; }
@media screen and (min-width: 1140px) {
header > .container, .solutions .container, .realisations .container, .certifications .container, .footer .container, header .ref_top .container  { width:calc(100% - 200px); max-width:calc(100% - 200px); }
}

.header-container {
	position:relative;
	width:100%;
	height:100vh;
	border:none;
	padding:0;
	}

.video-container {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	overflow:hidden;
	background: linear-gradient(270deg, #128aba 0%, #1d578e 100%);
	}
	
.video-container video, .video-container iframe { 
    position: absolute;
    top: auto;
    left: 0;
		right:0;
		bottom:0;
    width: auto;
    height: auto;
		z-index:-1;
}

.video-container video#video_1 { background: url(../../assets/videos/bg-video-bateau.jpg); }
.video-container video#video_2 { background: url(../../assets/videos/bg-plongee.jpg); }
.video-container video#video_3 { background: url(../../assets/videos/bg-poulpe.jpg); }

.owl-carousel .owl-item, .owl-carousel .owl-item > div  { height:100vh; position:relative }

.homeslider-nav {
    position: absolute;
    z-index: 10;
    top: 50%;
    width: 100vw;
    margin-left: -15px;
    padding: 0 100px;
    transform: translateY(-50%);
}

.homeslider-nav.multi {
    position: absolute;
    z-index: 10;
    top: 300px;
    width: 100vw;
    margin-left: -15px;
    padding: 0 100px;
    transform: translateY(-50%);
}

@media screen and (max-width: 768px) {

.homeslider-nav, .homeslider-nav.multi  { display:none; }

.header-container {

height:60vh;
	}

.owl-carousel .owl-item, .owl-carousel .owl-item > div  { height:60vh; }

.owl-carousel-multi .owl-item, .owl-carousel-multi .owl-item > div  { height:600px; }

.video-container video, .video-container iframe { 
    position: absolute;
    top: auto;
    left: 0;
		right:0;
		bottom:0;
    width: auto;
    height: 60vh;
		z-index:-1;
}

}
.homeslider-nav nav {
    display: flex;
    justify-content: space-between;
}

.homeslider-nav nav a {
    display: flex;
    overflow: hidden;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: space-between;
    position: relative;
    width: 20px;
    height: 50px;
    color: #fff;
    transition: width 0.5s;
		text-shadow:none;
}

.homeslider-nav nav a:hover {
    width: 150px;
    padding: 0 10px;
}

.homeslider-nav nav a.homeslider-nav-next:hover {
    width: 125px;
    padding: 0 10px;
}

.homeslider-nav nav a.homeslider-nav-prev:hover::before {
    content: '';
    width: 20px;
    height: 2px;
    margin-left: 3px;
    background-color: #fff;
}

.homeslider-nav nav a.homeslider-nav-next:hover::after {

content: '';
    width: 20px;
    height: 2px;
    margin-left: 82px;
    background-color: #fff;

}

.homeslider-nav nav a.homeslider-nav-prev svg {
    left: 10px;
}

.homeslider-nav nav a.homeslider-nav-next svg {
    right: 10px;
}

.homeslider-nav nav a svg {
    position: absolute;
    width: 10px;
		
}

.homeslider-nav nav a span {
    display: none;
}

.homeslider-nav nav a.homeslider-nav-prev:hover span {
    right: 10px;
}
.homeslider-nav nav a:hover span {
    display: block;
    position: absolute;
}

.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: -60px;
		position:relative;
		z-index:1;
}

.owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 15px;
    margin: 5px 8px;
    background: transparent;
		border:2px solid #FFF;
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 30px;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #fff;
}

.intro-container {
	font-family:"Montserrat", arial;
	text-align:center;
	position:absolute;
	top:40%;
	width:100%;
	color:#fff;
	text-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.intro-container h3 {
	font-size:96px;
	font-family:"Montserrat", arial;
	font-weight:600;
	text-transform:uppercase;
	color:#fff;
	text-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.intro-container p {
	font-size:24px;
	font-weight:400;
	text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.slogan-container {
	font-family:"Montserrat", arial;
	text-align:center;
	position:absolute;
	top:50%;
	width:100%;
	color:#fff;
	text-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.slogan-container-multi {
	font-family:"Montserrat", arial;
	text-align:center;
	position:absolute;
	top:270px;
	width:100%;
	color:#fff;
	text-shadow: 0 0 40px rgba(0,0,0,0.5);
	z-index:2;
}

.slogan-container .h3, .slogan-container-multi h3 {
	font-size:72px;
	font-family:"Montserrat", arial;
	font-weight:600;
	text-transform:uppercase;
	color:#fff;
	text-shadow: 0 0 40px rgba(0,0,0,0.5);
}

.slogan-container p, .slogan-container-multi p {
	font-size:24px;
	font-weight:400;
	text-shadow: 0 0 20px rgba(0,0,0,0.8);
}

.navbar-brand { display:block; margin:0; transition:0.3s all ease-out;  }
header.tiny-header .navbar-brand { margin-top:-5px;   }
.navbar-brand img.img-fluid {
    transition:0.3s all ease-out;
}
header.tiny-header .navbar-brand img.img-fluid {
    max-width:80%; 
}
nav { top:auto; font-family:"Montserrat", arial; font-weight:600; font-size:16px; width:auto; text-align:right; }
.navbar-expand-lg .navbar-nav { text-align:right; }
nav ul { padding:0; }
nav a { color:#FFF; text-transform:uppercase; display:block; text-shadow:1px 1px #000; }
nav a.font-weight-bold { font-family:"Montserrat", arial; }
.navbar-expand-lg .navbar-nav .nav-link { padding:10px; }
nav li:hover, nav a:hover { color:#f5f5f5; }
.navbar-nav .dropdown.static {
    position: static;
}
.navbar-nav { text-align: center; }
.navbar-nav .dropdown-menu { font-size:13px; border-radius:unset; margin:-3px 0 0 0; border:none; top:auto; background:#1077a8;   padding:25px 0 20px; }
@media screen and (min-width: 992px) {
.navbar-nav li:hover>.dropdown-menu {
  display: block;
}
.dropdown.static .dropdown-menu-100 { width: 147.9%; left: -29.6%; right:0px; margin:-3px 0 0 0; }
}
.navbar-nav .dropdown-menu a { color:#fff }
.navbar-nav .dropdown-menu a:hover { background:#1077a8; color:#f5f5f5; }
.navbar-nav .dropdown .dropdown-toggle::after { display:none; }

.navbar-nav li.nav-item.dropdown:hover .nav-link {
  color:#f5f5f5;
	background:#1077a8;
}

.nav-abs { margin-top: 20px; }

.dropdown-item.active, .dropdown-item:active, .dropdown-item:focus {
    color: #be266f;
    text-decoration: none;
    background-color: #166495;
}

.intro-home { padding:0; text-align:center; position:relative; height:100vh; }

.solutions .actu-home { background:#fff; padding:20px 30px; margin-top:-100px; }
.solutions .actu-home .row.actu-resume { padding-top:15px; padding-bottom:15px; position:relative; overflow:auto; }
.solutions .actu-home .row.actu-resume:nth-child(odd) { background:#f5f5f5; }

.solutions .actu-home a.text-uppercase { text-decoration:underline; }

.solutions .event-home { background:#0099d7;  background: linear-gradient(270deg, #1d578e 0%, #128aba 100%); padding:20px 30px;  margin-top:-50px; }

@media screen and (max-width: 992px) {
.solutions .actu-home, .solutions .event-home { margin-top:0px; }
}

.solutions .h5 { font-size:14px; font-weight:bold; text-transform:uppercase; padding-bottom:5px; margin-left:-15px; margin-right:-15px; border-bottom:3px solid #4c6875; color:#4c6875; }

.solutions .event-home .h5 {  padding-bottom:5px; margin-bottom:10px; color:#fff; border-color:#fff; }
.solutions .event-home { color:#fff; }
.solutions .event-home .row.next-event { padding-top:20px; padding-bottom:15px; }
.solutions .event-home .cal-event { background:#fff; text-align:center; padding:15px; position:relative; }
.solutions .event-home .cal-event::after, .solutions .event-home .cal-event::before { position:absolute; content:''; width:10px; height:20px; top:-10px; left:20px; background:#999; display:block; }
.solutions .event-home .cal-event::after { left:auto; right:20px; }
.solutions .event-home .jour { font-size:42px; font-weight:bold; line-height:48px; color:#22a7e7; }
.solutions .event-home .mois { font-size:18px; color:#aaa; line-height:16px; text-transform:uppercase; }
.solutions .event-home h2 { color:#fff; text-transform:none; padding:0; margin:0;  }
.solutions .event-home p { padding:0; margin:0; }
.solutions .event-home a.text-uppercase { color:#fff; text-decoration:underline; }

.solutions .actu-multi { background:#fff; padding:20px 30px; }
.solutions .actu-multi .row.actu-resume { padding-top:15px; padding-bottom:15px; }
.solutions .actu-multi:nth-child(odd) { background:#f5f5f5; }

.solutions .actu-home a.text-uppercase { text-decoration:underline; }

.bg-slogan-multi { padding:0; background-size: cover; position:relative; overflow:hidden; height:600px; color:#fff;  }
.bg-slogan-multi div.slide { height:600px; position:relative; }
.bg-slogan-multi div.slide img { position:absolute; top:0; transform:translateY(-40%); min-height:600px; }
.bg-slogan { background:url(../../assets/img/bg-ban.jpg) center 40% no-repeat #165c7c; padding:200px 0; background-size: cover; position:relative; }

.bg-slogan_actu { background:url(../../assets/img/bg-ban-2.jpg) center 40% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }
.bg-slogan_actu-1 { background:url(../../assets/img/bg-actu-1.jpg) center 40% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }
.bg-slogan_actu-2 { background:url(../../assets/img/bg-actu-2.jpg) center 40% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }
.bg-slogan_actu-3 { background:url(../../assets/img/bg-actu-3.jpg) center 40% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }

.bg-slogan_contact-1 { background:url(../../assets/img/bg-contact-1.jpg) center 70% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }
.bg-slogan_contact-2 { background:url(../../assets/img/bg-contact-2.jpg) center 40% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }
.bg-slogan_contact-3 { background:url(../../assets/img/bg-contact-3.jpg) center 40% no-repeat #165c7c; height:600px; padding:200px 0; background-size: cover; position:relative; }

@media screen and (max-width: 1435px) {
.bg-slogan_actu { background:url(../../assets/img/bg-ban-2.jpg) center 30% no-repeat #165c7c; padding:200px 0; background-size: cover; position:relative; }
.bg-slogan { background:url(../../assets/img/bg-ban.jpg) center 35% no-repeat #165c7c; padding:200px 0; background-size: cover; position:relative; }
}
.slogan { background: rgba(0,0,0,0.4); padding:50px 25px;   font-weight:400; font-size:18px; text-align:center; padding:50px; width:60%; margin:auto; color:#fff;   }
.slogan .h1, .slogan h1 {  display:block; font-family:"Montserrat", arial;  color:#fff;  font-size:36px; font-weight:400; margin-bottom:10px; }

@media screen and (max-width: 992px) {

.slogan-container .h3 {
	font-size:72px;
}

.slogan-container p {
	font-size:22px;
}

.intro-container h3 {
	font-size:72px;
}

.intro-container p {
	font-size:22px;
}

}

@media screen and (max-width: 640px) {

.slogan-container .h3 {
	font-size:48px;
}

.slogan-container p {
	font-size:18px;
}

.intro-container h3 {
	font-size:48px;
}

.intro-container p {
	font-size:18px;
}

}

.h1, h1 { font-size:2rem; font-family:'Montserrat', arial; position:relative; font-weight:700; padding-bottom:20px; margin-bottom:20px; text-align:center; color:#4c6875; }
.h2, h2 { font-size:1.6rem; font-family:'Montserrat', arial; font-weight:700; position:relative; padding-bottom:10px; color:#4c6875; }

h3, .h3 {
    font-size: 1rem; font-family:'Montserrat', arial; color:#1c333e; font-weight:700;
}

h3, h4, h5, h6, h7 { font-weight:bold; font-family:'Montserrat', arial; }

.intro-home-text { /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.7+52,0+100 */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 52%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 52%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 52%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
padding:50px 25px; }

.intro-home-text .h2, .intro-home-text h2 {
    font-size: 2.2rem; text-transform:uppercase; line-height:2.6rem; margin-bottom:30px;
}

.intro-home-text p { font-size:16px; }

.solutions { padding:0px; margin-top:0px; position: relative; z-index: 1; }

.card-solution { position:relative; overflow:hidden; height:100%; width:100%; }
.card-solution .solution-img { width:100%; transition:0.2s all ease-out; }
.card-solution .solution-overlay { width:100%; height:100%; position:absolute; top:0; left:0;  transition:0.3s all ease-out; }
.card-solution .solution-text { position:absolute; background:#4c6875; width:100%; bottom:0; z-index:2; color:#fff; padding:14px 0; line-height:1.6rem; text-align:center; text-transform:uppercase; font-family:"Montserrat"; font-size:1.5rem;  transition:0.2s all ease-out; }
.card-solution .solution-text:after { content:''; width:100%; height:30px; display:block; position:absolute; top:-30px; left:0;
-webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
 background:#4c6875; transition:0.2s all ease-out; }

.card-solution .solution-text2 { position:absolute; background:url(../../assets/img/domotec-filigrane.png) -30px 30px no-repeat #fff; width:100%; bottom:-500px; opacity:0; z-index:3; color:#4c6875; padding:15px; text-align:center; text-transform:uppercase; font-family:"Montserrat"; font-size:12px;  transition:0.3s all ease-out 0.2s; }
.card-solution .solution-text2:after { content:''; width:100%; height:30px; display:block; position:absolute; top:-30px; left:0;
-webkit-clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
 background:#fff; transition:0.3s all ease-out 0.2s; }
 .card-solution .solution-text2 .btn { font-size:12px; }
 
.card-solution:hover .solution-overlay { opacity:0.4; background:#4c6875; }
.card-solution:hover .solution-text { background:transparent; bottom:60%; line-height:2.2rem; font-size:2.2rem; text-shadow:3px 3px 5px rgba(0,0,0,0.5) }
.card-solution:hover .solution-text:after { background:transparent; }
.card-solution:hover .solution-text2 { bottom:0; opacity:1; }

.degrade {  background: linear-gradient(270deg, #128aba 0%, #1d578e 100%); border:none; padding:0px; color:#fff; }

.logo-domotec { background-image:url(../../assets/img/logo-domotec-filigrane.png); background-position:center left; background-repeat:no-repeat; padding:30px;  }
.logo-phone { background-image:url(../../assets/img/logo-phone-filigrane.png); background-position:center left; background-repeat:no-repeat; padding:30px;  }

.cadre_degrade {  background: linear-gradient(270deg, #128aba 0%, #1d578e 100%); border:none; margin:20px; padding:40px 30px 30px; color:#fff; display:block; }

.degrade h3, .cadre_degrade h3 { text-transform:uppercase; }

.degrade.modal-content .modal-header, .degrade.modal-content .modal-footer { border:none; }
.degrade.modal-content .modal-header .close { color:#fff; opacity:1; }

.modal-dialog .logo-domotec { background-image:url(../../assets/img/logo-domotec-filigrane.png); background-position:left 100%; background-repeat:no-repeat; padding:0 30px;  }
.modal-dialog .logo-phone { background-image:url(../../assets/img/logo-phone-filigrane.png); background-position:left 100%; background-repeat:no-repeat; padding:0 30px;  }

#callBack .modal-dialog, #freeQuotation .modal-dialog { max-width: 400px; }

.certifications { background:#fff; padding:70px 0; margin-top:0px; }

.services { background:url(../../assets/img/arrow-services.png) center 80% no-repeat #fff; padding:0; box-shadow: inset 0px 0px 20px -10px rgba(0,0,0,0.5); margin-top:0px; }
.services div.size-16 { margin-top:10px; color:#4c6875; }
.service-card { background:#fff; margin:30px 0; padding:0px 20px; display:inline-block; } 
.service { overflow:hidden; position:relative; }
.service .service-card-hover { position:absolute; background:#f5f5f5; width:100%; height:100%; padding:20px; left:0; top:-250px; opacity:0; transition:0.2s all ease-out; }
.service:hover .service-card-hover { top:0; opacity:1; }
.service-detail { position:absolute; width:100%; left:0; opacity:0; transition:0.2s all ease-out; background:#f5f5f5; padding:20px; }
.service-detail-hover {  transform:translateY(-99%); opacity:1; }

.slide-real .slick-prev, .slide-real .slick-next { width:60px; }

.btn { border-radius:0; border:none; background:#4c6875; color:#fff; text-transform:uppercase; }
.btn:hover { border:none; background:#2e4f5e; color:#fff; }
.btn-primary { background:#fff; }
.btn-primary:hover { background:#c3a140; color:#fff; }
.btn-grey { background:#fff; color:#2a2a2a; border:1px solid #2a2a2a; }
.btn-bleu { background: #312783; border:none; color:#fff; transition:0.2s all ease-out; }
.btn-bleu:hover { border:none; color:#fff; background:#231c58; }
.btn-degrade {  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2389bc+0,066e9e+100 */
background: rgb(35,137,188); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(35,137,188,1) 0%, rgba(6,110,158,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(35,137,188,1) 0%,rgba(6,110,158,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(35,137,188,1) 0%,rgba(6,110,158,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2389bc', endColorstr='#066e9e',GradientType=0 ); /* IE6-9 */ border:none; color:#fff; }
.big-btn { font-size:20px; }
.btn-fillwhite { background: transparent; border:2px solid #fff; color:#fff; transition:0.2s all ease-out; }
.btn-fillwhite:hover { border:2px solid #fff; }

.bg-bleu-marine { background-color:#231c58; }
.bg-bleu { background-color:#312783; }
.bg-rose { background-color:#4c6875; }
.bg-gris { background-color:#adadad; }

.txt-rose { color:#4c6875; }

.footer { position:relative; background: url('../../assets/img/bg-footer.jpg') bottom center no-repeat #4671a6;  padding-bottom:480px; margin:0px; color:#ccc; }
.footer .col-md-4 { padding-top:70px; padding-bottom:40px; margin:0; }
.footer a { color:#f5f5f5; }
.footer a:hover { color:#e9e9e9; }
.footer h4 { text-transform:uppercase; font-size:20px; padding-bottom:15px; margin-bottom:25px; }

.text-vert { color:#d96278; }

/* sign in  */
.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}
.form-signin .checkbox {
  font-weight: 400;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input#login {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input#password {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

@media screen and (max-width: 768px) {
.form-group  .col-md-6:first-child { margin-bottom: 1rem; }
}

.bg-grey { background:transparent; display:flex; -ms-flex-align: center; -webkit-align-items: center; -webkit-box-align: center; align-items: center; margin-bottom:30px;  }
.degrade .card  {
    background: rgba(255,255,255,0.3);
		border-radius:0;
		margin:0;
		padding:10px;
		text-align:center;
    box-shadow: 0 2px 5px 0px rgba(0,0,0,0.07);
		border:none;
		font-size:16px;
		justify-content: center;
		flex-grow: 1;
		flex-basis: 0;
		color:#fff;
		font-family:"Montserrat", arial;
		transition:all ease-in 0.2s;
}

.degrade .card:hover { background: rgba(255,255,255,1); color:#312783; }

.card .icon { font-size:36px; color:#fff; }
.degrade .card:hover .icon { color:#312783; }
.degrade .card:nth-child(2) { margin:0 2%; }
.degrade .card:nth-child(3) { margin:0 2% 0 0; }

.bg-grey .card:hover { background:#7a9d30; }

.fx-zoom {
    overflow: hidden;
    width: 100%;
}
.fx-zoom:hover img {
    transform: scale(1.05);
}
.fx-zoom img {
    transition: filter 400ms linear,transform .7s ease-in-out;
    transform: scale(1);
}

.slide-avis { position:relative; margin-bottom:30px; }
.slide-avis div.col-md-6 { position:relative; } 
.avis { margin:10px; padding:20px 30px; background:#fff; min-height:235px; box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.3); }
.avis h4 { color:#4c6875;	padding:0; margin:10px 0; }

.li_actu { background:#fff; position:relative; margin:0 0 40px 0; padding-bottom:10px; transition:all ease-in 0.2s;  box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.3); }
.li_actu .actu_img { display:block; overflow:hidden; position:relative; max-height: 250px; min-height: 250px; }
.li_actu div { margin:20px; position:relative;  transition:all ease-in 0.2s; z-index:1; }
.li_actu div:before { content:""; background:#fff; position:absolute; left:-20px; right:-20px; top:-75px; width:calc(100% + 40px); height:70px; -webkit-clip-path: polygon(0 100%, 0 70%, 100% 20%, 100% 100%); clip-path: polygon(0 100%, 0 70%, 100% 20%, 100% 100%);  transition:all ease-in 0.2s; z-index:-1; }
.li_actu:hover div:before { top:-85px; background:#f5f5f5; }
.li_actu:hover { background:#f5f5f5; }
.li_actu .fx-zoom:hover img {
		transition: filter 400ms linear,transform .3s ease-in-out;	
}

.li_actu .fx-zoom img {
    transition: filter 400ms linear,transform .3s ease-in-out;
    transform: scale(1) translateX(-50%);
    position: absolute;
    left: 50%;
    display: block;
}

.li_actu .fx-zoom:hover img, .li_actu:hover .fx-zoom img {
    transform:scale(1.05) translateX(-50%);
    position: absolute;
    left: 50%;
    display: block;
}

.actu_categ { position:absolute; display:block; font-size:13px; right:0; top:-50px; color:#4c6875; transition:all ease-in 0.2s; }
.li_actu:hover .actu_categ { color:#312783; }

.li_actu h3 { font-family:"Montserrat"; font-size:20px; text-transform:uppercase; }
.slide-real .li_actu div { margin: 5px 20px 10px; }
.slide-real .li_actu h3.titre-real-home { margin:0; padding:0; }
.slide-real .li_actu div:before { top:-60px;}
.slide-real .li_actu:hover div:before { top:-70px; }

.link-gallery { max-width:100%; max-height:200px; padding-bottom:50%; position: relative; overflow: hidden; display: inline-block;  box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.3); border:10px solid #fff; transition:all ease-out 0.2s; }
.link-gallery:hover { box-shadow: 0px 0px 30px -10px rgba(0,0,0,0.5); z-index:10; margin:-2.5%; border:7px solid #fff; }
.img-gallery { max-width:100%; }
/*top: calc(50% - attr(height) / 2);*/

.item { padding:0; flex: 1 0 26%; }
.item_2 { background:#2a2a2a; color:#fff; min-height:250px; }
.li_page { padding:20px 30px; }
.li_page_image { position:relative; overflow:hidden; height:250px; }
.li_page_image img {position:relative; left:auto; top:auto; transform:translate(0%,0%) }

@media screen and (min-width: 1140px) {
.li_page_image img { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) }
}

@media screen and (max-width: 768px) {

.navbar-nav { text-align: left; }
.text-ref-top { display:none; }

}

@media screen and (max-width: 992px) {
.container-fluid-990 { max-width:990px }
nav { font-size: 14px; }

.nav-abs { position:absolute; top:0px; right:0px; width:100%; z-index:10; padding:0; margin:0; margin-top: 0rem !important; padding-top: 0rem !important;  }
.navbar { padding:0; margin:0;  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#2389bc+0,066e9e+100 */
background: rgb(35,137,188); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(35,137,188,1) 0%, rgba(6,110,158,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(35,137,188,1) 0%,rgba(6,110,158,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(35,137,188,1) 0%,rgba(6,110,158,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2389bc', endColorstr='#066e9e',GradientType=0 ); /* IE6-9 */  }
ref_top { display:none; }
.navbar-toggler { position:absolute; right:5px; top:80px; z-index:11; }
.navbar-expand-lg .navbar-nav { margin:50px auto; width:auto; text-align:center; }

.dropdown-item { text-align:center; }

.rge_ban { text-align:right; }
.logo_rge_ban { float:none; }

.collapse, collapse.show { padding:0;  transition:all ease-in 0.2s; }

header.tiny-header .navbar-brand img.img-fluid, header .navbar-brand img.img-fluid {
    max-width:70%; 
}

}

@media screen and (max-width: 576px) {
.text-ref-top { display:none; }
.rge_ban { text-align:left; }
.logo_rge_ban { width:60px; margin-top:10px }
}

@media screen and (max-width: 375px) {
.navbar-brand img.img-fluid {
    min-width:auto;
		max-width:60%;
}

header.tiny-header .navbar-brand img.img-fluid, header .navbar-brand img.img-fluid {
    max-width:60%; 
}

}

@media screen and (max-width: 820px) {
nav { font-size: 14px; }
}

.navbar-toggler-icon {
		display:block;
    width: 1.5em;
    height: .2em;
    vertical-align: top;
    background: #fff no-repeat center center;
		margin-top:0.2em;
}

.navbar-toggler {
    font-size: 1.25rem;
    line-height: 1;
		margin-top:-30px;
}

.faktNormal { font-family:"Montserrat", arial; }
.roboto { font-family:"Montserrat", arial; }

.size-12 { font-size:12px; }
.size-14 { font-size:14px; }
.size-16 { font-size:16px; }
.size-18 { font-size:18px; }
.size-20 { font-size:20px; }
.size-24 { font-size:24px; }

.fill-bleu { padding:10px 10px 5px; border:2px solid #312783; margin-bottom:1rem; }
.fill-blanc { padding:10px; border:2px solid #fff; margin-bottom:1rem; }
.fill-rose { padding:10px; border:2px solid #4c6875; margin-bottom:1rem; }

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

.starrating > input {display: none;}  /* Remove radio buttons */

.starrating > label
{
  color: #fff; /* Start color when not clicked */
}

.starrating > input:checked ~ label
{ color: #ffca08 ; } /* Set yellow color when star checked */

.starrating > input:hover ~ label
{ color: #ffca08 ;  } /* Set yellow color when star hover */

.masque_encadrant_tech { background:url(../../assets/img/masque_encadrant_tech.png) center center no-repeat; width:242px; height:217px; position:relative; text-align:center; margin: auto; }
.masque_encadrant_med { background:url(../../assets/img/masque_encadrant_med.png) center center no-repeat; width:242px; height:217px; position:relative; text-align:center; margin: auto; }
.masque_encadrant_audio { background:url(../../assets/img/masque_encadrant_audio.png) center center no-repeat; width:242px; height:217px; position:relative; text-align:center; margin: auto; }
.masque_encadrant_bio { background:url(../../assets/img/masque_encadrant_bio.png) center center no-repeat; width:242px; height:217px; position:relative; text-align:center; margin: auto; }

.masque_nom { margin:0; padding:0; font-weight:bold }
.masque_photo { height:140px; width:112px; margin:5px auto; overflow:hidden; position:relative; }
.masque_niveau { text-align:left; position:absolute; color:#fff; bottom:19px; font-weight:bold; left:70px; width:130px; height:30px; -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); -o-transform: rotate(-20deg); -ms-transform: rotate(-20deg); transform: rotate(-20deg); }

@media screen and (min-width: 1200px) {
#collapseGradient1 { height:150px; overflow:hidden; transition:all ease-in 0.2s; }
#collapseGradient1.degrade1-hover { height:230px; }

#collapseGradient2 { height:150px; overflow:hidden; transition:all ease-in 0.2s; }
#collapseGradient2.degrade2-hover { height:210px; }

.li_actu .actu_img { max-height: 300px; min-height: 300px; }

}