html { scroll-behavior: smooth;}  /* no javascript ! */


body {
    margin:0;
    padding:0;
background: linear-gradient(30deg, #339fcd 0%, #339fcd 60%, #3ea5ce 60%, #3ea5ce 100%);
    background-color: rgba(0, 0, 0, 0);
background-repeat: repeat;
background-image: linear-gradient(30deg, rgb(51, 159, 205) 0%, rgb(51, 159, 205) 60%, rgb(62, 165, 206) 60%, rgb(62, 165, 206) 100%);
background-size: auto auto;
background-origin: padding-box;
background-clip: border-box;
   
} 

header {
position:relative; /* used to position #qui at the bottom of screen */
margin: 0;
min-height: 80vh; 
padding-top: 20px;
border: 0;
}

.face {
background: url("../img/bgdme.webp") no-repeat;
background-position: bottom left; 
    background-attachment: fixed;
}



.full-width {
width: 100%;
max-width: initial;
    }





nav ul li {
display: inline-block;
min-height: 50px;
text-transform: uppercase;
font-size: 1rem;  
    }

.topcta {
margin-top: 3rem;
    }



/* Default Link Styles */
a {
color: #FFFFFF;
text-decoration: none;
}

a:hover, a:focus {
    text-decoration: underline;
    }

  a img {
    border: none; }


.tel {

    background-color: #dedede;
}


/* Default paragraph styles */
   
p {
 font-family: 'Lato', sans-serif;
     font-weight: 300;
     line-height: 2.5rem;
margin-top: 2rem;
      font-size: 1.7rem;
    color: rgb(103, 103, 103);
}


.tagline { 
 line-height: 4rem;
font-size: 3rem;
color: #0A3E5D;
margin:0;
 }

.taglinesecond { 
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1.3rem;
   color: #0A3E5D;
   margin-top: 2rem;
    }

.eqheight {   
  display: -webkit-flex;
  display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
 }

/* Fix eqheight for safari. Apply to one child of eqheight */
.fixsafari { 
-webkit-flex: 1;
}


/************  H STYLES *****************/
h1, h2, h3, h4, h5, h6 {
font-family: 'lato', sans-serif;
  font-weight: normal;
  font-style: normal;
  text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
  line-height: 1.4; }


 h1 { 
     font-weight: 900;
     line-height: 4.5rem;
margin-top: 6rem;
      font-size: 4.5rem;
    color: #FAFAFA;
    text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }





h2 {
	font-weight: 900;
font-size: 2.3rem;
color: #0A3E5D;
line-height: 1;
-webkit-text-size-adjust: 100%;
    padding-bottom: 1rem;
    margin: 5rem 0 1rem 0;
    border-bottom: 1px dotted #FFFFFF;

     
}



h3 {
font-weight: 400;
font-size: 1.8rem;
color: #FFFFFF;
line-height: 1;
-webkit-text-size-adjust: 100%;
    padding-bottom: 1rem;
    margin: 3rem 0 1rem 0;
    border-bottom: 1px dotted #FFFFFF;
  width:70%;
    
}





/************ sections #ID *********************/

section {
    background-color: #FFFFFF;
    }

section a { 
color: #FFFFFF;
    text-decoration: underline;
 }

#qui  {
    display: flex; /* to allow vertical align of text in span */
    align-items: center;
    padding: 1rem;
    line-height: 1.8rem;
    margin: 0;
       background-color: #FFFFFF;
       min-height: 10%;
    }


#services ul {
   margin:0; /* Prevent broken margin right on tablet and mobile */ 
    
}

#services p { 
 line-height: 2rem;
font-size: 1.4rem;
    font-weight:300;
color: #333;
 }

#services a { 
color: #FFFFFF;
    text-decoration: underline;
 }












#services ul li {
    list-style-type: none;
    color: #ffffff;
    background-color:#339FCD;
    padding: 0.2rem 1rem;
    margin-bottom:0.5rem;
   margin-left:0.5rem;
 font-size: 1rem;
    text-align: center;
    width:auto;
     
    
}

#ref ul li {
    height: 100px;
    line-height: 100px;
    max-height: 100px;
   border: 1px dotted #d5d5d5;
     vertical-align:middle;
    align-content: center;
}

#ref  {
    background-color: #FFFFFF;
    padding: 3rem 0;
    
 }


#contact {
    padding : 2rem 0;
       background-color: #3BD8E8;
     margin:0;
}


