/* * Boden (WordPress) * Copyright 2016, Royalz * www.losroyalz.com */ /* Table of Content ================================================== # Menu # Header # Footer # Landing # About # Quotes # Services # Team # Facts # Portfolio # Blog # Article # Contact # Start # Call to Action */ /* Menu ================================================== */ div.menu { height: 0px; position: absolute; right: 0px; top: 55px; z-index: 1001; } div.menu .menu-toggle { cursor: pointer; float: right; height: 12px; width: 22px; } div.menu .menu-toggle { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } div.menu .menu-toggle .icon { background-color: #000000; height: 2px; width: 22px; } body.dark div.menu .menu-toggle .icon { background-color: #ffffff; } div.menu .menu-toggle .icon { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } div.menu .menu-toggle .icon { -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); } div.menu .menu-toggle .icon:after, div.menu .menu-toggle .icon:before { background-color: #000000; content: " "; display: block; height: 2px; width: 22px; } div.menu .menu-toggle .icon:after, div.menu .menu-toggle .icon:before { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } div.menu.light .menu-toggle .icon, div.menu.light .menu-toggle .icon:after, div.menu.light .menu-toggle .icon:before { background-color: #ffffff; } div.menu .menu-toggle .icon:after { -webkit-transform: translate(0px, 3px); -moz-transform: translate(0px, 3px); -ms-transform: translate(0px, 3px); -o-transform: translate(0px, 3px); transform: translate(0px, 3px); } div.menu .menu-toggle .icon:before { -webkit-transform: translate(0px, -5px); -moz-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); transform: translate(0px, -5px); } div.menu.active .menu-toggle .icon { background-color: transparent !important; } div.menu.active .menu-toggle .icon:before { background-color: #ffffff; } div.menu.active .menu-toggle .icon:before { -webkit-transform: rotate(-45deg) translate(-1px, 1px); -moz-transform: rotate(-45deg) translate(-1px, 1px); -ms-transform: rotate(-45deg) translate(-1px, 1px); -o-transform: rotate(-45deg) translate(-1px, 1px); transform: rotate(-45deg) translate(-1px, 1px); } div.menu.active .menu-toggle .icon:after { background-color: #ffffff; } div.menu.active .menu-toggle .icon:after { -webkit-transform: rotate(45deg) translate(0px,0px); -moz-transform: rotate(45deg) translate(0px,0px); -ms-transform: rotate(45deg) translate(0px,0px); -o-transform: rotate(45deg) translate(0px,0px); transform: rotate(45deg) translate(0px,0px); } /* Navigation ================================================== */ nav.navigation { background-color: #222222; bottom: 0px; position: fixed; right: 0px; top: 0px; z-index: 1000; opacity: 0; visibility: hidden; } nav.navigation.active { opacity: 1; visibility: visible; } nav.navigation .copyrights span { color: #ffffff; } nav.navigation .copyrights a { border-bottom: 2px solid #ffffff; padding-bottom: 5px; } /* Side Menu */ nav.navigation.side-menu { width: 26%; z-index: 1100; } body.dark nav.navigation.side-menu { background-color: #eeeeee; } nav.navigation.side-menu { -webkit-transform: translateX(126%); -moz-transform: translateX(126%); -ms-transform: translateX(126%); -o-transform: translateX(126%); transform: translateX(126%); } nav.navigation.side-menu { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; -moz-transition: -moz-transform 0.4s ease-in-out 0s; -ms-transition: -ms-transform 0.4s ease-in-out 0s; -o-transition: -o-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; } nav.navigation.side-menu.active { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); transform: translateX(0%); } nav.navigation.side-menu .container { padding-left: 40px; padding-right: 40px; } nav.navigation.side-menu .menu-button { cursor: pointer; margin-top: 45px; position: relative; z-index: 10; } nav.navigation.side-menu .menu-button span { color: #ffffff; } body.dark nav.navigation.side-menu .menu-button span { color: #222222; } nav.navigation.side-menu .menu-button .icon { background-color: #ffffff; float: right; height: 2px; margin-top: 16px; width: 22px; } body.dark nav.navigation.side-menu .menu-button .icon { background-color: #222222; } nav.navigation.side-menu .menu-button .icon { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } nav.navigation.side-menu .menu-button .icon:after, nav.navigation.side-menu .menu-button .icon:before { background-color: #ffffff; content: " "; display: block; height: 2px; width: 22px; } body.dark nav.navigation.side-menu .menu-button .icon:after, body.dark nav.navigation.side-menu .menu-button .icon:before { background-color: #222222; } nav.navigation.side-menu .menu-button .icon:after, nav.navigation.side-menu .menu-button .icon:before { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } nav.navigation.side-menu .menu-button .icon:after { -webkit-transform: translate(0px, 3px); -moz-transform: translate(0px, 3px); -ms-transform: translate(0px, 3px); -o-transform: translate(0px, 3px); transform: translate(0px, 3px); } nav.navigation.side-menu .menu-button .icon:before { -webkit-transform: translate(0px, -5px); -moz-transform: translate(0px, -5px); -ms-transform: translate(0px, -5px); -o-transform: translate(0px, -5px); transform: translate(0px, -5px); } nav.navigation.side-menu .navigation-links { margin-bottom: -24px; margin-top: -24px; } nav.navigation.side-menu .navigation-links ul { } nav.navigation.side-menu .navigation-links li { } nav.navigation.side-menu .navigation-links li a { color: #ffffff; font-size: 11px; font-weight: 400; letter-spacing: 0.2em; line-height: 55px; text-transform: uppercase; } body.dark nav.navigation.side-menu .navigation-links li a { color: #222222; } nav.navigation.side-menu .navigation-links li.icon a:after { background-image: url("../images/icons/icon-arrow-light.png"); content: " "; display: inline-block; height: 16px; opacity: 0.47; width: 16px; } body.dark nav.navigation.side-menu .navigation-links li.icon a:after { background-image: url("../images/icons/icon-arrow-dark.png"); opacity: 0.47; } nav.navigation.side-menu .navigation-links li.icon a:after { -webkit-transform: rotate(-90deg) translate(-4px, 14px); -moz-transform: rotate(-90deg) translate(-4px, 14px); -ms-transform: rotate(-90deg) translate(-4px, 14px); -o-transform: rotate(-90deg) translate(-4px, 14px); transform: rotate(-90deg) translate(-4px, 14px); } nav.navigation.side-menu .navigation-links li.icon a:after { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } nav.navigation.side-menu .navigation-links li.icon a:hover:after { opacity: 1; } nav.navigation.side-menu .navigation-links li a:hover { color: #ffffff; } body.dark nav.navigation.side-menu .navigation-links li a:hover { color: #000000; } nav.navigation.side-menu .social-links { margin-bottom: 25px; } nav.navigation.side-menu .social-links ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } nav.navigation.side-menu .social-links li { margin-right: 25px; } nav.navigation.side-menu .copyrights span { color: #ffffff; } body.dark nav.navigation.side-menu .copyrights span { color: #222222; } nav.navigation.side-menu .copyrights a { border-bottom: 2px solid #ffffff; padding-bottom: 5px; } body.dark nav.navigation.side-menu .copyrights a { border-bottom: 2px solid #bbbbbb; } body.dark nav.navigation.side-menu .copyrights a:hover { border-bottom: 2px solid #222222; } /* Full Screen */ nav.navigation.full-screen { left: 0px; width: 100%; } nav.navigation.full-screen { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } nav.navigation.full-screen.active { } nav.navigation.full-screen .container { opacity: 0; } nav.navigation.full-screen .container { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } nav.navigation.full-screen.active .container { opacity: 1; } nav.navigation.full-screen.active .container { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } nav.navigation.full-screen.active .container { -webkit-transition: all 0.6s ease 0.3s; -moz-transition: all 0.6s ease 0.3s; -ms-transition: all 0.6s ease 0.3s; -o-transition: all 0.6s ease 0.3s; transition: all 0.6s ease 0.3s; } nav.navigation.full-screen .menu-button { display: none; } nav.navigation.full-screen .navigation-links { overflow: auto; } nav.navigation.full-screen .navigation-links ul { } nav.navigation.full-screen .navigation-links li { } nav.navigation.full-screen .navigation-links li:first-child { margin-top: -20px; } nav.navigation.full-screen .navigation-links li:last-child { margin-bottom: 0px; } nav.navigation.full-screen .navigation-links li a { color: #ffffff; font-size: 55px; font-weight: 200; letter-spacing: 0.01em; line-height: 85px; } nav.navigation.full-screen .navigation-links li a:hover { color: #ffffff; } nav.navigation.full-screen .social-links { margin-bottom: 25px; } nav.navigation.full-screen .social-links ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } nav.navigation.full-screen .social-links li { margin-right: 25px; } /* Header ================================================== */ header.header { background-color: transparent; height: 110px; padding: 29px 100px; position: absolute; text-align: center; width: 100%; z-index: 100; } header.header .logo { line-height: 0px; text-align: left; width: 20%; } header.header .logo a { cursor: pointer; display: inline-block; opacity: 1; } header.header .logo a { -webkit-transition: opacity 0.6s ease 0s; -moz-transition: opacity 0.6s ease 0s; -ms-transition: opacity 0.6s ease 0s; -o-transition: opacity 0.6s ease 0s; transition: opacity 0.6s ease 0s; } header.header .logo a:hover { opacity: 0.75; } header.header .logo img { max-height: 80px; } header.header .logo h4 { color: #000000; font-weight: 300; letter-spacing: 0.025em; text-transform: uppercase; } /* Footer ================================================== */ footer.footer { background-color: #222222; height: 240px; padding-top: 74px; } body.dark footer.footer { background-color: #eeeeee; } footer.footer .copyrights .text { color: #ffffff; } body.dark footer.footer .copyrights .text { color: #222222; } footer.footer .copyrights .text { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } footer.footer .copyrights .text.hover { color: #9e9e9e; } body.dark footer.footer .copyrights .text.hover { color: #000000; } footer.footer .copyrights .text a, footer.footer .copyrights .text a:hover { border-bottom-color: #ffffff; border-bottom-style: solid; border-bottom-width: 2px; color: #ffffff; opacity: 1; padding-bottom: 6px; text-decoration: none; } body.dark footer.footer .copyrights .text a { border-bottom-color: #bbbbbb; color: #000000; } body.dark footer.footer .copyrights .text a:hover { border-bottom-color: #000000; color: #000000; } footer.footer .social-links { margin-bottom: 26px; } footer.footer .social-links li { display: inline-block; margin-right: 36px; } footer.footer .social-links li:last-child { margin-right: 0px; } footer.footer .social-links li.button.circle:before { } body.dark footer.footer .social-links li .button.circle:before { background-color: #222222; } body.dark footer.footer .social-links li .button.circle:hover:before { background-color: #000000; } footer.footer .back { } footer.footer .back .back-button { background-image: url("../images/icons/footer-back-arrow-light.png"); background-position: center; background-repeat: no-repeat; background-size: 24px 11px; cursor: pointer; float: right; height: 11px; margin-top: 10px; opacity: 0.47; width: 24px; } body.dark footer.footer .back .back-button { background-image: url("../images/icons/footer-back-arrow-dark.png"); opacity: 0.47; } footer.footer .back .back-button { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } footer.footer .back .back-button:hover { opacity: 1; } /* Comments ================================================== */ .comments-area { margin-bottom: 40px; margin-top: 105px; } .comments-area .comments { border-color: #d4d4d4; border-style: solid; border-width: 2px; border-bottom: none; border-left: none; border-right: none; } body.dark .comments-area .comments { border-color: #444444; } .comments-area .comments { margin-bottom: 0px; padding-bottom: 100px; padding-top: 100px; text-align: center; } .comments-area .comments > .title { font-size: 60px; letter-spacing: 0.01em; margin-bottom: 43px; } .comments-area .comments .comment-list { max-width: 700px; margin-left: auto; margin-right: auto; margin-top: 0px; text-align: left; } .comments-area .comments .comment-list .comment { padding: 50px 0px 0px; } .comments-area .comments .comment-list .comment:last-child { } .comments-area .comments .comment-list > .comment:last-child { padding-bottom: 0px; } .comments-area .comments .comment-list .comment .comment-body .comment-author { display: inline-block; } .comments-area .comments .comment-list .comment .comment-body .comment-author .avatar { border-radius: 50px; position: absolute; height: 50px; width: 50px; } .comments-area .comments .comment-list .comment .comment-body .comment-author .author { color: #000000; font-size: 12px; font-weight: 400; margin-top: 3px; left: 70px; letter-spacing: 0.2em; position: relative; text-transform: uppercase; } body.dark .comments-area .comments .comment-list .comment .comment-body .comment-author .author { color: #ffffff; } .comments-area .comments .comment-list .comment .comment-body .comment-meta { padding-left: 0px; padding-right: 0px; } .comments-area .comments .comment-list .comment .comment-body .comment-meta .item { text-align: left; } .comments-area .comments .comment-list .comment .comment-body .comment-meta .item:last-child { text-align: right; } .comments-area .comments .comment-list .comment .comment-body .comment-meta .comment-reply-link { background-image: url("../images/icons/icon-comment-dark.png"); background-position: center; background-repeat: no-repeat; background-size: 25px 28px; display: inline-block; height: 28px; opacity: 0; text-indent: 9999px; width: 25px; } body.dark .comments-area .comments .comment-list .comment .comment-body .comment-meta .comment-reply-link { background-image: url("../images/icons/icon-comment-light.png"); } .comments-area .comments .comment-list .comment .comment-body .comment-meta .comment-reply-link { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .comments-area .comments .comment-list .comment:hover .comment-body .comment-meta .comment-reply-link { opacity: 0.27; } .comments-area .comments .comment-list .comment .comment-body .comment-metadata { left: 70px; position: relative; top: -11px; } .comments-area .comments .comment-list .comment .comment-body .comment-metadata span { color: #aaaaaa; font-family: "Montserrat"; font-size: 10px; } body.dark .comments-area .comments .comment-list .comment .comment-body .comment-metadata span { color: #aaaaaa; } .comments-area .comments .comment-list .comment .comment-body .comment-metadata a { display: inline; } .comments-area .comments .comment-list .comment .comment-body .comment-metadata .edit-link { display: none; } .comments-area .comments .comment-list .comment .comment-body .comment-metadata .edit-link:before { content: "/"; display: inline-block; font-family: "Montserrat"; font-size: 10px; margin-left: 2px; margin-right: 4px; } .comments-area .comments .comment-list .comment .comment-body .comment-content { border-bottom-color: #d4d4d4; border-bottom-style: solid; border-bottom-width: 2px; margin-top: 10px; padding-bottom: 55px; } body.dark .comments-area .comments .comment-list .comment .comment-body .comment-content { border-bottom-color: #d4d4d4; } .comments-area .comments .comment-list .comment .comment-body .comment-content p { color: #888888; font-size: 14px; line-height: 30px; } body.dark .comments-area .comments .comment-list .comment .comment-body .comment-content p { color: #888888; } .comments-area .comments .comment-list > .comment:last-child .comment-body .comment-content { border-bottom-style: none; padding-bottom: 0px; } .comments-area .comments .comment-list .comment .children { margin-left: 50px; } .comments-area .comment-respond .comment-reply-title { display: none; } .comments-area .comment-respond { border-top-color: #d4d4d4; border-top-style: solid; border-top-width: 2px; padding-top: 90px; } body.dark .comments-area .comment-respond { border-top-color: #444444; } .comments-area .comment-respond form { max-width: 700px; margin-left: auto; margin-right: auto; } .comments-area .comment-respond .container .item { margin-bottom: 40px; } .comments-area .comment-respond .container .item span { color: #888888; float: left; margin-left: 20px; } body.dark .comments-area .comment-respond .container .item span { color: #888888; } .comments-area .form-submit { margin-top: 60px; text-align: center; } .comments-area .form-submit .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; } body.dark .comments-area .form-submit .button.icon:after { background-image: url("../images/icons/icon-arrow-dark.png"); opacity: 0.47; } .comments-area .form-submit .button.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* Landing ================================================== */ section.landing { } section.landing.image .background { background-color: #111111; } section.landing.image .background { -webkit-animation-duration: 7s; animation-duration: 7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: kenburns; animation-name: kenburns; } @-webkit-keyframes kenburns { 0% { -webkit-transform: translate(2%, -3%) scale(1.1, 1.1); -moz-transform: translate(2%, -3%) scale(1.1, 1.1); -ms-transform: translate(2%, -3%) scale(1.1, 1.1); -o-transform: translate(2%, -3%) scale(1.1, 1.1); transform: translate(2%, -3%) scale(1.1, 1.1); } 100% { -webkit-transform: translate(0%, 0%) scale(1.15, 1.15); -moz-transform: translate(0%, 0%) scale(1.15, 1.15); -ms-transform: translate(0%, 0%) scale(1.15, 1.15); -o-transform: translate(0%, 0%) scale(1.15, 1.15); transform: translate(0%, 0%) scale(1.15, 1.15); } } @keyframes kenburns { 0% { -webkit-transform: translate(2%, -3%) scale(1.1, 1.1); -moz-transform: translate(2%, -3%) scale(1.1, 1.1); -ms-transform: translate(2%, -3%) scale(1.1, 1.1); -o-transform: translate(2%, -3%) scale(1.1, 1.1); transform: translate(2%, -3%) scale(1.1, 1.1); } 100% { -webkit-transform: translate(0%, 0%) scale(1.15, 1.15); -moz-transform: translate(0%, 0%) scale(1.15, 1.15); -ms-transform: translate(0%, 0%) scale(1.15, 1.15); -o-transform: translate(0%, 0%) scale(1.15, 1.15); transform: translate(0%, 0%) scale(1.15, 1.15); } } section.landing .item-media .video, section.landing .item-media .overlay { bottom: 0px; left: 0px; padding: 0px; position: absolute !important; right: 0px; top: 0px; } section.landing .item-media iframe { -webkit-transform: scale(1.2, 1.2); -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -o-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } section.landing .item-content .main { position: absolute; top: 50%; } section.landing .item-content .main { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } section.landing .item-content .main .title { color: #ffffff; font-size: 80px; font-weight: 100; letter-spacing: 0em; margin-bottom: 20px; } section.landing .item-content .main .text { color: #ffffff; font-size: 24px; font-weight: 300; letter-spacing: 0.025em; margin-bottom: 40px; opacity: 0.5; } section.landing .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-dark.png"); opacity: 0.47; } section.landing .item-content .button.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } section.landing .slider-controls { bottom: 50px; left: 50%; } section.landing .slider-controls { -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } section.landing .slider-controls ul { -webkit-align-items: stretch; align-items: stretch; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } section.landing .slider-controls ul li { background-color: rgba(255,255,255,0.5); border-radius: 5px; height: 5px; margin-right: 30px; text-indent: -9999px; width: 5px; } section.landing .slider-controls ul li:last-child { margin-right: 0px; } section.landing .slider-controls ul li.current { background-color: rgba(255,255,255,1); } /* About ================================================== */ section.about .offset { padding-top: 200px; } section.about .section-header { margin-bottom: 40px; } section.about .section-content { padding-right: 28%; } section.about .item-content .text { margin-bottom: 45px; } section.about .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.5; } body.dark section.about .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-dark.png"); opacity: 0.5; } section.about .item-content .button.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* Quotes ================================================== */ section.quotes { height: 540px; position: relative; } section.quotes .item { padding: 110px 0px; } section.quotes .item-media { } section.quotes .item-content { padding-left: 100px; padding-right: 29.09090909090909%; position: relative; } section.quotes .item-content .title { color: rgba(255,255,255,0.5); display: inline-block; font-size: 11.5px; vertical-align: middle; } section.quotes .item-content .title:before { background-color: rgba(255,255,255,0.5); content: " "; display: inline-block; height: 2px; margin-right: 15px; vertical-align: middle; width: 20px; } section.quotes .item-content .text { color: #ffffff; letter-spacing: 0.01em; } section.quotes .slider-navigation { bottom: 120px; height: 58px; left: 100px; position: absolute; width: 100%; z-index: 10; } section.quotes .slider-navigation:hover { border-color: rgba(255,255,255,0.5); } section.quotes .slider-navigation .prev, section.quotes .slider-navigation .next { background-color: transparent; border-color: rgba(238,238,238,0.5); border-style: solid; border-width: 2px; display: inline-block; height: 54px; width: 67px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } section.quotes .slider-navigation .prev { border-right-color: rgba(238,238,238,0.25); border-right-style: solid; border-right-width: 2px; } section.quotes .slider-navigation .next { border-left-color: rgba(238,238,238,0.25); border-left-style: solid; border-left-width: 2px; margin-left: -2px; } section.quotes .slider-navigation .prev:hover, section.quotes .slider-navigation .next:hover { background-color: rgba(238,238,238,0.5); border-color: rgba(238,238,238,0); } section.quotes .slider-navigation .prev:active, section.quotes .slider-navigation .next:active { background-color: rgba(255,255,255,1); } section.quotes .slider-navigation .prev:before, section.quotes .slider-navigation .next:before { background-image: url("../images/icons/icon-arrow-light.png"); background-position: center; background-repeat: no-repeat; background-size: 16px; content: " "; display: block; height: 16px; margin-left: 24px; margin-top: 17px; opacity: 0.5; width: 16px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } section.quotes .slider-navigation .prev:hover:before, section.quotes .slider-navigation .next:hover:before, section.quotes .slider-navigation .prev:active:before, section.quotes .slider-navigation .next:active:before { background-image: url("../images/icons/icon-arrow-dark.png"); opacity: 1; } section.quotes .slider-navigation .prev:before { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } section.quotes .slider-navigation .next:before { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* Services ================================================== */ section.services .section-header { margin-bottom: 73px; } section.services .section-header .title { text-transform: uppercase; } section.services .item { margin-bottom: 65px; } section.services .item .section-header { margin-bottom: 70px; } section.services .item .item-media { margin-bottom: 20px; } section.services .item .item-media img { max-width: 100%; } section.services .item .item-content .title { margin-bottom: 20px; text-transform: uppercase; } /* Team ================================================== */ section.team .section-header { margin-bottom: 70px; } section.team .item { margin-bottom: 65px; } section.team .item .item-media { margin-bottom: 15px; } section.team .item .item-media img { width: 100%; } section.team .item .item-content .title { font-size: 17px; font-weight: 300; letter-spacing: 0.025em; margin-bottom: 15px; } section.team .item .item-content .text { font-size: 10px; font-weight: 400; letter-spacing: 0.2em; line-height: 1.1; text-transform: uppercase; } /* Devider ================================================== */ section.devider { background-color: #cccccc; height: 1px; margin: 0px 75px; } body.dark section.devider { background-color: #444444; } /* Facts ================================================== */ section.facts .item { margin-bottom: 30px; } section.facts .item-content .title { font-size: 50px; font-weight: 200; letter-spacing: 0.01em; } section.facts .item-content .text { font-size: 17px; letter-spacing: 0.025em; } /* Portfolio ================================================== */ section.portfolio .section-header { height: 520px; position: relative; } section.portfolio.with-filtermenu .section-header { height: 520px; } section.portfolio.with-filtermenu .section-header .item-content { left: 0px; margin-top: 30px; position: absolute; text-align: center; right: 0px; top: 50%; } section.portfolio.with-filtermenu .section-header .item-content { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } section.portfolio.with-filtermenu .section-header .item-content .title { font-size: 60px; margin-bottom: 15px; } section.portfolio.with-filtermenu .section-header .item-content .text { font-size: 17px; line-height: 43px; margin-bottom: 18px; } section.portfolio.with-filtermenu .section-header .item-content .filter { border-bottom-color: transparent; border-bottom-style: solid; border-bottom-width: 2px; display: inline-block; padding: 0px 15px 17px 54px; } section.portfolio.with-filtermenu .section-header .item-content .filter { -webkit-transition: border 0.3s ease 0s; -moz-transition: border 0.3s ease 0s; -ms-transition: border 0.3s ease 0s; -o-transition: border 0.3s ease 0s; transition: border 0.3s ease 0s; } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button { background-color: transparent; color: #666666; cursor: pointer; font-size: 11px; font-weight: 400; line-height: 24px; letter-spacing: 0.2em; position: relative; text-transform: uppercase; } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:hover { color: #000000; } body.dark section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button { color: #ffffff; } body.dark section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:hover { color: #ffffff; } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button { -webkit-transition: color 0.3s ease 0s; -moz-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:before, section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:after { background-color: #888888; content: " "; display: block; height: 2px; left: -42px; opacity: 0.47; position: absolute; width: 22px; } body.dark section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:before, body.dark section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:after { background-color: #eeeeee; opacity: 1; } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:before, section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:after { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:before { -webkit-transform: translate(0px, 8px); -moz-transform: translate(0px, 8px); -ms-transform: translate(0px, 8px); -o-transform: translate(0px, 8px); transform: translate(0px, 8px); } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:after { -webkit-transform: translate(0px, -10px); -moz-transform: translate(0px, -10px); -ms-transform: translate(0px, -10px); -o-transform: translate(0px, -10px); transform: translate(0px, -10px); } section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:hover:before, section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:hover:after { background-color: #000000; } body.dark section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:hover:before, body.dark section.portfolio.with-filtermenu .section-header .item-content .filter .filter-button:hover:after { background-color: #ffffff; } section.portfolio.with-filtermenu.active .section-header .item-content .filter .filter-button:before { -webkit-transform: rotate(-45deg) translate(-8px, 9px); -moz-transform: rotate(-45deg) translate(-8px, 9px); -ms-transform: rotate(-45deg) translate(-8px, 9px); -o-transform: rotate(-45deg) translate(-8px, 9px); transform: rotate(-45deg) translate(-8px, 9px); } section.portfolio.with-filtermenu.active .section-header .item-content .filter .filter-button:after { -webkit-transform: rotate(45deg) translate(-8px, -9px); -moz-transform: rotate(45deg) translate(-8px, -9px); -ms-transform: rotate(45deg) translate(-8px, -9px); -o-transform: rotate(45deg) translate(-8px, -9px); transform: rotate(45deg) translate(-8px, -9px); } /* Filter Bar */ section.portfolio.with-filterbar .section-header { height: 405px; } section.portfolio.with-filterbar .section-header .item-media { bottom: 13px !important; } section.portfolio.with-filterbar .section-header .item-content { bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; } section.portfolio.with-filterbar .section-header .item-content .headline { left: 50%; position: absolute; top: 45%; } section.portfolio.with-filterbar .section-header .item-content .headline { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } section.portfolio.with-filterbar .section-header .item-content .filterbar { background-color: #222222; bottom: 0px; height: 90px; left: 75px; position: absolute; right: 75px; } body.dark section.portfolio.with-filterbar .section-header .item-content .filterbar { background-color: #eeeeee; } section.portfolio.with-filterbar .section-header .item-content .filterbar .bar { position: relative; top: 50%; } section.portfolio.with-filterbar .section-header .item-content .filterbar .bar { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } section.portfolio.with-filterbar .section-header .item-content .filterbar ul { -webkit-align-items: stretch; align-items: stretch; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; -webkit-justify-content: center; justify-content: center; } section.portfolio.with-filterbar .section-header .item-content .filterbar ul li { cursor: pointer; margin: 0px 40px; } section.portfolio.with-filterbar .section-header .item-content .filterbar ul li span { color: #888888; } section.portfolio.with-filterbar .section-header .item-content .filterbar ul li span { -webkit-transition: color 0.3s ease 0s; -moz-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } section.portfolio.with-filterbar .section-header .item-content .filterbar ul li:hover span, section.portfolio.with-filterbar .section-header .item-content .filterbar ul li.active span { color: #ffffff; } body.dark section.portfolio.with-filterbar .section-header .item-content .filterbar ul li:hover span, body.dark section.portfolio.with-filterbar .section-header .item-content .filterbar ul li.active span { color: #000000; } section.portfolio .portfolio-filter { bottom: 0px; height: 0px; left: 0px; margin-top: 110px; position: absolute; right: 0px; top: 0px; z-index: 3; } section.portfolio .portfolio-filter ul { left: 50%; opacity: 0; position: absolute; text-align: left; } section.portfolio .portfolio-filter ul { -webkit-transform: scale(1, 0) translateX(-50%); -moz-transform: scale(1, 0) translateX(-50%); -ms-transform: scale(1, 0) translateX(-50%); -o-transform: scale(1, 0) translateX(-50%); transform: scale(1, 0) translateX(-50%); } section.portfolio .portfolio-filter ul { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.portfolio .portfolio-filter li { cursor: pointer; height: 24px; margin-bottom: 25px; margin-left: 6px; } section.portfolio .portfolio-filter li:before { background-image: url("../images/icons/icon-filter-unchecked-dark.png"); background-position: center; background-repeat: no-repeat; background-size: 24px; content: " "; display: inline-block; float: left; height: 24px; margin-right: 21px; opacity: 0.47; width: 24px; } body.dark section.portfolio .portfolio-filter li:before { background-image: url("../images/icons/icon-filter-unchecked-light.png"); } section.portfolio .portfolio-filter li:before { -webkit-transition: opacity 0.2s ease 0s; -moz-transition: opacity 0.2s ease 0s; -ms-transition: opacity 0.2s ease 0s; -o-transition: opacity 0.2s ease 0s; transition: opacity 0.2s ease 0s; } section.portfolio .portfolio-filter li span { color: #888888; float: left; line-height: 24px; } body.dark section.portfolio .portfolio-filter li span { color: #888888; } section.portfolio .portfolio-filter li span { -webkit-transition: color 0.2s ease 0s; -moz-transition: color 0.2s ease 0s; -ms-transition: color 0.2s ease 0s; -o-transition: color 0.2s ease 0s; transition: color 0.2s ease 0s; } section.portfolio .portfolio-filter li:hover:before { opacity: 1; } section.portfolio .portfolio-filter li.active:before { background-image: url("../images/icons/icon-filter-checked-dark.png"); opacity: 1; } body.dark section.portfolio .portfolio-filter li.active:before { background-image: url("../images/icons/icon-filter-checked-light.png"); } section.portfolio .portfolio-filter li:hover span, section.portfolio .portfolio-filter li.active span { color: #000000; } body.dark section.portfolio .portfolio-filter li:hover span, body.dark section.portfolio .portfolio-filter li.active span { color: #eeeeee; } section.portfolio.active .section-header .item-content .filter { border-bottom-color: #cccccc; } body.dark section.portfolio.active .section-header .item-content .filter { border-bottom-color: #444444; } section.portfolio.active .portfolio-filter { height: auto; } section.portfolio.active .portfolio-filter ul { opacity: 1; } section.portfolio.active .portfolio-filter ul { -webkit-transform: scale(1, 1) translateX(-50%); -moz-transform: scale(1, 1) translateX(-50%); -ms-transform: scale(1, 1) translateX(-50%); -o-transform: scale(1, 1) translateX(-50%); transform: scale(1, 1) translateX(-50%); } section.portfolio.active .portfolio-filter ul { -webkit-transition: opacity 0.6s ease 0.3s; -moz-transition: opacity 0.6s ease 0.3s; -ms-transition: opacity 0.6s ease 0.3s; -o-transition: opacity 0.6s ease 0.3s; transition: opacity 0.6s ease 0.3s; } section.portfolio .section-header .item-media, section.portfolio .section-header .item-content .title, section.portfolio .section-header .item-content .text, section.portfolio .section-content { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.portfolio.active .section-header .item-media, section.portfolio.active .section-header .item-content .title, section.portfolio.active .section-header .item-content .text, section.portfolio.active .section-content { opacity: 0.02; } section.portfolio .section-content { padding-bottom: 45px; padding-top: 100px; min-height: 40px; } section.portfolio .section-content .portfolio-loading { background-color: #eeeeee; background-image: url("../images/icons/icon-loading-dark.png"); background-position: center; background-repeat: no-repeat; background-size: 40px 40px; height: 40px; margin: 0px auto; width: 40px; } section.portfolio .section-content .portfolio-loading { background-color: #222222; background-image: url("../images/icons/icon-loading-light.png"); } section.portfolio .section-content .portfolio-loading { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: rotate; animation-name: rotate; } section.portfolio .section-content .portfolio-loading { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } section.portfolio .section-content .item { height: 0px; opacity: 0; } section.portfolio .section-content .item { -webkit-transition: opacity 1s ease 0s, -webkit-transform 1s ease 0s; -moz-transition: opacity 1s ease 0s, -moz-transform 1s ease 0s; -ms-transition: opacity 1s ease 0s, -ms-transform 1s ease 0s; -o-transition: opacity 1s ease 0s, -o-transform 1s ease 0s; transition: opacity 1s ease 0s, transform 1s ease 0s; } section.portfolio .section-content .item { -webkit-transform: translate(0px, 10px); -moz-transform: translate(0px, 10px); -ms-transform: translate(0px, 10px); -o-transform: translate(0px, 10px); transform: translate(0px, 10px); } section.portfolio .section-content .item.active { height: 100%; margin-bottom: 55px; opacity: 1; } section.portfolio .section-content .item.active { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); transform: translate(0px, 0px); } section.portfolio .section-filtered .item:hover { opacity: 0.75; } section.portfolio .section-content .item .item-media a, section.portfolio .section-filtered .item .item-media a { line-height: 0px; margin-bottom: 20px; } section.portfolio .section-content .item .item-media img, section.portfolio .section-filtered .item .item-media img { height: 100%; width: 100%; } section.portfolio .section-content .item .item-content, section.portfolio .section-filtered .item .item-content { text-align: center; } /* Project ================================================== */ section.project { } section.project .section-header { margin-bottom: 120px; padding-right: 27%; } section.project .section-header .entry-title { margin-bottom: 40px; } section.project .section-header .entry-title .title { font-size: 14px; letter-spacing: 0.01em; text-transform: uppercase; } section.project .section-header .entry-content { margin-bottom: 50px; } section.project .section-header .entry-content p { font-size: 18px; } section.project .section-header .entry-extra { } section.project .section-header .entry-extra .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.5; } body.dark section.project .section-header .entry-extra .button.icon:after { background-image: url("../images/icons/icon-arrow-dark.png"); } section.project .section-header .entry-extra .button.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } section.project .section-content { margin-bottom: 50px; } section.project .section-content .item .item-media { line-height: 0px; margin-bottom: 2%; } section.project .section-content .item:last-child .item-media { margin-bottom: 0px; } section.project .section-content.gallery { -webkit-transform: scaleX(1.02); -moz-transform: scaleX(1.02); -ms-transform: scaleX(1.02); -o-transform: scaleX(1.02); transform: scaleX(1.02); } section.project .section-content.gallery .one-full { margin-left: 1%; margin-right: 1%; width: 98%; } section.project .section-content.gallery .one-half { margin-left: 1%; margin-right: 1%; width: 48%; } section.project .section-content.gallery .item-media, section.project .section-content.gallery .item-media img { width: 100%; } section.project .section-content.full-width .item { height: 540px; text-align: center; } section.project .section-content.full-width .item-media { margin-bottom: 0px; } section.project .section-content.full-width .item-media.dimmed { background-image: none !important } section.project .section-content.full-width .item-content { bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; } section.project .section-content.full-width .item-content .video { background-color: #111111; bottom: 0px; left: 0px; position: absolute; right: 0px; top: 0px; } body.dark section.project .section-content.full-width .item-content .video { background-color: #111111; } section.project .section-content.full-width .item-content .video video { height: 100%; width: 100%; } section.project .section-content.full-width .item-content iframe { height: 100%; width: 100%; } section.project .section-content .item-content .button.circle { left: 50%; position: absolute; top: 50%; } section.project .section-content .item-content .button.circle { -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } section.project .section-content .item-content .button.circle:before { background-color: #ffffff; background-image: url("../images/icons/icon-play-dark.png"); } body.dark section.project .section-content .item-content .button.circle:before { background-color: #ffffff; background-image: url("../images/icons/icon-play-dark.png"); } section.project .section-content .item-content .button.circle span { color: #ffffff; font-size: 20px; font-weight: 300; letter-spacing: 0.025em; text-transform: capitalize; } body.dark section.project .section-content .item-content .button.circle span { color: #ffffff; } section.project .section-footer { } section.project .section-footer .social { text-align: right; } section.project .section-footer .social div { color: #000000; cursor: pointer; display: inline-block; font-size: 17px; font-weight: 300; letter-spacing: 0.025em; margin-left: 60px; } body.dark section.project .section-footer .social div { color: #ffffff; } section.project .section-footer .social div { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.project .section-footer .social div:hover { opacity: 0.75; } section.project .section-footer .social div:before { background-size: 16px; background-position: center; background-repeat: no-repeat; content: " "; display: inline-block; height: 16px; margin-right: 15px; width: 16px; } section.project .section-footer .social div:before { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); } section.project .section-footer .social .facebook:before { background-image: url("../images/icons/icon-facebook-dark.png"); } body.dark section.project .section-footer .social .facebook:before { background-image: url("../images/icons/icon-facebook-light.png"); } section.project .section-footer .social .twitter:before { background-image: url("../images/icons/icon-twitter-dark.png"); } body.dark section.project .section-footer .social .twitter:before { background-image: url("../images/icons/icon-twitter-light.png"); } /* Blog ================================================== */ section.blog { text-align: center; } section.blog .section-header { height: 380px; position: relative; } section.blog .section-header .item-media { background-color: #dddddd; } section.blog .section-header .item-content { left: 25%; position: absolute; text-align: center; top: 50%; right: 25%; } section.blog .section-header .item-content { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } section.blog .section-header .item-content .title { font-size: 60px; } section.blog .section-header .item-content .text { font-size: 17px; line-height: 43px; margin-top: 15px; } section.blog.search .section-header .item-content .title, section.blog.search .section-header .item-content .text { } section.blog .section-content { padding-top: 100px; text-align: left; } section.blog .item { margin-bottom: 50px; } section.blog .posts { -webkit-flex: 2; flex: 2; } section.blog .posts .container { } section.blog .blog-loading { background-color: #eeeeee; background-image: url("../images/icons/icon-loading-dark.png"); background-position: center; background-repeat: no-repeat; background-size: 40px 40px; height: 40px; margin: 0px auto; width: 40px; } body.dark section.blog .blog-loading { background-color: #222222; background-image: url("../images/icons/icon-loading-light.png"); } section.blog .blog-loading { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.blog .blog-loading { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: rotate; animation-name: rotate; } @-webkit-keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } section.blog article.post { margin-bottom: 50px; width: 46.81818181818182%; } section.blog article.post:nth-child(odd) { margin-right: 6.363636363636364%; } section.blog.with-sidebar article.post { margin-right: 8.974358974358974%; width: 41.02564102564103%; } section.blog article.post { text-align: left; } section.blog article.post { -webkit-transition: all 0.6s ease 0s; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } section.blog .item.active article.post { } section.blog .item.unactive article.post { opacity: 0.5; } section.blog article.post .entry-header .entry-thumbnail { background-color: #222222; cursor: pointer; line-height: 0px; margin-bottom: 15px; position: relative; width: 100%; } body.dark section.blog article.post .entry-header .entry-thumbnail { background-color: #eeeeee; } section.blog article.post .entry-header .entry-thumbnail img { height: 100%; width: 100%; } section.blog article.post .entry-header .entry-thumbnail .entry-sticky { background-color: #222222; bottom: 15px; color: #ffffff; height: 35px; display: inline-block; left: 15px; line-height: 30px; margin-bottom: 0px; margin-right: 0px; padding: 0px 15px; position: absolute; } body.dark section.blog article.post .entry-header .entry-thumbnail .entry-sticky { background-color: #222222; } section.blog article.post .entry-header .entry-thumbnail .entry-sticky span { line-height: 12px; } section.blog article.post .entry-header .entry-title { color: #000000; cursor: pointer; display: inline-block; letter-spacing: 0.2em; line-height: 30px; margin-bottom: 5px; text-transform: uppercase; } body.dark section.blog article.post .entry-header .entry-title { color: #eeeeee; } section.blog article.post .entry-header .entry-title { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } section.blog article.post .entry-content { margin-bottom: 30px; } section.blog article.post .entry-content p { font-size: 14px; line-height: 30px; } section.blog article.post .entry-meta { border-top-color: #cccccc; border-top-style: solid; border-top-width: 2px; margin-bottom: 0px; padding: 5px 0px; } body.dark section.blog article.post .entry-meta { border-top-color: #444444; } section.blog article.post .entry-meta span { display: inline-block; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; } section.blog article.post .entry-meta span a { display: inline; } section.blog article.post .entry-meta .categories-links { color: #000000; } body.dark section.blog article.post .entry-meta .categories-links { color: #eeeeee; } section.blog article.post .entry-meta .categories-links:after { content: "/"; display: inline-block; font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em; margin-left: 4px; margin-right: 8px; } section.blog .section-footer { } section.blog .section-footer .item:first-child { text-align: left; } section.blog .section-footer .item:first-child .button { padding-left: 85px; padding-right: 25px; } section.blog .section-footer .item:first-child .button:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; left: 26px; right: auto; } body.dark section.blog .section-footer .item:first-child .button:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; } section.blog .section-footer .item:first-child .button:after { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } section.blog .section-footer .item:last-child { text-align: right; } section.blog .section-footer .item:last-child .button:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; } body.dark section.blog .section-footer .item:last-child .button:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; } section.blog .section-footer .item:last-child .button:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } section.blog .sidebar { -webkit-flex-grow: 0; flex-grow: 0; -webkit-flex-shrink: 0; flex-shrink: 0; -webkit-flex-basis: 320px; flex-basis: 320px; } section.blog .sidebar .widget-area { background-color: #222222; padding: 22px 0px; text-align: left; width: 320px; } body.dark section.blog .sidebar .widget-area { background-color: #f4f4f4; } section.blog .sidebar .widget-area .widget { border-bottom-color: #444444; border-bottom-style: solid; border-bottom-width: 2px; margin-bottom: 23px; margin-left: 22px; margin-right: 22px; padding: 23px 18px 40px; } body.dark section.blog .sidebar .widget-area .widget { border-bottom-color: #444444; } section.blog .sidebar .widget-area .widget:first-child { padding: 6px 18px 28px; } section.blog .sidebar .widget-area .widget:last-child { border-bottom-width: 0px; margin-bottom: 0px; } section.blog .sidebar .widget-area .widget.widget_search { padding-bottom: 42px; } section.blog .sidebar .widget-area .widget-title { color: #ffffff; font-size: 13px; font-weight: 400; letter-spacing: 0.2em; margin-bottom: 24px; text-transform: uppercase; } body.dark section.blog .sidebar .widget-area .widget-title { color: #222222; } section.blog .sidebar .widget-area .search-form { line-height: 12px; position: relative; } section.blog .sidebar .widget-area .search-form label { margin-bottom: 0px; margin-left: 0px; } section.blog .sidebar .widget-area .search-form .search-submit { display: none; } section.blog .sidebar .widget-area .search-form .screen-reader-text { background-image: url(../images/icons/icon-search-light.png); background-position: left top; background-repeat: no-repeat; background-size: 16px; float: left; height: 20px; opacity: 0.53; position: relative !important; text-indent: -9999px; width: 16px; } body.dark section.blog .sidebar .widget-area .search-form .screen-reader-text { background-image: url(../images/icons/icon-search-dark.png); opacity: 0.53; } section.blog .sidebar .widget-area .search-form .search-field { border-style: none; color: #ffffff; font-family: "Montserrat"; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; height: 20px; left: 18px; margin: 0px; padding: 0px 10px; position: absolute; right: 18px; top: -2px; text-transform: capitalize; } body.dark section.blog .sidebar .widget-area .search-form .search-field { color: #222222; } section.blog .sidebar .widget-area ul li { } section.blog .sidebar .widget-area ul a { color: #888888; font-family: "Montserrat"; font-size: 15px; font-weight: 400; letter-spacing: 0.01em; line-height: 36px; text-transform: capitalize; } body.dark section.blog .sidebar .widget-area ul a { color: #888888; } section.blog .sidebar .widget-area ul a:hover { color: #ffffff; } body.dark section.blog .sidebar .widget-area ul a:hover { color: #ffffff; } section.blog .sidebar .widget-area ul a:hover { -webkit-transition: color 0.3s ease 0s; -moz-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } section.blog .sidebar .widget-area .tagcloud { } section.blog .sidebar .widget-area .tagcloud a { background-color: #eeeeee; color: #000000; font-family: "Montserrat"; font-size: 9px !important; font-weight: 400; letter-spacing: 0.2em; margin-top: 5px; margin-right: 3px; padding: 6px 10px 7px; text-transform: uppercase !important; } body.dark section.blog .sidebar .widget-area .tagcloud a { background-color: #eeeeee; color: #000000; } section.blog .sidebar .widget-area .tagcloud a:hover { background-color: #ffffff; } body.dark section.blog .sidebar .widget-area .tagcloud a:hover { background-color: #ffffff; } section.blog .sidebar .widget-area .tagcloud a:hover { -webkit-transition: background 0.3s ease 0s; -moz-transition: background 0.3s ease 0s; -ms-transition: background 0.3s ease 0s; -o-transition: background 0.3s ease 0s; transition: background 0.3s ease 0s; } section.blog .sidebar .widget-area .calendar_wrap { } section.blog .sidebar .widget-area .calendar_wrap th, td { padding: 0px 6px; } section.blog .sidebar .widget-area select { color: #888888; } body.dark section.blog .sidebar .widget-area select { color: #888888; } section.blog .sidebar .widget-area .textwidget img { max-width: 100%; } /* Article ================================================== */ section.article { } section.article .container { padding-left: 0px; padding-right: 0px; max-width: 960px; width: 100%; } section.article .section-header { margin-bottom: 15px; } section.article .section-header .entry-thumbnail { margin-bottom: 50px; } section.article .section-header .entry-thumbnail img { height: 100%; width: 100%; } section.article .section-header .entry-title { padding-right: 160px; } section.article .section-header .entry-title .title { font-size: 24px; font-weight: 300; letter-spacing: 0.025em; } section.article .section-header .entry-meta { margin-bottom: 10px; padding-right: 160px; } section.article .section-header .entry-meta span { display: inline-block; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; } section.article .section-header .entry-meta span a { display: inline; } section.article .section-header .entry-meta .categories-links { color: #000000; } body.dark section.article .section-header .entry-meta .categories-links { color: #ffffff; } section.article .section-header .entry-meta .categories-links:after { content: "/"; display: inline-block; font-size: 11.5px; font-weight: 400; letter-spacing: 0.1em; margin-left: 4px; margin-right: 8px; } section.article .section-content { margin-bottom: 25px; padding-right: 160px; } section.article .section-content p { font-size: 16px; line-height: 32px; margin-bottom: 30px; } section.article .section-content ul, section.article .section-content ol { list-style-position: inside; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; -webkit-padding-start: 40px; } section.article .section-content ol { list-style-type: decimal; } section.article .section-content ul { list-style-type: disc; } section.article .section-content ol { list-style-position: inside; list-style-type: decimal; } section.article .section-footer { } section.article .section-footer .social { text-align: right; } section.article .section-footer .social div { color: #000000; cursor: pointer; display: inline-block; font-size: 17px; font-weight: 300; letter-spacing: 0.025em; margin-left: 60px; } body.dark section.article .section-footer .social div { color: #ffffff; } section.article .section-footer .social div { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.article .section-footer .social div:hover { opacity: 0.75; } section.article .section-footer .social div:before { background-size: 16px; background-position: center; background-repeat: no-repeat; content: " "; display: inline-block; height: 16px; margin-right: 15px; width: 16px; } section.article .section-footer .social div:before { -webkit-transform: translateY(2px); -moz-transform: translateY(2px); -ms-transform: translateY(2px); -o-transform: translateY(2px); transform: translateY(2px); } section.article .section-footer .social .facebook:before { background-image: url("../images/icons/icon-facebook-dark.png"); } body.dark section.article .section-footer .social .facebook:before { background-image: url("../images/icons/icon-facebook-light.png"); } section.article .section-footer .social .twitter:before { background-image: url("../images/icons/icon-twitter-dark.png"); } body.dark section.article .section-footer .social .twitter:before { background-image: url("../images/icons/icon-twitter-light.png"); } /* Contact ================================================== */ section.contact .offset { padding-bottom: 80px; padding-top: 200px; } section.contact .section-header { margin-bottom: 40px; margin-top: -19px; } section.contact .section-header .title { font-size: 60px; font-weight: 100; letter-spacing: 0.01em; text-transform: none; } section.contact .section-content a { border-bottom-color: #888888; display: inline-block; margin-bottom: 22px; } body.dark section.contact .section-content a { border-bottom-color: #888888; } section.contact .section-content a { -webkit-transition: border 0.3s ease 0s; -moz-transition: border 0.3s ease 0s; -ms-transition: border 0.3s ease 0s; -o-transition: border 0.3s ease 0s; transition: border 0.3s ease 0s; } section.contact .section-content a > p { color: #888888; display: inline-block; font-family: "Montserrat"; font-size: 12.5px; font-weight: 400; letter-spacing: 0.2em; line-height: 30px; text-transform: uppercase; } body.dark section.contact .section-content a > p { color: #888888; } section.contact .section-content a > p { -webkit-transition: color 0.3s ease 0s; -moz-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } section.contact .section-content a:after { background-image: url("../images/icons/icon-arrow-dark.png"); background-position: center; background-repeat: no-repeat; background-size: 16px; content: " "; display: inline-block; height: 16px; margin-left: 10px; opacity: 0; width: 16px; } body.dark section.contact .section-content a:after { background-image: url("../images/icons/icon-arrow-dark.png"); } section.contact .section-content a:after { -webkit-transform: rotate(-90deg) translateX(-4px); -moz-transform: rotate(-90deg) translateX(-4px); -ms-transform: rotate(-90deg) translateX(-4px); -o-transform: rotate(-90deg) translateX(-4px); transform: rotate(-90deg) translateX(-4px); } section.contact .section-content a:after { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.contact .section-content a:hover:after { opacity: 0.27; } body.dark section.contact .section-content a:hover:after { opacity: 0.27; } section.contact .section-content a:active > p { color: #000000; } body.dark section.contact .section-content a:active > p { color: #000000; } section.contact .section-content a:active:after { opacity: 1; } section.contact .section-content a.underline > p { border-bottom-color: #bbbbbb; border-bottom-style: solid; border-bottom-width: 2px; } body.dark section.contact .section-content a.underline > p { border-bottom-color: #bbbbbb; } section.contact .section-content a.underline:hover > p { border-bottom-color: #888888; } body.dark section.contact .section-content a.underline:hover > p { border-bottom-color: #888888; } section.contact .section-content a.underline:active { border-bottom-color: #000000; } body.dark section.contact .section-content a.underline:active { border-bottom-color: #000000; } section.contact .section-content a.underline:active > p { border-bottom-color: #000000; color: #000000; } body.dark section.contact .section-content a.underline:active > p { border-bottom-color: #000000; color: #000000; } section.contact .section-content form { width: 100%; } section.contact .section-content form .item { } section.contact .section-content form .item.margined { margin-top: 3px; } section.contact .section-content form input { margin-bottom: 7px; } section.contact .section-content form span { margin-left: 20px; } section.contact .section-content form textarea { margin-bottom: 30px; margin-top: 8px; } section.contact .section-content form .result { line-height: 58px; } section.contact .section-content form .submit { float: right; } section.contact .section-content form .submit.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; } body.dark section.contact .section-content form .submit.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.47; } section.contact .section-content form .submit.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* Start ================================================== */ section.start { text-align: center; } section.start.sent .section-header, section.start.sent .section-content { opacity: 0.02; } section.start.sent .section-header, section.start.sent .section-content { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.start > .background { background-position: center top !important; background-size: contain; } section.start .offset { padding-top: 200px; } section.start form { width: 100%; } section.start .section-header { margin-bottom: 75px; text-align: center; } section.start .section-header .title { font-size: 60px; font-weight: 200; letter-spacing: 0.01em; } section.start .section-content form > .item { margin-bottom: 48px; } section.start .section-content .item-content { padding-left: 0px; padding-right: 0px; } section.start .section-content .item-content span { color: #888888; float: left; margin-left: 20px; } body.dark section.start .section-content .item-content span { color: #888888; } section.start .section-content .item-content input, section.start .section-content .item-content textarea { width: 100%; } section.start .section-content .item-content input.input-error { border-bottom-color: #cc181e; } body.dark section.start .section-content .item-content input.input-error { border-bottom-color: #cc181e; } section.start .section-content .item-content textarea.input-error { border-color: #cc181e; } body.dark section.start .section-content .item-content textarea.input-error { border-color: #cc181e; } section.start .section-content .item-content .input-error { color: #cc181e; } section.start .section-content .item-content .input-error { color: #cc181e; } section.start .section-content .item-content .input-error::-webkit-input-placeholder { color: #cc181e; } body.dark section.start .section-content .item-content .input-error::-webkit-input-placeholder { color: #cc181e; } section.start .section-content .item-content .input-error:-moz-placeholder { color: #cc181e; } body.dark section.start .section-content .item-content .input-error:-moz-placeholder { color: #cc181e; } section.start .section-content .item-content .input-error::-moz-placeholder { color: #cc181e; } body.dark section.start .section-content .item-content .input-error::-moz-placeholder { color: #cc181e; } section.start .section-content .item-content .input-error:-ms-input-placeholder { color: #cc181e; } body.dark section.start .section-content .item-content .input-error:-ms-input-placeholder { color: #cc181e; } section.start .section-content .item-content .button.icon { padding-right: 135px; } section.start .section-content .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.5; } body.dark section.start .section-content .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-dark.png"); opacity: 0.5; } section.start .section-content .item-content .button.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } section.start .section-footer { text-align: center; } section.start .section-footer .title { font-size: 50px; font-weight: 200; line-height: 70px; letter-spacing: 0.01em; margin-bottom: 45px; } section.start .section-footer .action { cursor: pointer; } section.start .section-footer .action span { color: #888888; } body.dark section.start .section-footer .action span { color: #888888; } section.start .section-footer .action span { -webkit-transition: color 0.3s ease 0s; -moz-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } section.start .section-footer .action:hover span { color: #000000; } body.dark section.start .section-footer .action:hover span { color: #000000; } section.start .section-footer .action:before { background-image: url("../images/icons/icon-sent.png"); background-position: center; background-repeat: no-repeat; background-size: 32px; content: " "; display: block; height: 32px; margin-bottom: 5px; margin-left: auto; margin-right: auto; opacity: 0.33; width: 32px; } body.dark section.start .section-footer .action:before { background-image: url("../images/icons/icon-sent.png"); opacity: 0.33; } section.start .section-footer .action:before { -webkit-transition: opacity 0.3s ease 0s; -moz-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } section.start .section-footer .action:hover:before { opacity: 1; } /* Call to Action ================================================== */ section.cta { } section.cta.pull-up { margin-top: -232px; } section.cta .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.5; } body.dark section.cta .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); opacity: 0.5; } section.cta .item-content .button.icon:after { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg); } /* 404 ================================================== */ section.error-404 { } section.error-404 .item-content .main .title, section.error-404 .item-content .main .text { color: #000000; } body.dark section.error-404 .item-content .main .title, body.dark section.error-404 .item-content .main .text { color: #000000; } section.error-404 .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); } body.dark section.error-404 .item-content .button.icon:after { background-image: url("../images/icons/icon-arrow-light.png"); }