@charset "utf-8";
/* CSS Document */


body {
	max-width:100%;	
	margin:0;
	padding:0;
	background:#000;
	font-size:1.1em;	
	font-family: 'Inconsolata' ;
	color:#fff;}
.intro {
 	  max-width:1500px;
	  width:100%;
	  margin:0 auto;
	 /* margin-top:-50px;*/
	  height: 930px;
	  background-color: black;
	  position:relative;
	  overflow:hidden;
	 }
	
#menu a{
	font-family: 'Audiowide', cursive;
	}
	
#block1{
	width:100%;
	height:930px;
	margin:0;
	padding:0;
	background:#000;
	}
	
#block1 h1{
	position:relative;
	z-index:2001;
	text-align:center;
	bottom:-30%;
	color:#DAC107;
}
	
#presentation {
		color:#DAC107;
		margin:10% 0;
		} 
		
#presentation span{
	font-size:1.7em;
}

#back{
	width: 0;
	height: 0;
	position:relative;
	z-index:2000;	
	margin:0 auto;
	border-left: 750px solid transparent;
	border-right:750px solid transparent;
	border-top: 350px solid black;
	}
	
#web-solution-pour-vous-contenu{
	margin:0 auto;
	padding:0;
	width:100%;
	background:#000;
	position:relative;
	background:	url(../images/fond.png);
	background-repeat: repeat-x;
}

.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}


#web-solution-pour-vous-contenu h1{
	text-align:center;
	color:#fff;
	letter-spacing: 3px;
	font-size: 1.5vw;
	}
	
.proba{
	margin:0 auto;
	
	}
	
#header{
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	width:100%;
	background:#000;
	z-index:2000;
	height: 7vw;
	}
#competences{
	color: #4a4a49;
	margin:0 auto;
	padding:0;
	min-height:633px;
	width:77%;
	}
#competences1{
	color:#fff;
	position:relative;
	z-index:10;
	margin-top:4%;
	}
	
#block_left, #block_right{
	float:left;
	width:35%;
	margin:0;
	padding:5% 0;
	}
	
#block_left{
	margin-right:30%;
	}
	
#competences1 h1{
	text-align:left;
	margin-top:5%;
	}		
#c_image{
	position:absolute;
	bottom: 3em;
    left: 1em;
    width: 350px;
    height: 435px;
	background-repeat:no-repeat;
  -webkit-animation-duration: 10s;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
	}
	
#web-solution-pour-vous-contact{
	background-repeat:no-repeat;
	background-position:5%;
	background-color:#fff !important;
	}
	
#web-solution-pour-vous-contact h1{
	padding-bottom:4%;
	}
	
.form_contact{
	width:77%;
	min-height:300px;
	margin:0 auto;
	text-align:center;
	line-height:2em;
	}
	

	
	

#web-solution-pour-vous-contact, #web-solution-pour-vous-contact h1{
	color: #4a4a49;
}
		
.base{
	width:100%;
	background-color:rgba(218, 193, 7, 0.05);
	
	border-radius:7px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-style: solid;
    border-width: 4px 2px 1px 1px;
	border-color:rgba(35, 33, 27, 0.5) #564C0D #564C0D  #514715;
	height:11px;
	z-index:11;
	position:relative;
	}
	
.bar2,.bar1, .bar3, .bar4, .bar5, .bar6{
	width:10px;
	height:11px;
	background-color:#DAC107;
	border-right: 1px solid #23211B;
    background: -webkit-linear-gradient(#DAC107, #23211b); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#DAC107, #23211b); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#DAC107, #23211b); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#DAC107, #23211b); /* Standard syntax */
	opacity:0.5;
	border-radius:11px;
	z-index:102;
	
	}
	
.bar1::after {
	content:" 90%";
	margin-left:103%;
	position:relative;
	display:block;
	top: -11px;
    font-size: 1.5em;
	
	}
.bar2::after {
	content:" 60%";
	margin-left:103%;
	position:relative;
	top: -11px;
    font-size: 1.5em;
	display:block;
	}
	
.bar3::after {
	content:" 20%";
	margin-left:103%;
	position:relative;
	top: -11px;
    font-size: 1.5em;
	display:block;
	}
	
.bar4::after {
	content:" 80%";
	margin-left:103%;
	position:relative;
	top: -11px;
    font-size: 1.5em;
	display:block;
	}
	
.bar5::after {
	content:" 70%";
	margin-left:103%;
	position:relative;
	top: -11px;
    font-size: 1.5em;
	display:block;
	}
	
.bar6::after {
	content:" 30%";
	margin-left:103%;
	position:relative;
	top: -11px;
    font-size: 1.5em;
	display:block;
	}
#c_html {
		/*background-color:rgba(218, 193, 4, 0.47);*/
	}

