/** * Dude */ @font-face { font-family: 'Monday'; src: url('fonts/Monday-Bold.eot'); /* IE9 Compat Modes */ src: url('fonts/Monday-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/Monday-Bold.woff') format('woff'), /* Modern Browsers */ url('fonts/fonts/Monday-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('fonts/Monday-Bold.svg#286e2e7b2104b896c1aeab00404b3680') format('svg'); /* Legacy iOS */ font-style: normal; font-weight: 700; } html { overflow: hidden; -webkit-tap-highlight-color: transparent; } html, body { width: 100%; height: 100%; } body { background-color: #141414; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility!important; -moz-osx-font-smoothing: grayscale; } * { margin: 0; padding: 0; border: 0; outline: none; box-sizing: border-box; } /** * Core */ #application { position: relative; width: 100%; height: 100%; font-size: 13px; color: #fff; text-align: center; font-family: 'Raleway', sans-serif; } #wrapper { position: relative; width: 100%; height: 100%; } #wrapper h1 { font-size: 1em; font-weight: 100; } #wrapper h2 { font-size: 1em; font-weight: 100; } #wrapper h3 { font-size: 1em; font-weight: 100; } #wrapper h4 { font-size: 1em; font-weight: 100; } #wrapper img { position: relative; width: 100%; height: auto; display: block; } #wrapper video { position: relative; } #wrapper .upcase { text-transform: uppercase; } #wrapper .locase { text-transform: lowercase; } /** * Header */ #wrapper header { position: fixed; font-family: 'Montserrat', sans-serif; top: 0; left: 0; z-index: 10; width: 100%; height: 0; } #wrapper header .nav-icon { position: absolute; left: 110px; z-index: 1; width: 30px; top: 2px; height: 24px; text-align: left; overflow: hidden; border-radius: 1px; opacity: 0; cursor: pointer; line-height: 23px; } #wrapper header .nav-icon .wrap-icon { position: absolute; top: 0; left:0; width: 100%; height: 100%; background: rgba(20,20,20,.15); } #wrapper header .nav-icon .icon { position: absolute; top: 0; left: 0;} #wrapper header .nav-icon .icon img { position: relative; padding: 7px 10px; width: 100%;} #wrapper header .nav-icon span { text-transform: uppercase; font-family: 'Raleway', sans-serif; font-size: 10px; padding-left: 29px;} #wrapper header #main-nav { position: relative; left: 2em; top: 1.5em; } #wrapper header #main-nav #logo { float: left; width: 80px; height: 52px; background: url(/statics/img/assets/DUDE_bianco_new.svg) no-repeat left center; background-size: 100%; text-indent: -999em;margin-top: 8px;} #wrapper header #main-nav #logo.color { background: url(/statics/img/assets/DUDE_azzurro_new.svg) no-repeat left center; background-size: 100%; } #wrapper header #main-nav .nav-cont { position: absolute; left: 135px; top: 5px; z-index: 2; } #wrapper header #main-nav .nav-cont ul { position: relative; list-style: none; padding-top: 1px; } #wrapper header #main-nav .nav-cont ul li { position: relative; font-size: 12px; display: block; text-transform: uppercase; float: left; } #wrapper header #main-nav .nav-cont ul li a { color: #fff; text-decoration: none; padding: 20px; } #wrapper header #line { position: absolute; left: 0; width: 1.2em; height: 2px; top: 30px; } #wrapper header #line #wrap { position: relative; width: 100%; height: 100%; background-color: rgba(0,109,140,1); } /** * Views */ #wrapper section { position: relative; width: 100%; height: 100%; z-index: 1; } #wrapper section .view { position: absolute; width: 100%; height: 100%; color: #fff; overflow: hidden; /*-webkit-perspective: 2000px; perspective: 2000px;*/ -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } #wrapper section .view .visual { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1; } #wrapper section .view .visual img { position: absolute; z-index: 1; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } #wrapper section .view .visual video { position: absolute; z-index: 2; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } #wrapper section .view .visual .black { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); z-index: 5; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .touch #wrapper section .view .visual .black, .touch #wrapper section .view .visual video { display: none; visibility: hidden; } #wrapper section .view section { position: relative; width: 100%; height: 100%; z-index: 2; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } #wrapper section .view section h1 { z-index: 2; color: #fff; position: relative; font-weight: 600; text-align: left; line-height: 1.3em; font-size: 3em; } #wrapper section .view .back { position: absolute; top: 2.2em; z-index: 10; right: 2em; color: rgba(255,255,255,.7); text-transform: uppercase; font-weight: 600; font-size: .9em; cursor: pointer; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } #wrapper section .view .section-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-perspective: 2000px; perspective: 2000px; -webkit-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } #wrapper #player { position: absolute; top: 0; left: 0; z-index: 30; width: 100%; height: 100%; background: #141414; display: none; } #wrapper #player iframe { position: relative; width: 100%; height: 100% } #wrapper #player .close { position: absolute; top: 0; right: 0; width: 72px; height: 72px; background: #141414 url(/statics/img/assets/icn-closevideo-DUDE.svg) no-repeat center; cursor: pointer; } #wrapper #page-preload { position: absolute; bottom: 0; left: 0; width: 0%; height: 1em; background-color: #006d8c; z-index: 5; } #wrapper section .view, #wrapper section .view img { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } /** * Works */ #wrapper section .view section ul.grid { position: relative; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0;} #wrapper section .view section ul.grid li { position: relative; overflow: hidden; cursor: pointer; float: left; } #wrapper section .view section ul.grid li { /*-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);*/ } #wrapper section .view section ul.grid li img { position: relative; display: block; } #wrapper section .view section ul.grid li img { /*-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);*/ } #wrapper section .view section ul .thumb-cont { position: relative; width: 100%; height: 100%; background-color: rgba(0,0,0,1); } #wrapper section .view section ul .thumb-cont .infos { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } #wrapper section .view section ul .thumb-cont .infos .text { position: absolute; left: 0; bottom: 0; text-transform: uppercase; letter-spacing: .1em; text-align: left; padding: 1.5em 2em; } #wrapper section .view section ul .thumb-cont .infos h2 { position: relative; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.3em; } #wrapper section .view section ul .thumb-cont .infos .line { position: relative; height: 2px; background-color: #006d8c; margin: .8em 0; width: 5em; } #wrapper section .view section ul .thumb-cont .infos h3 { position: relative; font-size: 1em; color: rgba(255,255,255,.6); } #wrapper section .view section ul .thumb-cont .infos h3 span { position: relative; top: -.1em; } #wrapper section .view section ul .thumb-cont img { opacity: .5; } /** * Leaf */ #wrapper section #detail.view .head { display: table; width: 100%; height: 100%; position: absolute; top: 0; } #wrapper section #detail.view .head .v-align { display: table-cell; vertical-align: middle; } #wrapper section #detail.view .head .v-align .line { width: 8em; height: 2px; background-color: #006d8c; margin: 3.5em auto 1.5em; } #wrapper section #detail.view .head .v-align h2 { position: absolute; text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 300; font-size: 1.5em; width: 100%; } #wrapper section #detail.view .head .v-align h2 .year { color: #ccc; } #wrapper section #detail.view .head .v-align h1 { text-align: center; } #wrapper section #detail.view .head .v-align h1 { text-transform: uppercase; font-family: 'Oswald', sans-serif; font-weight: 400; font-size: 3em; } #wrapper section #detail.view .head .v-align p { width: 30em; margin: 0 auto; letter-spacing: .1em; line-height: 1.5em; padding: 2em 0; overflow: hidden; } #wrapper section #detail.view .head .v-align a { text-decoration: none; color: rgb(0, 109, 140); } #wrapper section #detail.view .head .v-align a:hover { color: #fff; } #wrapper section #detail.view .head .v-align p span { position: relative; top: -.1em; } #wrapper section #detail.view .head .v-align ul { list-style: none; padding: 0; } #wrapper section #detail.view .head .v-align ul li { display: inline; text-transform: uppercase; transition:.5s; } #wrapper section #detail.view .head .v-align ul li a { color: rgba(255,255,255,1); border: 2px solid rgba(255,255,255,.5); text-decoration: none; padding: 1.2em 1.5em; font-weight: 700; letter-spacing: .15em; display: inline-block; margin: .5em; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } #wrapper section #detail.view .head .v-align ul li.selected { opacity: .5; } .touch #wrapper section #detail.view.view .visual .black { display: block; visibility: visible; } #wrapper section .view section .gallery { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; } #wrapper section .view section .gallery ul { position: relative; width: auto; display: block; height: 100%; padding-top: 2em; } #wrapper section .view section .gallery ul li { position: relative; overflow: hidden; display: inline-block; float: left; height: 100%; background-color: rgba(0,0,0,1); cursor: pointer; } #wrapper section .view section .gallery ul li img { position: relative; margin: 0 auto; border: 0; height: 100%; width: auto; z-index: 1; display: block; } #wrapper section .view section .gallery ul li iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; display: none; } #wrapper section .view section .gallery ul li .black { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-color: rgba(0,0,0,.5); display: none; } #wrapper section .view section .gallery ul li .play { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; background: rgba(0,0,0,.5) url(/statics/img/assets/icn-playvideo-DUDE.svg) no-repeat center; } #wrapper section .view section .gallery ul li .credits { position: absolute; top: 0; left: 0; width: 100%; text-align: center; z-index: 6; color: rgba(255,255,255,.5); text-transform: uppercase; line-height: 2.5em; } #wrapper section .view section .gallery ul li .credits .cta { font-size: .9em; cursor: pointer; } #wrapper section .view section .gallery ul li .credits .cta { color: #ccc; } #wrapper section .view section .gallery ul li .credits .content { display: none; opacity: 0; line-height: 2; } #wrapper section .view section .gallery ul li .credits span { font-weight: 600; color: rgba(255,255,255,.75); margin: 0 .5em; } #wrapper section .view section .gallery ul li h3 { position: absolute; color: #fff; z-index: 6; left: 0; line-height: 1.3em; width: 100%; bottom: 1em; font-size: 1.2em; pointer-events: none; } #wrapper section .view section .radio.gallery ul li { background: none; } #wrapper section .view section .video.gallery ul li img { cursor: pointer; } #wrapper section .view section .scroll-down { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; cursor: pointer; z-index: 1; font-family: 'Oswald', sans-serif; } #wrapper section .view section .scroll-down .label { position: relative; padding: .25em; text-transform: uppercase; font-size: .9em; } #wrapper section .view section .scroll-down .arrow { background: url(/statics/img/assets/down-arrow.png); width: 30px; height: 30px; position: relative; display: inline-block; } #wrapper section .view section .gallery-nav { position: absolute; top: 50%; left: 0; width: 100%; z-index: 5; } #wrapper section .view section .gallery-nav .prev { background: url(/statics/img/assets/prev-arrow.png); width: 50px; height: 50px; position: absolute; left: 1em; top: 0; cursor: pointer; } #wrapper section .view section .gallery-nav .next { background: url(/statics/img/assets/next-arrow.png); width: 50px; height: 50px; position: absolute; top: 0; right: 1em; cursor: pointer; } #wrapper section .view section .gallery-nav .prev.off, #wrapper section .view section .gallery-nav .next.off { pointer-events:none; } #wrapper section .view section .radio { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; } #wrapper section .view section .radio .radio-cont { position: relative; width: 100%; height: 100%; display: table; } #wrapper section .view section .radio .radio-cont .v-align { display: table-cell; vertical-align: middle; } #wrapper section .view section .radio .radio-player { position: relative; width: 43em; border: 5px solid rgba(255,255,255,.2); margin: 0 auto; z-index: 1; height: 6em;} #wrapper section .view section .radio .radio-player audio { display: none; visibility: hidden; } #wrapper section .view section .radio .radio-player .play { position: relative; background: url(/statics/img/assets/play-icon.png) no-repeat left center; width: 20%; height: 100%; padding-left: 14%; text-transform: uppercase; letter-spacing: .2em; cursor: pointer; z-index: 1; line-height: 520%; } #wrapper section .view section .radio .radio-player .play.playing { background: url(/statics/img/assets/pause-icon.png) no-repeat left center; } #wrapper section .view section .radio .radio-player .play span { position: absolute; top: 0; left: 5.5em; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; } #wrapper section .view section .radio .radio-player .play .play-label { opacity: 1; transform: translate3d(0,0,0); } #wrapper section .view section .radio .radio-player .play .pause-label { opacity: 0; transform: translate3d(0,-15px,0); } #wrapper section .view section .radio .radio-player .play.playing .play-label { opacity: 0; transform: translate3d(0,15px,0); } #wrapper section .view section .radio .radio-player .play.playing .pause-label { opacity: 1; transform: translate3d(0,0,0); } #wrapper section .view section .radio .radio-player canvas { position: absolute; top: 0; height: 100% !important; right: 2em; width: 70% !important; } #wrapper section .view section .radio .text { position: relative; width: 38em; margin: 0 auto; text-align: left; padding: 2em 0; letter-spacing: .1em; display: none; visibility: hidden; } #wrapper section .view section .radio .text h2 { font-family: 'Oswald', sans-serif; float: left; text-transform: uppercase; font-size: 1.5em; font-weight: 400; } #wrapper section .view section .radio .text .line { float: left; position: relative; width: 2px; height: 3em; background-color: #006d8c; margin: .5em 2em;; } #wrapper section .view section .radio .text p { float: left; width: 70%; font-size: 1.1em; line-height: 1.5em; } #wrapper section .view section .gallery .title { position: absolute; left: 0; text-transform: uppercase; letter-spacing: .1em; text-align: left; padding: 1.5em 2em; z-index: 5; top: 0; color: #fff; } #wrapper section .view section .gallery .title h2 { position: relative; font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 1.3em; } #wrapper section .view section .gallery .title .line { position: relative; height: 2px; background-color: #006d8c; margin: .8em 0; width: 5em; } #wrapper section .view section .gallery .title h3 { position: relative; font-size: 1em; color: rgba(255,255,255,.6); bottom: auto; } /*#wrapper section .view section .video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; overflow: hidden; transform-origin: 50% 100%; -web-kit-transform-origin: 50% 100%; } #wrapper section .view section .video .video-cont { position: relative; width: 95%; height: 80%; background-color: #000; margin: 0 auto; top: 8em; } #wrapper section .view section .video .video-cont iframe { position: relative; width: 100%; height: 100%; }*/ #wrapper section .view section .more { position: absolute; left: 0; width: 100%; z-index: 2; top: 0; height: 100%; font-size: .9em; } #wrapper section .view section .more .cta { cursor: pointer; font-size: 1em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.4); padding: 1em; position: absolute; top: -4em; left: 0; z-index: 1; width: 100%;} #wrapper section .view section .more ul { position: relative; width: 100%; height: 100%; } #wrapper section .view section .more ul li { position: relative; width: 25%; background-color: rgba(0,0,0,.8); margin: 0; padding: 0; float: left; display: block; overflow: hidden; cursor: pointer; } #wrapper section .view section .more ul li .infos .text { padding-bottom: 0; } #wrapper section .view section .more ul li .infos .text .line { margin-bottom: 0; } /** * Intro */ #wrapper #intro { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20; } #wrapper #intro .top-side { position: absolute; top: 0; left: 0; right: 0; height: 50%; background-color: #000; } #wrapper #intro .bot-side { position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background-color: #000; } #wrapper #intro .progress { position: absolute; top: 50%; height: 1px; width: 0%; left: 50% } #wrapper #intro .progress .bar { position: relative; width: 100%; height: 100%; background-color: rgba(0,109,140,1); } #wrapper #intro img.logo { position: absolute; top: 44%; margin: -4em 0 0 -4em; width: 10em; display: inline-block; z-index: 2; } #wrapper #intro .wedude { position: absolute; width: 100%; text-align: center; top: 50%; margin: 0.65em 0 0 0; font-family: 'Monday', serif; font-size: 2.6em; text-transform: uppercase; z-index: 2; } /*#wrapper #intro { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 20; background: #d7d7d7 url(/statics/img/intro/bg-texture-DUDE.jpg) no-repeat center; background-size: 100% 100%; color: #7c7c7c; text-align: center; } #wrapper #intro #dude { position: absolute; bottom: 0; left: 2%; width: 45%; } #wrapper #intro .intro-cont { position: relative; display: table; width: 100%; height: 100%; } #wrapper #intro .v-align { display: table-cell; vertical-align: middle; } #wrapper #intro h2 { font-size: 2.2em; font-weight: 600; text-transform: uppercase; } #wrapper #intro p { font-size: 2em; padding: 1em;} #wrapper #intro .line { position: relative; width: 5em; height: 2px; background-color: #006d8c; margin: 2em auto 2.5em; } #wrapper #intro .wedude { width: 30em; margin: 0 auto; } #wrapper #intro .loader { width: 3em; display: inline;} #wrapper #intro .logo { width: 12em; display: inline;}*/ /** * About */ #wrapper section #about.view section .text { position: relative; z-index: 1; text-align: left; color: #ababab; font-size: 1em; padding: 10em 3em 0; } #wrapper section #about.view section .text h1 {font-family: 'Monday', serif;} #wrapper section #about.view section .text .line { position: relative; width: 7em; height: 2px; background-color: #006d8c; z-index: 1; margin: 4em 0em; } #wrapper section #about.view section .text p { position: relative; width: 30em; float: left; overflow: hidden; font-size: 1.4em; line-height: 1.75em; padding: 0 6em 0 0; } #wrapper section #about.view section .text p a { color: #fff; text-decoration: none; border-bottom: 1px solid #fff; font-weight: 600; position: relative; display: inline-block; } #wrapper section #about.view section .text p a span.over { position: absolute; width: 0; height: 100%; background-color: rgba(255,255,255,.25); display: inline-block; z-index: 1;} #wrapper section #about.view section .text p a span { position: relative; z-index: 2; } /** * People */ #wrapper section #people.view section .people-list { position: relative; display: block; height: 100%; margin: 0 2em; width: auto; } #wrapper section #people.view section .people-list .people-col { position: relative; display: block; width: 16.666667%; height: 100%; float: left; } #wrapper section #people.view section .people-list .people-col .col-wrap { position: relative; width: 100%; height: 100%; } #wrapper section #people.view section .people-list .people-col.first { padding-top: 2em; } #wrapper section #people.view section .people-list .people-col.last { border-right: 1px solid #ccc; } #wrapper section #people.view section .people-list .people-col ul { position: relative; width: 100%; height: auto; list-style: none; padding-bottom: 100px; } #wrapper section #people.view section .people-list .people-col ul li { position: relative; width: 100%; height: auto; cursor: pointer; } #wrapper section #people.view section .people-list .people-col ul li img.placeholder { position: relative; z-index: 1; opacity: 0; width: 100%; height: auto; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } #wrapper section #people.view section .people-list .people-col ul li img.dude { position: absolute; z-index: 1; left: 0; bottom: 0; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; /*position: relative; width: 100%; height: auto; bottom: 0;*/ } #wrapper section #people.view section .people-list .people-col ul li .border { position: absolute; z-index: 2; width: 100%; height: 30%; left: -3%; border: 1px solid #464847; bottom: -28%; font-family: 'Oswald', sans-serif; z-index: 2 !important; -webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); transform-origin: 50% 0%; } #wrapper section #people.view section .people-list .people-col ul li .box { position: absolute; width: 100%; height: 30%; background-color: rgba(255,255,255,.5); bottom: -30%; left: 0; font-family: 'Oswald', sans-serif; color: #40474d; text-transform: uppercase; text-align: left; line-height: 1.1em; font-size: 1.8em; overflow: hidden;} #wrapper section #people.view section .people-list .people-col ul li .box .box-wrap { position: relative; display: table; width: 100%; height: 100%; padding: 0 .5em 0; } #wrapper section #people.view section .people-list .people-col ul li .box .box-wrap .v-align { position: relative; display: table-cell; vertical-align: middle; } #wrapper section #people.view section .people-list .people-col ul li .box .name {font-weight: 400;} #wrapper section #people.view section .people-list .people-col ul li .box .surname { font-weight: 700;} #wrapper section #people.view section .people-list .people-col ul li .box .line { position: relative; width: 25%; height: 1px; background-color: #464847; margin: 0.25em 0 .25em; } #wrapper section #people.view section .people-list .people-col ul li .box .role { font-family: 'Raleway', sans-serif; font-size: 0.5em; line-height: 1;} #wrapper section #people.view section .people-list .people-col ul li .line-left { position: absolute; width: 1px; height: 100%; background-color: #ccc; top: 0; left: 0; } #wrapper section #people.view section .people-list .people-col ul li .line-bottom { position: absolute; width: 80%; height: 1px; background-color: #ccc; } #wrapper section #people.view section .people-list .people-col ul li .b-line-left { position: absolute; width: 1px; height: 10%; background-color: rgb(0, 109, 140); left: 0; bottom: -5%; z-index: 1; } #wrapper section #people.view section .people-list .people-col ul li .b-line-bottom { position: absolute; width: 5%; height: 1px; background-color: rgb(0, 109, 140); bottom: 0; left: 0; } #wrapper section #people.view section .people-overlay { position: absolute; opacity: 0; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(220,220,220,.95); z-index: 5; } #wrapper section #people.view section .people-overlay .overlay-wrap { position: relative; width: 100%; height: 100%; } #wrapper section #people.view section .people-overlay .overlay-wrap .cat-col { position: relative; float: left; width: 33.33%; height: 100%; display: table; padding: 0 2em; } #wrapper section #people.view section .people-overlay .overlay-wrap .cat-col:first-child { margin-top: 86px; } #wrapper section #people.view section .people-overlay .overlay-wrap .cat-col .v-align { display: table-cell; vertical-align: middle; } #wrapper section #people.view section .people-overlay .overlay-wrap .category { color: #4a4849; font-size: 1.5em; text-align: left; margin-bottom: .5em; } #wrapper section #people.view section .people-overlay .overlay-wrap .category h2 { font-size: 1.6em; font-weight: 600; border-bottom: 1px solid #a9a8a4; padding: .5em 0; } #wrapper section #people.view section .people-overlay .overlay-wrap .category ul { padding: .5em 0; list-style: none; line-height: 2em; } #wrapper section #people.view section .people-overlay .overlay-wrap .category ul li {} #wrapper section #people.view section .people-overlay .overlay-wrap .category ul li .name { } #wrapper section #people.view section .people-overlay .overlay-wrap .category ul li .role { font-weight: 600; } #wrapper section #people.view section .toggle-overlay { position: absolute; top:42px; z-index: 10 !important; width: 15%; left:135px; cursor: pointer; transition: .5s ease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out;} #wrapper section #people.view section .toggle-overlay:after { content: ""; background: url(/statics/img/assets/dude-pattern.jpg); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: .3s ease-out; -moz-transition: .3s ease-out; -webkit-transition: .3s ease-out; } #wrapper section #people.view section .toggle-overlay .toggle-wrap { position: relative; /*border-bottom: 1px solid #c9c8c4;*/ z-index: 2; } #wrapper section #people.view section .toggle-overlay .toggle-wrap .toggle-label { position: absolute; color: rgba(0, 109, 140, 1); display: block; text-transform: uppercase; letter-spacing: 1px; font-size: .9em; left: 10px; right: 0; top: 0; bottom: 0; opacity: 0; -webkit-transform: translate3d(0,15px,0); transform: translate3d(0,15px,0); transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; } #wrapper section #people.view section .toggle-overlay .toggle-wrap .toggle-label .v-align { position: relative; display: table; width: 100%; height: 100%; } #wrapper section #people.view section .toggle-overlay .toggle-wrap .toggle-label .v-align span { display: table-cell; vertical-align: middle; } #wrapper section #people.view section .toggle-overlay .toggle-btn { position: relative; /*border-top: 1px solid #c9c8c4;*/ padding: 1.5em 0; width: 100px; transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; -webkit-transition: .3s ease-in-out; } #wrapper section #people.view section .toggle-overlay .toggle-btn .toggle-icon { position: relative; top: 0; left: 0; width: 36px; height: 36px; transition: .5s ease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out; } #wrapper section #people.view section .toggle-overlay .toggle-btn .toggle-icon:before { content: ""; position: absolute; width: 3px; height: 36px; background-color: rgba(0, 109, 140, .3); left: 50%; margin-left: -3px; top: 0;transition: .5s ease-out; -moz-transition: .5s ease-out; -webkit-transition: .5s ease-out; } #wrapper section #people.view section .toggle-overlay .toggle-btn .toggle-icon:after { content: ""; position: absolute; width: 36px; height: 3px; background-color: rgba(0, 109, 140, 1); left: 0; top: 50%; margin-top: -3px; } #wrapper section #people.view section .toggle-overlay.toggle { background-color: rgba(246,239,233,0); } #wrapper section #people.view section .toggle-overlay.toggle .toggle-btn .toggle-icon:before { background-color: rgba(0, 109, 140, 1); } #wrapper section #people.view section .toggle-overlay.toggle .toggle-btn .toggle-icon { transform: rotate(-135deg); -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } #wrapper section #people.view section .toggle-overlay:hover {} #wrapper section #people.view section .toggle-overlay:hover:after {opacity: 1; } #wrapper section #people.view section .toggle-overlay.toggle:hover:after {opacity: 0; } #wrapper section #people.view section .toggle-overlay:hover .toggle-btn { width: 100%; border-color: rgba(0, 109, 140, 1); } #wrapper section #people.view section .toggle-overlay.toggle .toggle-btn { width: 100%; border-color: #c9c8c4; } #wrapper section #people.view section .toggle-overlay:hover .toggle-wrap .toggle-label { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } #wrapper section #people.view section .toggle-overlay.toggle .toggle-wrap .toggle-label { opacity: 0; -webkit-transform: translate3d(0,15px,0); transform: translate3d(0,15px,0); } /*#wrapper section #people.view .visual { background-color: #f8f8f6; } #wrapper section #people.view .visual img { display: none; visibility: hidden; } #wrapper section #people.view section { position: absolute; left: 0; right: 0; top: 56px; bottom: 0px; overflow: hidden; background-color: #ebebe9; } #wrapper section #people.view section .people-scroll { position: relative; width: 100%; height: auto; } #wrapper section #people.view section .people-nav { position: relative; left: 0; top: 0; height: 80px; z-index: 1; } #wrapper section #people.view section .border { position: absolute; background-color: #7ccee3; left: 0; top: 0; height: 80px; width: 10px; z-index: 2; } #wrapper section #people.view section .people-nav ul { position: relative; width: 100%; padding: 28px 10px; text-align: left; height: auto; list-style: none; font-family: 'Oswald', sans-serif; color: #40474d; } #wrapper section #people.view section .people-nav ul li { display: inline; text-transform: uppercase; padding: .75em; font-weight: 700; cursor: pointer; } #wrapper section #people.view section .people-nav ul li.board { border-left: 10px solid #ccc; margin-left: 1.5em; } #wrapper section #people.view section .people-nav ul li span { padding: .25em; -webkit-transition: .25s ease-out; transition: .25s ease-out; } #wrapper section #people.view section .people-nav ul li.selected span { background-color: #fff; color: #006d8c; } #wrapper section #people.view section .people-list { position: relative; left: 0; top: 0; padding: 0 5px; width: 100%; height:auto; z-index: 3; } #wrapper section #people.view section .people-list .people-grid { position: relative; list-style: none; } #wrapper section #people.view section .people-list ul { position: relative; width: 100%; height: auto; list-style: none; } #wrapper section #people.view section .people-list ul li { position: relative; float: left; width: 20%; height: auto; cursor: pointer; } #wrapper section #people.view section .people-list ul li img.placeholder { position: relative; z-index: 1; opacity: 0; width: 100%; height: auto; } #wrapper section #people.view section .people-list ul li .box-wrap { position: absolute; background-color: #f8f8f6; top: 0; left: 5px; right: 5px; bottom: 10px; overflow: hidden; z-index: 2; } #wrapper section #people.view section .people-list ul li .box-wrap .box { position: relative; width: 100%; height: 100%; } #wrapper section #people.view section .people-list ul li .box-wrap .box img.photo { position: absolute; z-index: 1; height: 120%; width: auto; left: 0; bottom: 0; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos { position: absolute; text-align: left; left: 40%; top: 0; bottom: 0; right: 0; color: #40474d; text-transform: uppercase;} #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .name { font-weight: 700; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .role { } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .cat { background-color: #09b0d4; /*float: left; padding: .15em .35em; color: #fff; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .table { position: relative; display: table; width: 100%; height: 100%; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .table-cell { position: relative; display: table-cell; vertical-align: middle; padding: 0 .5em; } #wrapper section #people.view section .people-list ul li .box-border { position: absolute; top: -10px; z-index: 1; left: -5px; right: -5px; bottom: 0px; } #wrapper section #people.view section .people-list ul li .box-border-over{ position: absolute; top: -10px; z-index: 1; left: -5px; right: -5px; bottom: 0px; } #wrapper section #people.view section .people-list ul li.clear { clear: both; float: none; display: block !important; } #wrapper section #people.view .iScrollVerticalScrollbar { right: 0px !important; } #wrapper section #people.view .iScrollVerticalScrollbar .iScrollIndicator { background: rgba(0, 0, 0, 0.35) !important; }*/ /** * Oswald version */ /*#wrapper section #people.view section .people-list ul li .box-wrap .box .infos { font-family: 'Oswald', sans-serif; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .name {} #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .role {} #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .cat {}*/ /** * Montserrat version */ /*#wrapper section #people.view section .people-list ul li .box-wrap .box .infos { font-family: 'Montserrat', sans-serif; line-height: 1.25em; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .name { font-size: .95em; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .role { font-size: .75em; } #wrapper section #people.view section .people-list ul li .box-wrap .box .infos .cat { font-size: .75em; }*/ /** * */ /*#wrapper section #people.view section .people-overlay { position: absolute; background-color: rgba(242,242,240,.9); top: 0; left: 0; right: 0; bottom: 0; border: 10px solid rgba(0,109,140,1); z-index: 3; } #wrapper section #people.view section .people-overlay .close { position: absolute; top: 0; right: 0; background-color: rgba(0,109,140,1); width: 30px; height: 30px; cursor: pointer; } #wrapper section #people.view section .people-overlay .close img { position: absolute; width: 22px; height: 22px; right: 0; top: 0; } #wrapper section #people.view section .people-overlay .overlay-box { position: absolute; border: 10px solid rgba(0,109,140,1); overflow: hidden; } #wrapper section #people.view section .people-overlay .overlay-box ul { position: relative; background-color: #f8f8f6; width: 100%; height: 100%; list-style: none; } #wrapper section #people.view section .people-overlay .overlay-box ul li { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 2; } #wrapper section #people.view section .people-overlay .overlay-box ul li .box { position: relative; width: 100%; height: 100%; } #wrapper section #people.view section .people-overlay .overlay-box ul li .box img.photo { position: absolute; z-index: 1; height: 120%; width: auto; left: 0; bottom: 0; -webkit-transform-origin: 50% 100%; transform-origin: 50% 100% } #wrapper section #people.view section .people-overlay .overlay-box ul li .box .infos { position: absolute; text-align: left; left: 48%; top: 0; bottom: 0; right: 0; font-family: 'Montserrat', sans-serif; color: #40474d; text-transform: uppercase;} #wrapper section #people.view section .people-overlay .overlay-box ul li .box .infos .name { font-weight: 700; font-size: 2em; } #wrapper section #people.view section .people-overlay .overlay-box ul li .box .infos .role { font-size: 1.5em; } #wrapper section #people.view section .people-overlay .overlay-box ul li .box .infos .cat { background-color: #09b0d4; float: left; padding: .15em .35em; color: #fff; font-size: 1.15em; margin: 1em 0; } #wrapper section #people.view section .people-overlay .overlay-box ul li .box .infos .table { position: relative; display: table; width: 100%; height: 100%; } #wrapper section #people.view section .people-overlay .overlay-box ul li .box .infos .table-cell { position: relative; display: table-cell; vertical-align: middle; } #wrapper section #people.view section .people-overlay .overlay-nav {} #wrapper section #people.view section .people-overlay .overlay-nav .prev { position: absolute; width: 46px; height: 24px; cursor: pointer; } #wrapper section #people.view section .people-overlay .overlay-nav .next { position: absolute; width: 46px; height: 24px; cursor: pointer; } #wrapper section #people.view section .people-overlay .overlay-nav .prev img, #wrapper section #people.view section .people-overlay .overlay-nav .next img { position: relative; width: 100%; height: 100%; display: block; }*/ /** * Clients */ #wrapper section #clients.view section .clients-list { position: relative; display: table; width: 100%; height: 100%; padding-top: 2em; } #wrapper section #clients.view section .clients-list .v-align { vertical-align: middle; display: table-cell; } #wrapper section #clients.view section .clients-list ul.grid { width: 100%; height: auto; overflow: hidden; text-align: center; } #wrapper section #clients.view section .clients-list ul.grid li { position: relative; display: block; width: 14.25%; margin: .5em 0; cursor: default; } #wrapper section #clients.view section .clients-list ul.grid li img.logo { position: relative; width: 100%; height: auto; display: inline-block; max-width: 240px; margin: 0 auto; } /** * Contacts */ #wrapper section #contacts.view section .contacts-list { position: relative; display: table; width: 100%; height: 100%; } #wrapper section #contacts.view section .contacts-list .v-align { vertical-align: middle; display: table-cell; } #wrapper section #contacts.view section .mail-list { position: relative; z-index: 1; } #wrapper section #contacts.view section .mail-list ul { position: relative; } #wrapper section #contacts.view section .mail-list ul li { display: inline-block; width: 33%; height: auto; padding-bottom: 4em; } #wrapper section #contacts.view section .mail-list ul li h2 { font-family: 'Oswald', sans-serif; text-transform: uppercase; font-size: 2.2em; color: rgba(255,255,255,.5); margin: .5em 0; } #wrapper section #contacts.view section .mail-list ul li h2 span { font-weight: 600; } #wrapper section #contacts.view section .mail-list ul li a { font-size: 3.5em; border-bottom: 1px solid rgba(255,255,255,.5); padding: .25em; color: #fff; text-decoration: none;} #wrapper section #contacts.view section .mail-list ul li a span { color: rgb(0, 109, 140); } #wrapper section #contacts.view section .foo-list { position: absolute; left: 2.5em; right: 2.5em; height: auto; bottom: 5em; border-top: 1px solid rgba(255,255,255,.5); overflow: hidden; } #wrapper section #contacts.view section .adress-list { position: relative; float: left; font-size: .65em; } #wrapper section #contacts.view section .adress-list ul { list-style: none; overflow: hidden; float: left; } #wrapper section #contacts.view section .adress-list ul.it-infos { padding: 2.25em 1.5em 0 0; } #wrapper section #contacts.view section .adress-list ul.en-infos { border-left: 1px solid rgba(255,255,255,.5); padding: 2.25em 0 0 1.5em; } #wrapper section #contacts.view section .adress-list ul li { font-size: 2em; text-transform: uppercase; display: inline; font-weight: 100; font-family: 'Oswald', sans-serif; margin-right: .25em; } #wrapper section #contacts.view section .adress-list ul li a { color: #fff; text-decoration: none; } #wrapper section #contacts.view section .adress-list ul li .content { display: inline; opacity: .5; } #wrapper section #contacts.view section .adress-list ul li.place .content { background: url(/statics/img/assets/icn-pinmap.svg) no-repeat -.6em; background-size: 34px; opacity: .5; padding: 0 0 0 1.25em; } #wrapper section #contacts.view section .adress-list ul li.phone .content { background: url(/statics/img/assets/icn-phone.svg) no-repeat -.5em; background-size: 34px; opacity: .5; padding: 0 0 0 1.25em; } #wrapper section #contacts.view section .adress-list ul li.label { color: rgb(0, 109, 140); } #wrapper section #contacts.view section .adress-list ul li.phone { } #wrapper section #contacts.view section .adress-list ul li.it { } #wrapper section #contacts.view section .adress-list ul li.en { } #wrapper section #contacts.view section .adress-list ul li.label.it { } #wrapper section #contacts.view section .adress-list ul li.place.en { } #wrapper section #contacts.view section .adress-list ul li span { font-weight: 400; } #wrapper section #contacts.view section .social-list { position: absolute; top: 0; right: 0; float: right; } #wrapper section #contacts.view section .social-list ul { padding: 1.5em 0; list-style: none; border-bottom: 0px solid rgba(255,255,255,.25); width: auto; margin: 0 auto;} #wrapper section #contacts.view section .social-list ul li { display: inline-block; margin: 0 .5em;} #wrapper section #contacts.view section .social-list ul li.first { margin-left: 0; } #wrapper section #contacts.view section .social-list ul li.last { margin-right: 0; } #wrapper section #contacts.view section .social-list ul li a { display: inline-block;} #wrapper section #contacts.view section .social-list ul li a img { position: relative; width: 1.85em; height: auto; display: inline; opacity: .5; } #wrapper section #contacts.view footer { position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; font-family: Arial; padding: 2em 0; font-size: .8em; color: rgba(255,255,255,.5); z-index: 2; } #wrapper section #contacts.view footer .show-cont { position: relative; display: inline-block; cursor: pointer; } #wrapper section #contacts.view footer .hide-cont { position: absolute; overflow: hidden; margin: 0 auto; top: 2em; width: 100%; } #wrapper section #contacts.view footer .hide-cont .hide-wrap { position: relative; display: block; cursor: pointer; } #wrapper section #contacts.view footer .hide-cont span { margin: 0 .5em; } /** * medias */ @media only screen and (max-width : 1024px) { #wrapper section #people.view section .people-list .people-col ul li .box { font-size: 1.5em; } #wrapper section #people.view section .people-list .people-col ul li .box .box-wrap { padding: .5em; } #wrapper section #people.view section .people-list .people-col ul li .box .name { float: left; margin-right: .4em; margin-bottom: .2em; } #wrapper section #people.view section .people-list .people-col ul li .box .surname { float: left; font-weight: 400; } #wrapper section #people.view section .people-list .people-col ul li .box .line { clear: both; } #wrapper section #people.view section .people-list .people-col ul li .box .role { font-size: .55em; } #wrapper section #people.view section .people-overlay .overlay-wrap .category { font-size: 1.1em; } } @media only screen and (max-width : 768px) { #wrapper section #contacts.view section .adress-list ul.en-infos { padding: 2em 1em 0 0; border-left: 0; } } @media only screen and (max-width : 1600px) { #wrapper section #people.view section .people-overlay .overlay-wrap .category { font-size: 1.15em; } } #wrapper section #detail.view .gallery ul li { }