/*
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 */

@font-face{
        font-family: Museo Sans;
        src: url('MuseoSans-300.otf');

}
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%;
}
body
{
	margin: 0;
	font-size: 15.5px;
	line-height: 1.6;
}
body, button, input, select, textarea {font-family: Museo Sans; color: #333;}
::-moz-selection { background: #37DAC1; color: #fff; text-shadow: none; }
::selection { background: #37DAC1; color: #fff; text-shadow: none; }

/* LINKS */
a { color: #0078CF; font-weight: normal;
	cursor: pointer;  text-decoration: none;
	transition:color 0.2s ease; -moz-transition:color 0.2s ease; -webkit-transition:color 0.2s ease; -o-transition:color 0.2s ease;}
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;}
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: #6F6C6C;
}
b, strong, .strong { font-weight: 2000; }
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;
    margin-bottom: 2em;
}

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: 4.1em;
	letter-spacing: -0.075em;
	text-transform: uppercase;
	line-height: 0.9;
	color: #555;
	margin: 0 0 30px;
	font-weight: normal;
}
h2
{
	font-size: 30px;
	margin: 0 0 20px;
	letter-spacing: -0.0075em;
	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; }
.tg  {border-collapse:collapse;border-spacing:0;width:100%}
.tg td{font-size:14px;padding:2px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-size:14px;font-weight:normal;padding:5px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-e3zv{font-weight:bold}
.homeimage
{
	width: 35%;
	height: 40%;
}
.center
{
	margin-left: auto;
	margin-right: auto;
	display: block;
	clear: both;
	overflow: hidden;
	padding: 0 5px;
	width: 90%;
}
.column4
{
	width: 22.6993865%;
	overflow: hidden;
	float: left;
	display: block;
	/*height: 100%;				<<<<<< BUG */
}
.column3
{
	width: 31.2883436%;
	overflow: hidden;
	float: left;
	display: block;
	height: 100%;
}
.column2
{
	width: 48.4662577%;
	overflow: hidden;
	float: left;
	display: block;
	height: 100%;
}
.columnlogo
{
	width: 74.2331288%;
	min-width: 726px;
	overflow: hidden;
	float: left;
}
.columnthird
{
	width: 74.2331288%;
	min-width: 726px;
	overflow: hidden;
	float: left;
	display: block;
	/*height: 100%;             <<<<< BUG */
}
.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: 50px; background: url(../img/stripes.png) no-repeat 253px 0;*/ }
.logo { margin: 50px 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: #6F6C6C; }
.navactive { color: #37DAC1 }
/**/
.part { margin-bottom: 40px }
.title
{
	border-top: 1px solid #ddd;
	padding-top: 10px;
	color: #000000;
	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: #000000; 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: #6F6C6C; }
.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 #ddd;
	color: #555;
	margin-bottom: 30px;
}
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: 12px;
}
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;
}

div.syntax{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 20px;
margin-right: 10px;
margin-bottom: 20px;
margin-top: 20px;
background-color: #e7e7e7;
width:100%;
border-radius: 3px;
-moz-border-radius: 3px;
font-family: "Courier New", "sans serif";
text-align: left;
}

pre{
display: block;
padding: 9.5px;
margin: 0px 0px 10px;
line-height: 1.42857;
color: #333;
background-color: #F5F5F5;
border: 1px solid #CCC;
border-radius: 4px;
}

/*---------*/
.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; }
.servicess .detail:first-child { margin-top: 0 }

/* WORKS */
.work { width: 222px; overflow: hidden; float: left; display: block; height: 100%; 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: #6F6C6C; }
    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; }
    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 }
}