
/* 
CSS v1 screen for
Creation : Erwann Ser
Date : June 2015
*/

/*COMMON RULES
-----------------------------------------------------------------------*/

body, ul, ol, form, button, input, select, textarea, figure {margin:0; padding:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block}
audio, canvas, video {display: inline-block}

html {
	overflow-y: scroll; 
	font-size: .625em; /*10px*/
	}
body {
	font: 1.6em/1.5 "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif; 
	-webkit-text-size-adjust: 100%; 
	-ms-text-size-adjust: 100%;
	color: #333;
	} 

/*Layout
-----------------------*/

.align_center {margin: auto}

/* Table */ 
.table {
	display:table;
	table-layout:fixed; 
	border-collapse: collapse;
	border-spacing: 0;
	} 
	.cell {display:table-cell; vertical-align: top}

/*Inline blocks*/
.inbl {
	display:inline-block; 
	vertical-align:top;
	}
.valign_middle {vertical-align:middle}


/* Titles */ 
h1, h2, h3, h4, h5, h6 { 
  margin: 1em 0 .5em; 
  line-height: 1.2; 
}
h5, h6 {font-size: 1em} 

/*Images */ 
a img {border: none;} 
.bigImg {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* Links */ 
a {color:#333} 
a:hover, a:focus, a:active {text-decoration: none; background:transparent} 
a:hover, a:active {outline: none}

/* Forms */ 
input[type="checkbox"], input[type="radio"] {
		box-sizing: border-box; /*content-box in IE8/9 but border-box in others browsers*/
		padding:0
		}
button, input, select, textarea {vertical-align:baseline; margin:0; font-size: 1em} 
label, button {cursor: pointer}
textarea, input {
	border: 1px solid;
	-moz-border-radius: .3em;
	-webkit-border-radius: .3em;
	border-radius: .3em;
}
textarea {padding: .5em; resize: vertical}
input[type="search"] {-webkit-appearance: textfield; -webkit-box-sizing: content-box}


/*Text*/
.txt_right {text-align:right}
.txt_center {text-align: center}

/*Float*/
.right {float:right}
.left {float:left}


/* Quotes */ 
blockquote {margin: .75em 0 .75em 20px;} 
blockquote, q {quotes: none}
blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}
q, cite {font-style: italic;}
 

/* Other */ 
b, strong {font-weight:bold} /*FF 3/4, S4/5, Chrome*/
li {list-style:none}
p {margin: .8em 0} 

div, textarea, table, td, th {
	word-wrap: break-word;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
	    -ms-hyphens: auto; /*IE10+*/
	        hyphens: auto;
}

.hidden {
	position:absolute;
	top:-2000em;
	left:-2000em;
	width:1px;
	height:1px;
	overflow:hidden;
	}
.clearfix:before, .clearfix:after {
	content: "";
	display: table; /*format context*/
	}
.clearfix:after {clear: both}
abbr[title] {
	letter-spacing: .1em;
	border-bottom: 1px dotted #000; 
	cursor:help;
	}

.col2 {
	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
	}
	.col2 > p {margin-top:0}

/*----------------------------------------------------------------------------*/

.wrapper {
	max-width: 980px;
	margin: 0 auto;
	}
/*main { padding-bottom: 35px}*/

/*NAV*/
header {text-align:center}
	header ul {padding: 20px 0}
		header li {
			display:inline-block;
			padding: 0 15px;
			}
			header a {
				text-transform:uppercase;
				text-decoration:none;
				font: 200 1em "open-sans",sans-serif;
				padding-bottom: 3px;
			}
			header a:hover {border-bottom: 1px solid}
			header a.active {
				font-weight:bold;
				border-bottom: 2px solid;
				background:#FFF !important;
				}

/*HOME*/

.home_bg {
	background:url(../images/home_bg.jpg) 50%;
	background-size: cover;
	padding: 1px 0;
	/*margin: 0 0 90px;*/
	}
.welcome {
	position: relative;
    /*bottom: -50px;*/
    max-width: 550px;
    margin: 30px auto;
    padding: 30px 40px 40px;
    background: rgba(245,245,245, .9);
    border-radius: 1px;
    min-height: 600px;
	}

#home h1 {
	font: 300 3em "open-sans",sans-serif;
	margin-top:0;
	}
	#home h1:after {
		content:"";
		display:block;
		margin: .5em auto 0;
		height: 1px;
		max-width: 300px;
		background: #b8b4af;
	}

.addr, .mail, .phone {padding-top: 80px; margin-top:0}
.addr {background:url(../images/icon-address.png) no-repeat 50% 0}
.phone {background:url(../images/icon-phone.png) no-repeat 50% 0; margin: 0 40px}
.mail {background: url(../images/icon-email.png) no-repeat 50% 0}


footer {
	background:#252528;
	padding: 1.5em 0;
	color:#DDD;
	font-size: .9em;
	text-align:right;
	}
	footer a {
		color:#DDD; 
		text-decoration:none;
		}
		footer a:hover {color:#FFF}
	footer p:first-child > a {border-bottom:1px dotted}
	
	.social_ico {
		opacity: .8;
		-webkit-transition: all .1s;
		transition: all .1s;
		margin: 0 6px;
		}
		.social_ico:hover, .social_ico:focus {opacity: 1}

	
/*ABOUT*/

/*.about_page main {background: url("../images/about_bg2.jpg") 50% 50% / cover;}*/

.about_bg {
	background: url(../images/about_bg3.jpg) no-repeat right;
	background-size: cover;
	min-height: 479px;
	line-height: 479px;
	}
h1.int_ttl {
	display:inline-block;
	vertical-align:bottom;
	width:100%;
	text-align:center;
	background:rgba(255,255,255,.9);
	padding: .6em 0;
	font: 200 2.5em "open-sans",sans-serif;
	margin:0;
	border-bottom: 1px solid #acacac;
	}
	

/* MEDIA QUERIES
---------------------------------------------------------------------------------*/

@media only screen and (max-width: 540px) {
.addr, .mail, .phone {
	display:block;
	margin-bottom: 35px;
	}	
	footer { text-align:center !important}
	footer p:first-child {
		display:block;
		margin: 0 0 1.5em 0 !important;
		}
	
	}
@media only screen and (max-width: 480px) {
	
	#home .table.txt_center {margin: 20px}
	.home_bg {
	padding: 0;
	overflow:hidden;
	}
	.welcome {
	margin: 0;
	padding: 30px 5% 40px;
	}
	}

@-ms-viewport {width: device-width;} /*IE10*/


