/*///////////////////////////////GENERAL////////////////////////////////*/
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: helvetica, sans-serif;
}
h2 {
    font-family: 'Raleway', sans-serif;
    color: #278DE0;
    font-size:30px;
    text-align: center;
    font-weight: lighter;
}
h3 {
    font-family: 'Slabo 27px', serif;
    color: #000;
    font-size:15px;
    text-align: center;
    font-weight: lighter;
    margin-bottom: 20px;
}
h4 {
    font-family: 'Sansita', sans-serif;
    text-transform: capitalize;
    font-size:20px;
    text-align: center;
    font-weight: normal;
    margin-bottom: 20px;
}
h5 {
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
    font-size:12px;
    font-weight: normal;
    margin-bottom: 20px;
}
p {
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    font-weight: normal;
}
.white {
  color: white;
}
.alignLeft {
    text-align: left;
}
.alignRight {
    text-align: right;
}
.alignCenter {
    text-align: center;
}
.justify {
    text-align: justify;
}
/*/// BLOC ALIGN CENTER ///*/
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}
/*////////////////////////HEADER////////////////////////////////////////////*/
/* header page pf */
.headerIMG {
    width: 50px;
    max-height: 40px;
    opacity: 0.4;
}
a .headerIMG:hover , a .selected {
    opacity: 1;
}

.header {
    position: fixed;    
    background: rgba(0, 0, 0, 0.9);
    color:#fff;
    height: 400px;
    width: 100%;
    transition: .3s ease-in-out;    -webkit-transition: .3s ease-in-out;
    z-index: 10;
}
/* .small ajouter à header gestion minimiser header */
.header.small {
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    height: 50px;
    transition: .4s ease-in-out;    -webkit-transition: .4s ease-in-out;
}
/* minimisation ajout marges plus rapide/courte pour affichage */
.header ~ .clients {
    padding-top: 450px;
    transition: .1s ease-in-out;      -webkit-transition: .1s ease-in-out;
}
.header.small ~ .clients {
    padding-top: 130px;
    transition: .6s ease-in-out;         -webkit-transition: .6s ease-in-out; ;
}