#web-solution-pour-vous-services{
	width:100%;
	background:url(../images/bg_services.jpg);
	background-size:cover;
	min-height:850px;
	color: #4a4a49;
	}

#web-solution-pour-vous-services1	{
	color: #4a4a49;
	margin:0 auto;
	width:77%;
	}
	


#web-solution-pour-vous-portfolio{
	padding:5% 0;
	width:100%;
	background:#fff;
		}

#contact{
	padding-top:3%;
	min-height: 500px;
	width:100%;
}
		
#web-solution-pour-vous-portfolio h1{
	color: #4a4a49;
	padding-bottom:4%;
	margin:2em 0;
	
	}
	

.og-expander{
	background:black;
	background-image:url(../images/fond_portfolio.png);
	}	
	

	
#web_solution_logo{
	display:none;
	margin:1em;
		}
	
#logo{
	/*width:30vw;
	height:auto;*/
	overflow: hidden;
	float:left;
	margin:1em;
	}
	
#logo figure{
	margin:0;
	padding:0;
	display:block;
	position:relative;
	overflow: hidden;
	}
	
#logo figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 11%;
	height: 93%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}
#logo figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
	
	
#menu{
	width:60vw;
	font-family: 'Audiowide', cursive;
	/*font-family: 'Raleway', sans-serif;*/
	margin: 0;
    margin-top: 3em;
    position: relative;
    float: right;
	}





@keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-webkit-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-ms-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}
		@-moz-keyframes animatedBackground {
			from { background-position: 0 0; }
			to { background-position: 100% 0; }
		}	
 #footer{
	width:100%;
	display:block;
	height:102px;
	background:	url(../images/Vega_star.jpg);
	margin:0;
	animation: animatedBackground 60s linear infinite;
    -ms-animation: animatedBackground 60s linear infinite;
    -moz-animation: animatedBackground 60s linear infinite;
	-webkit-animation: animatedBackground 60s linear infinite;
	text-align:center;
	padding-top:4%;
	font-size:0.95em;	
	color: #4a4a49;
	}
#d1, #d2, #d3, #d4, #d5, #d6{
	width:33%;
	float:left;
	padding:0 3%;
		}
#block-service1, #block-service2{
	width:100%;
	float:none;
	min-height: 110px;
	padding-top:4%;
	text-align:center;
	min-height: 157px;
	}
.fa{
	
	font-size: 2em !important;
    padding-bottom: 4%;
	
	}	
#web-solution-pour-vous-services	 h2{
	text-align:center;
	padding:2% 0;
	font-size: 1em;
	}
	
#web-solution-pour-vous-services h1{	
	padding: 5% 0 2% 0;
	color: #4a4a49;
	}
	
#citation{
	font-family: 'Lato', sans-serif;
	color:#fff;
	width: 50%;
    position: relative;
	margin:0;
	margin-left:44%;
   	margin-top: -37%;
	text-shadow: 3px 0px 27px rgba(255, 255, 255, 0.8);
	}
		
#citation h2{
	text-align:right;
	text-transform: uppercase;
	font-size:3vw;
}

#citation p{
	text-align:right;
	font-size:1.5vw;
}


.animated {
  -webkit-animation-duration: 2.7s;
  animation-duration: 2.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
/*@-webkit-keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

#citation.animated:hover{
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}
*/

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
	
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
	
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
#citation.animated{
  -webkit-animation-name: pulse;
  animation-name: pulse;
}


#citation{
  -moz-animation-delay: 0.5s;
  animation-delay: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
 /* -webkit-transition-timing-function:ease-in-out;
  transition-timing-function: ease-in-out;*/
}
/*#citation:hover{-webkit-animation-name:holeOut;animation-name:holeOut;}
@-webkit-keyframes holeOut{
	0%{opacity:1;-webkit-transform-origin:50% 50%;-webkit-transform:scale(1,1) rotateY(0deg);
	}
	100%{
		opacity:0;-webkit-transform-origin:50% 50%;-webkit-transform:scale(0,0) rotateY(180deg);
		}}
		
	@keyframes holeOut{
		0%{opacity:1;transform-origin:50% 50%;transform:scale(1,1) rotateY(0deg);
		}
	100%{
		opacity:0;transform-origin:50% 50%;transform:scale(0,0) rotateY(180deg);
		}}*/
