/*
* Town Onepage Retina Template V.1.0
* Copyright 2013, @bypixels @breecode
* http://bypixels.com/themes/town
* AUTHOR: Breecode // http://themeforest.net/user/breecode
* DATE: 26/08/2013
* Find it only in Themeforest


0- WEBFONTS
1- BASE
1A- FIXED CENTER
1B- GENERIC BLOCK
1C- SUPER CONTAINER & TOP LAYER
1D- LOADING ANIMATION
1E - WORK GALLERY
2- HEADER & MAIN NAV
2B- ABOUT US
2C- STORY
2D- STORY MORE
2E- GLOBAL EXPERIENCE
2F- WORK
2G- CLIENT
2H- PEOPLE
2I- LATEST
3- PAGE TITLE
4- RESPONSIVE NAV
5- SLIDE REVOLUTION & CUSTOM CAPTIONS
6- SKILLS BARS
7- TEAM
8- TESTIMONIALS
9- ISOTOPE FILTERS
10- ISOTOPE
11- BLOG
12- TWITTER FEED
13- PRICING TABLES
14- CONTACT
15- FOOTER
16- VIDEO RESPONSIVE
17- BUTTONS
18- ICONS
19- RETINA ICONS
20- CAROUSEL
21- PARALLAX
22- MEDIA QUERIES
*/

/*=================================================
Bootstrap Overrides
=================================================*/

.row {
	margin: 0px;
}


/*=================================================
0 - WEBFONTS
=================================================*/

.gothamExtraLight {
	font-family: 'Gotham A', 'Gotham B';
	font-weight: 200;
	font-style: normal;
}
.gothamLight {
	font-family: 'Gotham A', 'Gotham B';
	font-weight: 300;
	font-style: normal;
}
.gothamBook {
	font-family: 'Gotham A', 'Gotham B';
	font-weight: 400;
	font-style: normal;
}
.avenir55 {
	font-family: AvenirLT-Roman;
	font-weight: normal;
	font-style: normal;
}
.avenir65 {
	font-family: AvenirLT-Medium;
	font-weight: normal;
	font-style: normal;
}


/*=================================================
1 - SKINS COLORS: To change the color replace the Skin CSS.

Available skins colors: orange.css blue.css red.css green.css yellow.css gray.css
=================================================*/

@import url("css/skins/blue.css");

/*=================================================
1 - BASE
=================================================*/
html, body { height: 100%; }		/* required to size top-layers at 100% height */

body {
	font-family: Helvetica, Arial, sans-serif;
   	font-size:14px;
   	color: #818894;
   	line-height: 25px;
}

h1,h2,h3,h4,h5,h6 {color:#2f353e;letter-spacing: -1px;}

h1{font-size:22px;}
h2{font-size:20px;}
h3{font-size:18px;}
h4{font-size:16px;}
h5{font-size:14px;}
h6{font-size:12px;}

a,i { text-decoration: none;}
i, em {
	font-style: italic;
}

a {color: gray;}

p {
margin: 0 0 20px;
}

.clear {clear: both;}
.center{text-align: center;}
.bold {font-weight: bold;}


.divider {
	padding:30px 0px;
}
.divider.big {
	padding:60px 0px;
}

.divider.small {
	padding:10px 0px;
}
blockquote {
	padding: 0 0 0 15px;
	margin: 0 0 20px;
	border-left: 5px solid #EEE;
}

blockquote p {
	margin-bottom: 10px;
	font-size: 18px;
	font-weight: 300;
	line-height: 25px;
}
#logo {
	float: left;
}
.right {float: right;}
.left {float: left;}

.section{padding:115px 0px;background-color: #FFFFFF;}
.section.gray{background-color: #f6f6f6;}
.hidden {display: none;}
.uppercase {text-transform: uppercase;}

.prevent-selection {
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
}
.subtle-dropdshadow {
	-moz-box-shadow:    2px 2px 10px -5px #000;
	-webkit-box-shadow: 2px 2px 10px -5px #000;
	box-shadow:         2px 2px 10px -5px #000;
}


.no-border{border: none !important;}



.separator-1{
	background-image: url(images/section-separator.png);
	background-position: left top, right bottom;
	background-repeat: repeat-x;
	width: 100%;
	height: 6px;
}

.separator-2{
	background-color: #F5F5F5;
	background-image: url(images/section-separator-2.png);
	background-position: left top, right bottom;
	background-repeat: repeat-x;
	width: 100%;
	height: 6px;
}

img{ max-width: none; }


/*=================================================
1A - SWIPE.JS
=================================================*/
.swipe {
  overflow: hidden;
  visibility: hidden;
  position: relative;
}
.swipe-wrap {
  overflow: hidden;
  position: relative;
}
.swipe-wrap > div {
  float:left;
  width:100%;
  position: relative;
}


/*=================================================
1A - FIXED-WIDTH CENTERED CONTENT (max width 960px)
=================================================*/
.fixed-center {
	width:960px;
	/*background-color:#cccccc;*/
	margin: 0 auto 0 auto;
}

.fixed-row {
	/*margin-left:20px;*/
	/*height:400px;*/
	/*background-color:#00ff00;*/
}

@media (max-width: 980px) {
	.fixed-center{
		width:768px;
	}
}
@media (max-width: 767px) {
	.fixed-row{
		/*margin-left:-20px;*/
	}
}


/*=================================================
1B - GENERIC BLOCK
=================================================*/
.generic-block{
	margin-top: 40px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
	width:703px;
	text-align: center;
}
.generic-block-title{
	width:703px;
	font-size:40px;
	color: #767676;
	margin: 0;
	padding: 0;
}

.generic-block-line{
	width:462px;
	height:1px;
	border-top: 1px solid #898989;
	margin-left: 120px;
	margin-top: 7px;
	margin-bottom: 9px;
}

.generic-block-description{
	width:703px;
	font-size:15px;
	line-height: 22px;
	color: #767676;
	margin: 0;
	padding: 0;
}


/*=================================================
1C - SUPER CONTAINER AND TOP LAYER
=================================================*/

body.invisible-until-loaded #super-container {
	/* display: none;  -> creates display bugs with Story */
}

.top-layer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}


/*=================================================
1D - LOADING ANIMATION
=================================================*/

body.invisible-until-loaded {
	overflow: hidden;
}

#loading-animation {
	overflow: hidden;
	background-color: #FFFFFF;
	width: 100%;
	height: 0%;			/* we want it to collapse, unless <body> has the "invisible-until-loading" class attached */
	margin-top: 100%;
}

body.invisible-until-loaded #loading-animation {
	width: 100%;
	height: 100%;
	margin-top: 0%;
}

		#loading-animation div {
			text-align: center;
			/* center inside parent */
			position: relative;
			width: 180px;
			height: 123px;
			margin-left: -90px;
			margin-top: -61px;
			top: 50%;
			left: 50%;
			/* fade in/out */
			opacity: 0;
		}

		/* add a little bit of vertical movement when loading page disappears */
		body.invisible-until-loaded  #loading-animation div img {
			margin-top: 0px;
			margin-bottom: 0px;
		}
		#loading-animation div img {
			margin-top: -50px;
			margin-bottom: 50px;
		}

		body.invisible-until-loaded #loading-animation div {
			opacity: 1.0;
		}


/*=================================================
1E - WORK GALLERY
=================================================*/

#work
{
	background-color: #f5f5f5;
	padding-bottom: 50px;
}
#work .fixed-row {
	position: relative;
}

#work-gallery {
	position: relative;
	width: 100%;
	background-color: #F5F5F5;
	max-height: 1200px;
	overflow: hidden;
}

#work-gallery.gallery-is-closed {
	max-height: 0px;
}
	#gallery-top-spacer {
		width: 100%;
		height: 0px;	/*50px;*/
	}

	#gallery-screen {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

		#work-gallery .gallery-common-web-overlay {
			display: none;		/* revealed only when necessary, i.e. web project to web project transition */
			position: absolute;
			width: 100%;
			top: 0px;
		}

		#work-gallery .swipe-wrap div {
			overflow: hidden;
		}
		#work-gallery .swipe-wrap div > img {
			width: 100%;		/* otherwise image may be smaller than its container div on large screens */
		}
		/* special treatment for web projects (displayed on a laptop screen) */
		#work-gallery .swipe-wrap div > div.web-special
		{
			position: relative;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-image {
			position: absolute;
			width: 100%;
			z-index: -1;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-video {
			position: absolute;
			background: #000;
			left: 30.5934065934066%;
			top: 20.2914798206278%;
			width: 54.9532967032967%;
			height: 56.6053811659193%;
			z-index: -1;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-video-load,
		#work-gallery .swipe-wrap div > div.web-special .web-video-play,
		#work-gallery .swipe-wrap div > div.web-special .web-video-poster {
			position: absolute;
			left: 31.5934065934066%;
			top: 20.2914798206278%;
			width: 52.9532967032967%;
			height: 55.6053811659193%;
			z-index: 10;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-video-load {
			display: none;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-video-play .web-video-play-icon {
			background: #222222 url(./images/play.svg) no-repeat center center;
			background-size: auto 43px;
			background-position: 23px center;
			border-radius: 50%;
			cursor: pointer;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -40px;
			margin-top: -40px;
			height: 80px;
			width: 80px;
			-webkit-transition: background-color 500ms ease-in-out;
			   -moz-transition: background-color 500ms ease-in-out;
			    -ms-transition: background-color 500ms ease-in-out;
			        transition: background-color 500ms ease-in-out;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-video-play .web-video-play-icon:hover {
			background-color: #333333;
		}
		#work-gallery .swipe-wrap div > div.web-special .web-overlay {
			pointer-events: none;
			/*position: absolute;
			width: 100%;*/
		}

		@keyframes rotate-web-video-load-icon {
			from {
				transform: rotate(0deg);
			}
			to {
				transform: rotate(360deg);
			}
		}

		#work-gallery .swipe-wrap div > div.web-special .web-video-load .web-video-load-icon {
			animation: rotate-web-video-load-icon infinite linear 1s;
			background: #bf2527;
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -20px;
			margin-top: -20px;
			height: 40px;
			width: 40px;
		}

		#work-gallery .swipe-wrap div > div.web-special.playing .web-video-play {
			display: none;
		}

		#work-gallery .swipe-wrap div > div.web-special.playing .web-video-load {
			display: block;
		}

		#work-gallery .swipe-wrap div > div.web-special.playing.playable .web-video-load,
		#work-gallery .swipe-wrap div > div.web-special.playing.playable .web-video-poster {
			display: none;
		}

		#gallery-bt-prev, #gallery-bt-next {
			position: absolute;
			top: 0px;
			width: 220px;
		}
		#gallery-bt-prev {
			left: 0px;
			cursor: url(images/arrow-prev.cur), pointer;
			cursor: url(images/arrow-prev.png) 27 37, pointer;
			background: url(images/hitarea.png); /* make element clickable on IE */
		}
		#gallery-bt-next {
			right: 0px;
			cursor: url(images/arrow-next.cur), pointer;
			cursor: url(images/arrow-next.png) 27 37, pointer;
			background: url(images/hitarea.png); /* make element clickable on IE */
		}

	#gallery-full-list {
		position: absolute;
		width: 965px;
		margin-top: -27px;
		right: -11px;
		z-index: 5;
	}

	@media (max-width: 1024px) {
		#gallery-full-list {
			width: 748px;
		}
	}



	#gallery-full-list.gallery-mode {
		margin-top: 20px;
	}

		/* mask for header + list of projects */
		#gallery-full-list-mask {
			float: right;		/* to right-align during mini/maximize transition, inside fixed-sized #gallery-full-list */
			width: 100%;
			height: auto;
			/*max-height: 695px;*/
			overflow: hidden;
		}

		/* minimized state */
		#gallery-full-list.minimized #gallery-full-list-mask {
			width: 0%;
			max-height: 0px;
		}
		#gallery-full-list.minimized {
			/* disable drop shadow */
			-moz-box-shadow:    none;
			-webkit-box-shadow: none;
			box-shadow:         none;

		}

		/* header */
		#gallery-full-list .header-list {
			background-color: #5a5a5a;
			width: 100%;
			height: 35px;
		}

		#gallery-full-list .header-list-title {
			font-size: 11px;
			color: #ababab;
			margin-top: 5px;
			right: 76px;
			position: absolute;
			cursor: pointer;
		}
		#gallery-full-list #gallery-full-list-rolover:hover .header-list-title {
			color: #C7C7C7;
		}
		#gallery-full-list.gallery-mode .header-list-title{
			right: 103px;
		}
		#gallery-full-list.minimized.gallery-mode .header-list-title
		{
			display: none;
		}

		#gallery-full-list .bt-list, #gallery-full-list .bt-back {
			position: absolute;
			top: 4px;
			height: 26px;
			cursor:pointer;
		}

		#gallery-full-list .bt-list {
			background-image: url(images/work/gallery-icon-list.png);
			width: 32px;
			right: 35px;
		}
		#gallery-full-list #gallery-full-list-rolover:hover .bt-list {
			background-position: -32px;
		}
		#gallery-full-list.gallery-mode .bt-list
		{
			right: 63px;
		}

		#gallery-full-list .bt-back {		/* this is the right-most button, since we use float:rights */
			background-image: url(images/work/gallery-icon-back.png);
			width: 26px;
			right: 36px;
			border-left: 1px solid #4A4A4A;
			display: none;
		}
		#gallery-full-list .bt-back:hover {
			background-position: -26px;
		}
		#gallery-full-list.gallery-mode .bt-back
		{
			display: block;
		}

		/* lists of projects */
		#gallery-full-list .projects-list {
			-webkit-box-sizing: border-box;
			   -moz-box-siging: border-box;
			    -ms-box-sizing: border-box;
			        box-sizing: border-box;
			height: auto;
			background-color: #F8F8F8;		/* fallback when rgba is unsupported; not full white to contrast with the footer */
			background-color: rgba(255, 255, 255, 0.85);
			padding: 40px;
			padding-left: 30px;
			padding-right: 30px;
		}
		#gallery-full-list .projects-column {
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			-ms-box-sizing: border-box;
			float: left;
			display: block;
			vertical-align: top;
			width: 25%;
