@font-face {
    font-family: 'light';
    src: url('../SUB-SUB-2016/css/font-face/DINNextLTProLight.eot');
    src: url('../SUB-SUB-2016/css/font-face/DINNextLTProLight.eot') format('embedded-opentype'),
         url('../SUB-2016/css/font-face/DINNextLTProLight.woff') format('woff'),
         url('../SUB-2016/css/font-face/DINNextLTProLight.ttf') format('truetype'),
         url('../SUB-2016/css/font-face/DINNextLTProLight.svg#DINNextLTProLight') format('svg');
    }
    
    @font-face {
        font-family: 'bold-italic';
        src: url('../SUB-2016/css/font-face/dinnextltpro-bolditalic.eot');
        src: url('../SUB-2016/css/font-face/dinnextltpro-bolditalic.eot') format('embedded-opentype'),
             url('../SUB-2016/css/font-face/dinnextltpro-bolditalic.woff') format('woff'),
             url('../SUB-2016/css/font-face/dinnextltpro-bolditalic.ttf') format('truetype'),
             url('../SUB-2016/css/font-face/dinnextltpro-bolditalic.svg#DINNextLTProBoldItalic') format('svg');
    }
    
    @font-face {
        font-family: 'regular';
        src: url('../SUB-2016/css/font-face/dinnextltpro-regular.eot');
        src: url('../SUB-2016/css/font-face/dinnextltpro-regular.eot') format('embedded-opentype'),
             url('../SUB-2016/css/font-face/dinnextltpro-regular.woff') format('woff'),
             url('../SUB-2016/css/font-face/dinnextltpro-regular.ttf') format('truetype'),
             url('../SUB-2016/css/font-face/dinnextltpro-regular.svg#DINNextLTProRegular') format('svg');
    }
    @font-face {
        font-family: 'condensed';
        src: url('../SUB-2016/css/font-face/dinnextltpro-condensed.eot');
        src: url('../SUB-2016/css/font-face/dinnextltpro-condensed.eot') format('embedded-opentype'),
             url('../SUB-2016/css/font-face/dinnextltpro-condensed.woff') format('woff'),
             url('../SUB-2016/css/font-face/dinnextltpro-condensed.ttf') format('truetype'),
             url('../SUB-2016/css/font-face/dinnextltpro-condensed.svg#DINNextLTProCondensed') format('svg');
    }
    
    @font-face {
        font-family: 'heavy';
        src: url('../SUB-2016/css/font-face/dinnextltpro-heavy.eot');
        src: url('../SUB-2016/css/font-face/dinnextltpro-heavy.eot') format('embedded-opentype'),
             url('../SUB-2016/css/font-face/dinnextltpro-heavy.woff') format('woff'),
             url('../SUB-2016/css/font-face/dinnextltpro-heavy.ttf') format('truetype'),
             url('../SUB-2016/css/font-face/dinnextltpro-heavy.svg#DINNextLTProHeavy') format('svg');
    }
    
    *{font-family: 'regular', sans-serif;}
    
    
	body {background-color: #000;}
		a {text-decoration: none;color: #fff;outline: none;}
		header {position: relative;display: grid;grid-template-columns:300px 5fr;align-items: center;min-height: 85vh;z-index: 1;width:90%;margin:0 auto;}
		@media screen and (max-width: 768px) {header {grid-template-columns:1fr;}}

		header .logo{width:200px;margin:0 auto;z-index:100;}
		header .logo img{width:90%;margin:0 auto;max-width:250px;}
		.menu {position: relative;z-index: 5;display: flex;font-size: 3em;align-items: flex-start;justify-content: flex-end;width: 100%;}
		.menu .menu__item{color: #fff;line-height: 1.25;text-transform: lowercase;font-weight: 700;display: flex;flex-direction: row;align-items: center;justify-content: center;flex-wrap: wrap;padding-left: 6px;transition: all 0.2s ease-in-out;position: relative;margin: 0 5% 0 0;}
		.menu .menu__item span {transition: all 0.2s ease-in-out;}
		.menu .menu__item:before {content: "";width: 70%;height: 33%;background: linear-gradient(45deg, #f19872, #e86c9a); position: absolute;left: 2px;bottom: 4%;z-index: -1;opacity: 1;transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1), width 1s cubic-bezier(0.2, 1, 0.3, 1) 0.7s, opacity 0.8s cubic-bezier(0.2, 1, 0.3, 1) 0.2s;}
		.menu .menu__item:nth-child(2)::before {background: linear-gradient(45deg, #ee2d29, #f8ae2c);}
		.menu .menu__item:nth-child(4)::before {background: linear-gradient(45deg, #ee2d29, #f8ae2c);}
		.menu .menu__item:nth-child(5)::before {background: linear-gradient(45deg, #9d316e, #de2d3e);}
		.menu .menu__item:nth-child(6)::before {background: linear-gradient(45deg, #00ac53, #23c3e0);}
		.menu .menu__item:hover::before {height: 6%;transition: all 0.6s cubic-bezier(0.2, 1, 0.3, 1);}
		
		.box{color:#fff;}
		.scene {position: fixed;top: 0;left: 0;width: 100%;height: 100vh;z-index: -1;pointer-events: none;}
		.scene .blob-1 path {fill: url(#gradient-1);}
		.scene .blob-2 path {fill: url(#gradient-2);}
		.scene .blob-3 path {fill: url(#gradient-3);}
		.scene .blob-4 path {fill: url(#gradient-4);}
		.scene .blob-5 path {fill: url(#gradient-5);}
		.scene .blob-6 path {fill: url(#gradient-6);}
		.scene path:nth-of-type(1) {fill-opacity: 0.1;}
		.scene path:nth-of-type(2) {fill-opacity: 0.2;}
		.scene path:nth-of-type(3) {fill-opacity: 0.3;}
		.scene path:nth-of-type(4) {fill-opacity: 0.4;}
		.scene path:nth-of-type(5) {fill-opacity: 0.5;}
		.scene path:nth-of-type(6) {fill-opacity: 0.6;}
		
		.title{position:realtive;padding: 10px;box-shadow: 0px 0px 10px rgba(255,255,255,0.5);background-color: rgba(255,255,255,.1);}
		.title svg{position:absolute;right:6%;width:30px;transform-origin:50%;}
		.title.open svg{transform:rotate(180deg);}
		.title svg path{fill:#A31F3F;}
		.title:hover{cursor:pointer;}
		.title:hover svg path{fill:#f19872;}
		
		.title span{font-family:'heavy';display: inline-block;transform:translate(0,50px);opacity:0;transition:all 300ms ease-in-out;}
		.title span.active{transform:translate(0,0);opacity:1;}
		@media screen and (max-width: 900px) {
		    .title span{font-size:1.5rem;}
		}
		@media screen and (max-width: 460px) {
		    .title span{font-size:1rem;}
		}
		
		.subtitle{font-size:1rem;margin:0;}
		.textContainer{display:grid;grid-template-columns:1fr 1fr;height:0;overflow:hidden;transition: height 500ms ease-in-out;}
		.textContainer.open{height:auto;}
		@media screen and (max-width: 900px) {
		    .textContainer{display:grid;grid-template-columns:1fr;}
		}
		
		.aspect p{font-size:1rem;margin-left:50px;margin-top:0;}
		.aspect ul{margin-left:50px;margin-top:0;padding:0;}
		.aspect .subtitle{font-size:.8rem;margin:0;}
		
		
		
		
		.retoContainer{border:1px solid #fff;padding:20px;width:calc(100% - 40px);}
		.retoContainer .retoTitle{font-weight:800;text-align:center;}
		.retoContainer a{color: #a31f3f;font-weight: bolder;}