.header img{
    margin :0 20px;
    height: 110px;
    float: left;
    transition:all 0.3s ease-in-out;    -webkit-transition:all 0.3s ease-in-out;
}
.header.small img{
    margin :5px 20px;
    height: 40px;
    float: left;
    transition:all 0.3s ease-in-out;    -webkit-transition:all 0.3s ease-in-out;
}
.header #monTitre {
  float: left;
  margin-top: 12px;
}
.header h1 {
    display:inherit;
    font-size:45px;
    font-weight:normal;
}
.header.small h1 {
    display:none;
}
.header .center {
    margin: 0 auto;
    width: 500px;
    padding-top: 150px;
    transition:all 0.3s ease-in-out;    -webkit-transition:all 0.3s ease-in-out;
}
.header.small .center {
    margin: 0;
    width: 500px;
    padding-top: 0px;
    transition:all 0.3s ease-in-out;    -webkit-transition:all 0.3s ease-in-out;
}
/*////////////////////CLIENTS///////////////////////////////////////*/
.clients {
    padding: 2%;
}
.clients .clientLogo {
    padding: 10px 20px;
    max-width: 120px;
    resize: both;
}
/*/////////////////WHAT WE DO//////////////////////////////////////*/
.wwd {
    background-color: #278DE0;
    padding: 2%;
}
.wwd .itemwwd {
    width: 300px;
    padding: 10px 20px;
    text-align: center;
    vertical-align: top;
}
/*/////////////////OUR WORK////////////////////////////////////////*/
.OurWork {
    padding: 2%;
}
/*//// HOVER IMG ////*/
.OurWork .inline-block-center .g figure {
	background: #278DE0;
    position: relative;
}
.OurWork .inline-block-center .g figure img {
	opacity: 1;
	-webkit-filter: grayscale(0) blur(0);
	filter: grayscale(0) blur(0);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.OurWork .inline-block-center .g figure span {
    position: absolute;
    display: block;
    bottom: 30px;
    width: 100%;
    opacity: 0;
    padding: 5%;
    color: white;
    font-size:15 px;
    font-weight: lighter;
    -webkit-transition: .7s ease-in-out;
	transition: .7s ease-in-out;
}
.OurWork .inline-block-center .g figure:hover img {
    -webkit-filter: grayscale(100%) blur(3px);
	filter: grayscale(100%) blur(5px);
	opacity: .3;
}
.OurWork .inline-block-center .g figure:hover span {
    z-index: 2;
	opacity: 1;
}
.GridTxtHover {
    font-family: 'Raleway', sans-serif;
    color: #FFF;
    font-size:15px;
    text-align: center;
    font-weight: lighter;
}
.OurWork .inline-block-center .g figure:hover span .GridImgHover {
        z-index: 2;
        opacity: 1;
        -webkit-filter: blur(0);
	    filter: blur(0px);
        padding-bottom: 25px;
        height: 100px;
        display: block;
        margin: 0 auto;
        -webkit-transition: .7s ease-in-out;
	    transition: .7s ease-in-out;
}
.OurWork .inline-block-center .g figure span .GridImgHover {
        opacity: 0;
        padding-bottom: 25px;
        height: 100px;
        display: block;
        margin: 0 auto;
        -webkit-transition: .7s ease-in-out;
	    transition: .7s ease-in-out;
}
/*//// grid responsive IMG ////*/
.g {
    padding: 0;
    overflow: hidden;
}
.g li {
    float: left;
    width: 50%;
    padding: 0;
}
.g img {
    display: block;
}
.g li:nth-child(odd) {
    clear: left;
}

@media screen and (max-width: 30em) {
    .g li {
        width: 100%; 
    }
    .g li:nth-child(0n+1) {
        clear: left;
    }
    .g li:nth-child(odd) {
        clear: none;
    }
    .big12 {
        display:none;
    }
}
@media screen and (min-width: 31em) {
    .g li {
        width: 50%; 
    }
    .g li:nth-child(0n+1) {
        clear: left;
    }
    .g li:nth-child(odd) {
        clear: none;
    }
    .big12 {
        display:none;
    }
}
@media screen and (min-width: 40em) {
    .g li {
        width: 33.3333333333333333%; 
    }
    .g li:nth-child(3n+1) {
        clear: left;
    }
    .g li:nth-child(odd) {
        clear: none;
    }
    .big12 {
        display:inherit;
    }
}
@media screen and (min-width: 55em) {
    .g li {
        width: 25%; 
    }
    .g li:nth-child(4n+1) {
        clear: left;
    }
    .g li:nth-child(3n+1) {
        clear: none;
    }
    .big12 {
        display:inherit;
    }
}
@media screen and (min-width: 72em) {
    .g li {
        width: 20%; 
    }
    .g li:nth-child(5n+1) {
        clear: left;
    }
    .g li:nth-child(4n+1) {
        clear: none;
    }
    .big12 {
        display:none;
    }
}
@media screen and (min-width: 90em) {
    .g li {
        width: 16.666666666%; 
    }
    .g li:nth-child(6n+1) {
        clear: left;
    }
    .g li:nth-child(5n+1) {
        clear: none;
    }
    .big12 {
        display:inherit;
    }
}

h3 {
    border-bottom: 0px;
}   


/*/////////////////CONTACT BOOTSTRAP////////////////////////////////////////*/
.blocContact {
    background-color: #278DE0;
    text-align: center;
    padding: 10px 0 30px 0;
}
.blocContact .contactLink {
    height: 100%;
    padding: 10%;
}
.blocContact .contactLink img {
    width : 90%;
    padding: 20%;
    transition:all 0.1s ease-in-out;    -webkit-transition:all 0.1s ease-in-out;
}
.blocContact .contactLink:hover img {
    width : 100%;
    padding: 10%;
    transition:all 0.1s ease-in-out;    -webkit-transition:all 0.1s ease-in-out;
}
.blocContact a {
    text-decoration: none;
}
.blocContact a .contactLink h5 {
    font-size:1.2em;
    margin: 20px auto 20px auto;
    transition:all 0.1s ease-in-out;    -webkit-transition:all 0.1s ease-in-out;
}
.blocContact a .contactLink:hover h5 {
    font-size:1.3em;
    margin: 10px auto 17px auto;
    transition:all 0.1s ease-in-out;    -webkit-transition:all 0.1s ease-in-out;
}

@media only screen and (min-width: 481px) {
    .device {
        visibility: hidden;
    }
}