#web_solution_logo2{
	width:30vw;
	height:auto;
	}
	
.first{
	font-size:1em;
	}
	
#h1_left, #h1_right{
	font-size:3em;
	line-height: 2.3em;
	display:inline-block;
	}
	
#web-solution-pour-vous-accueil{
	height: 4.2em;
	}
		
#competences1 p{
	margin-bottom:3em;
	}
/* css menu */
#menu li {
	display:inline;
	text-decoration:none;
	}
#menu ul{
	list-style-type:none;
	margin:0;

}

 li a.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 0.85em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
	margin-right:3.7em;
	letter-spacing :4px;
}

li a.effect {
	text-transform: uppercase;
	/*font-weight: 900;*/
	overflow: hidden;
	line-height: 0.75;
	color: rgba(218, 193, 4, 0.7);
}

li a.effect:hover {
	color: #fff;
}

li a.effect::after {
	content: '';
    position: absolute;
    height: 9px;
    width: 100%;
    top: 50%;
    margin-top: -5px;
    right: 0;
    /* background: #F9F9F9; */
    background: rgba(255, 255, 255, 0.57);
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
    -webkit-transition: -webkit-transform 0.4s;
    transition: transform 0.4s;
    -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
    transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

li a.effect:hover::after {
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

li a.effect::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #fff;
	white-space: nowrap;
	width: 0%;
	-webkit-transition: width 0.4s 0.3s;
	transition: width 0.4s 0.3s;
}

li a.effect:hover::before {
	width: 100%;
}

.og-grid li > a:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}

/*______________form css__________________ */
#pres{
	width:90%;
	margin:0 auto;
	text-align:center;
	}
	
#contacter {
	display:inline-block;
	width:100%;
    margin-top: 7%;
	}
	
	
#contacter input,#contacter textarea{
	padding:0.7%;
	font-family: 'Inconsolata' ;
	border-color:#4a4a49;
	margin-right:3%;
	border:none;
	border-bottom-style: solid;
    border-left-style: solid;
	border-width: 1px;
	position: relative;
	
	}


#contacter #bouton{
	width:11%;
	border:none !important;
	background:rgba(218, 193, 4, 0.7);
    letter-spacing: 2px;
	font-size:1.1em;
	margin-right:0;
	color:rgba(74, 74, 73, 0.7);
 
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

#contacter #bouton:hover, #contacter #bouton:focus, #contacter #bouton:active {
  color: #4a4a49;
  background:rgba(218, 193, 4, 0.9);
}

:focus {
	outline:white auto 5px;
}
 
#contacter input{
	width:11%;
		}	
	
#contacter  textarea{
	overflow: auto;
	vertical-align: bottom;
}
.ws_title{
	font-size:1.5vw;
	letter-spacing: 3px;
	color: #4a4a49;
    line-height: 9vw;}
.col{
	display: none;
}

/********************** css responsive ********************************************************************/
@media all and (min-width: 1200px) and (max-width: 1562px) {
.
	#web_solution_logo2 {
    width: 15vw;
	}
	#menu {
		width: 64vw;
		margin:1%;
		margin-left:3%;}
	li a.link {
		font-size: 0.65em;}
	#citation{
	margin-top: -47%;
}
	
}


@media all and (min-width: 567px ) and (max-width: 1199px) {
#header{min-height: 15vh;
 -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;}
#header.auto{
	height: auto;
}

#header *{
	-webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.col{
	display: block;
	position: absolute;
	top: 10%;
	right: 10%;
}
.bar {
   display: block;
   height: 5px;
   width: 50px;
   background: #dac107;
   margin: 10px auto;
   border-radius:2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
 }
 
 .con {
   cursor: pointer;
   display: inline-block;
   width: auto;
   margin: 0 auto;
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;
 }
 
 .col {
   display: inline-block;
   width: 24%;
   text-align: right;
   height: auto;
  
 }
 
 .middle {
   margin: 0 auto;
 }
 
 .bar {
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;
 }
 
 .con:hover .top,
 .con.active .top {
   -webkit-transform: translateY(15px) rotateZ(45deg);
   -moz-transform: translateY(15px) rotateZ(45deg);
   -ms-transform: translateY(15px) rotateZ(45deg);
   -o-transform: translateY(15px) rotateZ(45deg);
   transform: translateY(15px) rotateZ(45deg);
 }
 
 .con:hover .bottom ,
 .con.active .bottom {
   -webkit-transform: translateY(-15px) rotateZ(-45deg);
   -moz-transform: translateY(-15px) rotateZ(-45deg);
   -ms-transform: translateY(-15px) rotateZ(-45deg);
   -o-transform: translateY(-15px) rotateZ(-45deg);
   transform: translateY(-15px) rotateZ(-45deg);
 }
 
 .con:hover .middle,
 .con.active .middle {
   width: 0;
 }
 
 #menu{
 
 	min-width:29%;
 	right: -37%;
    top: 20%;
    text-align: right;
    float: none;
	clear: both;
 	position: relative;
 	-webkit-transform: translatex(90%);
          transform: translatex(90%);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
 }
 #menu.show {
  -webkit-transform: translatex(0%);
          transform: translatex(0%);
}
#menu li{
	display: block;
}
	