/*			margin-top: 43px;
			margin-bottom: 40px;*/

			font-size: 12px;
			line-height: 18px;
			color: #636363;
			opacity:0;
		}
		#gallery-full-list .projects-column.visible {
			opacity:1;
		}
		#gallery-full-list .projects-column.visible:nth-child(2) {
		}
		#gallery-full-list .projects-column.visible:nth-child(3) {
		}
		#gallery-full-list .projects-column.visible:nth-child(4) {
		}
		#gallery-full-list .projects-list > .projects-column:first-child {		/* padding only for the left-most column */
			/*padding-left: 40px;*/
		}
		#gallery-full-list .projects-column a {
			display: block;
			/*width: 150px;*/
			padding: 5px;
			padding-top: 7px;
			padding-left: 10px;
			padding-right: 10px;
			cursor: pointer;
			line-height: normal;
			margin-top: -5px;
		}
		#gallery-full-list .projects-column a:hover {
/*			margin-left: -10px;
			margin-right: -10px;
			padding-left: 10px;
			padding-right: 10px;*/
			color: #2C2C2C;
			background-color: #FFFFFF;
		}
		#gallery-full-list .projects-column a.selected {
			color: #CB1F1B;
			cursor: default;
			background: none;
		}
		#gallery-full-list .projects-category {
			color: #2C2C2C;
			margin-bottom: 5px;
			padding-left: 10px;
			padding-right: 10px;
		}
		#gallery-full-list .projects-location {
			color: rgb(150, 150, 150);
		}

	#gallery-info {
		position: absolute;
		left: 0px;		/* top and left set through JS */
		top: 0px;
		width: 316px;
		background-color: #F8F8F8;		/* fallback when rgba is unsupported; not full white to contrast with the footer */
		background-color: rgba(255, 255, 255, 0.85);
		-webkit-transform: translate3d(0, 0, 0); /* Fix safari 6 bug */
	}
	#gallery-info.not-visible {
		opacity: 0;
	}

		#gallery-info .project-header {
			background-color: #393939;
			width: 100%;
			padding-top: 13px;
			padding-bottom: 11px;
		}

			#gallery-info .project-name, #gallery-info .project-location {
				text-transform: uppercase;
				font-size: 13px;
				color: #ebebeb;
				line-height: 17px;
				padding-left: 30px;
				padding-right: 30px;
			}

			#gallery-info .minmax-bt {
				position: absolute;
				width: 28px;
				height: 28px;
				top: 0px;
				right: 0px;
				cursor:pointer;
				background-image:	url(images/work/bt-plus.gif);
				opacity: 0.9;
			}
			#gallery-info .minmax-bt:hover {
				opacity: 1;
			}
			#gallery-info.closed .minmax-bt img {
				 display: none;
			}

		#gallery-info .project-body {
			width: 100%;
			max-height: 500px;		/* trick to animate the height from auto to 0px */
			overflow: hidden;
		}

		#gallery-info.closed .project-body {
			max-height: 0px;
		}

			#gallery-info .project-title {
				font-size: 18px;
				color: #636363;
				letter-spacing: -0.4px;
				line-height: 23px;
				padding-top: 28px;
				padding-left: 30px;
				padding-right: 30px;
				padding-bottom: 7px;
			}

			#gallery-info .project-description {
				font-size: 12px;
				color: #636363;
				line-height: 18px;
				padding-left: 30px;
				padding-right: 30px;
				padding-bottom: 30px;
			}

	#gallery-nav {
		position: relative;
		margin-top: 13px;
		padding-right: 85px;
		top: 0px;				/* set through resizeWorkGallery() in custom.js */
	}

		#gallery-nav div {
			float: right;
			background-color: #CBCBCB;
			width: 45px;
			margin-left: 5px;
			height: 5px;
			cursor:pointer;
			border: 10px #F5F5F5 solid;		/* border added to extend hit area */
			border-left: none;
			border-right: none;
		}
		#gallery-nav div:hover {
			background-color: #B0B0B0;
		}
		#gallery-nav div.selected {
			background-color: #CC1F1B;
		}

	#gallery-loading-animation {
		position: absolute;
		overflow: hidden;
		width: 100%;
		left: 0%;
		height: 100px;	/* set through JS */
		top: 0px;		/* should be #gallery-top-spacers's height (50px?), or 0px if we don't use the spacer */
		background-color: #FFFFFF;
		/* opacity: 0.9; */
	}

		#gallery-loading-animation.not-visible {
			width: 0%;
			left: 100%;
		}
		#gallery-loading-animation.not-visible div {
			opacity: 0;
		}
		#gallery-loading-animation.no-transition {
		}

		#gallery-loading-animation div {
			opacity: 1;
			text-align: center;
			/* center inside parent */
			position: relative;
			width: 180px;
			height: 123px;
			margin-left: -90px;
			margin-top: -61px;
			top: 50%;
			left: 50%;
		}
			#gallery-loading-animation div.not-visible {
				opacity: 0;
			}


/*=================================================
2 - HEADER & MAIN NAV
=================================================*/

#header {background-color: #000000; position:fixed; width: 100%; height:42px; max-height:42px; z-index: 9999; top: 0;}
.main_nav {position: relative;float: right; margin-top:14px; padding-right: 40px; }
.main_nav li {
	float: left;
	font-size:15px;
	margin-right:5px;
	z-index: 1;
	list-style: none;
	position: relative;
	padding-right:15px;
	float: left;
	display: inline;
}
@media (max-width: 750px)							{ .main_nav li {padding-right:10px;} .main_nav li a {font-size: 12px;} }
@media (min-width: 750px) and (max-width: 990px)	{ .main_nav li {padding-right:10px;} .main_nav li a {font-size: 12px;} }

.main_nav li a {color:#E1E1E1;}
.main_nav li a:hover {color:#FFFFFF;}

.main_nav li.active a {
	color:#CB1F1B;
    padding-bottom:24px;
	background-image: url(images/header-menu-arrow.png);
	background-repeat: no-repeat;
	background-position: 50% 20px;
	outline: 0;
}
/*
.main_nav li:after {
	position: absolute;
	content: "";
	z-index: -1;
	* background: url('images/icons/line_menu.png') no-repeat; *
	width: 7px;
	height: 15px;
	top: 3px;
	right: -3px;
}
*/
.sized-header {
	width: 960px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 960px) { .sized-header {width: 744px;} }

.welcome {background-color: #f3f3f3;padding: 80px 0px;}
.welcome_msg {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 58px;
	line-height: 50px;
	letter-spacing: -3px;

}
.welcome_text {
	margin-top: 25px;
	font-size:18px;
	color: #6a686f;
	font-weight: 400;
	line-height: 28px;
}

#logo {
	background:none !important;
	margin-left: -25px;
}

body.invisible-until-loaded  #header .main_nav {
	/* display: none; */
}
body.invisible-until-loaded  #header .main_nav li {
	opacity: 0;
}

#header .main_nav li {
}
#header .main_nav li:nth-child(1) {
	opacity: 1;
}
#header .main_nav li:nth-child(2) {
	opacity: 1;
}
#header .main_nav li:nth-child(3) {
	opacity: 1;
}
#header .main_nav li:nth-child(4) {
	opacity: 1;
}
#header .main_nav li:nth-child(5) {
	opacity: 1;
}
#header .main_nav li:nth-child(6) {
	opacity: 1;
}
#header .main_nav li:nth-child(7) {
	opacity: 1;
}
#header .main_nav li:nth-child(8) {
	opacity: 1;
}

body.invisible-until-loaded  #createIframeButton {
	opacity: 0;
}

#createIframeButton {
	opacity: 1;
}

/*=================================================
2B - ABOUT US
=================================================*/
.over_about {position: absolute;
width: 50%;
right: 0;
height: 100%;}
.over_container {padding: 80px 50px;}
.over_about h1{
	color: white;
	margin-top: 35px;
	font-weight: lighter;
	letter-spacing: 0;
	font-size: 35px; margin-bottom: 20px;
	text-align: center;
}
.about_container {position: relative; margin:50px 0;}
.over_about p {color: white;text-align: center;font-weight: lighter; font-size:18px;}

