@font-face {
  font-family: 'browsers';
  src: url('font/browsers.eot?56108678');
  src: url('font/browsers.eot?56108678#iefix') format('embedded-opentype'),
       url('font/browsers.woff?56108678') format('woff'),
       url('font/browsers.ttf?56108678') format('truetype'),
       url('font/browsers.svg?56108678#browsers') 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: 'browsers';
    src: url('../font/browsers.svg?56108678#browsers') format('svg');
  }
}
*/

 [class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "browsers";
  font-style: normal;
  font-weight: normal;
  speak: none;

  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */

  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;

  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;

  /* Animation center compensation - magrins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;

  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */

  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */

  margin-top: 20px;
}

.icon-firefox:before { content: '\e840'; } /* '' */
.icon-chrome:before { content: '\e841'; } /* '' */
.icon-opera:before { content: '\e842'; } /* '' */
.icon-ie:before { content: '\e843'; } /* '' */




/* Browser overlay */

 .browser-overlay {
	display: none;

	width: 100%;
	height: 100%;

	position: absolute;
	top: 0px;
	left: 0px;

	background: rgba(0,0,0,.7);

	z-index: 50000;

	-webkit-animation: fade 0.4s ease-in-out;
	-moz-animation: fade 0.4s ease-in-out;
}

.browser-overlay.up {
	-webkit-animation: fadeout 0.4s ease-in-out both;
	-moz-animation: fadeout 0.4s ease-in-out both;
}

.browser-overlay {
    z-index: 5000000;
}

.browser-overlay .wrapper {
	width: 400px;
	padding: 40px;

	border-radius: 4px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -240px;
	margin-top: -240px;

	box-shadow: rgba(0,0,0,0.4) 0px 0px 200px inset;

	-webkit-animation: bounceInDown 0.6s ease both;
	-moz-animation: bounceInDown 0.6s ease both;
	background-color: #373731;
}

 .browser-overlay.up .wrapper {
	-webkit-animation: bounceInUp 0.6s ease both;
	-moz-animation: bounceInUp 0.6s ease both;
}

 .browser-overlay p {
	color: #f7f7e2;
	font-size: 15px;
	margin-bottom: 5px;

	width: auto;
}

 .browser-overlay .wrapper small {
	color: #f7f7e2;
	color: rgba(247, 247, 226, 0.3);
	margin-top: -5px;
}

 .browser-overlay .wrapper small a {
	color: #f7f7e2;
	color: rgba(247, 247, 226, 0.5);
	text-decoration: none;
	-webkit-transition: all 0.2s ease;
}

 .browser-overlay .wrapper small a:hover {
	color: rgba(247, 247, 226, 0.8);
	text-decoration: underline;
}

 .browser-overlay h2 {
	color: #f7f7e2;
	margin: 0 0px 10px;
	font: normal 30px HelveticaNeue-Light, Helvetica, Arial, sans-serif;
}

 .browser-overlay h2 strong {
	font-weight: bold;
	font-family: HelveticaNeue, Helvetica, Arial, sans-serif;
}

 .browser-overlay h3 {
    color: #f7f7e2;
    font-weight: 100;
}

 .browser-overlay .device-icon {
	float: right;
	padding-left: 30px;
}












/* Animations */

@-webkit-keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-webkit-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-webkit-keyframes up {
	0% {
		-webkit-transform: translateY(0px);
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-100%);
	}
}
@-webkit-keyframes down {
	0% {
		-webkit-transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}
}

@-webkit-keyframes fadeInSmall {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-15px);
	}
	100% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
}
@-webkit-keyframes fadeUpSmall {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-15px);
	}
}
@-webkit-keyframes bounceInRight {
	0% {
		opacity: 0;
		-webkit-transform: translateX(2000px);
	}

	60% {
		opacity: 1;
	}

	80% {
		-webkit-transform: translateX(10px);
	}

	100% {
		-webkit-transform: translateX(0);
	}
}
@-webkit-keyframes bounceInDown {
	0% {
		opacity: 0;
		-webkit-transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
	}

	100% {
		-webkit-transform: translateY(0);
	}
}
@-webkit-keyframes bounceInUp {
	0% {
		opacity: 1;
		-webkit-transform: translateY(0px);
	}

	60% {
		opacity: 0;
	}

	100% {
		-webkit-transform: translateY(-2000px);
	}
}
@-webkit-keyframes posh {
    0% {
        -webkit-transform: translateY(-500px) scale(1.9);
        opacity: 0;
    }
    50% {
    	-webkit-transform: scale(1);
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

@-moz-keyframes fade {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@-moz-keyframes fadeout {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@-moz-keyframes fadeInSmall {
	0% {
		opacity: 0;
		-moz-transform: translateY(-15px);
	}
	100% {
		opacity: 1;
		-moz-transform: translateY(0);
	}
}
@-moz-keyframes bounceInRight {
	0% {
		opacity: 0;
		-moz-transform: translateX(2000px);
	}

	60% {
		opacity: 1;
	}

	80% {
		-moz-transform: translateX(10px);
	}

	100% {
		-moz-transform: translateX(0);
	}
}
@-moz-keyframes bounceInDown {
	0% {
		opacity: 0;
		-moz-transform: translateY(-2000px);
	}

	60% {
		opacity: 1;
	}

	100% {
		-moz-transform: translateY(0);
	}
}
@-moz-keyframes bounceInUp {
	0% {
		opacity: 1;
		-moz-transform: translateY(0px);
	}

	60% {
		opacity: 0;
	}

	100% {
		-moz-transform: translateY(-2000px);
	}
}