/* ************************************************************************************************************************************ */
/* layout	common                                               													update     06.08.14 */
/* file 	layout_01/design.css		                      														version      1.0/00 */
/* 																																		*/
/* **************************************** Copyright by beratungscenter.net - Reinhard Lange ***************************************** */
/* ------------------------------------------------------------------------------------------------------------------------------------	*/
/* ------------------------------------------------------------------------------------------------------------------ 1.0/00 - 06.08.14 */
/* link		-> http://tympanus.net/codrops/2014/08/05/page-preloading-effect															*/
/* info		-> */
/* use in	-> */
/* ------------------------------------------------------------------------------------------------------------------------------------	*/

/* ------------------------------------------------------------------------------------------------------------------ 1.0/00 - 06.08.14 */
/* fonts	-> 	*/
@font-face 	{font-weight:normal;font-style:normal;font-family:'Blokk';
				src:url('../webfonts/blokk/BLOKKRegular.eot');
				src:url('../webfonts/blokk/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
		 			url('../webfonts/blokk/BLOKKRegular.woff') format('woff'),
		 			url('../webfonts/blokk/BLOKKRegular.svg#BLOKKRegular') format('svg');
			}

@font-face 	{font-weight:normal;font-style:normal;font-family:'feather';
				src:url('../webfonts/feather/feather.eot?-9jv4cc');
				src:url('../webfonts/feather/feather.eot?#iefix-9jv4cc') format('embedded-opentype'),
					url('../webfonts/feather/feather.woff?-9jv4cc') format('woff'),
					url('../webfonts/feather/feather.ttf?-9jv4cc') format('truetype'),
					url('../webfonts/feather/feather.svg?-9jv4cc#feather') format('svg');
			}

.ip-header	{position:fixed;top:0;z-index:100;min-height:460px;width:100%;height:100%;background:#f1f1f1;}

.ip-header h1	{margin:0;}

.ip-logo, .ip-loader	{position:absolute;left:0;width:100%;opacity:0;cursor:default;pointer-events:none;}

.ip-logo 		{top:0;height:100%;-webkit-transform:translate3d(0,25%,0);transform:translate3d(0,25%,0);}

.ip-loader 		{bottom:20%;}

.ip-header .ip-inner 	{display:block;margin:0 auto;}

.ip-header .ip-logo svg {position:absolute;min-height:200px;height:25%;}

.loaded .ip-header .ip-logo svg	{max-height:300px;}

.ip-header .ip-logo svg path 	{fill:#1c9ccd;}

.ip-header .ip-loader svg path 	{fill:none;stroke-width:6;}

.ip-header .ip-loader svg path.ip-loader-circlebg	{stroke:#ddd;}

.ip-header .ip-loader svg path.ip-loader-circle 	{stroke:#EE3338;-webkit-transition:stroke-dashoffset 0.2s;transition: stroke-dashoffset 0.2s;}
														
/* ------------------------------------------------------------------------------------------------------------------ 1.0/00 - 06.08.14 */
/* content -> 	*/
.ip-main 		{overflow:hidden;margin:0 auto;padding:160px 0 10em 0;max-width:1100px;width:90%;}

.ip-main h2 	{margin:0 auto;padding:0.8em 0 0.8em;color:#1E4579;text-align:center;font-family:'Titillium Web',Arial,Verdana,Helvetica,'Trebuchet MS',Geneva,sans-serif;
					font-weight:100;font-size:4.00em;font-size:4vw;line-height:1;letter-spacing:-0.05em;}

.browser 		{margin:0 auto;padding-top:8%;min-height:400px;max-width:1000px;width:100%;border-radius:8px;border:1px solid #ccc;
					color:#d3d3d3;
					background:#fff url('../../images/browser.png') no-repeat 50% 0;
					background-size:100%;}

.box 			{float:left;padding:3.5em;width:33.3%;font-size:0.7em;line-height:1.5;}

.box p 			{font-family:'Blokk',Arial,sans-serif;}

.box .norm_txt  {color:#636363;font-family:'Titillium Web',Arial,Verdana,Helvetica,'Trebuchet MS',Geneva,sans-serif;font-size:1.70em;line-height:1.05;}

[class^="icon-"]::before, 
[class*=" icon-"]::before {
	display: block;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border-radius: 5px;
	background: #dfdfdf;
	color: #fff;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 5em;
	font-family: 'FontAwesome';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

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

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

.icon-heart:before 	{content:"\e024";}

.icon-default {display: block;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border-radius: 5px;
	background: #dfdfdf;
	color: #fff;
	text-align: center;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 5em;
	font-family: 'FontAwesome';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;}

/* ------------------------------------------------------------------------------------------------------------------ 1.0/00 - 06.08.14 */
/* animations */
/* initial animation of header elements */
.loading .ip-logo, .loading .ip-loader {opacity: 1;}

.loading .ip-logo 	{-webkit-animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;animation: animInitialLogo 1s cubic-bezier(0.7,0,0.3,1) both;}

@-webkit-keyframes animInitialLogo {
	from { opacity: 0; }
}

@keyframes animInitialLogo {
	from { opacity: 0; }
}

.loading .ip-loader {
	-webkit-animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animInitialLoader 1s cubic-bezier(0.7,0,0.3,1) both;
}

@-webkit-keyframes animInitialLoader {
	from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); }
}

@keyframes animInitialLoader {
	from { opacity: 0; -webkit-transform: scale3d(0.5,0.5,1); transform: scale3d(0.5,0.5,1); }
}

/* header elements when loading finishes */
.loaded .ip-logo, .loaded .ip-loader {opacity: 1;}

.loaded .ip-logo {
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	-webkit-animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedLogo 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLogo {
	to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

@keyframes animLoadedLogo {
	to { -webkit-transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); transform: translate3d(0,100%,0) translate3d(0,50px,0) scale3d(0.65,0.65,1); }
}

.loaded .ip-loader {
	-webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

@keyframes animLoadedLoader {
	to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); }
}

/* change the color of the logo */
.loaded .ip-logo svg path 	{-webkit-transition: all 0.5s ease 0.3s;transition: all 0.5s ease 0.3s;fill:#fff;}

/* header animation when loading finishes */
.loaded .ip-header {
	-webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
	animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards;
}

@-webkit-keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); }
}

@keyframes animLoadedHeader {
	to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); }
}

/* content animations */
.loaded .ip-main h2,
.loaded .ip-main .browser,
.loaded .ip-main .browser .box,
.loaded .codrops-demos {
	-webkit-animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
	animation: animLoadedContent 1s cubic-bezier(0.7,0,0.3,1) both;
}

.loaded .ip-main h2,
.loaded .ip-main .browser .box:first-child {
	-webkit-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.loaded .codrops-demos,
.loaded .ip-main .browser .box:nth-child(2) {
	-webkit-animation-delay: 0.15s;
	animation-delay: 0.15s;
}

.loaded .ip-main .browser .box:nth-child(3) {
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

@-webkit-keyframes animLoadedContent {
	from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); }
}

@keyframes animLoadedContent {
	from { opacity: 0; -webkit-transform: scale3d(0.3,0.3,1); transform: scale3d(0.3,0.3,1); }
}

/* change layout class for header */
.layout-switch .ip-header 	{position:absolute;}

/* No JS */
.no-js .ip-header 			{position: relative;min-height:0px;}

.no-js .ip-header .ip-logo 	{margin-top:20px;height:180px;opacity:1;-webkit-transform:none;transform:none;}

.no-js .ip-header .ip-logo svg path	{fill:#fff;}

/* media queries */
@media screen and (max-width: 45em) {
	.ip-main h2 {font-size:2.25em;font-size:10vw;}
	.box 		{width:100%;}
}
/* -------------------------------------------------------------------------------------------------------------------------------- END */
/* ************************************************************************************************************************************ */