/* ==========================================================================
   Custom styles
	background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
   ========================================================================== */
html {
  font: normal 15px / 1.333em 'Open Sans', Arial, sans-serif;
  letter-spacing: 0.5px;
  overflow-y: scroll;
  color: #000;
  height: 100%;
}
html.invert	{ color: #fff; }
body	{ height: 100%; }


/* ==========================================================================
   Themes
========================================================================== */
/*
*/
body,
footer,
header,
.t-default body,
.t-default footer,
.t-default header,
.t-grey body,
.t-grey footer 	{ background: #e0e0e2; }
.t-grey header { background: #e9e9eb; }

.t-light-blue header { background: #daf0f1; }
.t-light-blue body,
.t-light-blue footer { background: #cae9eb; }

.t-blue header { background: #bee5e6; }
.t-blue body,
.t-blue footer { background: #a2dadb; }

.t-apricot header 	{ background: #fde7dd; }
.t-apricot body		{ background: #fcdccf; }
.t-apricot footer 	{ background: #fcdccf; }


.t-dark-apricot header 	{ background: #f7cfc6; }
.t-dark-apricot body		{ background: #f3bbae; }
.t-dark-apricot footer 	{ background: #f3bbae; }

.t-dark-blue header 	{ background: #d5dadc; }
.t-dark-blue body		{ background: #c3cbcd; }
.t-dark-blue footer 	{ background: #c3cbcd; }

.cs-footer,
.t-default .cs-footer,
.t-grey .cs-footer	{ background: #a2dadb; }



.t-default .cs-main,
.t-grey .cs-main	{ background: #efeff0; }


body.CaseStudyPage,
.CaseStudyPage footer	{ background: #e0e0e2 !important; }
.CaseStudyPage .cs-main	{ background: #efeff0 !important; }
.t-dark-apricot .cs-footer	{ background: #f3bbae; }
.t-dark-blue .cs-footer	{ background: #c3cbcd; }
.t-light-blue .cs-footer { background: #cae9eb; }


#background	{ position: fixed; top:0; left: 0; height: 100px; width: 100%; z-index: 97; display: none; }
.HomePage #background,
.CaseStudyPage #background	{ display: block; }

#background	.header	{ position: absolute; top: 0; height: 100px; width: 100%;}
#background	.main	{}
#background	.footer	{ position: absolute; bottom: 0; height: 100px; width: 100%; }

#background	.header,
.CaseStudyPage #background	.header { background: #e0e0e2; }


.t-blue .HomePage #background	.header { background: #daf0f1; }

.t-blue .HomePage body	{ background: #daf0f1; }
.t-blue .HomePage section,
.t-blue .HomePage footer	{ background: #cae9eb; }

.t-blue .HomePage .project-hero section { background: #e0e0e2; }

.t-light-blue  .AboutPage .project-hero section { background: #cae9eb; }
.t-light-blue  .AboutPage #secondary { background: #efeff0; }

.HomePage header,
.CaseStudyPage  header	{ background: none; }



/* ==========================================================================
   Font imports
========================================================================== */
@font-face {
    font-family: 'caviar_dreamsregular';
    src: url('../fonts/caviardreams/CaviarDreams-webfont.eot');
    src: url('../fonts/caviardreams/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caviardreams/CaviarDreams-webfont.woff') format('woff'),
         url('../fonts/caviardreams/CaviarDreams-webfont.ttf') format('truetype'),
         url('../fonts/caviardreams/CaviarDreams-webfont.svg#caviar_dreamsregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviar_dreamsbold';
    src: url('../fonts/caviardreams/CaviarDreams_Bold-webfont.eot');
    src: url('../fonts/caviardreams/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caviardreams/CaviarDreams_Bold-webfont.woff') format('woff'),
         url('../fonts/caviardreams/CaviarDreams_Bold-webfont.ttf') format('truetype'),
         url('../fonts/caviardreams/CaviarDreams_Bold-webfont.svg#caviar_dreamsbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviar_dreamsbold_italic';
    src: url('../fonts/caviardreams/CaviarDreams_BoldItalic-webfont.eot');
    src: url('../fonts/caviardreams/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caviardreams/CaviarDreams_BoldItalic-webfont.woff') format('woff'),
         url('../fonts/caviardreams/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
         url('../fonts/caviardreams/CaviarDreams_BoldItalic-webfont.svg#caviar_dreamsbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'caviar_dreamsitalic';
    src: url('../fonts/caviardreams/CaviarDreams_Italic-webfont.eot');
    src: url('../fonts/caviardreams/CaviarDreams_Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/caviardreams/CaviarDreams_Italic-webfont.woff') format('woff'),
         url('../fonts/caviardreams/CaviarDreams_Italic-webfont.ttf') format('truetype'),
         url('../fonts/caviardreams/CaviarDreams_Italic-webfont.svg#caviar_dreamsitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* Fontello */

@font-face {
  font-family: 'fontello';
  src: url('../fonts/fontello/font/fontello.eot?11405355');
  src: url('../fonts/fontello/font/fontello.eot?11405355#iefix') format('embedded-opentype'),
       url('../fonts/fontello/font/fontello.woff2?11405355') format('woff2'),
       url('../fonts/fontello/font/fontello.woff?11405355') format('woff'),
       url('../fonts/fontello/font/fontello.ttf?11405355') format('truetype'),
       url('../fonts/fontello/font/fontello.svg?11405355#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'fontello';
    src: url('../font/fontello.svg?35738802#fontello') format('svg');
  }
}
*/
 
[class^="icon-"]:before, [class*=" icon-"]:before { font-family: "fontello"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
 
.icon-down-open-big:before { content: '\e800'; } /* '' */
.icon-left-open-big:before { content: '\e801'; } /* '' */
.icon-right-open-big:before { content: '\e802'; } /* '' */
.icon-up-open-big:before { content: '\e803'; } /* '' */
.icon-login:before { content: '\e804'; } /* '' */
.icon-facebook:before { content: '\f09a'; } /* '' */
.icon-linkedin:before { content: '\f0e1'; } /* '' */
.icon-instagram:before { content: '\f16d'; } /* '' */
.icon-facebook-official:before { content: '\f230'; } /* '' */
.icon-facebook-squared:before { content: '\f308'; } /* '' */

/* ==========================================================================
   Content Styles
========================================================================== */

.content	{text-align: center;}

a:link, a:visited, a:focus{ color: inherit; text-decoration: none; }
a:hover{ color: inherit; text-decoration: none; color: rgba(0,0,0,0.5); }
a:active{ color: inherit; text-decoration: none; }



h1 { font-size: 2em; line-height: 1.227em; letter-spacing: 0.1em; padding-bottom: 0.273em;  margin: 0 0 0.5em 0; font-family: 'caviar_dreamsbold', Arial, sans-serif; 
	display: inline-block; 
	color: #fff;
	background: url('../images/bg-dot-white.png') repeat-x bottom left; 
}

.CaseStudyPage main h1	{ color: #000; background-image: url('../images/bg-dot-black.png'); }
.leadin	{   font: normal 1.2em / 1.333em 'caviar_dreamsregular', Arial, sans-serif;    }


@media (min-width: 768px) {
	h1 { font-size: 2.8em; }
	.leadin	{ font-size: 1.6em; }

}



/* ==========================================================================
   Layout
========================================================================== */

header	{ padding: 30px 0 15px 0; position: fixed; width: 100%; z-index: 100; }

#logo a	{display:block; width: 119px; height: 56px; 
	background: url('../images/logo-black.png') no-repeat left center;
 	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;

}
.svg #logo a	{ background-image: url('../images/logo-black.svg'), linear-gradient(transparent, transparent); }

#logo a span	{ display:block; text-indent: -10000px; }

.invert	#logo a,
.invert-header	#logo a  { background-image: url('../images/logo-white.png'); }

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	#logo a 		{ background-image: url('../images/logo-black-hires.png'); 
 	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;}
	.svg #logo a	{ background-image: url('../images/logo-black.svg'), linear-gradient(transparent, transparent);  }
	
	.invert	#logo a,
	.invert-header	#logo a  { background-image: url('../images/logo-white-hires.png'); }
	
	.svg.invert #logo a,
	.svg.invert-header #logo a  { background-image: url('../images/logo-white.svg'), linear-gradient(transparent, transparent); }
	
}

.svgclippaths 	{}


.invert,
.invert-header header a,
.invert header a,
.invert footer a 	{ color: #fff; }
main,
section	{ position: relative; z-index: 80; }
footer,
.footer	{ position: fixed; bottom: 0; box-sizing: border-box; height: 65px; overflow: hidden; text-align: center; width: 100%; z-index: 90; }

	footer:before,
	.footer:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -.35em;
	}            
	
	.f-wrapper {
		vertical-align: middle;
		display: inline-block;
		margin: 0 auto;
		min-width: 100%;
	}
.m-init footer .nav-main,
.m-hide footer .nav-main,
.menu-toggle	{ display: none; }
.down-button	{ display: inline-block; }

.p-menu-toggle,
.menu-toggle,
.moreinfo	{ font-size: 18px; }

.f-hide #footer	{ display:none;}


@-webkit-keyframes wiggle {
    5% {-webkit-transform:rotate(-8deg);}
    10% {-webkit-transform:rotate(8deg);}
    15% {-webkit-transform:rotate(-8deg);}
    20% {-webkit-transform:rotate(8deg);}
    25% {-webkit-transform:rotate(0deg);}
    100% {-webkit-transform:rotate(0deg);}
}

@-moz-keyframes wiggle {
    5% {-moz-transform:rotate(-8deg);}
    10% {-moz-transform:rotate(8deg);}
    15% {-moz-transform:rotate(-8deg);}
    20% {-moz-transform:rotate(8deg);}
    25% {-moz-transform:rotate(0deg);}
    100% {-moz-transform:rotate(0deg);}
}

@keyframes wiggle {
    5% {transform:rotate(-8deg);}
    10% {transform:rotate(8deg);}
    15% {transform:rotate(-8deg);}
    20% {transform:rotate(8deg);}
    25% {transform:rotate(0deg);}
    100% {transform:rotate(0deg);}
}

.csstransforms  .menu-wiggle .menu-toggle {
    -webkit-animation: wiggle 4s infinite;
    -moz-animation: wiggle 4s infinite;
    -o-animation: wiggle 4s infinite;	
	animation: wiggle 4s infinite;
}


/*
.csstransforms  .p-menu-toggle:hover,
.csstransforms  .menu-toggle:hover	{ 

    -ms-transform: scale(1.2, 1.2); 
    -webkit-transform: scale(1.2, 1.2); 
    transform: scale(1.2, 1.2);

font-size: 36px;
 }*/
 
.p-menu-toggle,
.m-init .menu-toggle,
.m-hide .menu-toggle,
.moreinfo	{  display: inline-block; }

#social	{ text-align: right; font-size: 1.733em; line-height: 1.7em; }
#social span { display: none; }
#social a	{ padding-left: 10px; }



.content	{ max-width: 750px; margin: 0 auto; }
.content p	{ text-align: justify; -moz-text-align-last: center; text-align-last: center;}
.content p.leadin { text-align: center; }

	main,
	section.main {
		min-height: 100%;
		text-align: center;
	}

	.cssscalc main,
	.cssscalc section.main	{
		height: -webkit-calc(100% - 200px);
		height: -moz-calc(100% - 200px);
		height: calc(100% - 200px);
		
	}
	
	main:before,
	section.main:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -.35em;
	}            
	
	.wrapper {
		vertical-align: middle;
		display: inline-block;
		margin: 0 auto;
		width: 100%;
		padding: 100px 0 65px 0;
	}

.CaseStudyPage main .wrapper	{ padding-bottom: 25px; }
	
	
main,
section.main {
	height: 100%;
}
.CaseStudyPage main,
.CaseStudyPage section.main {
	height: auto;
	min-height: 100%;
}

.CaseStudyPage .wrapper	{ padding: 130px 0 65px 0; }
.ProjectPage .wrapper	{ vertical-align: top; padding-top: 130px; }
 
.AboutPage main {
		height: auto;
		min-height: 0;
	}

@media (max-width: 768px) {
	.AboutPage { height: auto; }
	
	.AboutPage section.main {
		height: auto;
		min-height: 100%;
	}

}


@media  (min-height: 768px) and (min-width: 768px) {	
	main,
	section.main {
		height: 100%;
	}
	.CaseStudyPage main,
	.CaseStudyPage section.main {
		height: 100%;
	}
	.CaseStudyPage .wrapper	{ padding: 100px 0 65px 0; }
	
}



.video-background { background: #000; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -99; }
.video-foreground,
.video-background iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }

@media (min-aspect-ratio: 16/9) {
  .video-foreground { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  .video-foreground { width: 300%; left: -100%; }
}

#feature-image	{ position:absolute; top:0; left: 0; right: 0; bottom: 0; }
#feature-image img	{ width: 100%; height: auto; }

#h-wrapper	{ position: relative; }

#projects a { opacity: 0.75; transition-property: all; transition-duration: 0.5s; display: block; position: relative;  }
#projects a:hover { opacity: 1; }
#projects a span	{ display: none; }



.project-hero-lowres,
.project-hero	{ height: 100%; width: 100%; display: block; position: relative; background-color: #e0e0e2; background-repeat: no-repeat; background-position: center center; background-size: cover; z-index: 99;  text-align: center;}

.project-hero #p-footer	{ display: block; position:absolute }

.project-hero-lowres	{ display: none; position:absolute;  z-index: 10;  background-color: #333333; overflow: hidden; }
.project-hero-lowres.blur { 
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -o-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px); 
 }
.js .project-hero-lowres	{ display: block; }
.no-cssfilters .project-hero-lowres, 
.no-bgsizecover .project-hero-lowres { display: none; }  

.project-loaded .project-hero-lowres	{  }

/*
.project-loading	{ position: relative; }
.loader	{ display: none; }
.project-loading .loader	{ display: block; }
*/

.cs-description,
.cs-sidebar 	{ margin-bottom: 25px; }

.cs-image-footer	{ margin-top: 25px; }

.cs-main	{ height: auto !important; padding: 25px 0 0 0; text-align: center; }
.cs-footer .wrapper	{ padding: 25px 0 125px 0; }
/*
.cs-youtube	{ height: 641px; }
.youtube	{ width: 100%; height: 100%; }
*/
.youtube {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.project-label,
.employee-label	{ padding-top:10px; }
.project-title,
.employee-title	{ font-family: "caviar_dreamsbold";}
.project-description,
.employee-position	{ font-weight: 300;}
.employee-image.hasrollover:hover img	{ opacity: 0; }
.modal-close	{ position:absolute; top: 0; right:0;}
.team-popup-title	{ margin:0; font-weight: normal }
.team-popup-position { font-weight: bold }
.team-popup-description	{ padding-top: 20px; }
.team-popup-media-container img	{ width: 100%; height: auto; }
.AboutPage #linkables	{ padding: 40px 0 20px 0; }

/* ==========================================================================
   Navigation (default settings) 
   ========================================================================== */

ul.nav,ul.nav li,ul.nav ul{margin:0;padding:0;list-style-type:none}
ul.nav ul{display: block;z-index: 78; }
ul.nav > li > a{z-index:75; }
ul.nav > li{z-index:76}
ul.nav li{position:relative;display:inline-block;}
ul.nav li.right	{ float: right;  }
ul.nav a{text-align:left;display:block; text-decoration: none;}
ul.nav ul a{text-align:left}

ul.nav ul ul{z-index:77;top:1px;left:94%;}
ul.nav ul a{white-space:nowrap}
ul.nav ul li{width:100%;white-space:nowrap;float:none;display:block}

/* ==========================================================================
   Navigation (custom settings) 
   ========================================================================== */
.nav-category	{ padding: 20px 0 ; }
.nav-category { text-transform: uppercase; font-family: 'caviar_dreamsregular', Arial, sans-serif;  } 
.nav-main	{ text-transform: uppercase; font: normal 13px / 1.333em 'caviar_dreamsbold', Arial, sans-serif;  }

.nav-category ul.nav a,
.nav-main ul.nav a	{ padding: 0 10px; }

.nav-category ul.nav li.current a	{ font-family: 'caviar_dreamsbold', Arial, sans-serif; }

ul.nav-horizontal li	{ padding: 0 10px; }

#linkables ul.nav-horizontal li	{ margin-top: 20px; }
/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */
  
@media (max-width: 479px) {
}


/* Phone and bigger */
@media (min-width: 480px) {
	.modal-close	{ top: 15px; right:15px;}

}

/* Tablet and bigger */
@media (min-width: 768px) {
	
	.wrapper { padding: 100px 0 100px 0; }
			
	footer,
	.footer	{ height: 100px; }

	.p-menu-toggle,
	.menu-toggle,
	.moreinfo	{ font-size: 28px; }
	.uk-modal-close 	{ font-size: 36px; }
	
	
	.cs-description p,
	.cs-sidebar p		{ text-align: left; text-align-last: left; }
	
	
	

}

/* Desktop and bigger */
@media (min-width: 960px) {
	.team-popup-description-container { padding-top: 60px; }
}

/* Large screen and bigger */
@media (min-width: 1220px) {
	.team-popup-description-container { padding-top: 60px; }
.center-container	{ position:relative; min-height: 5em;}
.center-area {
    /* let it fill the whole container */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .center-area:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .centered {
    display: inline-block;
    vertical-align: middle;
  }
}


/* ==========================================================================
   Helper classes & UIKit overrides
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}
.invisible {
    visibility: hidden;
}

ol.pointless,
ul.pointless,
ol.pointless li,
ul.pointless li	{ list-style-type: none;}


ol.collapsed,
ul.collapsed	{ padding-left: 0;}


.Actions	{ text-align: center; padding-top: 20px; }
input.action,
.uk-button	{ background: none; border: 1px solid #000; cursor: pointer; padding: 0.75em 2em; line-height: 1em; min-height: 30px; text-decoration: none !important; text-transform: uppercase; font: normal 13px / 1.333em 'caviar_dreamsbold', Arial, sans-serif;  }

.uk-button-category	{ display:block;  position:relative; height: 100%; }
.uk-button-category img { border:1px solid #000; }
.uk-button-category span	{ line-height: 100px; display: block; width: 100%; text-align: center; position: absolute; top:0;left:0;bottom:0;right:0; border:1px solid #000; }