/* =Common Styles
-------------------------------------------------------------- */
html, body {
    width: 100%;
    height: 100%;
}
body {
    font-family: 'Roboto', sans-serif;
    color: #444346;
}
/* =Typography
-------------------------------------------------------------- */
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {font-weight:100;}

a {color: #3399FF;/*color: #3399FF;*/font-weight:400;transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
a:hover {color:#625CDD;/*color: #3399FF;*/}
#footer.footer-section a {color:#fff}
#footer.footer-section a:hover {color:#3399ff}

b, strong {font-weight:700;}
.h2.display-4 span {color:#02E2D8}
/* =COLORS
-------------------------------------------------------------- */
.lavender{color:#8980fe}
.blue-lavender{color:#625CDD}
.aqua{color:#02E2D8}
.blue-cyan{color:#39f}
.lavender-bg{background-color:#8980fe}
.blue-lavender-bg{background-color:#625CDD}
.aqua-bg{background-color:#02E2D8}
.blue-cyan-bg{background-color:#39f}
/* =FLAT Icons
-------------------------------------------------------------- */
[class^="flaticon-"]::before, [class*=" flaticon-"]::before, [class^="flaticon-"]::after, [class*=" flaticon-"]::after {/*font-size: 6rem;*/font-weight:500;color:#8980fe}
.glyph-icon.flaticon-coffee30::before, .glyph-icon.flaticon-love23::before{font-size:1.5rem!important;color:#fff}
.glyph-icon.flaticon-graduate7::before{font-size:2.5rem!important;color:#fff;}
.glyph-icon.flaticon-love22::before{font-size:2.1rem!important;font-weight:600;color:#02E2D8;}/*color:#e83e8c;*/
.glyph-icon.flaticon-linkedin13::before, .glyph-icon.flaticon-mail62::before, .glyph-icon.flaticon-time10::before{font-size:2rem!important;color:#625CDD}
.glyph-icon.flaticon-time10::before {font-size:3rem !important}
/* =FA Icons
-------------------------------------------------------------- 
.fa-chrome::before {content: "\f268";}
.fa-firefox::before {content: "\f269";}
.fa-compass::before {content: "\f14e";}
.fa-opera::before {content: "\f26a";}
.fa-edge::before {content: "\f282";} */
.fa, .fab, .fal, .far, .fas {font-weight:400}
.fa-chrome::after, .fa-firefox::after, .fa-compass::after, .fa-opera::after, .fa-edge::after {font-family:Roboto, sans-serif;font-size:1.7rem;font-weight:300}
.fa-chrome::after {content: "\ Chrome";}
.fa-firefox::after {content: "\ Firefox";}
.fa-compass::after {content: "\ Safari";}
.fa-opera::after {content: "\ Opera";}
.fa-edge::after {content: "\ Edge";}


/* = Main Navigation
-------------------------------------------------------------- */
.navbar-light .navbar-brand {
    font-weight: 300;
    color: rgba(0,0,0,.8);
    /*color: #504ed2;*/
}
.navbar-light a i {
    color: #625CDD;
}
.navbar-light a i.fab.fa-linkedin-in {
    font-size: 1.55rem;
}
.navbar-light a i.far.fa-envelope {
    font-size: 1.95rem;
}
.navbar-light .navbar-brand > strong {
    text-transform: uppercase;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
    color: #625CDD;
    font-weight: 700;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0,0,0,.3);
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
}
/* = 2nd Navigation
-------------------------------------------------------------- */
#SecondNav{
				background: #625CDD;
				/*height: 50px;*/
			}
#SecondNav .nav-link {
	color: rgba(255,255,255,.5);
    font-size: 0.9rem;
    font-weight: 400;
    text-transform: uppercase;
}
#SecondNav .nav-link:hover {
	color: rgba(255,255,255,1);
	
}
#SecondNav a.navbar-brand {
    color: #FF8A73; /*#fff*/
}
#SecondNav .navbar-text {
    color: #FF8A73;
}
/* =Separators
-------------------------------------------------------------- */
hr {margin-top:1rem;margin-bottom:1.5rem;border-top:1px solid #3598FE}
.title-divider {
	width:10%;
    height:2px;
    background-color:rgba(0, 0, 0, 0.15);
    margin:1.5em auto;}
.title-divider-left {margin:1.3em 0;}	
.title-divider.h2-jumbo {
	width:15%;
	margin-left:16em;
	margin-top:0.5em;
	margin-right:0em;
	margin-bottom:1em;
	}
	
/* =Buttons
-------------------------------------------------------------- */
.btn-xl {padding: .7rem 2rem;}
.btn-rounded, a.btn-rounded {
    display: inline-block;
    border-radius: 45px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-weight: 300;
    color: #fff;
    text-decoration: none;
    font-size: 1em;    
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.btn-rounded:hover, a:hover.btn-rounded {background: #8980fe;}

a#phone{background: #8980fe; color: white; text-align: center; text-decoration: none;}
a:hover#phone{background:#625CDD}
a#phone > span::after{ content: '6 23 14 88 06'; font-weight: 500;}

/* =Tables
-------------------------------------------------------------- */
.table .thead-light th {
    color: #fff;
    background-color: #786DE4;
}
.table thead th {border-bottom:none;}
.table td, .table th {
    padding: 1.5rem;
    vertical-align: middle;
	text-align: left;
}
.table th > i {color:#999;}
.table.table-striped > thead > tr > th {color:#786DE4;}
/* =Sections
-------------------------------------------------------------- */
main {background-color:#786DE4}
/* Demo Sections - You can use these as guides or delete them - the scroller will work with any sort of height, fixed, undefined, or percentage based.
The padding is very important to make sure the scrollspy picks up the right area when scrolled to. Adjust the margin and padding of sections and children 
of those sections to manage the look and feel of the site. */

.intro-section {
    min-height: 100%;
    padding-top: 150px;
    text-align: center;
    color: #fff;
    background: #786DE4; /*FlatTech BG*/
}
.intro-section .desktop-img {
    display:block;
    max-width:445px!important;
}
.intro-section p {
    /*margin-bottom: 15px;*/
    font-size: 21px;
    font-weight: 200;
}
.inner-banner-section {
    padding: 150px 0 50px;
    text-align: center;
    background: #625CDD; /*#504ed2*/
    color: #eee;
}
/* A l'intérieur de la balise main les heights en % des sections sautent ==> Appliquer les unités em ! */
.about-section {
    /*min-height: 100%;
    padding-top: 150px;
    text-align: center;*/
    background:#f1f3f5;
    padding:5rem 0;}
.about-section h2 {text-align:right;}
.about-section p.lead {text-align:left; /* font-size: 1.55rem;*/}

.expertise-section{
    min-height:auto; /*50em *100%*/      
    padding-top:auto; /*150px*/ 
    text-align:center;
    background:#fff;}
.expertise-section h3{font-size:0.9em;padding:2em 0 1.5em;letter-spacing: 0.2em;}	
#expertise::after {content:" ";position:absolute;width:0px;height:0px;border-left:14px solid transparent;border-right:14px solid transparent;border-top:14px solid #fff;left:48.5%;}
.skill-section {
	border:0px dotted red;
	background:#f5f5f5;
	height: 100%;
    padding: 6em 0;
	text-align: center;	
    /*min-height: 100%;
    padding-top: 150px;
    
    padding: 5rem 0;*/
}
.skill-section h2 {text-align:center;font-weight:500}
.skill-section p.lead {text-align:left; /* font-size: 1.55rem;*/}
.skill-section ul {
    border:0px solid red;
	display:inline-grid;
    color:#786DE4;
    text-align:left;
    /*margin-left:5rem;*/
	margin:2rem 0;
    line-height:1.9rem;
    line-height: 1.8rem;
    font-weight: 500;
    font-size: 0.95rem;	
}
.accroches-section{
    min-height:auto; /*50em *100%*/      
    padding-top:auto; /*150px*/ 
    text-align:center;
    background:#;}
.accroches-section h3{font-size:0.9em;padding:2em 0 1.5em;letter-spacing:0.2em;}	
#accroches::before {content:" ";position:absolute;width:0px;height:0px;border-left:14px solid transparent;border-right:14px solid transparent;border-top:14px solid #f5f5f5;left:48.5%;}

.project-section {
    height: 100%;
    padding: 5em 0;
    text-align:left;
    background: #f8f9fa;
}
.services-section {
    min-height: 50em; /*100%*/ 
    padding-top: 150px;
    text-align: center;
    background: #fff;
}
.whats-new-section {
    min-height:50em; /*100%*/
    padding:150px 0;
    text-align:left;
    background: #fff; /*f8f9fa%*/
}
.progress {
    height:1.4rem;
    /*overflow: hidden;
    line-height: 0;
    font-size: .75rem;
    background-color: #e9ecef;
    border-radius: 0.25rem;*/
    margin-bottom: 1.2em;
}
.progress-bar {
   text-align:left;padding-left:.5rem
}
.contact-section {
    min-height: 50em; /*100%*/
    padding-top: 150px;
    text-align: center;
    background: #fff; /*f8f9fa%*/
}

.footer-section {
    /*height: 50%;*/
    padding: 60px 0 100px;
    text-align: center;
    background: #625CDD; /*#504ed2*/
    color: #eee;
}
/* = Generic Sections > HP + Mentions légales
-------------------------------------------------------------- */
.grey-section,.lightgrey-section,.white-section {
    height: 100%;
    padding: 10em 0;
    text-align: center;
    background: #fff;
}
.lightgrey-section {
    text-align: center;
    background: #f8f9fa;
}
.grey-section {
    background: #f2f2f2;
}
.lightgrey-section.second-section {
    padding-top: 180px;
}
.grey-section p,.lightgrey-section p,.white-section p {
    text-align: left;
}

/*!
 * Start Bootstrap - Scrolling Nav HTML Template (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */
 @media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }
    .top-nav-collapse {
        padding: 0;
    }
    .mobile-img {
        display: none;
    }
}
@media (min-width: 280px) and (max-width: 767px) { 
    .mobile-img {
        display: block;
        border: 5px solid whitesmoke;
        margin-bottom: 2rem;
    }
    .intro-section .desktop-img {
        display: none;
    }
    .h1.display-3 {
        font-size: 2.8rem;
    }    
}
@media (min-width: 576px) and (max-width: 767px) { 
    .h1.display-3 {
        font-size: 3.0rem;
    }
    .intro-section .desktop-img {
        display: none;
    }    
}
@media (min-width: 768px) and (max-width: 991px) { 
    .h1.display-3 {
        font-size: 2.5rem;
    }
    .intro-section .desktop-img {
        max-width: 350px!important;
    }
    .col-md-7 {
        padding: 0 2.5rem;
    }
}
@media (min-width: 992px) and (max-width: 1024px) { 
    .h1.display-3 {
        font-size: 3.5rem;
    }
    .intro-section .desktop-img {
        max-width: 420px!important;
    }
}


/* debut souris */
/* position de la souris dans l'ecran */
.mouse-position {
    width: 30px;
    margin: 0px auto 50px;
    min-height: 50px;
    position: relative
}
.mouse-position::before{
    text-decoration: none;
    content: '';
}
    
/* a class indique que sa position doit prendre en compte .mouse */
.souris, .souris-to-top {
    position: absolute;
    text-decoration: none;
}
    
/* definir le bloc de la souris */
.souris span, .souris-to-top span {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 50px;
    border: 1px solid #504ED2;
    border-radius:50px
}
    
/* definir la bille a interieur de la souris */
.souris span::before, .souris-to-top span::before {
    position: absolute;
    top: 10px;
    left: 40%;
    content: '';
    width: 6px;
    height: 6px;
    background: #3399FF; /* #504ED2 */
    border-radius: 50%;
    animation : souris-down 2s infinite /* ease-in-out reverse */
}
/* animation tele de lecture lire animation en 2s continu */
/* creation des etape keyframes DOWN */
@keyframes souris-down {
      0% { opacity: 0; transform: translate( 0, 0);}  /* margin-left: 0% */
      40%{ opacity: 1;}
      80%{ opacity: 0; transform: translate(0, 20px);}
      100%{ opacity: 0;} /* margin-left: 100% */
    }
/* definir animation bille souris-to-top */
.souris-to-top span::before {
    position: absolute;
    top: 10px;
    left: 40%;
    content: '';
    width: 6px;
    height: 6px;
    background: #3399FF;
    border-radius: 50%;
    animation : souris-up 2s infinite /* ease-in-out reverse */
    }
/* creation des etape keyframes UP */
@keyframes souris-up {
      100% { opacity: 0; transform: translate( 0, 0);}
      80%{ opacity: 1;}
      40%{ opacity: 0; transform: translate(0, 20px);}
      0%{ opacity: 0;}
    }

#progress{
	background-color: #625CDD;
	height: 3px;
	width: 0;
	position: fixed;
	margin-top: 0;
	left: 0;
	z-index: 9999; /* Important si menu en position fixe */
}