/*=================================================
2C - STORY
=================================================*/
#story {
	position:relative;
	width:100%;
	height:545px;
	margin-top:42px; /* header height*/
}
	/* :NOTE: it's not used anymore*/
	#story-overlay {
		position:absolute;
		display:none;
		background-image:url(images/story-overlay.png);
		width: 100%;
		height : 100%;
		cursor: pointer;
	}

	#home-background {
		position: absolute;
		width: 100%;
		height:100%;
		overflow: hidden;
		background-color: #000000;
	}
		#home-slideshow-images, #categories-images {
			position: absolute;
			width: 100%;
			height:100%;
		}
		#home-slideshow-images div, #categories-images div {
			position: absolute;
			width: 100%;
			height: 100%;
			opacity: 0;
			background-repeat: repeat-y;
			background-size: cover;
			background-position: top center;
		}
		#home-background video {
			position: absolute;
		}

	#categories-background-left
	{
		position: absolute;
		left: 0;
		bottom: 0px;
		height: 170px;
		background-color: #333333; /* fallback */
		background-color: rgba(71,51,51,.7);
		width: calc((100% - 960px) / 2);
	}

	#categories-background-right
	{
		position: absolute;
		right: 0;
		bottom: 0px;
		height: 170px;
		background-color: #333333; /* fallback */
		background-color: rgba(71,51,51,.7);
		width: calc((100% - 960px) / 2);
	}

	@media (max-width: 980px) {
		#categories-background-left,
		#categories-background-right {
			width: calc((100% - 720px) / 2);
		}
	}

	#categories-background-right,
	#categories-background-left {
	}
	body.invisible-until-loaded #categories-background-right,
	body.invisible-until-loaded #categories-background-left {
		/* margin-bottom: -30px; */
		height: 0px;
	}
	#story-categories {
		margin-bottom: 0px;
	}
	body.invisible-until-loaded #story-categories {
		/* margin-bottom: -30px; */
		height: 0px;
	}


	#story-categories{
		position:absolute;
		bottom:0;
		overflow:hidden;
		height: 170px;
	}
		#story-categories ul{
		}
			.story-categories-separator{
				background-color: #333333;
				position: relative;
				width:0px;
				height:170px;
				float:left;
			}
				.story-categories-separator div{
					position: absolute;
					bottom: 20px;
					width:1px;
					height:128px;
					border-right: 1px solid #c7c7c7;
				}
			.story-category{
				background-color: #333333;
				background-color: rgba(71,51,51,.7);
				position:relative;
				padding-top: 20px;
				float:left;
				cursor:pointer;
				width: 240px;
				height: 150px;
			}
				.story-category-wrapper{
					width:  100%;
					position: absolute;
				}
				.story-category-title{
					color: #a8a8a8;
					font-size:17px;
					margin-bottom:20px;
					margin-left: 20px;
				}
				.story-category:hover .story-category-title{
					color:#D8D8D8;
				}
				.story-category-description{
					color: #dddddd;
					margin: -5px 20px 0 20px;
					font-size:14px;
					line-height: 17px;
					overflow: hidden;
					opacity: 1;
				}
				.story-category:hover .story-category-description{
					color:#ADADAD;
				}
				.story-category-more{
					visibility: hidden;
				}
					.story-category-fulldescription{
						margin: 15px 40px 0 40px;
						color:#ADADAD;
						font-size:14px;
						line-height: 17px;
						opacity: 0;
					}
					.story-category-list-title{
						color: #D8D8D8;
						margin: 45px 20px 8px 40px;
						font-size:12px;
						text-decoration: underline;
						opacity: 0;
					}
					.story-category-list{
						color: #ADADAD;
						margin-left: 20px;
						margin-right: 20px;
						opacity: 0;
					}
					.story-category-list li {
						padding-left: 20px;
						cursor: pointer;
						font-size:12px;
						line-height: 18px;
					}
					.story-category-list li:hover {
						color: #ffffff;
						background-color: #505050;
						background-color: rgba(255,255,255,0.1);
					}
				.story-category-button-more{
					position:absolute;
					text-align:center;
					color:#ffffff;
					background-color:#777777;
					width:18px;
					height:18px;
					line-height:19px;
					top: 112px;
					margin-left: 20px;
				}
				/* :NOTE: this is in custom.js now coz an exception was added for ipad (updateCategory();)
				.story-category:hover .story-category-button-more{
					background-color:#cb242a;
				}
				*/
				.story-category-button-close{
					background-image:url(images/btClose.png);
					width:49px;
					height:49px;
					position:absolute;
					top: 0;
					right: 0;
					cursor: pointer;
					visibility: hidden;
				}
				@media all and (-webkit-min-device-pixel-ratio: 1.5) {
				  .story-category-button-close {
					background-image: url('images/btClose@2x.png');
					background-size: 98px 49px;
				  }
				}
				.story-category-button-close:hover{
					background-position: 49px 0;
				}
			.story-category-opened{
				cursor: default;
				width: 363px !important;
				height: 1000px !important;
			}
			.story-category-opened .story-category-title{
				margin-top: 20px;
				margin-left: 40px;
				color:#D8D8D8 !important;
			}
			.story-category-closed .story-category-title{
				color:#777777;
			}
			.story-category-opened .story-category-description{
				height: 0;
				opacity: 0;
			}
			.story-category-closed .story-category-description{
				height: 0;
				opacity: 0;
			}
			.story-category-opened .story-category-more{
				visibility: visible;
			}
			.story-category-opened .story-category-fulldescription{
				margin-top: 0px;
				opacity: 1;
			}
			.story-category-opened .story-category-list-title{
				margin-top: 40px;
				opacity: 1;
			}
			.story-category-opened .story-category-list{
				opacity: 1;
			}
			.story-category-closed{
				width: 199px !important;
			}

#story-more{
	position:relative;
	overflow:hidden;
}
	#story-more-button-close{
		background-image:url(images/btCloseStory.png);
		width:49px;
		height:49px;
		position:absolute;
		right: 0;
		margin-top: -20px;
		cursor:pointer;
	}
	@media all and (-webkit-min-device-pixel-ratio: 1.5) {
	  #story-more-button-close {
		background-image: url('images/btCloseStory@2x.png');
		background-size: 98px 49px;
	  }
	}
	#story-more-button-close:hover{
		background-position: 49px 0;
	}

@media (max-width: 980px) {

		#story-categories{
			margin-left: 0px;
		}
			.story-category{
				width: 180px;
			}
				.story-category-title{
					font-size: 14px;
					margin-bottom: 16px;
				}
				.story-category-description{
					font-size: 14px;
					line-height: 14px;
				}
				.story-category-fulldescription{
					font-size: 14px;
					line-height: 14px;
				}
				.story-category-list-title{
					margin-top: 40px;
					font-size: 12px;
				}
				.story-category-opened .story-category-list-title{
					margin-top: 30px;
				}
				.story-category-list{
					margin-top: 14px;
				}
					.story-category-list li{
						font-size: 12px;
						line-height: 16px;
					}
			.story-category-opened{
				width: 240px !important;
			}
			.story-category-closed{
				width: 160px !important;
			}
}

/* used only by custom.js */
.story-category-opened-1{
	width: 363px !important;
}
.story-category-opened-1 .story-category-title{
	margin-top: 20px;
}
.story-category-opened-1 .story-category-description{
	font-size: 14px;
	line-height: 17px;
}
.story-category-opened-1 .story-category-fulldescription{
	font-size: 14px;
	line-height: 17px;
}
.story-category-opened-1 .story-category-list-title{
	font-size: 12px;
	margin-top: 45px;
}
.story-category-opened-1 .story-category-list{
	margin-top: 0px;
}
.story-category-opened-1 .story-category-list li{
	font-size: 12px;
	line-height: 18px;
}
.story-category-opened-2{
	width: 240px !important;
}
.story-category-opened-2 .story-category-title{
	font-size: 14px;
	margin-bottom: 16px;
}
.story-category-opened-2 .story-category-description{
	font-size: 14px;
	line-height: 14px;
}
.story-category-opened-2 .story-category-fulldescription{
	font-size: 14px;
	line-height: 14px;
}
.story-category-opened-2 .story-category-list-title{
	font-size: 12px;
	margin-top: 30px;
}
.story-category-opened-2 .story-category-list{
	margin-top: 14px;
}
.story-category-opened-2 .story-category-list li{
	font-size: 12px;
	line-height: 16px;
}
/************************************/

#bt-sound-video-player
{
	position: absolute;
	cursor: pointer;
	right: -20px;
	top: -12px;
	text-align: center;
}
#bt-sound-video-player img {
	display: block;
	transform: translateX(28px);
}
@media (max-width: 980px) {
#bt-sound-video-player
{
	margin-left: 610px;
}
}
#bt-sound-video-player img
{
	position: relative;
	margin-top: 3px;
}
#sound-off,
#sound-off-text
{
	display: none;
}
#sound-on-text,
#sound-off-text
{
	position: relative;
	color: #808080;
	font-size: 10px;
	margin-top: -5px;
}





/*=================================================
2D - STORY MORE
=================================================*/
#story-more-video-container
{
	position: relative;
}

#story-more-video-preview
{
	width: 887px;
	height: 499px;
	margin-left: 27px;
}

#story-more-video-player
{
	display: none;
	width: 887px;
	height: 499px;
	margin-left: 27px;
}

#story-skills-list{
	margin-top: 0px;
	padding-bottom:	111px;
	margin-left: 27px;
}

#story-skill-list-header {

    padding: 0;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 760px;
}

#story-skill-list-header .generic-block-description {
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    width: 760px;
}

#story-skills-list:after {
  content: "";
  display: table;
  clear: both;
}

#story-skills-list li{
	float: left;
	width: 219px;
	height: 219px;
	background-color: #3a3a3a;
	text-align: center;
	position: relative;
	margin-left: 2px;
	margin-right: 2px;
	//display: inline-block;
}
	#story-skills-list li img{
	}
	.story-skills-list-title{
		color: #838383;
		padding-top: 32px;
		margin-bottom: 35px;
		font-size: 15px;
		line-height: 22px;
	}

	.story-skills-list-title.story-skills-list-title-3-lines {
		margin-bottom: 13px;
	}

	.story-skills-list-more{
		z-index: 1;
		position: absolute;
		background-color: #cb1e1b;
		text-align: left;
		overflow: hidden;
		visibility: visible;
		opacity: 1;
		width: 323px;
		height: 323px;
		top: -47px;
		left: -51px;
	}
	.story-skills-list-more.minimized{
		visibility: hidden;
		opacity: 0;
		width: 219px;
		height: 219px;
		top: 0px;
		left: 0px;
	}
		.story-skills-list-more-title{
			opacity: 1;
			padding-top: 37px;
			margin-bottom: 23px;
			color: #ffffff;
			font-size: 18px;
			line-height: 23px;
			text-align: center;
			letter-spacing: 1px;
		}
		.story-skills-list-more-description{
			opacity: 1;
			color: #ffffff;
			font-size: 13px;
			line-height: 20px;
			width: 245px;
			margin:auto;
		}
		.story-skills-list-more-title.minimized{
			opacity: 0;
		}
		.story-skills-list-more-description.minimized{
			opacity: 0;
		}

#expertise-background {
	position:absolute;
	background-image:url(images/expertise.jpg);
	background-repeat: repeat-y;
	background-size: cover;
	/*background-attachment: fixed;*/
	background-position: top center;
	width: 100%;
	height: 446px;
}

#expertise-list{
	position: relative;
	padding-top: 50px;
}
	#expertise-list li{
		width: 303px;
		height: 393px;
		display: inline-table;
	}
		.expertise-title{
			color: #ffffff;
			font-size: 12px;
			line-height: 0px;
			margin-bottom: 15px;
			padding:0;
		}
		.expertise-description{
			color: #c2c2c2;
			font-size: 12px;
			line-height: 18px;
			margin: 0 0 30px 0;
			padding:0;
		}

@media (max-width: 980px) {
#story-more-video-preview
{
	width: 650px;
	height: 366px;
	margin-left: 40px;
}
#story-more-video-player
{
	width: 650px;
	height: 366px;
	margin-left: 40px;
}

#story-skills-list{
	margin-left: 40px;
}
#story-skills-list li{
	width: 160px;
	height: 160px;
}
.story-skills-list-more{
	width: 280px;
	height: 280px;
}
	.story-skills-list-title{
		padding-top: 20px;
		margin-bottom: 25px;
		font-size: 14px;
		line-height: 16px;
	}

	.story-skills-list-title + img {
		width: 80px;
		height: auto;
	}
	.story-skills-list-title.story-skills-list-title-3-lines {
		margin-bottom: 5px;
	}
		.story-skills-list-more-title{
			padding-top: 20px;
			font-size: 16px;
			line-height: 16px;
		}
		.story-skills-list-more-description{
			font-size: 13px;
			line-height: 14px;
			width: 200px;
		}

	#expertise-list li{
		width: 236px;
	}
}


/*=================================================
2E - GLOBAL EXPERIENCE
=================================================*/


#global {
	height: 520px;
}