#contact h2 {
    color: #758087;
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    padding-bottom: 1rem;
    border: 0;
    
 }

 #contact p {
    color: #758087;
     font-size: 1rem;
     line-height: 1rem;
    margin: 0;
    border: 0;
    text-align: left; 
 }

 

 button {
    background-color: #007095;
    text-align: center;
    margin: 0;
    margin: 1rem;
    padding: 2rem;
}
 
button a {
    background-color: #007095;
    color: #FAFAFA;
    text-align: center;
    margin: 0;
    padding: 0;
}

button a:visited, a:hover, a:active  {
    color: #FAFAFA;
    text-decoration: none;
   
    
}




/************ END sections #ID *********************/





ul li img{
 vertical-align:middle; 

}


ul.graylogo li img{
    filter: grayscale(1);
  
}

#conseil {
    background-color: darkturquoise;
    margin:0;
     padding:6rem 2rem;
color: rgb(103, 103, 103);
 }


#googleone, #googletwo {
    background-color: #3BD8E8;
     margin:0;
    padding:5rem 2rem;
 }




footer {
 
    height: auto;
    padding: 1rem 0;
    margin:0;
      -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility; 
     color: #252525;
    font-size: 0.8rem;
    font-weight: 300;
    background-color: #cccccc; 
     
}

footer a {
 
    font-weight: 700;
     color: #252525;
    font-size: 1rem;
    text-decoration: underline;
   
     
}








/* Foundation icons styling */
.icons {
   font-size: 2rem;
    font-weight:300;
    margin: 0 2rem 0 0;
line-height: 1rem;
    color: #ffffff;
       text-rendering: optimizeLegibility; 
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
}










/******************* @MEDIA QUERIES *****************************/

/*****Iphone 5******/
@media screen and (min-width: 320px) and (max-width: 568px) {
        h1{
            margin-top: 1rem;
            font-size: 2rem;
            line-height: 2rem;
        }
    
    h2 {
            font-size: 2.5rem;
            line-height: 2.5rem;
        }
    
    #contact h2 {
            
            line-height: 1.5rem;
        }
    
    
    .tagline {
            font-size: 2rem;
            line-height: 2rem;
        }
    
        #googleone, #googletwo {
            
            padding: 2rem;
         }


     footer {
           
            font-size: 0.6rem;
           
        }
    
  .cta-bottom {
           
            margin-top: 2rem;
           
        }
    
    
    /**** Fix margin right problem on references section ****/
    [class*="block-grid-"] {
           
            margin: 0;
           
        }
 
}




/**** Iphone 6 ****/
@media screen and (min-width: 375px) and (max-width: 667px) {

h1{
            margin-top: 2rem;
        }

#qui {
            font-size: 1.2rem;
        }

 

button {
           
            margin-bottom: 1rem;
        }

.bstyle{
           
            font-size: 1rem;
            line-height: 1rem;
      margin-bottom: 1rem;
      padding: 1rem;
        }

#googleone, #googletwo {
            
            padding: 2rem;
        }

    }



/**** IPHONE X****/
@media screen and (min-width: 375px) and (max-width: 812px) { 
     h1{
            font-size:2.3rem;
            line-height: 2.3rem;
    }

     .tagline {
            font-size:2rem;
            line-height: 2.3rem;
        }
    
    .small-block-grid-2 {
            margin:0;    
        }
    
    #contact h2{
           
            font-size: 1.6rem;
            margin-bottom:1rem;
        }
    
    
    
    .bstyle{
           
            font-size: 0.9rem;
            line-height: 1rem;
      margin-bottom: 2rem;
      padding: 1rem;
        }
    
        #googleone, #googletwo {
            
            padding: 2rem;
         }
    
   
    
    }

/**** IPAD ****/
@media screen and (min-width: 768px) and (max-width: 1024px) {
        h1{
            font-size: 3.5rem;
            line-height: 4rem;
        }
    .tagline {
            font-size: 3.5rem;
            line-height: 4rem;
        }
    
     button {
           
            font-size: 1.6rem;
            line-height: 1.6rem;
        }

    
    .medium-block-grid-4 {
            margin:0;
        }
    
    
     #contact h2{
           
            font-size: 1.6rem;
            margin-bottom:1rem;
        }
    
   
    
     .bstyle{
           
            font-size: 1rem;
            line-height: 1rem;
      margin-bottom: 2rem;
        }
    
    
    footer {
           
            font-size: 0.9rem;
           
        }
    
 
}





@media screen and (min-width: 1920px) {
        h1{
            font-size: 4.6rem;
            line-height: 4.5rem;
        }
    
    
     footer {
           
            font-size: 0.8rem;
           
        }

}