@font-face { font-weight: normal; font-style: normal; font-family: 'icomoon'; src:url('../fonts/icomoon/icomoon.eot?-ee0u0f'); src:url('../fonts/icomoon/icomoon.eot?#iefix-ee0u0f') format('embedded-opentype'), url('../fonts/icomoon/icomoon.woff?-ee0u0f') format('woff'), url('../fonts/icomoon/icomoon.ttf?-ee0u0f') format('truetype'), url('../fonts/icomoon/icomoon.svg?-ee0u0f#icomoon') format('svg'); } html, body, .container, .header { height: 100%; top: 0px; left: 0px; } body{ height: 101%; } /* Header */ .header { position: relative; margin: 0 auto; min-height: 560px; width: 100%; } .bg-img { position: absolute; overflow: hidden; top: 0; left: 0; right: 0; bottom: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .bg-img{ background-image: url("../img/bg-ich-1.png"), url("../img/bg-ich-2.png"); background-position: right top; background-repeat: no-repeat, no-repeat; background-size: contain, cover; opacity: 1; } .bg-img img { position: absolute; top: 0; left: 0; display: block; min-width: 100%; min-height: 100%; } /* Trigger Button */ button.trigger { position: fixed; bottom: 40px; left: 50%; z-index: 5000; display: block; margin-left: -0.5em; padding: 0; width: 1em; height: 1em; border: none; background: transparent; color: transparent; font-size: 2em; cursor: pointer; } .container:not(.notrans) button.trigger { -webkit-transition: opacity 0.3s 0.5s; transition: opacity 0.3s 0.5s; } .container.modify:not(.notrans) button.trigger { opacity: 0; pointer-events: none; -webkit-transition-delay: 0s; transition-delay: 0s; } button.trigger::before { position: absolute; bottom: 100%; left: -100%; padding: 0.8em; width: 300%; color: #fff; content: attr(data-info); font-size: 0.5em; -webkit-backface-visibility: hidden; backface-visibility: hidden; } button.trigger:focus { outline: none; } button.trigger span { position: relative; display: block; overflow: hidden; width: 100%; height: 100%; } button.trigger span::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; content: "\e097"; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'icomoon'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .bounce{ animation-delay: 2s; animation-iteration-count: infinite; } /* Content */ .content { margin: 0 auto; padding: 0 0 3em; } .content > div:not(.title) { margin: -80px auto 0; max-width: 900px; padding: 0 1.25em; } .content > div:not(.title) p { margin: 0 auto 1.5em auto; } .content > div:not(.title) p:first-child { font-size: 1.35em; } /* .content h3 { margin: 0; font-size: 1.4em; } .content blockquote { padding: 0.25em; font-style: italic; font-size: 1.65em; font-family: 'Lora', serif; line-height: 1.4; } .content blockquote::before { content: '\201C'; } .content blockquote::after { content: '\201D'; } */ /***** Individual effects *****/ /* -------------------------- */ /* Push */ /* -------------------------- */ .intro-effect-push:not(.notrans) .header, .intro-effect-push:not(.notrans) > .title, .intro-effect-push:not(.notrans) .content > div { -webkit-transition-property: opacity, -webkit-transform; transition-property: opacity, transform; -webkit-transition-duration: 1s; transition-duration: 1s; } .intro-effect-push:not(.notrans) .header { -webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1); transition-timing-function: cubic-bezier(0.7,0,0.3,1); -webkit-transition-duration: 1.2s; transition-duration: 1.2s; } .intro-effect-push .codrops-demos a { color: #108576; } .intro-effect-push .header { position: absolute; z-index: 1500; } .intro-effect-push > .title { position: relative; top: auto; left: auto; padding: 6em 1em 2em; } .intro-effect-push .content > div { margin-top: 50px; color: #b2b2c0; } .intro-effect-push > .title, .intro-effect-push .content > div { -webkit-transform: translateY(400px); transform: translateY(400px); opacity: 0; } .intro-effect-push.modify > .title, .intro-effect-push.modify .content > div { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } .intro-effect-push.modify .header { opacity: 0; -webkit-transform: translateY(-100%) scale(0.9); transform: translateY(-100%) scale(0.9); } /* Delays */ .intro-effect-push.modify:not(.notrans) > .title { -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .intro-effect-push.modify:not(.notrans) .content > div { -webkit-transition-delay: 0.6s; transition-delay: 0.6s; }