/* Theme Name: Pierre Hunout Theme URI: http://pierrehunout.fr/ Author: Pierre Hunout Author URI: http://pierrehunout.fr/ Description: Template wordpress for Pierre Hunout website Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: pierre-hunout Tags: Webdesign HTML5 CSS3 Portfolio */ /*______________________________________________________________ **************************************************************** ***********************TABLE DES MATIERES*********************** **************************************************************** ________________________________________________________________ 1) FONTS 2) GLOBAL 2.1) TYPO 2.2) ELEMENTS 3) HEADER 4) NAVIGATION 4.1) LINKS 4.2) MENU 5) SOCIAL 6) SECTIONS 7) CONTENT 7.1) LOOP 7.2) SINGLE 7.3) PAGE 7.4) ASIDE 8) CONTACT 9) FOOTER ______________________________________________________________*/ @-webkit-viewport { width: device-width; } @-moz-viewport { width: device-width; } @-ms-viewport { width: device-width; } @-o-viewport { width: device-width; } @viewport { width: device-width; } /*______________________________________________________________ 1) FONTS ******************************************************* ______________________________________________________________*/ @font-face { font-family: 'Icon'; src: url("../fonts/icon-font.eot?uv3h5z"); src: url("../fonts/icon-font.eot?uv3h5z#iefix") format("embedded-opentype"), url("../fonts/icon-font.ttf?uv3h5z") format("truetype"), url("../fonts/icon-font.woff?uv3h5z") format("woff"), url("../fonts/icon-font.svg?uv3h5z#icomoon") format("svg"); font-weight: normal; font-style: normal; } /*______________________________________________________________ 2) GLOBAL ****************************************************** 2.1) TYPO ************************************************** ______________________________________________________________*/ /*______________________________________________________________ 2.2) ELEMENTS ********************************************** ______________________________________________________________*/ html, body, #container { width: 100%; max-width: 100%; } body { font-family: 'Raleway', sans-serif; font-size: 100%; background: #fff; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; } * { outline: none; } a, .a-like { cursor: pointer; outline: none; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } a:hover, .a-like:hover { -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } hr { border: none; border-bottom: 1px solid #000; } img { max-width: 100%; height: auto; width: auto\9; } .auto { width: auto; } .center { margin: 0 auto; } .txtleft { text-align: left; } .txtright { text-align: right; } .txtcenter { text-align: center; } .columns { -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; column-count: 2; -moz-column-gap: 50px; -webkit-column-gap: 50px; -o-column-gap: 50px; column-gap: 50px; } .left { float: left; } .right { float: right; } .clear { clear: both; } .clearfix:after { content: ""; display: table; clear: both; } .bold, strong { font-weight: 900; } .upper { text-transform: uppercase; } .italic, em { font-style: italic; } .mobile, .tablet { display: none; } .desktop { display: block; } .color-change { color: #fff; } .overbox { color: #fff; position: absolute; top: 0; right: 0; width: 50px; height: 100%; background: blue; } .fade { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } .icon:before { display: inline-block; font-family: 'Icon', sans-serif; font-size: 1em; color: #eb0c75; margin-right: 12px; -moz-transform: scale(1.5); -ms-transform: scale(1.5); -webkit-transform: scale(1.5); transform: scale(1.5); } .icon-year:before { content: "\e90d"; } .icon-category:before { content: "\e916"; } .icon-link:before { content: "\e917"; } .icon-responsive:before { content: "\e912"; } .icon-tag:before { content: "\e90b"; } /*______________________________________________________________ 3) HEADER ****************************************************** ______________________________________________________________*/ header { position: fixed; top: 0; right: 0; width: 40px; height: 100vh; color: #07c438; z-index: 9999; } header nav ul { position: absolute; top: 0; left: 40px; width: 100vh; height: 40px; text-align: justify; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } header nav ul:after { content: ''; display: inline-block; width: 100%; } header nav ul li { position: relative; display: inline-block; height: 40px; margin: 0 -25px; padding: 0 25px; overflow: hidden; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } header nav ul li a { display: block; position: relative; top: 0; width: 100%; height: 40px; font-size: .8em; font-weight: 700; color: inherit; text-transform: uppercase; text-align: center; line-height: 40px; padding: 0 25px; -moz-transform: skewX(-5deg); -ms-transform: skewX(-5deg); -webkit-transform: skewX(-5deg); transform: skewX(-5deg); outline: none; } header nav ul li a:after { content: attr(data-content); display: block; position: absolute; top: -40px; left: 0; width: 94%; height: 40px; background: #07c438; color: #fff; } header nav ul li:hover a { top: 40px; } /*______________________________________________________________ 4) NAVIGATION ************************************************** 4.1) LINKS ************************************************* ______________________________________________________________*/ /*****BUTTONS*****/ /*______________________________________________________________ 4.2) MENU ************************************************** ______________________________________________________________*/ /*______________________________________________________________ 5) SOCIAL ****************************************************** ______________________________________________________________*/ .social { position: fixed; top: 12px; left: 22px; color: #07c438; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; z-index: 9999; } .social p { float: left; height: 20px; font-size: .8em; font-weight: 700; color: #eb0c75; text-transform: uppercase; line-height: 24px; padding: 0 4px 0 7px; } .social ul { float: left; } .social ul li { position: relative; display: inline-block; height: 20px; margin: 0 -5px; padding: 0 5px; overflow: hidden; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .social ul li a { display: block; position: relative; top: 0; width: 100%; height: 20px; font-family: 'Icon', sans-serif; font-size: .85em; font-weight: 100; color: inherit; text-align: center; line-height: 22px; padding: 0 5px; -moz-transform: skewX(-5deg); -ms-transform: skewX(-5deg); -webkit-transform: skewX(-5deg); transform: skewX(-5deg); outline: none; } .social ul li a:after { content: attr(data-content); display: block; position: absolute; top: 20px; width: 95%; height: 20px; background: #eb0c75; color: #fff; } .social ul li:hover a { top: -20px; } /*______________________________________________________________ 6) HOME ******************************************************** ______________________________________________________________*/ /***********HOME***********/ section#home { width: 100vw; height: 100vh; overflow: hidden; } section#home article { display: flex; width: 100%; height: 100vh; } section#home article .content { width: 100%; margin: auto; } section#home article .content h1 { font-size: 1em; font-weight: 700; text-transform: uppercase; text-align: center; color: #0ceb46; } section#home article .content h2 { font-size: 1em; font-weight: 200; text-transform: uppercase; text-align: center; color: #eb0c75; } section#home figure { position: absolute; top: 0; left: 25%; width: 50%; height: 100%; line-height: 100vh; } section#home figure img { vertical-align: middle; } /**********PAGE***********/ .page { position: relative; width: 100%; height: 100vh; background: #fff; } .page article.title { position: relative; top: -75px; width: 100%; height: 250px; background: #0ceb46; -moz-transform: skewY(5deg); -ms-transform: skewY(5deg); -webkit-transform: skewY(5deg); transform: skewY(5deg); overflow: hidden; z-index: 2; } .page article.title h1 { width: 100%; height: 250px; font-size: 5em; font-weight: 800; color: #fff; text-transform: uppercase; text-align: right; line-height: 250px; padding: 0 50px; -moz-transform: skewY(-5deg) rotate(5deg); -ms-transform: skewY(-5deg) rotate(5deg); -webkit-transform: skewY(-5deg) rotate(5deg); transform: skewY(-5deg) rotate(5deg); } .page article.content { width: 100%; } .common article.content { min-height: -moz-calc(100% - 275px); min-height: -webkit-calc(100% - 275px); min-height: calc(100% - 275px); color: #0ceb46; padding: 50px 20%; } .common article.content .box { -moz-transform: rotate(5deg); -ms-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .wp-content h2 { font-size: 2em; font-weight: 300; text-transform: uppercase; padding: 25px 0; } .wp-content h3 { font-size: 1.75em; font-weight: 300; text-transform: uppercase; padding: 25px 0; } .wp-content h4 { font-size: 1.5em; font-weight: 400; text-transform: uppercase; padding: 25px 0; } .wp-content h5 { font-size: 1.25em; font-weight: 400; text-transform: uppercase; padding: 25px 0; } .wp-content h6 { font-size: 1.1em; font-weight: 500; text-transform: uppercase; padding: 25px 0; } .wp-content ul, .wp-content ol { margin: 10px; } .wp-content ul li, .wp-content ol li { font-size: .9em; font-weight: 600; text-transform: uppercase; line-height: 1.2em; list-style: disc; } .wp-content p { font-size: .9em; font-weight: 600; text-transform: uppercase; line-height: 1.2em; } .wp-content p strong { font-weight: 900; } .wp-content p i, .wp-content p em { font-style: italic; } .wp-content a:hover { color: rgba(235, 12, 117, 0.75); } /**********WORKS***********/ #works #grid { position: relative; top: -75px; width: 100%; z-index: 3; } #works #grid ul li { position: relative; width: 100%; height: 340px; } #works #grid ul li:nth-child(2n+1) .info { background: #fff; color: #0ceb46; } #works #grid ul li:nth-child(2n+2) .info { background: rgba(12, 235, 70, 0.4); color: #0ceb46; } #works #grid ul li:nth-child(6n+4) .info { background: rgba(12, 235, 70, 0.2); } #works #grid ul li .info { display: flex; position: absolute; width: 100%; height: 100%; -moz-transform: skewY(5deg); -ms-transform: skewY(5deg); -webkit-transform: skewY(5deg); transform: skewY(5deg); z-index: 0; } #works #grid ul li .info blockquote { position: relative; width: 280px; font-size: 1.75em; font-weight: 300; text-transform: uppercase; line-height: 1em; margin: auto; -moz-transform: skewY(-5deg) rotate(5deg); -ms-transform: skewY(-5deg) rotate(5deg); -webkit-transform: skewY(-5deg) rotate(5deg); transform: skewY(-5deg) rotate(5deg); } #works #grid ul li .info blockquote span { color: #eb0c75; outline: none; } #works #grid ul li .info blockquote a { color: #eb0c75; outline: none; } #works #grid ul li .info blockquote a:hover { color: rgba(235, 12, 117, 0.75); } #works #grid ul li .info p { position: absolute; top: -2px; font-size: .9em; font-weight: 700; text-transform: uppercase; -moz-transform: skewY(-5deg) rotate(5deg); -ms-transform: skewY(-5deg) rotate(5deg); -webkit-transform: skewY(-5deg) rotate(5deg); transform: skewY(-5deg) rotate(5deg); } #works #grid ul li .info p.category { left: 75px; } #works #grid ul li .info p.year { right: 75px; } #works #grid ul li:nth-child(4n+1) .info blockquote { margin-left: -moz-calc(100% - 360px); margin-left: -webkit-calc(100% - 360px); margin-left: calc(100% - 360px); text-align: right; } #works #grid ul li:nth-child(4n+2) .info blockquote { margin-left: 70px; text-align: left; } #works #grid ul li:nth-child(4n+3) .info blockquote { margin-left: 70px; text-align: left; } #works #grid ul li:nth-child(4n+4) .info blockquote { margin-left: -moz-calc(100% - 360px); margin-left: -webkit-calc(100% - 360px); margin-left: calc(100% - 360px); text-align: right; } #works #grid ul li:nth-child(2n+1) .info p { color: rgba(12, 235, 70, 0.4); } #works #grid ul li:nth-child(2n+2) .info p { color: #fff; } #works #grid ul li:first-child .info p { color: #0ceb46; } #works #grid ul li .thumb { position: absolute; z-index: 999; width: 340px; height: 340px; text-align: center; border: 20px solid #fff; overflow: hidden; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #works #grid ul li .thumb a { display: block; position: relative; width: 100%; height: 100%; font-size: 1em; font-weight: lighter; color: #fff; } #works #grid ul li .thumb a div.background { position: absolute; top: -25%; left: -25%; width: 150%; height: 150%; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -moz-transition: all 0.25s ease-in 0.5s; -o-transition: all 0.25s ease-in 0.5s; -webkit-transition: all 0.25s ease-in; -webkit-transition-delay: 0.5s; transition: all 0.25s ease-in 0.5s; } #works #grid ul li .thumb a div.overlay { display: block; width: 100%; height: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75); opacity: 0.75; } #works #grid ul li .thumb a div.overlay:before { content: ''; } #works #grid ul li .thumb a div.overlay:after { content: ''; } #works #grid ul li:nth-child(4n+1) .thumb { left: -moz-calc(50% - 510px); left: -webkit-calc(50% - 510px); left: calc(50% - 510px); } #works #grid ul li:nth-child(4n+1) .thumb a div.overlay { position: relative; top: 40px; left: -140px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 210px solid #0ceb46; border-left: 300px solid transparent; -moz-transform: scale(0) rotate(35deg); -ms-transform: scale(0) rotate(35deg); -webkit-transform: scale(0) rotate(35deg); transform: scale(0) rotate(35deg); -moz-transition: all 0.75s ease-in 0.25s; -o-transition: all 0.75s ease-in 0.25s; -webkit-transition: all 0.75s ease-in; -webkit-transition-delay: 0.25s; transition: all 0.75s ease-in 0.25s; } #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:before { position: absolute; top: -135px; left: -195px; width: 0; height: 0; border-bottom: 240px solid #0ceb46; border-left: 90px solid transparent; border-right: 90px solid transparent; -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } #works #grid ul li:nth-child(4n+1) .thumb a div.overlay:after { position: absolute; top: 9px; left: -315px; width: 0; height: 0; border-right: 300px solid transparent; border-bottom: 210px solid #0ceb46; border-left: 300px solid transparent; -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } #works #grid ul li:nth-child(4n+1) .thumb:hover a div.overlay { -moz-transform: scale(2) rotate(135deg); -ms-transform: scale(2) rotate(135deg); -webkit-transform: scale(2) rotate(135deg); transform: scale(2) rotate(135deg); -moz-transition: all 0.75s ease-in; -o-transition: all 0.75s ease-in; -webkit-transition: all 0.75s ease-in; transition: all 0.75s ease-in; } #works #grid ul li:nth-child(4n+2) .thumb { left: -moz-calc(50% - 170px); left: -webkit-calc(50% - 170px); left: calc(50% - 170px); } #works #grid ul li:nth-child(4n+2) .thumb a div.overlay { position: absolute; top: 0; left: 100%; background-size: 100% 33.333333%; background-image: linear-gradient(rgba(0, 0, 0, 0) 31%, #0ceb46 32%, #0ceb46 66%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%, #0ceb46 100%, #0ceb46); background-position: 0 0; -moz-transition: all 0.4s ease-in 0.35s; -o-transition: all 0.4s ease-in 0.35s; -webkit-transition: all 0.4s ease-in; -webkit-transition-delay: 0.35s; transition: all 0.4s ease-in 0.35s; } #works #grid ul li:nth-child(4n+2) .thumb a div.overlay:before { position: absolute; top: 0; left: 100%; background-size: 100% 33.333333%; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0) 31%, #0ceb46 32%, #0ceb46 66%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%, #0ceb46 100%, #0ceb46); background-position: 0 33.3333%; -moz-transition: all 0.55s ease-in 0.35s; -o-transition: all 0.55s ease-in 0.35s; -webkit-transition: all 0.55s ease-in; -webkit-transition-delay: 0.35s; transition: all 0.55s ease-in 0.35s; } #works #grid ul li:nth-child(4n+2) .thumb a div.overlay:after { position: absolute; top: 0; left: 100%; background-size: 100% 33.333333%; width: 100%; height: 100%; background-image: linear-gradient(rgba(0, 0, 0, 0) 31%, #0ceb46 32%, #0ceb46 66%, rgba(0, 0, 0, 0) 68%, rgba(0, 0, 0, 0) 100%, #0ceb46 100%, #0ceb46); background-position: 0 66.6666%; -moz-transition: all 0.75s ease-in 0.35s; -o-transition: all 0.75s ease-in 0.35s; -webkit-transition: all 0.75s ease-in; -webkit-transition-delay: 0.35s; transition: all 0.75s ease-in 0.35s; } #works #grid ul li:nth-child(4n+2) .thumb:hover a div.overlay { left: 0; -moz-transition: all 0.4s ease-in; -o-transition: all 0.4s ease-in; -webkit-transition: all 0.4s ease-in; transition: all 0.4s ease-in; } #works #grid ul li:nth-child(4n+2) .thumb:hover a div.overlay:before { left: 0; -moz-transition: all 0.55s ease-in; -o-transition: all 0.55s ease-in; -webkit-transition: all 0.55s ease-in; transition: all 0.55s ease-in; } #works #grid ul li:nth-child(4n+2) .thumb:hover a div.overlay:after { left: 0; -moz-transition: all 0.75s ease-in; -o-transition: all 0.75s ease-in; -webkit-transition: all 0.75s ease-in; transition: all 0.75s ease-in; } #works #grid ul li:nth-child(4n+3) .thumb { left: -moz-calc(50% + 170px); left: -webkit-calc(50% + 170px); left: calc(50% + 170px); } #works #grid ul li:nth-child(4n+3) .thumb a div.overlay { background: #0ceb46; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -moz-transform: scale(0) rotate(0); -ms-transform: scale(0) rotate(0); -webkit-transform: scale(0) rotate(0); transform: scale(0) rotate(0); -moz-transition: all 0.75s ease-in 0.25s; -o-transition: all 0.75s ease-in 0.25s; -webkit-transition: all 0.75s ease-in; -webkit-transition-delay: 0.25s; transition: all 0.75s ease-in 0.25s; } #works #grid ul li:nth-child(4n+3) .thumb a div.overlay:before { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #0ceb46; -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -webkit-transform: rotate(135deg); transform: rotate(135deg); } #works #grid ul li:nth-child(4n+3) .thumb:hover a div.overlay { -moz-transform: scale(1.75) rotate(180deg); -ms-transform: scale(1.75) rotate(180deg); -webkit-transform: scale(1.75) rotate(180deg); transform: scale(1.75) rotate(180deg); -moz-transition: all 0.75s ease-in; -o-transition: all 0.75s ease-in; -webkit-transition: all 0.75s ease-in; transition: all 0.75s ease-in; } #works #grid ul li:nth-child(4n+4) .thumb { left: -moz-calc(50% - 170px); left: -webkit-calc(50% - 170px); left: calc(50% - 170px); } #works #grid ul li:nth-child(4n+4) .thumb a div.overlay { position: absolute; top: 100%; left: 41.66%; width: 16.66%; height: 100%; background: #0ceb46; -moz-transition: width 0.35s ease-in 0.35s, top 0.4s ease-in 0.6s, left 0.35s ease-in 0.35s; -o-transition: width 0.35s ease-in 0.35s, top 0.4s ease-in 0.6s, left 0.35s ease-in 0.35s; -webkit-transition: width 0.35s ease-in, top 0.4s ease-in, left 0.35s ease-in; -webkit-transition-delay: 0.35s, 0.6s, 0.35s; transition: width 0.35s ease-in 0.35s, top 0.4s ease-in 0.6s, left 0.35s ease-in 0.35s; } #works #grid ul li:nth-child(4n+4) .thumb a div.overlay:before { position: absolute; top: 25%; left: -166.66%; background: #0ceb46; width: 100%; height: 100%; -moz-transition: width 0.35s ease-in 0.35s, top 0.25s ease-in 0.6s, left 0.35s ease-in 0.35s; -o-transition: width 0.35s ease-in 0.35s, top 0.25s ease-in 0.6s, left 0.35s ease-in 0.35s; -webkit-transition: width 0.35s ease-in, top 0.25s ease-in, left 0.35s ease-in; -webkit-transition-delay: 0.35s, 0.6s, 0.35s; transition: width 0.35s ease-in 0.35s, top 0.25s ease-in 0.6s, left 0.35s ease-in 0.35s; } #works #grid ul li:nth-child(4n+4) .thumb a div.overlay:after { position: absolute; top: 50%; left: 166.66%; background: #0ceb46; width: 100%; height: 100%; -moz-transition: width 0.35s ease-in 0.35s, top 0.15s ease-in 0.6s, left 0.35s ease-in 0.35s; -o-transition: width 0.35s ease-in 0.35s, top 0.15s ease-in 0.6s, left 0.35s ease-in 0.35s; -webkit-transition: width 0.35s ease-in, top 0.15s ease-in, left 0.35s ease-in; -webkit-transition-delay: 0.35s, 0.6s, 0.35s; transition: width 0.35s ease-in 0.35s, top 0.15s ease-in 0.6s, left 0.35s ease-in 0.35s; } #works #grid ul li:nth-child(4n+4) .thumb:hover a div.overlay { top: 0; left: 33.33%; width: 34%; -moz-transition: width 0.35s ease-in 0.4s, top 0.4s ease-in, left 0.35s ease-in 0.4s; -o-transition: width 0.35s ease-in 0.4s, top 0.4s ease-in, left 0.35s ease-in 0.4s; -webkit-transition: width 0.35s ease-in, top 0.4s ease-in, left 0.35s ease-in; -webkit-transition-delay: 0.4s, 0s, 0.4s; transition: width 0.35s ease-in 0.4s, top 0.4s ease-in, left 0.35s ease-in 0.4s; } #works #grid ul li:nth-child(4n+4) .thumb:hover a div.overlay:before { top: 0; left: -99%; -moz-transition: width 0.35s ease-in 0.4s, top 0.3s ease-in 0.1s, left 0.35s ease-in 0.4s; -o-transition: width 0.35s ease-in 0.4s, top 0.3s ease-in 0.1s, left 0.35s ease-in 0.4s; -webkit-transition: width 0.35s ease-in, top 0.3s ease-in, left 0.35s ease-in; -webkit-transition-delay: 0.4s, 0.1s, 0.4s; transition: width 0.35s ease-in 0.4s, top 0.3s ease-in 0.1s, left 0.35s ease-in 0.4s; } #works #grid ul li:nth-child(4n+4) .thumb:hover a div.overlay:after { top: 0; left: 99%; -moz-transition: width 0.35s ease-in 0.4s, top 0.25s ease-in 0.15s, left 0.35s ease-in 0.4s; -o-transition: width 0.35s ease-in 0.4s, top 0.25s ease-in 0.15s, left 0.35s ease-in 0.4s; -webkit-transition: width 0.35s ease-in, top 0.25s ease-in, left 0.35s ease-in; -webkit-transition-delay: 0.4s, 0.15s, 0.4s; transition: width 0.35s ease-in 0.4s, top 0.25s ease-in 0.15s, left 0.35s ease-in 0.4s; } #works #grid ul li:nth-child(7) .thumb a div.overlay { display: inline-block; position: relative; top: 0px; left: 0; width: 100%; height: 100%; background: #0ceb46; -moz-transform: scale(0) rotate(-45deg); -ms-transform: scale(0) rotate(-45deg); -webkit-transform: scale(0) rotate(-45deg); transform: scale(0) rotate(-45deg); -moz-transition: all 0.75s ease-in 0.25s; -o-transition: all 0.75s ease-in 0.25s; -webkit-transition: all 0.75s ease-in; -webkit-transition-delay: 0.25s; transition: all 0.75s ease-in 0.25s; } #works #grid ul li:nth-child(7) .thumb a div.overlay:before { position: absolute; top: -50%; left: 0; height: 100%; width: 100%; background: #0ceb46; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #works #grid ul li:nth-child(7) .thumb a div.overlay:after { position: absolute; top: 0; left: 50%; height: 100%; width: 100%; background: #0ceb46; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } #works #grid ul li:nth-child(7) .thumb:hover a div.overlay { -moz-transform: scale(1.5) rotate(-90deg); -ms-transform: scale(1.5) rotate(-90deg); -webkit-transform: scale(1.5) rotate(-90deg); transform: scale(1.5) rotate(-90deg); -moz-transition: all 0.75s ease-in; -o-transition: all 0.75s ease-in; -webkit-transition: all 0.75s ease-in; transition: all 0.75s ease-in; } #works #grid ul li .thumb a div.content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #works #grid ul li .thumb a div.content h2 { position: absolute; top: -50%; left: 0; width: 100%; height: 50%; font-size: 2em; font-weight: 800; text-transform: uppercase; -moz-transition: all 0.25s ease-in; -o-transition: all 0.25s ease-in; -webkit-transition: all 0.25s ease-in; transition: all 0.25s ease-in; } #works #grid ul li .thumb a div.content h2 span { display: block; position: absolute; bottom: 3px; width: 100%; margin: 0 auto; padding: 0 10px; } #works #grid ul li .thumb a div.content h3 { position: absolute; bottom: -50%; left: 0; width: 100%; height: 50%; font-size: 1.5em; font-weight: 800; color: #0ceb46; text-transform: uppercase; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } #works #grid ul li .thumb a div.content h3 span { display: block; position: relative; width: 150px; height: 40px; background: rgba(255, 255, 255, 0.9); margin: 0 auto; line-height: 40px; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; overflow: hidden; z-index: 1; } #works #grid ul li .thumb:hover a div.content h2 { top: 0; -moz-transition: all 0.25s ease-in 0.75s; -o-transition: all 0.25s ease-in 0.75s; -webkit-transition: all 0.25s ease-in; -webkit-transition-delay: 0.75s; transition: all 0.25s ease-in 0.75s; } #works #grid ul li .thumb:hover a div.content h3 { bottom: -3px; -moz-transition: all 0.35s ease-in 0.75s; -o-transition: all 0.35s ease-in 0.75s; -webkit-transition: all 0.35s ease-in; -webkit-transition-delay: 0.75s; transition: all 0.35s ease-in 0.75s; } #works #grid ul li .thumb:hover a div.content h3 span:before { position: absolute; top: 40px; left: 0; content: ""; background: white; width: 150px; height: 40px; margin: 0 auto; line-height: 40px; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; z-index: -1; } #works #grid ul li .thumb:hover a div.content h3 span:hover:before { top: 0; } /**********PORTFOLIO***********/ #portfolio { position: relative; width: 100%; height: 100vh; background: #fff; overflow: hidden; } #portfolio article.panel { float: left; height: 100%; overflow: auto; } #portfolio article.picture { width: 60%; background: #fff; } #portfolio article.picture img { width: 100%; } #portfolio article.picture .box { padding: 10px; } #portfolio article.picture .box img { padding: 10px; } #portfolio article.content { position: relative; width: 40%; background: rgba(12, 235, 70, 0.1); } #portfolio article.content .next-prev { position: absolute; top: 20px; left: 50px; width: -moz-calc(100% - 150px); width: -webkit-calc(100% - 150px); width: calc(100% - 150px); height: 40px; overflow: hidden; } #portfolio article.content .next-prev a { position: absolute; display: block; background: rgba(255, 255, 255, 0.8); width: 40px; height: 40px; text-align: left; outline: none; -moz-transition: width 0.3s ease-in, background-color 0.3s ease-in; -o-transition: width 0.3s ease-in, background-color 0.3s ease-in; -webkit-transition: width 0.3s ease-in, background-color 0.3s ease-in; transition: width 0.3s ease-in, background-color 0.3s ease-in; } #portfolio article.content .next-prev a:before { content: ""; position: absolute; top: 40px; left: 0; background: white; width: 40px; height: 40px; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; z-index: -1; } #portfolio article.content .next-prev a p { position: absolute; font-size: 0.7em; color: #0ceb46; text-transform: uppercase; letter-spacing: 1px; line-height: 40px; } #portfolio article.content .next-prev a p:first-of-type { font-weight: 700; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; z-index: 1; } #portfolio article.content .next-prev a p:last-of-type { font-weight: 300; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transition: opacity 0.3s ease-in, -moz-transform 0.3s ease-in; -o-transition: opacity 0.3s ease-in, -o-transform 0.3s ease-in; -webkit-transition: opacity 0.3s ease-in, -webkit-transform 0.3s ease-in; transition: opacity 0.3s ease-in, transform 0.3s ease-in; } #portfolio article.content .next-prev a span { display: block; position: absolute; width: 15px; height: 1px; background: #0ceb46; } #portfolio article.content .next-prev a.prev { left: 0; } #portfolio article.content .next-prev a.prev p:first-of-type { left: 50px; } #portfolio article.content .next-prev a.prev p:last-of-type { right: 10px; -moz-transform: translateX(100%); -ms-transform: translateX(100%); -webkit-transform: translateX(100%); transform: translateX(100%); } #portfolio article.content .next-prev a.prev span { left: 12px; } #portfolio article.content .next-prev a.prev span:first-of-type { top: 14px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #portfolio article.content .next-prev a.prev span:last-of-type { bottom: 14px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #portfolio article.content .next-prev a.next { right: 0; } #portfolio article.content .next-prev a.next p:first-of-type { right: 50px; } #portfolio article.content .next-prev a.next p:last-of-type { left: 10px; -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -webkit-transform: translateX(-100%); transform: translateX(-100%); } #portfolio article.content .next-prev a.next span { right: 12px; } #portfolio article.content .next-prev a.next span:first-of-type { top: 14px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #portfolio article.content .next-prev a.next span:last-of-type { bottom: 14px; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #portfolio article.content .next-prev a:hover { width: 100%; background: white; z-index: 10; } #portfolio article.content .next-prev a:hover:before { top: 0; } #portfolio article.content .next-prev a:hover p:first-of-type { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; } #portfolio article.content .next-prev a:hover p:last-of-type { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; -moz-transform: translateX(0); -ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); } #portfolio article.content .back-to-page { position: absolute; top: 20px; right: 50px; } #portfolio article.content .back-to-page a { display: block; position: relative; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.8); -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px; overflow: hidden; z-index: 1; } #portfolio article.content .back-to-page a:before { position: absolute; top: 40px; left: 0; content: ""; background: white; width: 150px; height: 40px; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; z-index: -1; } #portfolio article.content .back-to-page a:hover:before { top: 0; } #portfolio article.content .back-to-page a span { display: block; position: absolute; top: 20px; left: 5px; width: 30px; height: 1px; background: #0ceb46; } #portfolio article.content .back-to-page a span:first-of-type { -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } #portfolio article.content .back-to-page a span:last-of-type { -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #portfolio article.content .box { padding: 50px 50px 25px; } #portfolio article.content .box h1 { width: 100%; font-size: 2em; font-weight: 800; color: #0ceb46; text-transform: uppercase; text-align: center; margin: 0 auto; padding: 100px 0 0; } #portfolio article.content .box hr { border: none; border-bottom: 1px solid #999; } #portfolio article.content .box ul:after { content: ''; display: inline-block; width: 100%; } #portfolio article.content .box ul li { display: inline-block; position: relative; } #portfolio article.content .box ul.icons { width: 100%; height: 18px; text-align: justify; padding: 0 0px 0 4px; } #portfolio article.content .box ul.icons li { font-size: .7em; font-weight: 500; color: #777; text-transform: uppercase; margin: 0; padding: 0; } #portfolio article.content .box ul.traduction { position: absolute; left: 100px; width: 100px; text-align: justify; color: #0ceb46; margin: 0 auto; padding: 75px 0 25px; } #portfolio article.content .box ul.traduction li { height: 20px; overflow: hidden; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } #portfolio article.content .box ul.traduction li a { display: block; position: relative; top: 0; width: 30px; height: 20px; font-family: 'Icon', sans-serif; font-size: .75em; font-weight: 700; color: inherit; text-align: center; line-height: 22px; outline: none; } #portfolio article.content .box ul.traduction li a:after { content: attr(data-content); display: block; position: absolute; left: 0; top: 20px; width: 30px; height: 20px; color: #eb0c75; text-align: center; } #portfolio article.content .box ul.traduction li a.active { color: #eb0c75; } #portfolio article.content .box ul.traduction li a.active:after { color: #0ceb46; } #portfolio article.content .box ul.traduction li:hover a { top: -20px; } #portfolio article.content .box ul.share { position: absolute; right: 100px; width: 100px; text-align: justify; color: #0ceb46; margin: 0 auto; padding: 75px 0 25px; } #portfolio article.content .box ul.share li { height: 20px; overflow: hidden; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } #portfolio article.content .box ul.share li a { display: block; position: relative; top: 0; width: 30px; height: 20px; font-family: 'Icon', sans-serif; font-size: .85em; font-weight: 100; color: inherit; text-align: center; line-height: 22px; outline: none; } #portfolio article.content .box ul.share li a:after { content: attr(data-content); display: block; position: absolute; left: 0; top: 20px; width: 30px; height: 20px; color: #eb0c75; text-align: center; } #portfolio article.content .box ul.share li:hover a { top: -20px; } #portfolio article.content .box .box-content { padding: 50px 0; } #portfolio article.content .box p { width: 100%; font-size: .8em; font-weight: 300; color: #777; text-transform: uppercase; text-align: left; line-height: 1.25em; padding: 7px 0; } #portfolio article.content .box p.icon { width: 100%; height: 18px; font-size: .7em; font-weight: 500; color: #777; text-transform: uppercase; padding: 0 5px; } #portfolio article.content .box p a { color: #eb0c75; } #portfolio article.content .box p a:hover { color: #777; } #portfolio article.content .box p.category { color: #0ceb46; text-align: center; margin-top: -7px; padding: 0 0 100px; } #portfolio article.content .box img { width: 100%; padding: 75px 15% 0; } /**********CONTACT***********/ #contact .content .box { width: 80%; margin: 0 auto; } #contact .content .box .message { background: rgba(12, 235, 70, 0.2); width: 100%; padding: 25px 0; } #contact .content .box .message h3 { font-size: 2em; font-weight: 300; text-transform: uppercase; padding: 0 15px; } #contact .content .box .message h4 { font-size: 1.25em; font-weight: 700; text-transform: uppercase; padding: 0 15px; } #contact .content .box span.field { position: relative; display: inline-block; width: 100%; vertical-align: top; margin: 0 auto; overflow: hidden; z-index: 1; } #contact .content .box span.field .input { position: relative; display: block; float: right; background: transparent; width: 100%; font-size: 1em; font-weight: 300; color: #0ceb46; border: none; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; margin-top: 1em; padding: 1.05em 0.15em; -webkit-appearance: none; } #contact .content .box span.field .input:focus { outline: none; } #contact .content .box span.field .input:focus + .label:after { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #contact .content .box span.field .input:focus + .label .label-content { -webkit-animation: mycontact 0.35s forwards; -moz-animation: mycontact 0.35s forwards; -o-animation: mycontact 0.35s forwards; -ms-animation: mycontact 0.35s forwards; animation: mycontact 0.35s forwards; } #contact .content .box span.field .label { display: inline-block; float: right; position: absolute; bottom: 0; left: 0; width: 100%; height: -moz-calc(100% - 1em); height: -webkit-calc(100% - 1em); height: calc(100% - 1em); color: #777; font-weight: bold; font-size: 70.25%; text-align: left; padding: 0 0.25em; pointer-events: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #contact .content .box span.field .label .label-content { position: absolute; display: block; width: 100%; padding: 1.6em 0; } #contact .content .box span.field .label:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: -moz-calc(100% - 10px); height: -webkit-calc(100% - 10px); height: calc(100% - 10px); border-bottom: 1px solid #777; } #contact .content .box span.field .label:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: -moz-calc(100% - 10px); height: -webkit-calc(100% - 10px); height: calc(100% - 10px); border-bottom: 1px solid #0ceb46; margin-top: 0; border-bottom: 4px solid #0ceb46; transform: translate3d(-100%, 0, 0); -moz-transition: -moz-transform 0.35s ease-in; -o-transition: -o-transform 0.35s ease-in; -webkit-transition: -webkit-transform 0.35s ease-in; transition: transform 0.35s ease-in; } #contact .content .box span.field.filled .label:after { -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #contact .content .box span.field.filled .label-content { -webkit-animation: mycontact 0.35s forwards; -moz-animation: mycontact 0.35s forwards; -o-animation: mycontact 0.35s forwards; -ms-animation: mycontact 0.35s forwards; animation: mycontact 0.35s forwards; } #contact .content .box .button { position: relative; width: 250px; height: 50px; background: rgba(12, 235, 70, 0.7); color: #fff; font-family: 'Icon'; font-size: 1.25em; font-weight: 100; line-height: 50px; border: none; margin: 35px auto 0; overflow: hidden; } #contact .content .box .button span { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 50px; } #contact .content .box .button:after { content: ''; display: block; position: absolute; top: 50px; left: 0; width: 100%; height: 50px; background: #0ceb46; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; z-index: -1; } #contact .content .box .button:hover:after { top: 0; } @-webkit-keyframes mycontact { 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(1em, 0, 0); -ms-transform: translate3d(1em, 0, 0); -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 51% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(-1em, -40%, 0); -ms-transform: translate3d(-1em, -40%, 0); -webkit-transform: translate3d(-1em, -40%, 0); transform: translate3d(-1em, -40%, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate3d(0, -40%, 0); -ms-transform: translate3d(0, -40%, 0); -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } } @-moz-keyframes mycontact { 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(1em, 0, 0); -ms-transform: translate3d(1em, 0, 0); -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 51% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(-1em, -40%, 0); -ms-transform: translate3d(-1em, -40%, 0); -webkit-transform: translate3d(-1em, -40%, 0); transform: translate3d(-1em, -40%, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate3d(0, -40%, 0); -ms-transform: translate3d(0, -40%, 0); -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } } @-o-keyframes mycontact { 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(1em, 0, 0); -ms-transform: translate3d(1em, 0, 0); -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 51% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(-1em, -40%, 0); -ms-transform: translate3d(-1em, -40%, 0); -webkit-transform: translate3d(-1em, -40%, 0); transform: translate3d(-1em, -40%, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate3d(0, -40%, 0); -ms-transform: translate3d(0, -40%, 0); -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } } @-ms-keyframes mycontact { 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(1em, 0, 0); -ms-transform: translate3d(1em, 0, 0); -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 51% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(-1em, -40%, 0); -ms-transform: translate3d(-1em, -40%, 0); -webkit-transform: translate3d(-1em, -40%, 0); transform: translate3d(-1em, -40%, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate3d(0, -40%, 0); -ms-transform: translate3d(0, -40%, 0); -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } } @keyframes mycontact { 50% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(1em, 0, 0); -ms-transform: translate3d(1em, 0, 0); -webkit-transform: translate3d(1em, 0, 0); transform: translate3d(1em, 0, 0); } 51% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-transform: translate3d(-1em, -40%, 0); -ms-transform: translate3d(-1em, -40%, 0); -webkit-transform: translate3d(-1em, -40%, 0); transform: translate3d(-1em, -40%, 0); } 100% { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; -moz-transform: translate3d(0, -40%, 0); -ms-transform: translate3d(0, -40%, 0); -webkit-transform: translate3d(0, -40%, 0); transform: translate3d(0, -40%, 0); } } /*______________________________________________________________ 7) CONTENT ***************************************************** 7.1) LOOP ************************************************** ______________________________________________________________*/ /*______________________________________________________________ 7.2) SINGLE ************************************************ ______________________________________________________________*/ /*______________________________________________________________ 7.3) PAGE ************************************************** ______________________________________________________________*/ #loader { position: fixed; width: 100vw; height: 100vh; background: #fff; z-index: 10101; -webkit-animation: backgroundColor 2s forwards; -moz-animation: backgroundColor 2s forwards; -o-animation: backgroundColor 2s forwards; -ms-animation: backgroundColor 2s forwards; animation: backgroundColor 2s forwards; } #loader .background { position: absolute; top: 0; left: -moz-calc(100% / 3); left: -webkit-calc(100% / 3); left: calc(100% / 3); width: -moz-calc(100% / 3); width: -webkit-calc(100% / 3); width: calc(100% / 3); height: 100%; background: url("../img/logo.png"); background-size: 150% auto; background-position: 50% 50%; background-repeat: no-repeat; } #loader .background:before, #loader .background:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: url("../img/logo.png"); background-size: 150% auto; background-repeat: no-repeat; } #loader .background:before { top: 0; left: -100%; background-position: -150% 50%; } #loader .background:after { top: 0; left: 100%; background-position: 250% 50%; } #loader span { display: block; position: absolute; top: 100%; left: -moz-calc(100% / 3); left: -webkit-calc(100% / 3); left: calc(100% / 3); width: -moz-calc(100% / 3); width: -webkit-calc(100% / 3); width: calc(100% / 3); height: 100%; background: #0ceb46; -webkit-animation: loader 2s forwards; -moz-animation: loader 2s forwards; -o-animation: loader 2s forwards; -ms-animation: loader 2s forwards; animation: loader 2s forwards; } #loader span:before, #loader span:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #0ceb46; } #loader span:before { top: 25%; left: -100%; -webkit-animation: loaderBefore 2s forwards; -moz-animation: loaderBefore 2s forwards; -o-animation: loaderBefore 2s forwards; -ms-animation: loaderBefore 2s forwards; animation: loaderBefore 2s forwards; } #loader span:after { top: 50%; left: 100%; -webkit-animation: loaderAfter 2s forwards; -moz-animation: loaderAfter 2s forwards; -o-animation: loaderAfter 2s forwards; -ms-animation: loaderAfter 2s forwards; animation: loaderAfter 2s forwards; } @-webkit-keyframes backgroundColor { 0% { background: #fff; } 50% { background: #fff; } 51% { background: none; } 100% { background: none; } } @-moz-keyframes backgroundColor { 0% { background: #fff; } 50% { background: #fff; } 51% { background: none; } 100% { background: none; } } @-o-keyframes backgroundColor { 0% { background: #fff; } 50% { background: #fff; } 51% { background: none; } 100% { background: none; } } @-ms-keyframes backgroundColor { 0% { background: #fff; } 50% { background: #fff; } 51% { background: none; } 100% { background: none; } } @keyframes backgroundColor { 0% { background: #fff; } 50% { background: #fff; } 51% { background: none; } 100% { background: none; } } @-webkit-keyframes loader { 0% { top: 100%; } 50% { top: 0; } 100% { top: -100%; } } @-moz-keyframes loader { 0% { top: 100%; } 50% { top: 0; } 100% { top: -100%; } } @-o-keyframes loader { 0% { top: 100%; } 50% { top: 0; } 100% { top: -100%; } } @-ms-keyframes loader { 0% { top: 100%; } 50% { top: 0; } 100% { top: -100%; } } @keyframes loader { 0% { top: 100%; } 50% { top: 0; } 100% { top: -100%; } } @-webkit-keyframes loaderBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: -150%; } } @-moz-keyframes loaderBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: -150%; } } @-o-keyframes loaderBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: -150%; } } @-ms-keyframes loaderBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: -150%; } } @keyframes loaderBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: -150%; } } @-webkit-keyframes loaderAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: -125%; } } @-moz-keyframes loaderAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: -125%; } } @-o-keyframes loaderAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: -125%; } } @-ms-keyframes loaderAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: -125%; } } @keyframes loaderAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: -125%; } } #fadeIn { display: none; position: fixed; width: 100vw; height: 100vh; background: none; z-index: 10101; } #fadeIn span { display: block; position: absolute; left: -moz-calc(100% / 3); left: -webkit-calc(100% / 3); left: calc(100% / 3); width: -moz-calc(100% / 3); width: -webkit-calc(100% / 3); width: calc(100% / 3); height: 100%; background: #fff url("../img/logo.png"); background-size: 150% auto; background-position: 50% 50%; background-repeat: no-repeat; } #fadeIn span:before, #fadeIn span:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; background: #fff url("../img/logo.png"); background-size: 150% auto; background-repeat: no-repeat; } #fadeIn span:before { background-position: -150% 50%; } #fadeIn span:after { background-position: 250% 50%; } #fadeIn.active { display: block; } #fadeIn.active span { top: 100%; -webkit-animation: exit 1.5s forwards; -moz-animation: exit 1.5s forwards; -o-animation: exit 1.5s forwards; -ms-animation: exit 1.5s forwards; animation: exit 1.5s forwards; } #fadeIn.active span:before { top: 0; left: -100%; -webkit-animation: exitBefore 1.5s forwards; -moz-animation: exitBefore 1.5s forwards; -o-animation: exitBefore 1.5s forwards; -ms-animation: exitBefore 1.5s forwards; animation: exitBefore 1.5s forwards; } #fadeIn.active span:after { top: 0; left: 100%; -webkit-animation: exitAfter 1.5s forwards; -moz-animation: exitAfter 1.5s forwards; -o-animation: exitAfter 1.5s forwards; -ms-animation: exitAfter 1.5s forwards; animation: exitAfter 1.5s forwards; } @-webkit-keyframes exit { 0% { top: 100%; } 60% { top: -100%; } 100% { top: -100%; } } @-moz-keyframes exit { 0% { top: 100%; } 60% { top: -100%; } 100% { top: -100%; } } @-o-keyframes exit { 0% { top: 100%; } 60% { top: -100%; } 100% { top: -100%; } } @-ms-keyframes exit { 0% { top: 100%; } 60% { top: -100%; } 100% { top: -100%; } } @keyframes exit { 0% { top: 100%; } 60% { top: -100%; } 100% { top: -100%; } } @-webkit-keyframes exitBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: 0; } } @-moz-keyframes exitBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: 0; } } @-o-keyframes exitBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: 0; } } @-ms-keyframes exitBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: 0; } } @keyframes exitBefore { 0% { top: 25%; } 60% { top: 0; } 100% { top: 0; } } @-webkit-keyframes exitAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: 0; } } @-moz-keyframes exitAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: 0; } } @-o-keyframes exitAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: 0; } } @-ms-keyframes exitAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: 0; } } @keyframes exitAfter { 0% { top: 50%; } 70% { top: 0; } 100% { top: 0; } } /*______________________________________________________________ 7.4) ASIDE ************************************************* ______________________________________________________________*/ .logo { position: fixed; top: 12px; left: 0; color: #07c438; z-index: 9999; } .logo p { position: absolute; top: 0; left: 16px; width: 190px; -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .logo p a { display: block; font-size: .8em; font-weight: 700; color: inherit; text-transform: uppercase; text-align: center; -moz-transform: skewX(-5deg); -ms-transform: skewX(-5deg); -webkit-transform: skewX(-5deg); transform: skewX(-5deg); outline: none; } .logo p a span { color: #eb0c75; font-weight: 300; } .lang { position: fixed; bottom: 75px; left: 20px; z-index: 9999; } .lang ul { -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } .lang ul li { position: relative; display: inline-block; height: 20px; margin: 0 -5px; padding: 0 5px; overflow: hidden; -moz-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; -webkit-transition: all 0.35s ease-in; transition: all 0.35s ease-in; } .lang ul li a { display: block; position: relative; top: 0; width: 100%; height: 20px; font-size: .8em; font-weight: 700; color: #07c438; text-transform: uppercase; text-align: center; line-height: 20px; padding: 0 5px; -moz-transform: skewX(-5deg); -ms-transform: skewX(-5deg); -webkit-transform: skewX(-5deg); transform: skewX(-5deg); outline: none; } .lang ul li a:after { content: attr(data-content); display: block; position: absolute; top: 20px; width: 95%; height: 20px; background: #07c438; color: #fff; } .lang ul li:hover a { top: -20px; color: #eb0c75; } .lang ul li.active a { color: #eb0c75; } .lang ul li.active a:after { background: #07c438; } /*______________________________________________________________ 8) CONTACT ***************************************************** ______________________________________________________________*/ /*______________________________________________________________ 9) FOOTER ****************************************************** ______________________________________________________________*/ footer { position: relative; top: 0; width: 100vw; height: 25px; z-index: 9998; } footer #footer-box { width: 100%; height: 25px; padding: 0 75px; } footer #footer-box p { height: 25px; font-size: .6em; color: #777; text-align: center; line-height: 25px; } footer #footer-box p#copyright { float: left; text-align: left; } footer #footer-box p#mentions { float: right; text-align: right; } footer #footer-box p a { color: #0ceb46; } footer #footer-box p a:hover { color: #777; }