.global-texts {
	position: absolute;
	padding-top: 80px;
}

	.global-title {
		margin-top: 80px;
		font-size: 31px;
		color: #EBEBEB;
	}

	.global-title span {
		margin-left: -22px;

		background: url(images/globalexperience/bg_grey_500x50.gif);
		background-repeat: no-repeat;
		background-position: 0px 0px;

		line-height: 43px;
		letter-spacing: -1px;
		padding-top: 2px;
		padding-right: 45px;
		padding-bottom: 3px;
		padding-left: 35px;
	}

	.global-texts.closed .global-title span {
		background-position: -500px 0px;
		opacity: 0;		/* we need opacity to hide the actual text */
	}
	html.ie8 .global-texts.closed .global-title span { visibility:hidden; }
	html.ie9 .global-texts.closed .global-title span { visibility:hidden; }

	.global-texts.opened .global-title span {
		background-position: 0px 0px;
		opacity: 1;
	}
	html.ie8 .global-texts.opened .global-title span { visibility:visible; }
	html.ie9 .global-texts.opened .global-title span { visibility:visible; }

	.global-description {
		margin-top: 12px;
		width: 290px;		/* if you change this value, don't forget to change global-mask's opened width as well! */
		font-size: 15px;
		line-height: 22px;
		color: #767676;
	}

	.global-mask {
		overflow: hidden;
		margin-left: 13px;
	}

	.global-texts.opened .global-mask {
		width: 290px;
	}

	.global-texts.closed .global-mask {
		width: 0px;
	}

#global-background {
	position: absolute;
	width: 100%;
	height: 520px;
	overflow: hidden;
}

/* flip from http://jsfiddle.net/7WgKL/2/
   + IE10 fix by A+L (transform-style:preserve-3d not supported => must apply 3D-transform and backface-visibility to the same element see posts like http://stackoverflow.com/questions/11400317/backside-visibility-not-working-in-ie10-works-fine-in-webkit) */
.front, .back {
  width: 737px;
  height: 376px;
}

.flip-container {
  padding-top: 76px;		/* 73px to match mock-up + 3px added to detach from title black bg */
  padding-left: 35%;
  width: 737px;
  height: 444px;

  -webkit-perspective: 800;
  -moz-perspective: 800;
  -o-perspective: 800;
  perspective: 800;

  position: absolute;
  /* overflow: hidden; */
  z-index:2;
  /* initial reveal */
  opacity: 1.0;			/* set to 0 when <body> has the "invisible-until-loaded" class attached */
}

/* prevent map/other "3D" image to appear on top of the main loading animation */
body.invisible-until-loaded .flip-container {
	/*display: none;*/
	opacity: 0.0;
}

@media (max-width: 1024px) {
.front, .back {
  width: 678px;
}
.flip-container {
  padding-top: 93px;
  padding-left: 32%;
}
}

@media (max-width: 768px) {
.front, .back {
  width: 528px;
}
.flip-container {
  padding-top: 129px;
  padding-left: 35%;
}
}

.flip-container.flipped .front {
	-webkit-transform: rotateY(180deg);
	-moz-transform: rotateY(180deg);
	-o-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
html.ie8 .flip-container.flipped .front { visibility: hidden; }
html.ie9 .flip-container.flipped .front { visibility: hidden; }

.flip-container.flipped .back {
	-webkit-transform: rotateY(360deg);
	-moz-transform: rotateY(360deg);
	-o-transform: rotateY(360deg);
	transform: rotateY(360deg);
}
html.ie8 .flip-container.flipped .back { visibility: visible; }
html.ie9 .flip-container.flipped .back { visibility: visible; }

  /* front pane, placed above back */
  .front {
    z-index: 2;
  }
  html.ie8 .front { visibility: visible; }
  html.ie9 .front { visibility: visible; }

  /* back, initially hidden pane */
  .back {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  html.ie8 .back { visibility: hidden; }
  html.ie9 .back { visibility: hidden; }

  .flipper {
    position: relative;
    z-index: 3;
    display: block;
  }

  /* flip speed goes here */
  .front, .back {
    -webkit-transition: 0.9s;
    -webkit-transform-style: preserve-3d;
    -moz-transition: 0.9s;
    -moz-transform-style: preserve-3d;
    -o-transition: 0.9s;
    -o-transform-style: preserve-3d;
    transition: 0.9s;
    transform-style: preserve-3d;
  }

  /* hide back of pane during swap */
  .front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
	-ms-backface-visibility:hidden;		/* not sure it makes a difference, but it was missing from jsFiddle example */
    backface-visibility: hidden;
    position: absolute;
  }


/*=================================================
2F - WORK
=================================================*/

#work-grid
{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

#work-grid.minimized
{
	max-height: 0px !important;
}

#work-infos-category
{
	font-size: 10px;
	color: #797979;
	margin-top: 13px;
	text-transform:uppercase;

	opacity: 0;
}
.isotopes-infos.visible #work-infos-category
{
	opacity: 1;
}
#work-infos-title
{
	font-size: 14px;
	color: #ffffff;
	margin-top: 20px;
	line-height: 15px;
	text-transform:uppercase;

	opacity: 0;
	padding-left: 0px;
}
.isotopes-infos.visible #work-infos-title
{
	opacity: 1;
	padding-left: 0px;
}
#work-infos-place
{
	font-size: 14px;
	color: #ffffff;
	line-height: 15px;

	opacity: 0;
	padding-right: 0px;
}
.isotopes-infos.visible #work-infos-place
{
	opacity: 1;
	padding-right: 0px;
}
#work-grid .isotopes-infos-line
{
	width: 0px;
}
#work-grid .isotopes-infos.visible .isotopes-infos-line
{
	width: 217px !important;
}
#work-infos-description
{
	font-size: 13px;
	color: #ffffff;
	margin-top: 23px;
	line-height: 18px;

	opacity: 0;
}
.isotopes-infos.visible #work-infos-description
{
	opacity: 1;
}


/*=================================================
2G - CLIENTS
=================================================*/

#clients{
	padding-bottom: 72px;
}

#bt-full-client-list{
    position: relative;
    text-align: right;
    margin-bottom: 10px;
    width: 243px;
    margin-left: auto;
    cursor: pointer;
}
#bt-full-client-list p {
    margin: 0 34px 0 0;
}
#bt-full-client-list div{
	width: 32px;
	height: 26px;
	background-image: url(images/work/gallery-icon-list.png);
	position: absolute;
	top: 0;
	right: 0;
}
#bt-full-client-list:hover div{
	background-position: -32px 0px;
}

#client-list {
	width: 1215px;
	margin-left: auto;
	margin-right: auto;
	margin-top: -40px;
}
#client-list-image li {
	-webkit-transition: background-color 500ms ease-in-out;
	   -moz-transition: background-color 500ms ease-in-out;
	    -ms-transition: background-color 500ms ease-in-out;
	        transition: background-color 500ms ease-in-out;
	background: #f7f7f7;
	display: inline-block;
	width: 239px;
	height: 235px;
	line-height: 243px;
	-webkit-perspective: 800;
	-moz-perspective: 800;
	-o-perspective: 800;
	perspective: 800;
}
#client-list-image li div {
	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
	        backface-visibility: hidden;
	width: 239px;
	height: 239px;
	background-image: url(images/clients/clients.jpg);
    position: absolute;
    opacity: 0;
}

#client-list-image.shuffled li {
	background: transparent;
}


@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #client-list-image li div {
    background-image: url('images/clients/clients@2x.jpg');
  }
}

.client-front {
	color: #ff0000;
}
.client-back {
}
.client-flip-forward .client-front {
    transform: 			rotateY(180deg);
    -webkit-transform:  rotateY(180deg);
    -ms-transform: 		rotateY(180deg);
}
.client-flip-forward .client-back {
    transform: 			rotateY(0deg);
    -webkit-transform:  rotateY(0deg);
    -ms-transform: 		rotateY(0deg);
}
.client-flip-backward .client-front {
    transform: 			rotateY(0deg);
    -webkit-transform:  rotateY(0deg);
    -ms-transform: 		rotateY(0deg);
}
.client-flip-backward .client-back {
    transform: 			rotateY(-180deg);
    -webkit-transform:  rotateY(-180deg);
    -ms-transform: 		rotateY(-180deg);
}

@media (max-width: 1235px) {
#client-list {
	width: 972px;
}
.client-flip-1235 {
	display: none !important;
}
}
@media (max-width: 990px) {
#client-list {
	width: 725px;
}
.client-flip-990 {
	display: none !important;
}
}

#clients-img-ref{display:none; max-width:none;}


#full-client-list-wrapper {
	position: relative;
	margin-left: auto;
	margin-right: 200px;
	width: 475px;
}
	#full-client-list {
		position: absolute;
		z-index: 3000;
		width: 475px;
		cursor: pointer;
		overflow: hidden;
	}
		#full-client-list img{
			position: absolute;
			left: 425px;
			box-shadow: 8px 4px 12px #B1B1B1;
			box-shadow: 8px 4px 12px rgba(0,0,0,.3);
			z-index: 3001;
	}
		#full-client-list ul{
			position: relative;
			width: 425px;
			padding: 20px 0 20px 0;
			background-color: #cb1e1b;
			color: #ffffff;
			font-size: 14px;
			box-shadow: 8px 4px 12px #B1B1B1;
			box-shadow: 8px 4px 12px rgba(0,0,0,.3);
		}
			#full-client-list li{
				width: 335px;
				margin-left: 40px;
				padding-top: 20px;
				padding-bottom: 20px;
				border-bottom: 1px solid #d54b49;
			}
				#full-client-list p{
					margin: 0;
				}
				.full-client-list-title{
					line-height: 29px;
				}


/*=================================================
2H -  PEOPLE
=================================================*/

#people
{
	background-color: #f5f5f5;
}

#people-grid
{
	margin-top: -100px;
	padding-bottom: 0px;
	position: relative;
	width: 100%;
	overflow: hidden;
}
#people-grid.minimized
{
	max-height: 0px !important;
	margin-top: 0px;
	padding-bottom: 75px;
}

#people-grid .isotope-mask{ cursor: default; }
#people-grid-toni .isotope-mask
{
	cursor: url(images/read-more-cursor.cur), pointer;
	cursor: url(images/read-more-cursor.png) 10 0, pointer;
}

#people-infos-name
{
	font-size: 14px;
	color: #dadada;
	margin-top: 50px;
	line-height: 15px;
	text-transform:uppercase;

	opacity: 0;
	padding-left: 0px;
}
.isotopes-infos.visible #people-infos-name
{
	opacity: 1;
	padding-left: 0px;
}
#people-infos-occupation
{
	font-size: 14px;
	color: #dadada;
	line-height: 15px;
	text-transform:uppercase;

	opacity: 0;
	padding-right: 0px;
}
.isotopes-infos.visible #people-infos-occupation
{
	opacity: 1;
	padding-right: 0px;
}
#people-grid .isotopes-infos-line
{
	width: 0px;
}
#people-grid .isotopes-infos.visible .isotopes-infos-line
{
	width: 217px !important;
}
#people-infos-description
{
	font-size: 13px;
	color: #cecece;
	margin-top: 23px;
	line-height: 18px;

	opacity: 0;
}
.isotopes-infos.visible #people-infos-description
{
	opacity: 1;
}

.people-bt-close
{
	background-image: url(images/people/bt-close.png);
	width: 49px;
	height: 49px;
	margin-left: auto;
	cursor: pointer;
}
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  .people-bt-close {
    background-image: url('images/people/bt-close@2x.png');
	background-size: 98px 49px;
  }
}
.people-bt-close:hover
{
	background-position: -49px 0;
}
.people-card
{
	width: 100%;
	height: 790px;
	background-color: #000;
	overflow: hidden;
}
.people-card.minimized
{
	height: 0px;
}
	.people-card-text
	{
		width: 550px;
		margin-left: auto;
		margin-top: 98px;
	}
		.people-card-name
		{
			color: #ffffff;
			margin: 0;
			text-transform: uppercase;
		}
		.people-card.minimized .people-card-name
		{
			opacity: 0;
			margin-top: -10px;
		}
		.people-card-occupation
		{
			color: #c4c4c4;
			margin: -4px 0 21px 0;
			text-transform: uppercase;
		}
		.people-card.minimized .people-card-occupation
		{
			opacity: 0;
		}
		.people-card-description
		{
			color: #b1b1b1;
			margin: 0 0 30px 0;
			line-height: 22px;
		}
		.people-card.minimized .people-card-description
		{
			opacity: 0;
		}
		.people-card.minimized p:nth-child(3)
		{
			margin-top: -10px;
		}
		.people-card a
		{
		}
		.people-card.minimized a
		{
			opacity: 0;
		}
