/*charte FF1F01 */
@font-face {font-family: rRegular; src:url(../fonts/roboto/Roboto-Regular.woff);}
@font-face {font-family: rThin;    src:url(../fonts/roboto/Roboto-Thin.woff);}
@font-face {font-family: rBold;    src:url(../fonts/roboto/Roboto-Bold.woff);}
@font-face {font-family: rLight;   src:url(../fonts/roboto/Roboto-Light.woff);}
@font-face {font-family: rMedium;  src:url(../fonts/roboto/Roboto-Medium.woff);}

/* CSS Material */
html {position: relative; overflow-x: hidden;}
body {font-family:rLight;line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
footer {/*box-shadow: 5px 0 8px #bbb !important; */padding-top:30px !important}
footer address { padding:10px 0 0 0}
footer h5 { font-size:1.5rem}
.page-footer {font-size:.9rem; padding-top:20px; color:#fff !important; background-color#0D0D0D !important;}
.fa-tiny{font-size:0.6em !important; vertical-align:2px}
.page-footer img { margin-bottom:20px!important; width:80%}
.page-footer li a {line-height:1.4rem}
.page-footer li a:hover { color:#FF1F01 !important}
.page-footer .no-services li a {line-height:1.8rem}
.page-footer .footer-contact {background: url(../../images/monde-vide.png)no-repeat 50% 50% !important; }
a {color: #ffffff}
a:hover { color: #FF1F01}
textarea { resize: none !important; }
.btn-floating:hover { background:#fff !important; color:#FF1F01 !important}
.btn, .btn-large { border-radius:25px; margin-top:30px}
.btn:hover, .btn-large:hover {background-color: #fff !important; color:#FF1F01 !important}
.btn-normal {background:#fff!important;color:#555!important;border-radius:0px;padding-left:5px;padding-right:5px}
.btn-normal:hover { background:#DDD !important; color:#000 !important}
/*.top-header  { height: 4.3rem !important ; margin-top:-.6rem !important; }
.top-header li, .top-header .fa { font-size:1rem !important}*/
#menu-cgi nav ul a.btn { margin: 0 ; padding:0 10px; font-size:.7em}
.slider { margin-top:-35px; margin-bottom:0 !important}
.slider .slides {height: 55vh !important; margin-top:50px !important; }
.slider .slides img{background-position:100% 30% !important; }
.slider .slides .bougepas img{background-position:100% 50% !important; }
.slider .slides .btn{ margin:20px 0 0 0; }
.slider .slides h3{ font-family: rBold; }
.slider .slides h5{ line-height:2.3rem}
.slider .slides li:before {content: ''; z-index: 0; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
.container-fluid form .row {margin:0 }
.input-field textarea {resize:none !important}
.input-field input[type=text]:focus + label, .input-field input[type=tel]:focus + label, .input-field input[type=email]:focus + label, .input-field select:focus + label, .input-field textarea:focus + label {color: #FF1F01 !important;}
.input-field input[type=text]:focus, .input-field input[type=tel]:focus, .input-field input[type=email]:focus, .input-field select:focus, .input-field textarea:focus {border-bottom: 1px solid #FF1F01 !important; box-shadow: 0 1px 0 0 #FF1F01 !important;}
.input-field input[type=text].valid, .input-field input[type=tel].valid, .input-field input[type=email].valid, .input-field select.valid, .input-field textarea.valid {border-bottom: 1px solid #bbb;box-shadow:0 1px 0 0 #bbb; }
.input-field .prefix { color: #bbb;}
.input-field .prefix.active, .input-field .prefix.checked { color: #FF1F01 !important; }


/* CSS Personnalize */
.cgi-color { background:#FF1F01 !important}
.cgi-color i:hover { color:#FF1F01 !important}
.cgi-color-text { color:#FF1F01 !important}
.cgi-color-ab { background:#fff !important; color:#FF1F01 !important}
.cgi-color-ab:hover { background:#ffebee !important; color:#000 !important}
.text-justify { text-align:justify !important}
.navtop-info {  margin-top:-50px !important; transition: 0.2s; -webkit-transition:0.2s;}
#menu-cgi ul li a{ color:#2C3038; text-transform:uppercase; font-size:.9rem}
#menu-cgi nav {height: 78px !important; line-height: 78px !important;font-family: rMedium; }
#menu-cgi nav img{  padding: 2px 0 !important; overflow:hidden}
#menu-cgi .top-nav-cgi {border:1px solid #000;padding:0 !important; margin-bottom:-25px !important;}
#menu-cgi .top-nav-cgi .row{ padding:-5px 0!important;}
#menu-cgi .top-nav-cgi .fa{ font-size:16px }
#menu-cgi .top-nav-cgi ul li a{ color:#fff}
#menu-cgi .top-nav-cgi ul li a:hover{ color:#FF1F01}
.list-inline {padding-left: 0; margin-left: -5px; list-style: none;}
.list-inline > li {display: inline-block; padding-right: 5px; padding-left: 5px; }
.titre h3{text-transform:uppercase;text-align:center;font-family:rBold;padding:20px 0 0 0;color:#eee;font-size:4.2em;letter-spacing:-.05em;}
.titre h5{text-transform:uppercase;text-align:center;font-family:rBold;color:#2C3038;font-size:2em;margin-top:-45px;letter-spacing:-.04em;}
.small{ font-size:80% !important}
#home-service { padding:60px 0 !important}
#home-service .service-nom{ text-transform:uppercase}
h5.service-nom { font-size:1.5rem}
.container-fluid {padding:40px 0 0 0;margin-right:auto;margin-left:auto}
.container-fluid .row .col{margin-left: 0; margin-right: 0;}
.container-fluid .image{ background:url(../../images/office-cgi.jpg)  no-repeat 100% 100%;
 -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;	width: 100%; display: block; height: auto; height:78vh}
.container-fluid .titre h3{text-align:left;}
.container-fluid .titre h5{text-align:left; padding-bottom:40px !important;}
.container-fluid .form{ height:78vh; }
#home-expertise { max-height:900px; margin-bottom:0; overflow:hidden; padding-bottom:0;}
#home-expertise .card-panel { box-shadow: 0 0 0; margin-top:-10px !important }
#home-expertise .card-panel i { font-size:2.2em !important }
#home-expertise .circle { margin:20px 0 0 -30px; padding:20px}
#home-expertise .circle-right .circle { margin-left:-5px;}
#home-expertise .expert-dom  { font-size:.9em; text-transform:uppercase; font-family: rMedium; padding:5px 0}
#home-expertise .titre { padding:0 0 40px 0;}
#home-expertise .panel-push-left { margin-left:30px !important;  }
#home-expertise .panel-push-left .col.s9{ padding-left:20px;  }
#home-expertise .panel-push-right { margin-right:25px !important; margin-left:-50px}
#home-expertise .panel .col.s9 { margin-bottom:0 !important}
#cgi-cercle {position:relative; z-index:0;}
#panel {top: -590px; height:700px !important; position:relative; z-index:1; margin-bottom:0; padding-bottom:0;}
.cgi-cercle-3{width:580px;height:580px;border:1px solid #eceff1;border-radius:50%;margin:auto;padding-top:50px;}
.cgi-cercle-2{width:480px;height:480px;border:1px solid #eceff1;border-radius:50%;margin:auto;padding-top:50px}
.cgi-cercle-1{width:250px;height:250px;border:2px dashed #eceff1;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:60px}
.cgi-cercle-1 img{ margin:auto;}
.bordure { border:1px solid red}
.flow-text-1 {font-size: 1.532rem;}
#banner .parallax-container {height: 40vh;}
#banner.banner-small .parallax-container {height: 25vh !important;}
#banner .parallax-container .parallax:before {content: ''; z-index: 9; background: rgba(0, 0, 0, 0.7); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#banner .banner-text { color:#fff;}
#banner .banner-text h3 {font-family:rThin;}
#home-avantage{ padding:40px 0;}
#home-blog { padding:30px 0 100px 0;} 
#home-expertise .card-panel:hover { color:#FF1F01 !important}
#home-expertise .card-panel:hover i{overflow: initial; position: relative;}
#home-expertise .card-panel:hover i::before {content: '';display:block;position:absolute;width:100%;height:100%; top: 0; left: 0; background-color:inherit; border-radius: inherit;-webkit-transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, -webkit-transform .3s; transition: opacity .3s, transform .3s;transition: opacity .3s, transform .3s, -webkit-transform .3s; -webkit-animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite; animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;  z-index: -1;}

#home-avantage .titre, #home-blog .titre{ padding-bottom:30px;}
.abraham-text{font-size:1.296rem}
#bande nav { box-shadow:0 0 0}
#bande .parallax-container {height: 35vh;}
#bande .parallax-container .parallax:before {content: ''; z-index: 9; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#bande.admin .parallax-container .parallax:before {content: ''; z-index: 9; background: linear-gradient(-135deg, rgb(255,31,1), rgb(255,121,121)); background: -webkit-linear-gradient(-135deg, rgb(255,31,1), rgb(255,121,121)); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#bande .bande-text {padding-top:8vh; color:#fff; text-align:center !important; text-transform:uppercase}
#bande .bande-text h3, #bande .bande-text h5 {font-family:rThin;}
#bande .bande-text h5 { font-size:1.4rem; line-height:1.7rem}

.expertise .card {margin-top:25px; margin-bottom:25px; margin-right:1.8% !important;height: ; padding:0; width:31.5% !important; overflow: hidden !important;}
.expertise .card .card-image img { width:100% !important }
.expertise .card .card-content {height: 350px;}
.expertise .card .card-content ul li{ font-size:.9rem}
.expertise .card .card-title {font-size: 1.4rem !important; line-height:1.6rem;}

.expertise-detail { padding:50px 0}
.expertise-detail h6 { text-transform:uppercase}
.expertise-detail .collection-item { padding-left:10px; padding-right:2px}
.expertise-detail .collection-item i{ padding-top:10px;}
.expertise-detail .col-expert {margin:0 0 50px 0 !important; text-transform:uppercase; font-size:12px; }
.expertise-detail .img-expertise{padding-bottom:20px; width:100% !important; height:390px !important; overflow:hidden }
.brochure { padding:10px 0}
.brochure a { font-size:13px; margin-top:10px; width:100%}
.no-touch a:hover,.no-touch a:active {color: #333;}
.hi-icon {display:inline-block;cursor:pointer;margin:-15px 30px;padding-top:15px;width:100px;height:100px; border-radius:50%;text-align: center; position: relative; z-index: 1; color: #000;margin-bottom:-10px;}
.hi-icon:after {pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%;	content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box;	box-sizing: content-box;}
.hi-icon:before {speak: none;font-size: 48px;line-height: 90px;	font-style: normal; font-weight: normal;font-variant: normal; text-transform: none;	display: block;	-webkit-font-smoothing: antialiased; color:#efebe9}
.hi-icon-effect-8 .hi-icon {-webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s;	-moz-transition: -moz-transform ease-out 0.1s, background 0.2s;	transition: transform ease-out 0.1s, background 0.2s;}
.hi-icon-effect-8 .hi-icon:after {top:0;left:0;padding:0;z-index:-1;box-shadow:0 0 0 2px rgba(255,255,255,0.1); opacity:0;-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9);}
.no-touch .hi-icon-effect-8 .hi-icon:hover {-webkit-transform: scale(0.93);	-moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); color: #fff;}
.hi-icon-effect-8 .hi-icon:hover:after {-webkit-animation: sonarEffect 1.3s ease-out 75ms; -moz-animation: sonarEffect 1.3s ease-out 75ms;	animation: sonarEffect 1.3s ease-out 75ms;}
@-webkit-keyframes sonarEffect {0% {opacity: 0.3;} 40% {opacity: 0.5; box-shadow: 0 0 0 2px   rgba(255,255,255,0.1), 0 0 10px 10px #efebe9, 0 0 0 10px rgba(255,255,255,0.5);} 100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #efebe9, 0 0 0 10px rgba(255,255,255,0.5);	-webkit-transform: scale(1.5);	opacity: 0;	}}
@-moz-keyframes sonarEffect { 0% {opacity: 0.3;	} 40% {opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #efebe9, 0 0 0 10px rgba(255,255,255,0.5);	} 100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #efebe9, 0 0 0 10px rgba(255,255,255,0.5);		-moz-transform: scale(1.5);	opacity: 0;	}}
@keyframes sonarEffect { 0% {opacity: 0.3;}	40% {opacity: 0.5;	box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #efebe9, 0 0 0 10px rgba(255,255,255,0.5);}	100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #efebe9, 0 0 0 10px rgba(255,255,255,0.5); transform: scale(1.5);	opacity: 0;	}}
.row.hi-icon-wrap { padding:0 0 20px 0}
#services { margin:40px 0}
.service-texte, .service-nom { color: #555}
.step-desc { padding:10px 0 30px 0 !important }
#step-services{padding:30px 0}
.progress-indicator{padding:80px 0; margin:0 0 4em;padding:0;font-size:100%;}
.progress-indicator>li .bubble:after,.progress-indicator>li .bubble:before{top:30px;}
.bubble {width:60px !important;height:60px !important; margin:30px}
.bubble i { margin:15px 0 0 -15px;  font-size:30px; color:#fff; z-index:1; position:absolute}
#apropos-cgi { margin:60px 0}
#apropos-cgi .abt{padding:20px 0 0 0; font-family:rBold; font-size:1.2rem}
#blog-article .abt {padding:0; font-family:rBold; font-size:1rem; text-transform:uppercase}
#about-job { padding:40px 0}
#blog-article { padding:30px 0}
#blog-article form .input-field{ margin:0 0 -20px 0; padding:0 0 -20px 0;  }
#blog-article .sara{ font-family:rBold; }
#blog-article article{ margin-bottom:25px; text-align:justify }
#blog-article article hr{ margin-top:25px; border:.01rem solid red	}
#blog-article .collection .collection-item{ background:rgba(249,249,249,1); }
#blog-article .collection a.collection-item:hover{ background:#FF1F01; color:#fff !important }
#asid .parallax-container .parallax:before {content: ''; z-index: 9; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; left: 0; right: 0; bottom: 0;}
#asid .banner-text { color:#fff;}
#asid .banner-text h3 {font-family:rThin;}
#blog-article h5 { font-size:1.5rem; line-height:1.8rem; letter-spacing:0;}
.lnk-tags { color:#B4B4B4;}
.lnk-tags :hover{ color:#FF1F01;}
.dropdown-content li a{ color: #575757 !important}
.dropdown-content li a:hover{ color: #FF1F01 !important}
.commentaire { padding:20px; box-shadow:1px 1px 1px #A9A9A9}
.commentaire .nom { font-weight:600; font-size:1rem; }
.commentaire .s6 {padding:15px 0}
.commentaire-titre { font-weight:700; font-size:1.2rem}
.tt-form-comment { font-size:1.1rem; padding:15px; font-weight:600; text-align:right}
.adress { margin:0 0 0 50px}
.adress p { font-size:1.1rem}
.img-devis {margin-bottom:-100px; max-height:400px !important; overflow:hidden}
.img-devis img{ width:100% !important;}
.form-devis { margin-left:10%; margin-right:10%;}
.form-devis h5 { font-family:rBold; font-size:2rem !important; padding:20px 0 40px 0}
.img-devis img{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover}img-devis {background: rgba(0, 0, 0, 0.7); }
.nav-vertical li a .material-icons:hover { color:#FF1F01 !important}
.service-zone #conseil, .service-zone #technique{ border-right: 2px solid #eee; padding: 0 .5rem; }

@-webkit-keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

@keyframes pulse-animation {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}

.monte-haut-50 { margin-top:-100px !important }

.panel-login{ margin-top:15vh !important}.profile-image-login{width:100px;height:100px !important}
.blog .card-image { height:110px}
.blog .card-title { font-size:1.3rem !important}


#toast-container {top:80%;}
#toast-container .toast {
   /* cursor: pointer;*/
}
#toast-container .toast::after {
    font-family: 'Material Icons';
     content: '\e5cd';
	  font-size: 1.5rem;
    -webkit-font-feature-settings: 'liga';
    color: #dd2c00;
    font-weight: 300;
    float: right;
    padding-left: 3rem;
	cursor:pointer;
}



@media only screen and (max-width: 400px) {
  .navtop-info {  margin-top:-110px !important;}
  .slides h3 { font-size:1.7rem; font-family:rRegular !important}
  .slides h5 { font-size: 1rem; line-height:1.3rem !important}
  .slides .btn{height: 20px!important; line-height:20px!important; font-size:1rem; padding:0 10px!important; letter-spacing:0; margin-bottom:-10px !important }
   #home-service { padding:0 0 30px 0 !important} 
   .container-fluid { padding-bottom:0; }
   .container-fluid .form{ height:auto; }
   #home-expertise { padding-top:0; margin-bottom:0px ; overflow: scroll}
   #home-expertise .card-panel { margin-bottom:10px; }
   #home-expertise .container{height:auto; }
   #banner { position:relative}
   #banner .banner-text h3 {font-family:rThin; font-size:2rem}
   #banner.banner-small .parallax-container {height: 30vh !important;}
   #banner.banner-small p { margin-top:-20px !important;}

   .abraham-text{font-size:1.1rem; line-height:1.8rem}
   .expertise .card {height: auto !important;padding:0; margin-left:30px; margin-left:5% !important; width:90% !important}
  .expertise .card .card-content {height: auto;}
   .expertise .card .card-title { font-size:1rem}
   #bande .bande-text h3 { font-size:1.8rem;}
	.breadcrumb { font-size:1rem; line-height:1rem}
	a.breadcrumb{ padding-bottom:0 !important; margin-bottom:0 !important; }
	.breadcrumb:before {font-size: 20px; margin: 20px 5px 0 5px;}
	.expertise-detail .img-expertise{padding-top:10px; height:auto !important;   }
	.titre h3{font-size:3.5em;letter-spacing:-.05em;}
	.titre h5{font-size:1.8em;margin-top:-40px;letter-spacing:-.04em;}
	.bubble {width:30px !important;height:30px !important; margin:15px}
    .bubble i { margin:8px 0 0 -8px;  font-size:15px;}
	.progress-indicator .flow-text {font-size:.6rem !important; padding-top:8px !important}
	.progress-indicator li{font-size:10px !important;}
	.progress-indicator>li .bubble:after,.progress-indicator>li .bubble:before{top:15px;}
	#apropos-cgi .btn-ar{ margin:0 0 40px 50px; text-align:center}
	#apropos-cgi .vision{ padding-bottom:40px}
	#blog-article article{ padding-bottom:40px}
	.adress { margin:50px 0 0 0}
	.form-devis { margin-left:3%; margin-right:3%;}
	.img-devis {margin-bottom:-30px;  }
	
	.flex-s {display: flex; flex-direction: column; } /* ordonner l'affichage en small*/
	.box-a {order: 2;}
	
	.expertise-detail .col-expert {margin:50px 0 !important; }

	
	



}