/* ==========================================================================
Fonts
========================================================================== */
/* for about text */
@import url("//hello.myfonts.net/count/2de59a");
@font-face {font-family: 'FuturaBT-Light';src: url('../fonts/webfonts/2DE59A_0_0.eot');src: url('../fonts/webfonts/2DE59A_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2DE59A_0_0.woff2') format('woff2'),url('../fonts/webfonts/2DE59A_0_0.woff') format('woff'),url('../fonts/webfonts/2DE59A_0_0.ttf') format('truetype'),url('../fonts/webfonts/2DE59A_0_0.svg#wf') format('svg');}
@font-face {font-family: 'FuturaBT-Book';src: url('../fonts/webfonts/2DE59A_1_0.eot');src: url('../fonts/webfonts/2DE59A_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2DE59A_1_0.woff2') format('woff2'),url('../fonts/webfonts/2DE59A_1_0.woff') format('woff'),url('../fonts/webfonts/2DE59A_1_0.ttf') format('truetype'),url('../fonts/webfonts/2DE59A_1_0.svg#wf') format('svg');}
 /*for Logo text and other large headings */
@import url("//hello.myfonts.net/count/2e0378");
@font-face {font-family: 'MontrealTS-XLight';src: url('../fonts/webfonts/2E0378_0_0.eot');src: url('../fonts/webfonts/2E0378_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/2E0378_0_0.woff2') format('woff2'),url('../fonts/webfonts/2E0378_0_0.woff') format('woff'),url('../fonts/webfonts/2E0378_0_0.ttf') format('truetype');}
/* ==========================================================================
Eric Meyer's Reset
========================================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video 
{margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;}
body {line-height: 1;} 
ol, ul {list-style: none;} 
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;}
table {border-collapse: collapse; border-spacing: 0;}
/* ==========================================================================
HTML tags
========================================================================== */
* {margin:0; padding:0;}
body {font-family: 'MontrealTS-XLight'; font-weight: normal; font-style: normal; margin: 0; padding: 0; } li { list-style:none;}
a {text-decoration:none; color: black;}
strong {font-family: 'FuturaBT-Book';} 
/* ==========================================================================
structure
========================================================================== */
.wrapper {width: 100%;}
.header {margin: 0.28em 0 0 0;}
.main {background: #333; padding: 0 0 0 16.2em; overflow: hidden; margin: -0.3em 0 0 0;}
/* ==========================================================================
Logo and subtext 
========================================================================== */
.name {font-size: 3em; line-height: 0.74em; text-transform: uppercase; color:#333;} 
.functions {font-size: 5em; text-transform: uppercase; color:#666; line-height: 0.73em; padding: 0.11em 0 0 0; margin-top: -0.02em;}
/* ==========================================================================
Nav
========================================================================== */
.navigation {padding: 0 0 0 16.45em; margin: 1em 0 0 0;} 
.nav {line-height: 1.3em; font-size: 1.3em}
.nav a {color:black;}
.info a {color:#aa252a;}
.white {color: white; margin: 0 0 -0.1em 0;}
/* ==========================================================================
Footer
========================================================================== */
footer {font-size: 1em; color: #ccc; padding: 0 0 0 16.2em; margin: 2em 0 0 0;}
/* ==========================================================================
FancyBox 
========================================================================== */
#overlay1, #overlay2, #overlay3, #overlay4, #overlay5, #overlay6, #overlay7, #overlay8, #overlay9, #overlay10, #overlay11, #overlay12 
{display:none;} 
.fancybox-skin {
	-webkit-border-radius: 0px !important; 
	-moz-border-radius: 0px !important; 
	border-radius: 0px !important;
}
/* ==========================================================================
Portfolio
========================================================================== */
.section-project {margin: 3em 0 1em 0; font-size: 140%;}
.section-project h2 {color:#aa252a;}
.portfolio {width: 80%; max-width: 960px; margin: 0 10%;}
.portfolio img {
	-webkit-box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25); 
	-moz-box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25); 
	box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25); 
	margin: 10px 0; /*Margins between the images in portfolio*/ 
	width: 100%; 
	height: auto;
}
.vertical {width:50%; max-width:480px; height:auto;}
.video-wrapper {
	width: 80%;
	max-width: 960px;
	margin: 0 10% 1em 10%;
}
.video-wrapper iframe {
	-webkit-box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25);
	margin: 10px 0; /*Margins between the images in portfolio*/
	width: 100%;
	height: 100%;
	max-height: 540px;
	/* [disabled]min-height: 540px; */
}
.flip-wrapper {
	width: 80%;
	max-width: 960px;
	margin: 0 10% 1em 10%;
}
.flip-wrapper iframe {
	-webkit-box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25);
	-moz-box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25);
	box-shadow: 6px 6px 5px 0px rgba(50, 50, 50, 0.25);
	margin: 10px 0; /*Margins between the images in portfolio*/
	width: 100%;
	height: 100%;
	max-height: 540px;
	/* [disabled]min-height: 260px; */
}


/* ==========================================================================
Credits portfolio images
========================================================================== */
.fancybox-title-inside-wrap {margin: 1.2em 0 0 2em; }
.fancybox-title h1, .fancybox-title h2 { display: inline; font-family: 'MontrealTS-XLight'; }
.fancybox-title h1 {text-transform: uppercase; font-size: 2em;}
.fancybox-title h2 {/*client name*/color:#aa252a;/*red*/font-size: 2.5em;}
/* ==========================================================================
Fancybox text
========================================================================== */
.text-wrapper {width: 60%; max-width: 600px; font-family: 'FuturaBT-Light'; margin: 5% 20%;}
.text-wrapper h1 {font-size: 3em; margin: 0 0 0.2em 0;}
.text-wrapper h2 {font-size: 1.5em; line-height: 1.5em;}
.text-wrapper p {font-size: 1em; margin: 0 0 1em; line-height: 1.5em; width: 100%;}
.text-wrapper img {width: 100%; height: auto; margin: 0 0 1em 0}
/* about text */
.smaller {font-size: 95% !important;} 
.gray {color: #666;}
.gray strong {color: #333;}
/* ==========================================================================
Media Queries
========================================================================== */
@media only screen and (max-width: 900px){
.main {padding-left: 0;}
.functions {margin-left: 20%;} 
.navigation {padding-left: 0; margin-left: 20%;}
.footer {padding-left: 0; margin-left: 20%;}
}
@media only screen and (max-width: 550px){
html {font-size: 80%;}
.main {font-size: 55%; margin-top: -0.5em;}
footer {font-size: 90%; margin: 2em 1em 02em 0; line-height: 1.4em;}
.text-wrapper {margin:0;padding:0;width: 100%;}
.fancybox-skin { margin:0; padding:0;}
.fancybox-title {margin:0;padding:0;}
.fancybox-title-inside-wrap {margin: 0 0 0 0;padding: 10px 0 0 0;}
.fancybox-title h1, .fancybox-title h2 { font-size: 120%; margin: 0;padding:0;line-height:0;}
.portfolio {margin:0;width:100%;}
.portfolio img {margin: 5px 0 0 0;}
.video-wrapper {
	/* [disabled]margin:5px 0 0 0; */
	width: 100%;
}
.flip-wrapper {
	/* [disabled]margin:5px 0 0 0; */
	/* [disabled]width: 100%; */
}
}
/* ==========================================================================
Print
========================================================================== */