/*--------------------------------------------------------------
## Styles
--------------------------------------------------------------*/

body{
	background-color: #e2007a;

	background-image: url('img/bg.jpg');
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: contain;

	
}
@media all and (min-width: 700px){
	body{
		background-size: 40%;
	}
}

body
{
	font-family: 'roboto';
}
.job__title__line1,
.id__name__job,
.job__geo__txt,
.serv__list li,
.prod__title__line1,
.bla__title_h2,
.serv__title,
.contact__line1,
.contact,
.portfolio__descr
{
	font-family: 'Roboto Condensed', sans-serif;
	text-transform: uppercase;
}


p,
.job__title__line2,
.job__title__line2
{ 
	font-family: 'PT Sans', sans-serif; 
}

.bt_contact
{
	display: inline-block;
	
	background: #e2007a;
	color: #fff;
	padding: 5px 10px;
	margin:2px 0;
	height: 40px;

	border-radius: 3px;
}

.contact__email.bt_contact{
	font-size: 16px;
	text-transform: lowercase;
}

	.bt_contact::selection,
	{
		background: #000;
		color: #fff;
		border-radius: 50px;
	}

	.bt_contact *::selection {
		background: #000;
		color: #fff;
		border-radius: 50px;
	}
	
	.bt_contact::selection * {
		background: #000;
		color: #fff;
		border-radius: 50px;
	}


@media all and (min-width: 700px){
	.contact__email.bt_contact
	{
		font-size: 25px;
	}
}

.imprimeur{
	margin-top:5px;
	margin-bottom: 20px;

	
}
	@media all and (min-width: 600px){
		.imprimeur{
			width: calc(100%/3);
			float: left;
		}
	}

	

.col__1{

	color: #000;
	float:left;

}
@media all and (min-width: 600px){
	.col__1{
		width: 40%;
	}
	.col__2{
		width: 60%;
	}
}


	.col__1__inner{
		max-width: 450px;
		float: right;
		padding: 30px 10%;

		animation-name: fromleft_anim;
		animation-duration: 500ms;
		animation-timing-function: ease-out;

	}
	@media all and (min-width: 1200px){
		.col__1__inner{
			padding: 30px 5%;
		}
	}

.col__2{
	background-color: #fff;
	float:right;


	animation-name: fromright_anim;
	animation-duration: 1500ms;
	animation-timing-function: ease-out;
}
	
	.col__2__inner{
		padding: 30px 12%;
		max-width: 800px;
	}
	@media all and (min-width: 1200px){
		.col__2__inner{
			padding: 30px 6%;
		}
	}
	

	.id__name{ font-weight: bold; }
	.id__name__job,
	.job__geo
	{

		font-size: 12px;
		letter-spacing: 0.2em;
		text-transform: uppercase;

		color: #fff;

		margin-bottom: 30px;

		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #000
	}

	.id__name__job__txt,
	.job__geo__txt
	{
		color: #000;
		padding-bottom: 10px;

		display: inline-block;
	}

	@media all and (min-width: 500px){
		.id__name__job,
		.job__geo
		{
			padding-top: 80px
		}
	}


	.prod__title,
	.job__title
	{
		font-size: 22px;
		min-height: 100px;

		margin-bottom: 25px;
		padding-bottom: 25px;

		border-bottom-width: 5px;
		border-bottom-style: solid;
		
	}

	.prod__title
	{
		border-bottom-color: #000
	}
	.job__title
	{
		border-bottom-color: #e2007a
	}
	.job__title__line1{
		color: #e2007a;
		font-weight: bold;
	}



	.me
	{

		margin-bottom: 25px;

		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #000;

		min-height: 175px;

	}
			.me__txt
			{
				margin-bottom: 25px;
			}
			.me__img{
				margin-bottom: 15px;
				margin: 0 auto 5px auto;
			}
			@media all and (min-width: 1000px){
				.me__img{
					float: left;
					padding-right: 20px;
				}
			}


	.serv__title{
		font-size: 25px;
		font-weight: bold;
	}
	.serv__info{
		font-size: 25px;
		font-weight: normal;
	}
	.serv__list{
		margin-top: 15px;
		margin-bottom: 15px;
	}
	.serv__list li
	{
		float: left;
		margin: 2px 2px;

		padding: 5px 6px;

		color: #000;
		background: rgba(0,0,0,0.05);
	}
	.serv__list li a{ color: inherit; }
		.serv__list li:hover
		{
			background: rgba(0,0,0,0.2);
		}



		.villes{

		}
		.villes__title{
			font-weight: bold;
			font-size: 16px;
			text-transform: uppercase;
			padding-top: 25px;
			margin-bottom: 10px;
		}
		.villes__content{
			font-size: 14px;
		}

		.villes__content span,
		.villes__content li{
			display: block;
			margin-bottom: 6px;
			float: left;
			width: 50%;
		}

	.portfolio__item{
		float: left;
		width: 50%;
	}
		.portfolio__item img{
			width: 100%;
			max-width: 100%;
		}

		.portfolio__descr
		{
			padding-top: 8px;
			padding-bottom: 8px;

			font-size: 13px;
			color: #464646;
		}

	.contact
	{
		text-align: center;

		padding: 25px 0;
		margin-bottom: 25px;

		border-top-width: 5px;
		border-top-style: solid;
		border-top-color: #f3f3f3;

		border-bottom-width: 5px;
		border-bottom-style: solid;
		border-bottom-color: #f3f3f3;
	}

		.contact__title{
			margin-bottom: 15px;
		}
			.contact__line1{
				color: #e2007a;

				font-size:22px;
				text-transform: uppercase;
			}
			.contact__line2{
				color: #e2007a;

				font-size:18px;
				font-weight: bold;
			}
			.contact__tel{
				
				font-size:25px;
				font-weight: bold;
				
			}
			.contact__email{
				font-size: 25px
			}

			.arobase::before {
			    content: "\000040";
			}
			span.arobase span{
				font-size: 1px;
				color: rgba(0,0,0,0);
			}

	.bla{}
	.bla p{
		margin-bottom: 15px;
		font-size: 16px;
		line-height: 24px;

		color: #464646
	}
	.bla__title_h2{
		font-size: 20px;
		line-height: 24px;
		margin-bottom: 12px;
	}

