/* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /*!Animate.css - http://daneden.me/animate Licensed under the MIT license -http://opensource.org/licenses/MIT Copyright (c) 2015 Daniel Eden*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: .75s; animation-duration: .75s; } .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%,20%,53%,80%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } @keyframes bounce { 0%,20%,53%,80%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 40%,43% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-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; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%,100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%,100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%,30%,50%,70%,90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%,40%,60%,80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%,20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); } 30%,50%,70%,90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%,60%,80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } 100% { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; transform: none; } } @keyframes jello { 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } 100% { -webkit-transform: none; transform: none; } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%,20%,40%,60%,80%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes bounceIn { 0%,20%,40%,60%,80%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } 100% { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes bounceInUp { 0%,60%,75%,90%,100% { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%,55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%,45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } 100% { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%,60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%,80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @keyframes rollOut { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 100% { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 100% { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } /* ## DOCUMENT INFORMATION - Document: CSS Reset - Version: 0.1 - Author: Hein Maas - Notes : none */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ## DOCUMENT INFORMATION - Document: Prettyphoto Lightbox - Version: 3.5 */ /* Magnific Popup CSS */ .mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.96; filter: alpha(opacity=96); } .mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; } .mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; } .mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } .mfp-align-top .mfp-container:before { display: none; } .mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; } .mfp-ajax-cur { cursor: progress; } .mfp-auto-cursor .mfp-content { cursor: auto; } .mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .mfp-loading.mfp-figure { display: none; } .mfp-hide { display: none !important; } .mfp-preloader { color: #CCC; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; } .mfp-preloader a { color: #CCC; } .mfp-preloader a:hover { color: #FFF; } .mfp-s-ready .mfp-preloader { display: none; } .mfp-s-error .mfp-content { display: none; } button.mfp-close, button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; outline: none; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.3s cubic-bezier(0.72, 0.8, 0.45, 0.94); -moz-transition: all 0.3s cubic-bezier(0.72, 0.8, 0.45, 0.94); transition: all 0.3s cubic-bezier(0.72, 0.8, 0.45, 0.94); } button.mfp-close:hover { transform: rotate(180deg); } button::-moz-focus-inner { padding: 0; border: 0; } .mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; filter: alpha(opacity=65); padding: 0 0 18px 10px; color: #FFF; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-close:active { top: 1px; } .mfp-close-btn-in .mfp-close { color: #333; } .mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #FFF; right: -6px; text-align: right; padding-right: 6px; width: 100%; } .mfp-image-holder .mfp-close { transform: rotate(0deg); width: 30px; text-align: center; padding: 0; } .mfp-counter { position: absolute; top: 0; right: 0; color: #CCC; font-size: 12px; line-height: 18px; white-space: nowrap; } .mfp-arrow { position: absolute; opacity: 0.65; filter: alpha(opacity=65); margin: 0; top: 50%; color: #fff; font-size: 28px; padding: 0; text-decoration: none; height: 60px; width: 60px; -webkit-tap-highlight-color: transparent; } .mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; filter: alpha(opacity=100); } .mfp-arrow-left { left: 20px; } .mfp-arrow-right { right: 20px; } .mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; } .mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; } .mfp-iframe-holder .mfp-close { top: -40px; } .mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; } .mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; } /* Main image in popup */ img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; } /* The shadow behind the image */ .mfp-figure { line-height: 0; } .mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444; } .mfp-figure small { color: #BDBDBD; display: block; font-size: 12px; line-height: 14px; } .mfp-figure figure { margin: 0; } .mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; } .mfp-title { text-align: left; line-height: 18px; color: #F3F3F3; word-wrap: break-word; padding-right: 36px; } .mfp-image-holder .mfp-content { max-width: 100%; } .mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; } @media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } } @media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } } .mfp-ie7 .mfp-img { padding: 0; } .mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; } .mfp-ie7 .mfp-container { padding: 0; } .mfp-ie7 .mfp-content { padding-top: 44px; } .mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; } /* overlay at start */ .mfp-fade.mfp-bg { opacity: 0; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } /* overlay animate in */ .mfp-fade.mfp-bg.mfp-ready { opacity: 0.96; } /* overlay animate out */ .mfp-fade.mfp-bg.mfp-removing { opacity: 0; } /* content at start */ .mfp-fade.mfp-wrap .mfp-content { opacity: 0; top: -100px; -webkit-transition: all 0.3s cubic-bezier(0.72, 0.8, 0.45, 0.94); -moz-transition: all 0.3s cubic-bezier(0.72, 0.8, 0.45, 0.94); transition: all 0.3s cubic-bezier(0.72, 0.8, 0.45, 0.94); } /* content animate it */ .mfp-fade.mfp-wrap.mfp-ready .mfp-content { opacity: 1; top: 0; } /* content animate out */ .mfp-fade.mfp-wrap.mfp-removing .mfp-content { opacity: 0; } /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. RESET 2. Events Pro 3. Basic Swiper Styles ----- End of Table of Contents ---------- */ /*============================= = RESET = =============================*/ html { box-sizing: border-box; } *, *:after { box-sizing: inherit; } div.page-wrapper img.alignleft { margin: 50px 50px 50px 0; } div.page-wrapper .wp-caption.alignleft { margin: 50px 50px 50px 0; } div.page-wrapper img.alignright { margin: 50px 0 50px 50px; } div.page-wrapper .wp-caption.alignright { margin: 50px 0 50px 50px; } div.page-wrapper img.aligncenter { margin: 10px auto; } div.page-wrapper img.alignnone { margin: 5px 0; } div.page-wrapper .journal-content img.alignleft { margin: 50px 50px 50px -50px; } div.page-wrapper .journal-content img.alignright { margin: 50px -50px 50px 50px; } body { margin: 0; padding: 0; } .entry-content img, .entry-summary img, .comment-content img, .widget img, .wp-caption { max-width: 100%; height: auto; } .entry-content img, .entry-summary img, .comment-content img[height], img[class*=align], img[class*=wp-image-], img[class*=attachment-] { height: auto; } .entry-media img, img.size-full, img.size-large, img.wp-post-image { height: auto; max-width: 100%; } embed, iframe, object, video { max-width: 100%; } .entry-content .twitter-tweet-rendered { max-width: 100% !important; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text, .entry-caption, .gallery-caption { color: #333333; font-size: 18px; font-style: italic; font-weight: 300; } img.wp-smiley, .rsswidget img { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; margin-top: 0; padding: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline; zoom: 1; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, textarea { font-family: sans-serif; } a:focus { outline: none; } a:active, a:hover { outline: 0; } h1 { margin: .67em 0; } h2 { margin: .83em 0; } h4 { margin: 1.33em 0; } h5 { margin: 1.67em 0; } h6 { margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: 700; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: none; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -.5em; } sub { bottom: -.25em; } dd { margin: 0 0 0 40px; } menu, ol, ul { padding: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; } img { border: 0; -ms-interpolation-mode: bicubic; } svg:not(:root) { overflow: hidden; } fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em; } legend { border: 0; white-space: normal; margin-left: -7px; padding: 0; } button, input, select, textarea { font-size: 100%; vertical-align: middle; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; overflow: visible; } button[disabled], html input[disabled] { cursor: default; } input[type=checkbox], input[type=radio] { box-sizing: border-box; height: 13px; width: 13px; padding: 0; } input[type=search] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } .clearfix { zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; line-height: 0; } .clearfix:after { clear: both; } .last { clear: right; } .first { clear: left; } .no-bottom-border { border-bottom: none !important; } form label { display: block; } textarea, input { outline: none; } pre { padding: 10px; border: 1px solid #e9e9e9; } table { width: 100%; margin-bottom: 30px; } table th { padding: 10px 20px; text-align: left; border-bottom: 1px solid #e9e9e9; border-top: 1px solid #e9e9e9; } table tr th { border-right: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9; } table tr td { padding: 10px 20px; text-align: left; } input[type=password], textarea, input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], select { width: 75%; padding: 17px; background: #ffffff; border: 1px solid #eaeaea; color: #000102; box-shadow: none !important; } input[type=password]:focus, input[type=text]:focus, input[type=url]:focus, input[type=search]:focus, input[type=email]:focus, input[type=number]:focus, textarea:focus, select:focus { background: #fafafa; box-shadow: none; border: 1px solid #eaeaea; color: #000102; } textarea { width: 100%; overflow: auto; } input[type=submit] { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 18px 30px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } input[type=submit]:hover { background: #000102; border-color: #000102; color: #ffffff; } iframe { border: none; outline: none; } input:-webkit-autofill { background-color: #000102; } input[type=text]:focus { outline: none; } /*----- End of RESET ------*/ /*================================== = Events Pro = ==================================*/ .ui-datepicker { z-index: 4 !important; } .em-toggle.hide { display: block; } .relative { position: relative; } /*----- End of Events Pro ------*/ /* * Swiper - Mobile Touch Slider CSS * http://www.idangero.us/sliders/swiper * * Vladimir Kharlampidi, The iDangero.us * http://www.idangero.us/ * * Copyright 2012-2013, Vladimir Kharlampidi * The iDangero.us * http://www.idangero.us * * Licensed under GPL & MIT * */ /* =============================================================== Basic Swiper Styles ================================================================*/ .swiper-container { position: relative; overflow: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; z-index: 1; margin: 0 auto; } .swiper-wrapper { position: relative; width: 100%; } .swiper-free-mode > .swiper-wrapper { margin: 0 auto; } .swiper-slide { float: left; } .swiper-wp8-horizontal { -ms-touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; } .swiper-scrollbar { position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); } .swiper-scrollbar-cursor-drag { cursor: move; } /*============================================== = Media Element Stylings = ==============================================*/ .modal-open { overflow: hidden; } .modal { display: none; overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; } .modal.fade .modal-dialog { -webkit-transform: translate3d(0, -25%, 0); transform: translate3d(0, -25%, 0); -webkit-transition: -webkit-transform 0.3s ease-out; -moz-transition: -moz-transform 0.3s ease-out; -o-transition: -o-transform 0.3s ease-out; transition: transform 0.3s ease-out; } .modal.in .modal-dialog { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } .modal-dialog { position: relative; width: auto; margin: 10px; } .modal-content { position: relative; background-color: #ffffff; border: 1px solid #999999; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0px; -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5); background-clip: padding-box; outline: 0; } .modal-backdrop { position: fixed; top: -10px; right: -10px; bottom: -10px; left: -10px; z-index: 1040; background-color: #000000; } .modal-backdrop.fade { opacity: 0; filter: alpha(opacity=0); } .modal-backdrop.in { opacity: 0.5; filter: alpha(opacity=50); } .modal-header { padding: 15px; background: #48688e; min-height: 16.42857143px; position: relative; } .modal-open .super-wrapper { -webkit-filter: blur(2px); filter: blur(2px); } .modal-header .close { border: none; background: none; color: #ffffff; position: absolute; top: 5px; right: 5px; font-size: 24px; } .modal-title { margin: 0; color: #ffffff; line-height: 1.42857143; } .modal-body { position: relative; padding: 15px; } .modal-footer { padding: 15px; text-align: right; border-top: 1px solid #e5e5e5; } .modal-footer button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 18px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } .modal-footer button:hover { background: #000102; border-color: #000102; color: #ffffff; } .modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; } .modal-footer .btn-group .btn + .btn { margin-left: -1px; } .modal-footer .btn-block + .btn-block { margin-left: 0; } .modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; } @media (min-width: 768px) { .modal-dialog { width: 600px; margin: 30px auto; } .modal-content { -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); } .modal-sm { width: 300px; } } @media (min-width: 992px) { .modal-lg { width: 900px; } } .modal-footer:before, .modal-footer:after { content: " "; display: table; } .clearfix:after, .modal-footer:after { clear: both; } /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ## DOCUMENT INFORMATION - Document: Layouts for the theme - Version: 1 - Author: ASI - Notes : contains layout logic for framework. */ /** * * Fixed Width Variables * **/ /** * Sidebar Layout * */ /** * Double Sidebar Layout * */ /*============================================ = Basic Layout Classes = ============================================*/ .left { float: left; } .right { float: right; } .last { padding-right: 0 !important; clear: right; margin-right: 0 !important; } .first { padding-left: 0 !important; clear: left; margin-left: 0 !important; } .auto_align { margin: 0 auto; } .skeleton { width: 1060px; position: relative; z-index: 1; } .layout-boxed div.inner-super-wrapper { width: 1160px; margin: 50px auto 0 auto; position: relative; z-index: 3; } .layout_element, .col { float: left; min-height: 1px; margin: 0px 50px 50px 0; padding: 0px; } .full, .full.layout_element { clear: both; width: 100%; padding-right: 0 !important; } .box-model, .layout_element { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /*----- End of Basic Layout Classes ------*/ /*============================================== = Container Based Layout = ==============================================*/ .one_half { width: 505px; } .one_third { width: 319.96467px; } .one_fourth { width: 227.5px; } .one_fifth { width: 172px; } .two_third { width: 689.92933px; } .three_fourth { width: 782.03704px; } .four_fifth { width: 838px; } /*----- End of Container Based Layout ------*/ /*======================================== = RAD Fluid Layout = ========================================*/ .full_width .layout_element { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .full_width .layout_element, .full_width .col { margin: 0; } .full_width .full { clear: both; width: 100%; } .full_width .one_half { width: 50%; } .full_width .one_third { width: 33.333%; } .full_width .one_fourth { width: 25%; } .full_width .one_fifth { width: 20%; } .full_width .two_third { width: 66.66667%; } .full_width .three_fourth { width: 75%; } .full_width .four_fifth { width: 80%; } /*----- End of RAD Fluid Layout ------*/ /*====================================== = Sidebar Layout = ======================================*/ .has-sidebar .layout_element, .has-sidebar .col { float: left; min-height: 1px; margin: 0px 30px 30px 0; padding: 0px; } .has-sidebar .one_half { width: 367.5px; } .has-sidebar .one_third { width: 234.9745px; } .has-sidebar .one_fourth { width: 168.75px; } .has-sidebar .one_fifth { width: 129px; } .has-sidebar .two_third { width: 499.949px; } .has-sidebar .three_fourth { width: 565.97222px; } .has-sidebar .four_fifth { width: 606px; } /*----- End of Sidebar Layout ------*/ /*====================================== = Double Sidebar Layout = ======================================*/ .sidebar-double-layout .layout_element, .sidebar-double-layout .col { float: left; min-height: 1px; margin: 0px 20px 20px 0; padding: 0px; } .sidebar-double-layout .one_half { width: 281.5px; } .sidebar-double-layout .one_third { width: 180.98057px; } .sidebar-double-layout .one_fourth { width: 130.75px; } .sidebar-double-layout .one_fifth { width: 100.6px; } .sidebar-double-layout .two_third { width: 381.96113px; } .sidebar-double-layout .three_fourth { width: 432.06481px; } .sidebar-double-layout .four_fifth { width: 462.4px; } /*----- End of Double Sidebar Layout ------*/ /*========================================== = Sidebar Structure = ==========================================*/ .blog-misc-page { padding-top: 50px; } .mutual-content-wrap { position: relative; z-index: 1; } .sidebar { padding-bottom: 50px; position: relative; z-index: 2; padding-top: 50px; } .sidebar-layout, .sidebar { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /* == Right Sidebar ========================== */ .has-left-sidebar { float: right; width: 795px; } .left-sidebar.sidebar { float: left; width: 240px; padding-right: 25px; } /* == Left Sidebar ========================== */ .has-right-sidebar { float: left; width: 795px; } .right-sidebar.sidebar { float: right; width: 240px; padding-left: 25px; margin-left: 25px; } /*========== Double Left Sidebar ==========*/ .has-double-left-sidebar { float: right; width: 583px; padding-left: 0; } .double-left-sidebar.sidebar { float: left; width: 218.5px; margin-right: 20px; padding-right: 20px; } /*========== Double Right Sidebar ==========*/ .has-double-right-sidebar { float: left; width: 583px; padding-left: 0; } .double-right-sidebar.sidebar { float: right; width: 218.5px; padding-left: 20px; margin-left: 20px; } /*========== Double Sidebars with content in center ==========*/ .has-double-sidebar { float: right; width: 583px; padding-left: 0; } .double-sidebar.sidebar { float: right; width: 218.5px; padding-left: 20px; margin-left: 20px; } #sidebar.double-sidebar.sidebar { float: left; padding-left: 0; padding-right: 20px; margin-right: 20px; } /* * Sticky Sidebars * */ .sticky-right-sidebar .sidebar-inner-wrap { width: 240px; } .sticky-left-sidebar .sidebar-inner-wrap { width: 240px; } /* == Sticky Left Sidebar ========================== */ .has-sticky-left-sidebar { float: right; width: 795px; } .sticky-left-sidebar.sidebar { float: left; width: 265px; padding-right: 25px; margin-right: 25px; } /* == Sticky Right Sidebar ========================== */ .has-sticky-right-sidebar { float: left; width: 795px; } .sticky-right-sidebar.sidebar { float: right; width: 265px; padding-left: 25px; margin-left: 25px; } .hasStretchedLeftLayout .sticky-left-sidebar:before { content: ' '; position: absolute; top: 0; left: -500%; height: 100%; width: 500%; } #sidebar { margin-top: 25px; } /*----- End of Sidebar Structure ------*/ #layout_engine_overlay { position: absolute; background-color: rgba(61, 133, 201, 0.3); z-index: 1000000; pointer-events: none; -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /* ## DOCUMENT INFORMATION - Document: Typographic Declaration for the Theme - Version: 0.1 - Author: Hein Maas - Notes : none */ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Typographic Declarations for the Theme 2. Typographic Elements ----- End of Table of Contents ---------- */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /*============================================================== = Typographic Declarations for the Theme = ==============================================================*/ body { font-family: "Open Sans", "Helvetica", "Arial" sans-serif; font-size: 13px; font-weight: 400; line-height: 1.6; color: #333333; } strong { color: inherit; } body a { color: #000102; } body a:hover { color: #48688e; } /*========== Headings ==========*/ h1 { margin: 0px 0px 15px 0px; padding: 0; font-size: 36px; color: #333333; line-height: 1.1; } h2 { margin: 0px 0px 15px 0px; padding: 0; font-size: 32px; color: #333333; line-height: 1.1; } h3 { margin: 0px 0px 15px 0px; padding: 0; font-size: 26px; color: #333333; line-height: 1.1; } h4 { margin: 0px 0px 15px 0px; padding: 0; font-size: 20px; color: #333333; line-height: 1.1; } h5 { margin: 0px 0px 15px 0px; padding: 0; font-size: 20px; color: #333333; line-height: 1.1; } h6 { margin: 0px 0px 15px 0px; padding: 0; font-size: 13px; color: #333333; line-height: 1.1; } h1, h2, h3, h4, h5, h6 { text-rendering: auto; -webkit-font-smoothing: auto; } /*----- End of Typography Section ------*/ /*============================================ = Typographic Elements = ============================================*/ /*========== Drops ==========*/ .drop-cap { float: left; padding: 6px 21px; color: #ffffff; font-size: 24px; background: #000102; margin: 0px 15px 5px 0; border-radius: 0px; } /*========== Blockquotes ==========*/ .page-content blockquote.blockquote-right { max-width: 40%; margin: 10px 0px 10px 20px; float: right; } .page-content blockquote.blockquote-left { max-width: 40%; margin: 10px 20px 10px 0px; float: left; } .blockquote-wrap i { display: block; top: 9px; font-size: 16px; left: 9px; position: absolute; } .page-content blockquote, .blockquote-wrap blockquote { position: relative; margin: 10px 0; padding: 30px 20px; color: #000102; border-radius: 0px; font-size: 18px; font-family: Georgia,Arial; text-align: center; border: 1px solid #e9e9e9; font-style: italic; } .bottom-quote-wrap { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .quote-cap { position: absolute; top: 5px; right: 5px; background: #48688e; padding: 15px; color: #ffffff; font-size: 48px; line-height: 1; border-radius: 100%; } .full_width .blockquote-wrap { padding: 30px; } /*========== Highlighter ==========*/ .highlighter-p { display: inline-block; padding: 1px 8px; background: #48688e; color: #ffffff; border-radius: 0px; } .highlighter-s { display: inline-block; padding: 1px 8px; background: #000102; color: #ffffff; border-radius: 0px; } .highlighter-p-color { color: #48688e; } span.highlighter-text-color { color: #48688e; } /*========== Magic List ==========*/ ul.magic-list { padding: 0; margin: 0; } ul.magic-list li { padding: 0; margin: 0 0 20px 0; list-style: none; position: relative; min-height: 20px; } ul.magic-list li .icon-area { position: absolute; left: 0; top: 3px; font-size: 24px; line-height: 1; } ul.magic-list li .desc-area { margin-left: 30px; font-size: 16px; } /* ========= Lightbox Widget ========== */ a.shortcode-lightbox { text-decoration: none; display: inline-block; border-bottom: 1px solid #000102; position: relative; } a.shortcode-lightbox:hover { border-color: #48688e; } /*----- End of Typographic Elements ------*/ /* ## DOCUMENT INFORMATION - Document: Top Area Structure Stylings - Version: 0.1 - Author: Hein Maas - Notes : */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Top Area Blocks Stylings 2. General Head Structure & Stylings 3. Head Major Elements Stylings 4. Head Area Styles & Sidebar Area Stylings 5. Compact Bar ----- End of Table of Contents ---------- */ /*========================================================= = Top Area Blocks Stylings = =========================================================*/ .super-head-wrap { position: relative; z-index: 20; background: #48688e; } .head-positon-overlap .super-head-wrap { position: absolute; top: 0; left: 0; width: 100%; } /*========== Vertical Align Code ==========*/ /*----- End of Top Area Blocks Stylings ------*/ #main_bar .left-area, #main_bar .center-area, #main_bar .right-area, #main_bar .social-set ul li { height: 110px; line-height: 110px; } #main_bar { height: 110px; line-height: 110px; background: #48688e; } #top_bar .left-area, #top_bar .center-area, #top_bar .right-area, #top_bar .social-set ul li { height: 50px; line-height: 50px; } #top_bar { height: 50px; } #compact_bar .left-area, #compact_bar .center-area, #compact_bar .right-area, #compact_bar .social-set ul li { height: 80px; line-height: 80px; } #compact_bar { height: 80px; background: #48688e; } /*========================================================= = General Head Structure & Stylings = =========================================================*/ .theme-header { line-height: 1; /* The Whole Header needs to have 1 for consistent browser paddings */ z-index: 12; position: relative; } .theme-header .video-bg { z-index: 1; position: absolute; } .head-fluid > .skeleton { width: 96%; } .header-cons-area > div { position: relative; } .header-cons-area .center-area { text-align: center; } .header-cons-area .left-area { float: left; position: absolute; left: 0; } .header-cons-area .right-area { float: right; position: absolute; right: 0; } .header-cons-area { /*position: relative;*/ z-index: 20; } .left-area .h-widget { float: left; margin-right: 0px; } .right-area .h-widget { float: left; margin-left: 0px; height: 103px; margin-top: 7px; } .center-area .h-widget { display: inline-block; vertical-align: top; margin: 0 10px; } .center-area #logo { margin: 0 10px; vertical-align: top; } .left-area .h-widget:first-child { margin-left: 0px; } .right-area .h-widget:last-child { margin-right: 0px; } #mlogo { margin-right: 50px; display: block; position: absolute; left: 15px; top: 15px; height: 100%; line-height: 60px; width: auto; } #mlogo img { display: inline-block; vertical-align: middle; margin: 0 auto; max-width: 100%; height: auto; max-height: 100%; width: auto; } .mobile-menu-wrap { background: #666666; } .mobile-menu-list li a { color: #ffffff; } .mobile-menu-list li a:hover { color: #ffffff; opacity: 0.5; } .sub-menu-toggle { color: #ffffff; } .mobile-menu-list li { border: 1px solid #d2d1d1; } a.mobile-menu { position: absolute; top: 30%; right: 28px; z-index: 2; font-size: 40px; width: 24px; height: 24px; text-decoration: none; } a.mobile-menu i { position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out 0.2s; -webkit-transition: all 0.3s ease-in-out 0.2s; color: #ffffff; } a.mobile-menu .default-icon { z-index: 2; } a.mobile-menu .close-icon { opacity: 0; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); z-index: 4; font-size: 24px; } .mobile-header { position: relative; min-height: 96px; display: none; } .showMobileMenu a.mobile-menu .default-icon { opacity: 0; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .showMobileMenu a.mobile-menu .close-icon { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .mobile-header { position: relative; min-height: 96px; display: none; background: #48688e; } .mobile-menu-wrap { position: fixed; top: 0px; right: 0; width: 250px; height: 100%; overflow: auto; z-index: 1; display: none; } .mobile-menu-list { padding: 0; margin: 0; display: block; } .mobile-menu-list > li:first-child { border-top: 1px solid #d2d1d1; } .mobile-menu-list li { padding: 13px 0px; list-style: none; position: relative; } .mobile-menu-list li > a { padding-left: 15px; } .mobile-menu-list li a { color: #ffffff; display: block; text-decoration: none; position: relative; z-index: 1; margin-right: 30px; } .mobile-menu-list li a:hover { color: #ffffff; } .sub-menu-toggle { float: right; cursor: pointer; margin: 0px 0px 0 0; font-size: 12px; padding: 13px 15px; color: #ffffff; position: absolute; z-index: 12; top: 6px; right: 6px; } .sub-mobile-menu { padding: 0; margin: 0; margin-top: 10px; display: none; } .sub-mobile-menu li { padding: 10px 0px 10px 0px; border-bottom: 1px solid #d2d1d1; list-style: none; } .sub-mobile-menu li:last-child { border-bottom: none; padding-bottom: 0px; } .sub-mobile-menu h6 { margin-bottom: 0; padding-left: 30px; } .sub-mobile-menu > li > a { padding-left: 30px; } .sub-mobile-menu .sub-mobile-menu > li > a { padding-left: 60px; } /*----- End of General Head Structure & Stylings ------*/ /*==================================================== = Head Major Elements Stylings = ====================================================*/ /*========== Text Element ==========*/ .top-text { line-height: inherit; margin-bottom: 0; margin-top: 0px; color: #a8acad; font-size: 12px; } .top-text p { padding: 0; margin: 0; color: #a8acad; } .top-text p strong { color: #a8acad; } .top-text a { color: #333333; font-size: 11px; font-weight: 700; margin-right: 5px; margin-left: 5px; text-decoration: none; } .top-text a:hover { color: #333333; text-decoration: none; } .top-text i.shortcode-icon { margin-left: 18px; } .top-text i.shortcode-icon:first-child { margin-left: 0; } /*========== Logo Element ==========*/ #logo, #compact-logo { height: 100%; width: auto; position: relative; } #logo img, #compact-logo img { display: inline-block; max-height: 100%; width: auto; height: auto; max-width: 100%; vertical-align: middle; } #compact-logo img { width: auto; } /** * Stylings for Text logo * */ .text-logo { vertical-align: middle; text-decoration: none; } .text-logo > div { display: inline-block; vertical-align: middle; } .text-logo h1.logo-text { text-decoration: none; font-size: 24px; color: #333333; line-height: 1; display: block; margin: 0; } /*========== Menu Element ==========*/ .menu-wrapper { position: relative; z-index: 26; } .menu-wrapper .menu { position: relative; } .theme-header .m-el { position: relative; z-index: 3; } .theme-header .menu > li a:hover { color: #ffffff; } /*========== Page title H1 Styling ==========*/ .mutual-content-wrap .entry-title { margin: 0 auto; color: #333333; position: relative; font-size: 26px; margin: 30px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 1.2; text-transform: none; letter-spacing: 0px; font-weight: 300; } /*========== Page title H1 Styling ==========*/ /* Current Top Level Menu anchor Styling */ .theme-header .menu-bar .menu > li.current_page_item > a, .theme-header .menu-bar .menu > li.current-menu-ancestor > a, .theme-header .menu-bar .menu > li.menu-active > a, .theme-header .menu-bar .menu > li.current-menu-item > a { color: #ffffff; background: "transparent"; } .theme-header .menu > li > a { padding: 4px 15px !important; } /* Current Sub Menu Item Styling */ .theme-header .menu-bar .sub-menu .menu li ul.sub-menu li.current-menu-item > a, .theme-header .menu-bar .menu li ul.sub-menu li.menu-active > a, .theme-header .menu-bar .menu li ul.sub-menu li.current_page_item > a, .theme-header .menu-bar .menu li ul.sub-menu li.current-menu-parent > a { color: #ffffff; background: #48688e; } .theme-header .menu > li > a span.menu-arrow { top: 50%; margin-top: -5px; right: 2px; font-size: 11px; z-index: 2; color: inherit; position: absolute; } .theme-header .menu-bar ul.sub-menu li a span.menu-arrow { top: 13px; right: 13px; font-size: 18px; position: absolute; } /* Sub Menu Stylings */ .top-theme-header .menu-bar li ul.sub-menu { display: none; } .top-theme-header .menu-bar li.relative ul.sub-menu { display: none; left: 5px; z-index: 5; background: #f6f7f7; position: absolute; top: 62%; width: 130px; margin: 0; padding: 0; box-shadow: -10px 18px 30px rgba(0, 0, 0, 0.1); line-height: 1.6; } .top-theme-header .menu-bar ul.sub-menu ul.sub-menu { left: 220px; top: 0px; margin-top: 0; } .top-theme-header .menu-bar ul.sub-menu li { position: relative; } .top-theme-header .menu-bar ul.sub-menu li { padding: 0; margin: 0; display: block; } .top-theme-header .menu-bar ul.sub-menu li a { font-size: 13px; font-weight: 600; text-decoration: none; padding: 5px 16px; display: block; margin: 0px; color: #48688e; text-align: left; -webkit-font-smoothing: subpixel-antialiased; } .theme-header .menu-bar ul.sub-menu li.last-child > a { border-bottom: none; } /* Invisible Holder for better usability */ .faux-holder { position: absolute; top: -7px; left: 0; right: 0; height: 15px; display: block; } .sub-menu .sub-menu .faux-holder { height: 100%; left: -50px; right: auto; top: 0; width: 52px; } /* WPML Menu Item Stylinh */ .theme-header .menu-bar .menu > li.menu-item-language-current ul.sub-menu li:hover > a { color: #a8acad; background: #b12e25; } .theme-header .menu-bar .menu > li.menu-item-language-current img { float: left; } /* Edge Detection Styling */ .theme-header .menu-bar li.forceRightChain ul.sub-menu li { text-align: right; } .theme-header .menu-bar li.forceRightChain ul.sub-menu li a span.menu-arrow { top: 50%; margin-top: -4px; right: auto; left: 18px; font-size: 11px; position: absolute; } .theme-header .menu-bar li.forceRightChain > ul.sub-menu { left: -220px; right: auto; } .theme-header .menu-bar .menu > li.forceRightChain > ul.sub-menu { left: auto; right: 0; } /* Top Level Menu Stylings */ .theme-header .menu-bar .menu { padding: 0; margin: 0; } .theme-header .menu-bar span.menu-subtitle { display: block; text-align: center; font-size: 11px; line-height: 1; } .theme-header .menu-bar .menu ul.sub-menu li:hover > a { color: #ffffff; background: #48688e; } .theme-header .menu-bar .menu > li { display: block; float: left; margin: 0 0; z-index: 9; position: relative; } .theme-header .menu-bar .menu > li:hover { z-index: 15; } .theme-header .menu-bar .menu > li:first-child { margin-left: 0; } .theme-header .menu > li > a { text-align: center; display: inline-block; padding: 15px 15px; margin: 0px 4px; font-weight: 600; position: relative; text-decoration: none; z-index: 3; color: #ffffff; transition: color 0.3s ease-in-out; -webkit-transition: color 0.3s ease-in-out; line-height: 1; background: "transparent"; } .theme-header .menu-bar .menu > li:last-child a { border-right: 1px solid #fff; margin-right: 15px; } .theme-header .menu-bar .menu > li ul.sub-menu { width: 180px; } .theme-header .menu-bar .menu > li ul.sub-menu li a { border-right: 0 none !important; margin-right: 0; } .top-theme-header .menu-bar ul.sub-menu li a:hover { padding: 5px 16px; } .menu-div-type-divider .theme-header .menu > li > a { padding: 15px 30px; } .menu-div-type-divider .theme-header .menu > li.hasDropDown > a { padding-right: 37px; } .menu-div-type-divider .theme-header .menu > li > a span.menu-arrow { right: 17px; } .theme-header .menu > li.hasDropDown > a { padding-right: 22px; } .theme-header .menu > li:after { color: #ffffff; } .theme-header .menu > li > a:before { position: absolute; left: 0; top: 5px; background: transparent; width: 1px; bottom: 5px; content: ' '; display: block; } .theme-header .menu > li:first-child a:before { content: ''; display: none; } /** * Mega Menu Styling */ .theme-header.no-title { margin-bottom: 40px; } .theme-header .menu-bar li div.sub-menu ul.sub-menu { display: block; margin: 0px; padding: 5px 30px; } div.sub-menu { display: none; box-shadow: -10px 18px 30px rgba(0, 0, 0, 0.15); background: #f6f7f7; position: absolute; top: 100%; left: 0%; margin: 0; padding: 0; z-index: 2; line-height: 1.5; } .theme-header .menu-bar div.sub-menu ul.sub-menu li { border-bottom: none; } div.sub-menu > div { width: 25%; float: left; margin: 0; position: relative; border-left: 1px solid rgba(0, 0, 0, 0.1); } div.sub-menu > div:first-child { border-left: none; } div.sub-menu > div.m_full { width: auto; } div.sub-menu > div.m_one_half { width: 50%; } div.sub-menu > div.m_one_third { width: 33.33%; } div.sub-menu > div.m_one_fourth { width: 25%; } div.sub-menu > div.m_one_fifth { width: 20%; } div.sub-menu > div h6 { padding: 20px 0px; line-height: 1.4; margin: 0 30px; color: #000102; text-align: left; border-bottom: 2px solid #F3F3F3; min-height: 62px; font-size: 13px; } div.sub-menu > div h6 a { text-decoration: none; color: inherit; } .theme-header .menu-bar div.sub-menu ul.sub-menu li:last-child a { border-bottom: none; } .theme-header .menu-bar .menu li div.sub-menu ul.sub-menu li { padding: 0; } .theme-header .menu-bar .menu li div.sub-menu ul.sub-menu li a { padding: 15px 0px; margin: 0; } .theme-header .menu-bar .menu li div.sub-menu ul.sub-menu li:hover a { text-decoration: none; } /*========== Ajax Search Element ==========*/ /* Ajax Search Button */ a.ajax-search-trigger { font-size: 14px; display: inline-block; padding: 3px 0px 3px 0px; color: #ffffff; text-decoration: none; position: relative; } a.ajax-search-trigger:hover { color: #1e416a; } a.ajax-search-trigger i { line-height: 1; display: block; transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } a.ajax-search-trigger.active i.trigger-search-icon { opacity: 0.3; } #compact_bar a.ajax-search-trigger { font-size: 14px; display: inline-block; padding: 3px 0px 3px 0px; color: #ffffff; text-decoration: none; position: relative; } #compact_bar a.ajax-search-trigger i { margin-left: 15px; line-height: 1; display: block; transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; } /* Ajax Search Panel */ div.search-sidebar { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: #fff !important; z-index: 20; display: none; opacity: 0.97; z-index: 9999; } div.search-sidebar div.sidebar-wrap { margin: 0 20px; padding: 15px 0; } .search-sidebar-active div.search-sidebar { top: 0; } .admin-bar.search-sidebar-active div.search-sidebar { top: 32px; } .clear-ajax-search { position: absolute; top: 30px; right: 25px; color: #48688e; font-size: 18px; z-index: 10; cursor: pointer; } div.ajax-search { margin: 0 auto; position: relative; z-index: 25; } div.ajax-search-pane { position: relative; line-height: 1; z-index: 12; } div.ajax-search-pane div.form { padding: 50px 20px 10px 5px; position: relative; } div.ajax-search-pane form { margin: 0 auto; } div.ajax-search-pane div.form label { color: #333333; font-size: 28px; margin: 24px 10px 0 0; float: left; } div.ajax-search-pane div.form input[type=text] { width: 100%; border: none; font-size: 25px; padding: 12px 0; border-bottom: 2px solid #e9e9e9; position: relative; z-index: 3; float: left; } div.ajax-search-pane div.form input[type=text]:focus { background: none; } a.ajax-search-close { position: absolute; top: 5px; right: 16px; color: #333333; font-size: 9px; z-index: 3; } span.search-loader { display: none; width: 44px; height: 44px; position: absolute; top: 50%; right: 50%; margin: -22px 0 0 -22px; z-index: 3; } div.ajax-search h4.no-results { display: none; padding: 15px; text-align: center; color: #333333; } .search-sidebar-active .super-wrapper { -webkit-filter: blur(4px); filter: blur(4px); } div.search-results { min-height: 0px; display: none; position: relative; margin-top: -5px; } div.search-results > i { position: absolute; top: -22px; left: 50%; font-size: 32px; color: #ffffff; } div.search-results strong { color: #333333; } div.search-results ul { margin: 0; padding: 0; position: absolute; top: 0px; left: 0px; width: 100%; } div.search-results ul li { list-style: none; margin: 10px 0 10px 0; border-bottom: 1px solid #e9e9e9; padding: 10px 0; position: relative; } div.search-results ul li:last-child { border-bottom: none; } div.search-results ul li.not-found { text-align: center; padding: 10px; margin: 0; color: #333333; } div.search-results ul li div.image { float: left; margin-right: 5px; width: 60px; } div.search-results ul li div.image img { display: block; } div.search-results ul li div.desc.hasImage { width: 225px; float: left; } div.search-results ul li div.desc span.date { font-size: 12px; margin-top: -2px; display: block; color: #333333; } div.search-results ul li div.desc a.more { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; margin-top: 10px; } div.search-results ul li div.desc a.more:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } div.search-results ul li div.desc a.more i { width: auto; } div.search-results ul li div.desc a.more:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } div.search-results ul li div.desc a.more:hover:after { width: 100%; display: none; } div.search-results ul li h5 { margin: 0 50px 5px 0; padding: 0; } div.search-results ul li h5 a { color: #000102; text-decoration: none; } div.search-results ul li h5 a:hover { color: #48688e; } div.search-results ul li a.view-all { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 15px 10px; font-size: 14px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; margin-top: 10px; position: relative; display: block; text-align: center; max-width: 300px; margin: 0 auto; } div.search-results ul li a.view-all:hover { background: #000102; border-color: #000102; color: #ffffff; } div.ajax-search-pane span.tip { color: #ffffff; font-size: 30px; top: -20px; right: 6px; position: absolute; } /*========== Social Icons ==========*/ div.top-area a.social-icons { margin-top: 0px; margin-bottom: 0px; } .top-area-social-list { display: inline-block; vertical-align: middle; } .theme-header .social-set ul li { float: left; border-bottom: none; margin: 0; padding: 0; position: relative; list-style: none; } .theme-header .social-set ul li a { display: inline-block; vertical-align: middle; margin-left: 5px; overflow: hidden; text-decoration: none; background: none; color: #48688e; width: 32px; height: 42px; } .theme-header .social-set ul li:first-child a { margin-left: 0; } .theme-header .social-set ul li span.social-block { font-size: 16px; display: inline-block; transition: none; opacity: 1; color: #a8acad; background: none; width: 32px; } .theme-header .social-set ul li a:hover span.visible-block { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); color: #a8acad; } .theme-header .tooltip { top: 46px !important; } /*========== WPML Stylings ==========*/ a.wpml-lang-selector { position: relative; z-index: 2; text-decoration: none; color: #a8acad; padding: 0px 15px 0px 15px; font-size: 12px; display: block; } a.wpml-lang-selector i { margin: 4px 5px 0 0; } div.wpml-selector { position: relative; margin-top: 16px; } div.wpml-selector ul { padding: 0px; margin: 21px 0px 0px 0px; line-height: 1; } div.wpml-selector ul i { position: absolute; top: -13px; left: 66px; margin: 0; font-size: 18px; color: #f6f7f7; } @-moz-document url-prefix() { div.wpml-selector ul i { top: -14px; } } div.wpml-selector ul li { margin: 0; padding: 0; list-style: none; position: relative; z-index: 1; float: left; } div.wpml-selector ul li a { font-size: 11px; padding: 3px 11px; color: #a9adb0; text-decoration: none; display: block; text-transform: uppercase; letter-spacing: 0px; font-weight: 600; border-left: 1px solid #a9adb0; } div.wpml-selector ul li:first-child a { border: 0 none; } div.wpml-selector ul li.last a { border-bottom: none; } div.wpml-selector ul li a:hover { color: #48688e; } div.wpml-selector ul li.active a { color: #48688e; } /*========== Search Bar ==========*/ .theme-header .search-input { width: 100%; position: relative; display: inline-block; border-bottom: 2px solid #000102; } .theme-header #searchsubmit { display: none; } .theme-header #searchform input[type=text] { padding: 8px 10px; border: none; background: none; float: none; background: none; margin-right: 63px; display: block; width: 140px; color: #333333; font-size: 12px; } .theme-header .proxy-search { position: absolute; text-decoration: none; color: #333333; font-size: 14px; top: 0; right: 1px; padding: 8px; } /*========== AJAX Woo Commerce Cart ==========*/ .ajax-cart { position: relative; vertical-align: top; } .ajax-cart > span { display: inline-block; margin-left: 15px; } a.ajax-cart-trigger { padding: 0 30px 0; margin: 0 0px 0 0; text-decoration: none; display: block; background: #f6f7f7; } a.ajax-cart-trigger i { color: #000102; padding: 12px; float: left; font-size: 16px; position: relative; } div.ajax-cart svg path { fill: #000102; } .center-logo a.ajax-cart-trigger i:after { content: '|'; position: absolute; top: 10px; right: 0; } a.ajax-cart-trigger > span { color: #333; font-size: 11px; font-weight: 700; background: #fff; border-radius: 100%; padding: 3px 6px; line-height: 1; position: absolute; top: 20px; right: 15px; } a.ajax-cart-trigger span small { font-size: 100%; color: #000102; } .ajax-cart .ajax-cart-items { position: absolute; top: 100%; left: 0px; background: #ffffff; width: 320px; display: none; line-height: 1; box-shadow: -3px 18px 30px rgba(0, 0, 0, 0.15); text-align: left; } .ajax-cart .ajax-cart-items ul { margin: 0; padding: 0; background: #ffffff; } .ajax-cart .ajax-cart-items .product_list_widget li.empty { text-align: center; font-size: 12px; padding: 80px 15px; margin: 0; min-height: 0; } .ajax-cart .ajax-cart-items .product_list_widget > li { list-style: none; padding: 15px 0px 15px 95px; min-height: 95px; position: relative; background: none; color: #333333; border-bottom: 1px solid #e9e9e9; } .ajax-cart .ajax-cart-items .product_list_widget .amount { font-size: 11px; color: #333333; } .ajax-cart .ajax-cart-items .product_list_widget del .amount { color: #333333; } .ajax-cart .ajax-cart-items .product_list_widget ul.variation { padding: 0; margin: 10px 0; } .ajax-cart .ajax-cart-items .product_list_widget ul.variation li { padding: 0; margin: 3px 0 3px 0; width: 42%; color: #48688e; text-transform: uppercase; font-size: 10px; letter-spacing: 1px; } .ajax-cart .ajax-cart-items .product_list_widget ul.variation li strong { font-weight: 400; color: #333333; } .ajax-cart .ajax-cart-items .product_list_widget ul.variation li p { padding: 0; margin: 0; } .ajax-cart .ajax-cart-items .product_list_widget a.product-thumb { position: absolute; top: 15px; left: 15px; margin: 0; width: 60px; } .ajax-cart .ajax-cart-items .product_list_widget a.product-thumb img { display: block; width: 100%; min-height: 60px; } .ajax-cart .ajax-cart-items .product_list_widget div.product-metadata { float: left; } .ajax-cart .ajax-cart-items .product_list_widget h6 { margin: 0 0 5px 0; font-size: 12px; } .ajax-cart .ajax-cart-items .product_list_widget h6 a { line-height: 1; display: block; margin-bottom: 0px; color: #333333; text-decoration: none; } .ajax-cart .ajax-cart-items .product_list_widget div.extra-product-data span { display: block; font-size: 12px; margin-top: 2px; color: #48688e; float: left; } .ajax-cart .ajax-cart-items .product_list_widget div.extra-product-data a.remove { margin: 5px 5px 0px 0px; text-decoration: none; font-size: 12px; color: #333333; display: block; float: left; } .right-area .ajax-cart .ajax-cart-items, div.centered-theme-header .ajax-cart .ajax-cart-items { left: auto; right: 0px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.total strong { color: #333333; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.total { margin-top: 10px; padding: 15px 15px; margin-bottom: 0; display: block; text-align: center; border: none; color: #333333; font-size: 12px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.total span.amount { color: #333333; font-size: 18px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content p.buttons { margin: 10px; clear: both; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button { display: block; padding: 12px 2px; text-decoration: none; text-align: center; float: left; font-size: 12px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button.checkout.wc-forward { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; float: left; margin: 2px 0 0 20px; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button.checkout.wc-forward:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button.checkout.wc-forward i { width: auto; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button.checkout.wc-forward:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.button.checkout.wc-forward:hover:after { width: 100%; display: none; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.view-cart { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 16px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; float: left; width: 45%; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content a.view-cart:hover { background: #000102; border-color: #000102; color: #ffffff; } .ajax-cart .ajax-cart-items .widget_shopping_cart_content span.amount { font-size: 12px; color: #333333; } .ajax-cart .ajax-cart-items .product_list_widget div.extra-product-data span.quantity { color: #333333; margin-top: 4px; display: block; margin-right: 5px; } /*----- End of Head Major Elements ------*/ /*=================================== = Compact Bar = ===================================*/ .admin-bar div.compact-bar { top: 32px; } div.compact-bar { padding: 0; visibility: visible; position: fixed; top: -90px; left: 0; width: 100%; z-index: 9999; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1); transition: top 0.3s ease-in-out; } .layout-boxed div.compact-bar { width: auto; left: 0; right: 0; } /*----- End of Compact Bar ------*/ /*======================================== = Sidebar Stylings = ========================================*/ .sidebar-head-bg.force-transparent-bg { background: transparent !important; } .sidebar-head-bg { background: #48688e; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 1; transition: background 0.3s; -webkit-transition: background 0.3s; } .sidebar-head-bg .theme-header { position: relative; z-index: 2; } .head-sidebar-align-right.head-layout-type-vertical .sidebar-head-wrap { width: 250px; position: fixed; top: 0; right: 0; height: 100%; z-index: 20; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .head-sidebar-align-right.head-layout-type-vertical div.inner-super-wrapper { margin-right: 250px; } .head-sidebar-align-left.head-layout-type-vertical .sidebar-head-wrap { width: 250px; position: fixed; top: 0; left: 0; height: 100%; z-index: 20; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; } .head-sidebar-align-left.head-layout-type-vertical div.inner-super-wrapper { margin-left: 250px; } .head-sidebar-overlap-yes.head-sidebar-align-left.head-layout-type-vertical div.inner-super-wrapper { margin-left: 0px; } .head-sidebar-overlap-yes.head-sidebar-align-right.head-layout-type-vertical div.inner-super-wrapper { margin-right: 0px; } .head-layout-type-vertical .h-widget:first-child { margin-top: 0; } .head-layout-type-vertical .h-widget { margin: 40px 40px 0px 40px; } .head-layout-type-vertical .menu-wrapper.h-widget { margin-left: 0; margin-right: 0; } .head-layout-type-vertical #logo img { display: block; margin: 0 auto; } .head-layout-type-vertical .theme-header .menu-bar .menu > li { float: none; position: relative; margin: 0 0 0 22px; font-weight: 600; font-size: 13px; } #head-sidebar .menu-bar .menu > li > a { padding: 12px 50px 5px 50px; display: block; border-radius: 0; border-left: none; border-right: none; } .head-layout-type-vertical .theme-header .menu-bar .menu > li:last-child { border-right: 2px solid white; margin-right: 15px; } .side-theme-header .menu-bar ul.sub-menu li a { color: #48688e; background: #f6f7f7; } .side-theme-header .menu-bar ul.sub-menu li a:hover { background: #48688e; color: #48688e; } .side-theme-header .menu-bar li ul.sub-menu { margin: 0; padding: 0 50px; } .side-theme-header .menu-bar li ul.sub-menu ul.sub-menu { padding: 0; } .side-theme-header .menu-bar ul.sub-menu li { margin: 0; display: block; position: relative; padding-left: 10px; } .side-theme-header .menu-bar ul.sub-menu li a { text-decoration: none; padding: 5px 0px; display: block; margin: 0px; text-align: left; } .has-bg-sub .menu-bar li.rel ul.sub-menu { display: none; } .text-align-center { text-align: center; } .text-align-left { text-align: left; } .text-align-right { text-align: right; } .text-align-left .menu-bar .menu > li > a { text-align: left; } .ipad-menu { background: inherit; position: absolute; top: 20px; left: -50px; width: 50px; height: 50px; color: #66a7cf; text-decoration: none; font-size: 18px; display: none; } .head-sidebar-align-left .ipad-menu { right: -50px; left: auto; } a.ipad-menu i { position: absolute; top: 16px; left: 16px; transition: all 0.3s ease-in-out 0.1s; } a.ipad-menu .default-icon { z-index: 2; } a.ipad-menu .close-icon { opacity: 0; transform: rotateX(-90deg); z-index: 4; } .showIpadMenu a.ipad-menu .default-icon { opacity: 0; transform: rotate(90deg); } .showIpadMenu a.ipad-menu .close-icon { opacity: 1; transform: rotate(0deg); } .home .entry-title { display: none; } /*----- End of Sidebar Stylings ------*/ /*----- End of Bottom Bar ------*/ .theme-header a[title=buy] { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 6px 15px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } .theme-header a[title=buy]:hover { background: #000102; border-color: #000102; color: #ffffff; } .theme-header .no-ar-show:after { content: "" !important; display: none; } .sidebar-head-wrap .theme-header a[title=buy] { border: none; } #compact_bar .theme-header .menu > li > a { margin: 0 0 0 8px; padding: 4px 15px !important; font-weight: 600; } #compact_bar .theme-header .menu > li.hasDropDown > a { padding-right: 16px; } /* ## DOCUMENT INFORMATION - Document: Page Structure Stylings - Version: 0.1 - Author: Hein Maas - Notes : */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. General Styling 2. Custom Scrollbar 3. Splash Screen Stylings 4. Featured Media Stylings 5. Page Title Stylings 6. Title Intro Animations 7. Title Alignment Stylings 8. Layout Related Stylings 9. Breadcrumbs Stylings 10 . 404 Styling 11. Sitemap Stylings 12. Contact Form 7 Stylings 13. Pagination Stylings 14. Filter Stylings ----- End of Table of Contents ---------- */ /*======================================= = General Styling = =======================================*/ body { background: #ffffff; overflow-x: hidden; } .super-wrapper { -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; position: relative; z-index: 2; } .inner-super-wrapper { background: #ffffff; position: relative; z-index: 7; } .super-overlay-block { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 1; } /* Side Layout */ .layout-side div.inner-super-wrapper { margin-left: 280px; } /*----- End of General Styling ------*/ /*======================================== = Custom Scrollbar = ========================================*/ div.nicescroll-rails { z-index: 10; cursor: pointer; } /*----- End of Custom Scrollbar ------*/ /*============================================== = Splash Screen Stylings = ==============================================*/ /*----- End of Splash Screen Stylings ------*/ /*================================================ = Featured Media Stylings = ================================================*/ .mutual-content-wrap > img { margin: 30px auto; display: block; max-width: 100%; } div.page-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; } div.page-wrapper img { max-width: 100%; margin: 0 auto; height: auto; } div.page-wrapper div.googlemap-inner-wrap img { max-width: none; } div.single-image img { display: block; } .no-post-thumb { display: none; } .featured-wrap { position: relative; z-index: 2; } .featured-wrap.no-post-thumb { margin-bottom: 0; } .gm-style-iw { color: #333; } div.full-single-image { height: 500px; width: 100%; display: block; background: top left no-repeat fixed; background-size: cover; } /*----- End of Featured Media Stylings ------*/ /*================================================ = Inner Page Stylings = ================================================*/ .feature_img_bg { height: 280px; background-position: center center; background-repeat: no-repeat; background-size: cover; } /*================================================ = End of Inner Page Stylings = ================================================*/ div.vertical-align { display: table; width: 100%; height: 100%; background: linear-gradient(to bottom, transparent 5%, rgba(0, 0, 0, 0.85) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); } div.vertical-align > div { display: table-cell; vertical-align: middle; text-align: center; } div.full-single-image h1 { font-size: 56px; font-weight: 400; max-width: 60%; margin: 0 auto; color: #fff; } div.full-single-image div.inner-meta-info { font-size: 12px; max-width: 60%; margin: 0 auto; } div.full-single-image div.inner-meta-info a { text-decoration: none; } /*=========================================== = Page Title Stylings = ===========================================*/ /* Faux Wrapper for Top Area */ div.supper-top-wrap { position: static; z-index: 80; } /*========== Title Area Stylings ==========*/ div.title-wrap { padding: 15px 0 15px 0; position: relative; z-index: 2; background: #000102; background-size: cover; } div.title-wrap h1 { font-size: 24px; color: #ffffff; padding: 0px; margin: 0; display: block; line-height: 1.2; text-transform: uppercase; letter-spacing: 2px; font-weight: 400; } div.title-wrap.has-breadcrumbs h1 { width: 60%; } div.title-wrap i { margin-right: 8px; } div.title-block i.icon { margin-right: 20px; } /*========== Title Intro Animations ==========*/ /* Title Height Animation */ #title-overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.75); } .title-align-right div.title-wrap { text-align: right; } .title-align-right div.title-wrap i { float: right; margin-right: 0; margin-left: 20px; } .title-align-center div.title-wrap { text-align: center; } .title-align-center div.title-wrap.has-breadcrumbs h1 { width: auto; text-align: center; } .title-align-center #breadcrumbs { position: relative; display: block; text-align: center; margin-top: 4px; } /*========== Fluid Title ==========*/ .title-style-fluid .title-wrap .skeleton { width: 95%; } .title-align-center .subtitle { margin-left: auto; margin-right: auto; } div.supper-title-wrapper { -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .ioa-title-slide div.supper-title-wrapper { overflow: hidden; height: 0; } .ioa-window-ready div.supper-title-wrapper { transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /*----- End of Page Title Stylings ------*/ /*=============================================== = Layout Related Stylings = ===============================================*/ .mutual-content-wrap { margin-bottom: 0px; margin-top: 0px; } .mutual-content-wrap p:first-child { padding-top: 0; } .mutual-content-wrap p { padding: 10px 0px 10px 0; margin: 0; } /*=============================================== = Homepage Slider Stylings = ===============================================*/ .revolution-slider .title_bg { width: 310px; height: 110px; background: rgba(255, 255, 255, 0.6); padding: 20px 50px 20px 50px; } .revolution-slider .title_bg p { color: #a3a3a3; font-size: 16px; font-weight: 700; letter-spacing: 0px; text-transform: uppercase; line-height: 1.6; } .revolution-slider .title_bg p span.first_p { color: #48688e; font-size: 29px; letter-spacing: 2px; font-weight: 700; margin-left: 10px; } .revolution-slider .title_bg p span { color: #48688e; font-size: 29px; letter-spacing: 2px; font-weight: 700; } /*=============================================== = End of Slider Stylings = ===============================================*/ /*========== Page Structure Stylings ==========*/ div.page-wrapper { position: relative; z-index: 5; } .page-content img { max-width: 100%; height: auto; } .page-content { padding-bottom: 30px; padding-top: 10px; } div.single-post-content .page-content { padding: 0 0 0 50px; width: 50%; float: right; } div.single-title-info { float: left; width: 50%; } .page-content p:first-child { margin-top: 0; } .page-content p:last-child { margin-bottom: 0; } /* Archives etc Misc Pages top margin */ /*----- End of Layout Related Stylings ------*/ /*========== Password Protected Stylings ==========*/ form.post-password-form { padding: 30px; background: rgba(0, 0, 0, 0.5); border-radius: 2px; margin: auto; text-align: center; color: #fff; } form.post-password-form input { display: inline-block; margin-right: 15px; } form.post-password-form input[type=password] { padding: 12px 10px; width: 300px; border-radius: 0px; background: rgba(255, 255, 255, 0.6); border: none; } form.post-password-form input[type=submit] { display: inline-block; padding: 15px 32px; font-size: 11px; text-transform: uppercase; margin-left: 15px; background: #000; color: #fff; border: none; } form.post-password-form input[type=submit]:hover { background: #000102; border-color: #000102; color: #ffffff; } div.vam-cell form.post-password-form input[type=submit] { border: none; color: #fff; margin: 0; } /*============================================ = Breadcrumbs Stylings = ============================================*/ /*========== WRT Centered Align Title ==========*/ #breadcrumbs.break-crumbs { margin-top: 3px; } #breadcrumbs { position: absolute; top: 50%; right: 0; z-index: 3; border-radius: 0px; padding: 0; display: block; background: inherit; padding: 2px 4px; color: #ffffff; margin-top: -10px; font-size: 11px; -webkit-font-smoothing: subpixel-antialiased; } #breadcrumbs a { font-size: 11px; text-decoration: none; color: #ffffff; display: inline-block; } #breadcrumbs span.current { font-size: 11px; color: #ffffff; } #breadcrumbs span { margin: 0 2px; } /*========== WRT Right Align Title ==========*/ /*----- End of Breadcrumbs Stylings ------*/ /*=================================== = 404 Styling = ===================================*/ .not-found-teaser { text-align: center; margin-top: 50px; } .not-found-teaser h4 { font-size: 160px; color: #48688e; } .not-found-teaser h4 span { opacity: 0; display: inline-block; } div.not-found-image { display: block; position: relative; } div.not-found-image img { display: block; margin: 90px auto 5px auto; max-width: 100%; } div.not-found-image canvas#icon404 { position: absolute; top: -60px; left: 35%; z-index: 10; } div.not-found-image canvas#icon404-subset { position: absolute; top: -60px; left: 64%; z-index: 10; } .mutual-content-wrap div.not-found-text { max-width: 70%; margin: 5px auto; display: block; text-align: center; } div.error-search { width: 70%; margin: 25px auto 50px auto; } div.error-search input[type=text] { padding: 11px; color: #333333; border-radius: 0px; width: 100%; } /*----- End of 404 Styling ------*/ /*======================================== = Sitemap Stylings = ========================================*/ div.sitemap { padding: 50px 0 30px 0; } div.sitemap h2 { padding: 0 0 20px 0; margin: 0px 0px 20px 0px; font-size: 17px; border-bottom: 1px solid #000102; } div.sitemap ul { margin: 0px; padding: 0; } div.sitemap ul ul { border-left: 2px solid #48688e; padding-left: 25px; } div.sitemap ul li { list-style: none; padding: 6px 0; margin: 0; display: block; border-bottom: 1px solid #000102; } div.sitemap ul li a { color: #333333; display: block; text-decoration: none; } div.sitemap h5 { margin: 0; padding: 0; font-size: 13px; color: #333333; } div.sitemap ul.subcats { margin-left: 20px; } div.sitemap ul.subcats li:last-child { border-bottom: none; } div.sitemap ul.children { margin: 20px 0px 20px 20px; } div.sitemap ul.children li:last-child { border-bottom: none; } /*----- End of Sitemap Stylings ------*/ /*=============================================== = Contact Form 7 Stylings = ===============================================*/ form.wpcf7-form input[type=text] { width: 100%; } form.wpcf7-form p { margin-bottom: 0; width: 100%; clear: both; } form.wpcf7-form p:last-child { margin-bottom: 0; padding-bottom: 0; } form.wpcf7-form p span { display: block; margin-top: 4px; } form.wpcf7-form .wpcf7-text, div.wpcf7 div.text-three-cols input[type=text], form.wpcf7-form .wpcf7-select, form.wpcf7-form .wpcf7-password { display: block; margin: 0; } form.wpcf7-form .wpcf7-select { width: 90%; } form.wpcf7-form .wpcf7-textarea { overflow: auto; display: block; } form.wpcf7-form .wpcf7-submit { margin-top: 10px; } form.wpcf7-form .wpcf7-captchar { padding: 14px; width: 100px; border: none; display: block; margin: 0; box-shadow: none; } form.wpcf7-form .wpcf7-captchac { margin: 7px 10px 0px 0px; float: left; } div.wpcf7-response-output { padding: 15px !important; background: #398f14; margin: 0 !important; text-align: center; color: #ffffff; } div.wpcf7-validation-errors.wpcf7-response-output { background: #ff0000 !important; border-color: #ff0000 !important; } span.wpcf7-not-valid-tip { left: auto !important; width: auto !important; right: 0 !important; background: #ff0000 !important; color: #ffffff; font-size: 11px !important; top: 29px !important; padding-left: 10px; } div.wpcf7 img.ajax-loader { display: none; } form.wpcf7-form p.input-half, form.wpcf7-form p.input-half-last { width: 48%; padding: 0; margin: 0 0 20px 0; float: left; } form.wpcf7-form p.input-half-last { margin-left: 4%; clear: right; } /*----- End of Contact Form 7 Stylings ------*/ /*========== Search Page Search ==========*/ .search-page-search { position: relative; padding-bottom: 40px; margin-top: 40px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 40px; } .search-page-search label { display: none; } .search-page-search input[type=submit] { position: absolute; top: 0; right: 0; } .search-page-search input[type=text] { width: 85%; display: block; } /*=========================================== = Pagination Stylings = ===========================================*/ .blog-template .pagination { margin-bottom: 50px; } .pagination { padding: 0; } .pagination_wrap { padding: 50px 0; } div.misc-pagination-wrap { padding-bottom: 40px; } .pagination ul { margin: 0; padding: 0; display: block; text-align: center; } .pagination ul li, .page-numbers { list-style: none; padding: 0; margin: 0px 7px 0px 0px; display: inline-block; } .pagination ul li a, .pagination_wrap a.page-numbers { background: url(sprites/i/pagination-default.png) repeat-x; border-radius: 3px; padding: 5px 9px; display: block; color: #717171; text-decoration: none; font-size: 12px; font-weight: 600; border: 1px solid #bebebe; } .pagination ul li a:hover, .pagination_wrap a.page-numbers:hover { color: #ffffff; background: #48688e; border: 1px solid #bebebe; } .pagination ul li span.current, .pagination_wrap span.page-numbers { background: #676767; border-radius: 3px; padding: 5px 9px; display: block; color: #fff; text-decoration: none; font-size: 12px; font-weight: 600; border: 1px solid #565656; } .pagination ul li span.gap { color: #333333; font-size: 12px; display: block; padding: 12px 12px; } /*======================================= = Filter Stylings = =======================================*/ div.top-portfolio-nav { margin-bottom: 10px; } .ioa-menu { margin-top: 0px; margin-bottom: 30px; position: relative; float: left; z-index: 10; text-align: center; } .ioa-menu > span { float: left; margin: 5px 10px 0 0; } .ioa-menu ul { margin: 0; padding: 0; float: left; display: block; } .ioa-menu ul li { list-style: none; margin: 0 4px 0 0; padding: 0 0 0; float: left; cursor: pointer; overflow: hidden; position: relative; border-radius: 0px; } .ioa-menu ul li span.filter-text { position: relative; display: block; padding: 5px 10px; color: #333333; font-size: 10px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 2px; -webkit-font-smoothing: subpixel-antialiased; font-weight: 400; } .ioa-menu ul li.active span.filter-text { color: #000102; background: #ffffff; border-radius: 0px; } .ioa-menu ul li:hover span.filter-text { color: #000102; background: #ffffff; } .full_width .ioa-menu { padding: 30px 0 0px; float: none; text-align: center; } .full_width .ioa-menu ul { float: none; display: inline-block; } .full_width div.top-portfolio-nav { margin-bottom: 0; } /*----- End of Filter Stylings ------*/ /*========================================== = Under Construction = ==========================================*/ div.uc-logo { text-align: center; padding: 10px; } div.main-uc-area { background-color: #ffffff; padding: 30px 0; } div.main-uc-area h1.title { font-size: 32px; color: #333333; max-width: 100%; margin: 0 0 15px 0; text-align: center; } div.uc-text { font-size: 13px; text-align: center; max-width: 60%; margin: 20px auto 30px auto; color: #333333; line-height: 1.7; } div.uc-content-area { padding: 50px; text-align: center; background: #ffffff; opacity: 0.94; } div.uc-content-area .progress-horizontal div.progress-bar span { opacity: 1; } /*----- End of Under Construction ------*/ div.single-image { margin-top: 20px; } div.full-single-image .skeleton { height: 100%; } div.full-single-image .vam { height: 100%; width: 100%; display: table; } div.full-single-image .vam-cell { display: table-cell; vertical-align: middle; } div.full-single-image .vam-cell label { display: inline-block; } div.full-single-image .vam-cell label input { margin-left: 15px; } /*........Inner Page Rev Slider CSS Starts.......................*/ .page-wrapper #rev_slider_2_1_wrapper .tp-bullets { display: none; } .page-wrapper #rev_slider_2_1_wrapper .tp-rightarrow.default, .tp-leftarrow.default { color: #333333; } .page-wrapper #rev_slider_2_1_wrapper ul.tp-revslider-mainul li div.tp-caption { width: 30%; font-size: 40px; font-weight: 300; line-height: 30px; color: #333333; } /*........Inner Page Slider CSS Ends.......................*/ /*........ Homepage slider css starts................*/ .homepage_text_scroller-inner-wrap ul.swiper-wrapper li.swiper-slide div.image { width: 100%; } .homepage_text_scroller-inner-wrap ul.swiper-wrapper li.swiper-slide h3 { font-size: 20px; font-weight: 300; padding: 18px 0 0 0; text-align: left; } .homepage_text_scroller-inner-wrap ul.swiper-wrapper li.swiper-slide div.text { font-size: 13px; margin-bottom: 0px; font-weight: 400; padding-right: 30px; width: 84%; } .homepage_text_scroller-inner-wrap ul.swiper-wrapper li.swiper-slide a { color: #48688e; } .homepage_text_scroller-inner-wrap a.m-prev { position: absolute; left: -100px; } .homepage_text_scroller-inner-wrap a.m-next { position: absolute; right: -100px; } .swiper-wrapper { margin: 0; padding: 0; } /*........ Homepage slider css starts................*/ /* * CSS Animations * Don't forget to add vendor prefixes! */ .super-wrapper .inner-super-wrapper { animation-duration: 1s; transition-timing-function: ease-in; animation-fill-mode: both; -webkit-animation-duration: 1s; -webkit-transition-timing-function: ease-in; -webkit-animation-fill-mode: both; } .super-wrapper .inner-super-wrapper { animation-name: fadeIn; -webkit-animation-name: fadeIn; } .super-wrapper.is-exiting .inner-super-wrapper { animation-name: fadeOut; -webkit-animation-name: fadeOut; } /* * Keyframes */ div.super-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; display: none; } .quote-loader { position: absolute; top: 50%; text-align: center; width: 100%; height: 100%; left: 0; margin-top: 30px; font-size: 14px; } #bg-audio { opacity: 0; position: fixed; bottom: 0; left: 0; z-index: 900; } #bg-audio .mejs-container { width: 118px !important; height: auto !important; } #bg-audio .mejs-container.mejs-ios { width: 28px !important; } #bg-audio div.mejs-playlist { display: none; } /* ## DOCUMENT INFORMATION - Document: Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : none */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Animation 2. Common Hover Stylings 3. Media Intro Animation 4. General Stylings 5. Slider in RAD Widgets 6. Text Column Stylings 7. HTML Column Stylings 8. Post List Stylings 9. Post Column Stylings 10. Intro title 11. Divider 12. Image Widget 13. Thumbnails Widget 14. CTA 15. Tabs 16. Accordion 17. Sidebar Widget 18. Testimonial Slider 19. Single Testimonial 20. Video 21. Progress Bar 23. Button 24. Social Icons 25. Flickr 26. Person Widget 27. Toggles 28. Google MAP 29. Logo Widget 30. Counter Widget 31. Easy List 32. Tweets 33. Notification 34. Pricing Tables 35. Project Gallery 36. Masonry Widget 40. Banners 42. Menu 32. Mail Chimp ----- End of Table of Contents ---------- */ /*============================================= = Common Hover Stylings = =============================================*/ .inactive-animation { visibility: hidden; } /*========== Grid Hovers ==========*/ .ioa-grid-hover-default div.image { position: relative; margin:0 auto; overflow: hidden; } .ioa-grid-hover-default div.image img { display: block; transition: all 0.4s ease;ul.thumb-list-2.thumb-list li .image -webkit-transition: all 0.4s ease; } .ioa-grid-hover-default div.image img:hover { opacity: 0.3; } ul.thumb-list li .image:hover { background: rgba(72, 104, 142, 0.6); } .ioa-grid-hover-default .hover-grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 5; transition: background 0.2s ease; -webkit-transition: background 0.2s ease; } div.image-wrap { position: relative; } div.hover-set-area-wrap { display: table; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } div.hover-set-area { display: table-cell; width: 100%; height: 100%; vertical-align: middle; text-align: center; } div.hover-link-set { display: table-cell; width: 100%; text-align: center; vertical-align: middle; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); } div.hover-link-set a { padding: 18px 25px; font-size: 15px; text-decoration: none; display: inline-block; color: #000; background: #fff; margin: 0 5px; border: none; -webkit-font-smoothing: subpixel-antialiased; } div.hoverdir-wrap { overflow: hidden; position: absolute; top: 25px; left: 25px; bottom: 25px; right: 25px; } div.hoverdir-wrap .hoverdir { height: 100%; display: block; position: absolute; width: 100%; z-index: 1; top: 0; left: -100%; } /*==================================== = CSS3 Filters = ====================================*/ .image img { transition: all 0.3s; -webkit-filter: none; } /*----- End of CSS3 Filters ------*/ /*======================================== = General Stylings = ========================================*/ .section-secondary-color { background: #000102; } .section-tertiary-color { background: #f0f0f0; } .section-primary-color { background: #48688e; } /*========== Loading Icon ==========*/ .ioa-loader { position: absolute; top: 50%; left: 50%; margin: -22px 0 0 -22px; opacity: 1; z-index: 99; display: block; width: 44px; height: 44px; } .ioa-loader svg { stroke: #48688e; display: block; width: 44px; height: 44px; display: block; overflow: visible; } .sticky-icon { position: absolute; background: #48688e; color: #ffffff; padding: 13px 14px; top: 10px; left: -10px; z-index: 10; border-radius: 0px; } /*========== Load More AJAX Stylings ==========*/ div.ajax-button-wrap { text-align: center; margin-bottom: 25px; margin-top: 25px; } .page-wrapper a.ajax-load-more-button, .page-wrapper a.ajax-list-load-more-button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 18px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; display: inline-block; } /*========== Swiper ==========*/ .swiper-container.has-coverflow { padding: 20px 0; } .swiper-slide { position: relative; float: left; overflow: hidden; max-width: 100%; } .swiper-slide img { display: block; width: 100%; max-width: 100%; height: auto; } .swiper-container { overflow: hidden; visibility: hidden; opacity: 0; } .swiper-slide .image { position: relative; } .height-sensitive-swiper .swiper-slide img { width: auto; height: auto; max-width: 99%; } .swiper-pagination { width: 100%; left: 0; bottom: -30px; } div.gallery-thumbs { margin-top: 10px; } div.gallery-thumbs div.gallery-item { transition: opacity 0.3s; -webkit-transition: opacity 0.3s; cursor: pointer; } div.gallery-thumbs div.gallery-item.swiper-slide { opacity: 0.4; } div.gallery-thumbs div.gallery-item.swiper-slide.swiper-slide-active { opacity: 1; } .zoom-label { color: #ffffff; background: rgba(0, 0, 0, 0.5); padding: 5px 15px; font-size: 11px; z-index: 10; position: absolute; bottom: 10px; right: 15px; border-radius: 0px; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; -webkit-font-smoothing: subpixel-antialiased; } .zoom-icon { display: none; padding: 14px 4px; } .is-zooming .zoom-icon { display: block; } .is-zooming small { display: none; } div.zoomable img.zoomImg { max-width: none; height: auto; width: auto; } .thumbnails a { float: left; margin: 7px 5px 7px 7px; } .thumbnails a img { display: block; border-radius: 0px; } div.gallery-caption { position: absolute; max-width: 50%; bottom: 50px; left: 50px; z-index: 10; background: #000102; padding: 30px; } div.gallery-caption h2 { color: #ffffff; } div.gallery-caption p.caption { color: #ffffff; padding: 0; } div.gallery-caption a.readmore { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; color: #787b7d; margin: 0; } div.gallery-caption a.readmore:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } div.gallery-caption a.readmore i { width: auto; } div.gallery-caption a.readmore:after { background: #ffffff; } div.gallery-caption a.readmore:hover { color: #48688e; letter-spacing: 0px; text-transform: none; color: #ffffff; } div.gallery-caption a.readmore:hover:after { width: 100%; display: none; } /*========== Builder Related Structural Stylings ==========*/ .has-sidebar .skeleton { width: auto; } /*========== BG and Border Models for RAD Containers ==========*/ div.rad-holder { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .senseBottomBorderModel { padding-bottom: 30px; } .senseTopBorderModel { padding-top: 30px; } .page-rad-component { padding-bottom: 30px; } /*========== Row Background Video Settings ==========*/ .video-bg { opacity: 0; } .video-bg video, .quant_video-bg video, .quant_video-bg object { width: 100%; position: absolute; top: 0%; left: 0; right: 0; z-index: 10; } .quartz div.slider-item img.fallback { display: none; } .video-bg video img { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 9; } .video-bg img.ie-fallback { width: 100%; height: auto; position: absolute; top: 0; left: 0; z-index: 2; display: none; } .video-bg.fixed-video video { position: fixed; top: 0; } .video-bg, .quant_video-bg { overflow: hidden; position: absolute; top: 0; left: 0; bottom: 0; z-index: 1; opacity: 1; } .video-bg img.video-fallback { display: none; width: auto; height: 100%; position: absolute; top: 0; left: 0; z-index: 9; max-width: none; min-height: 100%; } /*========== RAD Row ==========*/ div.is-parallex-bg { opacity: 0; transition: opacity 0.4s; -webkit-transition: opacity 0.4s; } div.is-parallex-bg.is-visible { opacity: 1; } div.section-inner-wrap { height: 100%; } div.page-section { padding: 0; position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); } div.page-section.full_width_row { padding: 0; } div.page-section.has-one-page-menu { z-index: 9999; } .head-layout-type-vertical div.section-inner-wrap { overflow: hidden; } div.section-content { position: relative; z-index: 3; height: 100%; } div.section-vertical-span { display: table; height: 100%; width: 100%; } div.inner-section-vertical-span { display: table-cell; vertical-align: middle; } .section-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0); } div.section-bg-google-map { width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; } div.section-bg-google-map div.google_map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } div.section-bg-parallax { width: 100%; height: 100%; overflow: hidden; z-index: 3; position: absolute; top: 0; left: 0; } div.section-bg-parallax div.base-layer { position: absolute; top: 0; left: -100px; right: -100px; height: 100%; } div.section-bg-parallax div.layer { position: absolute; top: 0; left: -100px; right: -100px; height: 100%; } div.section-bg-parallax div.prop { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: -4%; left: -4%; right: -4%; bottom: -4%; opacity: 0; } div.section-bg-parallax div.prop.is-visible, div.section-bg-parallax div.base-layer .prop.is-visible { opacity: 1; } div.section-bg-parallax div.base-layer .prop { height: auto; width: 110%; left: -5%; top: -5%; bottom: -5%; background-size: cover; opacity: 0; } /*========== RAD Columns ==========*/ .container-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; } .sticky-wrapper { -webkit-backface-visibility: hidden; backface-visibility: hidden; } div.rad-container { position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0); } div.rad-container div.rad-inner-container { position: relative; z-index: 5; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; } div.page-section div.full_width div.rad-container { margin-top: 0; margin-bottom: 0; } div.page-section div.full_width div.rad-container.senseBGModel div.rad-inner-container { padding: 0; } div.rad-container.last { margin-right: 0; clear: right; } div.rad-container.senseBGModel div.rad-inner-container { padding: 30px; } div.rad-container.full { margin-right: 0; } /* Container Alignment */ div.rad-container.auto_align { float: none; margin-left: auto !important; margin-right: auto; } div.rad-container.right { float: right; } /*========== Cell Blocks Layout for Columns ==========*/ .blocked-layout .rad-container { position: relative; } .blocked-layout div.rad-widget { margin-bottom: 0; } .blocked-layout .rad-container.top .rad-inner-container { margin-top: 0; } .blocked-layout .rad-container .rad-inner-container { margin-top: 10px; } .blocked-layout div.rad-container .rad-inner-container.first { padding-left: 0; } .blocked-layout div.rad-container .rad-inner-container.last { padding-right: 0; } .blocked-layout div.rad-container span.hline { border-right: 1px solid rgba(0, 0, 0, 0.1); width: 0px; display: block; top: 0px; height: 0%; top: 0%; right: 0px; position: absolute; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 20; } .blocked-layout div.rad-container span.vline { border-bottom: 1px solid rgba(0, 0, 0, 0.1); height: 0px; display: block; top: 0px; left: 50%; width: 0%; position: absolute; -webkit-transition: all 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); transition: all 1.2s cubic-bezier(0.215, 0.61, 0.355, 1); } .blocked-layout.start-block-animation div.rad-container span.hline { top: 0; height: 100%; } .blocked-layout.start-block-animation div.rad-container span.vline { left: 0; width: 100%; } /*========== RAD Widget ==========*/ div.rad-widget { margin-top: 30px; position: relative; } div.rad-widget.top { margin-top: 0px; } .nested div.rad-widget.w_layout_element { margin-top: 20px; margin-bottom: 0; } .nested div.rad-widget.w_layout_element.top { margin-top: 0px; margin-bottom: 0; } .full_width .nested div.rad-widget.w_layout_element.w_full:first-child, .full_width div.rad-widget.nested div.rad-widget.w_col.w_full:first-child { margin-top: 0; } /*========== Icons Stylings ==========*/ i.shortcode-icon { margin: 1px; display: inline-block; } /*----- End of General Stylings ------*/ /*========== Media Loader ==========*/ /*============================================ = Text Column Stylings = ============================================*/ /*========== Default Icon Stylings for Text Columns ==========*/ .ioa-icon-area i { border-color: transparent; font-size: 24px; z-index: 3; position: relative; } .ioa-icon-area { position: relative; display: inline-block; } /* == Border Style == */ i.border-style, i.border-style-circ { padding: 15px; border: 2px solid #e9e9e9; } i.background-style, i.background-style-circ { background: #48688e; color: #ffffff; padding: 15px; } i.border-style-circ, i.background-style-circ { border-radius: 100%; } /* Icon Style when no icon style is set */ .ioa-text-column.none .ioa-icon-area { position: relative; } .ioa-text-column.none.col-align-left .ioa-icon-area { float: left; margin-right: 15px; margin-bottom: 10px; } .ioa-text-column.none.col-align-right .ioa-icon-area { float: right; margin-left: 15px; margin-bottom: 10px; } .ioa-text-column.none.icon-style-default .ioa-icon-area { padding-top: 8px; } .ioa-text-column.none.col-align-center .ioa-icon-area { text-align: center; margin-bottom: 15px; } .ioa-text-column.none.col-align-center .ioa-icon-area i { display: inline-block; } /*========== Default Stylings for columns ==========*/ .ioa-text-column { position: relative; min-height: 60px; padding-right: 50px; } .ioa-text-column.none { min-height: 0; } .ioa-text-column h3 { margin: 0px 0 15px 0; padding: 0; color: #333333; font-size: 24px; font-weight: 300; } .ioa-text-column h5 { margin: 0px 0 15px 0; padding: 0; color: #a9adb0; } .ioa-text-column div.ioa-text { margin-top: 0px; clear: both; margin-bottom: 0px; } .ioa-text-column p { margin: 0 0 15px 0; padding: 0; } .ioa-text-column p:first-child { margin-top: 0; padding-top: 0; } .ioa-text-column p:last-child { margin-bottom: 0; padding-bottom: 0; } .ioa-text-column div.ioa-text p { color: inherit; } /*========== More Button Stylings ==========*/ .ioa-text-column .ioa-more-button { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; font-size: 12px; margin-left: 5px; text-decoration: underline; } .ioa-text-column .ioa-more-button:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } .ioa-text-column .ioa-more-button i { width: auto; } .ioa-text-column .ioa-more-button:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } .ioa-text-column .ioa-more-button:hover:after { width: 100%; display: none; } .ioa-text-column .ioa-more-button i { width: auto; } .ioa-text { margin-bottom: 10px; } .button-align-center { text-align: center; } .button-align-right { text-align: right; } /*========== Right / Left Icon Column Calculation based on Columns ==========*/ .ioa-text-column.left-icon .ioa-icon-area { position: absolute; top: 0; left: 0; } .ioa-text-column.right-icon .ioa-icon-area { position: absolute; top: 0; right: 0; } .ioa-text-column.left-icon div.ioa-text-area { margin-left: 80px; } .ioa-text-column.right-icon div.ioa-text-area { margin-right: 80px; text-align: right; } .ioa-text-column.left-icon.icon-style-default .ioa-icon-area i, .ioa-text-column.right-icon.icon-style-default .ioa-icon-area i { font-size: 24px; margin-top: 0px; } .ioa-text-column.left-icon.icon-style-default div.ioa-text-area { margin-left: 45px; } .ioa-text-column.right-icon.icon-style-default div.ioa-text-area { margin-right: 45px; } .full_width .ioa-text-column.right-icon .ioa-icon-area { padding-top: 30px; right: 2.5%; } /*========== Centered Text Style ==========*/ .centered .ioa-icon-area i { margin-bottom: 25px; font-size: 24px; } /*========== Top Image for Columns ==========*/ .ioa-image-area { margin-bottom: 25px; position: relative; } .page-wrapper .ioa-image-area img { display: block; max-width: 100%; height: auto; border-radius: 0px; margin: 0; } /*========== Boxed Layout Stylings ==========*/ .ioa-text-column.boxed { padding: 25px; border-radius: 0px; -webkit-transform-style: preserve-3d; transition: background 0.3s ease-in-out; -webkit-transition: background 0.3s ease-in-out; -ms-transition: background 0.3s ease-in-out; } .ioa-text-column.boxed i { margin-bottom: 25px; border-color: transparent; } .ioa-text-column.boxed.icon-style-default i { font-size: 24px; } .ioa-text-column.boxed div.ioa-icon-area span { display: none; } .ioa-text-column.boxed > a { text-decoration: none; display: block; color: inherit; } .ioa-text-column.boxed:hover { background: #48688e; } .ioa-text-column.boxed:hover h3, .ioa-text-column.boxed:hover h5 { color: #ffffff; } .ioa-text-column.boxed:hover p, .ioa-text-column.boxed:hover { color: #ffffff; } div.ioa-text-column.boxed:hover div.ioa-icon-area i { color: #fff !important; border-color: none !important; background: transparent !important; text-shadow: none !important; } .ioa-text-column.boxed:hover .ioa-more-button { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; } .ioa-text-column.boxed:hover .ioa-more-button:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } .ioa-text-column.boxed:hover .ioa-more-button i { width: auto; } .ioa-text-column.boxed:hover .ioa-more-button:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } .ioa-text-column.boxed:hover .ioa-more-button:hover:after { width: 100%; display: none; } /*========== Icon Boxes ==========*/ .ioa-text-column.iconed { margin-top: 45px; border-radius: 0px; border: 1px solid #e9e9e9; position: relative; } .ioa-text-column.iconed i.none { padding: 5px 30px 0 30px; } .ioa-text-column.iconed i.border-style, .ioa-text-column.iconed i.border-style-circ { background: #000102; background: #ffffff; } .ioa-text-column.icon.icon-style-default .ioa-icon-area i { border-radius: 100%; } .ioa-text-column.icon.icon-style-border, .ioa-text-column.icon.icon-style-border-circ { border-style: solid; } .ioa-text-column.iconed .ioa-icon-area i { padding: 25px; background: #48688e; color: #ffffff; width: auto; } .ioa-text-column.iconed .ioa-icon-area { position: absolute; top: -43px; left: 50%; margin-left: -41px; } .ioa-text-column.iconed.col-align-left .ioa-icon-area { left: 28px; margin-left: 0; } .ioa-text-column.iconed.col-align-right .ioa-icon-area { right: 28px; left: auto; margin-left: 0; } .ioa-text-column.iconed .ioa-text-area { z-index: 2; border-radius: 0px; padding: 65px 30px 35px 30px; } /*========== Icon Flip Boxes ==========*/ .ioa-text-column.iconed-alt { text-align: center; -webkit-perspective: 2500px; perspective: 2500px; -webkit-perspective-origin: 50% 0%; perspective-origin: 50% 0%; height: 320px; width: 100%; position: relative; } .ioa-text-column.iconed-alt .front-view i { margin-bottom: 30px; } .ioa-text-column.iconed-alt .front-view i.default { font-size: 32px; } .ioa-text-column.iconed-alt > div { -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .ioa-text-column .front-view { padding: 0; position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 2; display: table; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .ioa-text-column .front-view > div { display: table-cell; vertical-align: middle; } .ioa-text-column .inner-back-view { padding: 0; position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; background: rgba(0, 0, 0, 0.2); z-index: 2; } .ioa-text-column .inner-back-view .back-table-view { -webkit-font-smoothing: subpixel-antialiased; padding: 0; position: absolute; display: table; top: 0px; left: 0px; height: 100%; width: 100%; z-index: 2; } .ioa-text-column .inner-back-view .back-table-view > div { display: table-cell; vertical-align: middle; padding: 0 20px; } .ioa-text-column.iconed-alt .alt-desc { border-radius: 0px; position: absolute; z-index: 5; top: 0px; left: 0px; right: 0px; bottom: 0px; text-align: center; height: 100%; width: 100%; background: #48688e; } .alt-inner-desc .ioa-text { line-height: 1.6; } .ioa-text-column .alt-desc a.ioa-more-button { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; } .ioa-text-column .alt-desc a.ioa-more-button:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } .ioa-text-column .alt-desc a.ioa-more-button i { width: auto; } .ioa-text-column .alt-desc a.ioa-more-button:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } .ioa-text-column .alt-desc a.ioa-more-button:hover:after { width: 100%; display: none; } .ioa-text-column.iconed-alt .alt-desc { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; background-size: cover; background-position: center center; } .ioa-text-column.iconed-alt:hover .alt-desc { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .ioa-text-column.iconed-alt:hover .front-view { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } /*----- End of Text Column Stylings ------*/ /*========== Full Width Stylings ==========*/ .full_width .ioa-text-column { padding: 0px 2.5%; } .full_width .full .ioa-text-column { padding: 0 2.5%; } .full_width .four_fifth .ioa-text-column { padding: 30px 2.9%; } .full_width .three_fourth .ioa-text-column { padding: 30px 3.2%; } .full_width .two_third .ioa-text-column { padding: 30px 3.7%; } .full_width .one_half .ioa-text-column { padding: 30px 5%; } .full_width .one_third .ioa-text-column { padding: 30px 7.5%; } .full_width .one_fourth .ioa-text-column { padding: 30px 9%; } .full_width .one_fifth .ioa-text-column { padding: 30px 10%; } div.page-section div.full_width .text-title-wrap { padding: 15px; } /*============================================ = HTML Column Stylings = ============================================*/ .col-align-left { text-align: left; } .col-align-center { text-align: center; } .col-align-right { text-align: right; } .col-align-justify { text-align: justify; } /*----- End of HTML Column Stylings ------*/ /*========================================== = Post List Stylings = ==========================================*/ /*========== General Post Stylings ==========*/ .full_width .post_list-inner-wrap { margin: 30px; } ul.posts { margin: 0; padding: 0; } ul.posts li { list-style: none; padding: 0; margin: 0; position: relative; } ul.posts li a.more { color: #48688e; padding: 0; margin: 0px 0px 20px 0px; display: block; } ul.posts li a.more:active, a.more:hover { color: #48688e; } ul.posts li div.image { overflow: hidden; } .post_list-inner-wrap { margin-left: 0px; } .page-wrapper .post_list-inner-wrap a.ajax-load-more-button span.button-content { padding: 18px 0; } .page-wrapper .post_list-inner-wrap ul.posts li:last-child { padding-bottom: 0; margin-bottom: 0; } .post_list-inner-wrap .pagination { margin-top: 15px; width: 100%; padding-top: 45px; padding-bottom: 10px; } /*========== Post List wtih Thumbnail Stylings ==========*/ ul.thumb-list li { min-height: 80px; margin-bottom: 5px; } ul.thumb-list li:last-child { border-bottom: none; } ul.thumb-list li .image { width: 110px; position: absolute; top: 0; left: 0; border-radius: 0px; } ul.thumb-list-2.thumb-list li a.more { margin-top: 20px; } ul.thumb-list-2.thumb-list li { border-bottom: 2px solid #e9e9e9; min-height: 300px; margin-bottom: 37px; padding-bottom: 76px; } ul.thumb-list-2.thumb-list li .image { width: 255px; } ul.thumb-list-2.thumb-list li .desc { margin-left: 292px; } ul.thumb-list li .image .helper-display-icon { width: 100%; padding: 30px 0; text-align: center; background: #f0f0f0; color: #000102; } ul.thumb-list.thumb-list li .image .helper-display-icon { padding: 30px 0; } ul.thumb-list li a.read-more { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; } ul.thumb-list li a.read-more:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } ul.thumb-list li a.read-more i { width: auto; } ul.thumb-list li a.read-more:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } ul.thumb-list li a.read-more:hover:after { width: 100%; display: none; } ul.thumb-list li .imageholder, ul.thumb-list img { display: block; border-radius: 0px; } ul.thumb-list li .desc { margin-left: 140px; } ul.thumb-list li .desc h3 { margin: 0; padding: 0 0px 15px 0px; line-height: 1.2; font-size: 14px; text-transform: none; letter-spacing: 0px; font-weight: 600; } ul.thumb-list li .desc.adjust-title h2 { margin-top: 0px; } ul.thumb-list li .desc h3 a { text-decoration: none; color: #333333; line-height: 1; } ul.thumb-list li .desc h3 a:hover { color: #48688e; } ul.thumb-list li .extras { color: #48688e; margin-top: 5px; margin-bottom: 8px; font-size: 14px; letter-spacing: 0px; text-transform: none; line-height: 1.2; } ul.thumb-list li .extras a, ul.thumb-list li .extras i { text-decoration: none; line-height: 1; color: #48688e; } ul.thumb-list li .desc p { margin: 0px; padding: 0; } ul.thumb-list li .extras i { font-size: 9px; } ul.thumb-list li .extras strong { width: 72px; float: left; font-weight: 500; } /*========== Medium Thumb Title ==========*/ ul.thumb-list li .desc h3.medium-thumb { margin: 0; padding: 0; line-height: 1.2; font-size: 22px; text-transform: none; letter-spacing: 0px; font-weight: 300; } ul.thumb-list li .desc h3.medium-thumb a { text-decoration: none; color: #333333; line-height: 1; } ul.thumb-list li .desc h3.medium-thumb a:hover { color: #48688e; } /*========== Medium Thumb Title ==========*/ /*========== Post Plain List ==========*/ ul.plain-list li { padding-bottom: 25px; margin-bottom: 25px; border-bottom: 1px solid #e9e9e9; position: relative; } ul.plain-list li:last-child { border-bottom: none; } ul.plain-list li .date-area { position: absolute; top: 0; left: 0; color: #000102; text-align: center; padding: 10px; border-radius: 0px; border: 1px solid #000102; } ul.plain-list li .date-area small { font-size: 100%; display: block; line-height: 1; color: #000102; text-transform: uppercase; } ul.plain-list li .date-area small.date { font-size: 28px; display: block; color: #000102; } ul.plain-list li .date-area small.month { font-size: 12px; display: block; margin-top: 3px; color: #000102; } ul.plain-list li .desc { margin-left: 80px; } ul.plain-list li .desc h3 { margin: 0; padding: 0; line-height: 1.2; font-size: 14px; } ul.plain-list li .desc h3 a { text-decoration: none; color: #333333; font-size: 15px; display: block; } ul.plain-list li .desc h3 a:hover { color: #48688e; } ul.plain-list li .extras { font-size: 11px; color: #000102; margin-top: 5px; } ul.plain-list li .extras a, ul.plain-list li .extras i { text-decoration: none; line-height: 1; } ul.plain-list li .extras a:hover { text-decoration: underline; color: #48688e; } ul.plain-list li .desc p { margin-top: 4px; margin-bottom: 0; padding-bottom: 0; } /*========== Blog One Column Stylings ==========*/ .full_width .blog-column-posts ul li div.image a.imageholder img { width: 100%; } .blog-column-posts ul { margin: 0; padding: 0; overflow: visible !important; } .blog-column-posts ul li.post-item { list-style: none; margin: 0 0 40px 0; padding: 0; position: relative; width: 100%; padding-bottom: 0px; padding-bottom: 40px; border-bottom: 1px solid #000102; } .blog-column-posts ul li.post-item:last-child { border-bottom: none; } .blog-column-posts ul li.no-posts-found { background: #000102; text-align: center; color: #ffffff; padding: 30px 0; border-radius: 0px; } .blog-column-posts ul li div.ioaslider { margin-bottom: 25px; position: relative; z-index: 2; } .blog-column-posts ul li div.image-wrap { position: relative; z-index: 2; } .blog-column-posts ul li div.image { position: relative; background: rgba(0, 0, 0, 0.04); overflow: hidden; } .blog-column-posts ul li div.image a.imageholder, .blog-column-posts ul li div.image a.imageholder img { display: block; max-width: 100%; margin: 0 auto; } .blog-column-posts ul li div.image a.imageholder img { margin: 0 auto; max-width: 100%; height: auto; } .blog-column-posts ul li div.desc { margin-top: 20px; padding: 0px; } .blog-column-posts ul li div.desc div.excerpt { padding-bottom: 0px; word-wrap: break-word; padding-top: 0px; } .blog-column-posts ul li div.desc div.excerpt p { padding-bottom: 10px; } .blog-column-posts ul li div.desc h2 { margin-bottom: 5px; margin-top: 10px; line-height: 1.2; font-size: 48px; } .blog-column-posts ul li div.desc h2 a { word-wrap: break-word; text-decoration: none; color: #333333; } .blog-column-posts ul li div.desc h2:hover a { color: #48688e; } .blog-column-posts ul li div.desc .extra { font-size: 12px; } .blog-column-posts ul li div.desc .extra a { color: #a9adb0; } .blog-column-posts ul li div.desc .extra a:hover { color: #000102; } /*----- End of Post List Stylings ------*/ /*============================================ = Post Column Stylings = ============================================*/ ul.blog_posts { padding: 0; margin: 0; } ul.blog_posts li { padding: 0; margin: 0; list-style: none; } /*========== General Stylings ==========*/ .sticky-post-icon { position: absolute; z-index: 20; top: 0; right: 0; background: #48688e; color: #ffffff; border-radius: 0px; padding: 16px 9px; width: 50px; display: block; } .portfolio-columns .excerpt { margin-top: 0px; position: relative; } .portfolio-columns .portfolio-text .excerpt:after { background: linear-gradient(rgba(255, 255, 255, 0), white, white); position: absolute; bottom: 0px; left: 0; width: 100%; z-index: 2; height: 125px; display: block; } .resize-hproportional div.image-wrap { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; align-items: center; } .resize-hproportional ul li div.image img { width: auto; } div.bottom-portfolio-col { position: relative; z-index: 4; margin-top: 25px; } div.col-grid { margin-bottom: 40px; } div.portfolio-columns ul.isotope { padding: 0; margin: 0; } div.portfolio-columns ul li.iso-item { padding: 0 0 0px 0; margin: 0 0 0px; list-style: none; float: left; } div.portfolio-columns div.blog-layout ul.one-column li.iso-item { padding-top: 60px; margin-bottom: 0px; border-bottom: 1px solid #e9e9e9; } div.portfolio-columns div.blog-layout ul.one-column li.iso-item:first-child { padding-top: 0; } div.portfolio-columns div.blog-layout ul.one-column li.iso-item:last-child { border-bottom: none; } div.portfolio-columns ul li.iso-item.one_sixth { width: 16.66%; } div.portfolio-columns ul li.iso-item.two_sixth { width: 33.2%; } div.portfolio-columns ul.column-align-center li { text-align: center; } div.portfolio-columns ul.column-align-right li { text-align: right; } /* Image Holder */ div.portfolio-columns ul li div.image a.imageholder { height: auto; margin: 0 auto; display: block; position: relative; } div.portfolio-columns ul li div.image img { height: auto; margin: 0 auto; margin-top: 20px; display: block; max-width: 100%; width: 100%; border-radius: 0px; } div.portfolio-columns ul li div.inner-item-wrap div.image-wrap { text-align: center; } div.portfolio-columns ul li div.inner-item-wrap div.image { position: relative; overflow: hidden; border-radius: 0px; } div.portfolio-columns ul li div.image .hover-overlay { border-radius: 0px; } ul.plain-list li .desc h3 a { text-decoration: none; } ul.plain-list li .desc h3 a:hover { text-decoration: none; } /* Title */ div.portfolio-columns ul li div.inner-item-wrap h2 { margin: 0; font-size: 14px; line-height: 1.2; padding: 0 0 10px 0; width: 80%; } div.portfolio-columns ul li div.inner-item-wrap h2 a { text-decoration: none; color: #000102; display: block; } div.portfolio-columns ul li div.inner-item-wrap h2 a:hover { color: #48688e; } div.portfolio-columns ul li.no-posts-found { background: #48688e; padding: 15px; text-align: center; color: #ffffff; margin: 0px 0 30px 0; } div.desc-panel { position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; } div.desc-table-wrap { display: table; height: 100%; width: 100%; } div.portfolio-columns a.caption { background: rgba(255, 255, 255, 0.9); padding: 10% 0; text-align: center; width: 50%; margin: 0 auto; display: block; text-decoration: none; } div.desc-panel-inner-wrap { display: table-cell; vertical-align: middle; } div.portfolio-columns ul li div.inner-item-wrap div.overlay-portfolio-desc { text-align: center; } div.portfolio-columns ul li div.inner-item-wrap div.overlay-portfolio-desc h2 { width: 100%; } div.portfolio-columns ul li div.inner-item-wrap div.overlay-portfolio-desc h2 a, div.portfolio-columns div.overlay-portfolio-desc div.extras, div.portfolio-columns div.overlay-portfolio-desc div.extras a { color: #fff; } div.portfolio-columns ul li div.inner-item-wrap div.overlay-portfolio-desc div.vertical-align { background: none; } div.portfolio-columns ul li div.inner-item-wrap div.overlay-portfolio-desc div.hoverdir-wrap { top: 10px; left: 10px; bottom: 10px; right: 10px; } div.portfolio-columns ul li div.inner-item-wrap div.overlay-portfolio-desc div.hoverdir { background: rgba(0, 0, 0, 0.4); } /*========== Post Formats ==========*/ div.post-format-video p { display: block; } div.post-format-video iframe, div.post-format-video video { width: 100%; display: block; } div.wp-audio-shortcode.mejs-audio .mejs-mediaelement { left: 15px; } div.wp-audio-shortcode.mejs-audio { height: 60px !important; overflow: hidden; } div.wp-audio-shortcode.mejs-container .mejs-controls { margin: 15px 0; bottom: auto; top: 0; } .mejs-container, .mejs-embed, .mejs-embed body, .mejs-container .mejs-controls { background: #000102; } body div.post-format-audio .mejs-controls .mejs-button button, body div.post-format-audio .mejs-controls .mejs-playpause-button button { font-family: "_ioa_front"; background: none; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; font-size: 14px; color: #787b7d; } .mejs-inner { position: relative; padding-left: 15px; } body div.post-format-audio .mejs-controls .mejs-playpause-button button:before { content: '\e90a'; } body div.post-format-audio .mejs-controls .mejs-mute button:before { content: '\e8c8'; } div.post-format-chat { padding: 25px 25px 35px 25px; background: #f0f0f0; position: relative; color: #000102; } div.post-format-chat i { position: absolute; bottom: 15px; left: 15px; font-size: 12px; color: #000102; } div.post-format-image p, div.post-format-link p { padding: 0; margin: 0; } body div.page-wrapper div.post-format-image img { width: 100%; margin: 0; } div.post-format-link { padding: 45px 30px; background: #f0f0f0; text-decoration: none; text-align: left; position: relative; transition: all 0.2s; } div.post-format-link h5 { margin-bottom: 0; padding-bottom: 0; } div.post-format-link a { color: #000102; font-size: 21px; margin: 0px 50px; text-decoration: none; display: block; text-align: center; } div.post-format-link i { position: absolute; top: 32px; left: 25px; color: #000102; margin-top: -10px; font-size: 20px; } div.post-format-link:hover { background: #000102; } div.post-format-link:hover a, div.post-format-link:hover i { color: #ffffff; } div.post-format-quote { padding: 45px 30px; background: #f0f0f0; text-decoration: none; text-align: left; position: relative; } div.post-format-quote p { color: #000102; font-size: 21px; margin: 0px 20px; text-align: center; } div.post-format-quote i { position: absolute; top: 32px; left: 25px; color: #000102; margin-top: -10px; font-size: 20px; } div.post-format-quote h5.quote-by { float: right; font-size: 16px; margin-bottom: 0; padding-bottom: 0; } div.post-format-status { padding: 45px 30px; background: #f0f0f0; text-decoration: none; text-align: left; position: relative; } div.post-format-status p { color: #000102; font-size: 21px; margin: 0px 50px; } /*========== Columns ==========*/ /*========== Boxed Stylings ==========*/ div.portfolio-columns ul.style-boxed-list.five-columns li div.inner-item-wrap div.desc { padding: 15px; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap div.desc { padding: 25px; background: #f0f0f0; border-bottom: 2px solid #e9e9e9; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap h4 a { color: #000102; } div.portfolio-columns ul.style-boxed-list li div.inner-item-wrap h4 a:hover { color: #787b7d; } div.portfolio-columns ul.style-boxed-list div.extras { color: #000102; } div.portfolio-columns ul.style-boxed-list div.extras a { color: #a9adb0; } div.portfolio-columns ul.style-boxed-list div.extras a:hover { color: #000102; } div.portfolio-columns ul.style-boxed-list .portfolio-text .excerpt:after { content: none; display: none; } /*========== Grid Layout ==========*/ div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap { overflow: hidden; padding-bottom: 0; position: relative; } div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap div.image { display: block; overflow: hidden; } div.two-column ul li.portfolio-grid-col-layout { width: 50%; } div.three-column ul li.portfolio-grid-col-layout { width: 33.33%; } div.four-column ul li.portfolio-grid-col-layout { width: 25%; } div.five-column ul li.portfolio-grid-col-layout { width: 20%; margin-bottom: 0; padding-bottom: 0; } div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap a.imageholder, div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap img, div.portfolio-columns ul li.portfolio-grid-col-layout div.inner-item-wrap div.image { border-radius: 0px; } /*========== Full Width Columns ==========*/ .full_width div.two-column ul li.iso-item { width: 50%; } .full_width div.three-column ul li.iso-item { width: 33.33%; } .full_width div.four-column ul li.iso-item { width: 25%; } .full_width div.five-column ul li.iso-item { width: 20%; margin-bottom: 0; padding-bottom: 0; } .full_width div.portfolio-columns ul li div.image img, .full_width div.portfolio-columns ul li div.inner-item-wrap div.image, .full_width div.portfolio-columns ul li div.image .hover-overlay { border-radius: 0px; width: 100%; } .full_width div.portfolio-columns ul li.iso-item div.inner-item-wrap { padding-bottom: 0; } .portfolio-columns .excerpt { margin-top: 0px; } .portfolio-columns .read-more { text-decoration: none; transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; -webkit-font-smoothing: subpixel-antialiased; } .portfolio-columns .read-more:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } .portfolio-columns .read-more i { width: auto; } .portfolio-columns .read-more:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } .portfolio-columns .read-more:hover:after { width: 100%; display: none; } div.bottom-portfolio-col { position: relative; z-index: 4; } div.bottom-portfolio-col div.share { float: right; position: relative; padding: 11px 0px 11px 20px; } div.bottom-portfolio-col div.share span { text-transform: uppercase; font-size: 11px; letter-spacing: 1px; color: #000102; cursor: pointer; margin-top: 3px; background: #f0f0f0; padding: 10px 12px 10px; } div.bottom-portfolio-col div.share div { position: absolute; left: -290px; width: 307px; top: 7px; display: none; } div.bottom-portfolio-col div.share div a { text-decoration: none; color: #000102; height: 35px; display: block; padding: 11px; line-height: 1; float: right; background: #f0f0f0; margin-left: 1px; margin-top: -2px; } div.bottom-portfolio-col div.share div a.inactive { visibility: hidden; } div.bottom-portfolio-col div.share div a:hover { color: #787b7d; } div.bottom-portfolio-col div.share.open div { display: block; } /* Text */ div.portfolio-columns ul li div.inner-item-wrap div.desc { padding-top: 15px; position: relative; } div.portfolio-columns ul li div.inner-item-wrap div.desc p { margin-bottom: 0; margin-top: 5px; line-height: 1.6; } /* Extra Info */ div.portfolio-columns div.extras { color: #000102; margin-bottom: 10px; font-size: 12px; line-height: 1.4; font-weight: 400; } div.portfolio-columns div.extras a { text-decoration: none; display: inline-block; color: #a9adb0; } div.portfolio-columns div.extras a:hover { color: #787b7d; } div.portfolio-columns.one-column ul li div.inner-item-wrap h2 { font-size: 30px; padding: 0px; max-width: 80%; } div.portfolio-columns.two-column ul li div.inner-item-wrap h2 { font-size: 18px; } div.portfolio-columns.three-column ul li div.inner-item-wrap h2 { font-size: 16px; } div.portfolio-columns.four-column ul li div.inner-item-wrap h2 { font-size: 14px; } div.portfolio-columns.five-column ul li div.inner-item-wrap h2 { font-size: 12px; text-transform: uppercase; } .portfolio-columns ul li div.inner-item-wrap div.image-wrap { width: 370px; float: left; margin-right: 50px; } .portfolio-columns ul li div.inner-item-wrap div.desc { width: 320px; float: left; padding-top: 0; } .portfolio-columns.one-column ul li div.inner-item-wrap h2 { max-width: 100%; font-size: 24px; margin-bottom: 10px; color: #333333; position: relative; font-size: 26px; margin: 40px 0px 0px 0px; padding: 0px 0px 0px 0px; line-height: 1.2; text-transform: none; letter-spacing: 0px; font-weight: 400; width: 100%; } ul li.iso-item { border-bottom: 1px solid #e9e9e9; } ul li.iso-item:last-child { border-bottom: none; } /*----- End of Post Column Stylings ------*/ /*=================================== = Intro title = ===================================*/ /*========== Ful Width ==========*/ .full_width .intro_title-inner-wrap { padding: 30px 2.5%; } .full .intro_title-inner-wrap .text_subtitle { max-width: 65%; } /*========== General ==========*/ .intro_title-inner-wrap h2 { font-size: 32px; margin: 10px 0 10px 0; padding: 0; color: #333333; line-height: 1.1; } .intro_title-inner-wrap h2 span { display: inline-block; position: relative; } .intro_title-inner-wrap .text_subtitle { display: inline-block; color: #48688e; clear: both; } .section-primary-color .intro_title-inner-wrap h2 { color: #ffffff; } .section-primary-color .intro_title-inner-wrap .text_subtitle { color: #ffffff; } .section-secondary-color .intro_title-inner-wrap h2 { color: #ffffff; } .section-secondary-color .intro_title-inner-wrap .text_subtitle { color: #ffffff; } /*========== Alignment ==========*/ .col-center { text-align: center; } .col-right { text-align: right; } /*----- End of Intro title ------*/ /*=============================== = Divider = ===============================*/ div.divider { clear: both; } div.divider.none { height: 1px; } div.divider.line { height: 0px; border-top: 1px solid #e9e9e9; } div.divider.dotted { height: 0px; border-top: 1px dotted #e9e9e9; } div.divider.dashed { height: 0px; border-top: 1px dashed #e9e9e9; } div.divider.double { height: 1px; border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; } .m-divider-wrap { position: relative; display: inline-block; } div.divider.title, div.divider.small-title, div.divider.icon, div.divider.small-icon { overflow: hidden; position: relative; text-align: center; } div.divider.title .divider-text { text-align: center; position: relative; } div.divider.title div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -715px; width: 700px; height: 1px; background: #e9e9e9; } div.divider.title div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -715px; width: 700px; height: 1px; background: #e9e9e9; } div.divider.small-title .divider-text { text-align: center; position: relative; } div.divider.small-title div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -115px; width: 100px; height: 1px; background: #e9e9e9; } div.divider.small-title div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -115px; width: 100px; height: 1px; background: #e9e9e9; } div.divider.icon .divider-text { text-align: center; position: relative; } div.divider.icon div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -715px; width: 700px; height: 1px; background: #e9e9e9; } div.divider.icon div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -715px; width: 700px; height: 1px; background: #e9e9e9; } div.divider.small-icon .divider-text { text-align: center; position: relative; } div.divider.small-icon div.divider-text:before { content: ' '; position: absolute; top: 50%; left: -115px; width: 100px; height: 1px; background: #e9e9e9; } div.divider.small-icon div.divider-text:after { content: ' '; position: absolute; top: 50%; right: -115px; width: 100px; height: 1px; background: #e9e9e9; } /*----- End of Divider ------*/ /*==================================== = Image Widget = ====================================*/ .image-inner-wrap .hoverable { position: relative; } .image-inner-wrap { display: block; position: relative; max-width: 100% !important; } .image-inner-wrap img, .image-align-none img { display: block; max-width: 100%; margin: 0 auto; position: relative; z-index: 2; height: auto; } .image-align-left { float: left; margin: 10px 20px 10px 0; } .image-align-right { float: right; margin: 10px 0px 10px 20px; } .image-inner-wrap .text_caption { text-align: center; z-index: 2; padding: 25px; margin-bottom: 0px; font-size: 12px; background: #000102; color: #ffffff; } .image-inner-wrap > div, .image-align-none { max-width: 100% !important; overflow: hidden; margin: 0 auto; } .image-stretched.image-inner-wrap img { width: 100%; } /*----- End of Image Widget ------*/ /*========================================= = Thumbnails Widget = =========================================*/ .full_width .thumbnail-inner-wrap { margin: 30px; } .thumbnail-inner-wrap ul { margin: 0; padding: 0; } .thumbnail-inner-wrap ul li { float: left; margin: 0px 2px 2px 0px; list-style: none; } .thumbnail-inner-wrap ul li a { display: block; } .thumbnail-inner-wrap ul li img { display: block; border-radius: 0px; } /*----- End of Thumbnails Widget ------*/ /*=========================== = CTA = ===========================*/ .full_width .cta-inner-wrap { margin: 30px; } .cta-inner-wrap { position: relative; } .cta-inner-wrap.default .cta-heading { padding: 0px 300px 0px 0px; } .cta-inner-wrap .cta-heading h2 { padding: 0px; margin: 0; color: #333333; font-size: 32px; } .cta-inner-wrap .cta-heading h5 { color: #333333; margin: 5px auto 10px auto; margin: 5px auto 10px auto; } .cta-inner-wrap a.cta_button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 12px 18px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; padding: 0; position: relative; margin-top: 25px; } .cta-inner-wrap.default a.cta_button { margin-top: 0px; position: absolute; right: 0; top: 50%; margin-top: -22px; } .cta-inner-wrap a.cta_button:hover { background: #000102; border-color: #000102; color: #ffffff; } .cta-inner-wrap.plain_link { text-align: center; } .cta-inner-wrap .cta-button-label { position: relative; z-index: 2; display: block; padding: 15px 30px; } .cta-inner-wrap .icon-button .cta-button-label { border-right: 1px solid #48688e; margin-right: 49px; } .cta-inner-wrap .cta-icon { position: absolute; top: 50%; margin-top: -11px; font-size: 20px; right: 15px; } .cta-inner-wrap.default .cta-heading h5 { max-width: none; } .cta-inner-wrap.center { text-align: center; padding: 15px 0 10px 0; position: relative; } .cta-inner-wrap.center .cta-heading h2 { line-height: 1.4; padding: 0px 15px 0px 15px; margin: 0; font-size: 32px; } .cta-inner-wrap.center .cta-heading h5 { max-width: 75%; } .cta-inner-wrap.below .cta-heading h5 { text-align: left; margin: 10px 0; } .cta-inner-wrap.below .cta-heading h2 { max-width: 84%; font-size: 32px; } .main-cta-icon i { font-size: 48px; margin-bottom: 30px; } .cta-inner-wrap-style-2 { text-align: center; } .cta-inner-wrap-style-2 a.cta_button_1 { margin-right: 15px; } a.cta_button_2 { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; margin-top: 25px; } a.cta_button_2:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } a.cta_button_2 i { width: auto; } a.cta_button_2:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } a.cta_button_2:hover:after { width: 100%; display: none; } /*----- End of CTA ------*/ /*============================ = Tabs = ============================*/ .ui-tabs { position: relative; padding: 0; margin: 0px 0 0 0; } .ui-tabs img { max-width: 100%; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0; display: block; } .ui-tabs .ui-tabs-nav li i { margin-right: 4px; } .ui-tabs ul.ui-tabs-nav { border-bottom: 2px solid #000102; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 0 4px 0px 0; padding: 0; border-bottom-width: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav li a { display: inline-block; padding: 15px 35px; } .ui-tabs .ui-tabs-nav li a { display: block; color: #000102; text-decoration: none; line-height: 1; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-tabs-loading a { cursor: text; } .ui-tabs .ui-tabs-nav li a, .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a { cursor: pointer; } .ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li a:hover { background: #000102; color: #ffffff; -webkit-font-smoothing: subpixel-antialiased; } .full_width .tabs-inner-wrap { margin: 30px; } /*========== Tabs Alignment ==========*/ .tabs-align-top div.ui-tabs-panel { clear: both; } .ui-tabs .ui-tabs-panel { text-align: left; padding: 15px 0 0; color: #333333; margin-top: 0; } .tabs-align-top .ui-tabs .ui-tabs-nav li a { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } /*================================= = Accordion = =================================*/ .ioa_accordion { margin: 0; } .ioa_accordion .ui-accordion-header { text-decoration: none; border-radius: 0px; background: #f0f0f0; padding: 15px 20px; margin-bottom: 5px; display: block; color: #000102; font-size: 12px; position: relative; overflow: hidden; cursor: pointer; } .ioa_accordion .ui-accordion-header:focus { outline: none; } .ioa_accordion .ui-accordion-header i { margin-right: 0px; font-size: 12px; float: right; color: inherit; margin-top: 4px; } .ioa_accordion .ui-state-active { background: #000102; color: #ffffff; border-radius: 0px; border-bottom: none; margin-bottom: 5px; } .ioa_accordion .ui-state-active i { color: inherit; } .ioa_accordion .ui-accordion-li-fix { display: inline; } .ioa_accordion .ui-accordion-content { padding: 15px 20px 30px; position: relative; top: 1px; margin-bottom: 0px; overflow: auto; display: none; zoom: 1; } .ioa_accordion .ui-accordion-content-active { display: block; } .ioa_accordion .ui-accordion-content p { margin-top: 0; } /*----- End of Accordion ------*/ .full_width .accordion-inner-wrap { margin: 30px; } /*========== Sidebar ==========*/ .sidebar-inner-wrap .sidebar { padding: 0; } /*----- End of Sidebar Widget ------*/ /*============================= = Video = =============================*/ iframe.video, video.video { outline: 0; border: 0; max-width: 100% !important; } div.video-inner-wrap .text_caption { text-align: center; padding: 25px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); background: rgba(0, 0, 0, 0.04); font-size: 12px; } div.ioa-video { display: block; margin-top: 0px; } div.video-inner-wrap .fluid-width-video-wrapper { position: relative; visibility: visible; } div.ioa-video video, div.ioa-video iframe { max-width: 100% !important; } div.video-proxy-wrap { position: relative; overflow: hidden; height: 100%; width: 100%; } .full_width div.video-inner-wrap iframe.video, .full_width div.video-inner-wrap video.video { width: 100%; } /*----- End of Video ------*/ /*==================================== = Progress Bar = ====================================*/ .full_width .progress_bar-inner-wrap { margin: 30px; } /*========== Horizontal ==========*/ .progress_bar-inner-wrap { padding-top: 25px; } .progress-horizontal div.progress-bar h6.progress-bar-title { z-index: 2; padding: 11px 10px 0px 0px; position: absolute; top: -30px; left: 0px; display: block; color: #333333; font-size: 13px; margin: 0px; line-height: 1.2; } .progress-horizontal div.progress-bar { position: relative; width: 100%; height: 15px; background: rgba(0, 0, 0, 0.08); margin-top: 35px; border-radius: 0px; } .progress-horizontal div.progress-bar:first-child { margin-top: 0; } .progress-horizontal div.progress-bar div.filler { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; width: 0px; opacity: 0; font-size: 11px; position: absolute; top: 0; left: 0; height: 15px; background: #48688e; text-align: right; color: #ffffff; padding: 0px 0px 0px 0px; border-radius: 0px; } .progress-horizontal div.progress-bar span { transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; opacity: 0; position: absolute; top: -22px; right: 0px; color: white; color: #333333; font-size: 13px; width: 50px; text-align: right; } .progress-horizontal div.progress-bar .overlay { background: url(sprites/i/animated-overlay.gif); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.07; } .progress-horizontal div.progress-bar.animate-progress-bar span { opacity: 1; } /*========== Vertical ==========*/ .progress-vertical div.progress-bar h6.progress-bar-title { z-index: 2; padding: 11px 10px 0px 0px; position: absolute; top: 96%; left: 0px; display: block; color: #333333; font-size: 13px; margin: 0px; line-height: 1.2; } .progress-vertical div.progress-bar { position: relative; float: left; height: 150px; width: 45px; background: rgba(0, 0, 0, 0.08); margin-right: 30px; border-radius: 0px; } .progress-vertical div.progress-bar div.filler { transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; height: 0px; opacity: 0; font-size: 11px; position: absolute; bottom: 0; left: 0; width: 45px; background: #48688e; text-align: right; color: #ffffff; padding: 0px 0px 0px 0px; border-radius: 0px; } .progress-vertical div.progress-bar span { transition: opacity 1s ease-in-out; -webkit-transition: opacity 1s ease-in-out; opacity: 0; position: absolute; top: -22px; right: 0px; color: white; color: #333333; font-size: 12px; width: 45px; text-align: center; } .progress-vertical div.progress-bar .overlay { background: url(sprites/i/animated-overlay.gif); position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.07; } .progress-vertical div.progress-bar.animate-progress-bar span { opacity: 1; } /*----- End of Progress Bar ------*/ /*============================== = Button = ==============================*/ a.ioa-button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 0px 0px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; margin: 3px; position: relative; -webkit-backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; text-transform: uppercase; transition: all 0.3s; backface-visibility: hidden; } a.ioa-button:hover { opacity: 0.9; background: #000102; border-color: #000102; color: #ffffff; } a.ioa-button span { display: block; } a.ioa-button.has-icon span { border-left: 1px solid #48688e; } a.ioa-button.has-icon:hover span { border-left-color: rgba(255, 255, 255, 0.1); } a.ioa-button i { position: absolute; top: 50%; left: 12px; margin-top: -7px; } a.ioa-button.has-icon.size-small i { left: 8px; margin-top: -5px; font-size: 11px; } a.ioa-button.has-icon.size-large i { left: 15px; margin-top: -10px; font-size: 18px; } a.ioa-button.has-icon.size-big i { left: 18px; margin-top: -11px; font-size: 20px; } a.ioa-button.has-icon.size-block i { left: 18px; margin-top: -11px; font-size: 20px; } a.ioa-button.style-classic { background: #48688e; border-color: #48688e; color: #fff; } a.ioa-button.style-gradient { background: url(sprites/i/menu-gloss.png) #48688e; border-color: transparent; color: #fff; } a.ioa-button.style-3d { border-bottom: 3px solid #3e597a; background: #48688e; color: #fff; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); } a.ioa-button.style-3d:hover { border: 1px solid #48688e; } .ioa-button.size-small span { padding: 6px 25px; font-size: 10px; } .ioa-button.size-default span { padding: 8px 35px; font-size: 11px; } .ioa-button.size-large span { padding: 12px 23px; font-size: 12px; } .ioa-button.size-big span { padding: 15px 55px; font-size: 13px; } .ioa-button.size-block span { padding: 15px 40px; font-size: 14px; } .ioa-button.has-icon.size-small span { margin-left: 25px; } .ioa-button.has-icon.size-default span { margin-left: 35px; } .ioa-button.has-icon.size-large span { margin-left: 45px; } .ioa-button.has-icon.size-big span { margin-left: 55px; } .ioa-button.has-icon.size-block span { margin-left: 55px; } a.size-block { display: block; text-align: center; margin: 0; } .full_width div.rad-button-widget.rad-widget { border-radius: 0px; display: block; width: 100%; } /*----- End of Button ------*/ /*==================================== = Social Icons = ====================================*/ .iconset-inner-wrap { margin: 30px 0; } .social-set { position: relative; border: none; } .social-set ul { margin: 0; padding: 0; display: inline-block; } .social-set ul li { float: left; border-bottom: none; margin: 0 1px 1px 0; padding: 0; position: relative; list-style: none; } .social-set ul li a { border-bottom: none; display: block; width: 40px; height: 38px; margin-left: 0; position: relative; overflow: hidden; text-decoration: none; -webkit-perspective: 2500px; perspective: 2500px; -webkit-perspective-origin: 50% 0%; perspective-origin: 50% 0%; } .social-set ul li span.social-block { width: 40px; padding: 10px 0; font-size: 18px; display: block; position: absolute; top: 0; left: 0; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; } .social-set ul li span.visible-block { color: #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); background: #ffffff; color: #333333; } .social-set ul li span.hover-block { background-color: #48688e; color: #ffffff; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; } .social-set ul li a:hover span.hover-block { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } .social-set ul li a:hover span.visible-block { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .icon-align-left { text-align: left; } .icon-align-center { text-align: center; } .icon-align-right { text-align: right; } /*========== Tooltips ==========*/ .tooltip { position: absolute; background: rgba(0, 0, 0, 0.85); color: #ffffff; font-size: 11px; border-radius: 0px; width: 100px; top: -28px; left: 50%; text-align: center; padding: 7px 6px; z-index: 2; display: none; margin-left: -56px; } .tooltip i { display: none; } /*----- End of Social Icons ------*/ /*============================== = Flickr = ==============================*/ .flickr-pictures a { float: left; margin: 0px 4px 4px 0; width: 70px; height: 70px; overflow: hidden; border-radius: 0px; } .flickr-pictures a img { min-height: 100%; width: 100%; display: block; border-radius: 0px; } /*----- End of Flickr ------*/ /*===================================== = Person Widget = =====================================*/ .full_width .person-inner-wrap { margin: 30px; } .full_width .person-inner-wrap div.image img { width: 100%; } .person-inner-wrap { position: relative; } .person-inner-wrap > div.p-area { position: relative; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .person-inner-wrap .person-icon { text-decoration: none; padding: 10px; font-size: 14px; position: absolute; z-index: 2; bottom: 0; left: 0; border-radius: 0px; background: rgba(255, 255, 255, 0.8); color: #48688e; } .person-inner-wrap .social-set { margin-top: 0px; } .person-inner-wrap div.image { position: relative; } .person-inner-wrap div.image img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 0px; } .person-inner-wrap div.desc-area { margin-top: 15px; position: relative; } .person-inner-wrap .info { background: rgba(0, 0, 0, 0.6); padding: 20px; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 5; color: #fff; display: none; } .person-inner-wrap div.show-person-info .info { display: block; } .person-inner-wrap div.desc-area h4 { padding: 0; margin: 0px; font-size: 16px; line-height: 1; color: #333333; } .person-inner-wrap div.desc-area span { font-size: 12px; text-align: center; margin: 4px 0px; font-style: italic; color: #000102; } div.animate-slide-top { position: relative; overflow: hidden; } div.animate-slide-top > div { transition: all 0.5s cubic-bezier(0.55, 0.06, 0.19, 1.06); } div.animate-slide-top div.second-image { position: absolute; top: 0; left: 0; z-index: 3; display: none; } div.animate-slide-top:hover div.second-image { display: block; } a.person-info-toggle { text-decoration: none; bottom: 10px; left: 10px; position: absolute; z-index: 7; padding: 10px; background: #48688e; color: #ffffff; line-height: 1; } a.person-info-toggle:hover { color: #fff; } /*----- End of Person Widget ------*/ /*=============================== = Toggles = ===============================*/ div.toggle .toggle-body { padding: 25px 0; border-bottom: 1px solid transparent; } div.toggle .toggle-body p:first-child { margin-top: 0; } div.toggle .toggle-body p:last-child { margin-bottom: 0; } div.toggle .toggle-body.collapse { display: none; } div.toggle a.toggle-title { text-decoration: none; border-radius: 0px; padding: 12px 0; display: block; color: #333333; font-size: 15px; } div.toggle a.toggle-title i { font-size: 12px; float: right; position: relative; top: 0px; } div.toggle h4 { margin-bottom: 0; } /*========== Styled ==========*/ .toggle-style-styled div.toggle a.toggle-title { text-decoration: none; background: #f0f0f0; padding: 15px; display: block; color: #000102; font-size: 11px; text-transform: uppercase; } .toggle-style-styled div.toggle a.toggle-title.title-active { background: #48688e; color: #ffffff; font-size: 11px; } .toggle-style-styled div.toggle a.toggle-title i { font-size: 12px; margin-right: 2px; position: relative; margin-top: 2px; color: inherit; } .toggle-style-styled div.toggle a.toggle-title.title-active i { color: inherit; } .toggle-style-styled div.toggle { margin-bottom: 1px; } .toggle-style-styled div.toggle-body { margin-top: 10px; margin-bottom: 10px; background: rgba(0, 0, 0, 0.04); border-radius: 0px; padding: 25px; } .full_width .toggle-inner-wrap { margin: 30px; } /*================================== = Google MAP = ==================================*/ .rad_google_map textarea { display: none; } /*----- End of Google MAP ------*/ /*=================================== = Logo Widget = ===================================*/ .full_width .logo-inner-wrap { margin: 30px; } .logo-area { padding: 0; margin: 0; } .logo-area li { float: left; width: 33.33%; list-style: none; margin: 0; position: relative; } .logo-area li .inner-logo-item { padding: 0px; min-height: 100px; } .logo-area li a { display: block; } .logo-area li img { margin: 0 auto; max-width: 100%; display: block; display: block; padding: 50px 0; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.5; } .logo-area li a:hover, .logo-area li img:hover { -webkit-filter: none; -moz-filter: none; filter: none; opacity: 1; } .logo-area.logo-grid li { border-top: 1px solid #e9e9e9; border-left: 1px solid #e9e9e9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .logo-area.logo-grid li.top_item { border-top: none; } .logo-area.logo-grid li.first_item { border-left: none; } /*========== Logo Scrollable ==========*/ .logo-inner-wrap div.swiper-slide img { width: auto; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); opacity: 0.5; } .logo-inner-wrap div.swiper-slide:hover img { -webkit-filter: none; -moz-filter: none; filter: none; opacity: 1; } .logo-inner-wrap .inner-logo-item { position: relative; padding: 30px 45px; } .logo-inner-wrap .inner-logo-item .tooltip { top: 0; } /*----- End of Logo Widget ------*/ /*====================================== = Counter Widget = ======================================*/ .counter-inner-wrap { text-align: center; line-height: 1.6; } .counter-inner-wrap .counter-area { font-size: 48px; color: #333333; line-height: 1; text-align: center; } .counter-inner-wrap .counter-area div, .counter-inner-wrap .counter-area span { display: inline-block; } .counter-inner-wrap .counter-area div { letter-spacing: -1px; } .counter-inner-wrap .counter-area span { margin-left: -10px; } .counter-icon i { font-size: 32px; margin-bottom: 20px; color: #48688e; } .counter-inner-wrap .ioa-widget-title { margin-bottom: 0; margin-top: 10px; padding: 0; font-size: 12px; color: #333333; font-weight: 400; text-transform: uppercase; } .counter-inner-wrap.counter-styleborder { display: inline-block; display: table; border-radius: 100%; border: 1px solid #e9e9e9; opacity: 0; } .counter-inner-wrap.counter-styleborder .counter-icon i { margin-bottom: 0; } .counter-inner-wrap.counter-styleborder .counter-area-m-wrap { display: table-cell; vertical-align: middle; } /*----- End of Counter Widget ------*/ /*================================= = Easy List = =================================*/ .full_width .magic_list-inner-wrap { margin: 30px; } .magic_list-inner-wrap ul { padding: 0; margin: 0; } .magic_list-inner-wrap ul li { padding: 0 0 20px 0; margin: 0 0 20px 0; list-style: none; position: relative; min-height: 75px; } .magic_list-inner-wrap ul li .ioa-icon-area { position: absolute; top: -4px; left: 0; padding: 0px; line-height: 1; } .magic_list-inner-wrap ul li .ioa-icon-area i { font-size: 24px; width: auto; color: #ffffff; background: #48688e; border-radius: 100%; padding: 20px 8px; width: 63px; margin: -2px 0 0 -2px; } .magic_list-inner-wrap ul li .desc-area { margin-left: 85px; } .magic_list-inner-wrap ul li .desc-area p:first-child { margin-top: 0; } .magic_list-inner-wrap ul li h4 { margin-bottom: 0px; } .magic_list-inner-wrap ul li .desc-area .desc { margin-top: 5px; } .magic_list-inner-wrap ul li .ripple { margin: -2px 0 0 -2px; width: 16px; height: 16px; background: #48688e; } /*========== Numbered List ==========*/ .magic_list-inner-wrap.list-ordered ul li .desc-area { margin-left: 85px; } .magic_list-inner-wrap.list-ordered ul li .ioa-icon-area i { display: block; line-height: 1; color: #ffffff; background: #48688e; border-radius: 100%; padding: 20px 0px; font-size: 18px; font-style: normal; width: 60px; text-align: center; } /*============================== = Tweets = ==============================*/ .tweets-wrapper.list ul.tweets { margin: 0; padding: 0; } .tweets-wrapper.list ul.tweets li { position: relative; margin: 0 0 20px 0; min-height: 45px; border-bottom: 1px solid #000102; padding: 0 0 30px 55px; list-style: none; } .tweets-wrapper.list ul.tweets li i { background: #48688e; color: #ffffff; position: absolute; top: -2px; left: 0; padding: 12px; } /*========== Tweets slider ==========*/ .tweets-wrapper.slider ul.tweets { margin: 0; padding: 0; } .tweets-wrapper.slider ul.tweets li { position: relative; margin: 0; padding: 20px 20px 20px 20px; list-style: none; text-align: center; } .tweets-wrapper.slider ul.tweets li i { background: #48688e; color: #ffffff; position: absolute; top: 0px; left: 0px; padding: 25px 16px; } /*----- End of Tweets ------*/ /*====================================== = Pricing Tables = ======================================*/ div.pricing-table div.plan { float: left; position: relative; z-index: 1; border-radius: 0px; } div.pricing-table div.plan.last-plan { margin-right: 0; } div.pricing-table div.plan span.plan-title { margin: 0; text-align: center; display: block; font-size: 15px; text-align: center; padding: 25px; background: rgba(0, 0, 0, 0.1); color: #ffffff; position: relative; z-index: 3; } div.pricing-table div.plan.featured-plan { border-top-right-radius: 0px; border-top-left-radius: 0px; border: none; } div.pricing-table div.plan.full { float: none; width: 100%; } div.pricing-table div.plan.one_half { float: left; width: 50%; } div.pricing-table div.plan.one_third { float: left; width: 33.33%; } div.pricing-table div.plan.one_fourth { float: left; width: 25%; } div.pricing-table div.plan.one_fifth { float: left; width: 20%; } div.pricing_area { background: #000102; border-top-right-radius: 0px; border-top-left-radius: 0px; position: relative; } div.pricing_area_overlay { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; } div.pricing_area h2 { font-size: 60px; line-height: 1; color: #ffffff; text-align: center; margin: 0; padding: 40px 0; position: relative; z-index: 3; } div.pricing_area span.suffix { padding-top: 10px; padding-bottom: 30px; color: #ffffff; text-align: center; display: block; font-size: 18px; position: relative; z-index: 3; } div.pricing-table ul.pricing-row { margin: 0; padding: 0; } div.pricing-table ul.pricing-row li { padding: 20px 0; list-style: none; text-align: center; } div.pricing-table ul.pricing-row li:nth-child(even) { background: rgba(0, 0, 0, 0.02); } div.pricing-table ul.pricing-row li:nth-child(odd) { background: rgba(0, 0, 0, 0.08); } div.pricing-table ul.pricing-row li.sign-up { padding: 0; border-bottom: none; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background: #000102; } ul.pricing-row li.sign-up a { background: rgba(255, 255, 255, 0.03); display: block; margin: 0px; position: relative; color: #ffffff; text-align: center; padding: 30px 0; text-decoration: none; font-size: 16px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; } /** * Pricing Table Settings */ div.pricing-table div.featured-plan.plan { z-index: 2; border-top-right-radius: 0px; border-top-left-radius: 0px; } div.pricing-table div.featured-plan.plan ul.pricing-row li.sign-up a { background: #48688e; color: #ffffff; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; transition: background 0.3s ease; -webkit-transition: background 0.3s ease; } div.featured-plan.plan div.pricing_area h2 { color: #ffffff; } div.featured-plan div.pricing_area { background: #48688e; border-top-right-radius: 0px; border-top-left-radius: 0px; } div.pricing-table div.plan.featured-plan span.plan-title, div.plan.featured-plan div.pricing_area span.suffix { color: #ffffff; } div.featured-plan.plan .pricing_area .mini-divider { background: #fff; } /*----- End of Pricing Tables ------*/ /*====================================== = Masonry Widget = ======================================*/ div.mason-parent { position: relative; overflow: hidden; height: 500px; } div.mason-parent .isotope { opacity: 0; margin-right: -5px; } div.mason-parent i.m-tip { font-size: 84px; color: #fff; position: absolute; top: 50%; margin-top: -50px; right: -6px; width: auto; z-index: 99; } div.mason-parent div.left-icon i { right: auto; left: -6px; } span.main-demo-label { display: block; position: absolute; top: 5px; text-transform: uppercase; letter-spacing: 3px; right: 5px; z-index: 4; background: #fff; color: #1a1b1c; font-size: 12px; line-height: 1.4; width: 100px; padding: 32px 20px; border-radius: 100%; text-align: center; box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1); font-weight: 400; z-index: 99; opacity: 0; } div.mason-item { width: 25%; position: absolute; overflow: hidden; } div.mason-item.mason_one_half { width: 50%; } div.mason-item.mason_one_fourth { width: 25%; } div.mason-item img { width: 100%; height: 100%; position: relative; display: block; max-width: none; } div.mason-item div.overlay-portfolio-desc { text-align: center; } div.mason-item div.overlay-portfolio-desc h2 { width: 100%; color: #fff; } div.mason-item div.overlay-portfolio-desc div.d-content { font-size: 11px; margin-top: 5px; color: #fff; } div.mason-item div.overlay-portfolio-desc div.vertical-align { background: none; } div.mason-item div.overlay-portfolio-desc div.hoverdir-wrap { top: 0px; left: 0px; bottom: 0px; right: 0px; } div.mason-item div.overlay-portfolio-desc div.hoverdir { background: rgba(0, 0, 0, 0.7); } div.mason-item div.overlay-portfolio-desc a.read-more { background: #fff; color: #111; padding: 14px 25px; text-decoration: none; display: block; text-transform: uppercase; font-size: 11px; letter-spacing: 2px; width: 120px; margin: 10px auto 0px auto; transition: 0.3s all; -webkit-transition: 0.3s all; } div.mason-item div.overlay-portfolio-desc a.read-more:hover { background: #111; color: #ffffff; } div.mason-item div.sub_item.text-node { position: absolute; top: 0; height: 100%; width: 50%; } div.mason-left div.sub_item.text-node { left: 0; } div.mason-left.mason-item div.image-block { float: right; } div.mason-right div.sub_item.text-node { right: 0; } div.mason-right.mason-item div.image-block { float: left; } div.mason-item div.text-block { display: table; height: 100%; width: 80%; margin: 0 auto; } div.mason-item div.text-block > a.hover-link, div.mason-item div.text-block > div { display: table-cell; text-align: center; vertical-align: middle; line-height: 1; } div.mason-item div.text-block a.hover-link { text-decoration: none; color: inherit; } div.mason-item div.text-block div.hover-link-set a:hover { color: #fff; } div.mason-item div.text-block h4 { color: inherit; } div.mason-item div.text-block div.text-caption { font-size: 14px; color: inherit; } div.masonry-image { position: relative; overflow: hidden; } div.mason-image-block div.masonry-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; } div.mason-item div.sub_item { float: left; position: relative; width: 50%; } div.masonry-image div.image { overflow: hidden; width: 100%; height: 100%; } .mason-load-wrap { position: relative; display: inline-block; } .mason-button-label-wrap { cursor: pointer; } /*----- End of Masonry Widget ------*/ /*===================================== = Misc Elements = =====================================*/ .full_width .cf7-inner-wrap { margin: 30px; } /*----- End of Misc Elements ------*/ /*============================ = Search = ============================*/ .rad-search-widget h2 { margin-bottom: 0; font-size: 32px; } .rad-search-widget h4 { margin-bottom: 0; padding-bottom: 15px; } .rad-search-widget .input-area { margin-right: 170px; } .rad-search-widget .input-area input[type=text] { width: 100%; padding: 17px; background: #ffffff; border: 1px solid #eaeaea; color: #000102; } .rad-search-widget .input-area input[type=text]:focus { background: #fafafa; border: 1px solid #eaeaea; color: #000102; } .rad-search-widget form { position: relative; } .rad-search-widget input[type=submit] { position: absolute; top: 0; right: 0; transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 19px 20px 18px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; width: 145px; text-align: center; } .rad-search-widget input[type=submit]:hover { background: #000102; border-color: #000102; color: #ffffff; } /*----- End of Search ------*/ /*================================== = Mail Chimp = ==================================*/ .mailchimp-inner-wrap .input-area { margin-right: 130px; } .mailchimp-inner-wrap .input-area > div { width: 46%; float: left; margin-left: 6px; position: relative; } .mailchimp-inner-wrap .input-area div:first-child { margin-left: 0; } .mailchimp-inner-wrap .input-area div input[type=text] { width: 100%; } .mailchimp-inner-wrap .input-area div span { position: absolute; top: -24px; right: 0px; background: #FD5D56; color: #fff; padding: 3px 8px; display: none; font-size: 10px; font-style: italic; } .mailchimp-inner-wrap form { position: relative; } .mailchimp-inner-wrap a { height: 52px; position: absolute; top: 0; right: 0; transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 18px 20px 17px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; width: 145px; text-align: center; } .mailchimp-inner-wrap a:hover { background: #000102; border-color: #000102; color: #ffffff; } .mailchimp-subscription-confirmation { display: none; padding: 20px; text-align: center; background: #000102; color: #ffffff; } .full_width div.mailchimp-inner-wrap { padding: 10px 5%; } /*----- End of Mail Chimp ------*/ a.modal-trigger { text-decoration: none; display: inline-block; border-bottom: 1px solid #000102; letter-spacing: 1px; text-transform: uppercase; } a.modal-trigger:hover { border-bottom: 1px solid #48688e; } /** * Scrolller Widget * */ a.m-controls { position: absolute; z-index: 3; top: 50%; margin-top: -50px; padding: 0px 15px; text-decoration: none; font-size: 50px; /*background:url(sprites/i/slider_left.png);*/ color: #333333; } a.m-controls:hover { background: transparent; color: #333333; } a.m-next { right: 0; } a.m-left { left: 0; } .revolution-slider .tp-leftarrow{ background-color: transparent !important; width: 35px; height: 68px; background-image: url(sprites/i/slider_left.png); background-position: center top; } /** * Image Compare * */ .cd-image-container { position: relative; max-width: 100%; margin: 0; } .cd-image-container img { display: block; } .cd-image-label { position: absolute; bottom: 0; z-index: 3; right: 25px; color: #ffffff; padding: 15px; opacity: 0; text-transform: uppercase; } .cd-image-label.is-hidden { visibility: hidden; } .is-visible .cd-image-label { opacity: 1; } .cd-resize-img { z-index: 4; position: absolute; top: 0; left: 0; width: 0; height: 100%; overflow: hidden; background: no-repeat left top; background-size: auto 100%; /* Force Hardware Acceleration in WebKit */ -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cd-resize-img .cd-image-label { right: auto; left: 25px; } .is-visible .cd-resize-img { width: 50%; /* bounce in animation of the modified image */ -webkit-animation: fadeIn 0.7s; -moz-animation: fadeIn 0.7s; animation: fadeIn 0.7s; } .cd-handle { position: absolute; width: 44px; /* center the element */ left: 50%; top: 50%; margin-left: -22px; margin-top: -22px; border-radius: 50%; background: #48688e; cursor: move; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1); opacity: 0; -webkit-transform: translate3d(0, 0, 0) scale(0); -moz-transform: translate3d(0, 0, 0) scale(0); -ms-transform: translate3d(0, 0, 0) scale(0); transform: translate3d(0, 0, 0) scale(0); z-index: 10; text-align: center; color: #ffffff; font-size: 16px; padding: 7px 0; } .cd-handle.draggable { /* change background color when element is active */ background-color: #000102; color: #ffffff; } .is-visible .cd-handle { opacity: 1; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); -ms-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: -webkit-transform 0.3s 0.7s, opacity 0s 0.7s; -moz-transition: -moz-transform 0.3s 0.7s, opacity 0s 0.7s; transition: transform 0.3s 0.7s, opacity 0s 0.7s; } /** * Twitter Tweets * */ .tweets-slider { position: relative; height: 400px; } .tweets-slider .swiper-container { width: 100%; height: 100%; opacity: 1; visibility: visible; } .tweets-slider .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .tweets-slider i { font-size: 32px; color: #48688e; margin-bottom: 15px; text-align: center; display: block; margin: 0 auto 15px auto; } .tweet-slide-wrap { max-width: 70%; } .tweets-slider .user-link { text-decoration: none; font-size: 13px; display: block; } .tweets-slider .human-time { font-size: 12px; color: #000102; font-size: 12px; display: block; } div.diagonal-row-wrap { height: 100px; overflow: hidden; position: relative; z-index: 10; position: absolute; top: 0; left: 0; width: 100%; z-index: 4; } div.diagonal-row { position: absolute; width: 135%; height: 100px; } div.diagonal-row.d-l { transform: rotate(-2deg); -webkit-transform: rotate(-2deg); left: -50px; bottom: 0; -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } div.diagonal-row.d-r { transform: rotate(2deg); -webkit-transform: rotate(2deg); right: -50px; bottom: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; } div.diagonal-row-wrap.bottom-row-wrap { bottom: 0; top: auto; } div.diagonal-row-wrap.bottom-row-wrap div.diagonal-row { top: 0; -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; right: -50px; } div.diagonal-row-wrap.bottom-row-wrap div.diagonal-row.d-r { -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; } /** * Timeline Stylings */ .posts-timeline { position: relative; z-index: 2; } div.posts-tree { margin-bottom: 40px; position: relative; } div.posts-tree .no-posts-found { padding: 15px; text-align: center; margin: 10px 0; } div.posts-tree div.timeline-post { width: 50%; float: left; text-align: right; margin: 10px 0px 30px 0px; clear: left; padding: 0px 60px 0px 0px; position: relative; z-index: 2; } div.posts-tree div.right-post { float: right; margin: 10px 0px 30px 0px; clear: right; text-align: left; padding: 0px 0px 0px 59px; } div.posts-tree div.timeline-post h3.title { font-size: 24px; padding: 0; line-height: 1.2; margin-bottom: 15px; position: relative; } div.posts-tree div.timeline-post h3.title a { color: #333333; word-wrap: break-word; text-decoration: none; } div.posts-tree div.timeline-post h3.title a:hover { color: #48688e; text-decoration: none; } div.posts-tree div.timeline-post div.image a.imageholder, div.posts-tree div.timeline-post div.image img { display: block; } div.posts-tree div.timeline-post div.image { position: relative; z-index: 2; -webkit-backface-visibility: hidden; backface-visibility: hidden; } div.posts-tree div.timeline-post div.image img { width: 100%; height: auto; } div.posts-tree div.timeline-post div.desc { margin: 20px 0; color: #000102; position: relative; overflow: hidden; } div.posts-tree div.timeline-post a.read-more { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; } div.posts-tree div.timeline-post a.read-more:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } div.posts-tree div.timeline-post a.read-more i { width: auto; } div.posts-tree div.timeline-post a.read-more:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } div.posts-tree div.timeline-post a.read-more:hover:after { width: 100%; display: none; } div.posts-tree div.timeline-post.right-post a.main-button { float: left; } div.posts-tree div.timeline-post span.date { font-size: 24px; color: #333333; padding: 10px 15px; display: block; z-index: 10; display: block; position: absolute; top: -20px; right: 6px; } div.posts-tree div.right-post.timeline-post span.date { left: 6px; right: auto; } div.posts-tree div.extras { color: #000102; margin-bottom: 5px; font-size: 12px; line-height: 1.4; font-weight: 400; } div.posts-tree div.extras a { text-decoration: none; display: inline-block; color: #a9adb0; } div.posts-tree div.extras a:hover { color: #787b7d; } div.posts-tree div.timeline-post div.desc:after { background: linear-gradient(rgba(255, 255, 255, 0), white, white); position: absolute; bottom: -50px; left: 0; width: 100%; z-index: 2; height: 100px; display: block; } div.posts-tree span.line { position: absolute; top: 0; left: 50%; margin-left: -1px; height: 100%; background: #e9e9e9; width: 1px; display: block; } div.posts-tree { position: relative; } div.posts-tree .month-label { position: relative; font-size: 13px; z-index: 2; padding: 15px; background: #ffffff; margin: 0px auto 30px auto; text-align: center; clear: both; } div.posts-tree h4.post-end { position: relative; font-size: 12px; z-index: 2; padding: 20px 25px; background: #f0f0f0; text-align: center; color: #000102; width: 200px; margin: 0px auto 30px auto; text-align: center; clear: both; } span.circle { position: absolute; left: 50%; bottom: -50px; margin-left: -50px; width: 100px; text-align: center; opacity: 1; z-index: 5; transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 18px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } .default-color-palette { border: 1px solid #e9e9e9; padding: 25px; margin-top: 25px; } .default-color-palette h3, .default-color-palette h4 { color: #333333; } .default-color-palette .secondary-color { color: #000102; } .default-color-palette .link a { color: #000102; } .default-color-palette .link a:hover { color: #48688e; } .default-color-palette .alt-link a { color: #a9adb0; } .default-color-palette .alt-link a:hover { color: #000102; } div.palette-section { margin-top: 25px; } div.palette-section div > div { float: left; width: 33%; margin-right: 1px; padding: 25px; margin-top: 25px; } .primary-color-palette { border: 1px solid #787b7d; background: #48688e; color: #ffffff; } .primary-color-palette h3, .primary-color-palette h5 { color: #ffffff; } .primary-color-palette .link a { color: #ffffff; } .primary-color-palette .link a:hover { color: #ffffff; } .secondary-color-palette { border: 1px solid #000102; background: #000102; color: #ffffff; } .secondary-color-palette h3, .secondary-color-palette h5 { color: #ffffff; } .secondary-color-palette .link a { color: #787b7d; } .secondary-color-palette .link a:hover { color: #ffffff; } .tertiary-color-palette { border: 1px solid #f0f0f0; background: #f0f0f0; color: #000102; } .tertiary-color-palette h3, .tertiary-color-palette h5 { color: #000102; } .tertiary-color-palette .link a { color: #000102; } .tertiary-color-palette .link a:hover { color: #787b7d; } .inputsandbuttons { margin-top: 25px; border: 1px solid #e9e9e9; padding: 25px; } .inputsandbuttons .main-button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 15px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } .inputsandbuttons .main-button:hover { background: #000102; border-color: #000102; color: #ffffff; } .inputsandbuttons .secondary-button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #000102; padding: 15px 30px; font-size: 12px; color: #000102; display: inline-block; text-decoration: none; background: transparent; border-radius: 0px; text-transform: uppercase; } .inputsandbuttons .secondary-button:hover { background: #000102; border-color: #000102; color: #ffffff; } .inputsandbuttons .simple-button { transition: all 0.2s ease-in-out; outline: none; padding: 10px 0px; font-size: 12px; color: #48688e; display: inline-block; text-decoration: none; text-transform: none; letter-spacing: 0x; position: relative; } .inputsandbuttons .simple-button:after { content: ' '; position: absolute; bottom: 5px; background: #a9adb0; height: 1px; width: 0; left: -1px; transition: width 0.3s ease; } .inputsandbuttons .simple-button i { width: auto; } .inputsandbuttons .simple-button:hover { color: #48688e; letter-spacing: 0px; text-transform: none; } .inputsandbuttons .simple-button:hover:after { width: 100%; display: none; } .inputsandbuttons form { margin-bottom: 25px; } .pre-typography { border: 1px solid #e9e9e9; padding: 25px; margin-top: 25px; } /* ## DOCUMENT INFORMATION - Document: Stylings for Media Widgets - Version: 0.1 - Author: Hein Maas - Notes : */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Gallery 2. Quartz Slider 3. Image Accordion 4. Grid columns 5. BX Scrollable ----- End of Table of Contents ---------- */ /*===================================== = Quartz Slider = =====================================*/ /*========== General Stylings ==========*/ .quartz { margin: 0px auto 0px auto; position: relative; padding: 0; width: 600px; max-width: 100%; min-height: 200px; visibility: hidden; opacity: 0; overflow: hidden; } .quartz .skeleton { z-index: 5; height: 100%; } .quartz div.items-holder { position: relative; border: none; width: 100%; z-index: 2; } .quartz div.items-view { position: relative; border: none; width: 100%; z-index: 2; overflow: hidden; } .quartz div.items-view div.items-holder { position: absolute; border: none; width: 100%; z-index: 2; transition: left 0.7s cubic-bezier(0.62, 0.28, 0.23, 0.99); -webkit-transition: left 0.7s cubic-bezier(0.62, 0.28, 0.23, 0.99); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .quartz div.slider-item { position: absolute; top: 0; left: 0; bottom: 0; border: none; overflow: hidden; margin: 0; padding: 0; display: block; width: 100%; z-index: 1; } .quartz div.slider-item > a { margin: 0; padding: 0; outline: none; border: none; text-decoration: none; display: block; width: 100%; } .quartz div.slider-item img { margin: 0 auto; padding: 0; display: block; width: 100%; height: auto; position: relative; z-index: 1; } .quartz div.height-sensitive-slide.slider-item img, .quartz.full-stretch div.height-sensitive-slide.slider-item img { width: auto; height: 100%; margin: 0 auto; min-width: 0; } .quartz div.slider-item.hidden { z-index: 2; display: none; } .quartz div.slider-item.active { z-index: 17; } .quartz div.slider-item.reset { z-index: 5; } .quartz div.items-view div.items-holder div.slider-item.hidden, .quartz div.items-view div.items-holder div.slider-item.active, .quartz div.items-view div.items-holder div.slider-item.reset { z-index: 2; display: block; } .quartz div.custom_slide_style { display: none; } div.quartz-slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .quartz div.slider-item > a.quartz-caption-toggle, .quartz div.slider-item > a.quartz-caption-close { position: absolute; top: 12px; right: 12px; padding: 15px; font-size: 10px; background: rgba(0, 0, 0, 0.8); color: #fff; z-index: 103; width: auto; height: auto; border-radius: 0px; bottom: auto; left: auto; line-height: 1; display: none; } .mobile-caption-holder { position: absolute; top: 12px; right: 12px; left: 12px; bottom: 12px; background: rgba(255, 255, 255, 0.8); color: #333; z-index: 100; display: none; } .mobile-caption-holder .mobile-caption-inner-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: auto; padding: 25px; } .mobile-caption-holder h2, .mobile-caption-holder h4, .mobile-caption-holder p { color: inherit; -webkit-animation-duration: 1s; animation-duration: 1s; } .mobile-caption-holder .mobile-caption-inner-wrap a.hover-link { margin-right: 5px; text-decoration: none; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 9px 14px; display: inline-block; } /*========== Special case ==========*/ .quartz div.items-view div.slider-item { position: relative; float: left; } .quartz.full-stretch div.slider-item img { width: 100%; } .ioa-fullscreen-indicator { background: rgba(0, 0, 0, 0.8); color: #fff; font-size: 15px; padding: 15px; border-radius: 0px; position: fixed; bottom: 30px; left: 50%; margin-left: -30px; display: block; z-index: 80; } .quartz .canvas-wrap { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 20; display: block; } /*========== Controls ==========*/ .quartz-bullets-wrap { position: absolute; bottom: 0; left: 0; right: 0; } .presentation-mode .quartz-bullets-wrap { top: 0; right: 0; left: auto; bottom: auto; } .quartz ul.quartz-bullets { position: relative; margin: 0 0; padding: 8px 4px 8px 8px; z-index: 4; display: inline-block; text-align: center; } .quartz ul.quartz-bullets li { margin-right: 8px; cursor: pointer; float: left; list-style: none; position: relative; width: 11px; height: 11px; padding: 0px; } .quartz ul.quartz-bullets li img { width: 75px; height: 75px; display: block; } .quartz ul.quartz-bullets li div { position: absolute; width: 75px; height: 75px; top: -95px; left: -37.5px; display: block; opacity: 0; transform: scale(0.9); transition: all 0.2s; } .quartz ul.quartz-bullets li .d-control { background: rgba(0, 0, 0, 0.5); width: 11px; height: 11px; position: absolute; top: 0; left: 0; display: block; border-radius: 100%; transition: all 0.3s ease-in-out; } .quartz ul.quartz-bullets li .a-control { background: rgba(255, 255, 255, 0.9); width: 11px; height: 11px; position: absolute; top: -18x; left: 0; display: block; border-radius: 100%; transition: all 0.3s ease-in-out; opacity: 0; } .quartz ul.quartz-bullets li.active .a-control { top: 0px; opacity: 1; } .quartz ul.quartz-bullets li.active .d-control { top: 18px; opacity: 0; } .quartz ul.quartz-bullets li:hover div { top: -85px; opacity: 1; transform: scale(1); } .presentation-mode ul.quartz-bullets li { float: none; display: block; margin-bottom: 10px; } div.quartz-controls-wrap { position: absolute; z-index: 30; width: 100%; height: 100%; top: 0; left: 0; } div.quartz-controls-wrap > a { position: absolute; text-decoration: none; opacity: 0; } div.quartz-controls-wrap a.autoplay-control { position: absolute; text-decoration: none; opacity: 1; background: rgba(0, 0, 0, 0.6); text-align: center; color: #fff; font-size: 14px; font-weight: 400; padding: 15px 17px; line-height: 0px; display: block; z-index: 100; transition: all 0.2s ease-in-out; margin-top: 0; border-radius: 0px; bottom: 1px; right: 47px; } div.quartz-controls-wrap a.autoplay-control .progress-bar { display: none; position: absolute; } /*========== Homepage Slider Stylings ==========*/ .rev_slider .tp-bullets { bottom: -40px !important; position: absolute; } /*========== End Of Homepage Slider Stylings ==========*/ /* Autoplay */ a.scroll-to-bottom, a.scroll-to-bottom:before { position: absolute; z-index: 150; bottom: 20px; left: 50%; color: #fff; display: block; } a.scroll-to-bottom { width: 32px; height: 54px; margin-left: -16px; box-shadow: inset 0 0 0 1px #fff; border-radius: 25px; } a.scroll-to-bottom:before { content: ''; width: 4px; height: 5px; background: #fff; margin-left: -2px; top: 8px; border-radius: 4px; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: scroll; animation-name: scroll; } @-webkit-keyframes scroll { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(46px); transform: translateY(46px); } } @keyframes scroll { 0% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translateY(46px); transform: translateY(46px); } } /*========== Thumb Animation for Controls ==========*/ .quartz div.slider-item img.slide-desc-image { margin: 0 auto; display: block; width: auto; } div.quartz-controls-wrap > a.slider-prev { top: 0%; left: 0px; height: 100%; width: 50%; cursor: url(sprites/i/pagination-prev-white.png), auto; } div.quartz-controls-wrap > a.slider-next { top: 0%; right: 0px; height: 100%; width: 50%; cursor: url(sprites/i/pagination-next-white.png), auto; } .single-slide-mode div.quartz-controls-wrap > a.slider-prev, .single-slide-mode div.quartz-controls-wrap > a.slider-next { cursor: auto; display: none; } /*========== Tabbed Layout ==========*/ div.ioa-tabbed-layout { padding: 30px 0; text-align: center; position: relative; } div.ioa-tabbed-layout ul { padding: 0; margin: 0; display: inline-block; } div.ioa-tabbed-layout ul li { list-style: none; float: left; opacity: 0.4; transition: opacity 0.3s ease-in-out; -webkit-transition: opacity 0.3s ease-in-out; } div.ioa-tabbed-layout ul li.active, div.ioa-tabbed-layout ul li:hover { opacity: 1; } div.ioa-tabbed-layout ul li a { text-decoration: none; display: block; margin: 0px 15px; } div.ioa-tabbed-layout ul li img { max-height: 48px; width: auto; display: block; margin: 0 auto; } div.ioa-tabbed-layout ul li span { display: block; font-size: 12px; margin-top: 18px; } .quartz-tip { position: absolute; bottom: -10px; left: 0; font-size: 30px; color: #fff; z-index: 20; -webkit-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; } /*========== Captions Stylings ==========*/ /* General Stylings */ .quartz div.slider-desc { position: absolute; color: #fff; display: block; z-index: 40; display: none; padding: 0px; top: 40%; left: 50px; width: 50%; } .quartz div.slider-desc.caption-background { padding: 30px; background: rgba(0, 0, 0, 0.4); } .quartz div.slider-desc .inner-desc-wrap > p { margin: 2px 0 0 0; padding: 0; } .quartz div.slider-desc h2 { margin: 0 0 10px 0; padding: 0; display: inline-block; font-size: 40px; color: inherit; position: relative; line-height: 1.1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .quartz div.slider-desc h4 { margin: 0 0 10px 0; padding: 0; display: inline-block; font-size: 28px; line-height: 1; color: inherit; position: relative; line-height: 1.1; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .quartz div.slider-desc div.caption { font-size: 18px; position: relative; } .quartz div.slider-desc div.caption p { margin-bottom: 0px; padding-bottom: 0; } .quartz div.slider-desc a.hover-link { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 7px 25px; font-size: 14px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; margin-top: 10px; margin-left: 15px; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; } .quartz div.slider-desc a.hover-link:hover { background: #000102; border-color: #000102; color: #ffffff; } .quartz div.slider-desc a.hover-link:first-child { margin-left: 0; } p.link-p { clear: both; display: block; padding-bottom: 0; } /*========== Caption Positioning ==========*/ .quartz div.slider-desc.s-t-l { top: 50px; left: 50px; } .quartz div.slider-desc.s-t-c { top: 50px; text-align: center; width: 100%; } .quartz div.slider-desc.s-t-r { top: 50px; right: 50px; text-align: right; left: auto; } .quartz div.slider-desc.s-c-l { top: 40%; left: 50px; max-width: 50%; } .quartz div.slider-desc.s-c-c { top: 50px; right: 50px; width: 50%; text-align: center; } .quartz div.slider-desc.s-c-r { right: 50px; max-width: 50%; text-align: right; left: auto; } .quartz div.slider-desc.s-b-l { bottom: 50px; left: 50px; top: auto; } .quartz div.slider-desc.s-b-c { bottom: 50px; left: 50px; width: 100%; text-align: center; top: auto; } .quartz div.slider-desc.s-b-r { bottom: 50px; right: 50px; text-align: right; left: auto; top: auto; } .tparrows.tp-rightarrow:before , .tparrows.tp-leftarrow:before { content:' '!important; } .tp-leftarrow{ border-radius: 0 !important; font-family: "themify"; font-style: normal; font-weight: 400; speak: none; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; font-size: 50px; height: 96px !important; padding: 14px 0; color: #000; width: 35px !important; -webkit-font-smoothing: antialiased; background: url(sprites/i/Leftarrow.svg) center center no-repeat !important; background-size: 70px !important; } .tp-rightarrow{ border-radius: 0 !important; font-family: "themify"; font-style: normal; font-weight: 400; speak: none; text-decoration: inherit; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; font-size: 50px; height: 96px !important; padding: 14px 0; color: #000; width: 35px !important; -webkit-font-smoothing: antialiased; background: url(sprites/i/Rightarrow.svg) center center no-repeat !important; background-size: 70px !important; } .revolution-slider .title_bg { background: transparent !important; } .tp-leftarrow.default:before { content: ' '; } .tp-rightarrow.default:before { content: ' '; } .tp-rightarrow.default { border-top-left-radius: 5px !important; border-bottom-left-radius: 5px !important; } .tp-leftarrow.default { border-top-right-radius: 5px !important; border-bottom-right-radius: 5px !important; } .tp-bullets { bottom: -30px !important; left: 50%; margin-left: -35px; position: absolute; } .tp-bullets .tp-bullet { width: 11px !important; height: 11px !important; background: #202b3d; border-radius: 100%; margin: 0 8px 0px 0px !important; display: inline-block; } .tp-bullets .tp-bullet.selected, .tp-bullets .tp-bullet:hover { background: #48688e; } .revolution-slider .tp-caption a { font-size: 24px !important; font-weight: 300; line-height: 24px; } .page-wrapper #rev_slider_2_1_wrapper ul.tp-revslider-mainul li div.tp-caption { font-size: 24px !important; font-weight: 300; line-height: 30px; color: #333333; } .revolution-slider .tp-caption.mediumwhitebg, .mediumwhitebg { width: 30%; } .revolution-slider .desc_wrapper { width: 30%; padding: 30px 15px 30px 15px; } .revolution-slider .desc_wrapper h3 { font-size: 24px; font-weight: 300; } .revolution-slider .desc_wrapper p.slider_desc { width: 90%; overflow: hidden; font-size: 13px; line-height: 1.2; padding-bottom: 0; } .revolution-slider .desc_wrapper a { color: #48688e; font-size: 13px; } .revolution-slider .desc_wrapper a:hover { color: #48688e; } .swiper-container { margin: 0 auto; position: relative; overflow: hidden; z-index: 1; } .swiper-container-no-flexbox .swiper-slide { float: left; } .swiper-container-vertical > .swiper-wrapper { -webkit-box-orient: vertical; -moz-box-orient: vertical; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; } .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .swiper-container-android .swiper-slide, .swiper-wrapper { -o-transform: translate(0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .swiper-container-multirow > .swiper-wrapper { -webkit-box-lines: multiple; -moz-box-lines: multiple; -ms-fles-wrap: wrap; -webkit-flex-wrap: wrap; flex-wrap: wrap; } .swiper-container-free-mode > .swiper-wrapper { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; margin: 0 auto; } .swiper-slide { -webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; position: relative; } .swiper-container .swiper-notification { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: -1000; } .swiper-wp8-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .swiper-wp8-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; width: 27px; height: 44px; margin-top: -22px; z-index: 10; cursor: pointer; -moz-background-size: 27px 44px; -webkit-background-size: 27px 44px; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled { opacity: .35; cursor: auto; pointer-events: none; } .swiper-button-prev, .swiper-container-rtl .swiper-button-next { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); left: 10px; right: auto; } .swiper-button-prev.swiper-button-black, .swiper-container-rtl .swiper-button-next.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-prev.swiper-button-white, .swiper-container-rtl .swiper-button-next.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next, .swiper-container-rtl .swiper-button-prev { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E"); right: 10px; left: auto; } .swiper-button-next.swiper-button-black, .swiper-container-rtl .swiper-button-prev.swiper-button-black { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E"); } .swiper-button-next.swiper-button-white, .swiper-container-rtl .swiper-button-prev.swiper-button-white { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); } .swiper-pagination { position: absolute; text-align: center; -webkit-transition: 300ms; -moz-transition: 300ms; -o-transition: 300ms; transition: 300ms; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); z-index: 10; } .swiper-pagination.swiper-pagination-hidden { opacity: 0; } .swiper-pagination-bullet { margin: 0px 4px; width: 8px; height: 8px; display: inline-block; border-radius: 100%; background: #000; opacity: .2; } .swiper-pagination-clickable .swiper-pagination-bullet { cursor: pointer; } .swiper-pagination-white .swiper-pagination-bullet { background: #fff; } .swiper-pagination-bullet-active { opacity: 1; background: #48688e; } .swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; } .swiper-pagination-black .swiper-pagination-bullet-active { background: #000; } .swiper-container-vertical > .swiper-pagination { right: 10px; top: 50%; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -o-transform: translate(0, -50%); -ms-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } .swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet { margin: 5px 0; display: block; } .swiper-container-horizontal > .swiper-pagination { bottom: 10px; left: 0; width: 100%; } .swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet { margin: 0 5px; } .swiper-container-3d { -webkit-perspective: 1200px; -moz-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .swiper-container-3d .swiper-cube-shadow, .swiper-container-3d .swiper-slide, .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top, .swiper-container-3d .swiper-wrapper { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .swiper-container-3d .swiper-slide-shadow-bottom, .swiper-container-3d .swiper-slide-shadow-left, .swiper-container-3d .swiper-slide-shadow-right, .swiper-container-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; } .swiper-container-3d .swiper-slide-shadow-left { background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-3d .swiper-slide-shadow-right { background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-3d .swiper-slide-shadow-top { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-3d .swiper-slide-shadow-bottom { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(transparent)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), transparent); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent); } .swiper-container-coverflow .swiper-wrapper { -ms-perspective: 1200px; } .swiper-container-fade.swiper-container-free-mode .swiper-slide { -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -ms-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; } .swiper-container-fade .swiper-slide { pointer-events: none; } .swiper-container-fade .swiper-slide-active { pointer-events: auto; } .swiper-container-cube { overflow: visible; } .swiper-container-cube .swiper-slide { pointer-events: none; visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; transform-origin: 0 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; width: 100%; height: 100%; } .swiper-container-cube.swiper-container-rtl .swiper-slide { -webkit-transform-origin: 100% 0; -moz-transform-origin: 100% 0; -ms-transform-origin: 100% 0; transform-origin: 100% 0; } .swiper-container-cube .swiper-slide-active, .swiper-container-cube .swiper-slide-next, .swiper-container-cube .swiper-slide-next + .swiper-slide, .swiper-container-cube .swiper-slide-prev { pointer-events: auto; visibility: visible; } .swiper-container-cube .swiper-cube-shadow { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; background: #000; opacity: .6; -webkit-filter: blur(50px); filter: blur(50px); } .swiper-container-cube.swiper-container-vertical .swiper-cube-shadow { z-index: 0; } .swiper-scrollbar { border-radius: 10px; position: relative; -ms-touch-action: none; background: rgba(0, 0, 0, 0.1); } .swiper-container-horizontal > .swiper-scrollbar { position: absolute; left: 1%; bottom: 3px; z-index: 50; height: 5px; width: 98%; } .swiper-container-vertical > .swiper-scrollbar { position: absolute; right: 3px; top: 1%; z-index: 50; width: 5px; height: 98%; } .swiper-scrollbar-drag { height: 100%; width: 100%; position: relative; background: rgba(0, 0, 0, 0.5); border-radius: 10px; left: 0; top: 0; } .swiper-scrollbar-cursor-drag { cursor: move; } .swiper-lazy-preloader { width: 42px; height: 42px; position: absolute; left: 50%; top: 50%; margin-left: -21px; margin-top: -21px; z-index: 10; -webkit-transform-origin: 50%; -moz-transform-origin: 50%; transform-origin: 50%; -webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite; -moz-animation: swiper-preloader-spin 1s steps(12, end) infinite; animation: swiper-preloader-spin 1s steps(12, end) infinite; } .swiper-lazy-preloader:after { display: block; content: ""; width: 100%; height: 100%; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-position: 50%; -webkit-background-size: 100%; background-size: 100%; background-repeat: no-repeat; } .swiper-lazy-preloader-white:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); } @-webkit-keyframes swiper-preloader-spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes swiper-preloader-spin { 100% { transform: rotate(360deg); } } /* ## DOCUMENT INFORMATION - Document: Single Post Structure Stylings - Version: 0.1 - Author: Hein Maas - Notes : */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. General Stylings 2. Extra Information Area 3. Author Box 4. Comments 5. Related Posts ----- End of Table of Contents ---------- */ /*======================================== = General Stylings = ========================================*/ .post-format-standard.single-post-content .page-content { padding: 50px 0; } .fb_iframe_widget span, .fb_iframe_widget { max-width: 100% !important; } div.fb_comments_template { margin-bottom: 50px; } .post-title-wrap { margin-bottom: 50px; } .post-title-wrap h1 { margin-bottom: 0; margin-top: 0; margin-right: 30%; font-size: 40px; line-height: 1.2; } .post-title-wrap h1 i { margin-right: 15px; } .post-bottom-section { margin: 20 0 10px 0; padding: 0; border-top: 1px solid #e9e9e9; } .post-bottom-section .single-social-share a { margin-bottom: 0; } .page-content hr { height: 1px; border: none; background: #eaeaea; margin: 50px 0; } .single-social-share a { margin-bottom: 2px; } /*----- End of General Stylings ------*/ p.post_tags { margin: 0; padding: 3px 0 0 0; font-size: 12px; } p.post_tags span { font-weight: 600; } p.post_tags a { transition: all 0.2s ease-in-out; outline: none; border: 1px solid #48688e; padding: 5px 7px; color: #ffffff; display: inline-block; text-decoration: none; background: transparent; border-radius: 0px; text-transform: uppercase; outline: none; margin: 0px 5px 5px 0px; font-size: 10px !important; -webkit-font-smoothing: subpixel-antialiased; letter-spacing: 2px; font-weight: 400; } p.post_tags a:hover { background: #000102; border-color: #000102; color: #ffffff; border: 1px solid #48688e; } div.single-social-share { text-align: center; margin-top: 20px; } div.single-social-share a { border-right: 1px solid rgba(255, 255, 255, 0.6); text-decoration: none; padding: 0 10px; line-height: 1; font-size: 14px; } div.single-social-share a, div.single-social-share div.like-us-wrap { display: inline-block; color: #fff; } div.single-social-share a span.count { font-size: 12px; margin-left: 5px; display: inline-block; } div.like-us-wrap i, div.like-us-wrap span { color: #fff; } /*============================================== = Extra Information Area = ==============================================*/ div.meta-info, div.meta-info a { padding: 0; color: #fff; text-decoration: none; position: relative; font-size: 9px; font-weight: 400; } div.meta-info a:after { content: ' '; position: absolute; height: 1px; background: #fff; width: 100%; left: 0; bottom: -1px; } div.meta-info div.post-cats { float: left; } div.meta-info div.extra-info { float: left; } .meta-info > div { padding: 5px 0; } /*----- End of Extra Information Area ------*/ div.review-info .hide { display: none; } /*================================ = Comments = ================================*/ div.comment-tabbed-area.ui-tabs > .ui-tabs-panel { padding: 0; } div.comment-tabbed-area.ui-tabs ul.comment-nav-tab.ui-tabs-nav { border-bottom: 2px solid #000102; color: #000102; } div.fb_iframe_widget_fluid { display: block; } div.fb_iframe_widget_fluid > span, div.fb_iframe_widget_fluid iframe { width: 100% !important; } #comments, #facebookcomments, #disquscomments { margin: 0 0 50px 0; } ol.comment-list { list-style: none; padding: 30px 0px 30px 0px; margin: 0 0 30px 0; border-bottom: 1px solid #e9e9e9; } ol.comment-list li.comment { padding-bottom: 30px; position: relative; } ol.comment-list li.comment:last-child { padding-bottom: 10px; } ol.children { list-style: none; padding: 30px 0 0px 30px; margin: 0; } ol.children li.comment:last-child { padding-bottom: 0px; } div.image-info { position: absolute; border: 1px solid #e9e9e9; border-radius: 0px; top: 0px; left: 0px; } div.image-info img { display: block; float: left; } div.image-info > a { float: left; font-size: 11px; color: #000102; } div.comment-info { position: relative; } div.comment-body { padding: 25px; margin-bottom: 20px; position: relative; min-height: 80px; margin-left: 120px; border: 1px solid #e9e9e9; border-radius: 0px; } div.comment-body span.arrow { display: none; } #comments .fn { display: block; font-size: 14px; font-weight: 400; text-transform: uppercase; } #comments a.comment-time { text-decoration: none; font-size: 11px; color: #000102; font-weight: 300; text-transform: uppercase; } div.comment-body img.avatar { display: block; max-width: 100%; } #comments div.reply { position: absolute; top: 5px; right: 5px; } #comments a.comment-reply-link { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 5px 12px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } #comments a.comment-reply-link:hover { background: #000102; border-color: #000102; color: #ffffff; } div.comment-text { margin-top: 20px; } p.no-comments { border: 1px solid #e9e9e9; text-align: center; display: block; padding: 30px; } #comments img { display: inline; } /*========== Comments Form ==========*/ #respond { clear: both; padding: 0; position: relative; margin-top: 0px; margin-bottom: 50px; } #respond h3#reply-title { margin-top: 15px; font-size: 18px; line-height: 1.6; } #respond h3.custom-font { color: #333333; font-size: 18px; line-height: 1.6; margin-bottom: 10px; } .comment-form { border-top: none; padding: 0 0 50px 0; } .comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url] { border: 1px solid #e9e9e9; font-size: 13px; line-height: 18px; margin-bottom: 9px; padding: 10px; width: 90%; border-radius: 0px; background: #ffffff; color: #000102; } .comment-form code { border: none; color: #000102; font-size: 11px; padding: 2px 4px; line-height: 1.4; } .comment-form { margin-left: 0px; margin-top: 0px; } .comment-form p.single-row-textfield { float: left; margin-bottom: 10px; width: 32%; } .comment-form p.comment-form-url { margin-right: 0; } .comment-form input[type=submit] { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 18px 24px; font-size: 13px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } .comment-form input[type=submit]:hover { background: #000102; border-color: #000102; color: #ffffff; } .comment-form label { font-size: 13px; margin-right: 20px; margin-top: 14px; padding-bottom: 20px; } .comment-form p { margin: 5px 0px 0px 0px; font-size: 11px; text-transform: uppercase; color: #000102; } .comment-form p a { color: #a9adb0; } .comment-form p a:hover { color: #000102; } a#cancel-comment-reply-link { position: absolute; top: 0; right: 0; background: #48688e; padding: 2px 7px; text-decoration: none; font-size: 10px; color: #fff; border-radius: 0px; } a#cancel-comment-reply-link:hover { background: #000102; color: #ffffff; } p.comment-form-url, p.comment-form-author, p.comment-form-email { width: 33.33%; float: left; } p.comment-form-url { clear: right; } .comment-form p.comment-form-url input { width: 100%; } .comment-form p a:hover { color: #48688e; } /*----- End of Comments ------*/ /*========================================== = Project Navigation = ==========================================*/ .post-navigation .skeleton { padding: 0; width: auto; } div.prev-post-link { width: 50%; float: left; padding-right: 30px; margin-top: 20px; } div.next-post-link { width: 50%; float: right; padding-left: 30px; margin-top: 20px; } div.next-post-link { text-align: right; } .post-navigation a span { display: block; line-height: 1.4; } div.prev-post-link a { text-decoration: none; } div.next-post-link a { text-decoration: none; float: right; } .post-navigation small { font-size: 13px; color: #000102; } .post-navigation span.label { font-size: 11px; text-transform: uppercase; font-weight: 300; color: #000102; } .post-navigation span.link { color: #a9adb0; font-size: 18px; margin-top: 6px; } .post-navigation span.link:hover { color: #000102; } div.prev-post-link small { margin-right: 6px; } div.next-post-link small { margin-left: 6px; } .date-wrap { margin-top: 20px; } .date-wrap ul li { margin-bottom: 10px; } /*## DOCUMENT INFORMATION - Document: Footer Structure Stylings - Version: 0.1 - Author: Hein Maas - Notes : */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Footer Stylings 2. Bottom Footer Stylings ----- End of Table of Contents ---------- */ /*======================================== = Footer Stylings = ========================================*/ /*========== General Stylings ==========*/ #footer { z-index: 16; position: relative; background: #ffffff; padding-top: 28px; } div.fluid-footer div.footer-cols div.footer-wrap { padding: 50px; } .mobile_footer_widget { display: none; } a.back-to-top { position: fixed; right: 15px; visibility: hidden; bottom: 15px; color: #c2c2c2; z-index: 9995; padding: 12px 16px; border-radius: 0px; background: #48688e; overflow: hidden; width: auto; } a.bt-reveal.back-to-top { visibility: visible; animation-duration: 0.4s; -webkit-animation-duration: 0.4s; } a.back-to-top:hover { color: #48688e; opacity: 0.8; background: #c2c2c2; } /*========== Widget Area ==========*/ .inner-footer-wrapper .hover-element { display: none; } .inner-footer-wrapper { position: relative; z-index: 13; } .inner-footer-wrapper .skeleton { padding: 70px 0; } .inner-footer-wrapper .col { margin-bottom: 0; } #footer .col.last { border-right: none; } .fluid-footer .inner-footer-wrapper .col.one_half { float: left; width: 33.3%; padding: 0; margin: 0; } .fluid-footer .inner-footer-wrapper .col.one_third { float: left; width: 33.3%; padding: 0; margin: 0; } .fluid-footer .inner-footer-wrapper .col.one_fourth { float: left; width: 33.3%; padding: 0; margin: 0; } .fluid-footer .inner-footer-wrapper .col.one_fifth { float: left; width: 33.3%; padding: 0; margin: 0; } .inner-footer-wrapper .col div.footer-wrap:first-child { border: none; } /*----- End of Footer Stylings ------*/ div.footer-container { position: relative; z-index: 10; } /*===================================== = Bottom Footer = =====================================*/ #footer-menu { padding: 0px 0px 80px 0px; position: relative; z-index: 13; font-weight: 600; } #footer-menu p.footer-text { float: left; color: #48443c; font-size: 13px; margin-top: 3px; margin-bottom: 0; margin-left: 0; } #footer-menu p.footer-text a { color: #48443c; text-decoration: underline; } #footer-menu p.footer-text a:hover { color: #48688e; } #footer-menu .footer_info { float: left; display: block; width: auto; margin-right: 10px; padding-bottom: 15px; } #footer-menu .footer_nav { float: left; padding-bottom: 15px; font-size: 13px; } #footer-menu .menu { float: right; margin: 0; padding: 3px 0 0 0; } #footer-menu .menu li { float: left; list-style: none; margin: 0; border-left: 1px solid #48443c; height: 14px; line-height: 14px; } #footer-menu .menu li a { color: #48443c; position: relative; text-decoration: none; display: block; padding: 0px 7px; border-radius: 0px; } #footer-menu .menu li a:hover { color: #48688e; } #footer-menu.footer-align-center { text-align: center; } #footer-menu.footer-align-center p.footer-text, #footer-menu.footer-align-center .menu { float: none; clear: both; } #footer-menu.footer-align-right p.footer-text, #footer-menu.footer-align-right .menu { float: right; } #footer-menu.footer-align-center .menu li { display: inline-block; float: none; } .footer_social_wrapper { width: auto; float: right; margin: 0px 0 0 0px; padding: 0; text-align: right; } .footer_social_wrapper ul { list-style-type: none; margin: 0; padding: 0; float: right; } .footer_social_wrapper ul li { list-style-type: none; float: left; } .footer_social_wrapper ul li a { width: 28px; height: 28px; line-height: 28px; text-align: center; display: block; } .footer_social_wrapper ul li a img { display: block; } .footer_social_wrapper ul li a.fb { background-color: #333333; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; text-decoration: none; } .footer_social_wrapper ul li a.fb:hover { background-color: #48688e; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; } .footer_social_wrapper ul li a.gplus { margin-left: 10px; background-color: #333333; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; text-decoration: none; } .footer_social_wrapper ul li a.gplus:hover { background-color: #48688e; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; } .footer_social_wrapper ul li a.twt { background-color: #333333; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; text-decoration: none; } .footer_social_wrapper ul li a.twt:hover { background-color: #48688e; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; } .footer_social_wrapper ul li a.lkn { background-color: #333333; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; text-decoration: none; } .footer_social_wrapper ul li a.lkn:hover { background-color: #48688e; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; } .footer_social_wrapper ul li a.rss { background-color: #333333; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; text-decoration: none; } .footer_social_wrapper ul li a.rss:hover { background-color: #48688e; border-radius: 50%; color: #ffffff; font-size: 16px; margin-left: 10px; } /*----- End of Bottom Footer ------*/ div.bottomstrip { position: fixed; bottom: 0; left: 0; width: 100%; background: #ffffff; z-index: 9990; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } /* ## DOCUMENT INFORMATION - Document: Widget Stylings - Version: 0.1 - Author: Hein Maas - Notes : */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /* ## DOCUMENT INFORMATION - Document: Resuable Elements for the Theme - Version: 0.1 - Author: Hein Maas - Notes : . */ /* ## DOCUMENT INFORMATION - Document: Controller for the Style - Version: 0.1 - Hein 14-10-2014 - 14:41 - Author: ASI - Notes : The IOA Framework's SASS will use these values to make Visual Styler Palette. */ /* ## ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Basic Information about the Theme 2. Theme's Main Visual Palette 3. Primary Section Area 4. Seconadary Section Area 5. Tertiary Section Area 6. Inputs and Buttons 7. Head Area Values 8. Footer Area Values 9. Bottom Footer Part Values 10. Sidebar Area Values 11. Typography Values ----- End of Table of Contents ---------- */ /** * Default Settings * **/ /** * * Theme's Main Visual Palette * **/ /** * Font Color Stack * */ /** * * Primary Section Area * @Note - The Background should be a color area, better if same has $highlight_color * **/ /** * * Secondary Section Area * @Note - Usually it is inverse of body background color, darker for light body color and vice versa. * **/ /** * * Tertiary Section Area * @Note - Usually it is a lighter variant of body background color. * **/ /** * * Inputs and Buttons * **/ /** * * Head Area Values * @Note - To edit Head Area related stylings , goto _header_area.scss * **/ /** * * Footer Area Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Bottom Footer Part Values * @Note - To edit footer related stylings , goto footer.scss * **/ /** * * Sidebar Area Values * @Note - To edit widget related stylings , goto widgets.scss * **/ /** * * Typography Values * @Note - To edit typography related stylings , goto _typography.scss **/ /* ------------------------------------------- - Table of Contents - ---------------------------------------------- 1. Default Button for the Theme 2. Default Button hover state 3. Ajax Loading Icon ----- End of Table of Contents ----------- */ /** * * Hover State for Default Button * **/ /** * * Default Button For the Theme * **/ /** * * Hover State for Default Button * **/ /** * * Secondary Button For the Theme * **/ /** * * Hover State for secondary Button * **/ /** * * Ajax Loading Icon * **/ /** * * Footer Button For the Theme * **/ /** * * Hover State for Footer Button * **/ /** ======================================================================================================================================================= **/ /** =========================================================== Internal Framework Mixins DO NOT EDIT ========================================================== **/ /** ======================================================================================================================================================= **/ /* * Border Radius for the Theme * **/ /** * * Box Model * **/ /* ---------------------------------------- - Table of Contents - ------------------------------------------- 1. Common Stylings for Widget Areas 2. Sidebar Related Widget Stylings 3. Footer Styling 4. BBPRESS Stylings ----- End of Table of Contents ---------- */ /*======================================================== = Common Stylings for Widget Areas = ========================================================*/ div.widget-posts-grid { display: block; margin-top: 35px; } div.widget-posts-grid div.image { float: left; position: relative; width: 30%; margin: 0px 3% 3% 0px; z-index: 1; } div.widget-posts-grid div.image:hover { position: relative; z-index: 10; } div.widget-posts-grid div.image img { display: block; max-width: 100%; height: auto; border-radius: 0px; } div.super-wrapper div.widget-posts-grid h3 { position: absolute; bottom: 55px; left: -25px; padding: 6px 10px; background: #48688e; color: #ffffff; font-size: 12px; display: none; text-align: center; line-height: 1.1; border-radius: 0px; width: 100px; } ul.instagram-pics { padding: 0; margin: 0; } div.footer-wrap ul.instagram-pics li, div.sidebar-wrap ul.instagram-pics li { padding: 0; width: 30%; margin: 0px 3% 3% 0px; float: left; border: none; } div.footer-wrap ul.instagram-pics li a, div.sidebar-wrap ul.instagram-pics li a { display: block; } div.footer-wrap ul.instagram-pics li a img, div.sidebar-wrap ul.instagram-pics li a img { display: block; border-radius: 0px; max-width: 100%; } .ioa-instagram-feed a { letter-spacing: 2px; color: #ffffff; text-transform: uppercase; font-weight: 600; text-decoration: none; } .ioa-instagram-feed a:hover { letter-spacing: 2px; color: #787b7d; text-transform: uppercase; font-weight: 600; text-decoration: none; } /*----- End of Common Stylings for Widget Areas ------*/ /*======================================================= = Sidebar Related Widget Stylings = =======================================================*/ .sidebar-wrap .heading { color: #333333; font-weight: 300; position: relative; font-size: 22px; margin: 0 0 15px 0px; padding: 0px 0px 5px 0px; line-height: 1.2; text-transform: none; letter-spacing: 0px; border-bottom: 2px solid #f0f0f0; } /*========== General Stylings ==========*/ .sidebar, .sidebar li, .sidebar p { color: #333333; font-size: 13px; } .sidebar .widget_nav_menu i.ioa-front-icon { margin-right: 5px; color: #000102; } div.sidebar-wrap a { color: #000102; word-wrap: break-word; } div.sidebar-wrap a:hover { color: #48688e; } .sidebar-wrap ul.children { margin: 10px 0 10px 14px; padding: 0 0 0 10px; border-left: 1px solid #f0f0f0; } .sidebar-wrap ul li:first-child { margin-top: 0; padding-top: 0; } .sidebar-wrap ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .sidebar-wrap { padding: 50px 0 0px 0; margin: 0; } .sidebar .sidebar-wrap:first-child { margin-top: 0; padding-top: 0 !important; } .sidebar-wrap:last-child { border-bottom: none; } .sidebar-wrap a.more { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 15px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; display: inline-block; text-decoration: none; } .sidebar-wrap a.more:hover { background: #000102; border-color: #000102; color: #ffffff; } div.sidebar-wrap.widget.CustomBox .title_line { margin-bottom: 0; } .sidebar-wrap.widget_meta li:before, .sidebar-wrap.widget_nav_menu li:before { content: "\e94c"; font-family: 'ioa_front'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: left; margin-right: 6px; color: #48688e; font-size: 10px; font-weight: 800; } .sidebar-wrap.widget_archive li:before { content: "\e94c"; font-family: 'ioa_front'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: left; margin-right: 6px; color: #48688e; font-weight: 800; font-size: 10px; } .sidebar-wrap.widget_categories li:before { content: "\e94c"; font-family: 'ioa_front'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: left; margin-right: 6px; color: #48688e; font-weight: 800; font-size: 10px; } .sidebar-wrap.widget_recent_comments li:before { content: "\e94c"; font-family: 'ioa_front'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; float: left; margin-right: 6px; color: #48688e; font-weight: 800; font-size: 10px; } .sidebar-wrap.widget_nav li { padding: 0; } /*========== General List Stylings ==========*/ .sidebar-wrap div.ioa-image-wrap { padding: 0; } .sidebar-wrap div.ioa-image-wrap img { border-radius: 0px; } .sidebar-wrap ul { margin: 0; padding: 0 0; } .sidebar-wrap ul li { list-style: none; margin: 10px 0; padding: 0px 0px 0px 20px; display: block; position: relative; } .sidebar-wrap ul li a { text-decoration: none; } .sidebar-wrap ul li a:hover { color: #48688e; } .sidebar-wrap ul li a abbr[title] { border-bottom: none; } .sidebar-wrap ul li:before { font-size: 10px; content: "\e94c"; font-family: 'ioa_front'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; position: absolute; top: 1px; left: 0; margin-right: 6px; color: #48688e; font-weight: 800; } html .recentcomments a { display: block !important; font-style: normal; } /*========== WPML ==========*/ .icl_languages_selector { position: relative; z-index: 10; } .sidebar-wrap #lang_sel { display: block; } .sidebar-wrap #lang_sel li { width: 90%; background: #48688e; } .sidebar-wrap #lang_sel li a { padding: 7px; background-position: 97% 50%; } .sidebar-wrap #lang_sel ul ul { top: 39px; width: 100%; } /*========== Tweets ==========*/ .sidebar-wrap .tweets-wrapper.list ul.tweets li i { font-size: 18px; top: -8px; background: none; color: #48688e; padding-left: 0; } .sidebar-wrap .tweets-wrapper.list ul.tweets li { padding-left: 35px; padding-bottom: 20px; line-height: 1.4; min-height: 30px; } .sidebar-wrap .tweets-wrapper.list ul.tweets li { border-bottom: 1px solid #f0f0f0; } .sidebar-wrap .tweets-wrapper ul.tweets li { border-bottom: none; } /*========== WP Calendar Styling ==========*/ .sidebar-wrap.widget_calendar table { width: 100%; border-collapse: collapse; margin-bottom: 0; } .sidebar-wrap.widget_calendar table thead { border-radius: 0px; background: rgba(0, 0, 0, 0.07); } .sidebar-wrap.widget_calendar table caption { padding-bottom: 6px; text-align: center; margin-top: 10px; } .sidebar-wrap.widget_calendar table td { padding: 5px 0px; font-size: 11px; text-align: center; } .sidebar-wrap.widget_calendar table th { font-size: 11px; padding: 12px 0; text-align: center; border: none; } .sidebar-wrap.widget_calendar table #prev { padding-left: 0; text-align: left; } .sidebar-wrap.widget_calendar table #next { text-align: right; padding-right: 0; } .sidebar-wrap.widget_calendar table td a { border-radius: 0px; margin-top: 5px; padding: 2px 8px 1px 8px; display: inline-block; border: 1px solid #f0f0f0; text-decoration: none; } .sidebar-wrap.widget_calendar table td a:hover { border-color: #48688e; } .sidebar-wrap.widget_calendar table #today { border-radius: 0px; color: #48688e; } .sidebar-wrap.widget_calendar tfoot { border-top: 1px solid #f0f0f0; } /*========== Menu Styling ==========*/ div.sidebar-wrap ul.menu { margin: 0; padding: 0; } div.sidebar-wrap ul.menu li { position: relative; } div.sidebar-wrap ul.menu > li { padding: 8px 0; margin: 0; } div.sidebar-wrap ul.menu a { margin-left: 0; padding: 8px 0px; position: relative; z-index: 2; } div.sidebar-wrap ul.menu ul.sub-menu a { display: inline-block; } div.sidebar-wrap .menu > li.current_page_item > a, div.sidebar-wrap .menu > li.current-menu-ancestor > a, div.sidebar-wrap .menu > li.menu-active > a, div.sidebar-wrap .menu > li.current-menu-item > a { color: #333333; } div.sidebar-wrap ul.sub-menu { display: none; left: -220px; z-index: 5; background: #f6f7f7; position: absolute; top: 0; width: 220px; margin: 0; padding: 0; box-shadow: -10px 18px 30px rgba(0, 0, 0, 0.1); line-height: 1.6; } div.left-sidebar div.sidebar-wrap ul.sub-menu { left: auto; right: -220px; } div.sidebar-wrap ul.sub-menu > li { text-align: left; border-bottom: none; margin: 0; padding: 0; } div.sidebar-wrap ul.sub-menu li a { text-decoration: none; padding: 15px 23px; display: block; margin: 0px; color: #48688e; font-size: 12px; } div.sidebar-wrap ul.menu li:hover > a { opacity: 0.8; } /*========== Rss Widget ==========*/ div.sidebar-wrap a.rsswidget { border-bottom: none; } /*========== Search Bar ==========*/ div.sidebar-wrap input[type=submit] { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 9px 22px 9px 22px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; outline: none; border: none; } div.sidebar-wrap.widget_search label.screen-reader-text { display: none; } div.sidebar-wrap #searchsubmit { display: none; } #searchform input[type=text] { width: 100%; } .sidebar-wrap.widget.widget_search .title_line { margin-bottom: 30px; } div.sidebar-wrap #searchform input[type=text] { border: 1px solid #eee; float: none; color: #000102; display: block; background: #fff; } /*========== Tags ==========*/ div.sidebar-wrap div.tagcloud a { transition: all 0.2s ease-in-out; outline: none; border: 1px solid #787b7d; padding: 5px 7px; color: #787b7d; display: inline-block; text-decoration: none; background: transparent; border-radius: 0px; text-transform: uppercase; outline: none; margin: 0px 2px 5px 0px; font-size: 10px !important; letter-spacing: 2px; font-weight: 400; -webkit-font-smoothing: subpixel-antialiased; } div.sidebar-wrap div.tagcloud a:hover { background: #000102; border-color: #000102; color: #ffffff; } /*========== Testimonial Widget ==========*/ div.sidebar-wrap div.testimonial-bubble-content { padding: 0 0 15px 0; font-size: 13px; font-style: italic; color: #333333; } div.sidebar-wrap div.testimonial-bubble div.image img { display: block; border-radius: 0px; } div.sidebar-wrap div.testimonial-bubble-meta h3 { font-size: 13px; margin-top: 5px; margin-bottom: 0; letter-spacing: 1px; font-weight: 400; text-transform: uppercase; } div.sidebar-wrap div.testimonial-bubble div.image { margin-top: 8px; } div.sidebar-wrap div.testimonial-bubble div.info span { margin-top: 2px; color: #333333; font-size: 11px; } div.sidebar-wrap .rad-testimonials-list .image { float: left; } div.sidebar-wrap .rad-testimonials-list .info { margin: 0px 0 0 15px; } div.sidebar-wrap .rad-testimonials-list .info h3 { font-size: 16px; margin-top: 0px; margin-bottom: 0; } /*========== Google Map ==========*/ div.sidebar-wrap div.google-map { max-width: 100%; } /*========== Custom Box ==========*/ div.custom-box-content p:last-child { margin-bottom: 0; } div.custom-box-image { float: left; } .sidebar-wrap a.more { margin-top: 15px; } div.custom-box-content strong { color: inherit; } div.custom-box-content img { border-radius: 0px; } div.custom-box-content p:first-child { margin-top: 0px; } /*========== Custom Posts ==========*/ .sidebar-wrap .widget-posts { margin: 20px 0 0 0; padding: 0; } .sidebar-wrap .widget-posts li { padding: 0px 0px 15px 0px; border-bottom: 1px solid #f0f0f0; min-height: 77px; position: relative; margin: 15px 0; } .sidebar-wrap .widget-posts li:last-child { margin-bottom: 0; padding-bottom: 0; } .sidebar-wrap .widget-posts li a { border: none; } .sidebar-wrap .widget-posts .image { width: 50px; position: absolute; top: 3px; left: 0; } .sidebar-wrap .widget-posts .image i { width: 50px; text-align: center; color: #888; font-size: 16px; padding: 20px 0; border: 1px solid rgba(0, 0, 0, 0.07); } .sidebar-wrap .widget-posts .image img { margin-right: 0px; display: block; border-radius: 0px; } .sidebar-wrap .widget-posts li:first-child .image { top: 2px; } .sidebar-wrap .widget-posts .description { float: left; margin-left: 65px; } .sidebar-wrap .widget-posts .description p { padding: 0; margin: 0; font-size: 13px; } .sidebar-wrap .widget-posts .description h5 { margin-bottom: 2px; margin-top: 0px; line-height: 1.4; } .sidebar-wrap .widget-posts .description h5 a { font-size: 12px; word-break: initial; } .sidebar-wrap .widget-posts .description h5 a:hover { border-bottom: none; } .sidebar-wrap .widget-posts li .full-desc.description { margin-left: 0; width: auto; } .sidebar-wrap div.facebookOuter { margin-top: 25px; } /*========== Social Set ==========*/ .sidebar-wrap .social-set { margin-top: 0px; padding: 4px 0px; margin-bottom: 0px; } .sidebar-wrap .social-set { padding: 0; } .sidebar-wrap .social-set ul.social-icons li { margin-right: 4px; border-bottom: none; margin-top: 0; margin-bottom: 0; padding: 0; } .sidebar-wrap .social-set ul.social-icons li a { border-bottom: none; } /*========== Video ==========*/ .sidebar-wrap.Video p.caption { text-align: center; font-size: 11px; padding: 0; margin: 0; } /*----- End of Sidebar Stylings ------*/ /*====================================== = Footer Styling = ======================================*/ /*========== Genertal Stylings ==========*/ .f-w-center div.footer-wrap.IOASocialLinks { text-align: center; } .f-w-center div.footer-wrap.IOASocialLinks ul.social-link-set li { border: none; float: none; display: inline-block; } .f-w-center div.footer-wrap ul.social-link-set li { margin-left: 60px; text-transform: uppercase; font-size: 11px; display: inline-block; } .f-w-center div.footer-wrap ul.social-link-set li:first-child { margin-left: 0px; text-transform: uppercase; } div.footer-wrap div.custom-box-content { margin-top: 20px; } div.footer-wrap { color: #555555; border-bottom: dotted 1px #000102; padding: 30px 0; } .footer-wrap div.title_line { margin-bottom: 0; } .footer-wrap a.more { margin-top: 15px; float: left; transition: all 0.2s ease-in-out; outline: none; border: 1px solid #ffffff; padding: 4px 8px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: transparent; border-radius: 0px; text-transform: uppercase; } .footer-wrap a.more:hover { border-color: #ffffff; background: #ffffff; color: #787b7d; } .footer-wrap img { max-width: 100%; } .footer-wrap ul { margin: 0; padding: 0 0; word-break: break-all; } .footer-wrap ul li { list-style: none; margin: 0; padding: 8px 0px; display: block; position: relative; border-top: 1px solid #000102; color: #555555; } .footer-wrap ul li a { text-decoration: none; display: inline-block; color: #555555; } .footer-wrap ul li a:hover { color: #ffffff; } .footer-wrap ul li a abbr[title] { border-bottom: none; } .footer-wrap ul.children { margin: 10px 0 10px 24px; padding: 0; } .footer-wrap ul li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .footer-wrap h3.footer-heading { color: #ffffff; margin-bottom: 30px; line-height: 1.4; } div.footer-wrap p, div.footer-wrap strong { color: #555555; } div.footer-wrap h1, div.footer-wrap h2, div.footer-wrap h3, div.footer-wrap h4, div.footer-wrap h5, div.footer-wrap h6 { color: #ffffff; } div.footer-wrap p a, div.footer-wrap a { color: #555555; text-transform: uppercase; font-size: 10px; letter-spacing: 2px; } div.footer-wrap p a:hover, div.footer-wrap a:hover { color: #ffffff; } /*========== Single Testimonial ==========*/ .footer-wrap .rad-testimonials-list h2 { color: #ffffff; } .footer-wrap .testimonial-bubble-content { padding: 15px; position: relative; border-radius: 0px; } .footer-wrap div.testimonial-bubble div.image { float: left; margin-right: 10px; margin-top: 10px; } .footer-wrap div.testimonial-bubble div.image img { display: block; border-radius: 100%; } .footer-wrap div.testimonial-bubble div.info { float: left; } .footer-wrap div.testimonial-bubble div.info h3 { margin: 0; color: #ffffff; line-height: 14px; font-size: 14px; margin-top: 16px; } .footer-wrap div.testimonial-bubble div.info span { color: #333333; font-size: 10px; line-height: 1.3; display: block; } .footer-wrap div.testimonial-bubble-content i.icon-sort-down { display: nonel; } .footer-wrap div.testimonials-wrapper ul.rad-testimonials-list li div.content { background: none; padding: 0px; margin-bottom: 0; } .footer-wrap div.testimonials-wrapper ul.rad-testimonials-list li div.content p { padding: 0; margin: 0; } .footer-wrap ul { padding: 0; } /*========== Footer Google map ==========*/ .footer-wrap .google-map, .footer-wrap .google-map iframe { border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0px; } /*========== WP Calendar Styling ==========*/ .footer-wrap.widget_calendar table { width: 100%; color: #555555; border-collapse: collapse; } .footer-wrap.widget_calendar table caption { color: #333333; padding-bottom: 6px; text-align: center; } .footer-wrap.widget_calendar table td { font-size: 11px; padding: 8px; text-align: center; } .footer-wrap.widget_calendar table tr { width: 100%; background: none; } .footer-wrap.widget_calendar table { margin: 0px; display: block; padding: 0; position: relative; } .footer-wrap.widget_calendar table tbody tr:nth-child(odd) td { background: none; } .footer-wrap.widget_calendar table th { padding: 10px 0; color: #ffffff; font-size: 11px; text-align: center; border: none; } .footer-wrap.widget_calendar table #prev { padding-left: 0; } .footer-wrap.widget_calendar table #next { text-align: right; padding-right: 0; } .footer-wrap.widget_calendar table td a { text-decoration: none; background: #ffffff; border-radius: 0px; margin-top: 5px; color: #555555; padding: 2px 8px 1px 8px; font-size: 10px; display: inline-block; } .footer-wrap.widget_calendar table td a:hover { border-color: footer_secondary_bg_color; color: footer_secondary_bg_color; } /*========== Menu Styling ==========*/ div.footer-wrap ul.menu li ul.sub-menu li:last-child { background: none; padding-bottom: 0; } div.footer-wrap ul.menu li { position: relative; } div.footer-wrap ul.menu { padding: 0; } div.footer-wrap ul.menu > li { padding: 0 0 2px 0; margin: 0; } div.footer-wrap ul.menu li:before { content: ''; } div.footer-wrap ul.menu a { margin-left: 0; display: block; padding: 4px 0px; border-bottom: none; color: #555555; font-size: 13px; } div.footer-wrap ul.menu a:hover { color: #ffffff; } div.footer-wrap .menu > li.current_page_item > a, div.footer-wrap .menu > li.current-menu-ancestor > a, div.footer-wrap .menu > li.menu-active > a, div.footer-wrap .menu > li.current-menu-item > a { color: #ffffff; } div.footer-wrap ul.sub-menu { padding: 10px 0px 10px 10px; margin-top: 10px; border-left: 1px solid rgba(255, 255, 255, 0.07); } /*========== Rss Widget ==========*/ div.footer-wrap a.rsswidget { border-bottom: none; } /*========== Search Bar ==========*/ div.footer-wrap .search-input { width: 100%; } div.footer-wrap.widget_search label.screen-reader-text { display: none; } div.footer-wrap #searchform input[type=text] { border: 1px solid #010c17; float: none; color: #ffffff; width: 93%; display: block; margin-bottom: 20px; background: #010c17; } /*========== Twitter ==========*/ div.footer-wrap div.tweets-wrapper i.ioa-front-icon { z-index: 2; top: 0px; left: 0; position: absolute; border: 1px solid rgba(255, 255, 255, 0.07); padding: 9px; color: #555555; font-size: 24px; background: none !important; } div.footer-wrap .tweets-wrapper.list ul.tweets li { border-bottom: 1px solid rgba(255, 255, 255, 0.07); padding: 0px 0px 15px 55px; min-height: 47px; display: block; margin: 15px 0 0 0; } /*========== Tags ==========*/ div.footer-wrap div.tagcloud a { outline: none; margin: 5px 5px 0 0; float: left; transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 10px 15px; font-size: 11px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; } div.footer-wrap div.tagcloud a:hover { background: #000102; border-color: #000102; color: #ffffff; } /*========== Custom Box ==========*/ div.footer-wrap div.custom-box-content, div.footer-wrap div.custom-box-content p { color: #555555; } div.footer-wrap div.custom-box-content p:first-child { padding-top: 0px; } div.footer-wrap div.custom-box-content p:last-child { padding-bottom: 0; } div.footer-wrap div.custom-box-content strong { color: #555555; } div.custom-box-image { float: left; } /*========== Custom Posts ==========*/ .footer-wrap .widget-posts { margin: 0; padding: 0; } .footer-wrap .widget-posts li { padding-bottom: 10px; margin-bottom: 15px; min-height: 70px; position: relative; padding-left: 0; background: none; } .footer-wrap .widget-posts li .full-desc.description { margin-left: 0; width: auto; } .footer-wrap .widget-posts li:last-child { margin-bottom: 0; padding-bottom: 0; } .footer-wrap .widget-posts .image { width: 50px; position: absolute; top: 10px; left: 0; } .footer-wrap .widget-posts .image i { width: 50px; text-align: center; color: #888; font-size: 16px; padding: 20px 0; border: 1px solid rgba(255, 255, 255, 0.07); } .footer-wrap .widget-posts .image img { margin-right: 0px; display: block; border-radius: 0px; } .footer-wrap .widget-posts .description { float: left; margin-left: 65px; color: #555555; } .footer-wrap .widget-posts .description p { padding: 0; margin: 13px 0 0 0; line-height: 1.4; } .footer-wrap .widget-posts .description h5 { margin-bottom: 2px; margin-top: 1px; line-height: 1.2; } .footer-wrap .widget-posts .description h5 a { font-size: 14px; } /*========== Social Set ==========*/ .footer-wrap .fb-widget iframe { background: none; } .footer-wrap .social-set { margin-top: 0px; padding: 4px 0px; margin-bottom: 0px; } .footer-wrap .social-set { padding: 0; } .footer-wrap .social-set ul.social-icons li { margin-right: 4px; border: none; } /*----- End of Footer Stylings ------*/ /*======================================== = BBPRESS Stylings = ========================================*/ .widget_display_search #bbp-search-form input[type=submit] { display: none; } div.bbp-logged-in a.user-submit { float: left; margin-right: 10px; border-radius: 0px; } div.bbp-logged-in h4 { display: inline-block; } div.bbp-logged-in h4 a { text-decoration: none; border-bottom: 1px dashed #000102; color: #000102; } div.bbp-logged-in h4:hover a { border-bottom: 1px solid #48688e; color: #48688e; } div.bbp-logged-in .logout-link { text-decoration: none; font-size: 10px; padding: 5px 10px; display: inline-block; margin-top: 10px; } div.bbp_widget_login fieldset { border: none; padding: 0; margin: 0; } div.bbp_widget_login legend { display: none; } div.bbp_widget_login label { font-size: 12px; margin-bottom: 5px; display: block; } div.bbp_widget_login input[type=text], div.bbp_widget_login input[type=password] { border: 1px solid rgba(0, 0, 0, 0.07); padding: 12px 10px; margin-bottom: 15px; } div.bbp-submit-wrapper button { transition: all 0.2s ease-in-out; outline: none; border: 2px solid #48688e; padding: 9px 22px 9px 22px; font-size: 12px; color: #ffffff; display: inline-block; text-decoration: none; background: #48688e; border-radius: 0px; text-transform: uppercase; outline: none; border: none; } div.bbp-remember-me { clear: both; } div.bbp-remember-me label { float: left; margin-top: -2px; margin-left: 6px; } div.bbp-remember-me input { float: left; } div.bbp-submit-wrapper { clear: both; } div.bbp-login-links { margin-top: 10px; } div.bbp-login-links a { display: inline-block; font-size: 11px; margin-right: 8px; border-bottom: 1px dashed #000102; color: #000102; text-decoration: none; } div.bbp-login-links a:hover { border-bottom: 1px solid #48688e; color: #48688e; } div.widget_display_stats dt { display: inline-block; width: 46%; margin-bottom: 10px; } div.widget_display_stats dd { display: inline-block; width: 46%; margin: 0 0 10px 0; } /*----- End of BBPRESS Stylings ------*/ #rpsTF26VFKTFNDHE5VNHSOIH0421CERUF7W .full_width .full .ioa-text-column { padding: 0 !important; }