#toni-card
{
	background: #000000 url(images/people/photo2.jpg) no-repeat;
	background-position: 0px 84px;
}
@media (max-width: 1128px) {
	#toni-card
	{
		background-position: -110px 143px;
	}
}
@media (max-width: 980px) {
	#toni-card
	{
		background-position: -270px 143px;
	}
}

.bt-facebook
{
	background-image: url(images/facebook.jpg);
	width: 22px;
	height: 26px;
	cursor: pointer;
	display: inline-block;
	margin-right:1px;
}
.bt-facebook:hover
{
	background-position: 22px;
}
.bt-twitter
{
	background-image: url(images/twitter.jpg);
	width: 22px;
	height: 26px;
	cursor: pointer;
	display: inline-block;
	margin-right:1px;
}
.bt-twitter:hover
{
	background-position: 22px;
}
.bt-linkedin
{
	background-image: url(images/linkedin.jpg);
	width: 22px;
	height: 26px;
	cursor: pointer;
	display: inline-block;
}
.bt-linkedin:hover
{
	background-position: 22px;
}


/*=================================================
2I -  LATEST
=================================================*/

#latest
{
	background-color: #fff;
	padding-bottom: 75px;
}

#latest-slideshow .swipe-wrap img {
	width: 100%;
}

.latest-text-container {
	position: absolute;
	width: 100%;
	top: 30%;		/* change this to modify the vertical position of the block of text on large screens (> 1024) */
	opacity: 1.0;
}
.latest-text-container > div:nth-child(1) {		/* added to sequence the animation */
}
.latest-text-container > div:nth-child(2) {		/* added to sequence the animation */
}
.latest-text-container > div:nth-child(3) {		/* added to sequence the animation */
}
@media (max-width: 768px) {
.latest-text-container {
	top: 25%;		/* change this to modify the vertical position of the block of text on narrow screens (iPad portrait) */
}
}
	#latest-slideshow {
		padding-bottom: 75px;
	}

	#latest-slideshow div.text-is-hidden .latest-text-container {
		/*
		padding-left: 60px;
		opacity: 0.0;
		*/
	}
	#latest-slideshow div.text-is-hidden .latest-text-container > div {
		/*padding-left: 60px;*/
		opacity: 0.0;				/* added to fade in opacity at different times for each div */
	}
	#latest-slideshow div.text-is-hidden .latest-text-container > div {
		padding-top: 10px;
	}

	.latest-text-container div {
		width: 730px;
		margin-left: auto;
		margin-right: auto;
	}
	@media (min-width: 980px) {
	.latest-text-container div {
		padding-right: 200px;		/* to align block of text with the logo at larger resolutions (> 1024) */
	}
	}

	.latest-big-white {
		color: #FFFFFF;
		font-size: 60px;
		line-height: 53px;
		letter-spacing: -2px;
	}

	.latest-big-red {
		color: #C30018;
		font-size: 60px;
		line-height: 53px;
		letter-spacing: -2px;
	}

	.latest-small {
		color: #FFFFFF;
		font-size: 15px;
		line-height: 23px;
		margin-top: 17px;
		padding-left: 10px;		/* compensate for the natural margin to the left-hand side of latest-big-* */
	}

	#latest-red-button {
		margin-top: 25px;
		background: #B8292D;
		padding: 0px 19px 0px 10px;
		line-height:30px;
		color: #fff;
		float: left;
		cursor: pointer;
		font-size: 12px;
	}
	#latest-red-button:hover {
		background: #cb242a;
	}

	#latest-slideshow-arrows {
		position: relative;
		width: 100%;
		height:0;
	}
		#latest-slideshow-bt-prev, #latest-slideshow-bt-next {
			position: absolute;
			top: 0px;
			width: 100px;
			height: 300px;
		}
			#latest-slideshow-bt-prev {
				left: 0;
				cursor: url(images/arrow-prev.cur), pointer;
				cursor: url(images/arrow-prev.png) 27 37, pointer;
				background: url(images/hitarea.png); /* make element clickable on IE */
			}
			#latest-slideshow-bt-next {
				right: 0;
				cursor: url(images/arrow-next.cur), pointer;
				cursor: url(images/arrow-next.png) 27 37, pointer;
				background: url(images/hitarea.png); /* make element clickable on IE */
			}

	#latest-slideshow-nav {
		position: relative;
		margin-right: 36px;
	}

		#latest-slideshow-nav div {
			float: right;
			background-color: #CBCBCB;
			width: 45px;
			margin-left: 5px;
			height: 5px;
			cursor:pointer;
			border: 10px #FFFFFF solid;		/* border added to extend hit area */
			border-left: none;
			border-right: none;
		}
		#latest-slideshow-nav div:hover {
			background-color: #B0B0B0;
		}
		#latest-slideshow-nav div.selected {
			background-color: #CC1F1B;
		}

#latest-feed-navigation
{
	position: relative;
	width: 100%;
	z-index: 4;
}
@media only screen and (max-width: 980px) {
	#latest-feed-navigation
	{
		width: 619px;
		margin-left: auto;
		margin-right: auto;
	}
}

	#latest-feed-bt-prev{
		cursor: pointer;
		position: absolute;
		width: 60px;
		height: 150px;
		left: -60px;
		top: 0px;
		background: url(images/arrow-prev.png) no-repeat center center;
	}
	#latest-feed-bt-next{
		cursor: pointer;
		position: absolute;
		width: 60px;
		height: 150px;
		right: -60px;
		top: 0px;
		background: url(images/arrow-next.png) no-repeat center center;
	}

#latest-feed
{
	overflow: hidden;
	width: 100%;
	height: 500px;
	position: relative;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
}
@media only screen and (max-width: 980px) {
	#latest-feed
	{
		width: 619px;
		margin-left: auto;
		margin-right: auto;
	}
}

	#latest-feed li
	{
		position: absolute;
		width: 298px;
		margin: 0;
		padding: 0;
	}
		.latest-feed-title
		{
			position: relative;
			height: 44px;
			margin: 30px auto 0 auto;
		}
		.latest-feed-title p
		{
			position: absolute;
			bottom: 0;
			width: 298px;
			margin: 0;
			padding: 0;
			font-size: 17px;
			line-height: 20px;
			color: #505050;
		}
		.latest-feed-line
		{
			width: 298px;
			height: 1px;
			margin: 7px auto 13px auto;
			padding: 0;
			border-top: 1px solid #ccc;
		}
		.latest-feed-date
		{
			width: 298px;
			margin: 0 auto 11px auto;
			padding: 0;
			font-size: 10px;
			line-height: 10px;
			color: #505050;
			text-transform:uppercase;
		}
		.latest-feed-description
		{
			width: 298px;
			margin: 0 auto 20px auto;
			padding: 0;
			font-size: 12px;
			line-height: 18px;
			color: #696969;
		}
		.latest-feed-description a {
			color: #C30018;
		}
		.latest-feed-description a:hover {
			color: #E30020;
		}
		.latest-feed-pdf
		{
			width: 298px;
			margin: 0 auto 0 auto;
			padding: 0;
			font-size: 13px;
			line-height: 13px;
			color: #C30018;
		}
		.latest-feed-pdf:hover
		{
			color: #E30020;
		}


/*=================================================
3 - PAGE TITLE
=================================================*/
/*
.page_title {font-size:75px; text-align: center; text-transform: uppercase; letter-spacing: -3px; margin-bottom:28px; }
.page_title.small {font-size:50px; text-align: left; text-transform: uppercase; letter-spacing: -3px; margin-bottom:28px; }
.page_subtitle {color:#b2b2b2; text-transform: uppercase;text-align: center; margin:15px 0px;}
.page_line {width:80px; height:4px; background-color:#b7b7b7; margin:0 auto;}
.page_description {font-size:16px; text-align: center;margin:30px 0px;}
*/

/*=================================================
4 - RESPONSIVE NAV
=================================================*/
/*
.responsive_container {
	width: 100%;
	position: fixed;
	z-index: 100;
}

.responsive_nav {
	margin-top: -1px;
	background-image: url(images/geometry.png);
}

.menu_trigger {
	float: right;
	padding: 11px 0px 12px 0px;
}
.menu_trigger i:hover {color:white;}
.menu_trigger i {padding: 17px; color:white;}
.menu_trigger, .mobileAreaMenu, .responsive_nav {display: none;}

.mobileAreaMenu a {
	color: white;
	border: none;
	text-align: center;
	font-weight: bold;
	padding: 9px 100px;
}
.mobileAreaMenu a:hover{
	color:white;
}
.mobileAreaMenu li {
padding: 8px;
cursor: pointer;
margin: 10px auto;
text-align: center;
cursor: pointer;
width: 50%;
}
*/

/*=================================================
5 - REVOLUTION SLIDER & CUSTOM CAPTIONS
=================================================*/
/*
.fullwidthbanner-container{
		width:100% !important;
		position:relative;
		padding:0;
		max-height:980px !important;
		overflow:hidden;
		margin-bottom:0px;

	}

.fullwidthbanner-container.home.style4{
margin-top: 45px;
	}

.fullwidthbanner-container.home{
	width:100% !important;
	max-height:920px !important;
	margin-bottom: 0;
	position:relative;
	margin-top: 60px;

	}
.caption.style2 {
	color:white;
	font-size:30px;
	font-weight: 100;
	background-color: rgba(0, 0, 0, 0.6);
	padding:15px;
	text-align: center;

}

.caption.style3 {
	font-size:50px;
	color:white;
	font-weight: 100;
	text-transform: uppercase;
}

.style3_text {color:white; font-size:22px;}

.style4 {
	font-size:60px;
	color:white;
	font-weight: 600;
	text-transform: uppercase;
	position: absolute;
	visibility: hidden;
}

.small_black{
			position: absolute;
			color: #000;
			text-shadow: none;
			font-weight: 800;
			font-size: 16px;
			line-height: 36px;
			font-family: sans;
			padding: 0px 4px;
			margin: 0px;
			border-width: 0px;
			border-style: none;
			background-color:#fff;
			letter-spacing: -1.5px;
			text-transform: uppercase;
			visibility: hidden;
		}
.style4.cap_1 {bottom: 200px; left:20px;}
.style4.cap_2 {bottom: 140px;left:20px;}
.small_black.cap_3 {bottom: 70px;left:20px;}
.style4.cap_4 {bottom: 200px; left:20px;}
.style4.cap_5 {bottom: 140px;left:20px;}
.small_black.cap_6 {bottom: 70px;left:20px;}
.style4.cap_7 {bottom: 200px; left:20px;}
.style4.cap_8 {bottom: 140px;left:20px;}
.small_black.cap_9 {bottom: 70px;left:20px;}



.custom_button  a{
color: #fff!important;
left: -10px;
top: 10px;
letter-spacing: 1.5px;
position: relative;
display: inline-block;
padding: 14px 18px;
font-size:14px;
border: 2px solid rgba(255,255,255,0.3);
-webkit-transition: border-color 0.3s linear, background-color 0.3s linear;
-moz-transition: border-color 0.3s linear, background-color 0.3s linear;
-o-transition: border-color 0.3s linear, background-color 0.3s linear;
transition: border-color 0.3s linear, background-color 0.3s linear;
}

.style1 {
	font-family: arial;
	font-size:28px;
	color:white;
	font-weight: 100;
	text-transform: uppercase;
}
.style1b {
	font-family: arial;
	font-size:100px;
	color:white;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: -1px;
}
*/


/*=================================================
6 - SKILLS BAR
=================================================*/

/*
#skill .bar {
	height: 35px;
	width: 0;

}


#skill .skillbar {
	height: 36px;
	background: #dfdfdf;
	margin: 0 0 10px 0;
}

#skill .skilltitle {
	color: #fff;
	top: 9px;
	left: 15px;
	position: absolute;
}


#skill h4 {margin-bottom:5px;}
.percent {
	float: right;
	color: white;
	font-weight: bold;
	margin-top: 5px;
	margin-right: 5px;
	font-size: 18px;
}
*/




