html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, hr, 
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
input {-webkit-appearance:none;-webkit-border-radius:0px;border-radius:0;outline:none;}
select {-webkit-border-radius:0px;border-radius:0;outline:none;}
html,body {-webkit-text-size-adjust:100%;width:100%;height:100%;}
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#clear {border:0;clear:both;margin:0;}
body {font:100% 'Roboto', Tahoma, Verdana, serif;font-weight:300;font-size:3vmin;min-height:100%;width:100%;line-height:1.4;position:relative;}

html { 
	background: url('../images/bg6.jpg') no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.con960 {width:960px;margin:0 auto;}
.rotate-90 {-webkit-transform: rotate(90deg);transform: rotate(90deg);}

#header {padding:1em 2em;background-color:#fff;}
#header .logo {height:7vh;float:left;}
#header .logo img {height:100%;}
#header .info {float:right;line-height:7vh;font-size:1.5em;font-weight:700;color:#0433c4;}

#block1 {padding:1em 2em;min-height:calc(100vh - 1em - 7vh);background-color:rgba(0,0,0,0.5);color:#fff;padding-top:20vh;line-height:2em;font-size:1.4em;}
#block1 .line {width:20%;border-top:3px solid #fff;}

#block2 {padding:3em 2em 3em 6em;background-color:#fff;position:relative;line-height:1.5em;}
#block2 h1 {font-weight:900;font-size:2em;position:absolute;top:2.5em;left:0;color:#999;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);}
#block2 h2 {font-size:1.4em;margin-bottom:0.5em;color:#fc0;}
#block2 .images {float:right;margin:2em 3em 2em 3em;}
#block2 .images .item {float:left;width:30vmin;height:30vmin;overflow:hidden;position:relative;
-webkit-transform: translateY(-50%) rotate(45deg);
-ms-transform: translateY(-50%) rotate(45deg);
transform: translateY(-50%) rotate(45deg);}
#block2 .images .item:nth-child(2) {margin-top:25vmin;margin-left:-5vmin;}
#block2 .images .item img {height:100%;
-webkit-transform: rotate(-45deg) scale(1.44);
-ms-transform: rotate(-45deg) scale(1.44);
transform: rotate(-45deg) scale(1.44);}

#block3 {padding:3em 2em 3em 6em;min-height:100vh;position:relative;line-height:1.5em;overflow:hidden;z-index:1;
background: url('../images/bg2.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#block3 .bg1 {width:100vh;height:100vh;background-color:#fff;position:absolute;top:0;left:20vw;z-index:5;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);}
#block3 .bg2 {width:60vw;height:100%;background-color:#fff;position:absolute;top:0;left:0;z-index:5;}
#block3 .content {z-index:10;position:relative;width:40vw;}
#block3 .content h1 {font-weight:900;font-size:2em;position:absolute;top:1.5em;left:-3.5em;color:#ccc;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);}
#block3 .content h2 {font-size:1.4em;margin-bottom:0.5em;color:#0433c4;}
#block3 .content ul {list-style-type:square;margin-left:2em;}
#block3 .content ul ul {list-style-type:circle;margin-left:2em;}

#block4 {padding:3em 6em 3em 2em;min-height:100vh;position:relative;line-height:1.5em;overflow:hidden;z-index:1;
background: url('../images/bg5.jpg') no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}
#block4 .bg1 {width:100vh;height:100vh;background-color:#fff;position:absolute;top:0;right:20vw;z-index:5;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);}
#block4 .bg2 {width:40vw;height:100vh;background-color:#fff;position:absolute;top:0;right:0;z-index:5;}
#block4 .content {z-index:10;position:relative;text-align:right;}
#block4 .content h1 {font-weight:900;font-size:2em;position:absolute;top:1.5em;right:-3em;color:#ccc;
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);}

@media only screen and (min-device-width: 320px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
	#header .logo img {height:auto;width:35vw;}
	#block3 {background-image:none;background-color:#eee;}
	#block3 .bg1, #block3 .bg2 {display:none;}
	#block3 .content {width:auto;}
	#block4 {min-height:0;background-color:#fff;background-image:none;}
	#block4 .bg1, #block4 .bg2 {display:none;}
}