.footer
{
	background: #f4f4f4;
	padding: 20px 0;

	font-size: 12px;
}
/*--------------------------------------------------------------
## Colors
--------------------------------------------------------------*/


@keyframes fromleft_anim{
	0%{
		transform: translateX(-100%);
	},
	100%{
		transform: translateX(0%);
	}
}


@keyframes fromright_anim{
	0%{
		transform: translateX(100%);
	},
	100%{
		transform: translateX(0%);
	}
}

/*--------------------------------------------------------------
## Responsive Specific Styles
--------------------------------------------------------------*/

/* Wide */

@media all and (min-width: 700px) {
	.c{max-width: 960px;}
}

/* Small */

@media all and (max-width: 700px) {
	.w{width: 100%;}	
	.c{padding-left: 5%; padding-right: 5%}
}



/*--------------------------------------------------------------
## Responsive 
--------------------------------------------------------------*/

@media all and (max-width: 1000px){
	body .w{ width: 100% }
}

.w1-2 {width : 49.98%;}
.w1-3 {width : 33.31%;}
.w1-4 {width : 24.98%;}
.w1-5 {width : 19.98%;}
.w1-6 {width : 16.64%;}
.w1-7 {width : 14.26%;}
.w1-8 {width : 12.48%;}
.w2-3 {width : 66.64%;}
.w2-5 {width : 39.98%;}
.w2-7 {width : 28.55%;}
.w3-4 {width : 74.98%;}
.w3-5 {width : 59.98%;}
.w3-7 {width : 42.83%;}
.w4-5 {width : 79.98%;}
.w4-7 {width : 57.12%;}
.w5-6 {width : 83.31%;}
.w5-7 {width : 71.4%;}
.w1-9 {width : 11.09%;}
.w2-9 {width : 22.2%;}
.w3-9 {width : 33.31%;}
.w4-9 {width : 44.42%;}
.w5-9 {width : 55.53%;}
.w6-9 {width : 66.64%;}
.w7-9 {width : 77.75%;}
.w8-9 {width : 88.86%;}
.w100{width:100%;}



/*--------------------------------------------------------------
## Thomas Dufranne Shortcuts
--------------------------------------------------------------*/

	.line{width: 100%;  display: inherit;}

	.full{width:100%;}
	.db{display: block;}
	.ib{display: inline-block;}
	.fl{float:left;}
	.fr{float:right;}
	.ib{display: inline-block;}
	.cl,.cleft{clear:left; }
	.cright{clear:right}
	.cb,.cboth{clear:both}
	.ac, .center, .aligncenter{text-align: center}
	.ar, .alignright{text-align: right}
	.al, .alignleft{text-align: left}
	.upp{text-transform: uppercase;}
	.w{display: inline-block;     vertical-align: top;}
	.center{display: table; margin: 0 auto}
	.c{margin:0 auto;}

/*--------------------------------------------------------------
## Predefined
--------------------------------------------------------------*/


.h-space{
	height: 25px;
}

.fixed{
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 99;
	zoom:1;
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);
	opacity: 0.9
}

.c{	
	display: table;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	position: relative;
}

img{max-width: 100%; height: auto;}
.no-bg{background: transparent!important;}

::selection {
  background: rgba(0,0,150,0.05); /* WebKit/Blink Browsers */
}
::-moz-selection {
  background: rgba(0,0,150,0.05); /* Gecko Browsers */
}



div a{
		color: #e2007a
	}



/*--------------------------------------------------------------
## RESETS
--------------------------------------------------------------*/

body{margin: 0; }

html {
  box-sizing: border-box;
}*,
*::before,
*::after {
  box-sizing: inherit;
}


/* Reset margins and paddings on most elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
li,
p,
pre,
blockquote,
figure,
hr {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3
{
	font-size: inherit;
}

/* Removes discs from ul */
ul {
  list-style: none;
}

input,
textarea,
select,
button {
  color: inherit; 
  font: inherit; 
  letter-spacing: inherit; 
}

input,
textarea,
button {
  border: 1px solid gray; 
}

embed,
iframe,
img,
object,
video {
  display: block;
  max-width: 100%;
}