li a.effect {
    line-height: 2.75;
}
#block1	{
	display:none;
	}
#web-solution-pour-vous-contenu h1, #h1_left, #h1_right{
	font-size:3.5vw ;
	}
	
#h1_left, #h1_right{
	line-height: 4vw;
	}

#block_left, #block_right{
	float: none;
	clear: both;
	width: 100%;
}
#competences1 h1{
	margin-top: 1%;
	font-size: 2.5vw;
}
#c_image {
	width: auto;
    height: auto;
    left: 2em;
}
	
#c_image img {
    width: 26%;
    height: 27%;
}
	
#contacter input,#contacter textarea {
    width: 70%;
	margin: 4% 0;
}	
#contacter #bouton {
    width: 30%;}	
.ws_title{
	font-size:2.5vw;}

#web-solution-pour-vous-contenu{
	margin-top: 29%;
	}	
}


@media all and (max-width: 566px) {


#header{min-height: 15vh;
 -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;}
#header.auto{
	height: auto;
}

#header *{
	-webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.col{
	display: block;
	position: absolute;
	top: 10%;
	right: 10%;
}
.bar {
   display: block;
   height: 5px;
   width: 50px;
   background: #dac107;
   margin: 10px auto;
   border-radius:2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
 }
 
 .con {
   cursor: pointer;
   display: inline-block;
   width: auto;
   margin: 0 auto;
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;
 }
 
 .col {
   display: inline-block;
   width: 24%;
   text-align: right;
   height: auto;
  
 }
 
 .middle {
   margin: 0 auto;
 }
 
 .bar {
   -webkit-transition: all .7s ease;
   -moz-transition: all .7s ease;
   -ms-transition: all .7s ease;
   -o-transition: all .7s ease;
   transition: all .7s ease;
 }
 
 .con:hover .top,
 .con.active .top {
   -webkit-transform: translateY(15px) rotateZ(45deg);
   -moz-transform: translateY(15px) rotateZ(45deg);
   -ms-transform: translateY(15px) rotateZ(45deg);
   -o-transform: translateY(15px) rotateZ(45deg);
   transform: translateY(15px) rotateZ(45deg);
 }
 
 .con:hover .bottom ,
 .con.active .bottom {
   -webkit-transform: translateY(-15px) rotateZ(-45deg);
   -moz-transform: translateY(-15px) rotateZ(-45deg);
   -ms-transform: translateY(-15px) rotateZ(-45deg);
   -o-transform: translateY(-15px) rotateZ(-45deg);
   transform: translateY(-15px) rotateZ(-45deg);
 }
 
 .con:hover .middle,
 .con.active .middle {
   width: 0;
 }
 
 #menu{
 
 	min-width:29%;
 	right: -51%;
    top: 20%;
    text-align: right;
    float: none;
	clear: both;
 	position: relative;
 	-webkit-transform: translatex(100%);
          transform: translatex(100%);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
 }
 #menu.show {
  -webkit-transform: translatex(-64%);
          transform: translatex(-64%);
}
#menu li{
	display: block;
}
	
li a.effect {
    line-height: 2.75;
}

li a.effect {
	
    line-height: 1.75;
}

#web-solution-pour-vous-contenu{
	padding:30px 0;
	margin-top: 61%;
	}	
	
#block1	{
	display:none;
	}

#web-solution-pour-vous-contenu h1, #h1_left, #h1_right{
	font-size:3.5vw ;
	}
	
#h1_left, #h1_right{
	line-height: 4vw;
	}
	
#block_left, #block_right{
	float: none;
	clear: both;
	width: 100%;
}
#competences1 h1{
	font-size:1.2em;
	}

#c_image img {
    display: none;
}
#contacter input,#contacter textarea {
    width: 90%;
    font-size: 1em;
	margin: 4% 0;}	

#contacter #bouton {
    width: 90%;
	padding: 7%;}	
.ws_title{
	font-size:3.5vw;}		
}