/* -------------------------------------------------------------
- Site Name: DESIGNA Studio
- Version: 2.01 (August 2012)
- Site URI: http://sylvainlafitte.com/designa/
- Author: Sylvain Lafitte
- Author URI: http://sylvainlafitte.com

- Resources:
	HTML5 Boilerplate (http://html5boilerplate.com/),
	Normalise.css (http://necolas.github.com/normalize.css/),
	Proportional grids by Boon (http://builtbyboon.com),
	CSS Tricks (css-tricks.com).
------------------------------------------------------------- */


/* -------------------------------------------------------------
======	RESET
------------------------------------------------------------- */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block}
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
:hover, :focus, :active { outline: none; }
body { margin: 0; position: relative;}
figure{margin:0}

/* -- GRID  https://github.com/mattberridge/Proportional-Grids/
------------------------------------------------------------- */
body{width:100%;}

.grid-wrap {margin-left: 0; /* the same as your gutter */ overflow: hidden; *zoom:0;}
.grid-wrap:before, .grid-wrap:after{content:""; display:table}
.grid-wrap:after{clear:both}

.grid0 {float:left; padding-right:0; padding-left:0; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *behavior: url(/js/boxsizing.htc);}
.grid {float:left; padding-right:3px; padding-left:3px; width:100%; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; *behavior: url(/js/boxsizing.htc);}

.half-gutter {margin-left: 0; }
.half-gutter .grid-col {padding-left: 0; }

.col-full {width: 100%;}
.col-one-half {width: 50%;}
.col-one-third {width: 33.333%;}
.col-two-thirds {width: 66.666%;}
.col-one-quarter {width: 25%;}
.col-two-quarters {width: 50%;}
.col-three-quarters {width: 75%;}
.col-one-ten {width: 10%;}
.col-two-ten {width: 20%;}
.col-three-ten {width: 30%;}
.col-four-ten {width: 40%;}
.col-five-ten {width: 50%;}
.col-six-ten {width: 60%;}
.col-seven-ten {width: 70%;}
.col-eight-ten {width: 80%;}
.col-nine-ten {width: 90%;}
.alignleft{float:left; clear:left; margin:0;}
.alignright {float:right; clear:right; margin:0;}
.aligncenter {margin:0 auto; display:block;}

/* -- MISC
------------------------------------------------------------- */
figure { max-height: 100%; overflow: hidden;}
img { max-width: 100%; height: auto; width: auto; }

/* -------------------------------------------------------------
======	IE Fix
------------------------------------------------------------- */
.lt-ie9 .works figure a, .lt-ie9 .works figure a img { filter:inherit}
/* jquery filter opacity issue IE8 */

.lt-ie9 .container {min-width: 780px;}
.lt-ie8 .container {width: 960px;}
.lt-ie8 .grid-wrap {margin-left: 0; }
.lt-ie8 .grid {padding: 0;margin-left: 5%; }
.lt-ie8 .grid:first-child {margin-left: 0; }

.lt-ie8 .col-full {width: 99.95%; }
.lt-ie8 .col-full + .grid {margin-left: 0; }
.lt-ie8 .col-one-half {width: 47.45%; }
.lt-ie8 .col-one-third {width: 29.55%; }
.lt-ie8 .col-two-thirds {width: 64.95%; }
.lt-ie8 .col-one-quarter {width: 19.95%; }
.lt-ie8 .col-three-quarters {width: 74.95%; }

/* -- Media query 1 (mq1)
------------------------------------------------------------- */
@media only screen and (max-width: 900px) { /* 13 / 780 */
	.mq1-col-full {width: 100%; }
	.mq1-col-one-half {width: 50%; }
	.mq1-col-one-third {width: 33.333%; }
	.mq1-col-two-thirds {width: 66.666%; }
	.mq1-col-one-quarter {width: 25%; }
	.mq1-col-two-quarters { width: 50%; }
	.mq1-col-three-quarters {width: 75%; }
}

/* -- PRINT STYLES
------------------------------------------------------------- */
@media print{
	*{background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important}
	tr, img{page-break-inside:avoid}
	img{max-width:100% !important}
}

/* -- Style
------------------------------------------------------------- */
.container {width:100%; margin:0 auto; height:100%; background:#fff;}
html, body, input, select, textarea {font-family:'Inter', sans-serif; height:100%; color:#000; line-height:1.3; font-size:12.5px; letter-spacing:0px; font-weight:500; antialiased:-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
a {color:#000; text-decoration:none; transition:all 0.2s;}

/* -- Index
------------------------------------------------------------- */
.header {margin:0 auto; width:98%; padding:20px 0 100px 0;}
.header li {list-style-type:none;}
.text_header {font-size:72px; font-weight:700; letter-spacing:-2.5px; line-height:1.2; font-family:"Funnel Display", sans-serif; font-optical-sizing:auto;}
.testimonial {padding-right:40px;}

.project {margin:0 auto; width:98%; padding:20px 0;}
.project li {list-style-type:none;}
.alignright {text-align: right;}

.img {margin-bottom:5px;}
.project_name {font-weight:normal; text-spacing:2px; line-height:1.8; font-size:15px;}

.contact {margin:0 auto; width:98%; padding:160px 0 40px 0;}
.contact li {list-style-type:none;}

/* -- Modal
------------------------------------------------------------- */
.modal {opacity:0; visibility:hidden; overflow:scroll; position:fixed; top:0; bottom:0; right:0; left:30%; padding:40px; transition:opacity .25s ease; z-index:9; background:#336666; color:#fff;}
.modal_bg {position:absolute; top:0; right:0; bottom:0; left:0; cursor:pointer;}
.modal-state {display:none;}
.modal-state:checked + .modal {opacity:1; visibility:visible;}
.modal-state:checked + .modal .modal__inner {top:0;}
.modal_close {position:absolute; top:15px; right:15px; cursor:pointer; z-index:9; line-height:1; text-decoration:underline; color:#fff;}
.btn {text-decoration:underline;}
.btn:hover {cursor:pointer;}

@media (max-width: 900px) {
.header {padding:20px 0;}
.text_header {font-family:'Inter', sans-serif; line-height:1.3; font-size:12.5px; letter-spacing:0px; font-weight:500;}
.project {margin:0 auto; width:98%; padding:0;}
.img {padding-top:30px;}
.contact {padding:40px 0;}
.modal {padding:20px 20px; left:0; overflow:scroll;}
.modal_close {position:fixed;}
.words {display:none;}