/*
Site Name: DESIGNA studio
Version: 1.1 (Update: more semantic code)
Site URI: http://sylvainlafitte.com/dvlptest/designa/home.html
Description: A clean and simple HTML5/CSS3 template
Author: Sylvain Lafitte
Author URI: http://sylvainlafitte.com
*/

/* --- CUSTOM RESET --- */
/* using h5bp.com/css by HTML5 Boilerplate and Normalize.css by Nicolas Gallagher and Jonathan Neal */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block; overflow:hidden;}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background-color:#FFF }
body { margin: 0; font-size: 12px; line-height: 1.5; }
body, button, input, select, textarea { font-family: Arial, sans-serif; color: #666666; }
::-moz-selection { background: #37DAC1; color: #fff; text-shadow: none; }
::selection { background: #37DAC1; color: #fff; text-shadow: none; }	
/* LINKS */
a { color: #37DAC1; cursor: pointer; }
a:hover { color: #37DAC1; 
transition: color 0.2s linear;-moz-transition: color 0.2s linear;-webkit-transition: color 0.2s linear;-o-transition: color 0.2s linear;  } 
a:visited {
color: }
*:hover, *:focus, *:active { outline: 0; outline: none; }
/* TYPO */
abbr[title] { border-bottom: 1px dotted; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
p {margin:0 0 1em;}
pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
blockquote { margin: 0 20px 20px 0; padding: 5px 5px 5px 15px; border-left: 1px solid #DDD; font-style: italic; color: #999; }
b, strong, .strong { font-weight: bold; }
small, .small { font-size: 85%; }
address{font-style: normal;}
/* LIST */
dd { margin: 0 0 0 40px; }
ul, ol, menu { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* EMBEDDED CONTENT */
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
/* FORM */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; *overflow: visible; }
table button, table input { *overflow: auto; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* TABLE */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* --- END NORMALIZE --- */

/* ----
STYLES
Author: Sylvain Lafitte / www.sylvainlafitte.com
---- */
h1, h2, h3, h4, h5, h6 { margin: 0 0 1em }
h1 {
	font-size: 30px;
	letter-spacing: -0.075em;
	text-transform: uppercase;
	line-height: 115%;
	color: #555;
	margin: 0 0 30px;
	font-weight: normal;
}
h2 { font-size: 30px; margin: 0 0 20px; letter-spacing: -0.05em; color: #555; line-height: 1; }
h3 { font-size: 21px }
h4 { font-size: 18px }
h5 { font-size: 14px; text-transform: uppercase; margin: 0; color: #555; }
h6 { font-size: 12px; margin-bottom: 2px; }
body { width: 100%; min-width: 988px; overflow: hidden; }
.center {
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
	overflow: hidden;
	padding: 0 5px;
	width: 978px;
}
.column4 { width: 22.6993865%; overflow: hidden; float: left; display: block; height: 100%; }
.column3 {
	width: 31.2883436%;
	overflow: hidden;
	float: left;
	display: block;
	height: 100%;
}
.column2 { width: 48.4662577%; overflow: hidden; float: left; display: block; height: 100%; }
.columnthird { width: 74.2331288%; min-width: 726px; overflow: hidden; float: left; display: block; height: 100%;}
.mleft { margin-left: 3.06748466% }
.mright { margin-right: 3.06748466% }
.column4in { width: 30.5785124%; overflow: hidden; float: left; display: block; height: 100%; }
.column3in { width: 42.1487603%; overflow: hidden; float: left; display: block; height: 100%; }
.column2in { width: 65.2892562%; overflow: hidden; float: left; display: block; height: 100%; }
.mbottom { margin-bottom: 30px }
.mr { margin-right: 10px }
.mb { margin-bottom: 10px }
.fright, .fleft { display: block; overflow: hidden; }
.fright { float: right }
.fleft { float: left }
/* HEADER */
header#navtop { margin-bottom: 20px; background: url(../img/stripes.jpg) no-repeat 253px 0; }
.logo { margin: 20px 0 }
header nav { margin-top: 60px }
    header nav ul { float: left; overflow: hidden; padding: 0 30px 0 20px; border-left: 1px solid #ddd; line-height: 24px; }
nav a, menu a { text-decoration: none; color: #666; }
.navactive { color: #37DAC1 }
/**/
.part { margin-bottom: 80px }
.title { border-top: 1px solid #999; padding-top: 10px; color: #555; margin-bottom: 30px; }
/**/
.arrow { padding-right: 15px; background: url(../img/arrow.png) no-repeat right center; text-decoration: none; }
.arrow:hover { background: url(../img/arrowhover.png) no-repeat right center; color: #37DAC1; }
.more { color: #999; font-style: italic; }
/* SLIDER */
#slides { position: relative; z-index: 1; }
.slides_container { width: 474px; height: 290px; display: none; }
    .slides_container .slide { width: 474px; height: 290px; display: block; }
.slide figure { overflow: hidden; height: 100%; }
.slide img { max-width: 100%; height: auto; width: auto; display: block; }
.slide figcaption { position: absolute; background: white; height: auto; min-height: 45px; width: 190px; padding: 10px; top: 30px; right: 0; }
    .slide figcaption div { text-align: right; display: block; border-right: 1px solid #DDD; padding: 3px 20px 0 0; margin: auto 50px auto 0; }
        .slide figcaption div p { margin: 0 }
.prev { position: absolute; top: 55px; right: 35px; width: 20px; height: 10px; z-index: 10; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left; direction: ltr; background: url(../img/left.png) center no-repeat; }
.next { position: absolute; top: 55px; right: 5px; width: 20px; height: 10px; z-index: 10; display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left; direction: ltr; background: url(../img/arrow.png) center no-repeat; }
/*---------*/
.services { border-top: 1px solid #DDD; padding-top: 10px; }
    .services p { margin: 0 }
.number { color: #999 }
.sepmini { display: block; height: 1px; width: 10px; background: #DDD; margin: 10px 0; overflow: hidden; border: 0; }
/* FOOTER */
footer.part { padding-top: 20px; border-top: 1px solid #999; color: #555; margin-bottom: 80px; }
footer nav ul { float: right; overflow: hidden; }
footer a {text-decoration: none;color: #666;}
footer li { float: left; margin-right: 10px; padding-right: 10px; border-right: 1px solid #DDD; font-size: 11px; }
footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
.up .ir { display: block; background: url(../img/up.png) no-repeat center; width: 25px; height: 18px; text-align: center; margin: 0 auto; }
/*---------*/
.part ul{
	margin-bottom: 10px;}
.about .content img { max-width: 100%; width: auto; height: auto; }
.detail {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid #DDD;
	text-align: justify;
}
.servicess .detail:first-child { margin-top: 0 }
/* WORKS */
.work {
	width: 222px;
	overflow: hidden;
	float: left;
	display: block;
	height: 137;
	margin-right: 30px;
	border-top: 1px solid #DDD;
	padding-top: 10px;
}
    .work  { position: relative }
        .work > a { display: block; width: 222px; height: 137px; overflow: hidden; }
        .work img { max-width: 100%; height: auto; width: auto; }
    .work .zoom { display: block; position: absolute; top: 10px; left: 0; background: url(../img/zoom.png) no-repeat center; width: 222px; height: 137px; }
    .works figcaption, .work figcaption { margin-top: 10px; padding: 0 5px; white-space: nowrap; }
        .works figcaption a, .work figcaption a { margin: 0 0 2px; color: #555; font-weight: bold; }
        .works figcaption p, .work figcaption p { margin: 0; }
.main .work:last-child { margin-right: 0 }
.works .content .work:nth-child(3n) { margin-right: 0 }
.works .content .work { margin-bottom: 40px; position: relative; }
.works menu a { cursor: pointer }
.buttonactive { font-weight: bold; color: #777 }
/* Work SINGLE */
.singlework figure {margin-bottom: 30px;}
.singlework figure figcaption {
	 	 text-align: center}
.singlework img {
	 max-width: 100%; height: auto; width: auto; display: block; margin: 0 auto}

/*toggle*/
.toggle-view li { margin-bottom: 10px; position: relative; cursor: pointer; overflow: hidden; }
.toggle { padding: 7px 8px 7px 30px; margin: 0; border: 1px solid #ddd; text-shadow: 0 1px 0 #fff; background: #F3F3F3; background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); }
.toggle:hover { border-color: #BBB }
.tactive { color: #333; border-color: #CCC; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.t { display: none; padding: 10px; }
/*tabs*/
.tab_wrap { width: 306px }
.tabs { float: left; height: 30px; }
    .tabs li { float: left; margin: 0 5px 0 0; padding: 0; line-height: 30px; overflow: hidden; position: relative; background: #EAEAEA; }
        .tabs li a { text-decoration: none; color: #666; display: block; padding: 0 20px; }
        .tabs li a:hover { background: #FFF }
    .tabs li.active { background: #f5F5F5 }
.tab_container { overflow: hidden; clear: both; float: left; width: 100%; }
.tab_content { padding: 10px }
#tab2, #tab3 { display: none }
/*---------*/
.warning { display: block; line-height: 30px; background: #F3F3F3; border: 1px solid #DDD; text-align: center; padding: 10px; margin: 20px 5px; }
/* FORM */
form { margin-top: 30px }
    form label, .contact_ie9 label { display: block; margin-bottom: 10px; font-weight: bold; }
    form ul li, .contact_ie9 li { margin-bottom: 30px }
    form input, form textarea, .contact_ie9 input, .contact_ie9 textarea { width: 60%; height: 25px; line-height: 25px; padding: 5px; border: 1px solid #DDD; color: #999; }
    form input, .contact_ie9 input { padding-right: 20px }
    form textarea, .contact_ie9 textarea { height: 200px; width: 97%; }
    form button#submit, .contact_ie9 #submit { line-height: 18px }
/*html5/css3*/
input:required:valid { background: url(../img/valid.png) no-repeat 98% center }
input:invalid, textarea:invalid { }
input:focus, textarea:focus { outline: none; border: 1px solid #BBB; }
/* validate.js */
label.error { color: #D84A38; margin: 10px 0 0 5px; font-weight: normal; font-style: italic; }
.map { width: 222px; height: auto; overflow: hidden; }
    .map img { max-width: 100%; height: auto; width: auto; }
/*BUTTONS*/
.button { color: #666; font-weight: bold; text-decoration: none; line-height: 30px; padding: 7px 12px; margin: 0 5px 5px 0; text-shadow: 0 1px 0 #fff; border: solid 1px #dcdcdc; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset; background: #F3F3F3; /* Old browsers */ background: -moz-linear-gradient(top, #f6f6f6 0%, #efefef 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(100%,#efefef)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* IE10+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */ background: linear-gradient(top, #f6f6f6 0%,#efefef 100%); /* W3C */ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; }
.button:focus { color: #333; border-color: #BBB; }
.button:hover { color: #333; border-color: #BBB; -moz-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset,0 2px 0 rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset,0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 1px rgba(255, 255, 255, 0.95) inset, 0 1px 2px rgba(0, 0, 0, 0.2); }
.button:active { color: #000; background: #F5F5F5; border-color: #444; }

/* --- END STYLE --- */
/* ---------------------------------------- */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

/* Media Query & Print styles!
-------------------------------------------------------------------------------*/
/* Style adjustments for viewports 768px and over go here */
@media only screen and (max-width: 768px) { 
    body { min-width: 760px; font-size: 0.7em; }
    .center { width: 750px }
    h1 { font-size: 38px }
    h2 { font-size: 24px }
    h3 { font-size: 18px }
    h4 { font-size: 14px }
    h5 { font-size: 12px }
    h6 { font-size: 11px }
    .slides_container { width: 363px; height: 225px; }
    .slides_container .slide { width: 363px; height: 225px; }
    .work { width: 170px; margin-right: 23px; }
    .work > a { width: 170px; height: 105px; }
    .work .zoom { width: 170px; height: 105px; }
    .columnthird { min-width: 556px; }
    .map { width: 170px }
    footer li { margin-right: 5px; padding-right: 5px; font-size: 10px; }
    footer li:last-child { margin-right: 0; padding-right: 0; border-right: none; }
}
/* --- Smartphones and small Tablet PCs --- */
@media screen and (max-width:620px) { 
    body { min-width: 610px; font-size: 12px; }
    .center { width: 600px }
    .column2 { width: 100% }
    .columnthird { width: 100% }
    header nav ul:last-child { padding-right: 10px }
    #slides { margin-top: 40px }
    .slides_container { width: 600px; height: 370px; }
    .slides_container .slide { width: 600px; height: 370px; }
    .main .work, .works .work { width: 285px; margin-right: 0; }
    .main .work { margin-right: 0!important }
    .work > a { width: 285px; height: 175px; }
    .work .zoom { width: 285px; height: 175px; }
    aside.column4 { float: none; width: 100%; }
    aside menu { display: none }
    .works .work:nth-child(odd) { margin-right: 30px!important }
    .main .work:nth-child(even) { margin-right: 30px!important }
    .contact .content { border-top: 1px solid #DDD; padding-top: 20px; } 
    .map { display: none }
    footer li { border-right: none; line-height: 2; float: none; margin: 1px; padding: 1px; }
    footer nav li { text-align: right }
    footer li:last-child { margin-right: inherit; padding-right: inherit; }
}
/* target the iPhone4 retina display */
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { 
    body { min-width: 480px; font-size: 12px; }
    .center { width: 470px }
    .columnthird { width: 100% }
    header#navtop { background-position: 23px 0 }
    header nav ul:last-child { padding-right: 0 }
    #slides { margin-top: 40px }
    .slides_container { width: 470px; /**/height: 290px; }
    .slides_container .slide { width: 470px; /**/height: 290px; }
    .main .work, .works .work { width: 220px; margin-right: 0; }
    .main .work { margin-right: 0!important }
    .work > a { width: 220px; height: 130px; }
    .work .zoom { width: 220px; height: 130px; }
    .column3in { width: 50% }
    .column4in { width: 40% }
    .column2in { width: 56% }
}
/* Style adjustments for viewports 480px and over go here */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { 
    body { min-width: 480px; font-size: 12px; }
    .center { width: 470px }
    .columnthird { width: 100% }
    header#navtop { background-position: 23px 0 }
    header nav ul:last-child { padding-right: 0 }
    #slides { margin-top: 40px }
    .slides_container { width: 470px; /**/height: 290px; }
    .slides_container .slide { width: 470px; /**/height: 290px; }
    .main .work, .works .work { width: 220px; margin-right: 0; }
    .main .work { margin-right: 0!important }
    .work > a { width: 220px; height: 130px; }
    .work .zoom { width: 220px; height: 130px; }
    .column3in { width: 50% }
    .column4in { width: 40% }
    .column2in { width: 56% }
}
@media print { 
    * { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
    pre, blockquote { page-break-inside: avoid }
    thead { display: table-header-group }
    tr, img { page-break-inside: avoid }
    img { max-width: 100% !important }
    p, h2, h3 { orphans: 3; widows: 3; }
    h2, h3 { page-break-after: avoid }
}