/* * **** **** ** ** * ** ** ** ** ** ** ** * ** ** ** ** ** **** ** * ** **** ** ** ** ** ** * ** ** ** ** ** ** ** * ** ** **** **** * M A R K U S W I L D Z E I S S * --- HTML5 -- CSS3 -- JS --- * * --------------------------- * * --- MARKUSWILDZEISS.COM --- * * ---- UPDATED: 30/08/16 ---- * */
 @import 'https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700';
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent
}
body{
    line-height:1
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block
}
nav ul{
    list-style:none
}
blockquote,q{
    quotes:none
}
blockquote:before,blockquote:after,q:before,q:after{
    content:'';
    content:none
}
a{
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent
}
ins{
    background-color:#ff9;
    color:#000;
    text-decoration:none
}
mark{
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold
}
del{
    text-decoration:line-through
}
abbr[title],dfn[title]{
    border-bottom:1px dotted;
    cursor:help
}
table{
    border-collapse:collapse;
    border-spacing:0
}
hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0
}
input,select{
    vertical-align:middle
}
.mw{
	position: absolute;
    width:192px;
    height:192px;
    display:inline-block
}
.mw .cube{
    position:relative;
    left:50%;
    top:0;
    transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%);
    background-color:#212221;
    display:block
}
.mw.big .cube{
    width:192px;
    height:192px
}
.mw.big.name,.mw.big.slogan{
    width:auto;
    height:auto
}

.mw.small,.mw.small .cube{
    width:60px;
    height:60px
}
.mw.center{
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    -moz-transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%)
}
.mw .name{
    position:relative;
    display:block;
    font-size:24pt;
    color:#212221;
    line-height:24pt;
    text-align:center;
    font-weight:700;
    text-transform:uppercase
}
.mw .slogan{
    position:relative;
    display:block;
    font-size:24pt;
    color:#212221;
    line-height:24pt;
    text-transform:uppercase;
    text-align: center;
}
.mw .slogan .small {
	font-size: 16pt;	
}
.mw .slogan .small a {
	color: #212221;
	text-decoration: none;
	position: relative;
	display: inline-block;
	line-height: 18pt;
}

.mw .slogan .small a:before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1px;
	width: 100%;
	background-color: #212221;
	transform-origin: bottom right;
	
	transform: scaleX(0);
		
	-webkit-transition: transform .25s ease-out;
	-moz-transition: transform .25s ease-out;
	transition: transform .25s ease-out;
}
.mw .slogan .small a:hover:before {
	-webkit-transform: scaleX(1);
	-moz-transform: scaleX(1);
	transform: scaleX(1);
	transform-origin: bottom left;
}
.mw .inner{
    position:absolute;
    left:10%;
    top:10%;
    width:80%;
    height:80%;
    display:block;
    background-color:#383938
}
.mw.big.name .inner,.mw.big.slogan .inner{
    width:153.6px;
    height:153.6px
}
.mw .inner .line_long{
    position:absolute;
    top:27%;
    width:8%;
    height:46%;
    background-color:#5c5c5c
}
.mw .inner .line_short{
    position:absolute;
    width:8%;
    height:36%;
    background-color:#467eaf
}
.mw .inner .line_long.m1{
    left:22%
}
.mw .inner .line_short.m{
    top:27%;
    left:34%
}
.mw .inner .line_long.m2{
    left:46%
}
.mw .inner .line_short.w{
    top:37%;
    left:58%
}
.mw .inner .line_long.w3{
    left:70%
}
html,body{
    height:100%
}
body{
    background-color:#f5f5f5;
    font-family:"Open Sans Condensed",Helvetica,Arial,"sans-serif";
    font-size:18px;
    color:#333
}
nav{
    position:fixed;
    top:20px;
    left:20px;
    right:20px;
    height:60px;
    display:block
}
nav .inner{
    position:absolute;
    left:65px;
    right:0;
    top:0;
    height:60px;
    display:block;
    background-color:#212221
}
nav .inner h1.brandname{
    position:absolute;
    right:20px;
    top:0;
    line-height:60px;
    vertical-align:middle;
    text-transform:uppercase;
    font-size:24px;
    color:#f5f5f5
}
.arrows{
    position:fixed;
    left:50%;
    bottom:20px;
    text-align:center;
    transform:translateX(-50%);
    -moz-transform:translateX(-50%);
    -webkit-transform:translateX(-50%)
}
.arrows .arrow{
    position:relative;
    display:inline-block;
    float:left;
    clear:none;
    width:40px;
    height:40px;
    border:1px solid #000;
    cursor:pointer;
    -webkit-transition:background-color 0.2s ease-out;
    -moz-transition:background-color 0.2s ease-out;
    -ms-transition:background-color 0.2s ease-out;
    -o-transition:background-color 0.2s ease-out;
    transition:background-color 0.2s ease-out
}
.arrows .arrow:hover{
    background-color:#FFF
}
.arrows .arrow .line{
    position:absolute;
    width:18px;
    height:2px;
    background-color:#000;
    display:block;
    line-height:0;
    font-size:0;
    left:50%;
    top:50%
}
.arrows .arrow.down .line.l{
    transform:translate(-85%, -50%) rotate(45deg);
    -moz-transform:translate(-85%, -50%) rotate(45deg);
    -webkit-transform:translate(-85%, -50%) rotate(45deg)
}
.arrows .arrow.down .line.r{
    transform:translate(-15%, -50%) rotate(-45deg);
    -moz-transform:translate(-15%, -50%) rotate(-45deg);
    -webkit-transform:translate(-15%, -50%) rotate(-45deg)
}
.arrows .arrow.up{
    margin-left:5px
}
.arrows .arrow.up .line.l{
    transform:translate(-85%, -50%) rotate(-45deg);
    -moz-transform:translate(-85%, -50%) rotate(-45deg);
    -webkit-transform:translate(-85%, -50%) rotate(-45deg)
}
.arrows .arrow.up .line.r{
    transform:translate(-15%, -50%) rotate(45deg);
    -moz-transform:translate(-15%, -50%) rotate(45deg);
    -webkit-transform:translate(-15%, -50%) rotate(45deg)
}