/*=================================================
7 - TEAM
=================================================*/
/*
.team_description {background-color: #fbf9fa; text-align: center; margin-bottom: 20px; border:1px solid #efedee;}
.team_description h3 {padding-top: 40px; line-height: 0;}
.team_description p {color: #01c9ea;}
.team_description .social ul {padding-bottom: 20px;}
.team_description .social ul li {display: inline; padding-right: 10px;}
.team_img_container {height: 300px; -webkit-background-size: cover;
background-size: cover; background-position: center;}
*/

/*=================================================
8 - TESTIMONIALS
=================================================*/
/*
.testi_column {width: 25%; float: left;}
.testi_column .col_wrapper {padding:15px;}
.testi_column p {margin: 0;}
.testi_column img {float:left;margin-right: 12px;}
.testimonials_name {font-weight: bold; font-size: 15px;padding-top: 12px;}
.testimonials_company{font-weight: lighter;}
.testimonial {
	font-size: 18px;
	line-height: 30px;
	text-align: center;
	padding: 40px 0px 20px 0px;
}
*/


/*=================================================
9 - ISOTOPE FILTERS
=================================================*/

/*=================================================
10 - ISOTOPE
=================================================*/

/*=================================================
11 - BLOG
=================================================*/

/*
.blog_post .page_title, .blog_post .page_subtitle {text-align: left;}
.blog_post .page_line {margin:0;}
.sidebar {margin-left:20px;}

.sidebar h2 {margin-top:0px;}

.categories li {
	padding: 10px 0px;
	border-bottom: 1px dashed rgb(213, 213, 213);
}

.sidebar a {color:#636669;}

.tags li a {
	display: inline-block;
	padding: 9px;
	line-height: 9px;
	 text-transform: uppercase;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	behavior: url(css/PIE.htc);
	color: #E7E7E7;
	letter-spacing: 1px;
	font-size:10px;
}

.tags li {
	float: left;
	background-color: #444;
	margin-right: 7px;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	margin-bottom: 10px;
	behavior: url(css/PIE.htc);
	-webkit-transition-duration: 0.15s;
	-moz-transition-duration: 0.15s;
	-o-transition-duration: 0.15s;
	-ms-transition-duration: 0.15s;
	transition-duration: 0.15s;
}

.comment article {
	margin-bottom: 5px;
}

.blogpost-title {
	margin: 20px 0;
}

.comment {
	margin-bottom: 25px;
	border: 1px solid #e5e5e5;
	background-color: #FFF;
}
.comment-body {
	padding: 10px;
}
.comment .replybutton {
	float: right;
	margin-top: 0px;
	background-color: #F7F7F7;
	margin-right: 0px;
	font-size: 11px;
	color: #999;
	padding: 8px;
}
.post-info {
	position: relative;
	padding: 9px 9px 9px 69px;
	margin-bottom: 15px;
	border: 1px solid #EEE;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	font-size: 11px;
	line-height: 50px;
	vertical-align: middle;
	color: #999;
	background-color: #F7F7F7;
	-webkit-background-clip: border;
	behavior: url(css/PIE.htc);
	border-top: none;
}
.post-info .post-avatar {
position: absolute;
top: 10px;
display: inline-block;
left: 10px;
width: 50px;
height: 50px;
background-position: center;
}
.post-author {
	font-size: 14px;
	margin-right: 10px;
	margin: 0px 5px;
	margin-right: 10px;
}
.post-info .post-author {
	font-weight: bold;
	color:#232527;
}


.comment .ago {
	float: right;
	font-size: 11px;
}
.comment.reply {
	margin-left: 50px;
}

.label_comment {display: initial;}

.reply-input div {
	margin-bottom: 25px;
}




.blog-item {background-color: #ffffff;}
.blog_post .img-container-blog {
min-height: 455px;
}
.img-container-blog {
min-height: 335px;
position: relative;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
margin-bottom: -1px;
background-position: center;
}


.the-author-img{
	position: absolute;
	right: 15px;
	bottom: -25px;
	border-radius: 50px;
	z-index: 10;
	behavior: url(css/PIE.htc);
}


.blog_post .the-title h1 {margin:20px 0px;}
.the-title h1 {line-height: 25px;margin: 15px 0px;}
.the-title h1 a {font-size: 18px; color:#2f353e;}

.blog-boddy {padding: 0px 20px 20px 20px;}

.blog-item .metas {
	border-top: 1px dashed #e6e6e6;
	margin-top: 20px;
	padding: 10px 0px 0px 0px;
	margin-bottom: -20px;
}

.blog-item .metas .the-comments a, .blog-item .metas .the-date a, .blog-item .metas .the-author a {
	background-repeat: no-repeat;
	background-position: 0 0;
	float: left;
	margin-bottom: 15px;
	margin-top: 5px;
	color: #9da0a4;
	margin-right:20px;
	font-size: 12px;
	text-transform: uppercase;
}

.the-author i {padding-right:5px;}
.read_more_small img {margin-top:5px; }
.read_more_small {background: #9da0a4;
	-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
padding: 0px 7px;
margin-top: 4px;
float: right;}
.read_more_small i {color: white;}
*/


/*=================================================
12 - TWITTER FEED
=================================================*/
/*
.tweet_list {
list-style: none;
margin: 0;
padding: 0;
overflow-y: hidden;}

.tweet_list li {
overflow-y: auto;
overflow-x: hidden;
list-style-type: none;
text-align: center;}
#twitterfeed {margin-top: 3px;}
#tweet_feed {background-color: #eeeeee; padding:20px 0px;min-height: 25px;-moz-transition: .15s ease-in-out;
-webkit-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
-ms-transition: .15s ease-in-out;
transition: .15s ease-in-out;}

.tweet_list li a {
font-weight: bold;
}

.tweet_list li a:hover {

}

.tweet_list .tweet_even {

}

.tweet_list .tweet_avatar {
display: none;}

.tweet_list .tweet_avatar img {
	display: none;}

.tweet_list .tweet_time a{
font-weight: normal;
font-size:12px;
margin-left: 10px;
color:#7E7E7E;
}


.tweet_list li::before {
content: url(images/twitter_bird.png);}

.tweet_list li img {
margin-bottom:-2px;}
*/


/*=================================================
13 - PRICING TABLES
=================================================*/
/*
.pricing-table .pricing_header {background-color: #141618; }
.pricing-table .pricing_sub_header {background-color: #25292c;}
.pricing-table .pricing_header h1 {margin-bottom:0; color: white; padding:20px 0px; text-align: center; font-size: 26px;}
.pricing-table .pricing_sub_header h1 {color: white; text-align: center; margin: 0;padding: 25px 0px 15px 0px; font-size: 54px;}

.pricing-table .pricing_sub_header span {font-size:16px;}
.pricing-table .features li {padding:15px; text-align: center; background-color: #fff;border-bottom: 1px solid #e9e9e9;}
.pricing-table ul {border:1px solid #e9e9e9; border-bottom:0;}

.pricing_footer {-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;background-color: #25292c; border:1px solid #e9e9e9; border-top:0;padding:10px 0px;}
.pricing_footer h3 {margin: 0; color:white; text-align: center;}
.pricing_footer h3 a {color:white;}
*/


/*=================================================
14 - CONTACT
=================================================*/

#contact {
	background-color: #F5F5F5;
	background-image: url(images/section-separator-2.png), url(images/section-separator.png);
	background-position: left top, left bottom;
	background-repeat: repeat-x;
	padding-top: 45px;
	padding-bottom: 45px;
}

#contact-logo {
	float: left;
	padding-left: 20px;
	width: 272px;
}

#contact-info {
	overflow: hidden;
}

#contact-info > div {
	float: none;
	background-repeat: no-repeat;
	padding-left: 50px;
	min-height: 55px;
	margin-bottom: 20px;
}

#contact-info > div:last-child {
	margin-bottom: 0px;
}

#contact-info > div:nth-child(1) {
	background-image: url(images/contact/icon-pin.png);
	background-position: 0px -12px;
}

#contact-info > div:nth-child(2) {
	background-image: url(images/contact/icon-phone.png);
	background-position: 0px -12px;
}

#contact-info > div > div {
	line-height: 18px;
	color: #808080;
	font-size: 12px;
}

#contact-info > div > div > span {
	color: #101010;
	font-size: 13px;
}

#contact-info a {
	color: #C30018;
}

#contact-info a:hover {
	color: #E30020;
}

#big-map {
	width: 100%;
	height: 610px;
}

.contact-social {
	float: right;
}

.contact-social a {
	color: #7d7d7d;
	border-radius: 50%;
	display: inline-block;
	font-size: 16px;
	margin-left: 1px;
	margin-right: 1px;
	text-align: center;
	padding: 5px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.contact-social .avenir65 {
	color: #101010;
}

.contact-social a:hover {
	color: #C72834;
}

@media only screen and (max-width: 980px) {

	#contact-logo {
		float: left;
		padding-left: 20px;
		width: 322px;
	}

}

/*
#response .submit_buttom {
margin-top:20px;
color: white;
width:150px;
border-radius: 2px;
float: right;
-moz-transition: .15s ease-in-out;
-webkit-transition: .15s ease-in-out;
-o-transition: .15s ease-in-out;
-ms-transition: .15s ease-in-out;
transition: .15s ease-in-out;
}
#response .submit_buttom:hover {
	background-color: #25292c;
}

#response input, #response textarea{
outline: none;
padding: 14px 10px;
border: 1px solid #eeeeee;
color: #ABADB7;
background-color: #eeeeee;
width: 98%;
margin: 0;
border-radius: 5px;
box-shadow: none;
}
.gray #response input, .gray #response textarea {background-color: white;}
 #response textarea {
 	padding:20px;
 }
#response textarea{
width:93%;
}

.label_comment {display: initial;}
.reply-input div {
	margin-bottom: 25px;
}


.dark #response.blog input, .dark #response.blog textarea {
	outline: none;
	padding: 8px;
	background-color: #252b2c;
	border: 1px solid #2c3233
}
*/


/*=================================================
15 - FOOTER
=================================================*/

#footer {
	background-color: #FFFFFF;
	color: #5D5D5D;
	font-size: 12px;
	height: 30px;
	padding-top: 6px;
}

#footer .social {
	float: right;
}

#footer .share {
	float: left;
	display: block;
	height: 20px;
	width: 100px;
}

#footer .share.twitter {
	width: 63px;
}
#footer .share.facebook {
	width: 55px;
}

#footer .share.google {
	width: 40px;
}

#footer .share.pinterest {
	margin-top: -2px;
	width: 45px;
}


/*=================================================
16 - VIDEO RESPONSIVE
=================================================*/
/*
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 /
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_caption {
text-align: center;
position: absolute;
width: 600px;
margin-left: -300px;
left: 50%;
top:400px;
}
.video_logo {padding:20px 0px;}

.video_text_small {font-family: arial; color:white; font-size:50px;padding-bottom: 20px;}
.video_text_big {font-family: arial; color:white; font-size:80px;padding: 30px 0px 40px 0px;}
.full_slide {height: 100%; width: 100%;}
*/


/*=================================================
17 - BUTTONS
=================================================*/
/*
.button {
	margin: 10px 10px 10px 0px;
	cursor: pointer;
	color: white;
	padding: 10px 20px;
	display: inline-block;
	font-weight: 600;
	height: auto!important;
	-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
}
.button.small {font-size:11px;padding: 3px 10px;}
.button.large {font-size: 16px;padding:10px 25px;}
.button:hover {background-color: #404040; color: white;}
.button.gray {background-color: #8b8b8b;}
.button.gray:hover {background-color: #484848; color: white;}
.button.black {background-color: #484848;}
.button.black:hover {color: white}

.button span {color: white;}

.button_rec  a{
padding: 7px 18px;
font-size:13px;
top:10px;
font-weight: bold;
border: 2px solid #b7b7b7;
-webkit-transition: border-color 0.3s linear, color 0.3s linear;
-moz-transition: border-color 0.3s linear, color 0.3s linear;
-o-transition: border-color 0.3s linear, color 0.3s linear;
transition: border-color 0.3s linear, color 0.3s linear;
color: #9C9C9C!important;
letter-spacing: 1.5px;
position: relative;
display: inline-block;
}

.button_rec a:hover {border: 2px solid #2f353e;color: #2f353e!important;}
*/

