@charset "UTF-8"; /* Theme Name: Chroma Theme URI: http://themeforest.net/user/two2twelve?ref=two2twelve Description: Designed & Developed by Two2Twelve. Author: Two2Twelve Themes Author URI: http://t2themes.com License: GNU General Public License version 3.0 License URI: http://www.gnu.org/licenses/gpl-3.0.html Version: 2.1.0 This file is part of a site template for sale on ThemeForest.net See: http://themeforest.net/user/two2twelve/portfolio?ref=two2twelve Copyright © 2013 Two2Twelve Themes -----------------------------------------------------------------------------------*/ /* Animate.css - http://daneden.me/animate Licensed under the ☺ license (http://licence.visualidiot.com/) Copyright (c) 2012 Dan Eden Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ body { /* Addresses a small issue in webkit: http://bit.ly/NEdoDq */ /*-webkit-backface-visibility: hidden;*/ } .animated { -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -o-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-moz-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @-o-keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, 100% { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; -moz-animation-name: flash; -o-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px); } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px); } 20%, 40%, 60%, 80% { -o-transform: translateX(10px); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .shake { -webkit-animation-name: shake; -moz-animation-name: shake; -o-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); } } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); } 40% { -moz-transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); } } @-o-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -o-transform: translateY(0); } 40% { -o-transform: translateY(-30px); } 60% { -o-transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-30px); } 60% { transform: translateY(-15px); } } .bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes tada { 0% { -moz-transform: scale(1); } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-o-keyframes tada { 0% { -o-transform: scale(1); } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg); } 100% { -o-transform: scale(1) rotate(0); } } @keyframes tada { 0% { transform: scale(1); } 10%, 20% { transform: scale(0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } .tada { -webkit-animation-name: tada; -moz-animation-name: tada; -o-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } } @-moz-keyframes swing { 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } } @-o-keyframes swing { 20% { -o-transform: rotate(15deg); } 40% { -o-transform: rotate(-10deg); } 60% { -o-transform: rotate(5deg); } 80% { -o-transform: rotate(-5deg); } 100% { -o-transform: rotate(0deg); } } @keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; -moz-transform-origin: top center; -o-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; -moz-animation-name: swing; -o-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); } } .wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(0); -webkit-animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg); -webkit-animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -webkit-animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95); -webkit-animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px) scale(1); -webkit-animation-timing-function: ease-in; } } @-moz-keyframes flip { 0% { -moz-transform: perspective(400px) rotateY(0); -moz-animation-timing-function: ease-out; } 40% { -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg); -moz-animation-timing-function: ease-out; } 50% { -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -moz-animation-timing-function: ease-in; } 80% { -moz-transform: perspective(400px) rotateY(360deg) scale(0.95); -moz-animation-timing-function: ease-in; } 100% { -moz-transform: perspective(400px) scale(1); -moz-animation-timing-function: ease-in; } } @-o-keyframes flip { 0% { -o-transform: perspective(400px) rotateY(0); -o-animation-timing-function: ease-out; } 40% { -o-transform: perspective(400px) translateZ(150px) rotateY(170deg); -o-animation-timing-function: ease-out; } 50% { -o-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); -o-animation-timing-function: ease-in; } 80% { -o-transform: perspective(400px) rotateY(360deg) scale(0.95); -o-animation-timing-function: ease-in; } 100% { -o-transform: perspective(400px) scale(1); -o-animation-timing-function: ease-in; } } @keyframes flip { 0% { transform: perspective(400px) rotateY(0); animation-timing-function: ease-out; } 40% { transform: perspective(400px) translateZ(150px) rotateY(170deg); animation-timing-function: ease-out; } 50% { transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); animation-timing-function: ease-in; } 80% { transform: perspective(400px) rotateY(360deg) scale(0.95); animation-timing-function: ease-in; } 100% { transform: perspective(400px) scale(1); animation-timing-function: ease-in; } } .flip { -webkit-backface-visibility: visible !important; -webkit-animation-name: flip; -moz-backface-visibility: visible !important; -moz-animation-name: flip; -o-backface-visibility: visible !important; -o-animation-name: flip; backface-visibility: visible !important; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-moz-keyframes flipOutY { 0% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @-o-keyframes flipOutY { 0% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { transform: perspective(400px) rotateY(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipOutY; -moz-backface-visibility: visible !important; -moz-animation-name: flipOutY; -o-backface-visibility: visible !important; -o-animation-name: flipOutY; backface-visibility: visible !important; animation-name: flipOutY; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUpBig { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -o-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDownBig { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -o-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeftBig { 0% { opacity: 0; -o-transform: translateX(-2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -o-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRightBig { 0% { opacity: 0; -o-transform: translateX(2000px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -o-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @-o-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-20px); } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-20px); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(20px); } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(20px); } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(20px); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(20px); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-20px); } } @-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-20px); } } @-o-keyframes fadeOutLeft { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(20px); } } @-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(20px); } } @-o-keyframes fadeOutRight { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(20px); } } @keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(20px); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes fadeOutUpBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -o-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes fadeOutDownBig { 0% { opacity: 1; -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -o-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes fadeOutLeftBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-2000px); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -o-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes fadeOutRightBig { 0% { opacity: 1; -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(2000px); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -o-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(0.9); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(0.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(0.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(0.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); } 60% { opacity: 1; -moz-transform: translateY(-30px); } 80% { -moz-transform: translateY(10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: translateY(2000px); } 60% { opacity: 1; -o-transform: translateY(-30px); } 80% { -o-transform: translateY(10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); } 60% { opacity: 1; transform: translateY(-30px); } 80% { transform: translateY(10px); } 100% { transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 60% { opacity: 1; -moz-transform: translateY(30px); } 80% { -moz-transform: translateY(-10px); } 100% { -moz-transform: translateY(0); } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: translateY(-2000px); } 60% { opacity: 1; -o-transform: translateY(30px); } 80% { -o-transform: translateY(-10px); } 100% { -o-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); } 60% { opacity: 1; transform: translateY(30px); } 80% { transform: translateY(-10px); } 100% { transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); } 60% { opacity: 1; -moz-transform: translateX(30px); } 80% { -moz-transform: translateX(-10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: translateX(-2000px); } 60% { opacity: 1; -o-transform: translateX(30px); } 80% { -o-transform: translateX(-10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); } 60% { opacity: 1; transform: translateX(30px); } 80% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); } 60% { opacity: 1; -moz-transform: translateX(-30px); } 80% { -moz-transform: translateX(10px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: translateX(2000px); } 60% { opacity: 1; -o-transform: translateX(-30px); } 80% { -o-transform: translateX(10px); } 100% { -o-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); } 25% { -webkit-transform: scale(0.95); } 50% { opacity: 1; -webkit-transform: scale(1.1); } 100% { opacity: 0; -webkit-transform: scale(0.3); } } @-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); } 25% { -moz-transform: scale(0.95); } 50% { opacity: 1; -moz-transform: scale(1.1); } 100% { opacity: 0; -moz-transform: scale(0.3); } } @-o-keyframes bounceOut { 0% { -o-transform: scale(1); } 25% { -o-transform: scale(0.95); } 50% { opacity: 1; -o-transform: scale(1.1); } 100% { opacity: 0; -o-transform: scale(0.3); } } @keyframes bounceOut { 0% { transform: scale(1); } 25% { transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(0.3); } } .bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(20px); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); } } @-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(20px); } 100% { opacity: 0; -moz-transform: translateY(-2000px); } } @-o-keyframes bounceOutUp { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(20px); } 100% { opacity: 0; -o-transform: translateY(-2000px); } } @keyframes bounceOutUp { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(-2000px); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); } 20% { opacity: 1; -webkit-transform: translateY(-20px); } 100% { opacity: 0; -webkit-transform: translateY(2000px); } } @-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); } 20% { opacity: 1; -moz-transform: translateY(-20px); } 100% { opacity: 0; -moz-transform: translateY(2000px); } } @-o-keyframes bounceOutDown { 0% { -o-transform: translateY(0); } 20% { opacity: 1; -o-transform: translateY(-20px); } 100% { opacity: 0; -o-transform: translateY(2000px); } } @keyframes bounceOutDown { 0% { transform: translateY(0); } 20% { opacity: 1; transform: translateY(-20px); } 100% { opacity: 0; transform: translateY(2000px); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(20px); } 100% { opacity: 0; -webkit-transform: translateX(-2000px); } } @-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(20px); } 100% { opacity: 0; -moz-transform: translateX(-2000px); } } @-o-keyframes bounceOutLeft { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(20px); } 100% { opacity: 0; -o-transform: translateX(-2000px); } } @keyframes bounceOutLeft { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(20px); } 100% { opacity: 0; transform: translateX(-2000px); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); } 20% { opacity: 1; -webkit-transform: translateX(-20px); } 100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); } 20% { opacity: 1; -moz-transform: translateX(-20px); } 100% { opacity: 0; -moz-transform: translateX(2000px); } } @-o-keyframes bounceOutRight { 0% { -o-transform: translateX(0); } 20% { opacity: 1; -o-transform: translateX(-20px); } 100% { opacity: 0; -o-transform: translateX(2000px); } } @keyframes bounceOutRight { 0% { transform: translateX(0); } 20% { opacity: 1; transform: translateX(-20px); } 100% { opacity: 0; transform: translateX(2000px); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -o-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -o-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -o-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateInDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } 100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -o-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } } @-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } } @-o-keyframes rotateOut { 0% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: center center; -o-transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; } 100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -o-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutUpLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -o-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutDownLeft { 0% { -o-transform-origin: left bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: left bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -o-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } } @-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } } @-o-keyframes rotateOutUpRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -o-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } } @-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } } @-o-keyframes rotateOutDownRight { 0% { -o-transform-origin: right bottom; -o-transform: rotate(0); opacity: 1; } 100% { -o-transform-origin: right bottom; -o-transform: rotate(-90deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } 100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -o-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } .hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -o-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } } @-moz-keyframes rollOut { 0% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } } @-o-keyframes rollOut { 0% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; -o-transform: translateX(100%) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; transform: translateX(0px) rotate(0deg); } 100% { opacity: 0; transform: translateX(100%) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -o-animation-name: rollOut; animation-name: rollOut; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-moz-keyframes lightSpeedIn { 0% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -moz-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } } @-o-keyframes lightSpeedIn { 0% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { -o-transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } } @keyframes lightSpeedIn { 0% { transform: translateX(100%) skewX(-30deg); opacity: 0; } 60% { transform: translateX(-20%) skewX(30deg); opacity: 1; } 80% { transform: translateX(0%) skewX(-15deg); opacity: 1; } 100% { transform: translateX(0%) skewX(0deg); opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; -moz-animation-name: lightSpeedIn; -o-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; animation-timing-function: ease-out; } .animated.lightSpeedIn { -webkit-animation-duration: 0.5s; -moz-animation-duration: 0.5s; -o-animation-duration: 0.5s; animation-duration: 0.5s; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -webkit-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-moz-keyframes lightSpeedOut { 0% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -moz-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @-o-keyframes lightSpeedOut { 0% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { -o-transform: translateX(100%) skewX(-30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { transform: translateX(0%) skewX(0deg); opacity: 1; } 100% { transform: translateX(100%) skewX(-30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; -moz-animation-name: lightSpeedOut; -o-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.lightSpeedOut { -webkit-animation-duration: 0.25s; -moz-animation-duration: 0.25s; -o-animation-duration: 0.25s; animation-duration: 0.25s; } /* originally authored by Angelo Rohit - https://github.com/angelorohit */ @-webkit-keyframes wiggle { 0% { -webkit-transform: skewX(9deg); } 10% { -webkit-transform: skewX(-8deg); } 20% { -webkit-transform: skewX(7deg); } 30% { -webkit-transform: skewX(-6deg); } 40% { -webkit-transform: skewX(5deg); } 50% { -webkit-transform: skewX(-4deg); } 60% { -webkit-transform: skewX(3deg); } 70% { -webkit-transform: skewX(-2deg); } 80% { -webkit-transform: skewX(1deg); } 90% { -webkit-transform: skewX(0deg); } 100% { -webkit-transform: skewX(0deg); } } @-moz-keyframes wiggle { 0% { -moz-transform: skewX(9deg); } 10% { -moz-transform: skewX(-8deg); } 20% { -moz-transform: skewX(7deg); } 30% { -moz-transform: skewX(-6deg); } 40% { -moz-transform: skewX(5deg); } 50% { -moz-transform: skewX(-4deg); } 60% { -moz-transform: skewX(3deg); } 70% { -moz-transform: skewX(-2deg); } 80% { -moz-transform: skewX(1deg); } 90% { -moz-transform: skewX(0deg); } 100% { -moz-transform: skewX(0deg); } } @-o-keyframes wiggle { 0% { -o-transform: skewX(9deg); } 10% { -o-transform: skewX(-8deg); } 20% { -o-transform: skewX(7deg); } 30% { -o-transform: skewX(-6deg); } 40% { -o-transform: skewX(5deg); } 50% { -o-transform: skewX(-4deg); } 60% { -o-transform: skewX(3deg); } 70% { -o-transform: skewX(-2deg); } 80% { -o-transform: skewX(1deg); } 90% { -o-transform: skewX(0deg); } 100% { -o-transform: skewX(0deg); } } @keyframes wiggle { 0% { transform: skewX(9deg); } 10% { transform: skewX(-8deg); } 20% { transform: skewX(7deg); } 30% { transform: skewX(-6deg); } 40% { transform: skewX(5deg); } 50% { transform: skewX(-4deg); } 60% { transform: skewX(3deg); } 70% { transform: skewX(-2deg); } 80% { transform: skewX(1deg); } 90% { transform: skewX(0deg); } 100% { transform: skewX(0deg); } } .wiggle { -webkit-animation-name: wiggle; -moz-animation-name: wiggle; -o-animation-name: wiggle; animation-name: wiggle; -webkit-animation-timing-function: ease-in; -moz-animation-timing-function: ease-in; -o-animation-timing-function: ease-in; animation-timing-function: ease-in; } .animated.wiggle { -webkit-animation-duration: 0.75s; -moz-animation-duration: 0.75s; -o-animation-duration: 0.75s; animation-duration: 0.75s; } /*-------------------------------------------- Mixins ---------------------------------------------*/ /*-------------------------------------------- Animations ---------------------------------------------*/ .cssanimations a { transition: color 0.3s ease-in; -webkit-transition: color 0.3s ease-in; -moz-transition: color 0.3s ease-in; } .cssanimations header .container { -webkit-animation: fadeInDown 1.5s 0s ease forwards; -moz-animation: fadeInDown 1.5s 0s ease forwards; -o-animation: fadeInDown 1.5s 0s ease forwards; animation: fadeInDown 1.5s 0s ease forwards; opacity: 0; } .cssanimations header.stuck { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } .cssanimations header#horizontal.slideUp { top: -65px; } .cssanimations header#horizontal.slideDown { top: 0px; } .cssanimations .admin-bar header#horizontal.slideDown { top: 28px; } .cssanimations div.page_title h1 { -webkit-animation: fadeInDown 1.5s 0.5s ease forwards; -moz-animation: fadeInDown 1.5s 0.5s ease forwards; -o-animation: fadeInDown 1.5s 0.5s ease forwards; animation: fadeInDown 1.5s 0.5s ease forwards; opacity: 0; } .cssanimations .album.grid .wall_entry, .cssanimations .filter_content.without_filters .element { -webkit-transform: scale(0); -moz-transform: scale(0); transform: scale(0); -webkit-animation: scaleUp 0.8s ease-in-out forwards; -moz-animation: scaleUp 0.8s ease-in-out forwards; animation: scaleUp 0.8s ease-in-out forwards; opacity: 0; } @-webkit-keyframes scaleUp { to { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes scaleUp { to { -moz-transform: scale(1); opacity: 1; } } @keyframes scaleUp { to { transform: scale(1); opacity: 1; } } * { margin: 0; padding: 0; } /*-------------------------------------------- Variables ---------------------------------------------*/ /*-------------------------------------------- 1. Global ---------------------------------------------*/ body { font-family: "Open Sans"; color: #777; font-style: normal; font-size: 14px; } body.custom-background { background: none; } body.boxed { background: #f3f3f3; } body.boxed .page_wrap { max-width: 1070px; margin: 0 auto; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.26); -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.26); box-shadow: 0 0 15px rgba(0, 0, 0, 0.26); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { max-width: 1000px; margin: 0 auto; padding: 0px 20px; } .container .container { padding: 0; } section { line-height: 22px; } div.page_title { background-size: 100% 100%; text-align: center; width: 100%; padding: 0px 0px 60px 0px; } div.page_title h1 { font-weight: 300; margin-bottom: 0; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); font-size: 45px; color: #ffffff; } section.full_width, section.sidebar_left, section.sidebar_right { margin: 0 auto; } section.full_width img, section.sidebar_left img, section.sidebar_right img { margin-bottom: 20px; max-width: 100%; } section.sidebar_left .page_content, section.sidebar_right .page_content { width: 70%; float: left; } section.sidebar_left .page_content { float: right; } section.sidebar_left .sidebar { float: left; width: 25%; margin: 45px auto; } section.sidebar_right .sidebar { float: right; width: 25%; margin: 45px auto; } section .page_content { margin: 45px auto; } section .page_content .page_content { width: 100%; } body.fullscreen { margin: 0 !important; width: 100% !important; height: 100% !important; position: absolute; } body.fullscreen .sl-slider-wrapper, body.fullscreen .ei-slider, body.fullscreen .flexslider { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } body.fullscreen .flexslider .slides, body.fullscreen .flexslider .slides li { width: 100% !important; height: 100% !important; } body.fullscreen .flexslider .slides img { min-height: 100%; min-width: 100%; max-width: 10000% !important; margin: 0 auto !important; } body.fullscreen header { background: none !important; } h3 span { padding-right: 8px; } .loading_overlay { position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; background: #fff; z-index: 10000; display: none; } /*-------------------------------------------- Nav ---------------------------------------------*/ .menu { position: fixed; right: -250px; width: 250px; height: 100%; top: 0; z-index: 10; text-align: left; overflow-y: auto; overflow-x: hidden; background: #282828; } .menu .notice { font-size: 14px; line-height: 24px; padding: 20px; } .menu .notice b { color: #fff !important; } .menu-left { position: fixed; left: -250px; width: 250px; height: 100%; top: 0; z-index: 10; text-align: left; } .menu.menu-open { right: 0px; } .menu-left.menu-open { left: 0px; } .menu-wrap { position: absolute; top: 0; left: 0px; width: 250px; height: 100%; } .menu-left .menu-wrap { left: 0 !important; } .menu .main-menu { margin: 15px 0px 20px 0px; } .menu .main-menu li, .menu-left .main-menu li { margin: 0px 20px; padding: 16px 5px; color: #808080; display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; border-bottom: 1px solid #404040; } .menu .main-menu a:hover, .menu-left .main-menu a:hover { color: #ffffff; } .menu a:active, .menu-left a:active { color: #ffffff; } .menu .main-menu .sub-menu { display: none; padding-top: 10px; } .menu .main-menu .sub-menu .sub-menu { margin-left: 10px; padding-top: 0; } .menu .main-menu .sub-menu li { line-height: 30px; margin: 0; border: 0; padding: 0; text-transform: none; font-weight: normal; } .menu .main-menu .sub-menu li a { font-size: 12px; } .menu .with_dropdown > a:after { font-weight: normal; font-style: normal; font-size: 14px; margin-left: 0.3em; text-decoration: inherit; -webkit-font-smoothing: antialiased; display: inline; width: auto; height: auto; line-height: normal; vertical-align: 0%; background-image: none; background-position: 0% 0%; background-repeat: repeat; margin-top: 0; content: "+"; font-family: Arial, 'helvetica neue', Helvetica, sans-serif !important; } .menu .social { margin: 0px 20px; padding-bottom: 15px; overflow: hidden; } .menu .social li { float: left; margin-right: 5px; } .menu .social li:nth-child(8n) { margin-right: 0; } .menu .social a { font-size: 22px; } .menu ul.social.simple { margin-top: 17px; } .menu ul.social.simple li { margin-left: 10px; } .menu ul.social.simple li a { font-size: 22px; } .menu .copyright { margin: 0px 20px; padding-bottom: 15px; font-size: 12px; } .body-push { overflow-x: hidden; position: relative; left: 0; } .body-push-toright { left: 250px; } .body-push-toleft { left: -250px; } .body-push-toleft header#horizontal.stuck { left: -250px; } .menu, .menu-left, .body-push { -webkit-transition: all .7s ease; -moz-transition: all .7s ease; -ms-transition: all .7s ease; -o-transition: all .7s ease; transition: all .7s ease; } #menuToggle { float: right; margin-top: 13px; z-index: 11; display: block; text-align: center; font-size: 25px; color: #ffffff; cursor: pointer; border: 1px solid #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 12px; font-weight: bold; text-transform: uppercase; padding: 5px 11px; transition: background 0.3s ease-in; -webkit-transition: background 0.3s ease-in; -moz-transition: background 0.3s ease-in; } #menuToggle span { padding-right: 3px; font-weight: 15px; } #menuToggleLeft { position: absolute; top: 20px; right: 0; z-index: 11; display: block; text-align: center; font-size: 14px; color: #ffffff; width: 40px; height: 40px; line-height: 40px; cursor: pointer; background: rgba(0, 0, 0, 0.25); } #menuToggle:hover, #menuToggleLeft:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; -ms-transition: all .1s ease-in-out; -o-transition: all .1s ease-in-out; transition: all .1s ease-in-out; } /*-------------------------------------------- Header ---------------------------------------------*/ header#vertical { position: relative; z-index: 1000; padding-top: 15px; } header#vertical .logo { float: left; } header#vertical .logo a { font-family: "Yesteryear"; color: #fff; line-height: 55px; font-size: 45px; display: block; height: 55px; } header#horizontal { top: 0; left: 0; width: 100%; z-index: 5000 !important; text-align: justify; } header#horizontal #menuToggle { display: none; } header#horizontal select { display: none; } header#horizontal .fancy-select { display: none; margin-right: 8px; } header#horizontal .fancy-select .trigger { width: 100px !important; } header#horizontal .fancy-select .trigger span { display: none; } header#horizontal .fancy-select ul.options li:first-child { display: none; } header#horizontal .wrapper { padding-top: 15px; padding-bottom: 35px; } header#horizontal .container { position: relative; z-index: 5000; } header#horizontal .logo { font-size: 40px; font-family: 'Exo', sans-serif; font-weight: 700; color: #fff; float: left; vertical-align: middle; display: inline-block; max-height: 55px; } header#horizontal .logo a { display: block; color: #fff; font-family: "Yesteryear"; font-size: 45px; font-weight: normal; } header#horizontal .logo img { display: inline-block; vertical-align: middle; width: auto; max-height: 55px; } header#horizontal .logo:before { content: ''; height: 100%; } header#horizontal nav { float: right; color: #fff; vertical-align: middle; display: inline-block; position: relative; z-index: 5000; } header#horizontal nav .notice { padding-top: 17px; } header#horizontal nav ul.main-menu { list-style: none; overflow: hidden; } header#horizontal nav ul.main-menu li { float: left; padding: 0px 13px; } header#horizontal nav ul.main-menu li a { font-size: 12px; text-transform: uppercase; color: #b2b2b2; white-space: nowrap; font-weight: 600; padding: 21px 0px 22px 0px; display: block; } header#horizontal nav ul.main-menu li a:hover { color: #fff; } header#horizontal nav ul.main-menu li.current-menu-item a, header#horizontal nav ul.main-menu li.current-menu-parent a, header#horizontal nav ul.main-menu li.current_page_item a { color: #fff; } header#horizontal nav ul.main-menu ul { position: absolute; display: none; min-width: 190px; top: 65px; margin-left: -5px; overflow: visible !important; text-align: left; background: #4a4a4a; } header#horizontal nav ul.main-menu ul:after { bottom: 100%; left: 10px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(74, 74, 74, 0); border-bottom-color: #4a4a4a; border-width: 12px; } header#horizontal nav ul.main-menu ul li { padding: 0; float: none; display: block; position: relative; } header#horizontal nav ul.main-menu ul li a { height: auto; float: none; padding: 10px 20px; color: #999 !important; } header#horizontal nav ul.main-menu ul li a:hover { color: #fff !important; } header#horizontal nav ul.main-menu ul ul { top: 0px; } header#horizontal nav ul.main-menu ul ul:after { display: none; } header#horizontal nav ul li ul ul { left: 190px; margin: 0px 0 0 10px; } header#horizontal nav ul ul li.with_dropdown > a:after { font-weight: normal; font-style: normal; font-size: 12px; margin-left: 0.5em; text-decoration: inherit; -webkit-font-smoothing: antialiased; display: inline; width: auto; height: auto; line-height: normal; vertical-align: 3%; background-image: none; background-position: 0% 0%; background-repeat: repeat; margin-top: 0; content: "»"; font-family: Arial, 'helvetica neue', Helvetica, sans-serif !important; } header#horizontal.stuck { position: fixed !important; top: -65px; height: 65px; z-index: 5000 !important; } header#horizontal.stuck .page_title, header#horizontal.stuck .backstretch { display: none; } header#horizontal.stuck .fancy-select { margin-top: 8px; } header#horizontal.stuck .logo { font-size: 30px; padding: 5px 0px; max-height: 45px; } header#horizontal.stuck .logo img { max-height: 45px; display: block; padding-top: 5px; } header#horizontal.stuck .wrapper { background: #313131; padding-top: 0px; padding-bottom: 0px; } header#horizontal.stuck nav ul.main-menu { margin-top: 5px; } /* Fix admin bar */ .admin-bar .header_wrap.fixed, .admin-bar .menu { top: 28px; } /*-------------------------------------------- Sliders ---------------------------------------------*/ div#slider { color: #fff; font-style: normal; } .slide-content { padding: 0px; color: #fff; margin: 0 auto; position: absolute; z-index: 100; top: 50%; width: 80%; left: 10%; text-align: center; } .slide-content span { display: block; } .slide-content .title { font-size: 45px; font-weight: 300; letter-spacing: 0px; margin-bottom: 30px; text-shadow: 0 0px 20px #000; color: #fff; } .slide-content .caption { color: #fff !important; font-size: 18px; font-style: normal; font-weight: 300; line-height: 34px; width: 100%; text-align: center; margin-bottom: 35px; text-shadow: 0 0px 20px #000; } .slide-content .link { display: inline-block; background: #278ea9; color: #fff; font-size: 12px; font-weight: 600; font-style: normal; padding: 12px 20px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .slide-content .link:hover { color: #fff !important; } /*-------------------------------------------- Homepage ---------------------------------------------*/ section#home { overflow: hidden; /* border-top: 1px solid rgba(255,255,255,0.45);*/ clear: both; } /* Intro */ p.intro { display: block; margin-bottom: 50px; margin-top: 45px; text-align: center; color: #767676; font-size: 24px; line-height: 36px; font-weight: 200; } /* Recent Blogs */ div.post_list { overflow: hidden; margin-bottom: 20px; } div.post_list article { margin-bottom: 0; } article.mini { padding: 30px 30px 20px 26px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } article.mini p { margin-bottom: 18px; line-height: 22px; } /* Testimonails */ div.testimonials { margin-bottom: 35px; clear: both; overflow: hidden; } div.testimonials > div { overflow: hidden; } div.testimonials > div img { width: 50px; height: 50px; float: left; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } div.testimonials > div .content { margin-left: 70px; margin-top: -5px; } div.testimonials > div .content p { font-size: 13px; line-height: 22px; font-style: italic; margin-bottom: 0px; color: #888; } div.testimonials > div .content span.author { font-size: 12px; } div.testimonials .testimonial { margin-bottom: 30px; min-height: 50px; } div.testimonials .testimonial p { font-size: 17px; line-height: 25px; font-weight: 400; text-align: center; } ul.people { list-style: none; width: 100%; text-align: center; } ul.people li { display: inline-block; text-align: center; float: none; margin-right: 5px; opacity: .7; } ul.people li img { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } ul.people li.current { opacity: 1; } /*-------------------------------------------- Albums ---------------------------------------------*/ div.albums { overflow: hidden; visibility: hidden; /* Scroller thumbnails */ } div.albums * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } div.albums .element { position: relative; margin-bottom: 4%; } div.albums .element h5, div.albums .element img { margin-bottom: 0px; display: block; } div.albums .element h5 { margin-bottom: 10px; margin-top: 15px; } div.albums .element img { width: 100%; } div.albums .element a { display: block; position: relative; } div.albums .frame { cursor: pointer; } /* Caption Overlay */ div.albums.thumbnail_caption_overlay .element a { overflow: hidden; } div.albums.thumbnail_caption_overlay .element a img { transition: all 0.5s ease-in-out; } div.albums.thumbnail_caption_overlay .element:hover a img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); } div.albums.thumbnail_caption_overlay .element .caption { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); padding: 60px; display: none; } div.albums.thumbnail_caption_overlay .element .caption h5 a.title { color: #fff !important; margin-bottom: 15px; } div.albums.thumbnail_caption_overlay .full .caption { padding: 80px; } div.albums.thumbnail_caption_overlay .full .caption h5 a.title { font-size: 30px; margin-bottom: 25px; } div.albums.thumbnail_caption_overlay .full .caption p { font-size: 15px; line-height: 18px; } div.albums.thumbnail_caption_overlay .one_third .caption { padding: 35px; } div.albums.thumbnail_caption_overlay .one_third .caption h5 { margin-top: 0px; } div.albums.thumbnail_caption_overlay .one_third .caption h5 a.title { font-size: 15px; margin-bottom: 5px; } div.albums.thumbnail_caption_overlay .one_third .caption p { font-size: 13px; line-height: 20px; } div.albums.thumbnail_caption_overlay .one_fourth .caption { padding: 20px; } div.albums.thumbnail_caption_overlay .one_fourth .caption h5 { margin-top: 0px; } div.albums.thumbnail_caption_overlay .one_fourth .caption h5 a.title { font-size: 13px; margin-bottom: 5px; } div.albums.thumbnail_caption_overlay .one_fourth .caption p { font-size: 12px; line-height: 18px; } /* Scroller */ div.albums.thumbnail_scroller a { position: relative; z-index: 20; } /* Zoom */ div.albums.thumbnail_zoom a { position: relative; overflow: hidden; } div.albums.thumbnail_zoom a img { transition: all 0.5s ease-in-out; } div.albums.thumbnail_zoom a:hover img { transform: scale(1.4); -ms-transform: scale(1.4); -webkit-transform: scale(1.4); } /* Full width styles */ div.albums .filter_content .full { overflow: hidden; margin-bottom: 4%; } div.albums.thumbnail_default .full a, div.albums.thumbnail_scroller .full a { float: left; width: 60%; } div.albums.thumbnail_scroller .full .nail { width: 60%; float: left; } div.albums.thumbnail_default .full .caption, div.albums.thumbnail_scroller .full .caption { width: 37%; float: right; } div.albums.thumbnail_default .full .caption a, div.albums.thumbnail_scroller .full .caption a { float: none; width: auto; } /* Filters */ .filter_list { margin: 0 0px 40px -10px !important; overflow: hidden; visibility: visible; } .filter_list li { margin: 0 0 0 0; float: left; list-style: none; } .filter_list li:first-child { margin: 0; border-right: 0; } .filter_list li a { padding: 0 5px 0px 10px; margin-right: 5px; font-size: 13px; } .filter_list li .separator { color: #888; } .filter_list li:last-child .separator { display: none; } .filter_content.with_filters > .element { margin-right: 0 !important; float: none; } /*-------------------------------------------- Album ---------------------------------------------*/ div.album > div { position: relative; margin-bottom: 4%; } div.album > div img { margin-bottom: 0; height: auto; display: block; width: 100% !important; } div.album div .hover, div.albums div .hover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; background: rgba(0, 0, 0, 0.8); opacity: 0; } div.album div .hover .icons, div.albums div .hover .icons { position: absolute; left: 50%; top: 0%; display: block; } div.album div .hover .icons a, div.album div .hover .icons span, div.albums div .hover .icons a, div.albums div .hover .icons span { color: #fff !important; border: 1px solid #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: inline-block !important; height: 25px; width: 25px; line-height: 25px; text-align: center; font-size: 16px; cursor: pointer; } div.album div .hover .icons a:first-child, div.albums div .hover .icons a:first-child { margin-right: 5px; } section.album #comments img { display: inline-block; } .attachment_nav img, .attachment_nav .placeholder { width: 96px; height: 96px; } .attachment_nav .placeholder { background: rgba(0, 0, 0, 0.2); display: inline-block; line-height: 95px; font-size: 18px; text-align: center; opacity: 0.8; display: none; } .attachment_nav .prev { float: left; margin-right: 14px; } .attachment_nav .graphic { float: left; font-size: 17px; margin-top: 35px; opacity: 0.8; } .attachment_nav .graphic .entypo-left-dir, .attachment_nav .graphic .entypo-right-dir { font-size: 15px; } .attachment_nav .next { float: left; margin-left: 14px; } /* Masonry */ .masonry { visibility: hidden; } .masonry > div { margin: 0px 0px 15px 0px !important; float: none; overflow: hidden; } .masonry .one_half { width: 49%; } @media only screen and (max-width: 768px) { .masonry .one_half { width: 48%; } } @media only screen and (max-width: 420px) { .masonry .one_half { width: 100%; } } .masonry .one_third { width: 32%; } @media only screen and (max-width: 768px) { .masonry .one_third { width: 48%; } } @media only screen and (max-width: 420px) { .masonry .one_third { width: 100%; } } .masonry .one_fourth { width: 23.7%; } @media only screen and (max-width: 768px) { .masonry .one_fourth { width: 48%; } } @media only screen and (max-width: 420px) { .masonry .one_fourth { width: 100%; } } /* Grid Full Width */ div.album.grid_full { visibility: hidden; padding: 0; margin: 0; max-width: 100%; margin-top: -1px; } div.album.grid_full .wall_entry { margin: 0 !important; box-shadow: inset 0 0 0 1px white; float: none; overflow: hidden; } div.album.grid_full .wall_entry img { width: auto !important; } /* Masonry Full Width */ div.album.masonry_full { visibility: hidden; padding: 0; margin: 0; max-width: 100%; margin-top: -1px; } div.album.masonry_full .wall_entry { margin: 0 !important; box-shadow: inset 0 0 0 1px white; float: none; overflow: hidden; } div.album.masonry_full .wall_entry img { width: auto !important; } .filter_content.without_filters { visibility: visible; } /*-------------------------------------------- Photos ---------------------------------------------*/ #photo { position: relative; } #photo .photo_frame { margin: 45px auto 15px auto; } #photo .photo_frame .caption { opacity: 0; transition: opacity 0.3s ease-in; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; } #photo .photo_frame:hover .caption { opacity: 1; } #photo .photo_frame:hover .info { opacity: 1; } #photo .photo_frame .info { opacity: 0; position: absolute; top: 10px; right: 10px; font-size: 24px; background-color: #4c4c4c; background-color: rgba(0, 0, 0, 0.4); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 5px; transition: opacity 0.3s ease-in; -webkit-transition: opacity 0.3s ease-in; -moz-transition: opacity 0.3s ease-in; } #photo .photo_frame .info a { color: #fff !important; } #photo img.the_photo { display: block; height: auto; } #photo .page_content, #photo .sidebar { margin-top: 0; margin-bottom: 0; } #photo h3 { margin-bottom: 20px; } #photo .post_wrap { overflow: hidden; } #photo .attachment_share { float: left; width: 60%; } #photo .attachment_nav { float: right; font-size: 12px; margin-top: 5px; } #photo .attachment_nav a { font-size: 22px; } #photo .sidebar { margin-top: 45px; position: absolute; right: 0; } #photo .sidebar .widget { margin-bottom: 35px; } #photo .sidebar .widget div.plain_list ul li { margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #ddd; } #photo .sidebar .widget div.plain_list ul li i { font-size: 15px; padding-right: 4px; } #photo .sidebar .widget div.plain_list ul span { line-height: 22px; width: 120px; padding-top: 3px; } /*-------------------------------------------- Services ---------------------------------------------*/ div.services .article { text-align: center; margin-bottom: 3%; } div.services .article img { width: 100%; margin-bottom: 15px; } div.services .article .service_title { line-height: 24px; } div.services .article .service_icon { display: inline-block; cursor: pointer; margin-bottom: 15px; text-align: center; position: relative; z-index: 1; font-size: 28px; line-height: 28px; } div.services .article .service_content h5 { margin-bottom: 10px; } div.services .article .service_content p { margin-bottom: 0; line-height: 22px; } /* Left Align */ div.services.left_align .article { text-align: left; display: table; } div.services.left_align .article .service_icon, div.services.left_align .article .service_image { display: table-cell; vertical-align: top; } div.services.left_align .article .service_content { display: table-cell; vertical-align: top; padding-left: 25px; } /* Simple */ div.services.simple .article { text-align: left; } div.services.simple .article .service_content { display: table; } div.services.simple .article .service_content .service_icon { display: table-cell; margin-bottom: 0px; padding-right: 10px; vertical-align: middle; } div.services.simple .article .service_content .service_title { display: table-cell; vertical-align: middle; } /*-------------------------------------------- Blog ---------------------------------------------*/ section#blog { overflow: hidden; } article { margin-bottom: 35px; overflow: hidden; border: 1px solid #e7e7e7; -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07); background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } article .image img { margin-bottom: 0px; display: block; width: 100%; } article .post_wrap { padding: 35px; } article .heading { margin-bottom: 25px; } article .heading h3 { margin-bottom: 10px; } article .heading h3 a { color: #414141; } article .heading span.date { display: inline-block; color: #c6c6c6; font-size: 11px; font-weight: 400; } article .meta { overflow: hidden; } section#blog .content img { max-width: 100%; width: auto; height: auto; } section#blog .content ul { margin-left: 20px; color: #666; list-style: disc !important; margin-bottom: 20px; line-height: 25px; } section#blog .content ol { margin-left: 20px; color: #666; margin-bottom: 20px; line-height: 25px; } section#blog .content blockquote { border-left: 2px solid; padding-left: 15px; font-style: italic; } span.author, span.comments, span.tags { float: left; } span.author a, span.comments a, span.tags a { font-size: 12px; } span.author a span, span.comments a span { font-size: 15px; padding-right: 3px; } span.author, span.comments { margin-right: 15px; } .post_pagination { margin-bottom: 20px; } .post_pagination span { padding: 2px 7px; background: #eaeaea; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: 13px; } .post_pagination a span { background: #eaeaea; color: #999; } /*-------------------------------------------- Comments ---------------------------------------------*/ div#comments { padding-top: 15px; clear: both; } .commentlist { list-style: none; } .comment { margin-bottom: 0px; position: relative; } .comment-body > br { display: none; } .comment-body { overflow: hidden; margin-bottom: 25px; padding-bottom: 15px; } .comment-author { margin-bottom: 6px; } .comment-awaiting-moderation { position: absolute; top: 0px; right: 0; color: #aaa; font-size: 11px; } #comments .avatar { width: 60px !important; height: 60px !important; margin-right: 15px; margin-bottom: 0 !important; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } cite.fn { font-style: normal; } .comment-meta { margin-left: 77px; margin-top: -45px; } .comment-meta a { color: #989898; font-size: 12px; font-style: italic; } .fn, .says { display: inline-block; text-decoration: none; color: #3e3e3e; font-size: 14px; font-weight: 700; vertical-align: top; } div.comment-body p { color: #878787; font-size: 14px; font-weight: 400; margin-left: 80px; margin-top: 10px; margin-bottom: 15px; } .reply { border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 0px; margin-left: 80px; padding-bottom: 30px; } .page_content a.comment-reply-link { font-size: 12px; font-weight: 600; color: #fff !important; } .page_content a.comment-reply-link:hover { color: #fff; } #comments ul.children { margin-left: 75px; } /* Respond */ div#respond h3 { font-size: 20px; } p.logged-in-as a { color: #686868; } p.comment-form-comment label { display: block; margin-right: 15px; } textarea#comment { padding: 10px; width: 97%; } p.form-submit input#submit, .comment-reply-link, #searchform #searchsubmit, input[name="Submit"] { background: #278ea9; color: #fff; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; font-weight: 500; padding: 7px 15px; margin: 0; border: none; -webkit-appearance: none; width: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } .comment-reply-link { padding: 5px 15px; font-size: 12px; } /*-------------------------------------------- Portfolio ---------------------------------------------*/ .portfolio .one_half iframe { max-height: 268px; max-width: 100%; } .portfolio .one_third iframe { max-height: 171px; max-width: 100%; } .portfolio .one_fourth iframe { max-height: 123px; max-width: 100%; } /*-------------------------------------------- Footer ---------------------------------------------*/ footer { overflow: hidden; width: 100%; background: #ffffff; border-top: 1px solid #eaeaea; border-top: 1px solid rgba(0, 0, 0, 0.08); } footer .toggle { text-align: center; padding: 12px 0px; } footer .toggle span { font-size: 26px; } #footer-sidebar { border-bottom: 1px solid rgba(0, 0, 0, 0.08); overflow: hidden; padding-top: 15px; padding-bottom: 15px; display: none; } #footer-sidebar .container > div { margin-bottom: 0; } #footer-sidebar ul { color: #888; } #footer-sidebar h5 { color: #444; text-transform: uppercase; font-size: 13px; } #footer-sidebar .widget { font-size: 13px; margin-bottom: 20px; } #footer-sidebar .widget .textwidget { color: #999; line-height: 20px; } #footer-sidebar .widget_archive { line-height: 22px; } #footer-sidebar.visible { padding-top: 35px; display: block; } /*-------------------------------------------- Typography ---------------------------------------------*/ h5 a { color: #666666; } h5 .typcn { vertical-align: 1px; font-size: 20px; } p { font-size: 14px; line-height: 22px; color: #777; margin-bottom: 20px; font-weight: 400; } a { outline: none; color: #979797; text-decoration: none; } a:hover { color: #1e7c8b; } b { color: #444; } ul { list-style: none; } ul li { text-decoration: none; } .page_content ul { margin-left: 20px; color: #666; list-style: disc !important; margin-bottom: 20px; line-height: 25px; } div.page_wrap { width: 100%; } iframe { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /* Pagination */ .pagination { overflow: hidden; } .pagination a:first-child { float: left; } .pagination a:last-child { float: right; } hr { color: #e5e5e5; background: #e5e5e5; border: none; width: 100%; height: 1px; margin: 25px 0px 25px 0px; clear: both; } pre { color: #888; } .fancybox-skin { color: inherit !important; } .flexslider ul { list-style: none !important; padding: 0 !important; margin: 0 !important; } .ei-slider ul { list-style: none !important; padding: 0 !important; margin-bottom: 0 !important; line-height: normal; margin-left: auto !important; } /*-------------------------------------------- Forms ---------------------------------------------*/ input, textarea { font-family: "Helvetica Neue", helvetica, sans-serif; font-size: 13px; outline: none; -webkit-appearance: none; -webkit-focus-ring-color: none; border: 1px solid #cfd0d0; background: #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } input[type="text"], input[type="email"], input[type="password"], input[type="tel"] { border: 1px solid #cfd0d0 !important; padding: 8px 12px 8px 12px; width: 97%; color: #555; background: #fff; outline: none; } input[type="radio"] { -webkit-appearance: radio; } textarea { color: #555; resize: vertical; background: #fff; width: 97%; border: 1px solid #cfd0d0 !important; } div.wpcf7 img.ajax-loader { width: auto !important; } div.wpcf7-validation-errors { color: #888; font-size: 13px; border-color: #ff0000; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } :-moz-placeholder { color: #333333 !important; font-weight: bold; } :-webkit-input-placeholder { color: #333333 !important; } .password_form label { margin-bottom: 25px; display: block; } .password_form form p:last-child { margin-bottom: 0; } img { border: none; } .clear { clear: both; } /*-------------------------------------------- Contact Form 7 ---------------------------------------------*/ .wpcf7-form p { font-size: 14px; margin-bottom: 20px; } .wpcf7-form input, .wpcf7-form textarea, .wpcf7-form select { color: #777; border: none; background: #fff; font: 13px/22px 'Helvetica Neue', Helvetica, sans-serif; width: 97%; padding: 10px; -webkit-appearance: none; outline: none; } input.wpcf7-submit { background: #278ea9; color: #fff; font-family: 'Helvetica Neue', Helvetica, sans-serif; font-size: 13px; font-weight: 500; padding: 5px 20px; margin: 0; border: none; -webkit-appearance: none; width: auto; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; cursor: pointer; } .wpcf7-select { border: 1px solid #cfd0d0 !important; width: 100%; } /*-------------------------------------------- Widgets ---------------------------------------------*/ div.widget { margin-bottom: 50px; } div.widget h5 { margin-bottom: 15px; color: #999; font-size: 13px; text-transform: uppercase; } div.widget ul { font-size: 13px; line-height: 20px; color: #666; } /* Location */ div.location_widget p { margin-bottom: 15px; line-height: 22px; } div.location_widget .icon { font-size: 13px; padding-right: 4px; } /* Video */ div.widget div.video iframe { margin-bottom: 8px; max-width: 240px; max-height: 150px; } /* Search */ #searchform { overflow: hidden; } #searchform #s { width: 55%; float: left; padding: 7px 12px 7px 12px; } #searchform #searchsubmit { float: right; } /* Plain List */ div.widget div.plain_list ul { line-height: 28px; } div.widget div.plain_list ul li { overflow: hidden; color: #666; font-size: 13px; } div.widget div.plain_list ul b { width: 100px; color: #555; display: block; float: left; } div.widget div.plain_list ul span { float: right; display: block; width: 110px; } /* Search */ #searchform label { display: none; } /* Recent Comments */ ul#recentcomments, .widget_recent_entries ul, .widget_meta ul, .widget_archive ul { line-height: 22px; } /* Services */ .widget .services ul { line-height: 26px; } .widget .services ul span { padding-right: 8px; } /* Albums */ .widget .gallery div.photo { margin-bottom: 4%; position: relative; } .widget .gallery div.photo a { display: block; } .widget .gallery div.photo img { margin-bottom: 0 !important; display: block; width: 100%; height: auto; } /* Recent Posts */ .widget_recent_entries ul li, .widget_categories ul li, .widget_recent_comments ul li, .widget_archive ul li, .widget_rss ul li { margin-bottom: 10px; } .widget_recent_entries ul li a::before, .widget_rss ul li a::before { font-family: 'typicons', sans-serif; content: '\e05e'; padding-right: 8px; font-size: 17px; vertical-align: -1px; } /* Recent Comments */ .widget_recent_comments ul li:before { font-family: 'typicons', sans-serif; content: '\e0ab'; padding-right: 8px; font-size: 18px; vertical-align: -1px; } /* Text */ .widget_text img { max-width: 100%; width: auto; height: auto; } .widget_text select { width: 100%; } .widget_categories ul li a::before, .widget_archive ul li a::before { font-family: 'entypo', sans-serif; content: "\e75e"; padding-right: 8px; font-size: 17px; vertical-align: -1px; } /* Custom Menu */ .widget.widget_nav_menu ul, .widget_pages ul { padding-left: 20px; list-style: disc outside none; line-height: 24px; } /* Calendar */ .widget_calendar { float: left; } #wp-calendar { width: 100%; } #wp-calendar caption { text-align: right; color: #333; font-size: 12px; margin-top: 10px; margin-bottom: 15px; } #wp-calendar thead { font-size: 10px; } #wp-calendar thead th { padding-bottom: 10px; text-align: center; } #wp-calendar tbody { color: #aaa; } #wp-calendar tbody td { background: #f5f5f5; border: 1px solid #fff; text-align: center; padding: 6px; font-size: 12px; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot #next { font-size: 10px; text-transform: uppercase; text-align: right; } #wp-calendar tfoot #prev { font-size: 10px; text-transform: uppercase; padding-top: 10px; } /*-------------------------------------------- Isotope CSS Animations ---------------------------------------------*/ /**** Isotope Filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /**** Isotope CSS3 transitions ****/ .isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/ .isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; } /**** Isotope filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /*-------------------------------------------- WordPress Core CSS ---------------------------------------------*/ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 0px 0 15px 15px; } .alignleft { float: left; margin: 0px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 15px auto; } a img.alignright { float: right; margin: 0px 0 15px 15px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 0px 15px 5px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: #F5F5F5; border: 1px solid #dbdbdb; max-width: 96%; /* Image does not overflow the content area */ padding: 8px 3px 0px 3px; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 0px 3px #eee; -moz-box-shadow: 0px 0px 3px #eee; box-shadow: 0px 0px 3px #eee; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; } .wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; color: #666; padding: 5px 4px 5px; } .gallery-caption { margin-left: 0; } .bypostauthor { display: inline-block; } .sticky { display: block; } /*-------------------------------------------- WooCommerce ---------------------------------------------*/ section.shop { position: relative; } section.shop .shop_actions { background: rgba(0, 0, 0, 0.1); height: 28px; padding: 0px 10px; line-height: 27px; font-size: 12px; font-weight: bold; position: absolute; top: -44px; left: 20px; z-index: 100000; -webkit-border-radius: 0px 0px 3px 3px; -moz-border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px; border: 1px solid #ddd; border-top: none; } section.shop .shop_actions span { padding-right: 5px; } .woocommerce-result-count { display: none !important; } .woocommerce h1.page-title { display: none !important; } .woocommerce .product_title, .woocommerce h2 { font-size: 26px; } .woocommerce .shop_table, .woocommerce .payment { background: #fff; } .woocommerce .woocommerce-ordering { float: none !important; margin-bottom: 35px !important; } .woocommerce .woocommerce-ordering select { width: 175px !important; } .woocommerce ul.products li.product a img, .woocommerce div.product img { box-shadow: 0px 0px 0px black !important; text-align: center !important; margin: auto !important; margin-bottom: 10px !important; } .woocommerce .woocommerce-tabs ul.tabs li { background: #ddd !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } .woocommerce .woocommerce-tabs ul.tabs li a { text-shadow: none !important; } .woocommerce .woocommerce-tabs ul.tabs li.active { background: #fff !important; } .woocommerce select { color: #777; border: 1px solid #cfd0d0 !important; background: #fff; font: 13px/22px 'Helvetica Neue', Helvetica, sans-serif; width: 100%; padding: 6px 12px 5px 12px; -webkit-appearance: none; outline: none; } .woocommerce-page h3 { font-size: 20px; margin-bottom: 20px; } .woocommerce-page .summary .amount, .woocommerce-page .summary .price { float: none; } .woocommerce-page .shop_table { margin-bottom: 40px !important; } .woocommerce-page .quantity { margin: 0 !important; } .woocommerce-page .quantity.buttons_added { margin-right: 10px !important; } .woocommerce-page .cart_totals { width: 46% !important; text-align: left !important; } .woocommerce-page .cart_totals h2 { font-size: 20px; margin-bottom: 20px; } .woocommerce-page .cart_totals table { width: 100%; } .woocommerce-page .cart_totals th, .woocommerce-page .cart_totals td { border-color: #ddd !important; } .woocommerce-page .shipping_calculator { width: 46% !important; float: left !important; clear: none !important; margin: 0px !important; text-align: left !important; } .woocommerce-page .shipping_calculator h2 { font-size: 20px; margin-bottom: 20px; } .woocommerce-page .shipping_calculator h2 a span { display: none !important; } .woocommerce-page .shipping_calculator .shipping-calculator-form { display: block !important; } .woocommerce-page .shipping_calculator .button { width: auto !important; } .woocommerce-page form textarea { height: 150px !important; padding: 10px !important; } .woocommerce-page #payment { background: none !important; margin-top: -20px !important; } .woocommerce-page #payment ul { padding: 0 !important; padding-bottom: 10px !important; } .woocommerce-page #customer_details { margin-bottom: 20px !important; } .woocommerce-page .place-order { padding: 0 !important; padding-top: 20px !important; } .woocommerce-page #order_review_heading { margin-bottom: 20px !important; } .woocommerce-page table { font-size: 13px !important; } .woocommerce-page table thead, .woocommerce-page table tfoot { background: #f1f1f1; } .woocommerce-page table.shop_table td, .woocommerce-page table tfoot th { border: none !important; } .woocommerce-page #payment div.payment_box { background: #e8e8e8 !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; text-shadow: none !important; } .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #review_form #submit { -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; font-size: 12px !important; border: none !important; padding: 5px 17px !important; line-height: 20px !important; color: #fff !important; text-shadow: none !important; } .product.woocommerce { border: none !important; padding: 0 !important; overflow: hidden; display: inline-block; } .woocommerce a.button:hover { color: #fff !important; } .woocommerce .price { float: right; line-height: 30px !important; } .woocommerce a.button { float: left; margin-right: 10px !important; } #loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; color: #fff; z-index: 1999; display: none; } .spinner { position: absolute; top: 50%; left: 50%; margin-top: -20px; margin-left: -20px; width: 40px; height: 40px; display: inline-block; border-radius: 100%; background: url(data:image;base64,R0lGODlhKAABAPcAAP/7iv/7gvv7gv/3ivf3hvP3hv/ziu/zhvvviuvziufziuPvit/vivvnivvjitvrjvvfitfnjtLnjs7nkvvbivvXisrjksbjkvvSisLfkr7flvvKirbblvvGjrLblvvCjrLXlq7Xmvu+jqrSmqbSmqLOnvu2jprOnvuyjvuujpLKopbKnvuqjpLGoo7GovumjorCoobCpvuejn2+pvuajnm6qnW6qvuWjvuSjgjXogTXonG2qgDXom22qvuOjgzSogjSogDSphDOovuKjmmyrmWyrmGyrhTKohzGogDOphjGol2usiDColmusgDKqiS+oveCji26ngDGqlWqsii6nvd9jgDCrjG2nlGqsgDCqjmynvd5jjWyngC+rk2mtj2unkWqnkmmtvd1jkGqngC6skmmngC6rkWitkGiuk2inlWengC2svdtklGenlmangCysgCytlWanj2eul2WngSutvdpkjmeumWSngCutmWSmmGSngSqtgSqum2OmvdlkjGavjWaummOmnGKmgSmuvdhkm2KmnWGmi2WvgSiunGGmn2CmnmCmiiWvvddkoJ9mop5mgSeviSSwoZ5miCSwgSavo51mhySwop1mvdVkgSWwpJxmvdRkpptmhSOxpZtmhiOwgSSwgSSxp5pmvdNkpppmqZllqJllqJlmhCKxgSOxqphlgyKxvdJkq5dlrZZlqpdlgSKxgiGyvdFkrJZlrpVlgSGyrZVlgSGxr5RlsZNlsJNls5JlspJlvc9ksZJls5FltJFltdBlvc5kvc1kt89lts9luM5kt85kvcxkuc1ku8xkusxkvMtkvcokv4BAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBwDOACwAAAAAKAABAAAILwABCBxgoEEDBxQqYNiw4YMIEyZSsHghg8YNHD6GQKmyRQybOn4INcK0aRQrWQEBACH5BAUHAM4ALAAAAAAoAAEAAAgvAEWYMJGCxQsZNG7g8DEESpUtYtjU8UOoEaZNo1jJ6iVsGLJmzZgpU7YsmUljAQEAIfkEBQcAzgAsAAAAACgAAQAACC8Aq2wRw6aOH0KNMG0axUpWL2HDkDVrxkyZsmXJMhojRqxYsGDAfv3axStXLl0BAQAh+QQFBwDOACwAAAAAKAABAAAILwCFDUPWrBkzZcqWJVtojBixYsGCAfv1axevXLl04cJFi5YrV7NatVKlqlSpUwEBACH5BAUHAM4ALAAAAAAoAAEAAAgwAIkVCxYM2K9fu3jlyqULFy5atFy5mtWqlSpVpUqdEiWKkydPmjRVuvRIkiRHjgICACH5BAUHAM4ALAAAAAAoAAEAAAgwAHHRouXK1axWrVSpKlXqlChRnDx50qSp0qVHkiQ5cqRo0SJDhgQV6hMo0J07egICACH5BAUHAM4ALAAAAAAoAAEAAAgwAEVx8uRJk6ZKlx5JkuTIkaJFiwwZElSoT6BAd+7omePGjRo1bdKkKVMGDJgxXwICACH5BAUHAM4ALAAAAAAoAAEAAAgwABctMmRIUKE+gQLduaNnjhs3atS0SZOmTBkwYMZ8+aJFC5crV6JEofLkCRMmSAICACH5BAUHAM4ALAAAAAAoAAEAAAgwAN24UaOmTZo0ZcqAATPmyxctWrhcuRIlCpUnT5gwQYJEyZEjQoT8+AFEhw4ePAICACH5BAUHAM4ALAAAAAAoAAEAAAgpALVo4XLlSpQoVJ48YcIECRIlR44IEfLjBxAdOnho5BGko8ckIJ2IDAgAIfkEBQcAzgAsAAAAACgAAQAACCQAlRw5IkTIjx9AdOjgwZBHkIcQk0h0QtGJlItWMmbswpEMmYAAIfkEBQcAzgAsAAAAACgAAQAACCAAgwgcmKSgk4NOpCi0wpBhl4dkIkZcQxGORTh4MuIJCAAh+QQFBwDOACwAAAAAKAABAAAIIgClCLRCkGCXg2QSJlzDEI5DOHgi4uFDkc+gi4MQIYLEMSAAIfkEBQcAzgAsAAAAACgAAQAACCMAyZBZQxCOQTh4EuLhw5DPoIeDECGCRJEipYuZMmYEFapjQAAh+QQFBwDOACwAAAAAKAABAAAIIQD5CBxEcBAiRJASJqTEMJNDh6BCSUxFEZbFWhgzxloVEAAh+QQFBwDOACwAAAAAKAABAAAIJgAhURqYqWBBUKESploIq2GthxBjOUPVydKkSIwY/fljxw4aNAEBACH5BAUHAM4ALAAAAAAoAAEAAAgrAFOlgkWwlsGDsVah6mRpUiRGjP78sWMHDZowXrBMabLESBEiPXbYqDEjIAAh+QQFBwDOACwAAAAAKAABAAAIMAA7WZoUiRGjP3/s2EGDJowXLFOaLDFShEiPHTZqzJgRA4YLFSpOnChBYkQIDxwCAgAh+QQFBwDOACwAAAAAKAABAAAIMAC9YJnSZImRIkR67LBRY8aMGDBcqFBx4kQJEiNCeODAQUOGCxYmSIjwgMECBQkCAgAh+QQFBwDOACwAAAAAKAABAAAIKQBjwHChQsWJEyVIjAjhgQMHDRkuWJggIcIDBgsUJDhQgICAACBDigwIADs=) 0 0 repeat-y; background-size: 100% 100%; -webkit-animation: rotate 2s infinite linear; } .spinner:after { content: ''; display: block; width: 86%; height: 86%; margin: 7%; background: #fff; border-radius: 100%; } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } .pace .pace-progress { background: #278ea9; position: fixed; z-index: 2000; top: 0; left: 0; height: 2px; -webkit-transition: width 1s; -moz-transition: width 1s; -o-transition: width 1s; transition: width 1s; } .pace-inactive { display: none; } /*-------------------------------------------- To Top ---------------------------------------------*/ #toTop { display: none; text-decoration: none; position: fixed; bottom: 15px; right: 15px; overflow: hidden; width: 51px; height: 51px; border: none; background: rgba(0, 0, 0, 0.1); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .entypo-up-open { font-size: 35px; top: 0px; left: 15px; position: absolute; } #toTop:active, #toTop:focus { outline: none; } /*-------------------------------------------- Media Queries ---------------------------------------------*/ /*----------------------------------------------------------------------------------- Theme Name: Chroma Author: Two2Twelve Themes Author URI: http://t2themes.com Stylesheet: Media Queries -----------------------------------------------------------------------------------*/ /* For iPads and Tablets */ @media screen and (min-width: 751px) and (max-width: 970px) { body.boxed { margin: 0px auto 0px auto; padding-bottom: 0px; } img { width: 100%; } .image img { width: 730px; } .one_half img, .one_third img, .one_fourth img { width: 100% !important; } header .logo img, div.testimonials > div img { width: auto !important; } } /* For iPhones and Mobile */ @media only screen and (max-width: 750px) { body.boxed { margin: 0px auto 0px auto; padding-bottom: 0px; } header#horizontal #menuToggle { display: block; } header nav ul { display: none; } header .menu-icon { display: block; } header nav select { display: block; } header.centered .logo { margin-bottom: 0; padding-bottom: 0; } header .logo img { width: auto; } div.page_title { padding: 25px 0px 50px 0px; } .nav-arrows span { height: 22px; width: 22px; } .slide-content .caption { font-size: 15px; } section.sidebar_left .page_content, section.sidebar_right .page_content { width: 100%; float: none; } section.sidebar_left .sidebar, section.sidebar_right .sidebar { width: 100%; float: none; } div.featured_services > div { text-align: center; } div.testimonials div.box_heading { margin: 0; } div.testimonials > div { clear: both; padding-bottom: 35px; margin-bottom: 0; } section#album div.one_third.column_last { margin-right: 2% !important; margin-bottom: 25px; } ul.album { width: 320px; } #albums .one_third, #album .one_third, #albums .one_fourth, #album .one_fourth { width: 100%; } #albums .full img { float: none !important; width: 100% !important; } #albums .caption { float: none !important; width: 100% !important; } img { width: 100%; } div.featured_services > div p { font-size: 13px; } footer .one_fourth { width: 100%; display: block; float: none; } footer .container:last-child { text-align: center; } footer p { float: none; text-align: center; margin-bottom: 0px; line-height: 30px; padding-top: 10px; } footer ul.social { float: none; text-align: center; padding-bottom: 10px; } .widget .gallery .photo { width: 15%; float: left; } .widget .gallery .photo.column_last { margin-right: 5px !important; } #searchform #s { width: 92%; float: none; margin-bottom: 15px; } #searchform #searchsubmit { float: none; } #photo .page_content { float: none; width: 100%; } #photo .sidebar { float: none; width: 98%; margin: 0 auto; position: relative; margin-top: 0; display: block !important; } #photo .info { display: none; } .portfolio .one_third iframe { max-height: 360px; } }