html{height:100%;}
body{font-family:'Titillium Web'; padding:0; margin:0;height:100%;}

.wrapper{position:relative; background:url(img/bg.jpg) no-repeat center center; background-size:cover; min-height:100%;}

header{position:fixed; left:0; right:0; top:0; height:70px; z-index:9;}
header{background: linear-gradient(143deg, rgba(153,153,153,1) 0%, rgba(209,209,209,1) 21%, rgba(255,255,255,1) 30%, rgba(244,244,244,1) 40%, rgba(235,235,235,1) 48%, rgba(213,213,213,1) 58%, rgba(237,237,237,1) 71%, rgba(218,218,218,1) 82%, rgba(182,182,182,1) 96%);}
header h1{margin:0; padding:12px 0 0 15px; font-size:28px; font-weight:bold; letter-spacing:2px; color:#666; text-shadow:2px 2px 1px rgba(200,200,200,1);}
header .header-brands{position:absolute; right:0; top:15px;}
header .header-brands a{padding:0 10px; opacity:0.8;}
header .header-brands a:hover{opacity:1;}


section.main{position:relative; width:1280px; height:720px; margin:0px auto 100px auto; z-index:8; display:none;}
section.main.active{display:flex;}

section.main .layer{position:absolute; left:0; top:0; right:0; bottom:0; width:100%; height:100%; z-index:19; background-size:110%; background-position:center center; background-repeat:no-repeat;}

section.main.scene1 .layer.layer1{background-image:url(img/00-00.png);}
section.main.scene1 .layer.layer2{background-image:url(img/00-01.png);}

section.main.scene2 .layer.layer1{background-image:url(img/01-00.png);}
section.main.scene2 .layer.layer2{background-image:url(img/01-01.png);}

section.main.scene3 .layer.layer1{background-image:url(img/02-00.png);}
section.main.scene3 .layer.layer2{background-image:url(img/02-01.png);}

section.main.scene4 .layer.layer1{background-image:url(img/03-00.png);}
section.main.scene4 .layer.layer2{background-image:url(img/03-01.png);}

section.main a.pointer{position:absolute;display:block;width:50px;height:50px;background:rgba(0,0,0,0.0);z-index:20;}

section.main a.pointer.point1{left:33%; top:38%;}
section.main a.pointer.point2{left:64%; top:26%;}
section.main a.pointer.point3{left:51%; top:48%;}
section.main a.pointer.point4{left:40%; top:66%;}
section.main a.pointer.point5{left:56%; top:60%;}
section.main a.pointer.point6{left:62%; top:74%;}
section.main a.pointer.point7{left:74%; top:47%;}

section.main a.pointer.point11{left:25%; top:22%;}
section.main a.pointer.point12{left:58%; top:22%;}
section.main a.pointer.point13{left:78%; top:18%;}
section.main a.pointer.point14{left:58%; top:81%;}

section.main a.pointer.point21{left:30%; top:49%;}
section.main a.pointer.point22{left:52%; top:70%;}

section.main a.pointer.point31{left:33%; top:31%;}
section.main a.pointer.point32{left:18%; top:48%;}

a.move{position:fixed;display:block;width:25%;height:150px; overflow:visible;background-color:rgba(0,0,0,0.0);z-index:20; background-repeat:no-repeat; background-size:contain; background-position:center center;}
a.move.prev{left:20px; top:30%; background-image:url(img/sol_ok.png);}
a.move.next{right:20px; bottom:30%; background-image:url(img/sag_ok.png);}

footer{background:#ddd; position:fixed; left:0; right:0; bottom:0; text-align:center; font-size:13px; z-index:9;}

@media (max-width:1400px){
   section.main{width:1080px; height:608px;}
   a.move{width:15%;}
}