/*=================================================
18 - ICONS
=================================================*/
/*
.social_icon {height: 32px; width: 32px; margin:0px 10px 0px 0px; display: block; float: left;margin-bottom:10px;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
transition-duration: 0.15s;}
.social_icon.rss {background-image: url(images/icons/social/rss.png);}
.social_icon.behance {background-image: url(images/icons/social/behance.png);}
.social_icon.dribbble {background-image: url(images/icons/social/dribbble.png);}
.social_icon.facebook {background-image: url(images/icons/social/facebook.png);}
.social_icon.flickr {background-image: url(images/icons/social/flickr.png);}
.social_icon.google {background-image: url(images/icons/social/google.png);}
.social_icon.lastfm_social {background-image: url(images/icons/social/lastfm.png);}
.social_icon.linkedin {background-image: url(images/icons/social/linkedin.png);}
.social_icon.pinterest {background-image: url(images/icons/social/pinterest.png);}
.social_icon.skype {background-image: url(images/icons/social/skype.png);}
.social_icon.tumblr {background-image: url(images/icons/social/tumblr.png);}
.social_icon.twitter {background-image: url(images/icons/social/twitter.png);}
.social_icon.vimeo {background-image: url(images/icons/social/vimeo.png);}
.social_icon.youtube {background-image: url(images/icons/social/youtube.png);}
.social_icon.android {background-image: url(images/icons/social/android.png);}
.social_icon.badoo {background-image: url(images/icons/social/badoo.png);}
.social_icon.foursquare {background-image: url(images/icons/social/foursquare.png);}
.social_icon.picasa {background-image: url(images/icons/social/picasa.png);}
.social_icon.quora {background-image: url(images/icons/social/quora.png);}
.social_icon.reddit {background-image: url(images/icons/social/reddit.png);}
.social_icon.xbox {background-image: url(images/icons/social/xbox.png);}
*/


/* LOADING ICON */
/*
.loading_icon{
	background: #000 url("images/preload.gif") no-repeat center center;
	height:60px;
	width:60px;
	position: fixed;
	top:50%;
	left:50%;
	margin-top:-30px;
	margin-left:-30px;
	display:none;
	z-index: 10000;
	-webkit-border-radius: 	30px;
	-moz-border-radius: 	30px;
	border-radius: 			30px;
	behavior: url(css/PIE.htc);
	opacity: .25;
}
*/

/* GLYFY ICONS*/
/*
.icon.gray {
background: url(images/icons/icons-gray.png) no-repeat;
border: none;
}

.icon.calendar {
background-position: -171px -138px;
width: 20px;
height: 20px;
padding-right: 25px;
}
.icon.user {
background-position: -103px 0;
width: 20px;
height: 20px;
padding-right: 25px;
}
.icon.comments {
background-position: -307px -1028px;
width: 20px;
height: 15px;
padding-right: 25px;
}
*/

/*=================================================
19 - RETINA ICONS
=================================================*/


/*=================================================
19 - RETINA ICONS
=================================================*/
/*
.services_icon_container .hi-icon {float: left;}
.hi-icon {
	display: inline-block;
	cursor: pointer;
	margin: 20px 20px 50px 10px;
	width: 90px;
	height: 90px;
	border-radius: 50%;
	text-align: center;
	position: relative;
	z-index: 1;
	color: #fff;
}

.hi-icon:after {
	pointer-events: none;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	content: '';
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

.hi-icon:before {
	font-family: 'FontAwesome';
	speak: none;
	font-size: 48px;
	line-height: 90px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	display: block;
	-webkit-font-smoothing: antialiased;
}

.hi-icon-mobile:before {
	content: "\e009";
}

.hi-icon-screen:before {
	content: "\e00a";
}

.hi-icon-earth:before {
	content: "\e002";
}

.hi-icon-support:before {
	content: "\e000";
}

.hi-icon-locked:before {
	content: "\e001";
}

.hi-icon-cog:before {
	content: "\e003";
}

.hi-icon-clock:before {
	content: "\e004";
}

.hi-icon-videos:before {
	content: "\e005";
}

.hi-icon-list:before {
	content: "\e006";
}

.hi-icon-refresh:before {
	content: "\e007";
}

.hi-icon-images:before {
	content: "\e008";
}

.hi-icon-pencil:before {
	content: "\e00b";
}

.hi-icon-link:before {
	content: "\e00c";
}

.hi-icon-mail:before {
	content: "\e00d";
}

.hi-icon-location:before {
	content: "\e00e";
}

.hi-icon-archive:before {
	content: "\e00f";
}

.hi-icon-chat:before {
	content: "\e010";
}

.hi-icon-bookmark:before {
	content: "\e011";
}

.hi-icon-user:before {
	content: "\e012";
}

.hi-icon-contract:before {
	content: "\e013";
}

.hi-icon-star:before {
	content: "\e014";
}

/* Effect 1 /
.hi-icon-effect-1 .hi-icon {
	background: rgba(61, 61, 61, 1);
	-webkit-transition: background 0.2s, color 0.2s;
	-moz-transition: background 0.2s, color 0.2s;
	transition: background 0.2s, color 0.2s;
}

.ie8 .hi-icon-effect-1 .hi-icon {
	background: #3d3d3d;
}


.hi-icon-effect-1 .hi-icon:after {
	top: -7px;
	left: -7px;
	padding: 7px;

	-webkit-transition: -webkit-transform 0.2s, opacity 0.2s;
	-webkit-transform: scale(.8);
	-moz-transition: -moz-transform 0.2s, opacity 0.2s;
	-moz-transform: scale(.8);
	-ms-transform: scale(.8);
	transition: transform 0.2s, opacity 0.2s;
	transform: scale(.8);
	opacity: 0;
}

/* Effect 1a /
.no-touch .hi-icon-effect-1a .hi-icon:hover {
	color: #f6f6f6;
}

.no-touch .hi-icon-effect-1a .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

/* Effect 1b /
.no-touch .hi-icon-effect-1b .hi-icon:hover {

	color: #f6f6f6;
}

.hi-icon-effect-1b .hi-icon:after {
	-webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2);
}

.no-touch .hi-icon-effect-1b .hi-icon:hover:after {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	opacity: 1;
}

.hi-icon i.fa_icon {
	position: relative;
	top: 25px;
}
*/


/*=================================================
20 - CAROUSEL
=================================================*/

/*
.carousel-tabs { clear: both; }
.carousel-active-tab { color: red; }
.carousel-disabled,
.mr-rotato-disabled { color: #aaa; }

.slidewrap .carousel-tabs,.slidewrap2 .carousel-tabs,.slidewrap3 .carousel-tabs  {
	padding: 0;
	clear: both;
	float:right;
}
.slidewrap.up {margin-top: -55px;}
.slidewrap.up .slidecontrols {margin-bottom: 35px;}
.slidewrap .carousel-tabs li, .slidewrap2 .carousel-tabs li,.slidewrap3 .carousel-tabs li {
    padding: 0 2px;
    display: inline-block;
}
.slidewrap .carousel-tabs a, .slidewrap2 .carousel-tabs a, .slidewrap3 .carousel-tabs a{
    background: #ddd;
    width: 25px;
    text-indent: -9999px;
    display: inline-block;
    outline: none;
    height: 10px;
}
.ie .slidewrap .carousel-tabs li,
.ie .slidewrap .carousel-tabs a,

.ie .slidewrap2 .carousel-tabs li,
.ie .slidewrap2 .carousel-tabs a,

.ie .slidewrap3 .carousel-tabs li,
.ie .slidewrap3 .carousel-tabs a {
	display: block;
	float: left;
}
.slidewrap .carousel-tabs .carousel-active-tab a, .slidewrap2 .carousel-tabs .carousel-active-tab a, .slidewrap3 .carousel-tabs .carousel-active-tab a {
	background: #777;
}

.events {
	font: normal 11px/1.4 arial, helvetica, sans-serif;
}

.carousel-next {
	margin-top: 220px;
	font-size: 0;
	background-image: url(images/icons/next.png);
	background-repeat: no-repeat;
	-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
	background-position: 18px 11px;
	height: 50px;
	position: absolute;
	width: 50px;
	right:0;
}


.carousel-prev {
	margin-top: 220px;
	font-size: 0;
	background-image: url(images/icons/prev.png);
	background-repeat: no-repeat;
	-moz-transition: .15s ease-in-out;
	-webkit-transition: .15s ease-in-out;
	-o-transition: .15s ease-in-out;
	-ms-transition: .15s ease-in-out;
	transition: .15s ease-in-out;
	left: 0;
	background-position: 15px 11px;
	height: 50px;
	position: absolute;
	width: 50px;
}


.slidecontrols {float: right;}

.slidecontrols li {float: right; margin-left:5px;}

.carousel-next.carousel-disabled, .carousel-prev.carousel-disabled {opacity: 0}
*/

/*=================================================
21 - PARALLAX SECTIONS
=================================================*/
/*
.parallax {min-height: 500px; position: relative; color:white; text-align: center; background-size:cover}
.parallax_over {height: 100%;background-color: rgba(0,0,0,.7); position: absolute; width: 100%;}
.ie8 .parallax_over {background: black; filter: alpha(opacity=70);}
.parallax h1 {font-size:35px; font-weight: 100; text-transform: uppercase;color: white; letter-spacing: 0;margin-bottom: 35px; }
.parallax_container {padding: 50px 0px;}
.rectangle {padding: 40px;line-height: 28px; border:2px solid #FFFFFF; width:70%; margin: 0 auto;color:white; text-align: center;margin-top: 100px;}
.rectangle p {margin: 0; font-size: 16px; display: block!important;}
.parallax h1, .parallax h2 {color:white;margin-bottom: 10px;}
.parallax i {color:white;}
.circle_icon {border: 1px solid white;border-radius: 100%;	-moz-border-radius: 100%;	-webkit-border-radius: 100%;
width: 130px;height: 130px; position: relative;margin: 0 auto;}
.circle_icon i {position: relative;top: 38px;}
.parallax_colum3 {width: 25%; float: left;}
.parallax_colum4 {width: 33%; float: left;}
.parallax_column_container {padding: 20px;}
*/

/*=================================================
:; - MEDIA QUERIES
=================================================*/

/* QUERIES FROM 1920px TO 1620px /

@media only screen and (min-width: 1620px) and (max-width: 1920px) {

.fullwidthbanner-container.home{
	width:100% !important;
	max-height:820px !important;
	}

}
*/

/* QUERIES FROM 1620px TO 1200px /

@media only screen and (min-width: 1200px) and (max-width: 1620px) {

.isotope_item {width: 24.9%;}
.video_caption {top:300px;}
/* #map_google {width: 30%;} /
}
*/

/* QUERIES FROM 1200px TO 960px /

@media only screen and (min-width: 960px) and (max-width: 1200px) {

.isotope_item {width: 24.9%;}

.video_caption {top:200px;}
.over_container {padding: 40px;}
*/

/* REVOLUTION CAPTIONS STYLE 4 /
/*
.style4.cap_1 {bottom: 180px; left:20px;}
.style4.cap_2 {bottom: 130px;left:20px;}
.small_black.cap_3 {bottom: 60px;left:20px;}
.style4.cap_4 {bottom: 180px; left:20px;}
.style4.cap_5 {bottom: 130px;left:20px;}
.small_black.cap_6 {bottom: 60px;left:20px;}
.style4.cap_7 {bottom: 180px; left:20px;}
.style4.cap_8 {bottom: 130px;left:20px;}
.small_black.cap_9 {bottom: 60px;left:20px;}
#map_google {width: 30%;}
/
}
*/

