@charset "utf-8";

body { width:100%;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif; color: #333;
	font-size: 15px;
	font-weight: 300; margin:0;background: #fff; 
        background: -moz-linear-gradient(#fff, #f9fdff);
        background: -o-linear-gradient(#fff, #f9fdff);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
        background: -webkit-linear-gradient(#fff, #f9fdff);

}
a { text-decoration:none  }
.clearfloat{clear:both;}
h1  { font-family: 'LatoRegular';font-weight: normal; color:#0000cc; font-size:20px}
h2 {  font-size: 1.25rem;letter-spacing: 1px; color: #0078B3}
h3 { color:#c8b5d3}
h4 { margin-top:-5px; margin-bottom:-10px}
 ul {line-height:10px;}
 ul li {line-height:20px;}
 
/* Top */
/* Top */
.top {  width:100%; width:100%; box-shadow: 5 4px 10px 1px #aaa; }
.content_top {  margin:auto; width:70%;}
.logo { float:left; width:auto}
.site_title{ float:left;  margin-right:5%; padding-top:25px; width:auto}
.phone{ float:left; color:#bb0303; font-size:12px; padding-top:25px}
.liens {background-color: #bb0303; color: rgba(24, 54, 138, 1); width:auto; font-size:26px; color:#FFF;border-radius: 0.5rem; padding:20px; margin-top:10px;}
/* Head */
.head { width:100%; height:auto}
.content-head {max-width:1000px; margin:auto; width:98%; }
.img-head {background: rgba(41, 89, 155, .9); width:90%; height:auto; color:#FFF;  text-align:center; line-height:25px; font-size:16px; padding:20px; margin:auto}
.pub {width:98%;max-width:1000px; text-align:center; color:#FFF;  height:auto;}
.zt-parallax-asset {
    background-size: cover;
    background-attachment: fixed;}
	.zt-parallax-asset{
    background-size: cover;
    background-attachment: fixed;
}
.zt-parallax-asset .zt-content-parallax{
    padding: 0 20px;
}

.box {  background-color:#FFF; text-align:justify}
.box h2 { font-size:20px; color: #06F; padding:10px}
	.box a { color: #00F}
	.heig {  overflow:hidden; height:150px}

/* Head */
/* Box */
/* 1 column: 320px */
.autowide {
  margin: 0 auto;
	width: 90%;
}

.autowide .module { line-height:25px;
  
  border-radius: .25rem;
  margin-bottom: 1rem;
}
.autowide .module p {
  padding: .25rem .75rem;
}


/* box */
/* row idash*/
.row_idash { width:100%;}
.content_idash { width: 96%;	
	max-width: 1300px;
	margin: auto; 
	    padding-top:20px; padding-bottom:20px; text-align:justify}
.texte { float:left; width:60%;}
 .entrez { float:right; width:35%; text-align:center}
 .p1 { line-height:30px}

.content_competences {background: rgba(41, 89, 155, .9); width:50%; margin:auto; padding:1%; color:#FFF; border-radius: 0.5rem;}
.competence {float:left; width:50%; padding:1%}

.b_competence {float:right; width:42%; padding-left:1%}
.row_portage { width:100%;}
.div_portage { float:left;width:33%;}
.div_portage img{max-width:100%; height:auto}
/* row*/
/* footer gmap scroll*/
/*pages ----------------------------------------------------------*/ 
.content { width:70%; margin:auto; background-color:#FFF}
.content_left {float:left; width:65%;padding: 2%;text-align:justify; margin-left: 1%; line-height:25px; }
.content_right {float:left; width:25%; margin-left:3%;  line-height:25px;padding-top:20px}
.content_services { width:44%; padding:3%}
.myul li {line-height:20px;margin-left:-10px; list-style:none}
.services_left {float:left; width:65%;padding: 2%;text-align:justify; margin-left: 1%; line-height:25px; }
.services_right {float:left; width:25%; margin-left:3%;  line-height:25px;padding-top:20px}
/*pages*/
.footer {background: #F3F3F3; height:auto; padding-top:25px; margin-top:10px; width:100%}
.content_footer {  width:70%; margin:auto; margin-top:15px; padding:25px }
.box_footer { width:30%; float:left; margin-left:20px }
#map-canvas {
        float: center;
      }
    #columns {
        width: 80%;
    }
    #columns .column {
        position: relative;
        width: 33%;
        padding: 4%;
    } 
    #columns .left {
        float: left;
    }
    #columns .right {
        float: right;
    }
	#columns .center {
	    float: center;
	}

.google-maps {
        position: relative;
        padding-bottom: 75%; 
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 80% !important;
    }
	.scrollToTop{
    width: 70px;
    height: 70px;
    padding: 1px;
    text-align:center;
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom: 45px;
    right: 40px;
    display: none;
    background: url('../img/topicon.png') no-repeat 0 20px;
}
.scrollToTop:hover{
    text-decoration: none; background-color: #666;
}/* footer gmap scroll*/
/*FORMULAIRE*/
#wrapper {
        /*width:450px; max-width:25%;*/
        margin:0 auto;
        font-family:Verdana, sans-serif;
    }
   #wrapper legend {
        color:#0481b1;
        font-size:16px;
        padding:0 10px;
        background:#fff;
        -moz-border-radius:4px;
        box-shadow: 0 1px 5px rgba(4, 129, 177, 0.5);
        padding:5px 10px;
        text-transform:uppercase;
        font-family:Helvetica, sans-serif;
        font-weight:bold;
    }
  #wrapper  fieldset {
        border-radius:4px;
        background: #fff; 
        background: -moz-linear-gradient(#fff, #f9fdff);
        background: -o-linear-gradient(#fff, #f9fdff);
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#f9fdff)); /
        background: -webkit-linear-gradient(#fff, #f9fdff);
        padding:20px;
        border-color:rgba(4, 129, 177, 0.4); width:70%;
    }
   #wrapper input,
    textarea {
        color: #00F;
        background: #fff;
        border: 1px solid #CCCCCC;
        color: #aaa;
        font-size: 16px;
        line-height: 1.2em;
        margin-bottom:15px;

        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        border-radius:4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.2);
    }
   #wrapper input[type="text"],
    input[type="password"]{
        padding: 8px 6px;
        height: 22px;
        width:280px;
    }
  #wrapper  input[type="text"]:focus,
    input[type="password"]:focus {
        background:#f5fcfe;
        text-indent: 0;
        z-index: 1;
        color: #373737;
        -webkit-transition-duration: 400ms;
        -webkit-transition-property: width, background;
        -webkit-transition-timing-function: ease;
        -moz-transition-duration: 400ms;
        -moz-transition-property: width, background;
        -moz-transition-timing-function: ease;
        -o-transition-duration: 400ms;
        -o-transition-property: width, background;
        -o-transition-timing-function: ease;
        width: 380px;
        
        border-color:#ccc;
        box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
        opacity:0.6;
    }
  #wrapper  input[type="submit"]{ 
        background: #09F;
        border: none;
        text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
        text-transform:uppercase;
        color: #eee;
        cursor: pointer;
        font-size: 15px;
        margin: 5px 35px;
        padding: 5px 22px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-border-radius:4px;
        -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
        box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    }
   #wrapper textarea {
        padding:3px;
        width:96%;
        height:100px;
    }
   #wrapper textarea:focus {
        background:#ebf8fd;
        text-indent: 0;
        z-index: 1;
        color: #373737;
        opacity:0.6;
        box-shadow:0 0 5px rgba(4, 129, 177, 0.5);
        border-color:#ccc;
    }
  #wrapper  .small {
        line-height:14px;
        font-size:12px;
        color: #353535;
        margin-bottom:3px;
    }
	  /* FIN FORMULAIRE*/
	  /* mobile et tab*/
	  /* scroll to top */
.scrollToTop{
    width: 70px;
    height: 70px;
    padding: 1px;
    text-align:center;
    background: whiteSmoke;
    font-weight: bold;
    color: #444;
    text-decoration: none;
    position:fixed;
    bottom: 45px;
    right: 40px;
    display: none;
    background: url('../img/topicon.png') no-repeat 0 20px;
}
.scrollToTop:hover{
    text-decoration: none; background-color: #666;
}

  
	  /*Form*/
	  #form-div {
	padding-left:5px;
	padding-right:5px;
	padding-top:0px;
	padding-bottom:5px;
}
.feedback-input {
	color:#3c3c3c;
	font-family: Helvetica, Arial, sans-serif;
  font-weight:500;
	font-size: 18px;
	border-radius: 0;
	line-height: 16px;
	background-color: #fbfbfb;
	padding: 13px 13px 13px 54px;
	margin-bottom: 10px;
	width:90%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
  border: 3px solid rgba(0,0,0,0);
}

.feedback-input:focus{
	background: #fff;
	box-shadow: 0;
	border: 3px solid #3498db;
	color: #3498db;
	outline: none;
  padding: 13px 13px 13px 54px;
}

.focused{
	color:#30aed6;
	border:#30aed6 solid 3px;
}

/* Icons ---------------------------------- */
#name{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#name:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/name.svg);
	background-size: 30px 30px;
	background-position: 8px 5px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

#email:focus{
	background-image: url(http://rexkirby.com/kirbyandson/images/email.svg);
	background-size: 30px 30px;
  background-position: 11px 8px;
	background-repeat: no-repeat;
}

#comment{
	background-image: url(http://rexkirby.com/kirbyandson/images/comment.svg);
	background-size: 30px 30px;
	background-position: 11px 8px;
	background-repeat: no-repeat;
}

textarea {
    width: 100%;
    height: 150px;
    line-height: 150%;
    resize:vertical;
}

input:hover, textarea:hover,
input:focus, textarea:focus {
	background-color:white;
}

#button-blue{
	font-family: 'Montserrat', Arial, Helvetica, sans-serif;
	float:left;
	width: 50%; margin:auto;
	border: #fbfbfb solid 4px;
	cursor:pointer;
	background-color: #3498db;
	color:white;
	font-size:24px;
	padding-top:5px;
	padding-bottom:5px;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
  margin-top:-4px;
  font-weight:700;
}

#button-blue:hover{
	background-color: rgba(0,0,0,0);
	color: #0493bd;
}
	
.submit:hover {
	color: #3498db;
}
	
.ease {
	width: 0px;
	height: 74px;
	background-color: #fbfbfb;
	-webkit-transition: .3s ease;
	-moz-transition: .3s ease;
	-o-transition: .3s ease;
	-ms-transition: .3s ease;
	transition: .3s ease;
}

.submit:hover .ease{
  width:100%;
  background-color:white;
}

@media only screen and (max-width: 580px) {
	#form-div{
		left: 3%;
		margin-right: 3%;
		width: 88%;
		margin-left: 0;
		padding-left: 3%;
		padding-right: 3%;
	}
}
/* 2 columns: 600px */
@media only screen and (min-width: 600px) {
  .autowide .module {
		float: left;
		margin-right: 2.564102564102564%;
		width: 48.717948717948715%;
	}
	.autowide .module:nth-child(2n+0) {
		margin-right: 0;
	}
	
}

/* 3 columns: 768px */
@media only screen and (min-width: 768px) {
  .autowide .module {
		width: 31.623931623931625%;
	}
	.autowide .module:nth-child(2n+0) {
		margin-right: 2.564102564102564%;
	}
	.autowide .module:nth-child(3n+0) {
		margin-right: 0;
	}
	
}
@media only screen and (min-width: 768px max-width: 992px ) {.content_competences {background: rgba(41, 89, 155, .9); width:98%; margin:auto; padding:1%; color:#FFF; border-radius: 0.5rem;}}
/* 4 columns: 992px and up */
@media only screen and (min-width: 992px) {
  .autowide .module {
		width: 23.076923076923077%;
	}
	.autowide .module:nth-child(3n+0) {
		margin-right: 2.564102564102564%;
	}
	.autowide .module:nth-child(4n+0) {
		margin-right: 0;
	}
	.content_competences {background: rgba(41, 89, 155, .9); width:98%; margin:auto; padding:1%; color:#FFF; border-radius: 0.5rem;}
}

@media (min-width: 700px) and (max-width: 1200px) {
	.content_top {  margin:auto; width:98%;}
	.content { width:98%;}
	.content_footer {  width:100%; margin:auto; margin-top:15px; padding:2px }
	.box_footer {margin-left:2px}
	}
@media only screen and (max-width: 700px) {.content { width:98%;} 
	.content_left { float:none; width: auto;}
	.content_right {float:none; width: auto;}
	.content_right img{max-width:98%;}
	.content_top {  margin:auto; width:98%;}
	
	.logo { float:none; width:100%; text-align:center}
.site_title{ float:none; width:100%; padding-top:2px;  text-align:center}
.phone{ float:left; color:#bb0303;width:100%; font-size:12px; padding-top:2px; text-align:center}

.box_footer { width:90%; float:none; text-align:center; background-color:#FFF}	
.services_left {float:none; width:98%; }
.services_right {float:none; width:98%;}
.content_top {  margin:auto; width:90%;}	  
.logo { float:none; text-align:center; width:90%}

.phone{ float:none; font-size:12px; padding-top:5px; text-align:center; width:90%}
.row_portage { width:98%;}
.div_portage { float:none; width:98%; margin:auto}
.div_portage img { width:100%; height:auto}


.row_idash { width:100%;}
.texte { float:none; width:90%; margin:auto}
 .entrez { float:none; width:90%; text-align:center}
 .p1 { line-height:30px}
.content_competences {background: rgba(41, 89, 155, .9); width:98%; margin:auto;}

.competence {float:none; width:90%;}
.b_competence {float:none; width:90%}
.content_services { float:none; width:97%;}
.box_footer { width:90%; float:none; text-align:center; background-color:#FFF }
	  }