/* QUERIES FOR IPAD /

@media only screen and (min-width: 768px) and (max-width: 959px) {


/* ABOUT US/
.over_container {padding: 20px;}
.over_container h1 {font-size: 24px;margin: 20px 0px;}
.over_about p {font-size: 16px;}

.video_caption {top:100px;}
/*.responsive_nav {display: block;} /
/* .menu_trigger {display: block;} /
/*n.main_nav {display: none;} /
/*#logo {width: 54px;} :NOTE: We don't want to resize the logo /
.welcome_msg {font-size: 50px;}
.welcome {padding: 60px 0px;}
.welcome_text {margin-top: 22px; font-size:17px;}
.isotope_item {width: 33%;}
#tweet_feed {min-height:50px;}
h1,h2,h3,h4,h5,h6 {line-height: 25px;}

.fullwidthbanner-container.home {margin-top: 40px;}
*/

/* REVOLUTION CAPTIONS STYLE 4 /
.style4.cap_1 {bottom: 180px; left:20px;}
.style4.cap_2 {bottom: 130px;left:20px;}
.small_black.cap_3 {bottom: 60px;left:20px;}
.style4.cap_4 {bottom: 180px; left:20px;}
.style4.cap_5 {bottom: 130px;left:20px;}
.small_black.cap_6 {bottom: 60px;left:20px;}
.style4.cap_7 {bottom: 180px; left:20px;}
.style4.cap_8 {bottom: 130px;left:20px;}
.small_black.cap_9 {bottom: 60px;left:20px;}
*/

/* PARALLAX /
.circle_icon i {top: 28px;font-size: 45px;}
.circle_icon {width: 100px;height: 100px;}
*/

/*#map_google {width: 30%;}*/

/*TEAM /
/*.team_img_container {height: 180px;}/


}
*/




/* 480PX /

@media only screen and (min-width: 480px) and (max-width: 767px)  {

/*VIDEO STYLE CAPTIONS /
.video_caption {top:100px; width:300px; margin-left:-150px;}
.video_text_small { font-size:25px;padding: 10px 0px;	}
.video_text_big {font-size:40px;padding: 0px 0px 10px 0px;}
.custom_button a.video {margin-left: 0;}
.video_logo {padding: 0;}


/* ABOUT US /
.over_about {width: 100%;height: 101%;}
.over_container {padding: 20px;}
.over_container h1 {font-size: 20px;margin: 10px 0px;}
.over_about p {font-size: 14px;}


.fullwidthbanner-container.home {margin-top: 40px;}
/* .responsive_nav {display: block;} /
/* .menu_trigger {display: block;} /
/* .main_nav {display: none;} /
.container {margin: 0 20px;}
/*#logo {width: 54px;} :NOTE: We don't want to resize the logo /
.mobileAreaMenu li {width: auto;}
.mobileAreaMenu a {padding: 8px 190px;}
.page_title {font-size: 55px;}
.page_subtitle {line-height: 30px;}
.welcome_msg {text-align: center;}
.welcome {padding: 60px 0px;}
.welcome_text {text-align: center;}
.section {padding: 80px 0px;}
.isotope_item {width: 49.9%;}
.img-container{height: 281px;}
.loop {height: 280px;}
.services_icon_container h2 {clear: both; text-align: center;}
.icon_wrapper {text-align: center;}
.services_icon_container .hi-icon {float: none; margin:20px 0px 0px 0px;}
#response textarea {width: 90%;}
#response input {width:93%;}
.blog-item {margin-bottom: 20px;}
.the-title h1 {line-height: 25px;}
#tweet_feed {min-height:60px;}
h1,h2,h3,h4,h5,h6 {line-height: 25px;}


/* REVOLUTION CAPTIONS STYLE 4 /
.style4.cap_1 {bottom: 100px; left:20px;}
.style4.cap_2 {bottom: 70px;left:20px;}
.small_black.cap_3 {bottom: 30px;left:20px;}
.style4.cap_4 {bottom: 100px; left:20px;}
.style4.cap_5 {bottom: 70px;left:20px;}
.small_black.cap_6 {bottom: 30px;left:20px;}
.style4.cap_7 {bottom: 100px; left:20px;}
.style4.cap_8 {bottom: 70px;left:20px;}
.small_black.cap_9 {bottom: 30px;left:20px;}
.custom_button a {font-size: 11px;margin-left: -20px;}

#map_google {display: none;}

/* PARALLAX /
.parallax {min-height: 330px;}
.parallax h1 {font-size: 22px;}
.circle_icon i {top: 16px;font-size: 20px;}
.circle_icon {width: 50px;height: 50px;}
.parallax h1 {font-size:16px;}
.parallax h2 {font-size:16px;}
.parallax p.display {display: none;}
.parallax_column_container {padding: 5px;}
.carousel-next {margin-top: 150px;;background-position: 14px 8px;height: 30px;width: 30px;background-size: 30%;}
.carousel-prev {margin-top: 150px;;background-position: 11px 8px;height: 30px;width: 30px;background-size: 30%;}
.rectangle {margin-top: 0; padding: 10px;}

}
*/



/* 300PX /

@media only screen and (max-width: 480px)  {

/*VIDEO STYLE CAPTIONS /
.video_caption {top:50px; width:300px; margin-left:-150px;}
.video_text_small { font-size:25px;padding: 10px 0px;	}
.video_text_big {font-size:40px;padding: 0px 0px 10px 0px;}
.custom_button a.video {margin-left: 0;}
.video_logo {padding: 0;}



/* ABOUT US /
.over_about {width: 100%;height: 101%;}
.over_container {padding: 20px;}
.over_container h1 {font-size: 20px;margin: 20px 0px;}
.over_about p {font-size: 14px;}
.about_container {min-height: 200px;}

.fullwidthbanner-container.home {margin-top: 40px;}
/* .responsive_nav {display: block;} /
/* .menu_trigger {display: block;} /
/* .main_nav {display: none;} /
.container {margin: 0 20px;}
/*#logo {width: 54px;} :NOTE: We don't want to resize the logo /
.mobileAreaMenu li {width: auto;}
.page_title, .page_title.small  {font-size: 35px;margin-bottom: 10px;}
.page_subtitle{line-height: 25px;}
.mobileAreaMenu a {padding: 8px 80px;}
.isotope_item {width: 49.9%;}
.img-container{height: 204px;}
.loop {height: 203px;}
.services_icon_container h2 {clear: both; text-align: center;}
.icon_wrapper {text-align: center;}
.services_icon_container .hi-icon {float: none; margin:20px 0px 0px 0px;}
#response textarea {width: 88%;}
#response input {width:94%;}
.welcome_msg {text-align: center; font-size: 35px;line-height: 35px;}
.welcome {padding: 45px 0px;}
.welcome_text {text-align: center;font-size:16px;margin-bottom: 0;}
.section {padding: 50px 0px;}
.divider {padding: 20px 0px;}
.divider.big {padding: 30px 0px;}
.testimonial {font-size: 16px;line-height: 28px;}
.blog-item {margin-bottom: 20px;}
.the-title h1 {line-height: 25px;}
h1,h2,h3,h4,h5,h6 {line-height: 25px;}
#tweet_feed {min-height: 110px;}
.fullwidthbanner-container.home{	margin-top: 30px;	}


/* REVOLUTION CAPTIONS STYLE 4 /
.style4.cap_1 {bottom: 55px; left:8px;}
.style4.cap_2 {bottom: 35px;left:8px;}
.small_black.cap_3 {bottom: 10px;left:8px;}
.style4.cap_4 {bottom: 55px; left:8px;}
.style4.cap_5 {bottom: 35px;left:8px;}
.small_black.cap_6 {bottom: 10px;left:8px;}
.style4.cap_7 {bottom: 55px; left:8px;}
.style4.cap_8 {bottom: 35px;left:8px;}
.small_black.cap_9 {bottom: 10px;left:8px;}

.custom_button a{font-size: 11px;margin-left: -30px;}
#map_google {display: none;}


/* PARALLAX /
.parallax {min-height: 330px;}
.parallax h1 {font-size: 22px;}
.circle_icon i {top: 16px;font-size: 20px;}
.circle_icon {width: 50px;height: 50px;}
.parallax h1 {font-size:18px;}
.parallax h2 {font-size:16px;}
.parallax p {display: none;}
.parallax_column_container {padding: 5px;}
.carousel-next {margin-top: 150px;background-position: 14px 8px;height: 30px;width: 30px;background-size: 30%;}
.carousel-prev {margin-top: 150px;background-position: 11px 8px;height: 30px;width: 30px;background-size: 30%;}
.rectangle {margin-top: 0; padding: 5px; }
.rectangle p {font-size: 13px;}


/*TEAM /
.team_img_container {height: 130px;}

}
*/

/* ==========================================================================
   Media Player
   ========================================================================== */

.main-media-dialog {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    position: fixed;
    -webkit-transition-property: opacity, visibility;
    -o-transition-property: opacity, visibility;
    transition-property: opacity, visibility;
    -webkit-transition-duration: 750ms;
    -o-transition-duration: 750ms;
    transition-duration: 750ms;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    visibility: hidden;
    z-index: 99999;
}
.main-media-dialog-visible .main-media-dialog {
    opacity: 1;
    visibility: visible;
}
.main-media-dialog-close {
    cursor: pointer;
    height: 40px;
    position: absolute;
    top: 70px;
    right: 25px;
    width: 40px;
    z-index: 100;
}
.main-media-dialog-close-x-1,
.main-media-dialog-close-x-2 {
    background: #fff;
    height: 2px;
    opacity: 0;
    position: absolute;
    -webkit-transition-property: opacity, -webkit-transform;
    transition-property: opacity, -webkit-transform;
    -o-transition-property: transform, opacity, -o-transform;
    transition-property: transform, opacity;
    transition-property: transform, opacity, -webkit-transform, -o-transform;
    -webkit-transition-duration: 750ms;
    -o-transition-duration: 750ms;
    transition-duration: 750ms;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    top: 20px;
    width: 40px;
}
.main-media-dialog-visible .main-media-dialog-close-x-1,
.main-media-dialog-visible .main-media-dialog-close-x-2 {
    -webkit-transition-delay: 750ms;
    -o-transition-delay: 750ms;
    transition-delay: 750ms;
}
.main-media-dialog-visible .main-media-dialog-close-x-1 {
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 1;
}
.main-media-dialog-visible .main-media-dialog-close-x-2 {
    -webkit-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 1;
}
.main-media-dialog-frame {
    overflow: hidden;
    position: relative;
    z-index: 75;
}
.main-media-dialog-content {
    position: relative;
    height: 100%;
    width: 100%;
    z-index: 150;
    display: -webkit-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -moz-justify-content: center;
    justify-content: center;
}
.main-media-dialog-content video {
    height: auto;
    width: 80%;
}

@media (min-width: 480px) {
    .main-media-dialog-content video {
        width: 100%;
    }
}
@media (min-width: 768px) {
    .main-media-dialog-content video {
        width: 90%;
    }
}

@media (min-width: 992px) {
    .main-media-dialog-content video {
        width: 80%;
    }
}

.main-media-dialog-content video,
.main-media-dialog-content img {
    display: block;
    opacity: 0;
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity;
    -webkit-transition-duration: 750ms;
    -o-transition-duration: 750ms;
    transition-duration: 750ms;
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -o-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
.main-media-dialog-playing .main-media-dialog-content video,
.main-media-dialog-playing .main-media-dialog-content img {
    opacity: 1;
}
@-webkit-keyframes main-media-dialog-spinner-animation {
    to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@-o-keyframes main-media-dialog-spinner-animation {
    to {
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes main-media-dialog-spinner-animation {
    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.main-media-dialog-spinner {
    -webkit-animation: main-media-dialog-spinner-animation infinite 1s linear;
    -o-animation: main-media-dialog-spinner-animation infinite 1s linear;
    animation: main-media-dialog-spinner-animation infinite 1s linear;
    border: 5px solid #c3000c;
    border-bottom-color: transparent;
    border-radius: 50%;
    height: 50px;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    position: absolute;
    top: 50%;
    width: 50px;
    z-index: 100;
}


/* Shake animation */

.shake {
	animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
  }

  @keyframes shake {
	10%, 90% {
	  transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
	  transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
	  transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
	  transform: translate3d(4px, 0, 0);
	}
  }