/* Minification failed. Returning unminified contents. (5718,34): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (5719,36): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (5809,21): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (6044,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (6066,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (6347,25): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (8045,29): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (8051,44): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (8056,44): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (9040,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (9858,17): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (9887,36): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (10018,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (10281,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (10285,21): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12303,37): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12307,25): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12538,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12549,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12572,17): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12888,32): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12920,28): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (12964,22): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (13518,27): run-time error CSS1036: Expected expression, found '!important' (13519,25): run-time error CSS1036: Expected expression, found '!important' (13520,30): run-time error CSS1036: Expected expression, found '!important' (13521,22): run-time error CSS1036: Expected expression, found '!important' (16541,17): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16634,17): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16670,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16677,53): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16685,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16694,53): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16721,49): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16728,53): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (16783,40): run-time error CSS1046: Expect comma, found '0' (16783,44): run-time error CSS1046: Expect comma, found '/' (16807,24): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (17769,25): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (18574,14): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (18583,25): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (18603,25): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (18695,31): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (18714,15): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' (18720,25): run-time error CSS1039: Token not allowed after unary operator: '-color-bg' */ @charset "UTF-8"; .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @-webkit-keyframes bounce { 0%,20%,50%,80%,100% { -webkit-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px) } } @keyframes bounce { 0%,20%,50%,80%,100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 40% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce } @-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: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1.1); transform: scale(1.1) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes pulse { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 50% { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes shake { 0%,100% { -webkit-transform: translateX(0); transform: translateX(0) } 10%,30%,50%,70%,90% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 20%,40%,60%,80% { -webkit-transform: translateX(10px); transform: translateX(10px) } } @keyframes shake { 0%,100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 10%,30%,50%,70%,90% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px) } 20%,40%,60%,80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0); transform: rotate(0) } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg); -ms-transform: rotate(-10deg); transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg); -ms-transform: rotate(5deg); transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } } .swing { -webkit-transform-origin: top center; -ms-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing } @-webkit-keyframes tada { 0% { -webkit-transform: scale(1); transform: scale(1) } 10%,20% { -webkit-transform: scale(.9)rotate(-3deg); transform: scale(.9)rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale(1.1)rotate(3deg); transform: scale(1.1)rotate(3deg) } 40%,60%,80% { -webkit-transform: scale(1.1)rotate(-3deg); transform: scale(1.1)rotate(-3deg) } 100% { -webkit-transform: scale(1)rotate(0); transform: scale(1)rotate(0) } } @keyframes tada { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 10%,20% { -webkit-transform: scale(.9)rotate(-3deg); -ms-transform: scale(.9)rotate(-3deg); transform: scale(.9)rotate(-3deg) } 30%,50%,70%,90% { -webkit-transform: scale(1.1)rotate(3deg); -ms-transform: scale(1.1)rotate(3deg); transform: scale(1.1)rotate(3deg) } 40%,60%,80% { -webkit-transform: scale(1.1)rotate(-3deg); -ms-transform: scale(1.1)rotate(-3deg); transform: scale(1.1)rotate(-3deg) } 100% { -webkit-transform: scale(1)rotate(0); -ms-transform: scale(1)rotate(0); transform: scale(1)rotate(0) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); transform: translateX(0%) } 15% { -webkit-transform: translateX(-25%)rotate(-5deg); transform: translateX(-25%)rotate(-5deg) } 30% { -webkit-transform: translateX(20%)rotate(3deg); transform: translateX(20%)rotate(3deg) } 45% { -webkit-transform: translateX(-15%)rotate(-3deg); transform: translateX(-15%)rotate(-3deg) } 60% { -webkit-transform: translateX(10%)rotate(2deg); transform: translateX(10%)rotate(2deg) } 75% { -webkit-transform: translateX(-5%)rotate(-1deg); transform: translateX(-5%)rotate(-1deg) } 100% { -webkit-transform: translateX(0%); transform: translateX(0%) } } @keyframes wobble { 0% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%) } 15% { -webkit-transform: translateX(-25%)rotate(-5deg); -ms-transform: translateX(-25%)rotate(-5deg); transform: translateX(-25%)rotate(-5deg) } 30% { -webkit-transform: translateX(20%)rotate(3deg); -ms-transform: translateX(20%)rotate(3deg); transform: translateX(20%)rotate(3deg) } 45% { -webkit-transform: translateX(-15%)rotate(-3deg); -ms-transform: translateX(-15%)rotate(-3deg); transform: translateX(-15%)rotate(-3deg) } 60% { -webkit-transform: translateX(10%)rotate(2deg); -ms-transform: translateX(10%)rotate(2deg); transform: translateX(10%)rotate(2deg) } 75% { -webkit-transform: translateX(-5%)rotate(-1deg); -ms-transform: translateX(-5%)rotate(-1deg); transform: translateX(-5%)rotate(-1deg) } 100% { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%) } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3) } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05) } 70% { -webkit-transform: scale(.9); transform: scale(.9) } 100% { -webkit-transform: scale(1); transform: scale(1) } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3) } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05) } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9) } 100% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px) } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px) } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px); transform: translateX(10px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px) } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px); transform: translateY(10px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px) } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); transform: scale(1) } 25% { -webkit-transform: scale(.95); transform: scale(.95) } 50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3) } } @keyframes bounceOut { 0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1) } 25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95) } 50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1) } 100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } } @keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } } @keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } } @keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } } @keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } } .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: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .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; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px) } } @keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px) } } @keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px) } } @keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } } @keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px) } } @keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } } @keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px) } } @keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } } @keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px)translateZ(0)rotateY(0)scale(1); transform: perspective(400px)translateZ(0)rotateY(0)scale(1) } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1); transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1) } 50% { -webkit-transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95); transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95) } 80%,100% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1); transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1) } } @keyframes flip { 0% { -webkit-transform: perspective(400px)translateZ(0)rotateY(0)scale(1); -ms-transform: perspective(400px)translateZ(0)rotateY(0)scale(1); transform: perspective(400px)translateZ(0)rotateY(0)scale(1) } 0%,40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1); -ms-transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1); transform: perspective(400px)translateZ(150px)rotateY(170deg)scale(1) } 50% { -webkit-transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); -ms-transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); transform: perspective(400px)translateZ(150px)rotateY(190deg)scale(1); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95); -ms-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95); transform: perspective(400px)translateZ(0)rotateY(360deg)scale(.95) } 80%,100% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1); -ms-transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1); transform: perspective(400px)translateZ(0)rotateY(360deg)scale(1) } } .animated.flip { -webkit-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px)rotateX(90deg); transform: perspective(400px)rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px)rotateX(-10deg); transform: perspective(400px)rotateX(-10deg) } 70% { -webkit-transform: perspective(400px)rotateX(10deg); transform: perspective(400px)rotateX(10deg) } 100% { -webkit-transform: perspective(400px)rotateX(0); transform: perspective(400px)rotateX(0); opacity: 1 } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px)rotateX(90deg); -ms-transform: perspective(400px)rotateX(90deg); transform: perspective(400px)rotateX(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px)rotateX(-10deg); -ms-transform: perspective(400px)rotateX(-10deg); transform: perspective(400px)rotateX(-10deg) } 70% { -webkit-transform: perspective(400px)rotateX(10deg); -ms-transform: perspective(400px)rotateX(10deg); transform: perspective(400px)rotateX(10deg) } 100% { -webkit-transform: perspective(400px)rotateX(0); -ms-transform: perspective(400px)rotateX(0); transform: perspective(400px)rotateX(0); opacity: 1 } } .flipInX { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px)rotateY(90deg); transform: perspective(400px)rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px)rotateY(-10deg); transform: perspective(400px)rotateY(-10deg) } 70% { -webkit-transform: perspective(400px)rotateY(10deg); transform: perspective(400px)rotateY(10deg) } 100% { -webkit-transform: perspective(400px)rotateY(0); transform: perspective(400px)rotateY(0); opacity: 1 } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px)rotateY(90deg); -ms-transform: perspective(400px)rotateY(90deg); transform: perspective(400px)rotateY(90deg); opacity: 0 } 40% { -webkit-transform: perspective(400px)rotateY(-10deg); -ms-transform: perspective(400px)rotateY(-10deg); transform: perspective(400px)rotateY(-10deg) } 70% { -webkit-transform: perspective(400px)rotateY(10deg); -ms-transform: perspective(400px)rotateY(10deg); transform: perspective(400px)rotateY(10deg) } 100% { -webkit-transform: perspective(400px)rotateY(0); -ms-transform: perspective(400px)rotateY(0); transform: perspective(400px)rotateY(0); opacity: 1 } } .flipInY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px)rotateX(0); transform: perspective(400px)rotateX(0); opacity: 1 } 100% { -webkit-transform: perspective(400px)rotateX(90deg); transform: perspective(400px)rotateX(90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px)rotateX(0); -ms-transform: perspective(400px)rotateX(0); transform: perspective(400px)rotateX(0); opacity: 1 } 100% { -webkit-transform: perspective(400px)rotateX(90deg); -ms-transform: perspective(400px)rotateX(90deg); transform: perspective(400px)rotateX(90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px)rotateY(0); transform: perspective(400px)rotateY(0); opacity: 1 } 100% { -webkit-transform: perspective(400px)rotateY(90deg); transform: perspective(400px)rotateY(90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px)rotateY(0); -ms-transform: perspective(400px)rotateY(0); transform: perspective(400px)rotateY(0); opacity: 1 } 100% { -webkit-transform: perspective(400px)rotateY(90deg); -ms-transform: perspective(400px)rotateY(90deg); transform: perspective(400px)rotateY(90deg); opacity: 0 } } .flipOutY { -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%)skewX(-30deg); transform: translateX(100%)skewX(-30deg); opacity: 0 } 60% { -webkit-transform: translateX(-20%)skewX(30deg); transform: translateX(-20%)skewX(30deg); opacity: 1 } 80% { -webkit-transform: translateX(0%)skewX(-15deg); transform: translateX(0%)skewX(-15deg); opacity: 1 } 100% { -webkit-transform: translateX(0%)skewX(0); transform: translateX(0%)skewX(0); opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translateX(100%)skewX(-30deg); -ms-transform: translateX(100%)skewX(-30deg); transform: translateX(100%)skewX(-30deg); opacity: 0 } 60% { -webkit-transform: translateX(-20%)skewX(30deg); -ms-transform: translateX(-20%)skewX(30deg); transform: translateX(-20%)skewX(30deg); opacity: 1 } 80% { -webkit-transform: translateX(0%)skewX(-15deg); -ms-transform: translateX(0%)skewX(-15deg); transform: translateX(0%)skewX(-15deg); opacity: 1 } 100% { -webkit-transform: translateX(0%)skewX(0); -ms-transform: translateX(0%)skewX(0); transform: translateX(0%)skewX(0); 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% { -webkit-transform: translateX(0%)skewX(0); transform: translateX(0%)skewX(0); opacity: 1 } 100% { -webkit-transform: translateX(100%)skewX(-30deg); transform: translateX(100%)skewX(-30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { -webkit-transform: translateX(0%)skewX(0); -ms-transform: translateX(0%)skewX(0); transform: translateX(0%)skewX(0); opacity: 1 } 100% { -webkit-transform: translateX(100%)skewX(-30deg); -ms-transform: translateX(100%)skewX(-30deg); transform: translateX(100%)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: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,100% { -webkit-transform-origin: center center; transform-origin: center center } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform: rotate(-200deg); -ms-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0 } 0%,100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } 0%,100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: center center; transform-origin: center center } 100% { -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center } 100% { -webkit-transform: rotate(200deg); -ms-transform: rotate(200deg); transform: rotate(200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom } 100% { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); opacity: 1 } 0%,100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom } 100% { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes slideInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown } @-webkit-keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slideInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } 100% { -webkit-transform: translateX(0); transform: translateX(0) } } @keyframes slideInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px) } } @keyframes slideOutLeft { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px) } } @keyframes slideOutRight { 0% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0) } 100% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px) } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px) } } @keyframes slideOutUp { 0% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px) } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); transform: rotate(0) } 0%,20%,60% { -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: rotate(80deg); transform: rotate(80deg) } 40% { -webkit-transform: rotate(60deg); transform: rotate(60deg) } 40%,80% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 80% { -webkit-transform: rotate(60deg)translateY(0); transform: rotate(60deg)translateY(0); opacity: 1 } 100% { -webkit-transform: translateY(700px); transform: translateY(700px); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0) } 0%,20%,60% { -webkit-transform-origin: top left; -ms-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: rotate(80deg); -ms-transform: rotate(80deg); transform: rotate(80deg) } 40% { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg) } 40%,80% { -webkit-transform-origin: top left; -ms-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 80% { -webkit-transform: rotate(60deg)translateY(0); -ms-transform: rotate(60deg)translateY(0); transform: rotate(60deg)translateY(0); opacity: 1 } 100% { -webkit-transform: translateY(700px); -ms-transform: translateY(700px); transform: translateY(700px); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%)rotate(-120deg); transform: translateX(-100%)rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0)rotate(0); transform: translateX(0)rotate(0) } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%)rotate(-120deg); -ms-transform: translateX(-100%)rotate(-120deg); transform: translateX(-100%)rotate(-120deg) } 100% { opacity: 1; -webkit-transform: translateX(0)rotate(0); -ms-transform: translateX(0)rotate(0); transform: translateX(0)rotate(0) } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0)rotate(0); transform: translateX(0)rotate(0) } 100% { opacity: 0; -webkit-transform: translateX(100%)rotate(120deg); transform: translateX(100%)rotate(120deg) } } @keyframes rollOut { 0% { opacity: 1; -webkit-transform: translateX(0)rotate(0); -ms-transform: translateX(0)rotate(0); transform: translateX(0)rotate(0) } 100% { opacity: 0; -webkit-transform: translateX(100%)rotate(120deg); -ms-transform: translateX(100%)rotate(120deg); transform: translateX(100%)rotate(120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } div.pp_default .pp_top,div.pp_default .pp_top .pp_middle,div.pp_default .pp_top .pp_left,div.pp_default .pp_top .pp_right,div.pp_default .pp_bottom,div.pp_default .pp_bottom .pp_left,div.pp_default .pp_bottom .pp_middle,div.pp_default .pp_bottom .pp_right{height:13px} div.pp_default .pp_top .pp_left{background:url(../images/prettyPhoto/default/sprite.png) -78px -93px no-repeat} div.pp_default .pp_top .pp_middle{background:url(../images/prettyPhoto/default/sprite_x.png) top left repeat-x} div.pp_default .pp_top .pp_right{background:url(../images/prettyPhoto/default/sprite.png) -112px -93px no-repeat} div.pp_default .pp_content .ppt{color:#f8f8f8} div.pp_default .pp_content_container .pp_left{background:url(../images/prettyPhoto/default/sprite_y.png) -7px 0 repeat-y;padding-left:13px} div.pp_default .pp_content_container .pp_right{background:url(../images/prettyPhoto/default/sprite_y.png) top right repeat-y;padding-right:13px} div.pp_default .pp_next:hover{background:url(../images/prettyPhoto/default/sprite_next.png) center right no-repeat;cursor:pointer} div.pp_default .pp_previous:hover{background:url(../images/prettyPhoto/default/sprite_prev.png) center left no-repeat;cursor:pointer} div.pp_default .pp_expand{background:url(../images/prettyPhoto/default/sprite.png) 0 -29px no-repeat;cursor:pointer;width:28px;height:28px} div.pp_default .pp_expand:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -56px no-repeat;cursor:pointer} div.pp_default .pp_contract{background:url(../images/prettyPhoto/default/sprite.png) 0 -84px no-repeat;cursor:pointer;width:28px;height:28px} div.pp_default .pp_contract:hover{background:url(../images/prettyPhoto/default/sprite.png) 0 -113px no-repeat;cursor:pointer} div.pp_default .pp_close{width:30px;height:30px;background:url(../images/prettyPhoto/default/sprite.png) 2px 1px no-repeat;cursor:pointer} div.pp_default .pp_gallery ul li a{background:url(../images/prettyPhoto/default/default_thumb.png) center center #f8f8f8;border:1px solid #aaa} div.pp_default .pp_social{margin-top:7px} div.pp_default .pp_gallery a.pp_arrow_previous,div.pp_default .pp_gallery a.pp_arrow_next{position:static;left:auto} div.pp_default .pp_nav .pp_play,div.pp_default .pp_nav .pp_pause{background:url(../images/prettyPhoto/default/sprite.png) -51px 1px no-repeat;height:30px;width:30px} div.pp_default .pp_nav .pp_pause{background-position:-51px -29px} div.pp_default a.pp_arrow_previous,div.pp_default a.pp_arrow_next{background:url(../images/prettyPhoto/default/sprite.png) -31px -3px no-repeat;height:20px;width:20px;margin:4px 0 0} div.pp_default a.pp_arrow_next{left:52px;background-position:-82px -3px} div.pp_default .pp_content_container .pp_details{margin-top:5px} div.pp_default .pp_nav{clear:none;height:30px;width:110px;position:relative} div.pp_default .pp_nav .currentTextHolder{font-family:Georgia;font-style:italic;color:#999;font-size:11px;left:75px;line-height:25px;position:absolute;top:2px;margin:0;padding:0 0 0 10px} div.pp_default .pp_close:hover,div.pp_default .pp_nav .pp_play:hover,div.pp_default .pp_nav .pp_pause:hover,div.pp_default .pp_arrow_next:hover,div.pp_default .pp_arrow_previous:hover{opacity:0.7} div.pp_default .pp_description{font-size:11px;font-weight:700;line-height:14px;margin:5px 50px 5px 0} div.pp_default .pp_bottom .pp_left{background:url(../images/prettyPhoto/default/sprite.png) -78px -127px no-repeat} div.pp_default .pp_bottom .pp_middle{background:url(../images/prettyPhoto/default/sprite_x.png) bottom left repeat-x} div.pp_default .pp_bottom .pp_right{background:url(../images/prettyPhoto/default/sprite.png) -112px -127px no-repeat} div.pp_default .pp_loaderIcon{background:url(../images/prettyPhoto/default/loader.gif) center center no-repeat} div.light_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -53px no-repeat} div.light_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -53px no-repeat} div.light_rounded .pp_next:hover{background:url(../images/prettyPhoto/light_rounded/btnNext.png) center right no-repeat;cursor:pointer} div.light_rounded .pp_previous:hover{background:url(../images/prettyPhoto/light_rounded/btnPrevious.png) center left no-repeat;cursor:pointer} div.light_rounded .pp_expand{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer} div.light_rounded .pp_expand:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer} div.light_rounded .pp_contract{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer} div.light_rounded .pp_contract:hover{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer} div.light_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer} div.light_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/light_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.light_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.light_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/light_rounded/sprite.png) 0 -71px no-repeat} div.light_rounded .pp_arrow_next{background:url(../images/prettyPhoto/light_rounded/sprite.png) -22px -71px no-repeat} div.light_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/light_rounded/sprite.png) -88px -80px no-repeat} div.light_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/light_rounded/sprite.png) -110px -80px no-repeat} div.dark_rounded .pp_top .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -53px no-repeat} div.dark_rounded .pp_top .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -53px no-repeat} div.dark_rounded .pp_content_container .pp_left{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat-y} div.dark_rounded .pp_content_container .pp_right{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top right repeat-y} div.dark_rounded .pp_next:hover{background:url(../images/prettyPhoto/dark_rounded/btnNext.png) center right no-repeat;cursor:pointer} div.dark_rounded .pp_previous:hover{background:url(../images/prettyPhoto/dark_rounded/btnPrevious.png) center left no-repeat;cursor:pointer} div.dark_rounded .pp_expand{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -26px no-repeat;cursor:pointer} div.dark_rounded .pp_expand:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -31px -47px no-repeat;cursor:pointer} div.dark_rounded .pp_contract{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -26px no-repeat;cursor:pointer} div.dark_rounded .pp_contract:hover{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -47px no-repeat;cursor:pointer} div.dark_rounded .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -1px no-repeat;cursor:pointer} div.dark_rounded .pp_description{margin-right:85px;color:#fff} div.dark_rounded .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.dark_rounded .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.dark_rounded .pp_arrow_previous{background:url(../images/prettyPhoto/dark_rounded/sprite.png) 0 -71px no-repeat} div.dark_rounded .pp_arrow_next{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -22px -71px no-repeat} div.dark_rounded .pp_bottom .pp_left{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -88px -80px no-repeat} div.dark_rounded .pp_bottom .pp_right{background:url(../images/prettyPhoto/dark_rounded/sprite.png) -110px -80px no-repeat} div.dark_rounded .pp_loaderIcon{background:url(../images/prettyPhoto/dark_rounded/loader.gif) center center no-repeat} div.dark_square .pp_left,div.dark_square .pp_middle,div.dark_square .pp_right,div.dark_square .pp_content{background:#000} div.dark_square .pp_description{color:#fff;margin:0 85px 0 0} div.dark_square .pp_loaderIcon{background:url(../images/prettyPhoto/dark_square/loader.gif) center center no-repeat} div.dark_square .pp_expand{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -26px no-repeat;cursor:pointer} div.dark_square .pp_expand:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) -31px -47px no-repeat;cursor:pointer} div.dark_square .pp_contract{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -26px no-repeat;cursor:pointer} div.dark_square .pp_contract:hover{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -47px no-repeat;cursor:pointer} div.dark_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -1px no-repeat;cursor:pointer} div.dark_square .pp_nav{clear:none} div.dark_square .pp_nav .pp_play{background:url(../images/prettyPhoto/dark_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.dark_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/dark_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.dark_square .pp_arrow_previous{background:url(../images/prettyPhoto/dark_square/sprite.png) 0 -71px no-repeat} div.dark_square .pp_arrow_next{background:url(../images/prettyPhoto/dark_square/sprite.png) -22px -71px no-repeat} div.dark_square .pp_next:hover{background:url(../images/prettyPhoto/dark_square/btnNext.png) center right no-repeat;cursor:pointer} div.dark_square .pp_previous:hover{background:url(../images/prettyPhoto/dark_square/btnPrevious.png) center left no-repeat;cursor:pointer} div.light_square .pp_expand{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -26px no-repeat;cursor:pointer} div.light_square .pp_expand:hover{background:url(../images/prettyPhoto/light_square/sprite.png) -31px -47px no-repeat;cursor:pointer} div.light_square .pp_contract{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -26px no-repeat;cursor:pointer} div.light_square .pp_contract:hover{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -47px no-repeat;cursor:pointer} div.light_square .pp_close{width:75px;height:22px;background:url(../images/prettyPhoto/light_square/sprite.png) -1px -1px no-repeat;cursor:pointer} div.light_square .pp_nav .pp_play{background:url(../images/prettyPhoto/light_square/sprite.png) -1px -100px no-repeat;height:15px;width:14px} div.light_square .pp_nav .pp_pause{background:url(../images/prettyPhoto/light_square/sprite.png) -24px -100px no-repeat;height:15px;width:14px} div.light_square .pp_arrow_previous{background:url(../images/prettyPhoto/light_square/sprite.png) 0 -71px no-repeat} div.light_square .pp_arrow_next{background:url(../images/prettyPhoto/light_square/sprite.png) -22px -71px no-repeat} div.light_square .pp_next:hover{background:url(../images/prettyPhoto/light_square/btnNext.png) center right no-repeat;cursor:pointer} div.light_square .pp_previous:hover{background:url(../images/prettyPhoto/light_square/btnPrevious.png) center left no-repeat;cursor:pointer} div.facebook .pp_top .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -53px no-repeat} div.facebook .pp_top .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternTop.png) top left repeat-x} div.facebook .pp_top .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -53px no-repeat} div.facebook .pp_content_container .pp_left{background:url(../images/prettyPhoto/facebook/contentPatternLeft.png) top left repeat-y} div.facebook .pp_content_container .pp_right{background:url(../images/prettyPhoto/facebook/contentPatternRight.png) top right repeat-y} div.facebook .pp_expand{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -26px no-repeat;cursor:pointer} div.facebook .pp_expand:hover{background:url(../images/prettyPhoto/facebook/sprite.png) -31px -47px no-repeat;cursor:pointer} div.facebook .pp_contract{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -26px no-repeat;cursor:pointer} div.facebook .pp_contract:hover{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -47px no-repeat;cursor:pointer} div.facebook .pp_close{width:22px;height:22px;background:url(../images/prettyPhoto/facebook/sprite.png) -1px -1px no-repeat;cursor:pointer} div.facebook .pp_description{margin:0 37px 0 0} div.facebook .pp_loaderIcon{background:url(../images/prettyPhoto/facebook/loader.gif) center center no-repeat} div.facebook .pp_arrow_previous{background:url(../images/prettyPhoto/facebook/sprite.png) 0 -71px no-repeat;height:22px;margin-top:0;width:22px} div.facebook .pp_arrow_previous.disabled{background-position:0 -96px;cursor:default} div.facebook .pp_arrow_next{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -71px no-repeat;height:22px;margin-top:0;width:22px} div.facebook .pp_arrow_next.disabled{background-position:-32px -96px;cursor:default} div.facebook .pp_nav{margin-top:0} div.facebook .pp_nav p{font-size:15px;padding:0 3px 0 4px} div.facebook .pp_nav .pp_play{background:url(../images/prettyPhoto/facebook/sprite.png) -1px -123px no-repeat;height:22px;width:22px} div.facebook .pp_nav .pp_pause{background:url(../images/prettyPhoto/facebook/sprite.png) -32px -123px no-repeat;height:22px;width:22px} div.facebook .pp_next:hover{background:url(../images/prettyPhoto/facebook/btnNext.png) center right no-repeat;cursor:pointer} div.facebook .pp_previous:hover{background:url(../images/prettyPhoto/facebook/btnPrevious.png) center left no-repeat;cursor:pointer} div.facebook .pp_bottom .pp_left{background:url(../images/prettyPhoto/facebook/sprite.png) -88px -80px no-repeat} div.facebook .pp_bottom .pp_middle{background:url(../images/prettyPhoto/facebook/contentPatternBottom.png) top left repeat-x} div.facebook .pp_bottom .pp_right{background:url(../images/prettyPhoto/facebook/sprite.png) -110px -80px no-repeat} div.pp_pic_holder a:focus{outline:none} div.pp_overlay{background:#000;display:none;left:0;position:absolute;top:0;width:100%;z-index:9500} div.pp_pic_holder{display:none;position:absolute;width:100px;z-index:10000} .pp_content{height:40px;min-width:40px} * html .pp_content{width:40px} .pp_content_container{position:relative;text-align:left;width:100%} .pp_content_container .pp_left{padding-left:20px} .pp_content_container .pp_right{padding-right:20px} .pp_content_container .pp_details{float:left;margin:10px 0 2px} .pp_description{display:none;margin:0} .pp_social{float:left;margin:0} .pp_social .facebook{float:left;margin-left:5px;width:55px;overflow:hidden} .pp_social .twitter{float:left} .pp_nav{clear:right;float:left;margin:3px 10px 0 0} .pp_nav p{float:left;white-space:nowrap;margin:2px 4px} .pp_nav .pp_play,.pp_nav .pp_pause{float:left;margin-right:4px;text-indent:-10000px} a.pp_arrow_previous,a.pp_arrow_next{display:block;float:left;height:15px;margin-top:3px;overflow:hidden;text-indent:-10000px;width:14px} .pp_hoverContainer{position:absolute;top:0;width:100%;z-index:2000} .pp_gallery{display:none;left:50%;margin-top:-50px;position:absolute;z-index:10000} .pp_gallery div{float:left;overflow:hidden;position:relative} .pp_gallery ul{float:left;height:35px;position:relative;white-space:nowrap;margin:0 0 0 5px;padding:0} .pp_gallery ul a{border:1px rgba(0,0,0,0.5) solid;display:block;float:left;height:33px;overflow:hidden} .pp_gallery ul a img{border:0} .pp_gallery li{display:block;float:left;margin:0 5px 0 0;padding:0} .pp_gallery li.default a{background:url(../images/prettyPhoto/facebook/default_thumbnail.gif) 0 0 no-repeat;display:block;height:33px;width:50px} .pp_gallery .pp_arrow_previous,.pp_gallery .pp_arrow_next{margin-top:7px!important} a.pp_next{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:right;height:100%;text-indent:-10000px;width:49%} a.pp_previous{background:url(../images/prettyPhoto/light_rounded/btnNext.png) 10000px 10000px no-repeat;display:block;float:left;height:100%;text-indent:-10000px;width:49%} a.pp_expand,a.pp_contract{cursor:pointer;display:none;height:20px;position:absolute;right:30px;text-indent:-10000px;top:10px;width:20px;z-index:20000} a.pp_close{position:absolute;right:0;top:0;display:block;line-height:22px;text-indent:-10000px} .pp_loaderIcon{display:block;height:24px;left:50%;position:absolute;top:50%;width:24px;margin:-12px 0 0 -12px} #pp_full_res{line-height:1!important} #pp_full_res .pp_inline{text-align:left} #pp_full_res .pp_inline p{margin:0 0 15px} div.ppt{color:#fff;display:none;font-size:17px;z-index:9999;margin:0 0 5px 15px} div.pp_default .pp_content,div.light_rounded .pp_content{background-color:#fff} div.pp_default #pp_full_res .pp_inline,div.light_rounded .pp_content .ppt,div.light_rounded #pp_full_res .pp_inline,div.light_square .pp_content .ppt,div.light_square #pp_full_res .pp_inline,div.facebook .pp_content .ppt,div.facebook #pp_full_res .pp_inline{color:#000} div.pp_default .pp_gallery ul li a:hover,div.pp_default .pp_gallery ul li.selected a,.pp_gallery ul a:hover,.pp_gallery li.selected a{border-color:#fff} div.pp_default .pp_details,div.light_rounded .pp_details,div.dark_rounded .pp_details,div.dark_square .pp_details,div.light_square .pp_details,div.facebook .pp_details{position:relative} div.light_rounded .pp_top .pp_middle,div.light_rounded .pp_content_container .pp_left,div.light_rounded .pp_content_container .pp_right,div.light_rounded .pp_bottom .pp_middle,div.light_square .pp_left,div.light_square .pp_middle,div.light_square .pp_right,div.light_square .pp_content,div.facebook .pp_content{background:#fff} div.light_rounded .pp_description,div.light_square .pp_description{margin-right:85px} div.light_rounded .pp_gallery a.pp_arrow_previous,div.light_rounded .pp_gallery a.pp_arrow_next,div.dark_rounded .pp_gallery a.pp_arrow_previous,div.dark_rounded .pp_gallery a.pp_arrow_next,div.dark_square .pp_gallery a.pp_arrow_previous,div.dark_square .pp_gallery a.pp_arrow_next,div.light_square .pp_gallery a.pp_arrow_previous,div.light_square .pp_gallery a.pp_arrow_next{margin-top:12px!important} div.light_rounded .pp_arrow_previous.disabled,div.dark_rounded .pp_arrow_previous.disabled,div.dark_square .pp_arrow_previous.disabled,div.light_square .pp_arrow_previous.disabled{background-position:0 -87px;cursor:default} div.light_rounded .pp_arrow_next.disabled,div.dark_rounded .pp_arrow_next.disabled,div.dark_square .pp_arrow_next.disabled,div.light_square .pp_arrow_next.disabled{background-position:-22px -87px;cursor:default} div.light_rounded .pp_loaderIcon,div.light_square .pp_loaderIcon{background:url(../images/prettyPhoto/light_rounded/loader.gif) center center no-repeat} div.dark_rounded .pp_top .pp_middle,div.dark_rounded .pp_content,div.dark_rounded .pp_bottom .pp_middle{background:url(../images/prettyPhoto/dark_rounded/contentPattern.png) top left repeat} div.dark_rounded .currentTextHolder,div.dark_square .currentTextHolder{color:#c4c4c4} div.dark_rounded #pp_full_res .pp_inline,div.dark_square #pp_full_res .pp_inline{color:#fff} .pp_top,.pp_bottom{height:20px;position:relative} * html .pp_top,* html .pp_bottom{padding:0 20px} .pp_top .pp_left,.pp_bottom .pp_left{height:20px;left:0;position:absolute;width:20px} .pp_top .pp_middle,.pp_bottom .pp_middle{height:20px;left:20px;position:absolute;right:20px} * html .pp_top .pp_middle,* html .pp_bottom .pp_middle{left:0;position:static} .pp_top .pp_right,.pp_bottom .pp_right{height:20px;left:auto;position:absolute;right:0;top:0;width:20px} .pp_fade,.pp_gallery li.default a img{display:none} @media (max-width: 640px){ div.pp_pic_holder,div.pp_default .pp_content,div.pp_default .pp_content_container .pp_details{ width:100% !important } div.pp_default .pp_content_container .pp_right{ padding-right:20px !important } } /* Slider */ /*.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; -webkit-tap-highlight-color: transparent; }*/ .slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } .slick-slider.slick-horizontal { -ms-touch-action: pan-y; touch-action: pan-y; } .slick-slider.slick-vertical { -ms-touch-action: pan-x; touch-action: pan-x; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0 -15px; padding: 0; } .slick-list:focus { outline: none; } .slick-loading .slick-list { background: white url('../images/ajax-loader.gif') center center no-repeat; } .slick-list.dragging { cursor: move !important; } .slick-slider .slick-list, .slick-track, .slick-slide, .slick-slide img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; zoom: 1; } /*New*/ .slick-track img { height: 500px !important; width: 100%; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } /*.slick-slide img { display: block; }*/ .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; float:none } /* Arrows */ .slick-prev, .slick-next { position: absolute; display: block; line-height: 0; font-size: 0; cursor: pointer; padding: 0; border: none; outline: none; text-align:center; width:28px; height:28px; border-radius: 3px; } .slick-prev{ right: 32px; top: -60px; } .slick-next{ right: 0px; top: -60px; } .slick-prev:focus, .slick-next:focus { outline: none; } .slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; } .slick-prev:before, .slick-next:before { font-family: FontAwesome; font-size: 18px; line-height: 28px; display:inline-block; margin:auto } .slick-prev:before { content: "\f104"; } .slick-next:before { content: "\f105"; } /* Dots */ .slick-dots { position: absolute; bottom: 30px; list-style: none; display: block; text-align: center; padding: 0px; width: 100%; /*color: black;*/ } .slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0px; padding: 0px; cursor: pointer; /*color: black;*/ } .slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; color: black; padding: 5px; cursor: pointer; } .slick-dots li button:focus { outline: none; } .slick-dots li button:before { position: absolute; top: 0; left: 0; content: "\2022"; width: 20px; height: 20px; font-family: "slick"; font-size: 48px; line-height: 20px; text-align: center; color: lightgrey; } /*----------------------------------------------------------------------------- - Revolution Slider 4.1 Captions - Screen Stylesheet version: 1.4.5 date: 27/11/13 author: themepunch email: info@themepunch.com website: http://www.themepunch.com -----------------------------------------------------------------------------*/ /************************* - CAPTIONS - **************************/ .tp-static-layers { position:absolute; z-index:505; top:0px;left:0px} .tp-hide-revslider,.tp-caption.tp-hidden-caption { visibility:hidden !important; display:none !important} .tp-caption { z-index:1; white-space:nowrap} .tp-caption-demo .tp-caption { position:relative !important; display:inline-block; margin-bottom:10px; margin-right:20px !important} .tp-caption.whitedivider3px { color: #000000; text-shadow: none; background-color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 1); text-decoration: none; min-width: 408px; min-height: 3px; background-position: initial initial; background-repeat: initial initial; border-width: 0px; border-color: #000000; border-style: none; } .tp-caption.finewide_large_white { color:#ffffff; text-shadow:none; font-size:60px; line-height:60px; font-weight:300; font-family:"Open Sans", sans-serif; background-color:transparent; text-decoration:none; text-transform:uppercase; letter-spacing:8px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.whitedivider3px { color:#000000; text-shadow:none; background-color:rgb(255, 255, 255); background-color:rgba(255, 255, 255, 1); text-decoration:none; font-size:0px; line-height:0; min-width:468px; min-height:3px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.finewide_medium_white { color:#ffffff; text-shadow:none; font-size:37px; line-height:37px; font-weight:300; font-family:"Open Sans", sans-serif; background-color:transparent; text-decoration:none; text-transform:uppercase; letter-spacing:5px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.boldwide_small_white { font-size:25px; line-height:25px; font-weight:800; font-family:"Open Sans", sans-serif; color:rgb(255, 255, 255); text-decoration:none; background-color:transparent; text-shadow:none; text-transform:uppercase; letter-spacing:5px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.whitedivider3px_vertical { color:#000000; text-shadow:none; background-color:rgb(255, 255, 255); background-color:rgba(255, 255, 255, 1); text-decoration:none; font-size:0px; line-height:0; min-width:3px; min-height:130px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.finewide_small_white { color:#ffffff; text-shadow:none; font-size:25px; line-height:25px; font-weight:300; font-family:"Open Sans", sans-serif; background-color:transparent; text-decoration:none; text-transform:uppercase; letter-spacing:5px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.finewide_verysmall_white_mw { font-size:13px; line-height:25px; font-weight:400; font-family:"Open Sans", sans-serif; color:#ffffff; text-decoration:none; background-color:transparent; text-shadow:none; text-transform:uppercase; letter-spacing:5px; max-width:470px; white-space:normal !important; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.lightgrey_divider { text-decoration:none; background-color:rgb(235, 235, 235); background-color:rgba(235, 235, 235, 1); width:370px; height:3px; background-position:initial initial; background-repeat:initial initial; border-width:0px; border-color:rgb(34, 34, 34); border-style:none; } .tp-caption.finewide_large_white { color: #FFF; text-shadow: none; font-size: 60px; line-height: 60px; font-weight: 300; font-family: "Open Sans", sans-serif; background-color: rgba(0, 0, 0, 0); text-decoration: none; text-transform: uppercase; letter-spacing: 8px; border-width: 0px; border-color: #000; border-style: none; } .tp-caption.finewide_medium_white { color: #FFF; text-shadow: none; font-size: 34px; line-height: 34px; font-weight: 300; font-family: "Open Sans", sans-serif; background-color: rgba(0, 0, 0, 0); text-decoration: none; text-transform: uppercase; letter-spacing: 5px; border-width: 0px; border-color: #000; border-style: none; } .tp-caption.huge_red { position:absolute; color:rgb(223,75,107); font-weight:400; font-size:150px; line-height:130px; font-family: 'Oswald', sans-serif; margin:0px; border-width:0px; border-style:none; white-space:nowrap; background-color:rgb(45,49,54); padding:0px; } .tp-caption.middle_yellow { position:absolute; color:rgb(251,213,114); font-weight:600; font-size:50px; line-height:50px; font-family: 'Open Sans', sans-serif; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.huge_thin_yellow { position:absolute; color:rgb(251,213,114); font-weight:300; font-size:90px; line-height:90px; font-family: 'Open Sans', sans-serif; margin:0px; letter-spacing: 20px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.big_dark { position:absolute; color:#333; font-weight:700; font-size:70px; line-height:70px; font-family:"Open Sans"; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.medium_dark { position:absolute; color:#333; font-weight:300; font-size:40px; line-height:40px; font-family:"Open Sans"; margin:0px; letter-spacing: 5px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.medium_grey { position:absolute; color:#fff; text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); font-weight:700; font-size:20px; line-height:20px; font-family:Arial; padding:2px 4px; margin:0px; border-width:0px; border-style:none; background-color:#888; white-space:nowrap; } .tp-caption.small_text { position:absolute; color:#fff; text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); font-weight:700; font-size:14px; line-height:20px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.medium_text { position:absolute; color:#fff; text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); font-weight:700; font-size:20px; line-height:20px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.large_bold_white_25 { font-size:55px; line-height:65px; font-weight:700; font-family:"Open Sans"; color:#fff; text-decoration:none; background-color:transparent; text-align:center; text-shadow:#000 0px 5px 10px; border-width:0px; border-color:rgb(255, 255, 255); border-style:none; } .tp-caption.medium_text_shadow { font-size:25px; line-height:25px; font-weight:600; font-family:"Open Sans"; color:#fff; text-decoration:none; background-color:transparent; text-align:center; text-shadow:#000 0px 5px 10px; border-width:0px; border-color:rgb(255, 255, 255); border-style:none; } .tp-caption.large_text { position:absolute; color:#fff; text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); font-weight:700; font-size:40px; line-height:40px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.medium_bold_grey { font-size:30px; line-height:30px; font-weight:800; font-family:"Open Sans"; color:rgb(102, 102, 102); text-decoration:none; background-color:transparent; text-shadow:none; margin:0px; padding:1px 4px 0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.very_large_text { position:absolute; color:#fff; text-shadow:0px 2px 5px rgba(0, 0, 0, 0.5); font-weight:700; font-size:60px; line-height:60px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; letter-spacing:-2px; } .tp-caption.very_big_white { position:absolute; color:#fff; text-shadow:none; font-weight:800; font-size:60px; line-height:60px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; padding:0px 4px; padding-top:1px; background-color:#000; } .tp-caption.very_big_black { position:absolute; color:#000; text-shadow:none; font-weight:700; font-size:60px; line-height:60px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; padding:0px 4px; padding-top:1px; background-color:#fff; } .tp-caption.modern_medium_fat { position:absolute; color:#000; text-shadow:none; font-weight:800; font-size:24px; line-height:20px; font-family:"Open Sans", sans-serif; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.modern_medium_fat_white { position:absolute; color:#fff; text-shadow:none; font-weight:800; font-size:24px; line-height:20px; font-family:"Open Sans", sans-serif; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.modern_medium_light { position:absolute; color:#000; text-shadow:none; font-weight:300; font-size:24px; line-height:20px; font-family:"Open Sans", sans-serif; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.modern_big_bluebg { position:absolute; color:#fff; text-shadow:none; font-weight:800; font-size:30px; line-height:36px; font-family:"Open Sans", sans-serif; padding:3px 10px; margin:0px; border-width:0px; border-style:none; background-color:#4e5b6c; letter-spacing:0; } .tp-caption.modern_big_redbg { position:absolute; color:#fff; text-shadow:none; font-weight:300; font-size:30px; line-height:36px; font-family:"Open Sans", sans-serif; padding:3px 10px; padding-top:1px; margin:0px; border-width:0px; border-style:none; background-color:#de543e; letter-spacing:0; } .tp-caption.modern_small_text_dark { position:absolute; color:#555; text-shadow:none; font-size:14px; line-height:22px; font-family:Arial; margin:0px; border-width:0px; border-style:none; white-space:nowrap; } .tp-caption.boxshadow { -moz-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5); -webkit-box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5); box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5); } .tp-caption.black { color:#000; text-shadow:none; } .tp-caption.noshadow { text-shadow:none; } .tp-caption a { color:#ff7302; text-shadow:none; -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; -o-transition:all 0.2s ease-out; -ms-transition:all 0.2s ease-out; } .tp-caption a:hover { color:#ffa902; } .tp-caption.thinheadline_dark { position:absolute; color:rgba(0,0,0,0.85); text-shadow:none; font-weight:300; font-size:30px; line-height:30px; font-family:"Open Sans"; background-color:transparent; } .tp-caption.thintext_dark { position:absolute; color:rgba(0,0,0,0.85); text-shadow:none; font-weight:300; font-size:16px; line-height:26px; font-family:"Open Sans"; background-color:transparent; } .tp-caption.medium_bg_red a { color: #fff; text-decoration: none; } .tp-caption.medium_bg_red a:hover { color: #fff; text-decoration: underline; } .tp-caption.smoothcircle { font-size:30px; line-height:75px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(0, 0, 0); background-color:rgba(0, 0, 0, 0.498039); padding:50px 25px; text-align:center; border-radius:500px 500px 500px 500px; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.largeblackbg { font-size:50px; line-height:70px; font-weight:300; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(0, 0, 0); padding:0px 20px 5px; text-shadow:none; border-width:0px; border-color:rgb(255, 255, 255); border-style:none; } .tp-caption.largepinkbg { position:absolute; color:#fff; text-shadow:none; font-weight:300; font-size:50px; line-height:70px; font-family:"Open Sans"; background-color:#db4360; padding:0px 20px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; } .tp-caption.largewhitebg { position:absolute; color:#000; text-shadow:none; font-weight:300; font-size:50px; line-height:70px; font-family:"Open Sans"; background-color:#fff; padding:0px 20px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; } .tp-caption.largegreenbg { position:absolute; color:#fff; text-shadow:none; font-weight:300; font-size:50px; line-height:70px; font-family:"Open Sans"; background-color:#67ae73; padding:0px 20px; -webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px; } .tp-caption.excerpt { font-size:36px; line-height:36px; font-weight:700; font-family:Arial; color:#ffffff; text-decoration:none; background-color:rgba(0, 0, 0, 1); text-shadow:none; margin:0px; letter-spacing:-1.5px; padding:1px 4px 0px 4px; width:150px; white-space:normal !important; height:auto; border-width:0px; border-color:rgb(255, 255, 255); border-style:none; } .tp-caption.large_bold_grey { font-size:60px; line-height:60px; font-weight:800; font-family:"Open Sans"; color:rgb(102, 102, 102); text-decoration:none; background-color:transparent; text-shadow:none; margin:0px; padding:1px 4px 0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_thin_grey { font-size:34px; line-height:30px; font-weight:300; font-family:"Open Sans"; color:rgb(102, 102, 102); text-decoration:none; background-color:transparent; padding:1px 4px 0px; text-shadow:none; margin:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.small_thin_grey { font-size:18px; line-height:26px; font-weight:300; font-family:"Open Sans"; color:rgb(117, 117, 117); text-decoration:none; background-color:transparent; padding:1px 4px 0px; text-shadow:none; margin:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.lightgrey_divider { text-decoration:none; background-color:rgba(235, 235, 235, 1); width:370px; height:3px; background-position:initial initial; background-repeat:initial initial; border-width:0px; border-color:rgb(34, 34, 34); border-style:none; } .tp-caption.large_bold_darkblue { font-size:58px; line-height:60px; font-weight:800; font-family:"Open Sans"; color:rgb(52, 73, 94); text-decoration:none; background-color:transparent; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_bg_darkblue { font-size:20px; line-height:20px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(52, 73, 94); padding:10px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_bold_red { font-size:24px; line-height:30px; font-weight:800; font-family:"Open Sans"; color:rgb(227, 58, 12); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_light_red { font-size:21px; line-height:26px; font-weight:300; font-family:"Open Sans"; color:rgb(227, 58, 12); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_bg_red { font-size:20px; line-height:20px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(227, 58, 12); padding:10px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_bold_orange { font-size:24px; line-height:30px; font-weight:800; font-family:"Open Sans"; color:rgb(243, 156, 18); text-decoration:none; background-color:transparent; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_bg_orange { font-size:20px; line-height:20px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(243, 156, 18); padding:10px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.grassfloor { text-decoration:none; background-color:rgba(160, 179, 151, 1); width:4000px; height:150px; border-width:0px; border-color:rgb(34, 34, 34); border-style:none; } .tp-caption.large_bold_white { font-size:58px; line-height:60px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:transparent; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_light_white { font-size:30px; line-height:36px; font-weight:300; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.mediumlarge_light_white { font-size:34px; line-height:40px; font-weight:300; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.mediumlarge_light_white_center { font-size:34px; line-height:40px; font-weight:300; font-family:"Open Sans"; color:#ffffff; text-decoration:none; background-color:transparent; padding:0px 0px 0px 0px; text-align:center; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_bg_asbestos { font-size:20px; line-height:20px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(127, 140, 141); padding:10px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.medium_light_black { font-size:30px; line-height:36px; font-weight:300; font-family:"Open Sans"; color:rgb(0, 0, 0); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.large_bold_black { font-size:58px; line-height:60px; font-weight:800; font-family:"Open Sans"; color:rgb(0, 0, 0); text-decoration:none; background-color:transparent; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.mediumlarge_light_darkblue { font-size:34px; line-height:40px; font-weight:300; font-family:"Open Sans"; color:rgb(52, 73, 94); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.small_light_white { font-size:17px; line-height:28px; font-weight:300; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:transparent; padding:0px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.roundedimage { border-width:0px; border-color:rgb(34, 34, 34); border-style:none; } .tp-caption.large_bg_black { font-size:40px; line-height:40px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(0, 0, 0); padding:10px 20px 15px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.mediumwhitebg { font-size:30px; line-height:30px; font-weight:300; font-family:"Open Sans"; color:rgb(0, 0, 0); text-decoration:none; background-color:rgb(255, 255, 255); padding:5px 15px 10px; text-shadow:none; border-width:0px; border-color:rgb(0, 0, 0); border-style:none; } .tp-caption.medium_bg_orange_new1 { font-size:20px; line-height:20px; font-weight:800; font-family:"Open Sans"; color:rgb(255, 255, 255); text-decoration:none; background-color:rgb(243, 156, 18); padding:10px; border-width:0px; border-color:rgb(255, 214, 88); border-style:none; } .tp-caption.boxshadow{ -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); } .tp-caption.black{ color: #000; text-shadow: none; font-weight: 300; font-size: 19px; line-height: 19px; font-family: 'Open Sans', sans; } .tp-caption.noshadow { text-shadow: none; } .tp_inner_padding { box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; max-height:none !important; } /*.tp-caption { transform:none !important}*/ /********************************* - SPECIAL TP CAPTIONS - **********************************/ .tp-caption .frontcorner { width: 0; height: 0; border-left: 40px solid transparent; border-right: 0px solid transparent; border-top: 40px solid #00A8FF; position: absolute;left:-40px;top:0px; } .tp-caption .backcorner { width: 0; height: 0; border-left: 0px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #00A8FF; position: absolute;right:0px;top:0px; } .tp-caption .frontcornertop { width: 0; height: 0; border-left: 40px solid transparent; border-right: 0px solid transparent; border-bottom: 40px solid #00A8FF; position: absolute;left:-40px;top:0px; } .tp-caption .backcornertop { width: 0; height: 0; border-left: 0px solid transparent; border-right: 40px solid transparent; border-top: 40px solid #00A8FF; position: absolute;right:0px;top:0px; } /*********************************************** - SPECIAL ALTERNATIVE IMAGE SETTINGS - ***********************************************/ img.tp-slider-alternative-image { width:100%; height:auto;} /****************************** - BUTTONS - *******************************/ .tp-simpleresponsive .button { padding:6px 13px 5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; height:30px; cursor:pointer; color:#fff !important; text-shadow:0px 1px 1px rgba(0, 0, 0, 0.6) !important; font-size:15px; line-height:45px !important; background:url(../images/gradient/g30.png) repeat-x top; font-family: arial, sans-serif; font-weight: bold; letter-spacing: -1px; } .tp-simpleresponsive .button.big { color:#fff; text-shadow:0px 1px 1px rgba(0, 0, 0, 0.6); font-weight:bold; padding:9px 20px; font-size:19px; line-height:57px !important; background:url(../images/gradient/g40.png) repeat-x top} .tp-simpleresponsive .purchase:hover, .tp-simpleresponsive .button:hover, .tp-simpleresponsive .button.big:hover { background-position:bottom, 15px 11px} @media only screen and (min-width: 768px) and (max-width: 959px) { } @media only screen and (min-width: 480px) and (max-width: 767px) { .tp-simpleresponsive .button { padding:4px 8px 3px; line-height:25px !important; font-size:11px !important;font-weight:normal; } .tp-simpleresponsive a.button { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; } } @media only screen and (min-width: 0px) and (max-width: 479px) { .tp-simpleresponsive .button { padding:2px 5px 2px; line-height:20px !important; font-size:10px !important} .tp-simpleresponsive a.button { -webkit-transition: none; -moz-transition: none; -o-transition: none; -ms-transition: none; } } /* BUTTON COLORS */ .tp-simpleresponsive .button.green, .tp-simpleresponsive .button:hover.green, .tp-simpleresponsive .purchase.green, .tp-simpleresponsive .purchase:hover.green { background-color:#21a117; -webkit-box-shadow: 0px 3px 0px 0px #104d0b; -moz-box-shadow: 0px 3px 0px 0px #104d0b; box-shadow: 0px 3px 0px 0px #104d0b; } .tp-simpleresponsive .button.blue, .tp-simpleresponsive .button:hover.blue, .tp-simpleresponsive .purchase.blue, .tp-simpleresponsive .purchase:hover.blue { background-color:#1d78cb; -webkit-box-shadow: 0px 3px 0px 0px #0f3e68; -moz-box-shadow: 0px 3px 0px 0px #0f3e68; box-shadow: 0px 3px 0px 0px #0f3e68} .tp-simpleresponsive .button.red, .tp-simpleresponsive .button:hover.red, .tp-simpleresponsive .purchase.red, .tp-simpleresponsive .purchase:hover.red { background-color:#cb1d1d; -webkit-box-shadow: 0px 3px 0px 0px #7c1212; -moz-box-shadow: 0px 3px 0px 0px #7c1212; box-shadow: 0px 3px 0px 0px #7c1212} .tp-simpleresponsive .button.orange, .tp-simpleresponsive .button:hover.orange, .tp-simpleresponsive .purchase.orange, .tp-simpleresponsive .purchase:hover.orange { background-color:#ff7700; -webkit-box-shadow: 0px 3px 0px 0px #a34c00; -moz-box-shadow: 0px 3px 0px 0px #a34c00; box-shadow: 0px 3px 0px 0px #a34c00} .tp-simpleresponsive .button.darkgrey, .tp-simpleresponsive .button.grey, .tp-simpleresponsive .button:hover.darkgrey, .tp-simpleresponsive .button:hover.grey, .tp-simpleresponsive .purchase.darkgrey, .tp-simpleresponsive .purchase:hover.darkgrey { background-color:#555; -webkit-box-shadow: 0px 3px 0px 0px #222; -moz-box-shadow: 0px 3px 0px 0px #222; box-shadow: 0px 3px 0px 0px #222} .tp-simpleresponsive .button.lightgrey, .tp-simpleresponsive .button:hover.lightgrey, .tp-simpleresponsive .purchase.lightgrey, .tp-simpleresponsive .purchase:hover.lightgrey { background-color:#888; -webkit-box-shadow: 0px 3px 0px 0px #555; -moz-box-shadow: 0px 3px 0px 0px #555; box-shadow: 0px 3px 0px 0px #555} /**************************************************************** - SET THE ANIMATION EVEN MORE SMOOTHER ON ANDROID - ******************************************************************/ /*.tp-simpleresponsive { -webkit-perspective: 1500px; -moz-perspective: 1500px; -o-perspective: 1500px; -ms-perspective: 1500px; perspective: 1500px; }*/ /********************************************** - FULLSCREEN AND FULLWIDHT CONTAINERS - **********************************************/ .fullscreen-container { width:100%; position:relative; padding:0; } .fullwidthbanner-container{ width:100%; position:relative; padding:0; overflow:hidden; } .fullwidthbanner-container .fullwidthbanner{ width:100%; position:relative; } /************************************************ - SOME CAPTION MODIFICATION AT START - *************************************************/ .tp-simpleresponsive .caption, .tp-simpleresponsive .tp-caption { /*-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; */ position:absolute;visibility: hidden; -webkit-font-smoothing: antialiased !important; } .tp-simpleresponsive img { max-width:none} /****************************** - IE8 HACKS - *******************************/ .noFilterClass { filter:none !important; } /****************************** - SHADOWS - ******************************/ .tp-bannershadow { position:absolute; margin-left:auto; margin-right:auto; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .tp-bannershadow.tp-shadow1 { background:url(../assets/shadow1.png) no-repeat; background-size:100% 100%; width:890px; height:60px; bottom:-60px} .tp-bannershadow.tp-shadow2 { background:url(../assets/shadow2.png) no-repeat; background-size:100% 100%; width:890px; height:60px;bottom:-60px} .tp-bannershadow.tp-shadow3 { background:url(../assets/shadow3.png) no-repeat; background-size:100% 100%; width:890px; height:60px;bottom:-60px} /******************************** - FULLSCREEN VIDEO - *********************************/ .caption.fullscreenvideo { left:0px; top:0px; position:absolute;width:100%;height:100%} .caption.fullscreenvideo iframe, .caption.fullscreenvideo video { width:100% !important; height:100% !important; display: none} .tp-caption.fullscreenvideo { left:0px; top:0px; position:absolute;width:100%;height:100%} .tp-caption.fullscreenvideo iframe, .tp-caption.fullscreenvideo iframe video { width:100% !important; height:100% !important; display: none} .fullcoveredvideo video, .fullscreenvideo video { background: #000} .fullcoveredvideo .tp-poster { background-position: center center;background-size: cover;width:100%;height:100%;top:0px;left:0px} .html5vid.videoisplaying .tp-poster { display: none} .tp-video-play-button { background:#000; background:rgba(0,0,0,0.3); padding:5px; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; position: absolute; top: 50%; left: 50%; font-size: 40px; color: #FFF; z-index: 3; margin-top: -27px; margin-left: -28px; text-align: center; cursor: pointer; } .html5vid .tp-revstop { width:15px;height:20px; border-left:5px solid #fff; border-right:5px solid #fff; position:relative;margin:10px 20px; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box} .html5vid .tp-revstop { display:none} .html5vid.videoisplaying .revicon-right-dir { display:none} .html5vid.videoisplaying .tp-revstop { display:block} .html5vid.videoisplaying .tp-video-play-button { display:none} .html5vid:hover .tp-video-play-button { display:block} .fullcoveredvideo .tp-video-play-button { display:none !important} .tp-video-controls { position: absolute; bottom: 0; left: 0; right: 0; padding: 5px; opacity: 0; -webkit-transition: opacity .3s; -moz-transition: opacity .3s; -o-transition: opacity .3s; -ms-transition: opacity .3s; transition: opacity .3s; background-image: linear-gradient(bottom, rgb(0,0,0) 13%, rgb(50,50,50) 100%); background-image: -o-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(50,50,50) 100%); background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(50,50,50) 100%); background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(50,50,50) 100%); background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 13%, rgb(50,50,50) 100%); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.13, rgb(0,0,0)), color-stop(1, rgb(50,50,50)) ); display:table;max-width:100%; overflow:hidden;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; } .tp-caption:hover .tp-video-controls { opacity: .9; } .tp-video-button { background: rgba(0,0,0,.5); border: 0; color: #EEE; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; cursor:pointer; line-height:12px; font-size:12px; color:#fff; padding:0px; margin:0px; outline: none; } .tp-video-button:hover { cursor: pointer; } .tp-video-button-wrap, .tp-video-seek-bar-wrap, .tp-video-vol-bar-wrap { padding:0px 5px;display:table-cell; } .tp-video-seek-bar-wrap { width:80%} .tp-video-vol-bar-wrap { width:20%} .tp-volume-bar, .tp-seek-bar { width:100%; cursor: pointer; outline:none; line-height:12px;margin:0; padding:0;} /******************************** - FULLSCREEN VIDEO ENDS - *********************************/ /******************************** - DOTTED OVERLAYS - *********************************/ .tp-dottedoverlay { background-repeat:repeat;width:100%;height:100%;position:absolute;top:0px;left:0px;z-index:4} .tp-dottedoverlay.twoxtwo { background:url(../assets/gridtile.png)} .tp-dottedoverlay.twoxtwowhite { background:url(../assets/gridtile_white.png)} .tp-dottedoverlay.threexthree { background:url(../assets/gridtile_3x3.png)} .tp-dottedoverlay.threexthreewhite { background:url(../assets/gridtile_3x3_white.png)} /******************************** - DOTTED OVERLAYS ENDS - *********************************/ /************************ - NAVIGATION - *************************/ /** BULLETS **/ .tpclear { clear:both} .tp-bullets { z-index:1000; position:absolute; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out;-webkit-transform: translateZ(5px); } .tp-bullets.hidebullets { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .tp-bullets.simplebullets.navbar { border:1px solid #666; border-bottom:1px solid #444; background:url(../assets/boxed_bgtile.png); height:40px; padding:0px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .tp-bullets.simplebullets.navbar-old { background:url(../assets/navigdots_bgtile.png); height:35px; padding:0px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px } .tp-bullets.simplebullets.round .bullet { cursor:pointer; position:relative; background:url(../assets/bullet.png) no-Repeat top left; width:20px; height:20px; margin-right:0px; float:left; margin-top:0px; margin-left:3px} .tp-bullets.simplebullets.round .bullet.last { margin-right:3px} .tp-bullets.simplebullets.round-old .bullet { cursor:pointer; position:relative; background:url(../assets/bullets.png) no-Repeat bottom left; width:23px; height:23px; margin-right:0px; float:left; margin-top:0px} .tp-bullets.simplebullets.round-old .bullet.last { margin-right:0px} /** SQUARE BULLETS **/ .tp-bullets.simplebullets.square .bullet { cursor:pointer; position:relative; background:url(../assets/bullets2.png) no-Repeat bottom left; width:19px; height:19px; margin-right:0px; float:left; margin-top:0px} .tp-bullets.simplebullets.square .bullet.last { margin-right:0px} /** SQUARE BULLETS **/ .tp-bullets.simplebullets.square-old .bullet { cursor:pointer; position:relative; background:url(../assets/bullets2.png) no-Repeat bottom left; width:19px; height:19px; margin-right:0px; float:left; margin-top:0px} .tp-bullets.simplebullets.square-old .bullet.last { margin-right:0px} /** navbar NAVIGATION VERSION **/ .tp-bullets.simplebullets.navbar .bullet { cursor:pointer; position:relative; background:url(../assets/bullet_boxed.png) no-Repeat top left; width:18px; height:19px; margin-right:5px; float:left; margin-top:0px} .tp-bullets.simplebullets.navbar .bullet.first { margin-left:0px !important} .tp-bullets.simplebullets.navbar .bullet.last { margin-right:0px !important} /** navbar NAVIGATION VERSION **/ .tp-bullets.simplebullets.navbar-old .bullet { cursor:pointer; position:relative; background:url(../assets/navigdots.png) no-Repeat bottom left; width:15px; height:15px; margin-left:5px !important; margin-right:5px !important;float:left; margin-top:10px} .tp-bullets.simplebullets.navbar-old .bullet.first { margin-left:0px !important} .tp-bullets.simplebullets.navbar-old .bullet.last { margin-right:0px !important} .tp-bullets.simplebullets .bullet:hover, .tp-bullets.simplebullets .bullet.selected { background-position:top left} .tp-bullets.simplebullets.round .bullet:hover, .tp-bullets.simplebullets.round .bullet.selected, .tp-bullets.simplebullets.navbar .bullet:hover, .tp-bullets.simplebullets.navbar .bullet.selected { background-position:bottom left} /************************************* - TP ARROWS - **************************************/ .tparrows { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: opacity 0.2s ease-out; -moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out; -ms-transition: opacity 0.2s ease-out; -webkit-transform: translateZ(5000px); -webkit-transform-style: flat; -webkit-backface-visibility: hidden; z-index:600; position: relative; } .tparrows.hidearrows { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; } .tp-leftarrow { z-index:100;cursor:pointer; position:relative; background:url(../assets/large_left.png) no-Repeat top left; width:40px; height:40px; } .tp-rightarrow { z-index:100;cursor:pointer; position:relative; background:url(../assets/large_right.png) no-Repeat top left; width:40px; height:40px; } .tp-leftarrow.round { z-index:100;cursor:pointer; position:relative; background:url(../assets/small_left.png) no-Repeat top left; width:19px; height:14px; margin-right:0px; float:left; margin-top:0px; } .tp-rightarrow.round { z-index:100;cursor:pointer; position:relative; background:url(../assets/small_right.png) no-Repeat top left; width:19px; height:14px; margin-right:0px; float:left; margin-top:0px} .tp-leftarrow.round-old { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrow_left.png) no-Repeat top left; width:26px; height:26px; margin-right:0px; float:left; margin-top:0px; } .tp-rightarrow.round-old { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrow_right.png) no-Repeat top left; width:26px; height:26px; margin-right:0px; float:left; margin-top:0px} .tp-leftarrow.navbar { z-index:100;cursor:pointer; position:relative; background:url(../assets/small_left_boxed.png) no-Repeat top left; width:20px; height:15px; float:left; margin-right:6px; margin-top:12px} .tp-rightarrow.navbar { z-index:100;cursor:pointer; position:relative; background:url(../assets/small_right_boxed.png) no-Repeat top left; width:20px; height:15px; float:left; margin-left:6px; margin-top:12px} .tp-leftarrow.navbar-old { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrowleft.png) no-Repeat top left; width:9px; height:16px; float:left; margin-right:6px; margin-top:10px} .tp-rightarrow.navbar-old { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrowright.png) no-Repeat top left; width:9px; height:16px; float:left; margin-left:6px; margin-top:10px} .tp-leftarrow.navbar-old.thumbswitharrow { margin-right:10px} .tp-rightarrow.navbar-old.thumbswitharrow { margin-left:0px} .tp-leftarrow.square { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrow_left2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-right:0px; margin-top:0px} .tp-rightarrow.square { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrow_right2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-left:0px; margin-top:0px} .tp-leftarrow.square-old { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrow_left2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-right:0px; margin-top:0px} .tp-rightarrow.square-old { z-index:100;cursor:pointer; position:relative; background:url(../assets/arrow_right2.png) no-Repeat top left; width:12px; height:17px; float:left; margin-left:0px; margin-top:0px} .tp-leftarrow.default { z-index:100;cursor:pointer; position:relative; background:url(../assets/large_left.png) no-Repeat 0 0; width:40px; height:40px; } .tp-rightarrow.default { z-index:100;cursor:pointer; position:relative; background:url(../assets/large_right.png) no-Repeat 0 0; width:40px; height:40px; } .tp-leftarrow:hover, .tp-rightarrow:hover { background-position:bottom left} /**************************************************************************************************** - TP THUMBS - ***************************************************************************************************** - tp-thumbs & tp-mask Width is the width of the basic Thumb Container (500px basic settings) - .bullet width & height is the dimension of a simple Thumbnail (basic 100px x 50px) *****************************************************************************************************/ .tp-bullets.tp-thumbs { z-index:1000; position:absolute; padding:3px;background-color:#fff; width:500px;height:50px; /* THE DIMENSIONS OF THE THUMB CONTAINER */ margin-top:-50px; } .fullwidthbanner-container .tp-thumbs { padding:3px} .tp-bullets.tp-thumbs .tp-mask { width:500px; height:50px; /* THE DIMENSIONS OF THE THUMB CONTAINER */ overflow:hidden; position:relative} .tp-bullets.tp-thumbs .tp-mask .tp-thumbcontainer { width:5000px; position:absolute} .tp-bullets.tp-thumbs .bullet { width:100px; height:50px; /* THE DIMENSION OF A SINGLE THUMB */ cursor:pointer; overflow:hidden;background:none;margin:0;float:left; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*filter: alpha(opacity=50); */ -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; } .tp-bullets.tp-thumbs .bullet:hover, .tp-bullets.tp-thumbs .bullet.selected { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; } .tp-thumbs img { width:100%} /************************************ - TP BANNER TIMER - *************************************/ .tp-bannertimer { width:100%; height:10px; background:url(../assets/timer.png);position:absolute; z-index:200;top:0px} .tp-bannertimer.tp-bottom { bottom:0px;height:5px; top:auto} /*************************************** - RESPONSIVE SETTINGS - ****************************************/ @media only screen and (min-width: 0px) and (max-width: 479px) { .responsive .tp-bullets { display:none} .responsive .tparrows { display:none} } /********************************************* - BASIC SETTINGS FOR THE BANNER - ***********************************************/ .tp-simpleresponsive img { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } .tp-simpleresponsive a{ text-decoration:none} .tp-simpleresponsive ul, .tp-simpleresponsive ul li, .tp-simpleresponsive ul li:before { list-style:none; padding:0 !important; margin:0 !important; list-style:none !important; overflow-x: visible; overflow-y: visible; background-image:none } .tp-simpleresponsive >ul >li{ list-style:none; position:absolute; visibility:hidden } /* CAPTION SLIDELINK **/ .caption.slidelink a div, .tp-caption.slidelink a div { width:3000px; height:1500px; background:url(../assets/coloredbg.png) repeat} .tp-caption.slidelink a span { background:url(../assets/coloredbg.png) repeat} /***************************************** - NAVIGATION FANCY EXAMPLES - *****************************************/ .tparrows .tp-arr-imgholder { display: none} .tparrows .tp-arr-titleholder { display: none} /***************************************** - NAVIGATION FANCY EXAMPLES - *****************************************/ /* NAVIGATION PREVIEW 1 */ .tparrows.preview1 { width:100px;height:100px;-webkit-transform-style: preserve-3d; -webkit-perspective: 1000; -moz-perspective: 1000; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;background: transparent} .tparrows.preview1:after { position:absolute; left:0px;top:0px; font-family: "revicons"; color:#fff; font-size:30px; width:100px;height:100px;text-align: center; background:#fff;background:rgba(0,0,0,0.15);z-index:2;line-height:100px; -webkit-transition: background 0.3s, color 0.3s; -moz-transition: background 0.3s, color 0.3s; transition: background 0.3s, color 0.3s} .tp-rightarrow.preview1:after { content: '\e825'; } .tp-leftarrow.preview1:after { content: '\e824'; } .tparrows.preview1:hover:after { background:rgba(255,255,255,1); color:#aaa} .tparrows.preview1 .tp-arr-imgholder { background-size:cover; background-position:center center; display:block;width:100%;height:100%;position:absolute;top:0px; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tparrows.preview1 .tp-arr-iwrapper { -webkit-transition: all 0.3s;transition: all 0.3s; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0.0;-khtml-opacity: 0.0;opacity: 0.0} .tparrows.preview1:hover .tp-arr-iwrapper { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1} .tp-rightarrow.preview1 .tp-arr-imgholder { right:100%; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0.0;-khtml-opacity: 0.0;opacity: 0.0; } .tp-leftarrow.preview1 .tp-arr-imgholder { left:100%; -webkit-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0.0;-khtml-opacity: 0.0;opacity: 0.0; } .tparrows.preview1:hover .tp-arr-imgholder { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; } @media only screen and (min-width: 768px) and (max-width: 979px) { .tparrows.preview1, .tparrows.preview1:after { width:80px; height:80px;line-height:80px; font-size:24px} } @media only screen and (min-width: 480px) and (max-width: 767px) { .tparrows.preview1, .tparrows.preview1:after { width:60px; height:60px;line-height:60px;font-size:20px} } @media only screen and (min-width: 0px) and (max-width: 479px) { .tparrows.preview1, .tparrows.preview1:after { width:40px; height:40px;line-height:40px; font-size:12px} } /* PREVIEW 1 BULLETS */ .tp-bullets.preview1 { height: 21px} .tp-bullets.preview1 .bullet { cursor: pointer; position: relative !important; background: rgba(0, 0, 0, 0.15) !important; /*-webkit-border-radius: 10px; border-radius: 10px;*/ -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 5px !important; height: 5px !important; border: 8px solid rgba(0, 0, 0, 0) !important; display: inline-block; margin-right: 5px !important; margin-bottom: 0px !important; -webkit-transition: background-color 0.2s, border-color 0.2s; -moz-transition: background-color 0.2s, border-color 0.2s; -o-transition: background-color 0.2s, border-color 0.2s; -ms-transition: background-color 0.2s, border-color 0.2s; transition: background-color 0.2s, border-color 0.2s; float:none !important; box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } .tp-bullets.preview1 .bullet.last { margin-right: 0px} .tp-bullets.preview1 .bullet:hover, .tp-bullets.preview1 .bullet.selected { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: #aaa !important; width: 5px !important; height: 5px !important; border: 8px solid rgba(255, 255, 255, 1) !important; } /* NAVIGATION PREVIEW 2 */ .tparrows.preview2 { min-width:60px; min-height:60px; background:#fff; ; border-radius:30px;-moz-border-radius:30px;-webkit-border-radius:30px; overflow:hidden; -webkit-transition: -webkit-transform 1.3s; -webkit-transition: width 0.3s, background-color 0.3s, opacity 0.3s; transition: width 0.3s, background-color 0.3s, opacity 0.3s; backface-visibility: hidden; } .tparrows.preview2:after { position:absolute; top:50%; font-family: "revicons"; color:#aaa; font-size:25px; margin-top: -12px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s } .tp-rightarrow.preview2:after { content: '\e81e'; right:18px} .tp-leftarrow.preview2:after { content: '\e81f'; left:18px} .tparrows.preview2 .tp-arr-titleholder { background-size:cover; background-position:center center; display:block; visibility:hidden;position:relative;top:0px; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-backface-visibility: hidden; backface-visibility: hidden; white-space: nowrap; color: #000; text-transform: uppercase; font-weight: 400; font-size: 14px; line-height: 60px; padding:0px 10px; } .tp-rightarrow.preview2 .tp-arr-titleholder { right:50px; -webkit-transform: translateX(-100%); transform: translateX(-100%); } .tp-leftarrow.preview2 .tp-arr-titleholder { left:50px; -webkit-transform: translateX(100%); transform: translateX(100%); } .tparrows.preview2.hovered { width:300px} .tparrows.preview2:hover { background:#fff} .tparrows.preview2:hover:after { color:#000} .tparrows.preview2:hover .tp-arr-titleholder{ -webkit-transform: translateX(0px); transform: translateX(0px); visibility: visible; position: absolute; } /* PREVIEW 2 BULLETS */ .tp-bullets.preview2 { height: 17px} .tp-bullets.preview2 .bullet { cursor: pointer; position: relative !important; background: rgba(0, 0, 0, 0.5) !important; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 6px !important; height: 6px !important; border: 5px solid rgba(0, 0, 0, 0) !important; display: inline-block; margin-right: 2px !important; margin-bottom: 0px !important; -webkit-transition: background-color 0.2s, border-color 0.2s; -moz-transition: background-color 0.2s, border-color 0.2s; -o-transition: background-color 0.2s, border-color 0.2s; -ms-transition: background-color 0.2s, border-color 0.2s; transition: background-color 0.2s, border-color 0.2s; float:none !important; box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } .tp-bullets.preview2 .bullet.last { margin-right: 0px} .tp-bullets.preview2 .bullet:hover, .tp-bullets.preview2 .bullet.selected { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: rgba(255, 255, 255, 1) !important; width: 6px !important; height: 6px !important; border: 5px solid rgba(0, 0, 0, 1) !important; } .tp-arr-titleholder.alwayshidden { display:none !important} @media only screen and (min-width: 768px) and (max-width: 979px) { .tparrows.preview2 { min-width:40px; min-height:40px; width:40px;height:40px; border-radius:20px;-moz-border-radius:20px;-webkit-border-radius:20px; } .tparrows.preview2:after { position:absolute; top:50%; font-family: "revicons"; font-size:20px; margin-top: -12px} .tp-rightarrow.preview2:after { content: '\e81e'; right:11px} .tp-leftarrow.preview2:after { content: '\e81f'; left:11px} .tparrows.preview2 .tp-arr-titleholder { font-size:12px; line-height:40px; letter-spacing: 0px} .tp-rightarrow.preview2 .tp-arr-titleholder { right:35px} .tp-leftarrow.preview2 .tp-arr-titleholder { left:35px} } @media only screen and (min-width: 480px) and (max-width: 767px) { .tparrows.preview2 { min-width:30px; min-height:30px; width:30px;height:30px; border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px; } .tparrows.preview2:after { position:absolute; top:50%; font-family: "revicons"; font-size:14px; margin-top: -12px} .tp-rightarrow.preview2:after { content: '\e81e'; right:8px} .tp-leftarrow.preview2:after { content: '\e81f'; left:8px} .tparrows.preview2 .tp-arr-titleholder { font-size:10px; line-height:30px; letter-spacing: 0px} .tp-rightarrow.preview2 .tp-arr-titleholder { right:25px} .tp-leftarrow.preview2 .tp-arr-titleholder { left:25px} .tparrows.preview2 .tp-arr-titleholder { display:none;visibility:none} } @media only screen and (min-width: 0px) and (max-width: 479px) { .tparrows.preview2 { min-width:30px; min-height:30px; width:30px;height:30px; border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px; } .tparrows.preview2:after { position:absolute; top:50%; font-family: "revicons"; font-size:14px; margin-top: -12px} .tp-rightarrow.preview2:after { content: '\e81e'; right:8px} .tp-leftarrow.preview2:after { content: '\e81f'; left:8px} .tparrows.preview2 .tp-arr-titleholder { display:none;visibility:none} .tparrows.preview2:hover { width:30px !important; height:30px !important} } /* NAVIGATION PREVIEW 3 */ .tparrows.preview3 { width:70px; height:70px; background:#fff; background:rgba(255,255,255,1); -webkit-transform-style: flat} .tparrows.preview3:after { position:absolute; line-height: 70px;text-align: center; font-family: "revicons"; color:#aaa; font-size:30px; top:0px;left:0px;;background:#fff; z-index:100; width:70px;height:70px; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; transition: color 0.3s} .tparrows.preview3:hover:after { color:#000} .tp-rightarrow.preview3:after { content: '\e825'; } .tp-leftarrow.preview3:after { content: '\e824'; } .tparrows.preview3 .tp-arr-iwrapper { -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transition: -webkit-transform 0.2s; transition: transform 0.2s; z-index:0;position: absolute; background: #000; background: rgba(0,0,0,0.75); display: table;min-height:90px;top:-10px} .tp-leftarrow.preview3 .tp-arr-iwrapper { -webkit-transform: scale(0,1); transform: scale(0,1); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; } .tparrows.preview3 .tp-arr-imgholder { display:block;background-size:cover; background-position:center center; display:table-cell;min-width:90px;height:90px; position:relative;top:0px} .tp-rightarrow.preview3 .tp-arr-iwrapper { right:0px;padding-right:70px} .tp-leftarrow.preview3 .tp-arr-iwrapper { left:0px; direction: rtl;padding-left:70px} .tparrows.preview3 .tp-arr-titleholder { display:table-cell; padding:30px;font-size:16px; color:#fff;white-space: nowrap; position: relative; clear:right;vertical-align: middle} .tparrows.preview3:hover .tp-arr-iwrapper { -webkit-transform: scale(1,1); transform: scale(1,1); } /* PREVIEW 3 BULLETS */ .tp-bullets.preview3 { height: 17px} .tp-bullets.preview3 .bullet { cursor: pointer; position: relative !important; background: rgba(0, 0, 0, 0.5) !important; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 6px !important; height: 6px !important; border: 5px solid rgba(0, 0, 0, 0) !important; display: inline-block; margin-right: 2px !important; margin-bottom: 0px !important; -webkit-transition: background-color 0.2s, border-color 0.2s; -moz-transition: background-color 0.2s, border-color 0.2s; -o-transition: background-color 0.2s, border-color 0.2s; -ms-transition: background-color 0.2s, border-color 0.2s; transition: background-color 0.2s, border-color 0.2s; float:none !important; box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } .tp-bullets.preview3 .bullet.last { margin-right: 0px} .tp-bullets.preview3 .bullet:hover, .tp-bullets.preview3 .bullet.selected { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: rgba(255, 255, 255, 1) !important; width: 6px !important; height: 6px !important; border: 5px solid rgba(0, 0, 0, 1) !important; } @media only screen and (min-width: 768px) and (max-width: 979px) { .tparrows.preview3:after, .tparrows.preview3 { width:50px; height:50px; line-height:50px;font-size:20px} .tparrows.preview3 .tp-arr-iwrapper { min-height:70px} .tparrows.preview3 .tp-arr-imgholder { min-width:70px;height:70px} .tp-rightarrow.preview3 .tp-arr-iwrapper { padding-right:50px} .tp-leftarrow.preview3 .tp-arr-iwrapper { padding-left:50px} .tparrows.preview3 .tp-arr-titleholder { padding:10px;font-size:16px} } @media only screen and (max-width: 767px) { .tparrows.preview3:after, .tparrows.preview3 { width:50px; height:50px; line-height:50px;font-size:20px} .tparrows.preview3 .tp-arr-iwrapper { min-height:70px} } /* NAVIGATION PREVIEW 4 */ .tparrows.preview4 { width:30px; height:110px; background:transparent;-webkit-transform-style: preserve-3d; -webkit-perspective: 1000; -moz-perspective: 1000} .tparrows.preview4:after { position:absolute; line-height: 110px;text-align: center; font-family: "revicons"; color:#fff; font-size:20px; top:0px;left:0px;z-index:0; width:30px;height:110px; background: #000; background: rgba(0,0,0,0.25); -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; } .tp-rightarrow.preview4:after { content: '\e825'; } .tp-leftarrow.preview4:after { content: '\e824'; } .tparrows.preview4 .tp-arr-allwrapper { visibility:hidden;width:180px;position: absolute;z-index: 1;min-height:120px;top:0px;left:-150px; overflow: hidden;-webkit-perspective: 1000px;-webkit-transform-style: flat} .tp-leftarrow.preview4 .tp-arr-allwrapper { left:0px} .tparrows.preview4 .tp-arr-iwrapper { position: relative} .tparrows.preview4 .tp-arr-imgholder { display:block;background-size:cover; background-position:center center;width:180px;height:110px; position:relative;top:0px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tparrows.preview4 .tp-arr-imgholder2 { display:block;background-size:cover; background-position:center center; width:180px;height:110px; position:absolute;top:0px; left:180px; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .tp-leftarrow.preview4 .tp-arr-imgholder2 { left:-180px} .tparrows.preview4 .tp-arr-titleholder { display:block; font-size:12px; line-height:25px; padding:0px 10px;text-align:left;color:#fff; position: relative; background: #000; color: #FFF; text-transform: uppercase; white-space: nowrap; letter-spacing: 1px; font-weight: 700; font-size: 11px; line-height: 2.75; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);-moz-opacity: 0.0;-khtml-opacity: 0.0;opacity: 0.0; } .tparrows.preview4:after { transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%} .tp-leftarrow.preview4:after { transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%} @media only screen and (min-width: 768px) { .tparrows.preview4:hover:after { -webkit-transform: rotateY(-90deg); transform:rotateY(-90deg)} .tp-leftarrow.preview4:hover:after { -webkit-transform: rotateY(90deg); transform:rotateY(90deg)} .tparrows.preview4:hover .tp-arr-titleholder { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: rotateX(0deg); transform: rotateX(0deg); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);-moz-opacity: 1;-khtml-opacity: 1;opacity: 1; } } /* PREVIEW 4 BULLETS */ .tp-bullets.preview4 { height: 17px} .tp-bullets.preview4 .bullet { cursor: pointer; position: relative !important; background: rgba(0, 0, 0, 0.5) !important; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; width: 6px !important; height: 6px !important; border: 5px solid rgba(0, 0, 0, 0) !important; display: inline-block; margin-right: 2px !important; margin-bottom: 0px !important; -webkit-transition: background-color 0.2s, border-color 0.2s; -moz-transition: background-color 0.2s, border-color 0.2s; -o-transition: background-color 0.2s, border-color 0.2s; -ms-transition: background-color 0.2s, border-color 0.2s; transition: background-color 0.2s, border-color 0.2s; float:none !important; box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; } .tp-bullets.preview4 .bullet.last { margin-right: 0px} .tp-bullets.preview4 .bullet:hover, .tp-bullets.preview4 .bullet.selected { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; background: rgba(255, 255, 255, 1) !important; width: 6px !important; height: 6px !important; border: 5px solid rgba(0, 0, 0, 1) !important; } @media only screen and (max-width: 767px) { .tparrows.preview4 { width:20px; height:80px} .tparrows.preview4:after { width:20px; height:80px; line-height:80px; font-size:14px} .tparrows.preview1 .tp-arr-allwrapper, .tparrows.preview2 .tp-arr-allwrapper, .tparrows.preview3 .tp-arr-allwrapper, .tparrows.preview4 .tp-arr-allwrapper { display: none !important} } /****************************** - LOADER FORMS - ********************************/ .tp-loader { top:50%; left:50%; z-index:10000; position:absolute; } .tp-loader.spinner0 { width: 40px; height: 40px; background:url(../assets/loader.gif) no-repeat center center; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); margin-top:-20px; margin-left:-20px; -webkit-animation: tp-rotateplane 1.2s infinite ease-in-out; animation: tp-rotateplane 1.2s infinite ease-in-out; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .tp-loader.spinner1 { width: 40px; height: 40px; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); margin-top:-20px; margin-left:-20px; -webkit-animation: tp-rotateplane 1.2s infinite ease-in-out; animation: tp-rotateplane 1.2s infinite ease-in-out; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } .tp-loader.spinner5 { background:url(../assets/loader.gif) no-repeat 10px 10px; background-color:#fff; margin:-22px -22px; width:44px;height:44px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } @-webkit-keyframes tp-rotateplane { 0% { -webkit-transform: perspective(120px) } 50% { -webkit-transform: perspective(120px) rotateY(180deg) } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) } } @keyframes tp-rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg) } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg) } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } .tp-loader.spinner2 { width: 40px; height: 40px; margin-top:-20px;margin-left:-20px; background-color: #ff0000; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); border-radius: 100%; -webkit-animation: tp-scaleout 1.0s infinite ease-in-out; animation: tp-scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes tp-scaleout { 0% { -webkit-transform: scale(0.0) } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes tp-scaleout { 0% { transform: scale(0.0); -webkit-transform: scale(0.0); } 100% { transform: scale(1.0); -webkit-transform: scale(1.0); opacity: 0; } } .tp-loader.spinner3 { margin: -9px 0px 0px -35px; width: 70px; text-align: center; } .tp-loader.spinner3 .bounce1, .tp-loader.spinner3 .bounce2, .tp-loader.spinner3 .bounce3 { width: 18px; height: 18px; background-color: #fff; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); border-radius: 100%; display: inline-block; -webkit-animation: tp-bouncedelay 1.4s infinite ease-in-out; animation: tp-bouncedelay 1.4s infinite ease-in-out; /* Prevent first frame from flickering when animation starts */ -webkit-animation-fill-mode: both; animation-fill-mode: both; } .tp-loader.spinner3 .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .tp-loader.spinner3 .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes tp-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0.0) } 40% { -webkit-transform: scale(1.0) } } @keyframes tp-bouncedelay { 0%, 80%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 40% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .tp-loader.spinner4 { margin: -20px 0px 0px -20px; width: 40px; height: 40px; text-align: center; -webkit-animation: tp-rotate 2.0s infinite linear; animation: tp-rotate 2.0s infinite linear; } .tp-loader.spinner4 .dot1, .tp-loader.spinner4 .dot2 { width: 60%; height: 60%; display: inline-block; position: absolute; top: 0; background-color: #fff; border-radius: 100%; -webkit-animation: tp-bounce 2.0s infinite ease-in-out; animation: tp-bounce 2.0s infinite ease-in-out; box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.15); } .tp-loader.spinner4 .dot2 { top: auto; bottom: 0px; -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes tp-rotate { 100% { -webkit-transform: rotate(360deg) }} @keyframes tp-rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }} @-webkit-keyframes tp-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) } } @keyframes tp-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0); } } .tp-transparentimg { content:"url(../assets/transparent.png)"} .tp-3d { -webkit-transform-style: preserve-3d; -webkit-transform-origin: 50% 50%; } .tp-caption img { background: transparent; -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); zoom: 1; } @font-face { font-family: 'revicons'; src: url('../font/revicons.eot?5510888'); src: url('../font/revicons.eot?5510888#iefix') format('embedded-opentype'), url('../font/revicons.woff?5510888') format('woff'), url('../font/revicons.ttf?5510888') format('truetype'), url('../font/revicons.svg?5510888#revicons') format('svg'); font-weight: normal; font-style: normal; } /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ /* @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'revicons'; src: url('../font/revicons.svg?5510888#revicons') format('svg'); } } */ [class^="revicon-"]:before, [class*=" revicon-"]:before { font-family: "revicons"; font-style: normal; font-weight: normal; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; /* opacity: .8; */ /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; /* fix buttons height, for twitter bootstrap */ line-height: 1em; /* Animation center compensation - margins should be symmetric */ /* remove if not needed */ margin-left: .2em; /* you can be more comfortable with increased icons size */ /* font-size: 120%; */ /* Uncomment for 3D effect */ /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ } .revicon-search-1:before { content: '\e802'} /* '' */ .revicon-pencil-1:before { content: '\e831'} /* '' */ .revicon-picture-1:before { content: '\e803'} /* '' */ .revicon-cancel:before { content: '\e80a'} /* '' */ .revicon-info-circled:before { content: '\e80f'} /* '' */ .revicon-trash:before { content: '\e801'} /* '' */ .revicon-left-dir:before { content: '\e817'} /* '' */ .revicon-right-dir:before { content: '\e818'} /* '' */ .revicon-down-open:before { content: '\e83b'} /* '' */ .revicon-left-open:before { content: '\e819'} /* '' */ .revicon-right-open:before { content: '\e81a'} /* '' */ .revicon-angle-left:before { content: '\e820'} /* '' */ .revicon-angle-right:before { content: '\e81d'} /* '' */ .revicon-left-big:before { content: '\e81f'} /* '' */ .revicon-right-big:before { content: '\e81e'} /* '' */ .revicon-magic:before { content: '\e807'} /* '' */ .revicon-picture:before { content: '\e800'} /* '' */ .revicon-export:before { content: '\e80b'} /* '' */ .revicon-cog:before { content: '\e832'} /* '' */ .revicon-login:before { content: '\e833'} /* '' */ .revicon-logout:before { content: '\e834'} /* '' */ .revicon-video:before { content: '\e805'} /* '' */ .revicon-arrow-combo:before { content: '\e827'} /* '' */ .revicon-left-open-1:before { content: '\e82a'} /* '' */ .revicon-right-open-1:before { content: '\e82b'} /* '' */ .revicon-left-open-mini:before { content: '\e822'} /* '' */ .revicon-right-open-mini:before { content: '\e823'} /* '' */ .revicon-left-open-big:before { content: '\e824'} /* '' */ .revicon-right-open-big:before { content: '\e825'} /* '' */ .revicon-left:before { content: '\e836'} /* '' */ .revicon-right:before { content: '\e826'} /* '' */ .revicon-ccw:before { content: '\e808'} /* '' */ .revicon-arrows-ccw:before { content: '\e806'} /* '' */ .revicon-palette:before { content: '\e829'} /* '' */ .revicon-list-add:before { content: '\e80c'} /* '' */ .revicon-doc:before { content: '\e809'} /* '' */ .revicon-left-open-outline:before { content: '\e82e'} /* '' */ .revicon-left-open-2:before { content: '\e82c'} /* '' */ .revicon-right-open-outline:before { content: '\e82f'} /* '' */ .revicon-right-open-2:before { content: '\e82d'} /* '' */ .revicon-equalizer:before { content: '\e83a'} /* '' */ .revicon-layers-alt:before { content: '\e804'} /* '' */ .revicon-popup:before { content: '\e828'} /* '' */ /* ============================================================================ - CSS Document - Theme Name: EXCEPTION Responsive Business HTML Template. - Theme URI: http://demo.it-rays.com/exception - Author: IT-RAYS - Version: 1.3 ============================================================================= */ /*=========================================================================== CONTENTS: 1. CSS RESET. 2. SITE PRELOADER. 3. HEADER STYLE: 3.1. Top bar. 3.2. Top logo. 3.3. Main menu. 3.4. Search. 3.5. Header style 2. 3.6. Header style 3. 3.7. Login Box. 4. BLOCKS BACKGROUNDS. 5. COMMON STYLES. 6. TYPOGRAPHY. 7. PAGES ELEMENTS: 7.1. Heading styles: 7.1.1. Heading style 1. 7.1.2. Heading style 2. 7.1.3. Heading style 3. 7.1.4. Heading style 4. 7.2. Services boxes: 7.2.1. Services boxes style 1. 7.2.2. Services boxes style 2. 7.2.3. Services boxes style 3. 7.2.4. Services boxes style 4. 7.2.5. Services boxes style 5. 7.3. Skill levels style 1. 7.4. Fun Staff: 7.4.1. Fun Staff Style 1. 7.4.2. Fun Staff Style 2. 7.4.3. Fun Staff Style 3. 7.5. Testimonials Style: 7.5.1. Testimonials Style 1. 7.5.2. Testimonials Style 2. 7.6. Portfolio: 7.6.1. Portfolio Carousel. 7.6.2. Portfolio Filterable. 7.7. Form conrols: 7.7.1. Buttons. 7.7.2. Inputs. 7.8. Information boxes. 7.9. Horizontal Tabs. 7.10. Vertical Tabs. 7.11. Accordion. 7.12. Horizontal Accordion. 7.13. Icons list. 7.14. BreadCrumbs style. 7.15. Clients style. 8. PAGE SPECIFIC STYLES: 8.1. About pages. 8.2. Portfolio pages. 8.3. Pricing tables. 8.4. Team styles. 8.5. Blog. 8.6. Contact page. 8.7. Site map Page. 8.8. 404 page. 8.9. Shop page. 9. PAGE TITLES: 9.1. Page title 1. 9.2. Page title 2. 9.3. Page title 3. 9.4. Page title 4. 10. WIDGETS. 11. FOOTER. 11.1. Footer Style 1 11.2. Footer Style 2 11.3. Footer Style 3 11.4. Footer Style 4 12. FIXED LAYOUT STYLES. 13. Exception PopUp STYLES. ============================================================================= */ /* ========================================================================== 1. CSS RESET ============================================================================= */ @font-face { font-family: 'JFFlat'; src: url('/Content/themes/front_new/css/fonts/jf_flat_regular-webfont.woff2') format('woff2'), url('../css/fonts/jf_flat_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'AllRoundGothic'; src: url('/Content/themes/front_new/css/fonts/AllRoundGothic-Book.otf'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'JF-Flat'; src: url('fonts/JF Flat regular.otf'); font-weight: normal; font-style: normal; }*/ @font-face { font-family: 'STV'; src: url('/Content/themes/front_new/css/fonts/stv_bold-webfont.woff') format('woff2'), url('../css/fonts/stv_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bahij'; src: url('/Content/themes/front_new/css/fonts/bahij_thesansarabic_bold-webfont.woff2') format('woff2'), url('../css/fonts/bahij_thesansarabic_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CoconNextArabic'; src: url('/Content/themes/front_new/css/fonts/fontsfree-net-slc_-webfont.woff2') format('woff2'), url('../css/fonts/fontsfree-net-slc_-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } .svideo { width: 100% } .svideo iframe { width: 100%; height: 100%; } .site-logo { padding: 15px 0; text-align: center; } .logo-bar { border-bottom: 1px solid #eee; } .head-links, .h-social { text-align: center; margin: 30px 0 0 0; } .head-links li, .h-social li { display: inline-block; margin: 0 3px; } .head-links li a, .h-social li a { display: inline-block; width: 35px; height: 35px; border: 1px solid #eee; text-align: center; line-height: 33px; color: #ccc; border-radius: 100%; } .head-links li a:hover, .h-social li a:hover { /*background: #0178B0;*/ background: var(--color-bg); border-color: var(--color-bg); /*border-color: #0178B0;*/ color: #fff; } nav.top-nav.mega-menu.new-nav { padding: 15px 0; /* padding: 20px 0;*/ } .sticky .top-nav.mega-menu.new-nav > ul > li.selected > a, .sticky .top-nav.mega-menu.new-nav > ul > li.current > a { color: #0077AC !important; } .top-nav.mega-menu.new-nav ul li a i { display: none; } .top-nav.mega-menu.new-nav > ul > li:after { display: none; } .top-nav.mega-menu.new-nav > ul > li { margin: 0; border: 0px; height: auto; } .top-nav.mega-menu.new-nav > ul > li.selected > a { /*background: var(--color-bg);*/ background: none; color: black; } .top-nav.mega-menu.new-nav li li a { background: #fff; color: #777; } /*NEW DESIGN*/ .top-nav.mega-menu.new-nav > ul > li { margin-right: 1px; } .top-nav.mega-menu.new-nav > ul > li > a { display: block; /*When career add padding: 0 9px;*/ padding: 0 11px; height: auto; text-transform: uppercase; overflow: hidden; text-align: center; font-size: 12px; /*border: 1px solid transparent;*/ /*border-radius: 30px;*/ color: #969595; line-height: 25px; } .top-nav.mega-menu.new-nav > ul > li > a:hover { /*border: 1px solid #0178B0;*/ /*NEW DESIGN*/ /*border: 1px solid var(--color-bg);*/ background: none; color: black; /*color: var(--color-bg);*/ } .top-nav.mega-menu.new-nav > ul li a span { margin: 0px; /*NEW DESIGN*/ font-size: 10px; text-transform: none; } /*NEW DESIGN*/ .top-nav.mega-menu.new-nav li li { /*border-bottom: 1px #f1f1f1 solid;*/ } /*.top-nav.mega-menu.new-nav li li a {background:#fff; color:#999;}*/ .top-nav.mega-menu.new-nav li li a:hover { /*background: #0178B0;*/ background: #EEF2FF !important; /*opacity: 0.8;*/ font-weight: bold; color: var(--color-bg) !important; } /*TILL HERE*/ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { position: relative; margin: 0; padding: 0; color: #777; font-size: 13px; line-height: 1.428571429; /*font-family: "Open Sans", Arial, sans-serif;*/ font-family: 'AllRoundGothic'; -webkit-font-smoothing: antialiased; } html, body, div, span, hr, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strong, sub, sup, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 0; vertical-align: baseline; } input, select, textarea { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; } a:focus { outline: none; } :focus { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } [hidden] { display: none !important; } ul, li { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; border: 0; vertical-align: middle } mark { background: #ff0; color: #000; } sub, sup { position: relative; vertical-align: baseline; font-size: 75%; line-height: 0; } sup { top: -0.5em; } sub { bottom: -0.25em; } pre { overflow: auto; } code, kbd, pre, samp { font-size: 1em; font-family: monospace, monospace; } button, input, optgroup, select, textarea { margin: 0; color: inherit; font: inherit; } button { overflow: visible; } button, select { text-transform: none; } button, html input[type=button], input[type=reset], input[type=submit] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { padding: 0; border: 0; } input { line-height: normal; } input[type=checkbox], input[type=radio] { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } select { padding: 8px; border: 1px #e9e9e9 solid; background: #f3f3f3; font-size: 11px; line-height: 25px; } fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; border: 1px solid #c0c0c0; } legend { padding: 0; border: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { width: 100%; border: 1px solid #e2e2e2; border-spacing: 0; border-collapse: collapse; } tr:nth-child(even) { background: #f8f8f8; } tfoot { background: #e9e9e9; font-weight: bold; } th { text-transform: uppercase; border-right: 1px solid #e2e2e2; background: #f5f5f5; border-bottom: 2px #777 solid; } td, caption { border-right: 1px solid #e2e2e2; border-bottom: 1px solid #e2e2e2; } tr.even td { background: #f9f9f9; } th, td, caption { padding: 10px; } :before, :after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .clearfix:before, .clearfix:after, .container:before, .container:after { display: table; content: " "; } .table-style2 th { border-right-color: #fff; border-bottom-color: #5c5c5c; } .block-head-News { position: absolute; z-index: 999; left: 80px; /*width: 320px;*/ /* background-color: #0178B0; */ /* font-weight: normal; */ /* text-transform: none; */ /* font-size: 22px; */ transition: all linear 300ms; cursor: pointer; } .block-head-News .booking-btn { padding: 6px 10px; margin-bottom: 0; /*background-color: #0178B0;*/ background-color: var(--color-bg); color: #fff; float: left; /*width: 215px;*/ /* padding-left: 47px; */ } /*.block-head-News:hover { color: #fff !important; }*/ .block-head-News .icon { padding: 10px 5px 10px 10px; font-size: 20px; /*background-color: #f7f7f7;*/ /*margin: 0 5px 0 0;*/ transition: all linear 300ms; } .block-head-News .home-booking { font-size: 17px; /*background-color: #0178B0;*/ background-color: var(--color-bg); font-weight: normal; margin-left: 0px !important; margin-top: 2px !important; display: none; -webkit-animation-duration: 500ms; animation-duration: 500ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; padding-bottom: 10px; color: #ccc; text-align: center; max-width: 300px; } /*.block-head-News .home-booking [class*="cell-"] { padding: 10px; font-size: 20px; display: inline-block; -webkit-animation-duration: 800ms; animation-duration: 800ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; }*/ /*.block-head-News:hover .home-booking { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; display: inline-block; }*/ /*.block-head-News:hover .home-booking [class*="cell-"] { -webkit-animation-name: slideInRight; animation-name: slideInRight; }*/ .home-booking input, .home-booking select { margin: 8px 0 0 0; background-color: #fff; color: #000; height: 26px; padding: 0 8px; width: 100%; } .home-booking select { } .home-booking input[type=text] { } .home-booking input[type=submit], .btn-book-appointment { width: auto; height: auto; padding: 5px 10px; border: none; background: #CE1443; color: #fff; } .btn-book-appointment { float: right; } /* ========================================================================= 2.SITE PRELOADER & TOOLS ============================================================================ */ .page-loader { position: fixed; z-index: 999999; width: 100%; height: 100%; background: #fff; } .loader-in { position: absolute; top: 50%; left: 40%; margin-top: -30px; margin-left: -30px; width: 250px; height: 13px; } /*.status { position: relative; z-index: 0; width: 60px; height: 60px; } .status span { width: 60px; height: 60px; position: absolute; top: 0; left: 0; z-index: 0; border: 6px solid #d9d9d9; border-radius: 50%; } .status .spin { z-index: 1; border-color: #262626; border-right-color: transparent; border-top-color: transparent; border-bottom-color: transparent; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; -o-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { from { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); opacity: 0.4; } 50% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); opacity: 1; } to { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); opacity: 0.4; } } @-moz-keyframes spin { from { -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-o-keyframes spin { from { -o-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -o-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -o-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { from { -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } 50% { -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } */ /* ========================================================================== 3. HEADER STYLE. ============================================================================= */ /* ---- 3.1 Top bar ------------------ */ .top-bar-mobile { display: none; border-bottom: 1px #eee solid; background: #f4f4f4; text-transform: uppercase; font-size: 11px; } .top-bar { /*border-bottom: 1px #eee solid;*/ background: white; /*text-transform: uppercase;*/ font-size: 11px; } .top-bar.main-bg { border-bottom: 0 } .top-bar span { display: block; padding: 0 10px 0 0; color: #A2A2A2; line-height: 39px; } .top-bar a { display: block; padding: 0 10px 0 0; color: black; line-height: 39px; } .top-bar.main-bg a, .top-bar.main-bg span { color: #fff } .top-bar.main-bg li { border-left-color: #A0A0A0 } .top-bar a:hover { text-decoration: underline; } .top-bar li { float: left; /*border-left: 1px #E9E9E9 solid;*/ } /*NEW DESIGN*/ .top-bar li:first-child { border-left: 0; } .top-bar li i { margin: 0 2px; font-size: 13px; border-left: 1px #eee solid; padding-left: 18px; padding-right: 2px; color: var(--color-bg); } .top-bar.main-bg li i { color: #fff } .top-bar li:first-child i { margin: 0 2px 0 0; } .top-bar ul.social-list li a:hover { background: #333; } /* ---- 3.2 Top logo --------------------- */ header.top-head { position: relative; z-index: 5555; /*NEW DESIGN*/ /*min-height: 92px;*/ /*border-bottom: 4px #f4f4f4 solid;*/ border-bottom: 4px #f9f9f9 solid; } .fixedHead { position: fixed !important; top: 0; left: 0; width: 100%; background: transparent !important; } header.top-head .logo { margin-top: 20px; } header.top-head .logo a { display: table; width: 295px; height: 72px; margin: auto; } header.top-head .logo.center a { margin: auto } /* ---- 3.3 Main menu ------------------ */ /*.top-menu { float: right !important; width: auto !important; }*/ .full-menu { } .top-nav { float: left; } .top-nav > ul > li { /*New*/ padding: 6px 0px; position: relative; float: left; margin: 0; border-left: 1px #eee solid; height: 83px; overflow: hidden\9 } .top-nav > ul > li:hover { overflow: visible; /*overflow: visible\9*/ } .top-nav > ul > li > a:hover i, .top-nav > ul > li.current > a i, .top-nav > ul > li.selected > a i { margin-top: 5px; } .top-nav > ul > li > a { display: block; padding: 0 11px; padding-top: 22px; height: 83px; text-transform: uppercase; overflow: hidden; text-align: center; } .top-nav > ul li a span { display: block; margin-top: 5px } .top-nav > ul li a i { color: #b8b8b8; font-size: 16px } .top-nav > ul li a:hover i, .top-nav > ul li.selected a i, .top-nav > ul li.current a i { color: #fff; } .top-nav > ul > li:after { position: absolute; bottom: -9px; left: -3px; display: inline-block; width: 100%; height: 9px; border-left: 1px #E4E4E4 solid; background: transparent; content: ""; -moz-transform: skew(-35deg, 0); -ms-transform: skew(-35deg, 0); -o-transform: skew(-35deg, 0); -webkit-transform: skew(-35deg, 0); transform: skew(-35deg, 0); } .top-nav > ul li ul { position: absolute; top: 36px; z-index: -1; min-width: 220px; height: 0; max-height: 0; /*NEW DESIGN*/ left: 12px; } .top-nav > ul > li > ul > li { position: relative; float: none; margin: 0; padding: 0; line-height: 35px; opacity: 0; transition: opacity .5s, transform .4s; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); -moz-transition: opacity .5s, -moz-transform .4s; -ms-transition: opacity .5s, -ms-transform .4s; -o-transition: opacity .5s, -o-transform .4s; -webkit-transition: opacity .5s, -webkit-transform .4s; transform: rotateY(90deg); } .top-nav > ul > li:hover > ul { z-index: 0; height: auto } .top-nav > ul > li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } .top-nav li li a { display: block; overflow: hidden; padding: 0 15px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 40px; } .top-nav li li.hasChildren:after { position: absolute; top: 2px; right: 10px; display: inline-block; color: black; content: "\f105"; font-family: FontAwesome; } /*NEW DESIGN*/ .top-nav.mega-menu.new-nav > ul li.current a span { color: black; } .top-nav li.current > a { background: none !important; } .top-nav li li a:hover, .top-nav li li.selected > a, .top-nav li li.current > a { text-decoration: none; } /*** sub menu level more than 2 ***/ .top-nav li li li { opacity: 0; transition: opacity .4s, transform .5s; -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); -moz-transition: opacity .4s, -moz-transform .5s; -ms-transition: opacity .4s, -ms-transform .5s; -o-transition: opacity .4s, -o-transform .5s; -webkit-transition: opacity .4s, -webkit-transform .5s; transform: rotateX(90deg); } .top-nav li li > ul { height: 0; left: 100%; top: 0; } .top-nav li li:hover > ul { height: auto; } .top-nav li li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } /************ navgation style 2 ************/ .nav-2, .nav-3 { border: 0px !important; } .nav-2 .top-nav > ul > li:after, .nav-3 .top-nav > ul > li:after, .head-style2 .top-nav > ul > li:after, .head-style3 .top-nav > ul > li:after { display: none } .head-style2 .top-nav > ul > li, .head-style3 .top-nav > ul > li { border: 0px !important } .nav-2 .top-nav > ul > li, .nav-3 .top-nav > ul > li { border-left: 0px; margin: 0 1px } .nav-2 .top-nav > ul > li { height: 92px } .nav-2 .top-nav > ul > li > a span { line-height: 94px; } .nav-2 .top-nav > ul > li > a, .nav-3 .top-nav > ul > li > a { height: 92px } .nav-2 .top-nav > ul > li > a i { position: absolute; left: 50%; margin-left: -16px; width: 31px; height: 31px; border-radius: 50%; background: #eee; color: #b8b8b8; text-align: center; font-size: 16px; line-height: 31px; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .nav-2 .top-nav > ul > li > a i:after { position: absolute; top: -25px; left: 47%; display: inline-block !important; width: 1px; height: 25px; background: #eee; content: ""; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .nav-2 .top-nav > ul > li > a:hover i:after, .nav-2 .top-nav > ul > li.current > a i:after, .nav-2 .top-nav > ul > li.selected > a i:after { top: -29px; height: 30px; } .nav-2 .top-nav > ul > li.selected > a i:after, .nav-2 .top-nav > ul > li.current > a i:after { display: none; } .nav-2 .top-nav > ul > li > ul, .nav-3 .top-nav > ul > li > ul { top: 92px; left: 0 !important; } header.top-head.nav-2 .logo, header.top-head.nav-3 .logo { margin-top: 25px } #headWrapper { position: sticky; top: 0; background: white; z-index: 9999; } /************ navgation style 2 ************/ .nav-3 .top-nav > ul > li { padding-top: 3px; } .nav-3 .top-nav > ul > li > a { border-top: 2px transparent solid; } .nav-3 .top-nav > ul > li > a i { background: transparent; } .nav-3 .top-nav > ul > li.current > a, .nav-3 .top-nav > ul > li > a:hover { border-top-width: 2px; border-top-style: solid; background: transparent; } .nav-3 .top-nav > ul > li > a:hover, .nav-3 .top-nav > ul > li.selected > a { background: transparent; } .nav-3 .top-nav > ul > li > a i:after { display: none; } .nav-3 .top-nav > ul > li > a:hover i, .nav-3 .top-nav > ul > li.current > a i, .nav-3 .top-nav > ul > li.selected > a i { margin-top: 0; } .nav-3 .top-nav > ul > li.hasChildren > a:after { position: absolute; bottom: -9px; left: 36%; z-index: 5; display: none; width: 0; height: 0; border-width: 0 10px 8px 10px; border-style: solid; content: ""; -moz-transition: all 0.6s ease 0s; -ms-transition: all 0.6s ease 0s; -o-transition: all 0.6s ease 0s; -webkit-transition: all 0.6s ease 0s; transition: all 0.6s ease 0s; } .nav-3 .top-nav > ul > li > a:hover:after, .nav-3 .top-nav > ul > li.selected:hover > a:after { display: block; } /************ navgation style 4 ************/ .nav-4 .top-nav > ul li a span { display: inline-block; margin: 0px 5px; } .nav-4 .top-nav > ul > li { border-left: 1px #eee solid; height: 50px; overflow: hidden\9; } .nav-4 .top-nav > ul > li > a { height: 50px; line-height: 50px; padding-top: 0; } .nav-4 .top-search a { margin-top: 0; height: 50px; border-radius: 0; line-height: 50px; } .nav-4 .top-nav > ul > li:after { display: none } .nav-4 .top-nav > ul > li > ul { top: 50px; left: 0 } .nav-4 .top-nav > ul li a i { padding: 5px 4px; vertical-align: baseline; border-radius: 50%; width: 25px; height: 24px; background: transparent !important; } .nav-4 .top-nav > ul li a:hover i, .nav-4 .top-nav > ul > li.selected > a i { background: #A62507; color: #fff; } header.top-head-4 { min-height: 70px; border-bottom: none; } header.top-head-4 .logo { text-align: center; padding-bottom: 20px; } .nav-4 .search-box { top: 49px; } .top-head-4 .gray-nav { background: #f7f7f7; padding: 0; margin-bottom: 20px; border: 1px #F0F0F0 solid; position: relative; height: 52px; } .top-head-4 .gray-nav:before, .top-head-4 .gray-nav:after { position: absolute; content: ""; bottom: 8px; left: 23px; width: 38%; top: 80%; -webkit-box-shadow: 0 6px 8px #000; -moz-box-shadow: 0 6px 8px #000; box-shadow: 0 6px 8px #000; -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -ms-transform: rotate(-2deg); transform: rotate(-2deg); z-index: -1; } .top-head-4 .gray-nav:after { -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); right: 23px; left: auto; } /****** Sticky Navigation Style *********/ .sticky { position: fixed !important; top: 0; left: 0; padding: 0 !important; width: 100%; background-color: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); z-index: 99999; min-height: inherit !important; border-bottom: 0 !important } .sticky .top-nav > ul > li { /*border:0 !important*/ } .sticky.top-head-4 .gray-nav:before, .sticky.top-head-4 .gray-nav:after { display: none } .sticky.top-head-4 .gray-nav { background: transparent; border: 0; margin-bottom: 0 } .sticky .top-nav > ul > li > a { color: #777 !important } .sticky .top-nav > ul > li > a:hover { background: transparent !important } .sticky .top-nav > ul > li > a i, .sticky .top-nav > ul > li:after, .sticky .bg-head2 { display: none; } /*.sticky .top-search a{ margin-top:5px; border-radius:0 !important; width:45px; height:45px; line-height:45px; text-align: center; padding: 0 !important; } .sticky .top-search a span{ font-size:14px } .sticky .search-box{ top:60px } .sticky .search-box:before{ width:45px } */ /*.sticky .top-nav > ul > li > a, .sticky .top-nav > ul > li { height: 60px !important; padding-top:0 } */ .top-nav > ul > li.topBarMenu { display: none !important; } .sticky .top-nav > ul > li.selected > a { background: transparent !important; color: #777 !important } /*.sticky .top-nav > ul > li > a { padding-top: 0 !important; border-top: 0 !important; background: transparent none; line-height:60px } .sticky .top-nav > ul > li > a span{ margin-top:0; line-height:60px } .sticky .top-nav > ul > li > ul { top: 60px !important; left: 0 !important; }*/ .sticky .top-nav > ul > li > ul:after { top: -8px; bottom: auto !important; border-width: 0 10px 8px 10px !important; } .sticky .top-nav > ul > li > ul ul { bottom: auto !important; top: 0 !important } .sticky .logo { margin-top: 5px !important } .sticky .top-nav > ul > li.hasChildren > a:after { display: none !important } .sticky .div-mega { top: 60px !important } /***** sticky header style 2 ******/ .head-style2 .sticky .logo { padding: 0 !important } .head-style2 .sticky .top-menu { margin-top: 0 !important } .head-style2 .sticky .top-nav > ul > li > a, .head-style2 .sticky .top-nav > ul > li > a span { line-height: 58px !important; height: 58px !important } .head-style2 .sticky .top-nav > ul > li > ul { top: 58px !important; } .head-style2 .sticky .mega-menu .mega-2 .div-mega { top: 57px } .head-style2 .sticky .head2-lft-links, .head-style2 .sticky .right-bar { display: none } .head-style2 .sticky .top-search a { margin-top: 8px; width: 40px; height: 40px; line-height: 40px; -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } .head-style2 .sticky .top-search a span { -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } /***** sticky header style 3 ******/ .head-style3 .sticky.top-head { margin-top: 0 } .head-style3 .sticky .logo, .sticky.top-head-4 .logo { display: none } .head-style3 .sticky .mega-menu .mega-2 .div-mega { top: 50px } .head-style3 .sticky .top-search { margin-left: 15px } /***** sticky header style 4 ******/ .top-head-4.sticky .nav-4 { background: transparent; border: 0; margin-bottom: 0 } .top-head-4.sticky .nav-4:before, .top-head-4.sticky .nav-4:after, .top-head-4.sticky .banner { display: none } /****** Mega menu Style *********/ .mega-menu { position: relative } .mega-menu .div-mega { position: absolute; top: 92px; left: 0; z-index: 99; display: none; padding-top: 2%; -webkit-box-shadow: inset 0px 10px 11px -5px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 10px 11px -5px rgba(0,0,0,0.3); box-shadow: inset 0px 10px 11px -5px rgba(0,0,0,0.3); } .mega-menu > li > a { display: block; position: relative; } .div-mega-section { float: left; margin: 0 2% 2%; } .mega-menu div.div-mega ul { visibility: visible; position: static; max-height: 100%; height: 100%; width: 100% } .mega-menu div.div-mega ul li { opacity: 1; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); transform: rotateY(0); } .mega-menu div.div-mega ul li a { padding: 8px 5px; line-height: normal; overflow: inherit; text-overflow: initial; white-space: normal; } .div-mega h4 { background: #fff; color: #777; padding: 8px 10px; font-weight: bold; } /* ---- 3.4 Search ---------------- */ .top-search { position: relative; float: right; margin-left: 20px; } .top-search a { position: relative; z-index: 5; display: block; overflow: hidden; margin-top: 20px; padding: 0; width: 30px; height: 30px; border-radius: 100%; /*background: #eee;*/ background: none; text-align: center; line-height: 30px; } .top-search a span { font-size: 14px; } .search-box { position: absolute; top: 50px; right: 0; z-index: 3; display: none; width: 402px; } /* .search-box:before { position: absolute; top: -46px; right: 0; z-index: 0; display: inline-block; width: 55px; height: 48px; content: ""; } */ .search-box input[type=text] { width: 320px !important; height: 50px; border-radius: 0px; } .search-box input[type=submit] { width: 80px !important; height: 50px; font-size: 12px; } /* ---- 3.5 Header style 2 ---------------- */ .top-head .container { position: relative; z-index: 9; } .head-style2 .logo { margin: 8px 0 0 0 !important; padding: 15px 0 14px; min-width: 230px; } .head-style2 .top-head, .head-style3 .top-head { padding: 0; min-height: inherit; border-bottom: 0px !important } .head2-lft-links { padding: 9px; direction: rtl; } .head2-lft-links li { float: none; padding: 2px 0; text-align: right; white-space: nowrap; } .head2-lft-links li i { margin-left: 10px; } .head-style2 .bg-head2 { position: absolute; bottom: 4px; left: 27%; width: 70%; height: 50px; background: #f6f6f6; } .head-style2 .top-nav { margin-right: 15px } .head-style2 .top-nav > ul > li { margin-right: 1px; } .head-style2 .top-nav > ul > li, .head-style2 .top-nav > ul > li > a { padding-top: 0; height: 50px; line-height: 50px; } .head-style2 .top-nav > ul > li > a span, .head-style3 .top-nav > ul > li > a span { line-height: 43px !important; } .head-style3 .sticky .top-nav > ul > li > a span { line-height: 50px !important } .head-style3 .sticky .top-nav > ul > li > a { height: 50px !important } .head-style2 .top-search { margin: 0 15px 0 0; } .head-style2 .top-search a { margin-top: 0; padding: 0 !important; width: 50px; height: 50px; border-radius: 0; line-height: 50px; } .head-style2 .top-search a span { color: #fff; } .head-style2 .top-nav > ul > li > ul { top: 50px; margin-left: -6px; } .head-style2 .login-btn .tri { top: -11px; } .head-style2 .right-bar { float: right; overflow: hidden; margin: 2px 5px 0 0; } .head-style2 .right-bar li { float: left; padding: 5px 0 5px 15px; } .head-style2 .right-bar li i { margin: 0 10px 0 0; } .head-style2 .top-menu { float: right !important; clear: none; } .head-style2 .search-box:before, .head-style3 .search-box:before { display: none; } .head-style2 .search-box { top: 50px; right: 12px; padding: 15px; background: #ECECEC; } .head-style2 .search-box input[type=text] { width: 310px; } .head-style2 .logo a, .head-style3 .logo a { margin: auto } /* ---- 3.6 Header style 3 ---------------- */ .head-style3 .top-bar { overflow: hidden; background-color: #f6f6f6; } .head-style3 .logo { display: table; float: none; margin: 0 auto !important; padding: 15px 15px 20px; text-align: center; } .top-nav-style3 { height: 50px; background: #f6f6f6; } .head-style3 .top-nav > ul > li > a, .head-style3 .top-search a { line-height: 50px; } .head-style3 .top-search { margin: 0; } .head-style3 .top-nav > ul > li, .head-style3 .top-nav > ul > li > a { height: 50px; } .head-style3 .top-nav > ul > li > a { margin-left: 1px; padding-top: 0; color: #fff !important; } .head-style3 .top-nav > ul > li > ul { top: 50px !important; left: 0px } .head-style3 .top-nav > ul li ul li a { background: #eee !important; color: #777; } .head-style3 .top-nav > ul li ul li a:hover { background: #ddd !important; color: #333; } .head-style3 .top-nav li li.hasChildren:after { color: #b1b1b1; } .head-style3 .top-nav > ul li ul li { border-bottom: 1px #ddd solid; } .head-style3 .top-bar li, .head-style3 .top-bar li span { color: #b3b3b3; } .head-style3 .top-bar li { border-left: 1px #e4e4e4 solid; } .head-style3 .top-bar li:first-child { border-left: 0; } .head-style3 .top-bar li:first-child i { margin-left: 8px; } .head-style3 header.top-head { position: static; margin-top: -40px; padding: 0; background: transparent; } .head-style3 .top-nav ul ul li { box-shadow: 0 0 5px 0 rgba(0,0,0,.1); } .head-style3 .search-box { top: 50px; right: 0; } .head-style3 .top-search a { margin: 0; width: auto; height: auto; } .head-style3 .top-menu { display: table; float: none !important; margin: auto; } .head-style3 .top-nav > ul > li.current > a, .head-style3 .top-nav > ul > li.selected > a, .head-style3 .top-nav > ul > li > a:hover { background: #eee !important; color: #777 !important; } .head-style3 .top-nav ul li ul li.selected > a, .head-style3 .top-nav ul li ul li.current > a { background: #ddd !important; } /* ---- 3.7 Login Box ---------------- */ .login-btn { position: relative; } .login-btn .tri { position: absolute; top: -1px; left: 30%; z-index: 5; width: 0; height: 0; border-width: 8px 10px 0 10px; border-style: solid; border-color: #333 transparent transparent transparent; } .login-controls { display: table; margin: auto; } .login-box { position: relative; display: none; padding: 15px 20px; background: #333; color: #C3C3C3; text-align: center; } .login-box input { font-size: 11px; } .close-login { position: absolute; top: 5px; right: 25px; color: #fff; font-size: 22px; } .login-box .left { float: left; margin: 0 5px; } /* ========================================================================== 4. BLOCKS BACKGROUNDS. ============================================================================= */ .block-bg-1 { background: url('../images/bgs/block-bg-1.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: relative } .block-bg-2 { background: url('../images/bgs/block-bg-2.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: relative; overflow: hidden; } .block-bg-3 { background: #fff url('../images/bgs/block-bg-3.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: relative } .block-bg-4 { background: #fff url('../images/bgs/block-bg-4.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: relative } .block-bg-5 { background: url('../images/bgs/block-bg-5.jpg') no-repeat fixed 0 0; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: relative } .block-bg-1:before, .block-bg-2:before, .block-bg-3:before, .block-bg-4:before, .block-bg-5:before { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: inline-block; content: "" } .black-overlay:before { background: rgba(0,0,0,.8) !important; } .parallax p, [class*="block-bg-"] p { position: relative; z-index: 2 } .video-bg { position: relative; z-index: -99; height: 100%; overflow: hidden } .video-bg video { position: absolute; width: 100%; height: 100%; left: 0; top: 0 } .video-overlay { position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,.7); top: 0; left: 0; z-index: 9999 } /* patterns backgrounds */ .dots-pattern { border-top: 1px #E4E4E4 solid; background: transparent url('../images/patterns/dots.png'); } .gry-pattern { background: #eee url('../images/patterns/gry-patt.png'); border-top: 1px #E6E6E6 solid; border-bottom: 1px #E6E6E6 solid; } .img-pattern { border-top: 1px #E4E4E4 solid; border-bottom: 1px #E4E4E4 solid; background: #fff url('../images/patterns/1.png'); } /* ========================================================================== 5. COMMON STYLES. ============================================================================= */ .fx { opacity: 0; } .animated { opacity: 1; } .marginRight { margin-right: 10px; } .marginLeft { margin-left: 10px; } .marginBottom { margin-bottom: 20px; } .autoMargin { float: none !important; margin: auto; } button, .btn, .fun-title, .r-more { text-transform: uppercase; } .right { float: right !important; } .left { float: left; } .hidden { display: none; } .visible { display: block; } .sectionWrapper { padding: 22px 0; } .page-section, .scroll-section { padding: 140px 0 } .icon-middle { display: table; margin: auto; margin-bottom: 20px; padding: 1px 15px; font-size: 35px; } .skew-5 { -moz-transform: skew(-5deg, 0); -ms-transform: skew(-5deg, 0); -o-transform: skew(-5deg, 0); -webkit-transform: skew(-5deg, 0); transform: skew(-5deg, 0); } .skew5 { -moz-transform: skew(5deg, 0); -ms-transform: skew(5deg, 0); -o-transform: skew(5deg, 0); -webkit-transform: skew(5deg, 0); transform: skew(5deg, 0); } .skew-10 { -moz-transform: skew(-10deg, 0); -ms-transform: skew(-10deg, 0); -o-transform: skew(-10deg, 0); -webkit-transform: skew(-10deg, 0); transform: skew(-10deg, 0); } .skew10 { -moz-transform: skew(10deg, 0); -ms-transform: skew(10deg, 0); -o-transform: skew(10deg, 0); -webkit-transform: skew(10deg, 0); transform: skew(10deg, 0); } .skew-15 { -moz-transform: skew(-15deg, 0); -ms-transform: skew(-15deg, 0); -o-transform: skew(-15deg, 0); -webkit-transform: skew(-15deg, 0); transform: skew(-15deg, 0); } .skew15 { -moz-transform: skew(15deg, 0); -ms-transform: skew(15deg, 0); -o-transform: skew(15deg, 0); -webkit-transform: skew(15deg, 0); transform: skew(15deg, 0); } .skew-20 { -moz-transform: skew(-20deg, 0); -ms-transform: skew(-20deg, 0); -o-transform: skew(-20deg, 0); -webkit-transform: skew(-20deg, 0); transform: skew(-20deg, 0); } .skew20 { -moz-transform: skew(20deg, 0); -ms-transform: skew(20deg, 0); -o-transform: skew(20deg, 0); -webkit-transform: skew(20deg, 0); transform: skew(20deg, 0); } .skew-25 { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); } .skew25 { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .skew-0 { -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } /************ Useful classes ***********/ .width-10 { width: 10px; } .width-20 { width: 20px; } .width-30 { width: 30px; } .width-40 { width: 40px; } .width-50 { width: 50px; } .width-60 { width: 60px; } .width-70 { width: 70px; } .width-80 { width: 80px; } .width-90 { width: 90px; } .width-100 { width: 100px; } .width-110 { width: 110px; } .width-120 { width: 120px; } .width-130 { width: 130px; } .width-140 { width: 140px; } .width-150 { width: 150px; } .padd-top-0 { padding-top: 0; } .padd-top-5 { padding-top: 5px; } .padd-top-10 { padding-top: 10px; } .padd-top-15 { padding-top: 15px; } .padd-top-20 { padding-top: 2px; } .padd-top-25 { padding-top: 25px; } .padd-top-30 { padding-top: 30px; } .padd-top-35 { padding-top: 35px; } .padd-top-40 { padding-top: 40px; } .padd-top-45 { padding-top: 45px; } .padd-top-50 { padding-top: 50px; } .padd-bottom-0 { padding-bottom: 0; } .padd-bottom-5 { padding-bottom: 5px; } .padd-bottom-10 { padding-bottom: 10px; } .padd-bottom-15 { padding-bottom: 15px; } .padd-bottom-20 { padding-bottom: 20px; } .padd-bottom-25 { padding-bottom: 25px; } .padd-bottom-30 { padding-bottom: 30px; } .padd-bottom-35 { padding-bottom: 35px; } .padd-bottom-40 { padding-bottom: 40px; } .padd-bottom-45 { padding-bottom: 45px; } .padd-bottom-50 { padding-bottom: 50px; } .padd-vertical-0 { padding: 0; } .padd-vertical-5 { padding: 5px 0; } .padd-vertical-10 { padding: 10px 0; } .padd-vertical-15 { padding: 15px 0; } .padd-vertical-20 { padding: 20px 0; } .padd-vertical-25 { padding: 25px 0; } .padd-vertical-30 { padding: 30px 0; } .padd-vertical-35 { padding: 35px 0; } .padd-vertical-40 { padding: 40px 0; } .padd-vertical-45 { padding: 45px 0; } .padd-vertical-50 { padding: 50px 0; } .padd-horizontal-0 { padding: 0 0; } .padd-horizontal-5 { padding: 0 5px; } .padd-horizontal-10 { padding: 0 10px; } .padd-horizontal-15 { padding: 0 15px; } .padd-horizontal-20 { padding: 0 20px; } .padd-horizontal-25 { padding: 0 25px; } .padd-horizontal-30 { padding: 0 30px; } .padd-horizontal-35 { padding: 0 35px; } .padd-horizontal-40 { padding: 0 40px; } .padd-horizontal-45 { padding: 0 45px; } .padd-horizontal-50 { padding: 0 50px; } .margin-top-0 { margin-top: 0; } .margin-top-5 { margin-top: 5px; } .margin-top-10 { margin-top: 10px; } .margin-top-15 { margin-top: 15px; } .margin-top-20 { margin-top: 20px; } .margin-top-25 { margin-top: 25px; } .margin-top-30 { margin-top: 30px; } .margin-top-35 { margin-top: 35px; } .margin-top-40 { margin-top: 40px; } .margin-top-45 { margin-top: 45px; } .margin-top-50 { margin-top: 50px; } .margin-bottom-0 { margin-bottom: 0; } .margin-bottom-5 { margin-bottom: 5px; } .margin-bottom-10 { margin-bottom: 10px; } .margin-bottom-15 { margin-bottom: 15px; } .margin-bottom-20 { margin-bottom: 20px; } .margin-bottom-25 { margin-bottom: 25px; } .margin-bottom-30 { margin-bottom: 30px; } .margin-bottom-35 { margin-bottom: 35px; } .margin-bottom-40 { margin-bottom: 40px; } .margin-bottom-45 { margin-bottom: 45px; } .margin-bottom-50 { margin-bottom: 50px; } [class*="padd-"]:after, [class*="margin-"]:after { display: block; clear: both; content: ""; } /***** pager style *******/ .pager { margin: 0 15px; /*NEW DESiGN*/ padding-left: 0px !important; padding-right: 0px !important; /*background: #eee;*/ } .pager ul { display: table; margin: auto; } .pager ul li { float: left; margin: 0 1px 0 0; /*NEW DESiGN*/ border-top: 2px solid white; /*background: #777;*/ } .pager ul li a, .pager ul li span { display: block; padding: 0 20px; /*color: #fff;*/ /*NEW DESiGN*/ color: #6B7280; font-size: 14px; line-height: 38px; } .pager ul li i { font-weight: bold; font-size: 140%; } .pager ul li.selected span { color: #fff; } .pager ul li:hover a, .pager ul li.selected a { color: var(--color-bg); font-weight: 600; } .pager ul li.selected { background: none !important; border-top: 2px solid var(--color-bg); } .pager ul li:hover { background: none !important; border-top: 2px solid var(--color-bg); } #map_canvas { height: 450px; } .noScroll { line-height: 1.35; overflow: hidden; white-space: nowrap; } #map_canvas img { max-width: none } /* ========================================================================== 6. TYPOGRAPHY. ============================================================================= */ a { text-decoration: none; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } a:active, a:hover { outline: 0; } b, strong, .bold { font-weight: bold; } .bolder { font-weight: 800; } .italic { font-style: italic; } small { font-size: 80%; } h1, h2, h3, h4, h5, h6 { margin: 0 0 10px; padding: 0; font-weight: normal; line-height: 1.5; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 14px; } h6 { font-size: 12px; } p { margin: 0 0 20px 0; line-height: 22px; font-size: 13px } .white-bg { background: #fff; } .dark-bg { padding: 80px 0; background-color: #222; } .dark-bg p { color: #A3A3A3; margin: 0; } .gry-bg { background: #eee; } .staff-3 .gry-bg .fun-text { color: #333 !important; } .dark-bg h2 { color: #bdbdbd; font-size: 24px } .alter-bg { background: #777; color: #fff } .alter-bg a { color: #fff } .welcome { padding: 39px 0; text-align: center; } .btn.ExtraLargeBtn { display: block; height: 78px; font-weight: bold; font-size: 22px; line-height: 78px; } .extraBold { font-weight: 800; } .extraLarge { font-size: 20px; } .center { text-align: center; } .left-text { text-align: left; } .right-text { text-align: right; } .red { color: #f00; } .congrats { color: #4FB830; text-transform: uppercase; font-weight: bold; font-size: 30px; } .success-icon { margin-bottom: 15px; color: #ecc686; font-size: 90px; } span.block { display: block; clear: both; padding-left: 20px; } .list-item { margin: 0; padding: 5px 0; } .list-item i.fa { margin-right: 7px; color: #CFCFCF; } /*********** HR style 1 *********/ hr { position: relative; display: block; overflow: visible; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px #eeeded solid; } hr:before { position: absolute; top: -1px; left: 0; display: inline-block; width: 20%; height: 1px; content: ""; } hr:after { position: absolute; top: -1px; right: 0; display: inline-block; width: 20%; height: 1px; content: ""; } /*********** HR style 2 *********/ .hr-style2:before { left: 30%; width: 40%; } .hr-style2:after { display: none; } /*********** HR style 3 *********/ .hr-style3:before { left: 20%; width: 20%; } .hr-style3:after { right: 20%; width: 20%; } /*********** HR style 4 *********/ .hr-style4:before { left: 44%; margin-top: 0; width: 5%; content: "\f105"; text-align: right; font-size: 20px; font-family: FontAwesome; line-height: 1px; } .hr-style4:after { right: 44%; margin-top: 0px; width: 5%; content: "\f104"; text-align: left; font-size: 20px; font-family: FontAwesome; line-height: 1px; } /*********** HR style 5 *********/ .hr-style5:before { left: 44%; margin-top: 0px; width: 5%; content: "\f1d8"; text-align: center; font-size: 20px; font-family: FontAwesome; line-height: 1px; } .hr-style5:after { right: 44%; margin-top: 0px; width: 5%; content: "\f1d8"; text-align: center; font-size: 20px; font-family: FontAwesome; line-height: 1px; -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .hr-style5:before, .hr-style5:after { background: #fff; color: #d4d4d4; } .follow-block p { margin: 0; padding: 0 0 10px; text-align: center; font-size: 16px; } .follow-block .follow-link { font-weight: bold; font-style: italic; font-size: 23px; } .slick-prev, .slick-next { background: #777; color: #eee; } /********** highlight *************/ .highlight-1 { background: #fcff00; } /********** Dropcaps ************/ .dropcap { display: block; float: left; margin: 2px 8px 0 0; font-weight: bold; font-size: 36px; line-height: 36px; } /********** Blockquote ************/ blockquote { margin: 0; padding: 15px; } blockquote p { margin: 0; padding-bottom: 15px; width: 80%; color: #afafaf; font-size: 16px; line-height: 140%; } blockquote span { color: #a3a3a3; font-weight: bold; font-size: 14px; } /********** Tooltips ************/ .tooltip { position: fixed; z-index: 999999; padding: 7px; background: #000; color: #fff; text-align: center; font-size: 11px; -moz-transition: all 0.1s ease !important; -ms-transition: all 0.1s ease !important; -o-transition: all 0.1s ease !important; -webkit-transition: all 0.1s ease !important; transition: all 0.1s ease !important; } .tooltip:after { position: absolute; bottom: -4px; left: 40%; display: inline-block; width: 0; height: 0; border-width: 4px 5px 0 5px; border-style: solid; border-color: #000 transparent transparent transparent; content: ""; } .lft-tip:after { right: -5px; bottom: 25%; left: auto; border-width: 5px 0 8px 8px; border-color: transparent transparent transparent #000; } .rit-tip:after { bottom: 25%; left: -5px; border-width: 5px 8px 8px 0; border-color: transparent #000 transparent transparent; } .bot-tip:after { top: -5px; bottom: auto; border-width: 0 4px 5px 5px; border-color: transparent transparent #000 transparent; } /* ========================================================================== 7. PAGES ELEMENTS. ============================================================================= */ /* -------- 7.1. Heading styles ------------------ */ /* ---- 7.1.1. Heading style 1 ------------- */ .block-head { position: relative; margin-bottom: 20px; padding: 0 0 20px; border-bottom: 1px #e2e2e2 solid; font-weight: normal; } .footer-top .block-head { border-bottom-color: #fff; /*color:#c5c5c5;*/ color: #fff; text-transform: uppercase } .footer-top .block-head:after, .footer-top .block-head:before { background: #fff; } .block-head:before { position: absolute; bottom: -3px; left: 20px; width: 35px; height: 5px; content: ""; display: inline-block; } .block-head:after { position: absolute; bottom: -1px; left: 0; width: 80px; height: 1px; content: ""; display: inline-block; } .block-head.center { margin-left: auto; margin-right: auto; display: table; padding-right: 30px; padding-left: 30px } .block-head.center:before { left: 50%; margin-left: -17.5px } .block-head.center:after { left: 50%; margin-left: -40px; } .side-heading { font-weight: 800; border: 0px; padding: 0; font-size: 28px; text-transform: uppercase; letter-spacing: -1px; margin-bottom: 15px } .side-heading span { color: #777; font-weight: 100; } .side-heading:after, .side-heading:before { display: none; } .large-heading { position: relative; margin-bottom: 40px; padding: 0 0 20px; border-bottom: 1px #e2e2e2 solid; font-weight: bold; text-transform: capitalize; font-size: 26px; line-height: 20px; text-align: center } .large-heading:before { position: absolute; bottom: -3px; left: 50%; width: 100px; height: 5px; content: ""; display: inline-block; margin-left: -57px; border-left: 15px #fff solid; border-right: 15px #fff solid; } .gry-bg .large-heading:before { border-left: 15px #eee solid; border-right: 15px #eee solid; } /* ---- 7.2. Services boxes ---------------- */ /* ---- 7.2.1. Services boxes style 1 ---------------- */ .service-box-1 { position: relative; } .box-top { z-index: 2; overflow: hidden; padding: 50px 0; text-align: center } .box-top i.fa { display: table; margin: 0 auto 30px; font-size: 38px; width: 103px; height: 103px; line-height: 95px; text-align: center; border-radius: 50%; border: 3px #fff solid; -moz-box-shadow: inset 0 0 13px rgba(0,0,0,.4); -webkit-box-shadow: inset 0 0 13px rgba(0,0,0,.4); box-shadow: inset 0 0 13px rgba(0,0,0,.4); } .box-top h3 { margin: 0 0 10px; padding: 0 15px 10px; text-align: center; font-size: 23px; color: #777; font-weight: 800; text-transform: uppercase } .box-top h3 span { text-transform: none; font-size: 19px; font-weight: 100; display: block; margin-bottom: -32px } .box-top .more-btn { display: table; margin: 30px auto 0; background: #fff; padding: 10px 15px; text-transform: uppercase; font-size: 11px } .box-top p { padding: 0 15px; } .box-top p a { display: inline-block; margin-left: 5px; font-size: 11px; } .service-box-1:hover i.fa { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); -moz-transition: -moz-transform 0.3s; -o-transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .service-box-1:hover h3 { color: #fff } .portfolio-item:hover:after { height: 3px; border-top: 0px } /* ---- 7.2.2. Services boxes style 2 ---------------- */ .service-box-2 { padding-top: 30px; } .box-2-cont { position: relative; border-top: 1px #ECECEC solid; text-align: center; padding: 0 15px 15px; border: 1px #E6E6E6 solid } .service-box-2 h4 { text-align: center; font-weight: bold; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .sub-title { margin: -10px 0 15px; font-size: small; } .service-box-2 .fa { display: table; margin: 0 auto 25px; margin-top: -45px; width: 90px; height: 90px; border: 1px #E6E6E6 solid; border-radius: 50%; background-color: #F0F0F0; box-shadow: inset 0 0 0 3px #fff; color: #B3B3B3; text-align: center; font-size: 38px; line-height: 90px; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-2 .r-more { position: relative; z-index: 1; display: table; margin: 15px auto 0; padding: 8px 15px; background: #ECECEC; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-2 .r-more:after { display: inline-block; margin-left: 8px; content: "+"; font-size: 14px; } .service-box-2:hover h4 { color: #4e4e4e; } .service-box-2 p.mediumFont { overflow: hidden; max-height: 180px; border-bottom: 1px #eee solid; padding-bottom: 25px !important } /* ---- 7.2.3. Services boxes style 3 ---------------- */ .service-box-3 { margin-bottom: 30px; text-align: center; } .service-box-3 .box-head { clear: both; margin-bottom: 15px; } .service-box-3 h4 { position: relative; overflow: hidden; height: 1.4em; font-weight: bold; } .service-box-3:hover h4 { color: #4e4e4e; } .service-box-3 h4 span { position: relative; display: inline-block; -moz-transition: -moz-transform 0.3s; -o-transition: transform 0.3s; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .service-box-3 h4 span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 700; -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .service-box-3 p.mediumFont { overflow: hidden; max-height: 110px; } .service-box-3 .icon { display: table; margin: 0 auto 25px; width: 150px; height: 150px; border: 1px #00A4A3 solid; border-radius: 50%; /*background-color: #DADADA;*/ background-color: white; box-shadow: inset 0 0 0 3px #fff; color: #777; text-align: center; font-size: 50px; line-height: 150px; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-3:hover span, .service-box-3:focus span { -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); -webkit-transform: translateY(-100%); transform: translateY(-100%); } .service-box-3 .r-more { position: relative; display: table; margin: 15px auto 0; padding: 8px 15px; background: #eee; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-3 .r-more:after { display: inline-block; margin-left: 8px; content: "+"; font-size: 14px; } /* ---- 7.2.4. Services boxes style 4 ---------------- */ .service-box-4 { margin: 30px 0; } .service-box-4 a { display: table; text-align: center; font-size: 30px; border-radius: 50%; width: 70px; height: 70px; line-height: 70px; text-align: center; overflow: hidden; } .service-box-4 .fa { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .service-box-4 h3 { text-align: left; margin-bottom: 5px; } .service-box-4 h3 span, .service-box-5 h3 span { font-weight: bold; margin-right: 2px; } .service-box-4 p { max-height: 50px; overflow: hidden; text-align: left; margin: 0; line-height: 16px; } .service-box-4:hover .fa { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } /* ---- 7.2.5. Services boxes style 5 ---------------- */ .service-box-5 { margin: 30px 0; } .service-box-5 a { text-align: center; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; height: 100px; display: block; margin-bottom: 0; overflow: hidden; } .service-box-5 a .fa { font-size: 70px; margin-top: 18px; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .service-box-5 h3 { text-align: center; margin: 0 0 10px; background: #fff; padding: 9px 0; font-weight: bold; text-transform: uppercase; } .service-box-5 p { max-height: 94px; overflow: hidden; text-align: center; margin: 0; } .service-box-5:hover a { color: #fff; } .service-box-5:hover a .fa { font-size: 116px; opacity: 1; margin-top: 0; -webkit-transform: rotate(-16deg); opacity: 0.8 } /* ---- 7.3. Skill levels --------- */ /* ---- 7.3.1. Skill levels style 1 --------- */ .levels { overflow: hidden } .level-out { position: relative; margin: 0 10px 25px 0; padding: 0; background: #E7E7E7; } .level-in { position: relative; float: left; height: 21px; } .level-out:after { width: 0; height: 0; border-style: solid; border-width: 10.5px 0 10.5px 10px; border-color: transparent transparent transparent #E7E7E7; content: ""; display: inline-block; position: absolute; right: -10px; top: 0; z-index: 0; } .level-in:before { width: 0; height: 0; border-style: solid; border-width: 10.5px 0 10.5px 10px; content: ""; display: block; position: absolute; right: -10px; top: 0; z-index: 5; } .level-name { font-size: 15px; font-style: normal; margin-bottom: 4px; font-weight: bold; color: #777; } .level-out span { background: #E7E7E7; display: block; padding: 0 10px; height: 21px; width: 54px; white-space: nowrap; font-size: 12px; color: #333; line-height: 21px; position: absolute; z-index: 5 } .level-out span:before { width: 0; height: 0; border-style: solid; border-width: 10.5px 0 10.5px 10px; border-color: transparent transparent transparent #E7E7E7; content: ""; display: inline-block; position: absolute; right: -10px; top: 0; z-index: 5; } .levels li:last-child .level-out { margin-bottom: 0 } /* ---- 7.3.2. Skill levels style 2 --------- */ .levels-2 li { float: left; margin: 0 1.5%; width: 22%; } .level-in-2 { text-align: center; } .level-name-2 { display: block; margin-top: 10px; text-align: center; font-size: 13px; } /* ---- 7.4. Fun Staff -------------- */ .fun-staff .fun-text { z-index: 1; text-align: center; font-size: 18px; } .fun-staff .fun-number { padding: 0; text-align: center; font-size: 35px; } .fun-title { margin: auto; /* height: 100%; */ background-color: #fff; font-size: 40px; } .figures-box .fun-number { font-size: 55px; /*background-color: #0077AC !important;*/ background-color: var(--color-bg) !important; color: #fff !important; } /* ---- 7.4.1 Fun Staff Style 1 -------------- */ .staff-1 .fun-text { padding: 23px 0; } .staff-1 .fun-number { background-color: #fff; color: #444; /* margin-top: 60px; */ } .staff-1 .fun-number.skew-15, .staff-1 .fun-icon.skew-15 { right: 7px; } .staff-1 .fun-icon { padding: 5px 0; background-color: #fff; text-align: center; font-size: 30px; } .staff-1 .fun-number.skew15, .fun-icon.skew15 { left: 7px; } .staff-1 .fun-title { padding: 29px; text-align: center; } .staff-1 .fun-title span { color: #333; } /* ---- 7.4.2. Fun Staff Style 2 -------------- */ .staff-2 { min-height: 288px; } .staff-2 .fun-text { padding: 25px 0 10px; } .staff-2 .fun-number { font-weight: 700; } .staff-2 .fun-icon { display: table; margin: auto; text-align: center; font-size: 35px; border: 2px #fff solid; border-radius: 50%; width: 90px; height: 86px; line-height: 86px; } .staff-2 .fun-title { padding: 21px; text-align: center; line-height: 45px } .staff-2 .fun-title span { color: #333; } .staff-2 .fun-title p { color: #777; text-transform: none; font-weight: normal; font-size: 13px; line-height: normal; margin-top: 6px; } /* ---- 7.4.3. Fun Staff Style 3 -------------- */ .staff-3 .main-bg { margin: 0 -10px; padding: 15px; } .staff-3 .fun-text { top: 0; padding: 0 0 15px; min-height: inherit; color: #fff; text-align: center; font-size: 15px; } .staff-3 .fun-number { padding: 0; background-color: transparent; text-align: center; font-weight: 400; font-size: 38px; } /* ---- 7.5. Testimonials -------------- */ /* ---- 7.5.1. Testimonials Style 1 -------------- */ .testimonials-1 { padding-top: 5px } .testimonials-bg { position: relative; z-index: 4; overflow: hidden; margin: 0 15px; padding: 8px; background: #E9E9E9; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-bg .rating { position: relative; z-index: 1; clear: both; overflow: hidden; padding: 10px 0 0 0; } .testimonials-bg:hover { background: #e6e6e6; } .testimonials-img { position: relative; z-index: 2; float: left; margin: 0 10px 5px 0; max-width: 70px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-bg .rating .fa { margin-right: 4px; color: #ffc000; font-size: 15px; } .testimonials-bg:after { position: absolute; right: 8px; bottom: 8px; display: inline-block; margin-right: 7px; color: #CFCFCF; content: "\f10e"; font-weight: normal; font-style: normal; font-size: 25px; font-family: FontAwesome; line-height: 1; } .testimonials-name { position: relative; margin: 0 5px; padding: 6px 0 8px 0; text-align: center; text-transform: uppercase; font-size: 11px; } .testimonials-name:after { position: absolute; right: 9px; bottom: 9px; z-index: 0; width: 0; height: 0; border-width: 20px 23px 0 0; border-style: solid; border-color: #DADADA transparent transparent transparent; content: ""; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-name:before { position: absolute; bottom: 9px; left: 11px; z-index: 0; width: 0; height: 0; border-width: 20px 0 0 23px; border-style: solid; border-color: #DADADA transparent transparent transparent; content: ""; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .testimonials-bg:hover + .testimonials-name:after, .testimonials-bg:hover + .testimonials-name:before { border-color: #ccc transparent transparent transparent; } .testimonials-bg .rating .fa-star-o { color: #c0c0c0; } /* ---- 7.5.2. Testimonials Style 2 -------------- */ .testimonials-2 .testimonials-name { display: table; margin: auto; padding: 10px 20px; font-size: 130%; } .testimonials-2 p { font-size: 16px; line-height: 29px; } .testimonials-2 .testimonials-name:before, .testimonials-2 .testimonials-name:after { display: none; } .testimonials-2 .slick-list { margin: 0; text-align: center } /* ---- 7.6. Portfolio -------------- */ /* ---- 7.6.1. Portfolio Carousel -------------- */ .portfolio .portfolio-item { margin: 0 15px; background-color: #eee; } .portfolio-item:after { display: block; clear: both; border-top: 2px #fff solid; height: 3px; content: ""; } .img-holder { position: relative; overflow: hidden; /*NEW DESIGN*/ /*margin: 0 0 15px;*/ cursor: pointer; } .img-holder img { width: 100%; height: auto; -moz-transition: all 1s ease-out; -o-transition: all 1s ease-out; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; } .img-holder:hover img { -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } .img-over { position: absolute; top: -46%; left: -20%; z-index: 9; display: none; overflow: hidden; width: 100%; width: 170%; height: 100%; height: 170%; -moz-transform: rotate(-37deg); -ms-transform: rotate(-37deg); -o-transform: rotate(-34deg); -webkit-transform: rotate(-37deg); transform: rotate(-34deg); } .img-over a { position: absolute; display: block; width: 100%; height: 100%; } .img-over b { position: absolute; z-index: 8; color: #fff; font-weight: normal; font-size: 40px; -moz-transform: rotate(34deg); -ms-transform: rotate(34deg); -o-transform: rotate(34deg); -webkit-transform: rotate(34deg); transform: rotate(34deg); } .img-over a.link { top: -52%; left: -8%; } .img-over a.zoom { top: 48%; left: -10%; } .img-over a b { top: 13%; left: 51%; } .img-over a.link b { top: 75%; left: 40%; } .name-holder { overflow: hidden; padding: 0 15px 10px; } .project-name { display: table; /*NEW DESIGN*/ text-align: center; margin: auto; font-weight: bold; font-size: 12px; } .project-options { margin-top: 4px; display: block; text-align: center; font-size: 12px; } .project-options a { display: block; float: left; margin: 0 0 0 5px; color: #444; font-size: 14px; } .project-brief { display: none; } .portfolio { position: relative; } .viewAll { padding-top: 10px; } .viewAll .btn { background: #eee; font-weight: bold; font-size: 12px; float: left; padding: 0 10px; line-height: 27px; border-radius: 3px; color: #777; } .homeGallery .slick-prev, .homeGallery .slick-next { right: auto; left: -70px; bottom: 0; top: auto } .homeGallery .slick-prev { left: -100px; } .portfolio-lft-txt { max-height: 154px; overflow: hidden } .lft-minus-margin { margin-right: -15px } .view-all-projects { padding-top: 30px; text-align: center; } .view-all-projects a { display: table; margin: auto; } /* ---- 7.6.2. Portfolio Filterable -------------- */ .portfolio-filterable .portfolio-item { margin-top: 20px; /*NEW DESIGN*/ /*background-color: #f4f4f4;*/ } .portfolio-filterable .white-bg, .portfolio-filterable .gry-bg { margin: 0 15px 10px; line-height: 35px; } .portfolio-filterable .white-bg { background-color: #fff; } .portfolio-filterable.full [class*="cell-"] { margin: 0; padding: 0; border-right: 1px #fff solid; } .full-portfolio { margin-right: 10px !important; margin-left: 10px !important; } .filter-by { display: inline-block; margin-left: 20px; } #filters { display: table; margin: auto; } #filters li { float: left; margin: 0 1px 0 0; background: #777; } #filters li a { display: block; padding: 0 20px; text-transform: uppercase; font-size: 11px; line-height: 35px; color: #fff !important; } #filters li:hover a, #filters li.active a { color: #fff; } /* ---- 7.7. Form controls -------------- */ /* ---- 7.7.1. Buttons -------------- */ .control-label { display: block; padding-bottom: 4px; color: #777; text-transform: uppercase; font-weight: bold; } .control-group { display: table; clear: both; margin: 5px 0; padding: 10px 0 20px; width: 100%; border-bottom: 1px #E9E9E9 solid; } .btn-group { clear: both; padding: 20px 0; text-align: center; } .btn { display: inline-block; margin-bottom: 0; padding: 0 11px; border: 1px solid transparent; background: #777 none; vertical-align: middle; text-align: center; white-space: nowrap; font-weight: normal; font-size: 12px; line-height: 30px; cursor: pointer; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,.5); text-transform: uppercase; letter-spacing: 0.8px; } [class*="skew-"] .btn { background: transparent none; color: inherit; } [class*="skew-"] .btn:hover { background: transparent none; color: inherit; } .btn span { display: block; } .btn i { margin-right: 5px; } button.skew-25 i { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .btn-tiny { padding: 0 4px; font-size: 9px; line-height: 27px; } .btn-small { padding: 0 10px; font-size: 11px; line-height: 33px; } .btn-medium { padding: 0 12px; font-size: 13px; line-height: 41px; } .btn-large { padding: 0 22px; font-size: 15px; line-height: 49px; } .btn.empty { background: transparent none; } /* ---- 7.7.2. Inputs -------------- */ .input-box { border: 1px #eee solid; background: #fff; } .txt-box { padding: 0 12px; height: 35px; border: 0; background-color: transparent; background-image: none; color: #555; font-size: 12px; line-height: 30px; -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .txt-box:focus { outline: transparent none 0; border: 0; } .check-box-box { float: none !important; line-height: 34px; clear: both; } .check-box-box * { float: left; } .check-box-box a { margin-left: 10px; } .check-box { margin: 11px 8px 0 0; } /* ---- 7.8. Information boxes -------------- */ .box { position: relative; margin: 0 auto 15px; padding: 15px; border-width: 1px; border-style: solid; } .box i.fa { color: #333; } .close-box { position: absolute; top: 0px; right: -25px; padding: 2px 8px 4px; background: rgba(0,0,0,.1); color: #fff; font-size: 17px; } .box h3 { margin-bottom: 0px; font-weight: bold; } .box p { margin: 5px 0 0; padding-bottom: 0; } .warning-box { border-color: #e0d594; background: #fff6bf; } .info-box { border-color: #9fc6d7; background: #c2e1ee; } .success-box { border-color: #a0c272; background: #bbdd8c; } .error-box { border-color: #f2b1b4; background: #f1d5d6; } /* ---- 7.9. Horizontal Tabs -------------- */ .tabs { display: inline-block; width: 100%; } .tabs > ul { margin-left: 5px; } .tabs > ul:after { display: block; clear: both; content: ""; } .tabs > ul li { float: left; margin: 0 0 0 2px; background: #efefef; color: #6c6c6c; } .tabs > ul li a { color: #6c6c6c; text-transform: uppercase; display: block; padding: 6px 15px; } .tabs > ul li a i { margin-right: 8px; color: #333; } .tabs > ul li:hover a, .tabs > ul li.active a { color: #fff; } .tabs-pane { padding: 15px; } /* ---- 7.10. Vertical Tabs -------------- */ .tabs-vertical > ul { float: left; width: 30%; } .tabs-vertical > ul li { display: block; float: none; margin: 0 0 7px 0; } .tabs-vertical .tabs-pane { float: left; margin-left: 25px; padding: 0; width: 63%; border-top: 0px; border-bottom: 1px #e4e4e4 solid; } .tabs-vertical .tabs-pane .tab-panel { position: relative; padding: 0 15px 15px; } .tabs-vertical .tabs-pane .tab-panel:before { position: absolute; top: 20%; left: 0; display: inline-block; width: 2px; height: 60%; content: ""; } .tab-img-holder { margin-right: 15px; width: 30%; } /* ---- 7.11. Accordion -------------- */ .accordion li > h3 { overflow: hidden; margin: 0 0 15px; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .accordion li > h3 a { float: left; margin: 0; /*NEW DESIGN*/ /*padding: 8px 15px;*/ /*border: 1px #d4d4d4 solid;*/ padding-top: 15px; background: #fff; line-height: 28px; display: block; width: 90%; color: #a8a8a8; text-transform: uppercase; font-size: 15px; } .accordion li > h3 i.fa { margin-right: 7px; } .accordion li > h3 u { display: inline-block; float: right; margin: 5px 5px 0 10px; padding: 10px 10px 8px 10px; /*NEW DESIGN*/ /*border: 1px #d4d4d4 solid;*/ background: #fff; color: #a8a8a8; text-align: center; text-decoration: none; font-size: 10px; line-height: 1; cursor: pointer; -moz-transition: all 0.2s ease 0s; -ms-transition: all 0.2s ease 0s; -o-transition: all 0.2s ease 0s; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .accordion li > h3 u:before { display: block; /*NEW DESIGN*/ content: "\f107"; font-size: 20px; font-family: FontAwesome; color: #a8a8a8; } .accordion li > h3[class*="skew-"] u::before { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .accordion li.active > h3 u:before { /*NEW DESIGN*/ content: "\f106"; color: var(--color-bg); font-size: 20px; font-family: FontAwesome; } .accordion li > h3 a span { display: block; } /*NEW DESIGN*/ .accordion-panel { /*margin: 15px 40px;*/ padding: 0 12px; padding-bottom: 20px; /*border-left: 3px #d4d4d4 solid;*/ } /* ---- 7.12. horizontal Accordion -------------- */ .accordion-horizontal > li { position: relative; display: block; float: left; overflow: hidden; margin: 0 1px; width: 50px; height: 240px; } .accordion-horizontal > li.active { width: 80%; border-top: 2px solid var(--color-bg); } .accordion-horizontal > li h3 span { display: block; margin-top: 130px; white-space: nowrap; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .accordion-horizontal > li > h3 { position: absolute; left: 0; float: left; width: 40px; height: 100%; } .accordion-horizontal > li > h3 a { display: table-cell; width: 40px; height: 100%; vertical-align: middle; -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transform: rotate(0); transform: rotate(0); } .accordion-horizontal .accordion-panel { margin: 0 0 0 40px; border: 0; } .accordion-horizontal > li > h3:before { display: none; } /* ---- 7.13. Icons list -------------- */ .list li { padding: 0 0 10px 10px; } .list li:before { position: relative; top: 2px; display: inline-block; margin-right: 10px; font-family: FontAwesome; } .list-crosshairs li:before { content: "\f05b"; } .list-ok li:before { /*content: "\f00c";*/ content: none; } .list-bell li:before { content: "\f0f3"; } .list-bookmark li:before { content: "\f02e"; } /* ---- 7.14. BreadCrumbs style -------------- */ .breadcrumbs { float: left; overflow: hidden; padding: 8px 10px; } .title-1 .breadcrumbs { background-color: #777 !important } .breadcrumbs a { float: left; margin: 0 3px; color: #fff; } .breadcrumbs a:hover { color: #fff; text-decoration: underline; } .breadcrumbs span { float: left; margin: 0 3px; } /* ---- 7.15. Clients Style -------------- */ .clients { padding-top: 25px; } .auto-clients { padding-top: 10px; } .social-contacts { /*font-size: 30px;*/ } .auto-clients > div a { margin: 0 15px; display: block; border-bottom: 1px #ddd solid; padding: 10px; text-align: center } /*NEW DESIGN*/ .clients > div a { /* margin: 0 15px;*/ display: block; /*border-bottom: 1px #ddd solid;*/ padding: 10px 0px; /* text-align: center*/ } .clients i.fa { border-radius: 100%; padding: 6px 8px; background: var(--color-bg); color: white; font-size: 20px; } .clients i.fa-facebook { padding: 6px 11px !important; } .clients span { color: black; padding-left: 6px; font-size: 10px; } .contact-carecenter-container { width: 100%; padding-top: 50px; /*text-align: center;*/ } a.carecenter-contact { margin-top: 30px; /*display: block;*/ padding: 6px 0px 0px 0px; text-align: center; width: 100%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); border-radius: 6px; display: flex; justify-content: center; } a.carecenter-contact:hover { margin-top: 30px; padding: 6px 0px 0px 0px; text-align: center; width: 100%; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3); border-radius: 6px; display: flex; justify-content: center; } a.carecenter-contact i.fa { font-size: 25px; padding: 10px; } /*TILL HERE*/ /* ========================================================================== 8. PAGE SPECIFIC STYLES. ============================================================================= */ /* ---- 8.1. About pages -------------- */ .plan-title { margin: auto; padding-top: 50px; background: #fff; text-align: center; text-transform: uppercase; font-size: 55px; line-height: 90%; } .plan-title span { color: #333; } .plan-block { padding: 50px 50px 0 !important; color: #fff; } .plan-block .block { position: relative; z-index: 9; padding-bottom: 60px; } .plan-year { position: absolute; bottom: 40px; z-index: 9; width: 250px; background: transparent url('../images/planBG.png') no-repeat 0px 100%; color: #333; font-weight: 800; font-size: 20px; } .plan-year:before { position: absolute; right: 23px; bottom: -6px; z-index: -1; display: inline-block; width: 38px; height: 40px; background: #fff; content: ""; } .plan-year:after { position: absolute; right: -15px; bottom: -6px; z-index: -1; display: inline-block; width: 38px; height: 40px; content: ""; } .lft-plan .plan-year { right: -73px; text-align: right; } .rit-plan .plan-year { left: -75px; -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } .rit-plan .plan-year span { display: block; float: right; -moz-transform: scaleX(-1); -ms-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); } .rit-plan .plan-year:after { right: -13px; } .plan-block h3 { margin: 0; padding: 0; font-weight: bold; font-size: 19px; } .plan-block p { margin: 5px 0; } .my-img { overflow: hidden; padding-bottom: 40px; } .my-img .my-name { font-size: 18px; margin: 15px 0; line-height: normal; padding-left: 25px; display: table; } .my-img img { border-radius: 5px; width: 150px; height: 150px; float: left; position: relative; z-index: 5; } .my-img .my-details { background: #F3F3F3; position: relative; z-index: 1; overflow: hidden; border-radius: 5px; } .work-exp li h4 { color: #777; margin-bottom: 5px; text-transform: uppercase; font-weight: bold; } .work-exp li h4:before { display: inline-block; content: "\f1d9"; font-size: 12px; font-family: FontAwesome; margin-right: 10px; color: #B8B8B8; } .work-exp li p { padding-left: 23px; padding-bottom: 10px; } .work-exp li:last-Child p { padding-bottom: 0; margin-bottom: 0 } /***** chart ******/ .chart { position: relative; display: inline-block; margin-bottom: 20px; width: 140px; height: 140px; text-align: center; } .chart canvas { position: absolute; top: 0; left: 0; } .percent { z-index: 2; display: inline-block; color: #bdbdbd; font-size: 21px; line-height: 137px; } .percent:after { margin-left: 0.1em; content: '%'; font-size: .8em; } .angular { margin-top: 100px; } .angular .chart { margin-top: 0; } /* ---- 8.2. Portfolio pages -------------- */ .portfolio-img-slick { /*overflow: hidden;*/ max-height: 500px; } .portfolio-img-slick .slick-list { max-height: 500px; } /*NEW DESIGN*/ .portfolio-img-slick .slick-prev, .portfolio-img-slick .slick-next { top: 50%; right: 10px; padding: 0; width: 40px; height: 40px; /*border-bottom: 0;*/ border: 1px solid var(--color-bg); border-radius: 100%; background: white; /*background: rgba(255,255,255,.23);*/ color: var(--color-bg); margin-top: -30px; } .portfolio-img-slick .slick-next:before { content: "\f105"; font-size: 30px; } .portfolio-img-slick .slick-prev:before { content: "\f104"; font-size: 30px; } .portfolio-img-slick .slick-prev { right: auto; left: 10px; } .porto-stats [class*="cell-"] { padding: 3px; } .porto-stats .gry-bg { padding: 15px 9px; } .porto-stats .fun-text { color: #333; } .list-details li { padding: 10px 3px; border-top: 1px #e5e5e5 solid; } .list-details li:first-child { border-top: 0; } .list-details li span { margin: 0 15px 0 5px; } .list-details li span.main-color { font-weight: bold; font-size: 13px } /* ---- 8.3. Pricing tables -------------- */ .pricing-table, .pricing-table-2 { padding: 45px 11px 20px; border: 1px #e4e4e4 solid; text-align: center; } .pricing-table i.fa { position: absolute; top: 0px; left: 50%; font-size: 30px; width: 60px; height: 56px; z-index: 9999; text-align: center; line-height: 56px; margin-top: -28px; margin-left: -30px; } .pricing-table .head, .pricing-table-2 .head { text-transform: uppercase; font-weight: 400; font-size: 16px; } .pricing-table li, .pricing-table-2 li { padding: 10px 0; border-bottom: 1px #e4e4e4 solid; font-size: 14px; } .pricing-table .price span, .pricing-table-2 .price span { font-weight: 400; font-size: 26px; } .pricing-footer { padding-top: 20px !important; border-bottom: 0 !important; } /* Pricing tables style 2 */ .pricing-table-2 { z-index: 2; margin-right: -15px; margin-left: -15px; padding: 0 0 20px; } .pricing-table-2 .dark-bg { position: relative; overflow: hidden; padding: 30px 0; background-color: #373737; } .pricing-table-2 .head { margin-bottom: 20px; } .pricing-table-2 i.fa { position: absolute; left: 50%; font-size: 26px; width: 90px; height: 84px; z-index: 9999; text-align: center; line-height: 23px; margin-left: -45px; margin-bottom: -48px; bottom: 0; padding: 10px 25px 39px; border-radius: 50%; background: #fff; } .pricing-table-2 li.even { background: #f3f3f3; } .pricing-table-2.selected { position: relative; z-index: 66 !important; background: #494949; -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .pricing-table-2.selected li.even { background: #373737; } .pricing-table-2.selected li { border-color: #585858; color: #949494; } .pricing-table-2.selected i.fa { background: #494949; } .highInd { z-index: 99 !important; } /* ---- 8.4. Team styles -------------- */ .team-boxes [class*="cell-"] { margin: 0 0 30px; } .team-box { -moz-perspective: 1700px; -ms-perspective: 1700px; -webkit-perspective: 1700px; -moz-perspective-origin: 0 50%; -ms-perspective-origin: 0 50%; -webkit-perspective-origin: 0 50%; perspective-origin: 0 50%; perspective: 1700px; position: relative; padding: 0 0 8px; /*background-color: #f4f4f4;*/ } .team-img { -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.10)); } .team-img img { width: 100%; height: auto; } .team-box .team-details { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; overflow: hidden; padding: 10px; width: 100%; height: 100%; border-left: 5px #333 solid; opacity: 0; -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -moz-transform-origin: 0 0; -ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; -o-transition: transform 0.4s, opacity 0.1s 0.3s; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } .team-box h3 { padding: 7px 10px !important; text-align: center; font-size: 14px; text-transform: none; margin: -5px !important; } .team-img h3 { overflow: hidden; margin: 0; padding-bottom: 0; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; } .team-box:hover .team-img { /* opacity: .3;*/ filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.25)); } .team-box:hover .team-details { opacity: 0.7; -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); -moz-transition: -moz-transform 0.4s, opacity 0.1s; -o-transition: transform 0.4s, opacity 0.1s; -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } .team-box:hover .team-details .gry-bg { color: #666; } .team-box:after, .team-box-2:after { position: absolute; bottom: -2px; left: 0; display: block; width: 100%; height: 1px; content: ""; } .team-socials { position: absolute; bottom: 0; width: 100%; z-index: 99999; } .team-socials ul { display: table; overflow: hidden; margin: auto; padding: 0; } .team-socials li { float: left; margin: 6px 3px; } .team-socials a { padding: 5px 10px; color: #fff; font-size: 17px; } .team-details p { margin-bottom: 5px; font-size: 12px; line-height: 130%; } .team-details h3 { margin: 0; padding: 13px 0 0 5px; } .t-position { padding: 10px 0; color: #ababab; text-align: center; font-size: 11px; } .team-box .t-position { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: table; margin: 15px auto 10px; padding: 5px !important; color: #fff !important; font-size: 12px; /*-moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); -webkit-transform: rotate(3deg); transform: rotate(3deg);*/ } .team-box .team-details p { padding: 10px; color: #fff; font-size: 12px; max-height: 100px; overflow: hidden; height: 100px; } .team-box .team-socials li a { padding: 3px 10px; } .team-box:hover:after, .team-box-2:hover:after { height: 1px; } /**** Team style 2 ****/ .team-box-2 { position: relative; margin-top: 60px; padding: 45px 11px 5px; background-color: #f4f4f4; text-align: center; } .team-box-2:before { position: absolute; top: -20px; right: 14px; color: #999; content: "\f030"; font-size: 168px; font-family: FontAwesome; opacity: .1; -moz-transform: rotate(-34deg); -ms-transform: rotate(-34deg); -o-transform: rotate(-34deg); -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .team-box-2 .team-img { position: absolute; top: 0; margin-top: -45px; margin-left: -45px; left: 50%; padding: 2px; width: 90px; height: 90px; border: 1px #e4e4e4 solid; background: transparent; } .team-boxes-2 .cell-3:hover .team-box-2:before, .team-boxes-2 .cell-3:hover .team-socials li a { color: #fff; } .team-boxes-2 .cell-3:hover .team-details h3, .team-boxes-2 .cell-3:hover .team-details .t-position { color: #fff !important; } .team-box-2 .team-details { position: relative; z-index: 9999; margin-top: 25px; background: transparent; } .team-box-2 .team-details h3 { margin: 0 0 5px; padding: 8px 0; } .team-boxes-2 [class*="cell-"] { margin: 0 0 30px !important; } .team-box-2 .team-socials a { display: block; padding: 5px 10px; } .team-box-2 p { border-bottom: 1px #e4e4e4 solid; padding-bottom: 15px } .team-box-2 .t-position { margin-bottom: 10px; padding-top: 0; padding-bottom: 15px; border-bottom: 1px #e4e4e4 solid; } /* -------- 8.5. Blog ------------------ */ .post-item { padding-right: inherit; padding-bottom: 20px; margin-bottom: 50px; } .post-content { overflow: hidden } .post-image { position: relative; } .post-video:hover .post-lft-info { display: none } .no-bar .blog-posts .post-image { max-height: 340px; } .post-image a .mask { position: absolute; width: 100%; height: 100%; border-right: 0; border-left: 0; opacity: 0; -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-image a:hover .mask { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } .post-image a .mask:before { position: absolute; top: 50%; left: 50%; display: inline-block; color: #fff; content: "\f0c1"; font-weight: normal; font-size: 30px; font-family: FontAwesome; width: 40px; height: 40px; margin-left: -20px; margin-top: -20px } .details-img a .mask:before { content: "\f00e"; } .details-img { position: relative } /*form NEW DESIGN*/ /*.details-img:after,.post-image:after{ top: 0; height: 6px; display:inline-block; content:""; width:100%; position:absolute; left:0 } .pos*/ t-item p { margin-bottom: 0 } .details-img .post-lft-info, .post-image .post-lft-info { position: absolute; left: 15px; top: 0px; min-height: inherit; z-index: 999 } .post-lft-info { float: left; margin-right: 20px; min-height: 150px; } .post-lft-info div { position: relative; padding: 10px 25px 15px; text-align: center; text-transform: uppercase; font-size: 14px; } .tri-col { position: absolute; bottom: -20px; left: 0; z-index: 4; width: 0; height: 0; border-width: 20px 40px 0 40px; border-style: solid; } .post-info h2 { margin: 20px 0; text-transform: none; font-weight: normal; } .post-item .post-day, .post-item .post-year { display: inline-block; } .post-info .post-meta { overflow: hidden; margin-bottom: -5px; padding-bottom: 3px; border-bottom: 1px #eaeaea solid; text-transform: uppercase; font-size: 11px; } .post-info .post-meta li { float: left; margin: 0 15px 0 0; color: #A8A8A8; } .post-info .post-meta li i { margin-right: 7px; color: #c7c7c7; font-size: 14px; } .post-info .post-meta li a { color: #777 } .post-content p { margin-top: 20px; } .post-info-container h1 { margin: 20px 0; font-size: 27px; font-weight: normal; } .post-tags { padding: 20px 0; } .post-tags span { margin: 0 10px 0 5px; display: inline-block } /* blog masonry style */ .masonry .meta-tags { display: none; } .masonry .post-image { background: #eee; max-height: 178px; } .masonry.nobar .post-image { max-height: 164px; } .masonry .post-item { margin-bottom: 30px } .masonry .post-info h2 { overflow: hidden; height: 25px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; margin: 30px 0 15px; } .masonry .post-content p { overflow: hidden; max-height: 60px; font-size: 13px; } .masonry .pager { clear: both; } .masonry.nobar .post-content p { max-height: 90px; } /*** blog-thumbs ***/ .blog-thumbs .post-image { float: left; margin-right: 10px; max-height: 177px; margin-bottom: 0px } .blog-thumbs.no-bar .post-image { max-height: 177px; } .blog-thumbs .post-item { float: none; clear: both; overflow: hidden; } .blog-thumbs .post-info h2 { margin-top: 0; } .blog-thumbs .post-content { padding-left: 15px } .share-post { overflow: hidden; padding: 0 10px; background: #eee; } .share-post .sh { float: left; display: block; padding: 0 15px; font-weight: bold; font-size: 13px; line-height: 45px } .share-post > div { float: left; height: 45px } .share-post button { margin: 0; border: 0; padding: 0 15px; line-height: 45px; font-size: 16px; float: left } .share-post .facebook { background: #1b57a1; color: #fff } .share-post .twitter { background: #0cbce2; color: #fff } .share-post .googleplus { background: #dd4b39; color: #fff } .share-post .linkedin { background: #1583ba; color: #fff } .share-post .pinterest { background: #bd2126; color: #fff } .share-post .xing { background: #006464; color: #fff } /*** comments ***/ .comment-list { margin-bottom: 60px; padding: 0 15px; } .comment { position: relative; } .comment-avatar { position: absolute; top: 15px; left: 25px; z-index: 6; margin: 0 20px 0 0; padding: 2px; width: 70px; height: 70px; border: 2px #f6f6f6 solid; background: #fff; } .comment-content { margin-bottom: 20px; } .comment-content p { padding: 5px 0 5px 115px; } .comment-author { overflow: hidden; margin-bottom: 10px; background: #eee; font-weight: normal; } ul.child-comment { margin-left: 90px; } ul.child-comment li { position: relative; } ul.child-comment li:before { position: absolute; top: 17px; left: -37px; display: inline-block; width: 50px; height: 1px; background: #eee; content: ""; } ul.child-comment li:after { position: absolute; top: -101%; left: -37px; display: inline-block; width: 1px; height: 117%; background: #eee; content: ""; } .comments .hint .main-color { display: inline-block; padding: 5px; background: #eee; font-size: 150%; } .author-name { display: inline-block; margin-left: 100px; padding: 10px 0 0 15px; font-weight: bold; } .comment-date { float: right; padding: 11px 20px 0 0; } .comment-reply { float: right; padding: 10px 15px; font-size: 12px; } .comment-reply span { display: block; } .comment-reply i { margin-right: 5px; color: #fff; } .leave-comment { padding-bottom: 30px; } .leave-comment .txt-box { width: 31.4%; } .leave-comment textarea { width: 100% !important; } /* -------- 8.6. Contact page ------------------ */ .contact-detalis h4 { text-transform: none; font-size: 17px; } .contact-detalis h5 { margin-bottom: 0; text-transform: none; font-size: 15px; } .contact-detalis p { margin-top: 0; padding-bottom: 0; } .form-input { overflow: hidden; margin: 0 0 20px 0; width: 100%; } .form-input label { display: block; clear: both; overflow: hidden; margin: 0px 0 5px; width: 100%; } .form-buttons .btn { margin-right: 5px; } .contact-form span.red { display: inline-block; margin-left: 5px; } .contact-form input[type=text], .contact-form input[type=password], .contact-form input[type=email], .contact-form textarea, .contact-form input[type=file] { display: inline-block; float: left; padding: 12px 15px; width: 100%; border: 0; border: 1px #DFDFDF solid; background: #fff; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .contact-form select { display: inline-block; float: left; padding: 13px 15px; width: 100%; border: 0; border: 1px #DFDFDF solid; background: #fff; line-height: 35px; } .contact-form input[type=radio], .contact-form input[type=checkbox] { position: relative; top: 2px; margin: 0 5px 0 0; } .form-box { display: inline-block; float: left; line-height: 34px; } .form-box span { display: inline-block; margin-right: 15px } .contact-form textarea { clear: both; width: 100%; height: 180px; resize: none; } .small-txt-box { padding: 0px !important; } .small-txt-box input[type=text] { width: 100px !important; } .btns-right { padding: 0 !important; text-align: right; } #error_msg { display: none; } #error_msg ul { margin: 10px 0 0 20px; } #error_msg ul li { margin-left: 10px; padding: 4px 0; color: #000; list-style-type: square !important; } .small-select { margin-right: 15px; padding: 10px !important; width: auto !important; } #message { display: block; margin: 15px 0; padding: 13px; background: transparent; text-align: center; } .cform { position: relative } img.loader { position: absolute; bottom: 15px; left: 32%; } #contact input.error, #contact textarea.error, #contact select.error { border: 1px solid #faabab; background: transparent; } /* ---- 8.7. Site map Page -------------- */ .siteMap-nav ul li { margin: 5px 0; } .siteMap-nav > ul > li > a { display: block; padding: 10px; background: #f1f1f1; color: #333; text-transform: uppercase; font-weight: bold; font-size: 15px; } .siteMap-nav > ul > li > a i { margin-right: 8px; color: #999; } .siteMap-nav ul ul { margin: 10px 20px; } .siteMap-nav ul ul li { padding: 5px 10px; border-bottom: 1px #f1f1f1 dashed; } .siteMap-nav ul ul li a:before { display: inline-block; margin-right: 7px; color: #5b5b5b; content: "\f105"; font-family: FontAwesome; } .siteMap-nav ul ul li a:hover { /*margin-left: 10px;*/ color: #02d2d1 !important; } .siteMap-nav ul ul li:last-child { border-bottom: 0px } /* ---- 8.8. 404 Page -------------- */ .not-found { display: table; margin: auto; width: 65%; text-align: center; } .err-404 { position: relative; margin-top: 40px; color: #494949; font-weight: 800; font-size: 150px; line-height: 1; } .err-404:before { position: absolute; top: -33px; left: 46.5%; color: #f0f0f0; content: "\f119"; font-weight: normal; font-size: 60px; font-family: FontAwesome; } /* ---- 8.9. Shop pages -------------- */ .item-box { position: relative; margin-bottom: 30px; background-color: #f4f4f4; cursor: pointer; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-box:after { position: absolute; bottom: -3px; left: 0; width: 100%; height: 3px; content: ""; } .item-box:hover:after { bottom: -1px; height: 1px; } .item-title { margin: 0; padding: 10px 0; background: #ebebeb; color: #666; text-align: center; font-size: 14px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-title a { color: #666; } .item-img { padding: 10px; text-align: center; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; position: relative } .item-details { overflow: hidden; padding: 10px 0 0; border-top: 1px #dfdfdf solid; } .item-details p { padding: 0 10px } .item-price { padding: 5px 25px; font-size: 20px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-rating { padding-bottom: 3px; } .item-details .item-rating { text-align: center; } .item-rating .fa { margin-right: 4px; color: #ffc000; font-size: 15px; } .item-rating .fa-star-o { color: #c0c0c0; } .right-rating { float: right; clear: both; font-size: 14px; font-weight: bold; } .right-rating .item-rating { float: right; } .item-details .left { padding-left: 10px; } .item-cart { padding: 0 0 6px 0; border-bottom: 1px #dfdfdf solid; } .item-cart a { color: #333; text-transform: uppercase; font-size: 11px; } .remove-item i { font-size: 23px; } .item-details .left i.fa { margin-right: 8px; } .item-tools { padding-top: 8px; } .item-tools i { font-size: 17px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .item-box:hover { background: #F0F0F0; } .item-box:hover .item-img { opacity: 0.5; } .sale { position: absolute; right: 5px; top: 15px; width: 40px; height: 30px; line-height: 30px; text-align: center; font-size: 11px; z-index: 99999; } .sale:before { position: absolute; top: 0; left: -10px; z-index: 5; width: 0; height: 0; border-style: solid; border-width: 15px 10px 15px 0; content: ""; display: inline-block; } .toolsBar { display: table; margin: 0 0 10px 0; padding: 10px; width: 100%; background: #F5F5F5; text-transform: uppercase; } .toolsBar span { display: inline-block; margin: 0 5px 0 0; } .toolsBar select { margin-right: 10px; background: #fff; } .order-asc i.fa { margin-top: 7px; font-size: 20px; } .products-filter-top { float: left !important; clear: none !important; width: auto !important; } .list-grid { float: right !important; clear: none !important; width: auto !important; } .list-grid a { position: relative; float: right; margin: 0 0 0 4px; padding: 8px 13px; background: #EBEBEB; font-size: 14px; } .list-grid a.selected:after { position: absolute; bottom: -6px; left: 30%; z-index: 5; width: 0; height: 0; border-width: 8px 8px 0 8px; border-style: solid; content: ""; } .shop-item { } .shop-item p { overflow: hidden; padding: 5px 10px; max-height: 50px; } .grid-list.list .shop-item { float: none; clear: both; width: 100%; } .grid-list.list .shop-item p { overflow: visible; min-height: 115px; max-height: 150px; } .grid-list.list .item-img { float: left; margin-right: 20px; max-height: 200px; } .grid-list.list .item-img img { max-height: 200px; } .control-group .box i.fa { margin-right: 7px; color: #333; } .similar-products .item-img img { max-height: 200px; } .grid-list.list .item-box { overflow: hidden; background: transparent; } .grid-list.list .item-title { padding-left: 25px; border: 0; text-align: left; } .grid-list.list .item-box:hover .item-img { -moz-transform: rotateY(0); -ms-transform: rotateY(0); -o-transform: rotateY(0); -webkit-transform: rotateY(0); transform: rotateY(0); } .grid-list.list .item-box:hover { border-bottom-width: 3px; } .grid-list.list .item-box:hover .item-title { border: 0; } .grid-list.list .item-details { border: 0; } .left-shop .control-group select { width: 100%; } .left-shop .control-group label.checkbox { display: block; clear: both; padding: 10px; } .left-shop .control-group label.checkbox input[type=checkbox], .left-shop .control-group label.checkbox input[type=radio] { display: inline; margin-right: 8px; vertical-align: middle; } .left-shop .accordion-panel { margin: 0; padding: 0; border: 0; } .left-shop .accordion li > h3 a { border: 0; font-weight: bold; } .left-shop .accordion li > h3 u, .left-shop .accordion li > h3 u:before { -moz-transform: skew(0, 0); -ms-transform: skew(0, 0); -o-transform: skew(0, 0); -webkit-transform: skew(0, 0); transform: skew(0, 0); } .left-shop .accordion li > h3 u { margin: 0; border: 0; background: #EBEBEB; } .steps { margin-bottom: 30px; padding: 0 15px 0 0; } .steps ul { display: table; width: 100%; } .steps li { display: table-cell; width: 15.5%; background: #E9E9E9; } .continue-btn { margin: 30px 15px 0; height: 43px; background: #E9E9E9; } .continue-btn .btn { position: relative; height: 43px; } .continue-btn .btn.right:after { position: absolute; top: 50%; left: 100%; z-index: 3; display: inline-block; margin-top: -22px; width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 21px solid transparent; content: ""; } .continue-btn .btn.left:after { position: absolute; top: 50%; right: 100%; z-index: 3; display: inline-block; margin-top: -22px; width: 0; height: 0; border-top: 22px solid transparent; border-bottom: 21px solid transparent; content: ""; } .steps li span { position: relative; display: block; padding: 20px 20px 20px 35px; text-align: center; text-decoration: none; font-size: 15px; font-weight: bold; } .steps li span:after { position: absolute; top: 50%; left: 100%; z-index: 3; display: inline-block; margin-top: -30px; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 16px solid #E9E9E9; content: ""; } .steps li span:before { position: absolute; top: 50%; left: 100%; z-index: 2; display: inline-block; margin-top: -30px; margin-left: 1px; width: 0; height: 0; border-top: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 16px solid #fff; content: ""; } .product-img { position: relative; border: 1px #ddd solid; text-align: center; } .thumbs { border-top: 1px #ddd solid; } .product-img > img { display: table; margin: auto; } .product-img ul { display: table; margin: 15px auto; } .product-img li { display: table-cell; margin: 0 5px 0 0; } .product-img li img { width: 60px; } .product-specs a.btn, .item-avl > div { margin-right: 6px; margin-bottom: 0; } .product-specs a.btn { padding-right: 20px; padding-left: 20px; background-color: transparent; border: 1px #ddd solid; color: #777 } .product-specs a.btn:hover { border: 1px #ccc solid !important; background: #E4E4E4; color: #333; } .product-price { font-size: 29px; font-weight: bold; line-height: 1; } .old-price { color: #c4c3c3; text-decoration: line-through; font-size: 20px; margin: 0 0 0 10px; } .price-block { display: table; clear: both; margin: 0; padding: 0 0 20px; width: 100%; border-bottom: 1px #E9E9E9 solid; } .price-box { padding-bottom: 10px; } .pro-btns { margin: 5px 0 0 15px; } .item-avl > div { padding: 10px; font-weight: bold; } .item-avl .success-box, .item-avl .warning-box, .item-avl .error-box { border-radius: 50%; padding: 0; width: 25px; height: 25px; text-align: center; line-height: 25px; } .item-avl span { line-height: 25px } .item-avl i { color: #fff !important; margin: 0 !important } .product-block { padding: 15px 0; border-bottom: 1px #E9E9E9 solid; } .last-list { padding-top: 15px !important } .last-list p { margin-bottom: 0px } .reviews .comments { padding-top: 30px; } .reviews .author-name { margin-left: 0px; padding: 15px; } .reviews .comment-date { padding: 15px 30px 0 0; } .reviews .comment-content p { padding: 15px; } .item-add { clear: both; overflow: hidden; } #items-num { margin: 0 5px 0 0; padding: 10px 0; width: 50px; border: 1px #dfdfdf solid; text-align: center; font-size: 16px; } .item-add .btn { /* margin-top: 10px; */ } .add-items i.fa { /* margin-top: 10px; */ padding: 0 8px; height: 44px; border: 1px transparent solid; background: #ddd; font-size: 10px; line-height: 46px; } .add-items i.fa:hover { border: 1px #ddd solid; background: #fff; } .qty-txt-box { width: 70px; text-align: center; } .qty-txt-box i { font-size: 14px; margin-left: 5px; cursor: pointer; } .qty-txt-box input[type=text] { width: 30px; border: 1px #ddd solid; text-align: center; padding: 5px 10px; } .cart-icon { position: relative; float: right; margin: 0 0 0 auto; z-index: 9; } .cart-heading { padding: 10px; cursor: pointer; } .cart-heading i { margin-right: 10px; font-size: 16px; } .cart-popup { position: absolute; display: none; padding: 20px; background: #F5F5F5; min-width: 350px; min-height: 200px; right: 0; border-width: 6px; border-style: solid } .cart-popup .empty { line-height: 160px; text-align: center; color: #f00 } .mini-cart-list li { position: relative; overflow: hidden; border-bottom: 1px solid #E7E7E7; padding-bottom: 15px; margin-bottom: 15px; } .cart-mini-lft { float: left; margin-right: 8px; } .cart-mini-lft img { width: 40px; border: 1px #fff solid; padding: 2px; } .mini-cart-list a.remove { position: absolute; right: 5px; top: 0; } .mini-cart-list a.remove i { font-size: 130%; color: #bababa; } .mini-cart-list a.remove:hover i { color: #000; } .mini-cart-total { padding: 0 10px 20px 10px; font-weight: 400; color: #444; border-bottom: 1px solid #E7E7E7; } .mini-cart .checkout { text-align: center; padding-top: 20px; } .mini-cart .checkout a { margin: 0 5px; height: 35px; display: inline-block; line-height: 33px; background: #fff; color: #000; border: 1px solid #e1e1e1; padding: 0 20px; text-transform: none; } .mini-cart .checkout a:hover { background: #6c6c6c; color: #fff; border-color: #6c6c6c; } .cart-body .price { color: #777 } .shop-bottom-btns { padding-top: 30px } /* ========================================================================== 9. PAGE TITLES. ============================================================================= */ /* ---- 9.1. Page title 1 -------------- */ .page-title h1 { font-weight: bold; font-size: 35px; } .page-title h1 span { color: #777; } .page-title .cell-4 img { margin-top: 10px; } .title-1 { background: #fff url('../images/page-titles/page-title-bg.png') no-repeat 50% 50%; /*background: #fff;*/ background-repeat: no-repeat; background-position: 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-1 h1 { margin-top: 30px; margin-bottom: 30px; } .empty-title { padding-bottom: 50px; } /* ---- 9.2. Page title 2 -------------- */ .title-2 { background: #fff url('../images/page-titles/Page-title-1.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-2 h1 { margin-top: 30px; margin-bottom: 5px; float: left; text-transform: uppercase; } .title-2 p { margin: 0; padding: 10px 0 30px; width: 75%; font-size: 20px; line-height: 120%; } .title-2 .breadcrumbs { margin-top: 115px; } .title-2 .breadcrumbs span { color: #333; } .title-2 h1 span { display: block; } .title-2 i { float: left; margin-top: 36px; margin-right: 10px; padding: 7px; font-size: 60px; } /* ---- 9.3. Page title 3 -------------- */ .title-3 { background: url('../images/page-titles/Page-title-3.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-3 h1 { float: left; margin-top: 30px; margin-bottom: 5px; color: #fff; text-transform: uppercase; } .title-3 p { margin: 0; padding: 10px 0 30px; width: 75%; font-size: 20px; line-height: 120%; } .title-3 .breadcrumbs { margin-top: 115px; background: #fff; } .title-3 .breadcrumbs span { color: #333; } .title-3 h1 span { display: block; color: #fff } .title-3 i { float: left; margin-top: 36px; margin-right: 10px; padding: 7px; background: #2f2f2f; color: #fff; font-size: 60px; } /* ---- 9.4. Page title 4 -------------- */ .title-4 { background: #41a1b7 url('../images/page-titles/Page-title-1.jpg') no-repeat 50% 50%; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; } .title-4 h1 { display: inline-block; float: left; clear: both; margin-top: 30px; margin-bottom: 5px; padding: 2px 15px; color: #fff; text-transform: uppercase; } .title-4-desc { display: inline-block; float: left; clear: both; margin: 0; padding: 10px 15px; font-size: 20px; font-size: 15px; line-height: 120%; background: #777; color: #fff } .title-4-desc span { display: block; } .title-4 .breadcrumbs { margin-top: 115px; background: #fff; } .title-4 .breadcrumbs span { color: #333; } .title-4 h1 span { display: block; color: #fff !important; font-size: 20px; } /* ========================================================================== 10. WIDGETS. ============================================================================= */ .widget { padding-bottom: 40px; color: #b2b2b2; } .widget h4 { overflow: hidden; margin-bottom: 8px; height: 18px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px } .widget-head { position: relative; margin-bottom: 0; padding: 0 0 20px; border-bottom: 1px #ddd solid; font-weight: bold; text-transform: capitalize; font-size: 17px; line-height: 17px } .widget-head:before { position: absolute; bottom: -3px; left: 20px; width: 35px; height: 5px; content: ""; display: inline-block; } .widget-head:after { position: absolute; bottom: -1px; left: 0; width: 80px; height: 1px; content: ""; display: inline-block; } .widget-content { /*border: 1px #ddd solid;*/ border-top: 0px; overflow: hidden; border: 1px solid #E5E7EB; box-sizing: border-box; box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.04); border-radius: 4px; } .widget-content a { color: #666; } /*NEW DESIGN*/ .widget-content li.current { background: #EEF2FF; border-left: 4px solid var(--color-bg); } .widget-content li.current a { color: var(--color-bg); font-weight: bold; padding-left: 15px; padding-right: 15px; } .widget-content li a { padding-left: 15px; padding-right: 15px; } /*.widget-content li:hover { background: #EEF2FF; }*/ /******* Search widget *******/ .search-w form { overflow: hidden; padding: 5px 0 3px; margin: 0 -10px } .search-w .txt-box { width: 80%; font-size: 11px; } .search-w .btn i { margin: 0 !important } /******* recent posts widget *******/ .r-posts-w > ul > li, .blog-cat-w ul li, .r-comments-w ul li { overflow: hidden; padding: 10px 0; /*border-top: 1px #f0f0f0 solid;*/ } .r-posts-w > ul > li:first-child, .blog-cat-w ul li:first-child, .r-comments-w ul li:first-child { border-top: 0px; } .r-posts-w .post-img { float: left; margin-right: 10px; max-height: 70px; overflow: hidden } .r-posts-w .post-img img { padding: 1px; width: 70px; /*height: 70px;*/ border: 1px #f0f0f0 solid; } .r-posts-w .meta span { display: inline-block; margin-right: 10px; } .r-posts-w .meta i { margin: 0 5px 0 0; } .widget-content li { overflow: hidden } .r-posts-w li { border-top: 1px #eee solid; padding: 10px 0 } .r-posts-w li:first-child { border-top: 0px } .sale-widget .meta span { margin-right: 2px !important } .widget-content .accordion { margin: 10px auto } .blog-cat-w li span { float: right } /******* recent comments widget *******/ .r-comments-w i.fa { margin-right: 10px; color: #777; font-size: 60px; } .r-comments-w i.fa.fa-clock-o { font-size: 16px; } .r-comments-w h5 { margin: 10px 0 5px; text-transform: none; font-weight: normal; } /******* Tag cloud widget *******/ .tags-w { overflow: hidden; } .tags-w .tags a { display: block; float: left; margin: 3px; padding: 8px; background: #eee; color: #616161; font-size: 11px; } .tags-w .tags a:hover { background: #777; color: #fff; } /******* Flickr stream widget *******/ .widget.flickr-stream-w ul, .widget-content .tags { margin: 6px 0; overflow: hidden; } .flickr-stream-w ul li { position: relative; float: left; margin: 0 1px 1px 0; } .flickr-stream-w ul li a { height: 78px; display: block; } .flickr-stream-w ul li img { width: 78px; height: 78px; } .flickr-stream-w .img-overlay { position: absolute; top: 0; left: 0; width: 78px; height: 78px; opacity: 0; -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .flickr-stream-w .img-overlay:before { display: block; color: #fff; content: "\f0c1"; text-align: center; font-size: 25px; font-family: FontAwesome; line-height: 80px; } .flickr-stream-w ul li:hover .img-overlay { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); } /********************************************* Custom slider options **********************************************/ .tp-banner-container { position: relative; z-index: 1; padding: 0; width: 100%; object-fit: none; } .tp-banner { position: relative; width: 100%; object-fit: none; } .tp-caption { line-height: normal !important; text-shadow: 2px 7px 5px rgba(0, 0, 0, 0.61); /*background-color: rgba(0, 56, 255, 0.3);*/ /*background: rgba(0, 56, 255, 0.3);*/ } .tp-caption .banner-text { } .tp-caption a { color: inherit !important; } .tp-bullets.simplebullets.round .bullet { border: 3px #fff solid; border-radius: 50%; background-image: none !important; } /*New*/ #homeBanner .tp-bullets.simplebullets.round .bullet:hover { border: 3px #058b8b solid; border-radius: 50%; background-image: none !important; } .tparrows { width: auto !important; height: auto !important; background-image: none !important; } .tp-arr-allwrapper { margin: 0 10px; border: 1px solid var(--color-bg); width: 40px; height: 40px; background: #fff; border-radius: 100%; } .tp-arr-allwrapper:hover .tp-arr-iwrapper { color: white; width: 40px; height: 40px; background-color: var(--color-bg); border: 1px solid white; border-radius: 100%; margin: -1px -1px; } /*Commented form new View*/ /*.tp-leftarrow .tp-arr-allwrapper { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } .tp-rightarrow .tp-arr-allwrapper { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); }*/ .tp-arr-iwrapper { color: var(--color-bg); /*color: #a0a0a0;*/ text-align: center; font-size: 30px; font-family: FontAwesome; line-height: 37px; } /*.tp-leftarrow .tp-arr-iwrapper { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); }*/ .tp-leftarrow .tp-arr-iwrapper:before { content: "\f104"; } .tp-rightarrow .tp-arr-iwrapper:before { content: "\f105"; } /*.tp-rightarrow .tp-arr-iwrapper { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); }*/ .slide-h1 { margin: 5px 0 !important; padding: 0 0 10px !important; padding-bottom: 5px !important; color: #444; text-transform: uppercase; font-weight: bold; font-size: 57px; } .slide-h2 { margin: 5px 0 !important; padding: 0 0 10px !important; padding-bottom: 5px !important; color: #555; font-weight: bold; font-size: 55px; line-height: 100%; } .big-font { text-transform: uppercase; font-weight: 800; font-size: 60px; } .large-desc { font-size: 16px; } .slide-h3 { color: #fff; font-size: 31px; line-height: 100%; } .slide-h3 span { text-transform: uppercase; font-weight: bold; } .slide-head { text-transform: uppercase; font-weight: 900; font-size: 30px; } .slide-desc { font-size: 22px; line-height: 150%; } .main-title { text-transform: uppercase; font-weight: 800; font-size: 70px; } .icon-cont { padding: 15px 40px; border-radius: 10px; text-align: center; } .icon-cont:after { position: absolute; bottom: -10px; left: 40%; z-index: 5; display: inline-block; width: 0; height: 0; border-width: 10px 10px 0 10px; border-style: solid; content: ""; } .icon-cont i { margin-bottom: 10px; color: #fff; font-size: 50px; } .icon-cont span { display: block; padding: 0 0 5px; color: #fff; text-align: center; font-size: 18px; } a.wit-btn { background: #fff; color: #333 !important; text-transform: uppercase; } .wit-line { width: 5%; height: 1px; background: #fff; } .vert-line { min-height: 270px; width: 1px; background: #fff; } .subTxt { text-transform: uppercase; font-weight: bold; font-size: 17px; color: #333; } .large-title { color: #222; font-size: 60px; font-weight: 800; text-transform: uppercase !important; } .large-light-title { color: #787878 !important; font-size: 70px; font-weight: lighter; text-transform: uppercase; letter-spacing: 2px } .large-text { font-size: 20px; color: #000; font-weight: lighter; } .larger-text { font-size: 24px; font-weight: lighter; text-transform: uppercase; } .witTxt { color: #fff !important; } .light-font { font-weight: lighter !important; font-size: 50px; } .black-bg { background: rgba(0,0,0,.63); color: #a8a8a8; text-transform: none; } .lft-list { padding: 10px; font-size: 18px; color: #fff; } .wit-border { border: 1px #fff solid; padding: 15px 60px; color: #fff; font-size: 16px; text-transform: uppercase; } .rounded-bord { margin-right: 15px; border: 1px #fff solid; width: 30px; height: 30px; text-align: center; line-height: 30px; font-size: 13px; border-radius: 50%; } #vertical-ticker { height: 120px; overflow: hidden; } #vertical-ticker li { padding: 15px 20px; display: block; text-align: center; line-height: 120px } .to-bottom i.fa { font-size: 30px; border: 2px #a8a8a8 solid; padding: 20px 22px; border-radius: 50%; -webkit-animation: bounce 2s infinite linear; animation: bounce 2s infinite linear; } @-webkit-keyframes bounce { 0% { transform: translateY(0%); } 50% { transform: translateY(-30%); } 100% { transform: translateY(0); } } /* Mozilla Firefox 15 below */ @-moz-keyframes bounce { 0% { transform: translateY(0%); } 50% { transform: translateY(-30%); } 100% { transform: translateY(0); } } /* Opera 12.0 */ @-o-keyframes bounce { 0% { transform: translateY(0%); } 50% { transform: translateY(-30%); } 100% { transform: translateY(0); } } /* W3, Opera 12+, Firefox 16+ */ @keyframes bounce { 0% { transform: translateY(0%); } 50% { transform: translateY(-30%); } 100% { transform: translateY(0); } } /*======================================================== Book Appointment Container ===========================================================*/ .booking-container { /*float: right; width: 100%;*/ /*height: 100px; position: absolute !important; bottom: 0; right: 0; z-index: 99999; background:red;*/ position: absolute !important; bottom: 20px; /*left: 0;*/ z-index: 99999; } .booking-container .form-container { position: relative; float: none; margin: auto; /*display: inline-block;*/ padding: 20px 0px 0px 22px; /*border: 1px solid #0077AC;*/ border: 1px solid var(--color-bg); border-radius: 30px; box-shadow: 0 0 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2); background: rgb(255,255,255); background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(242,242,242,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(242,242,242,0))); background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,0) 100%); background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,0) 100%); background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(242,242,242,0) 100%); background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(242,242,242,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); } .booking-container .form-container .title { position: absolute; top: -13px; width: 100%; height: 34px; text-align: center; border: none; -webkit-border-radius: 17px 17px 0 0; -moz-border-radius: 17px 17px 0 0; border-radius: 17px 17px 0 0; } /* ========================================================================== 11. FOOTER. ============================================================================= */ /* ---- 11.1. footer Style 1 -------------- */ #to-top { position: fixed; border: 2px solid var(--color-bg); background: white; border-radius: 100%; right: 10px; bottom: -100px; z-index: 99999; overflow: auto; padding: 10px 12px 12px; font-size: 18px; line-height: 20px; cursor: pointer; -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } #social { position: fixed; right: 10px; bottom: 30%; z-index: 55; overflow: auto; padding: 12px 14px 14px; font-size: 18px; /*line-height: 10px;*/ cursor: pointer; -moz-transition: all .7s ease-in-out; -o-transition: all .7s ease-in-out; -webkit-transition: all .7s ease-in-out; transition: all .7s ease-in-out; } #footWrapper { clear: both; overflow: hidden; height: 100%; } .footer-top { overflow: hidden; padding: 32px 0 50px; border-bottom: 1px #0f0f0f solid; /*background: #0077ac;*/ background: var(--color-bg); /*color: #aaa;*/ color: #fff; } .footer-top a { color: #9E9E9E; } .footer-top a.btn { color: #fff; } .footer-top hr { clear: both; margin: 50px 15px; border-top: 1px #fff solid; } .footer-top h3 { position: relative; font-weight: bold; font-size: 15px; } .footer-top hr.hr-style5:before, .footer-top hr.hr-style5:after { background: #222; color: #3A3A3A; } /* ---- 11.2. footer Style 2 -------------- */ .footer-top-2 { border-top-width: 5px; border-top-style: solid; } .footer-top-2 .foot-logo { border-bottom: 1px solid #3a3a3a; height: 52px; margin: -8px auto 9px; text-align: center; } .footer-top-2 .social-list li a { margin: 0 6px 0 0; font-size: 17px; background: #494949; border-radius: 50%; width: 33px; text-align: center; display: inline-block; } .footer-top-2 .social-list li span { padding: 0 7px; color: #B5B5B5 } .footer-top-2 .social-list li:hover span { color: #fff } .footer-menu-inline { float: right; padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-size: 11px; } .footer-menu-inline li { display: inline-block; margin: 0 5px; } .footer-menu-inline li a { color: #777; transition: all linear 300ms; } .footer-menu-inline li a:hover, .footer-menu-center li a:hover { padding-bottom: 4px; } /* ---- 11.3. footer Style 3 -------------- */ .footer-bar { background: #000; font-size: 11px; padding-top: 30px; padding-bottom: 10px } .footer-bar-3 p { font-size: 20px; line-height: 40px; color: #B0B0B0; text-transform: none; } .footer-bar-3 a { color: #fff; position: relative; display: inline-block; vertical-align: bottom; text-transform: uppercase; overflow: hidden; } .footer-bar-3 a span { position: relative; display: block; font-size: 20px; padding: 0 7px; -webkit-transition: -webkit-transform 0.4s, background 0.4s; -moz-transition: -moz-transform 0.4s, background 0.4s; transition: transform 0.4s, background 0.4s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: -50% 50%; -moz-transform-origin: -50% 50%; transform-origin: -50% 50%; text-align: center } .footer-bar-3 a span::before { position: absolute; top: 0; left: 100%; width: 100%; height: 100%; content: attr(data-view); -webkit-transition: background 0.4s; -moz-transition: background 0.4s; transition: background 0.4s; -webkit-transform: rotateY(90deg); -moz-transform: rotateY(90deg); transform: rotateY(90deg); -webkit-transform-origin: -50% 50%; -moz-transform-origin: -50% 50%; transform-origin: -50% 50%; pointer-events: none; } .footer-bar-3 a:hover span, .footer-bar-3 a:focus span { background: #b53a2d; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); transform: rotateY(-90deg); } .footer-bar-3 .buyNow { border-left: 1px solid #322F2F; margin-top: -5px; } .footer-bar-3 .buyNow a { font-size: 20px; font-weight: 800 } .copyrights-center { text-align: center; } .footer-menu-center { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-size: 11px; } .footer-menu-center li { display: inline-block; margin: 0 5px; } .footer-menu-center li a { color: #777; transition: all linear 300ms; } .recent-posts-footer li { margin-bottom: 5px; padding: 6px 5px; border-bottom: 1px dotted #323232; overflow: hidden; } .recent-posts-footer li .post-img { float: left; margin-right: 10px; max-height: 70px; overflow: hidden; } .recent-posts-footer li .post-img img { padding: 1px; width: 40px; } .recent-posts-footer li h4 { overflow: hidden; margin-bottom: 3px; height: 18px; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .recent-posts-footer li .meta span { display: inline-block; margin-right: 10px; } .recent-posts-footer li .meta i { margin: 0 5px 0 0; } /* ---- 11.4. footer Style 4 -------------- */ .footer-top-4 { background: #424242 url('../images/patterns/bg16.png'); } .footer-top-4 p, .footer-top-4 ul.footer-menu a, .footer-top.footer-top-4 .footer-menu a:before { color: #ccc } .footer-top-4 ul.footer-menu a:hover, .footer-top.footer-top-4 .footer-menu a:hover:before { color: #fff } .footer-top-4 .foot-logo { height: 52px; text-align: center; } .footer-top-4 .copyrights, .footer-top-4 .footer-menu-inline { background: #1d1d1d; padding-right: 15px; padding-left: 15px } .footer-top-4 hr { border-top: 1px #1d1d1d solid; } .footer-top-4 .foot-logo { background-position: 0 0 } /******** footer menu ********/ .footer-top .footer-menu a { display: inline-block; padding: 7px 0; } .footer-top .footer-menu a:before { display: inline-block; margin-right: 7px; color: #5b5b5b; content: "\f105"; font-family: FontAwesome; } /******* Footer NewsLetters *******/ .foot-logo { height: 40px; margin: 0 auto 5px; text-align: center; } footer .NL { position: relative; overflow: hidden; padding: 10px 0; margin: auto 15px } footer .NL .input-box { margin-left: 10px; padding-left: 25px; width: 67%; border: 1px #3F3F3F solid; border-right: 0px; background: transparent none; color: #fff; font-size: 11px; } footer .NL .txt-box { /*color: #969696;*/ color: #fff; font-size: 11px } footer .NL:before { position: absolute; top: 16px; left: 24px; display: inline-block; color: #5C5C5C; content: "\f0e0"; font-family: FontAwesome; } footer .NL .NL-btn { background: #3F3F3F; color: #fff; } footer .NL .Notfication { display: none } footer .NL .Notfication p { color: #333; padding: 0 7px; font-size: 12px; width: 89%; line-height: normal; margin-top: -28px; display: inline-block; vertical-align: top; } footer .NL .Notfication .close-box { color: #333; } footer .no-margin { margin: 20px 20px 8px; text-align: center; font-size: 12px; } /******* footer Latest tweets *******/ .footer-top .tweet { position: relative; overflow: hidden } .footer-top .tweet .twitter-pic { float: left; margin: 3px 10px 0 0; } .footer-top .tweet .twitter-text { width: 80%; float: left; } .footer-top .tweet p { margin: 0 0 5px; font-size: 12px; line-height: 18px } /******* footer tags *******/ .footer-top .tags a { display: block; float: left; margin: 3px; padding: 8px 6px; background: #2C2C2C; color: #C4C4C4; font-size: 11px; } /******* footer tags *******/ .footer-contact { padding: 7px 0; } .footer-contact i { display: table-cell; padding: 0 12px 0 0; color: #6a6a6a; vertical-align: middle; font-size: 18px; } .footer-contact span { display: table-cell; } /******* Footer Flickr **********/ .footer-top .flickr-stream-w ul li a { height: 61px } .footer-top .flickr-stream-w ul li img, .footer-top .flickr-stream-w .img-overlay { width: 61px; height: 61px; } .footer-top .flickr-stream-w .img-overlay:before { font-size: 22px; line-height: 61px; height: 61px } .footer-top .flickr { height: 61px; display: block; overflow: hidden } /******* copyrights *******/ .copyrights { padding-top: 10px; padding-bottom: 10px; white-space: nowrap; font-size: 11px; } .copyrights a { color: #7C7C7C; text-decoration: underline; } .copyrights a:hover { text-decoration: none; } .footer-bottom { overflow: auto; padding: 15px 0; border-top: 1px #363636 solid; background: #1D1D1D; } /******* footer social list *******/ .social-list li { float: left; margin: 0 8px 0 0; font-size: 18px; } .social-list li a { display: block; padding: 0; color: #737373; } .social-list li span { display: block; text-align: center; line-height: 33px; padding: 0 9px } /*.social-list li a:hover { text-decoration: none; }*/ .hover_links_effect li a { margin: 0 6px 0 0; font-size: 17px; background: #494949; border-radius: 50%; width: 33px; text-align: center; display: inline-block; color: #B5B5B5; overflow: hidden; } .hover_links_effect li span { padding: 0 7px; -webkit-animation-duration: 300ms; animation-duration: 300ms; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .hover_links_effect li:hover span { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .footer-top-4 .hover_links_effect li a { background: #1d1d1d } .top-bar .social-list li span { line-height: 39px; } /* ========================================================================== 12. FIXED LAYOUT STYLES. ============================================================================= */ .pageWrapper.fixedPage { position: relative; margin: auto; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,0.2); } .bg1 { background: #fff url('../images/patterns/bg1.jpg'); } .bg2 { background: #fff url('../images/patterns/bg2.jpg'); } .bg3 { background: #fff url('../images/patterns/bg3.jpg'); } .bg4 { background: #fff url('../images/patterns/bg4.jpg'); } .bg5 { background: #fff url('../images/patterns/bg5.jpg'); } .bg6 { background: #fff url('../images/patterns/bg6.jpg'); } .bg7 { background: #fff url('../images/patterns/bg7.jpg'); } .bg8 { background: #fff url('../images/patterns/bg8.jpg'); } .bg9 { background: #fff url('../images/patterns/bg9.jpg'); } .bg10 { background: #fff url('../images/patterns/bg10.jpg'); } .bg11 { background: #fff url('../images/patterns/bg11.jpg'); } .bg12 { background: #fff url('../images/patterns/bg12.jpg'); } .bg13 { background: #fff url('../images/patterns/bg13.jpg'); } .bg14 { background: #fff url('../images/patterns/bg14.jpg'); } .bg15 { background: #fff url('../images/patterns/bg15.jpg'); } .bg11, .bg12, .bg13, .bg14, .bg15 { background-attachment: fixed !important; background-position: center bottom !important; -moz-background-size: !important; -o-background-size: !important; -webkit-background-size: !important; background-size: !important; background-repeat: no-repeat !important; } a.main-color:hover, .project-name:hover, .box-top .more-btn:hover { color: #333 !important } /************** Coming Soon Style **************/ #holder { margin: auto; display: table } .digits { margin: 80px auto 0; display: table } .digits span { padding: 18px 30px; border-radius: 5px; display: block; text-align: center; position: relative; height: 120px; -webkit-perspective: 500px; -moz-perspective: 500px; -ms-perspective: 500px; -o-perspective: 500px; perspective: 500px; background: url('../images/digits.png') no-repeat 0 0; background-size: 100% 100%; font-size: 55px; font-weight: 800; color: #fff } .digits li { float: left; margin: 0 10px; text-align: center; } .digits li p { color: #fff; font-size: 20px } .soon-top { margin-top: 80px } .large-paragraph { font-size: 27px; text-transform: uppercase; font-weight: lighter; margin: 40px auto 0 !important; line-height: normal } .soon-subscribe { font-size: 22px; font-weight: lighter; margin: 20px auto 30px !important; line-height: normal; text-align: center } .soon-inputs { margin-bottom: 80px } .soon-inputs input[type="text"] { height: 60px; padding: 15px 20px; border: 0px; background: #fff; min-width: 400px } .soon-inputs input[type="submit"] { height: 60px; padding: 15px 20px; border: 0px; margin-top: -3px; } /************* video bg **********/ .video-container { display: table; width: 100% } .home-video .YTPOverlay { display: none !important } .video-box { display: table-cell; vertical-align: middle; width: 100%; position: relative; height: 600px } .YTPOverlay { background: rgba(232,82,47,0.6); position: absolute; z-index: 555; top: 0; left: 0; width: 100%; height: 100% } .inner-video { position: absolute; z-index: 0; min-width: 100%; min-height: 100%; left: 0; top: 0; overflow: hidden; opacity: 1; height: 600px } .internal-video { height: 600px; overflow: hidden; position: relative } .video-frame { position: absolute; z-index: 0; top: 0; left: 0; overflow: hidden; opacity: 1; width: 2459.72px; height: 1171px; margin-top: -385.5px; margin-left: -278.36px; } .larg-socials { display: table; margin: 30px auto 0; } .larg-socials li { float: left; margin: 0 15px } .larg-socials li a { width: 66px; height: 66px; display: block; line-height: 66px; border: 2px #E4E4E4 solid; border-radius: 50%; position: relative; padding: 2px } .larg-socials li a i { width: 58px; height: 58px; display: block; line-height: 58px; color: #fff; font-size: 30px; text-align: center; border-radius: 50%; } .larg-socials li a:before { pointer-events: none; content: ''; position: absolute; border: #E4E4E4 solid 1px; top: -20px; right: -20px; bottom: -20px; left: -20px; opacity: 0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: top, right, bottom, left; -moz-transition-property: top, right, bottom, left; -o-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; border-radius: 50%; } .larg-socials li a:after { pointer-events: none; content: ''; position: absolute; border: #E4E4E4 solid 1px; top: -20px; right: -20px; bottom: -20px; left: -20px; opacity: 0; -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; -webkit-transition-property: top, right, bottom, left; -moz-transition-property: top, right, bottom, left; -o-transition-property: top, right, bottom, left; transition-property: top, right, bottom, left; border-radius: 50%; } .larg-socials li a:hover:before, .larg-socials li a:focus:before, .larg-socials li a:active:before { top: -6px; right: -6px; bottom: -6px; left: -6px; opacity: .3; } .larg-socials li a:hover:after, .larg-socials li a:focus:after, .larg-socials li a:active:after { top: -9px; right: -9px; bottom: -9px; left: -9px; opacity: .3; } .larg-socials li a:hover i { background-color: #fff; color: #e8522f; } .fa-hover > span { display: block; color: #222222; line-height: 35px; height: 35px; padding-left: 10px; border-radius: 4px; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; cursor: pointer } .fa-hover:hover > span { background: #777; color: #fff; } .fa-hover > span i { margin-right: 9px } .fa-hover:hover > span i { font-size: 28px; vertical-align: -6px; } /* ========================================================================== 13. Exception PopUp STYLES. ============================================================================= */ .ModalPopUp { width: 100%; height: 100%; background: rgba(44, 43, 43, 0.5); position: absolute; z-index: 999999; top: 0; left: 0; display: none; } .ModalContainer { width: 50%; height: 485px; display: block; margin: 25px auto; background: #fff; } .Modalheader { background: #f3f3f3; height: 31px; padding: 25px 10px; } .Modalheader h3 { margin-top: -8px; font-size: 20px; font-weight: bold; float: left; } .ModalContent { padding: 10px; height: 100%; } .CssContainer { padding: 10px; height: 370px; border: 1px solid #eee; cursor: text; overflow: auto; margin-bottom: 10px; background: #242424; color: #4EA90F; } .closePopup { display: block; width: 30px; height: 30px; float: right; background: #ddd; margin-top: -14px; border-radius: 50%; transition: all linear 0.3s; } .closePopup span { text-align: center; display: block; line-height: 30px; font-size: 15px; } .closePopup:hover { background-color: #e7512f; } .closePopup:hover span { color: #fff; } .errorSelect { border-color: #f2b1b4; background: #f1d5d6; display: none; width: 100%; padding: 5px; text-align: center; color: #9D1E1E; margin-top: 12px; } .Newsslider .slick-prev, .Newsslider .slick-next { background: rgba(119,119,119,.23); } #fowd, iframe[src="about:blank"], .nicescroll-rails { display: none !important; } .errCap { position: absolute; font-weight: normal; color: #fff; background: #f00; white-space: nowrap; z-index: 9; padding: 13px; left: 94%; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .errCap:before { width: 0; height: 0; border-style: solid; border-width: 5px 5px 5px 0; border-color: transparent #f00 transparent transparent; position: absolute; left: -5px; top: 16px; content: "" } /**** version 1 customizations ******/ .top-nav-style3 .top-nav > ul li a:hover i, .top-nav-style3 .top-nav > ul li.selected a i, .top-nav-style3 .top-nav > ul li.current a i { color: #C2C2C2 } .top-nav-style3 .mega-menu .div-mega, .head-style2 .mega-menu .div-mega, .nav-4 .mega-menu .div-mega { top: 50px } .head-style2 .right-bar { margin: 2px 5px 4px 0; } .head-style2 .bg-head2 { bottom: 0px; } .sticky .top-nav-style3 .mega-menu .div-mega { top: 50px !important } .nav-4 .top-nav > ul > li > a i { display: none; } .masonry.nobar .post-image { max-height: 160px; } /*NEW DESIGN*/ .post-image a .mask { /*top:3px*/ } .news-masnory .gallery li { margin: 0 1px 1px 0 !important; } img { vertical-align: middle } header.top-head .logo a { margin-right: 0; margin-left: 0 } header.top-head.top-head-4 .logo a, .head-style2 header.top-head .logo a, .head-style3 header.top-head .logo a { margin-left: auto; margin-right: auto } .portfolio-filterable.full { padding: 0 15px } .top-nav > ul ul li a i { margin-right: 8px; font-size: 13px; } .portfolio-lft-txt { max-height: 137px } #message { margin: 0 } /**** new in version 2 *****/ .img-holder .slick-list { margin: 0 !important } .img-over.full-hover { top: 0; left: 0; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); width: 100%; height: 100% } .img-over.full-hover .zoom { top: 0; left: 0 } .img-over.full-hover .zoom b { top: 50% !important; left: 50% !important; -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); margin-top: -15px; margin-left: -15px } /****** white sub menu ***********/ .sub-menu-white.top-nav > ul li ul li, .sub-menu-dark.top-nav > ul li ul li { -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .sub-menu-white.top-nav > ul li ul li:first-child, .sub-menu-dark.top-nav > ul li ul li:first-child { border-top-width: 4px; border-top-style: solid } .sub-menu-white.top-nav > ul li ul li { border-bottom-color: #f2f2f2 } .sub-menu-white.top-nav > ul li ul li a { background: #fff; color: #777; } .sub-menu-white.top-nav li li.selected > a, .sub-menu-white.top-nav li li.current > a { background: #f2f2f2 !important; color: #777 !important; } .sub-menu-white.top-nav > ul li ul li a:hover { background: #f2f2f2 !important; } .sub-menu-white.top-nav li li.hasChildren:after, .sub-menu-white.top-nav > ul ul li a i { color: #C5C5C5 } .sub-menu-white .div-mega { background-color: #fff; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); border-top-width: 4px; border-top-style: solid; } .sub-menu-dark .div-mega { background-color: #333; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); border-top-width: 4px; border-top-style: solid; } .sub-menu-white.top-nav .div-mega ul li:first-child, .sub-menu-dark.top-nav .div-mega ul li:first-child { border-top-width: 0; } .sub-menu-white.top-nav .div-mega h4 { background: #eee } .sub-menu-dark.top-nav .div-mega h4 { background: #111; color: #999 } .sub-menu-white.top-nav .div-mega ul li, .sub-menu-dark.top-nav .div-mega ul li { -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .div-mega h4 { padding: 12px 15px !important; font-size: 12px; text-transform: uppercase; border-radius: 3px } /********** dark sub menu **********/ .sub-menu-dark.top-nav > ul li ul li { border-bottom-color: #3f3f3f } .sub-menu-dark.top-nav > ul li ul li a { background: #333; color: #ddd; } .sub-menu-dark.top-nav li li.selected > a, .sub-menu-dark.top-nav li li.current > a { background: #444 !important; color: #ddd !important; } .sub-menu-dark.top-nav > ul li ul li a:hover { background: #3f3f3f !important; } .sub-menu-dark.top-nav li li.hasChildren:after, .sub-menu-dark.top-nav > ul ul li a i { color: #7F7F7F } /************ page titles **********/ .title-minimal, .title-5 { background: #EFEFEF; } .title-minimal .container { position: relative; padding-top: 20px; padding-bottom: 20px } .title-minimal .breadcrumbs { background: transparent; position: absolute; bottom: 0; right: 0; left: auto; margin: 0; } .title-minimal .line-separate { color: #A5A5A5 !important; } .title-minimal .breadcrumbs * { color: #A5A5A5; font-size: 11px; } .title-minimal .breadcrumbs a:hover { color: #A5A5A5; } .title-minimal h1 { font-size: 30px } .title-2.center-title .container, .title-3.center-title .container, .title-4.center-title .container { position: relative; padding-bottom: 50px } .title-2.center-title .breadcrumbs, .title-3.center-title .breadcrumbs, .title-4.center-title .breadcrumbs, .title-5 .breadcrumbs { position: absolute; bottom: 0; right: 0; left: auto; margin: 0 } .title-2.center-title .inner-title, .title-3.center-title .inner-title, .title-4.center-title .inner-title { display: table; width: auto; margin: auto; float: none; } .center-title.title-4 h1 { display: table; margin: 20px auto 5px; float: none } .title-5 .container { position: relative; padding-top: 20px; padding-bottom: 20px; } .title-5 .inner-title { display: table-cell; vertical-align: middle } .page-title.video-container { overflow: hidden; position: relative; z-index: 1 } .page-title .highInd { z-index: 99999 !important } .page-title .YTPOverlay { background: rgba(0,0,0,.3); } /********** light footer **********/ .light-footer .footer-bar { background: #E7E7E7; border-bottom: 1px #ddd solid; } .light-footer .footer-bar-3 .buyNow { border-left: 1px solid #FFFFFF; } .light-footer .footer-top { border-bottom: 1px #D0D0D0 solid; background: #EFEFEF; color: #808080; border-top: 1px #fff solid; color: #999; } .light-footer .footer-top a { color: #575757; } .light-footer .footer-bottom { border-top: 1px #FFFFFF solid; background: #fff; } .light-footer .footer-top .block-head { border-bottom-color: #fff; color: #fff; } .light-footer .hover_links_effect li a { background: #DDDDDD; color: #777; } .light-footer .recent-posts-footer li { border-bottom: 1px dotted #D5D5D5; } .light-footer .footer-top .tags a { background: #E5E5E5 } .light-footer .footer-top hr { border-top: 1px #DBDBDB solid; } .light-footer .footer-top hr.hr-style5:before, .light-footer .footer-top hr.hr-style5:after { background: #EFEFEF; color: #D5D5D5; } .light-footer .NL .NL-btn { background: #D8D8D8; color: #474747; } .light-footer .NL .input-box { border: 1px #D8D8D8 solid; } .light-footer .NL:before { top: 17px; color: #CDCDCD; } .minimal-foot.footer-bottom .social-list a { text-decoration: none; } .minimal-foot { padding: 30px 0; background: #323232 } .minimal-foot .footer-menu-inline { margin-top: 45px } /********** headers ************/ .left-side-wrap { margin-left: 260px; position: relative } .right-side-wrap { margin-right: 260px; position: relative } .left-side-header, .right-side-header { position: fixed; left: 0; top: 0; width: 260px; height: 100%; background: #fff; -webkit-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); box-shadow: 3px 0px 5px 0px rgba(50, 50, 50, 0.25); z-index: 5; overflow: auto } .right-side-header { left: auto; right: 0; -webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.25); box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.25); } .left-side-header header.top-head, .right-side-header header.top-head { border-bottom: 0; padding: 70px 0 } .left-side-header .search-box-side, .right-side-header .search-box-side { display: block; position: relative; margin: 30px 20px; overflow: hidden } .left-side-header .input-box, .right-side-header .input-box { border-right: 0; margin-right: -15px; border-top-left-radius: 2em; border-bottom-left-radius: 2em; } .left-side-header .search-box-side input[type=text], .right-side-header .search-box-side input[type=text] { width: 190px; height: 33px; font-size: 10px; } .left-side-header .search-box-side input[type=submit], .right-side-header .search-box-side input[type=submit] { width: 35px; height: 35px; padding: 0 5px; font-size: 10px; border-radius: 50%; } .left-side-header header.top-head .logo a, .right-side-header header.top-head .logo a { margin: auto } .side-nav { padding: 30px 0 10px } .side-nav > ul > li { position: relative; margin: 0; padding: 0 20px; } .side-nav > ul > li > a:hover i, .side-nav > ul > li.current > a i, .side-nav > ul > li.selected > a i { margin-top: 5px; } .side-nav > ul > li > a { display: block; padding: 0 17px; height: 50px; text-transform: uppercase; overflow: hidden; line-height: 50px; border-bottom: 1px #eee solid; } .side-nav > ul > li > a:hover { color: #777 } .side-nav > ul > li.current > a { color: #333; font-weight: bold } .side-nav > ul > li > ul li.current > a { background: rgba(255,255,255,.15) } .side-nav > ul li a i { color: #b8b8b8 !important; font-size: 16px; margin-right: 10px } .side-nav > ul li a:hover i { color: #777 !important } .side-nav > ul li a:hover i, .side-nav > ul li.selected a i, .side-nav > ul li.current a i { color: #fff; } .side-nav > ul li ul { position: static; min-width: 220px; display: none; } .side-nav > ul > li > ul li { position: relative; float: none; margin: 0; padding: 0; line-height: 35px; border-bottom: 1px rgba(255,255,255,.15) solid } .side-nav > ul > li > ul li a:hover { background: rgba(255,255,255,.15) } .side-nav ul ul li.hasChildren { background: rgba(0,0,0,.1) } .side-nav li li a { display: block; overflow: hidden; padding: 0 15px !important; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 40px !important; color: #fff } .side-nav li.hasChildren:after { position: absolute; top: 15px; right: 30px; display: inline-block; color: #777; content: "\f107"; font-family: FontAwesome; -moz-transition: transform 0.3s linear; -o-transition: transform 0.3s linear; -webkit-transition: transform 0.3s linear; transition: transform 0.3s linear; } .side-nav li.hasChildren:hover:after { -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } .side-nav li li.hasChildren:after { top: 2px; right: 10px; color: #fff; } .side-nav li li a:hover, .side-nav li li.selected > a, .side-nav li li.current > a { text-decoration: none; } .side-nav .div-mega { position: static; padding-top: 0; -webkit-box-shadow: inset 0 0 0 0 rgba(0,0,0,0); -moz-box-shadow: inset 0 0 0 0 rgba(0,0,0,0); box-shadow: inset 0px 0 0 0 rgba(0,0,0,0); display: none } .side-nav .div-mega .div-mega-section { float: none; width: 100%; margin: 0 } .side-nav .div-mega .div-mega-section h4 { margin: 0; border-radius: 0; background: rgba(0,0,0,.1); color: #fff } .side-nav .div-mega .div-mega-section ul { display: block; } .side-nav .div-mega .div-mega-section ul li { border-bottom: 1px rgba(255,255,255,.15) solid; } .side-nav .div-mega .div-mega-section ul li a:hover { background: rgba(255,255,255,.15); } /*** sub menu level more than 2 ***/ .side-head-block { margin: 20px; } .side-head-block ul.blocks li { display: block; float: none; font-size: 12px; padding: 8px 0; border-bottom: 1px #ECECEC solid } .side-head-block ul.social-list { display: table; margin: auto } .side-head-block ul.blocks li a, .side-head-block ul.blocks li span { font-size: 12px; } .side-head-block ul.blocks li i { margin-right: 8px } .nicescroll-rails { display: block !important } /********* menu updates *********/ .top-nav > ul li ul { height: auto; max-height: none; display: none } .top-nav > ul > li > ul > li { opacity: 1; -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } /*** sub menu level more than 2 ***/ .top-nav ul li li li { opacity: 1; -moz-transform: rotateX(0deg); -ms-transform: rotateX(0deg); -o-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); transform: rotateX(0deg); } .top-nav ul li li > ul { height: auto; } /******** default effect ***********/ .top-nav > ul.def-effect li ul { height: 0; max-height: 0; display: block; opacity: 0; visibility: hidden } .top-nav > ul.def-effect > li > ul > li { opacity: 0; -moz-transform: rotateY(90deg); -ms-transform: rotateY(90deg); -o-transform: rotateY(90deg); -webkit-transform: rotateY(90deg); transform: rotateY(90deg); } .top-nav > ul.def-effect > li:hover > ul { z-index: 0; height: auto; max-height: none; } .top-nav > ul.def-effect li:hover > ul { height: auto; max-height: none; opacity: 1; visibility: visible } .top-nav > ul.def-effect > li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } /*** sub menu level more than 2 ***/ .top-nav ul.def-effect li li li { opacity: 0; -moz-transform: rotateX(90deg); -ms-transform: rotateX(90deg); -o-transform: rotateX(90deg); -webkit-transform: rotateX(90deg); transform: rotateX(90deg); } .top-nav ul.def-effect li li > ul { height: 0; } .top-nav ul.def-effect li li:hover > ul { height: auto; } .top-nav ul.def-effect li li:hover > ul > li { opacity: 1; -moz-transform: none; -ms-transform: none; -o-transform: none; -webkit-transform: none; transform: none; } .top-nav.mega-menu ul div.div-mega ul { height: 100%; max-height: none; display: block; opacity: 1; visibility: visible } /**********/ .top-nav > ul li a span { position: relative } .top-nav > ul li a span .menu-hint { position: absolute; top: -12px; right: -12px; left: auto } .nav-2 .top-nav > ul > li > a span .menu-hint { top: 26px } .menu-hint { font-size: 9px; position: relative; top: -5px; left: 3px; padding: 1px 4px; background: #777; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; color: #fff; } .menu-hint.success { background-color: #5cb85c; } .menu-hint.success:hover { background-color: #449d44; } .menu-hint.info { background-color: #5bc0de; } .menu-hint.info:hover { background-color: #31b0d5; } .menu-hint.warning { background-color: #f0ad4e; } .menu-hint.warning:hover { background-color: #ec971f; } .menu-hint.error { background-color: #d9534f; } .menu-hint.error:hover { background-color: #c9302c; } /****** blog time line ***********/ .post-icon { width: 40px; height: 40px; line-height: 39px; position: absolute; top: 0; left: 0; z-index: 999; text-align: center; font-size: 15px; -webkit-box-shadow: 1px 1px 5px 0px rgba(61, 61, 61, 0.55); -moz-box-shadow: 1px 1px 5px 0px rgba(61, 61, 61, 0.55); box-shadow: inset 2px 1px 6px 1px rgba(61, 61, 61, 0.55); border-top-left-radius: 3px; } .post-icon:before { position: absolute; right: 0; bottom: 0; width: 0px; height: 0px; border-style: solid; border-width: 0 0 10px 10px; border-color: transparent transparent #ffffff transparent; content: ""; display: inline-block; } .timeline-cell .details-img:after, .timeline-cell .post-image:after { display: none } .blog-timeline { margin-bottom: 30px } .blog-timeline .meta-date { display: none } .blog-timeline .timeline-left:before { display: inline-block; width: 0; position: absolute; left: 39px; height: 100%; content: " "; border-left: 1px #ddd dashed } .timeline-left .timeline-cell { margin: 0 0 30px 83px; position: relative; } .timeline-left .timeline_date { position: absolute; width: 117px; top: 25px; left: -79px; } .timeline-left .timeline_date:before { display: inline-block; height: 3px; position: absolute; top: 50%; width: 38%; content: " "; left: 36px; background: #ddd; z-index: 0; } /* right timeline */ .blog-timeline .timeline-right:before { display: inline-block; width: 0; position: absolute; right: 30px; height: 100%; content: " "; /*NEW DESIGN*/ /*border-right: 1px #ddd dashed*/ } .timeline-right .timeline-cell { margin: 0 83px 30px 0; position: relative; } .timeline-right .timeline_date { position: absolute; width: 100px; top: 25px; right: -117px; } .timeline-right .timeline_date:before { display: inline-block; height: 3px; position: absolute; top: 50%; width: 48%; content: " "; right: 70px; background: #ddd; z-index: 0; } .timeline-cell .post-item { padding: 5px; -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1); border: 1px #ddd solid; border-radius: 3px; } .timeline-cell .post-info h2 { text-align: center; } .timeline-cell .post-meta { border-bottom-width: 0 !important; display: table; margin: auto; max-width: 94% } .timeline-cell .cont { display: none } .timeline-cell .post-content p { padding: 0 15px 15px } .timeline-right { margin: 0 } .timeline-left { margin: 0 } .inner_date { width: 70px; height: 70px; text-align: center; background: #fff; border: 4px #ddd solid; -webkit-border-radius: 50%; border-radius: 50%; display: block; padding: 3px 0 0; position: relative; z-index: 2 } .inner_date .day { font-size: 30px; display: block } .inner_date .month { margin-top: -11px; display: block; } .timeline_date .year { position: absolute; top: 59px; font-size: 11px; border-radius: 50%; width: 40px; height: 40px; text-align: center; line-height: 40px; left: 15px; z-index: 5 } .timeline_no_bar.blog-timeline:before { display: inline-block; width: 0; position: absolute; left: 50%; height: 100%; content: " "; border-left: 1px #ddd dashed; margin-left: -1px; z-index: 0; } .timeline_no_bar .timeline-cell { margin: 0 0 30px 83px; position: relative; } .timeline_no_bar .timeline_date { position: absolute; width: 117px; top: 25px; } .timeline_no_bar .timeline_date:before { display: inline-block; height: 3px; position: absolute; top: 50%; width: 50%; content: " "; left: 12px; background: #ddd; z-index: -1; } .timeline_no_bar .blog-timeline:before { display: inline-block; width: 0; position: absolute; left: 50%; margin-left: -1px; height: 96.5%; content: " "; border-left: 1px #ddd dashed } .timeline_no_bar .timeline-cell { width: 41.7%; margin: 0 15px 30px; float: left; position: relative; } .timeline_no_bar .timeline-cell:nth-child(odd) { float: left; } .timeline_no_bar .timeline-cell:nth-child(2n+3) { clear: both; } .timeline_no_bar .timeline-cell:nth-child(even) { float: right; margin-bottom: 0; margin-top: 50px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date { left: -105px; top: 130px; } .timeline_no_bar .side-timeline .timeline-cell:nth-child(even) .timeline_date { left: -92px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date:before { right: 12px; left: auto; } .timeline_no_bar .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date { right: auto; top: 155px; } .timeline_no_bar .timeline-cell:nth-child(odd) .timeline_date { right: -104px; } .timeline_no_bar .side-timeline .timeline-cell:nth-child(odd) .timeline_date { right: -143px; } .timeline_no_bar .timeline-cell:nth-child(odd) .timeline_date .inner_date { float: right; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date .year { left: 14px; } .timeline_no_bar .year { left: 62px } .timeline_no_bar .timeline-cell .post-item { min-height: 250px } .timeline-left .cont, .timeline-right .cont { display: block; padding: 15px; } .sticky-post .post-item { border: 1px #E7E7E7 solid; border-radius: 3px; padding: 15px; background: #f4f4f4; } .post-gallery { display: table; margin: auto } .gallery-columns-5 .gallery-item { width: 19%; } .gallery-item { float: left; margin: 0 1px 1px 0; position: relative; overflow: hidden } .gallery-caption { background-color: rgba(0,0,0,.7); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #fff; font-size: 12px; line-height: 1.5; margin: 0; max-height: 50%; opacity: 0; padding: 6px 8px; position: absolute; bottom: 0; left: 0; text-align: left; width: 100%; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; } .gallery-item:hover .gallery-caption { opacity: 1 } /******** shortcodes in version 2 *********/ .accordion.style-2 h3 a, .accordion.style-2 h3 u { border: 0 } .accordion.style-2 h3 a { line-height: 37px; background: transparent } .accordion.style-2 li > h3 u { float: right; margin: 13px 10px 0; padding: 0px; background: transparent !important; color: #A8A8A8 !important; font-size: 12px; } .accordion.style-2 h3 { border: 1px #ddd solid; border-radius: 3px } .accordion.style-2 li.active h3 { background: #f1f1f1 } .accordion.style-2 .accordion-panel { margin: 15px 0; padding: 0 5px; border-left: 0; } /****** Buttons ************/ .btn { border-radius: 3px; /*padding:9px 12px*/ } .btn-lg { padding: 12px 18px; font-size: 18px; line-height: 1.33; } .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-xs { padding: 1px 5px; font-size: 12px; line-height: 1.5; border-radius: 3px; } .btn-square { border-radius: 0; } .btn-square_outlined { border-radius: 0; background: none !important; border: 2px solid; text-shadow: none !important; } .btn-round { border-radius: 25px; } .btn-outlined { background: none !important; border: 2px solid; text-shadow: none !important; } .btn-skew { -moz-transform: skew(-20deg, 0) !important; -ms-transform: skew(-20deg, 0) !important; -o-transform: skew(-20deg, 0) !important; -webkit-transform: skew(-20deg, 0) !important; transform: skew(-20deg, 0) !important; margin: 0 10px; } .btn-skew span { -moz-transform: skew(20deg, 0) !important; -ms-transform: skew(20deg, 0) !important; -o-transform: skew(20deg, 0) !important; -webkit-transform: skew(20deg, 0) !important; transform: skew(20deg, 0) !important; } .btn-blue { background-color: #5472d2; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-blue:hover { background-color: #3c5ecc; color: #f7f7f7 !important; } .btn-blue.btn-outlined, .btn-blue.btn-square_outlined { color: #5472d2 !important; border-color: #5472d2; } .btn-blue.btn-3d { -webkit-box-shadow: 0 5px 0 #3253bc; box-shadow: 0 5px 0 #3253bc; margin-bottom: 5px; } .btn-turquoise { background-color: #00c1cf; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-turquoise:hover { background-color: #00a4b0; color: #f7f7f7 !important; } .btn-turquoise.btn-outlined, .btn-turquoise.btn-square_outlined { color: #00c1cf !important; border-color: #00c1cf; } .btn-turquoise.btn-3d { -webkit-box-shadow: 0 5px 0 #008d97; box-shadow: 0 5px 0 #008d97; margin-bottom: 5px; } .btn-pink { background-color: #fe6c61; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-pink:hover { background-color: #fe5043; color: #f7f7f7 !important; } .btn-pink.btn-outlined, .btn-pink.btn-square_outlined { color: #fe6c61 !important; border-color: #fe6c61; } .btn-default.btn-outlined, .btn-default.btn-square_outlined { color: #777 !important; border-color: #777; } .btn-default.btn-outlined:hover, .btn-default.btn-square_outlined:hover { background-color: #e6e6e6 !important; } .btn-pink.btn-3d { -webkit-box-shadow: 0 5px 0 #fe3829; box-shadow: 0 5px 0 #fe3829; margin-bottom: 5px; } .btn-default.btn-3d { -webkit-box-shadow: 0 5px 0 #555; box-shadow: 0 5px 0 #555; margin-bottom: 5px; } .btn-default.btn-3d:hover { -webkit-box-shadow: 0 5px 0 #666; box-shadow: 0 5px 0 #666; background: #767676; border-color: #6B6B6B; color: #fff; } .btn-violet { background-color: #8d6dc4; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-violet:hover { background-color: #7c57bb; color: #f7f7f7 !important; } .btn-violet.btn-outlined, .btn-violet.btn-square_outlined { color: #8d6dc4 !important; border-color: #8d6dc4; } .btn-violet.btn-3d { -webkit-box-shadow: 0 5px 0 #6e48b1; box-shadow: 0 5px 0 #6e48b1; margin-bottom: 5px; } .btn-peacoc { background-color: #4cadc9; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-peacoc:hover { background-color: #39a0bd; color: #f7f7f7 !important; } .btn-peacoc.btn-outlined, .btn-peacoc.btn-square_outlined { color: #4cadc9 !important; border-color: #4cadc9; } .btn-peacoc.btn-3d { -webkit-box-shadow: 0 5px 0 #338faa; box-shadow: 0 5px 0 #338faa; margin-bottom: 5px; } .btn-chino { background-color: #cec2ab; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-chino:hover { background-color: #c3b498; color: #f7f7f7 !important; } .btn-chino.btn-outlined, .btn-chino.btn-square_outlined { color: #cec2ab !important; border-color: #cec2ab; } .btn-chino.btn-3d { -webkit-box-shadow: 0 5px 0 #b9a888; box-shadow: 0 5px 0 #b9a888; margin-bottom: 5px; } .btn-mulled_wine { background-color: #50485b; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-mulled_wine:hover { background-color: #413a4a; color: #f7f7f7 !important; } .btn-mulled_wine.btn-outlined, .btn-mulled_wine.btn-square_outlined { color: #50485b !important; border-color: #50485b; } .btn-mulled_wine.btn-3d { -webkit-box-shadow: 0 5px 0 #342f3c; box-shadow: 0 5px 0 #342f3c; margin-bottom: 5px; } .btn-vista_blue { background-color: #75d69c; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-vista_blue:hover { background-color: #5dcf8b; color: #f7f7f7 !important; } .btn-vista_blue.btn-outlined, .btn-vista_blue.btn-square_outlined { color: #75d69c !important; border-color: #75d69c; } .btn-vista_blue.btn-3d { -webkit-box-shadow: 0 5px 0 #4ac97d; box-shadow: 0 5px 0 #4ac97d; margin-bottom: 5px; } .btn-black { background-color: #2a2a2a; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-black:hover { background-color: #444; color: #f7f7f7 !important; } .btn-black.btn-outlined, .btn-black.btn-square_outlined { color: #2a2a2a !important; border-color: #2a2a2a; } .btn-black.btn-3d { -webkit-box-shadow: 0 5px 0 #595959; box-shadow: 0 5px 0 #595959; margin-bottom: 5px; } .btn-grey { background-color: #ebebeb; color: #666666 !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-shadow: none !important; } .btn-grey:hover { background-color: #dcdcdc; color: #5e5e5e !important; } .btn-grey.btn-outlined, .btn-grey.btn-square_outlined { color: #ebebeb !important; border-color: #ebebeb; } .btn-grey.btn-3d { -webkit-box-shadow: 0 5px 0 #cfcfcf; box-shadow: 0 5px 0 #cfcfcf; margin-bottom: 5px; } .btn-orange { background-color: #f7be68; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-orange:hover { background-color: #f5b14b; color: #f7f7f7 !important; } .btn-orange.btn-outlined, .btn-orange.btn-square_outlined { color: #f7be68 !important; border-color: #f7be68; } .btn-orange.btn-3d { -webkit-box-shadow: 0 5px 0 #f4a733; box-shadow: 0 5px 0 #f4a733; margin-bottom: 5px; } .btn-sky { background-color: #5aa1e3; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-sky:hover { background-color: #4092df; color: #f7f7f7 !important; } .btn-sky.btn-outlined, .btn-sky.btn-square_outlined { color: #5aa1e3 !important; border-color: #5aa1e3; } .btn-sky.btn-3d { -webkit-box-shadow: 0 5px 0 #2a86db; box-shadow: 0 5px 0 #2a86db; margin-bottom: 5px; } .btn-green { background-color: #6dab3c; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-green:hover { background-color: #5f9434; color: #f7f7f7 !important; } .btn-green.btn-outlined, .btn-green.btn-square_outlined { color: #6dab3c !important; border-color: #6dab3c; } .btn-green.btn-3d { -webkit-box-shadow: 0 5px 0 #53812d; box-shadow: 0 5px 0 #53812d; margin-bottom: 5px; } .btn-juicy_pink { background-color: #f4524d; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-juicy_pink:hover { background-color: #f23630; color: #f7f7f7 !important; } .btn-juicy_pink.btn-outlined, .btn-juicy_pink.btn-square_outlined { color: #f4524d !important; border-color: #f4524d; } .btn-juicy_pink.btn-3d { -webkit-box-shadow: 0 5px 0 #f11f18; box-shadow: 0 5px 0 #f11f18; margin-bottom: 5px; } .btn-sandy_brown { background-color: #f79468; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-sandy_brown:hover { background-color: #f57f4b; color: #f7f7f7 !important; } .btn-sandy_brown.btn-outlined, .btn-sandy_brown.btn-square_outlined { color: #f79468 !important; border-color: #f79468; } .btn-sandy_brown.btn-3d { -webkit-box-shadow: 0 5px 0 #f46e33; box-shadow: 0 5px 0 #f46e33; margin-bottom: 5px; } .btn-purple { background-color: #b97ebb; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-purple:hover { background-color: #ae6ab0; color: #f7f7f7 !important; } .btn-purple.btn-outlined, .btn-purple.btn-square_outlined { color: #b97ebb !important; border-color: #b97ebb; } .btn-purple.btn-3d { -webkit-box-shadow: 0 5px 0 #a559a8; box-shadow: 0 5px 0 #a559a8; margin-bottom: 5px; } .btn-white { background-color: #ffffff; color: #666666 !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; text-shadow: none !important; } .btn-white:hover { background-color: #f0f0f0; color: #5e5e5e !important; } .btn-white.btn-outlined, .btn-white.btn-square_outlined { color: #ffffff !important; border-color: #ffffff; } .btn-white.btn-3d { -webkit-box-shadow: 0 5px 0 #e3e3e3; box-shadow: 0 5px 0 #e3e3e3; margin-bottom: 5px; } .btn-grace { background-color: #aed13b; color: #ffffff !important; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .btn-grace:hover { background-color: #9ec02d; color: #f7f7f7 !important; } .btn-grace.btn-outlined, .btn-grace.btn-square_outlined { color: #aed13b !important; border-color: #aed13b; } .btn-grace.btn-3d { -webkit-box-shadow: 0 5px 0 #8dac28; box-shadow: 0 5px 0 #8dac28; margin-bottom: 5px; } .btn-default { color: #7d7d7d; background-color: #ffffff; border-color: transparent; } .btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #7d7d7d; background-color: #e6e6e6; border-color: rgba(0, 0, 0, 0); } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default .badge { color: #ffffff; background-color: #7d7d7d; } .btn-primary { color: #ffffff; background-color: #00aef0; border-color: transparent; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #ffffff; background-color: #0089bd; border-color: rgba(0, 0, 0, 0); } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary .badge { color: #00aef0; background-color: #ffffff; } .btn-success { color: #ffffff; background-color: #5cb85c; border-color: transparent; /*transform:*/ } .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #ffffff; background-color: #449d44; border-color: rgba(0, 0, 0, 0); } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background-image: none; } .btn-success .badge { color: #5cb85c; background-color: #ffffff; } .btn-info { color: #ffffff; background-color: #5bc0de; border-color: transparent; } .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: #ffffff; background-color: #31b0d5; border-color: rgba(0, 0, 0, 0); } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; } .btn-info .badge { color: #5bc0de; background-color: #ffffff; } .btn-warning { color: #ffffff; background-color: #f0ad4e; border-color: transparent; } .btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: #ffffff; background-color: #ec971f; border-color: rgba(0, 0, 0, 0); } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background-image: none; } .btn-warning .badge { color: #f0ad4e; background-color: #ffffff; } .btn-danger { color: #ffffff; background-color: #d9534f; border-color: transparent; } .btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #ffffff; background-color: #c9302c; border-color: rgba(0, 0, 0, 0); } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-image: none; } .btn-danger .badge { color: #d9534f; background-color: #ffffff; } i.icon { display: inline-block; width: 16px; height: 16px; line-height: 16px; vertical-align: text-top; margin-left: 5px; } .btn-default { color: #fff !important; background-color: #777 !important; border-color: transparent; } .btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { color: #333; background-color: #e6e6e6; border-color: #adadad; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; } .btn-default .badge { color: #fff; background-color: #333; } .btn-border { color: #fff; background-color: transparent; border: 1px #fff solid; } .btn-border:hover, .btn-border:focus, .btn-border.focus, .btn-border:active, .btn-border.active { color: #ddd; background-color: transparent; border-color: #ddd; } .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default { background-image: none; } .btn-default.disabled, .btn-default[disabled], fieldset[disabled] .btn-default, .btn-default.disabled:hover, .btn-default[disabled]:hover, fieldset[disabled] .btn-default:hover, .btn-default.disabled:focus, .btn-default[disabled]:focus, fieldset[disabled] .btn-default:focus, .btn-default.disabled.focus, .btn-default[disabled].focus, fieldset[disabled] .btn-default.focus, .btn-default.disabled:active, .btn-default[disabled]:active, fieldset[disabled] .btn-default:active, .btn-default.disabled.active, .btn-default[disabled].active, fieldset[disabled] .btn-default.active { background-color: #fff; border-color: #ccc; } .btn-default .badge { color: #fff; background-color: #333; } .btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { color: #fff; background-color: #286090; border-color: #204d74; } .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-image: none; } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary.disabled:hover, .btn-primary[disabled]:hover, fieldset[disabled] .btn-primary:hover, .btn-primary.disabled:focus, .btn-primary[disabled]:focus, fieldset[disabled] .btn-primary:focus, .btn-primary.disabled.focus, .btn-primary[disabled].focus, fieldset[disabled] .btn-primary.focus, .btn-primary.disabled:active, .btn-primary[disabled]:active, fieldset[disabled] .btn-primary:active, .btn-primary.disabled.active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary.active { background-color: #337ab7; border-color: #2e6da4; } .btn-primary .badge { color: #337ab7; background-color: #fff; } .btn-success { color: #fff; background-color: #5cb85c; border-color: #4cae4c; } .btn-success:hover, .btn-success:focus, .btn-success.focus, .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { color: #fff; background-color: #449d44; border-color: #398439; } .btn-success:active, .btn-success.active, .open > .dropdown-toggle.btn-success { background-image: none; } .btn-success.disabled, .btn-success[disabled], fieldset[disabled] .btn-success, .btn-success.disabled:hover, .btn-success[disabled]:hover, fieldset[disabled] .btn-success:hover, .btn-success.disabled:focus, .btn-success[disabled]:focus, fieldset[disabled] .btn-success:focus, .btn-success.disabled.focus, .btn-success[disabled].focus, fieldset[disabled] .btn-success.focus, .btn-success.disabled:active, .btn-success[disabled]:active, fieldset[disabled] .btn-success:active, .btn-success.disabled.active, .btn-success[disabled].active, fieldset[disabled] .btn-success.active { background-color: #5cb85c; border-color: #4cae4c; } .btn-success .badge { color: #5cb85c; background-color: #fff; } .btn-info { color: #fff; background-color: #5bc0de; border-color: #46b8da; } .btn-info:hover, .btn-info:focus, .btn-info.focus, .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { color: #fff; background-color: #31b0d5; border-color: #269abc; } .btn-info:active, .btn-info.active, .open > .dropdown-toggle.btn-info { background-image: none; } .btn-info.disabled, .btn-info[disabled], fieldset[disabled] .btn-info, .btn-info.disabled:hover, .btn-info[disabled]:hover, fieldset[disabled] .btn-info:hover, .btn-info.disabled:focus, .btn-info[disabled]:focus, fieldset[disabled] .btn-info:focus, .btn-info.disabled.focus, .btn-info[disabled].focus, fieldset[disabled] .btn-info.focus, .btn-info.disabled:active, .btn-info[disabled]:active, fieldset[disabled] .btn-info:active, .btn-info.disabled.active, .btn-info[disabled].active, fieldset[disabled] .btn-info.active { background-color: #5bc0de; border-color: #46b8da; } .btn-info .badge { color: #5bc0de; background-color: #fff; } .btn-warning { color: #fff; background-color: #f0ad4e; border-color: #eea236; } .btn-warning:hover, .btn-warning:focus, .btn-warning.focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { color: #fff; background-color: #ec971f; border-color: #d58512; } .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning { background-image: none; } .btn-warning.disabled, .btn-warning[disabled], fieldset[disabled] .btn-warning, .btn-warning.disabled:hover, .btn-warning[disabled]:hover, fieldset[disabled] .btn-warning:hover, .btn-warning.disabled:focus, .btn-warning[disabled]:focus, fieldset[disabled] .btn-warning:focus, .btn-warning.disabled.focus, .btn-warning[disabled].focus, fieldset[disabled] .btn-warning.focus, .btn-warning.disabled:active, .btn-warning[disabled]:active, fieldset[disabled] .btn-warning:active, .btn-warning.disabled.active, .btn-warning[disabled].active, fieldset[disabled] .btn-warning.active { background-color: #f0ad4e; border-color: #eea236; } .btn-warning .badge { color: #f0ad4e; background-color: #fff; } .btn-danger { color: #fff; background-color: #d9534f; border-color: #d43f3a; } .btn-danger:hover, .btn-danger:focus, .btn-danger.focus, .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { color: #fff; background-color: #c9302c; border-color: #ac2925; } .btn-danger:active, .btn-danger.active, .open > .dropdown-toggle.btn-danger { background-image: none; } .btn-danger.disabled, .btn-danger[disabled], fieldset[disabled] .btn-danger, .btn-danger.disabled:hover, .btn-danger[disabled]:hover, fieldset[disabled] .btn-danger:hover, .btn-danger.disabled:focus, .btn-danger[disabled]:focus, fieldset[disabled] .btn-danger:focus, .btn-danger.disabled.focus, .btn-danger[disabled].focus, fieldset[disabled] .btn-danger.focus, .btn-danger.disabled:active, .btn-danger[disabled]:active, fieldset[disabled] .btn-danger:active, .btn-danger.disabled.active, .btn-danger[disabled].active, fieldset[disabled] .btn-danger.active { background-color: #d9534f; border-color: #d43f3a; } .btn-danger .badge { color: #d9534f; background-color: #fff; } .btn-link { font-weight: normal; color: #337ab7; border-radius: 0; } .btn-xl, .tp-caption a.btn-xl { padding: 25px 50px !important; font-size: 17px; } .btn-border { color: #fff; } .button-group .btn { margin: 5px } /******** Dividers ***********/ .divider { position: relative; height: 35px; overflow: hidden; text-align: center } .divider-1:before, .divider-6:before, .divider-6:after, .divider-10:before, .divider-10:after { position: relative; top: 17px; width: 100%; height: 1px; content: ""; background: #E8E8E8; display: table; } .divider-1 .divid_before { font-size: 21px; margin-left: 46.4%; color: #D5D5D5; margin-top: -2px; } .divider-1 .divid_after { -moz-transform: rotateY(180deg); -ms-transform: rotateY(180deg); -o-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); float: right; font-size: 21px; color: #D5D5D5; margin-right: 46.4%; margin-top: -2px; } .divider-2:before, .divider-4:before, .divider-5:before { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left: -20px; display: inline-block } .divider-2:after { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left: auto; right: -20px; display: inline-block } .divider-3:before { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left: 30px; display: inline-block } .divider-3:after { position: absolute; top: 17px; width: 50%; height: 1px; content: ""; background: #E8E8E8; left: auto; right: 30px; display: inline-block } .divider-4:before { margin-left: 45px; width: 100% } .divider-5:before { margin-right: 30px; width: 100%; right: 0; left: auto; } .divider-6:before { width: 20%; left: 30%; margin-left: -25px; } .divider-6:after { width: 20%; right: 30%; margin-right: -25px; left: auto; position: absolute } .divid_right, .divid_left { position: absolute; top: 8px; color: #DFDFDF; font-size: 20px; left: 0 } .divid_right { right: 0; left: auto } .divid_center { display: table; margin: 6px auto; color: #DFDFDF; font-size: 20px; } .lg-fa { font-size: 28px } .divider-7, .divider-8, .divider-9 { position: relative; display: block; overflow: visible; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px #eeeded solid; } .divider-7:before { position: absolute; top: -1px; left: 0; display: inline-block; width: 20%; height: 1px; content: ""; } .divider-7:after { position: absolute; top: -1px; right: 0; display: inline-block; width: 20%; height: 1px; content: ""; } .divider-8 span { position: absolute; top: -1px; right: 0; display: inline-block; width: 30%; height: 1px; content: ""; left: 35% } .divider-9:before { position: absolute; top: -4px; right: 0; display: inline-block; width: 40%; height: 1px; content: ""; left: 30%; background: #ddd } .divider-9 span:before { position: absolute; top: -1px; right: 0; display: inline-block; width: 30%; height: 1px; content: ""; left: 35%; background: #ddd } .divider-9 span:after { position: absolute; top: 2px; right: 0; display: inline-block; width: 20%; height: 1px; content: ""; left: 40%; background: #ddd } .divider-9:after { position: absolute; top: 5px; right: 0; display: inline-block; width: 10%; height: 1px; content: ""; left: 45%; background: #ddd } .divider-10:before { width: 20%; left: 30%; margin-left: -25px; } .divider-10:after { width: 20%; right: 30%; margin-right: -25px; left: auto; position: absolute } /********** headings ***********/ .block-head.right-head { text-align: right } .block-head.right-head:before { right: 20px; left: auto } .block-head.right-head:after { right: 0; left: auto } .block-head.style2 { border-bottom: 0; } .block-head.style2.center { display: block } .block-head.style2.center span { padding: 0 20px } .block-head.style2 span { display: inline-block; padding-right: 15px; background: #fff; position: relative; z-index: 1; } .block-head.style2.right-head span { padding-left: 15px; padding-right: 0 } .block-head.style2:before { display: none } .block-head.style2:after { border-top: 8px #EFEFEF solid; width: 100%; top: 50%; bottom: auto; z-index: 0; left: 0; background: transparent; margin: -12px 0 0; } .block-head.style3 { border-bottom: 0; } .block-head.style3.center { display: block } .block-head.style3.center span { padding: 0 20px } .block-head.style3 span { display: inline-block; padding-right: 15px; background: #fff; position: relative; z-index: 1; } .block-head.style3.right-head span { padding-left: 15px; padding-right: 0 } .block-head.style3:before { display: none } .block-head.style3:after { width: 100%; top: 30%; bottom: auto; z-index: 0; left: 0; margin: 0; } .block-head.style4 { display: table } .block-head.style4.center:before { left: 50%; margin-left: -10% } .block-head.style4.center span { padding: 0 20px } .block-head.style4 span { display: inline-block; padding: 0; position: relative; z-index: 1; } .block-head.style4.right-head span { padding-left: 15px; padding-right: 0; position: relative } .block-head.style4:after { display: none } .block-head.style4:before { left: 0; width: 20%; height: 3px; bottom: -2px; } .block-head.style5 { overflow: hidden; padding-bottom: 7px; border-bottom-width: 3px; } .block-head.style5.center { display: block } .block-head.style5.center span { padding: 0 20px } .block-head.style5 span { display: inline-block; padding: 0; position: relative; z-index: 1; } .block-head.style5.right-head span { padding-left: 15px; padding-right: 0; position: relative } .block-head.style5:after { display: none } .block-head.style5:before { display: none; } .block-head.style6.center:after { left: 50%; margin-left: -10% } .block-head.style6.center span { padding: 0 20px } .block-head.style6 span { display: inline-block; padding-right: 15px; position: relative; z-index: 1; } .block-head.style6.right-head span { padding-left: 15px; padding-right: 0 } .block-head.style6:before { display: none } .block-head.style6:after { width: 8%; left: 0; margin: 0; height: 1px; bottom: -1px; } .block-head.style7, .block-head.style8 { border-bottom: 0; padding-bottom: 0 } .block-head.style7:before, .block-head.style7:after, .block-head.style8:before, .block-head.style8:after { display: none } .block-head.style7 { color: #555 } .block-head.style7 { padding: 0 20px; border-left-width: 6px; border-left-style: solid; } .block-head i { margin-right: 10px } /********* progress bars *********/ .levels.style-2 .level-out, .levels.style-3 .level-out, .levels.style-5 .level-out, .levels.style-6 .level-out { background: #f7f7f7; position: relative; margin-bottom: 11.66666667px; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .levels.style-3 .level-out { background: #eee; } .levels.style-5 .level-out, .levels.style-6 .level-out { background: #EFEFEF; -moz-border-radius: 25px; border-radius: 25px; margin-bottom: 20px } .levels.style-5 .level-in { -moz-border-radius: 25px; border-radius: 25px; height: 17px; } .levels.style-6 .level-in { -moz-border-radius: 25px; border-radius: 25px; height: 10px; } .levels.style-2 .level-out span, .levels.style-3 .level-out span { color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background: transparent; } .levels.style-2 .level-in, .levels.style-3 .level-in { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; height: 24px; } .levels.style-2 .level-out span { line-height: 24px } .levels.style-3 .level-in { height: 35px } .levels.style-3 .level-out span { line-height: 35px } .levels.style-2 .level-out:after, .levels.style-3 .level-out:after, .levels.style-4 .level-out:after, .levels.style-5 .level-out:after, .levels.style-6 .level-out:after, .levels.style-2 .level-out span:before, .levels.style-3 .level-out span:before, .levels.style-4 .level-out span:before, .levels.style-5 .level-out span:before, .levels.style-6 .level-out span:before, .levels.style-2 .level-in:before, .levels.style-3 .level-in:before, .levels.style-4 .level-in:before, .levels.style-5 .level-in:before, .levels.style-6 .level-in:before { display: none } .levels.style-4 .level-out span { top: -24px; right: 0; background: #ADADAD; color: #fff; text-align: center; padding: 0 5px; width: auto; } .levels.style-5 .level-out span, .levels.style-6 .level-out span { top: -24px; right: 0; background: transparent; width: auto; text-align: right } .orange-bar { background: #faa732 !important } .green-bar { background: #5bb75b !important } .turquoise-bar { background: #49afcd !important } .blue-bar { background: #0074CC !important } /**********/ .service-box-4 h3, .service-box-5 h3 { font-size: 17px } .box.rounded .close-box { right: 1.2em; border-radius: 50%; top: 4px; } .rounded { border-top-left-radius: 5em; border-bottom-left-radius: 5em; border-top-right-radius: 5em; border-bottom-right-radius: 5em; padding: 1.5em 2em; } .round { border-radius: 5px; } .box.round .close-box { border-radius: 5px; } .parallax { -webkit-transition: background-position .2s linear; -moz-transition: background-position .2s linear; -o-transition: background-position .2s linear; transition: background-position .2s linear; } .product-specs a.btn { text-shadow: none; } .html ul, .html li { list-style: inherit; } .html ul, .html ol { margin: inherit; } .html p { word-wrap: break-word; } .services .slick-prev, .services .slick-next { top: auto; bottom: 0; } .iconColor { color: var(--color-bg); } /*#doctor-search .cell-2{ width:22%; padding-left:5px; padding-right:5px; } #doctor-search .cell-1{ width:12%; padding-left:5px; padding-right:5px; }*/ #doctor-search .cell-12 { width: 100%; } .service-box-3 .icon { line-height: inherit; padding: 18%; padding: 25px; } .rit { float: right !important; } .fx.hos-box { text-align: center; margin-bottom: 40px; } .fx.hos-box span { background: rgba(255,255,255,0.1); -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s; -moz-transition: -moz-transform ease-out 0.1s, background 0.2s; transition: transform ease-out 0.1s, background 0.2s; } .fx.hos-box span { display: inline-block; width: 125px; height: 125px; padding: 20px; border-radius: 100%; border: 2px solid #ccc; /*border: 1px solid #ccc;*/ margin-bottom: 20px; position: relative; } .fx.hos-box img { max-width: 100%; height: auto !important; margin-bottom: 15px; transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; } .youtubeplay { background: #eee; color: #777; display: block; border-radius: 5px; padding: 10px 15px; margin-top: 10px; font-size: 14px; text-transform: uppercase; width: 100%; float: left; margin-bottom: 20px; } .youtubeplay span { color: #CE1443; font-size: 36px; margin-right: 15px; float: left; } .youtubeplay strong { line-height: 36px; } #map_canvas iframe { width: 100% !important; } /*NEW DESIGN CSS*/ /*FOOTER CSS*/ .footerIcon { color: var(--color-bg); } .social-list li { background-color: white; border-radius: 100%; } .social-list li a { background-color: white; border-radius: 100%; } .social-list li:hover { background-color: white !important; border-radius: 100% !important; } .social-list li a:hover { background-color: white !important; border-radius: 100% !important; } .footerText li { margin-bottom: 12px !important; } .footerText li a { color: white !important; } .copyrights b { color: white !important; } /*BUTTTONS CSS*/ .contactUs { background: linear-gradient(287.95deg, var(--color-bg) 6.31%, rgba(1, 120, 176, 0) 190.58%) !important; border-radius: 4px !important; color: white !important; border: none !important; } .contactUs:hover { background: linear-gradient(287.95deg, var(--color-bg) 6.31%, rgba(1, 120, 176, 0) 190.58%) !important; border-radius: 4px !important; color: white !important; filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.25)); border: none !important; } .contactUsSendButton { background: linear-gradient(287.95deg, var(--color-bg) 6.31%, rgba(1, 120, 176, 0) 190.58%); border-radius: 4px !important; color: white !important; border: none !important; padding: 10px 20px; margin-left: 10px; } .contactUsSendButton:hover { background: linear-gradient(287.95deg, var(--color-bg) 6.31%, rgba(1, 120, 176, 0) 190.58%) !important; border-radius: 4px !important; color: white !important; filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.15)); border: none !important; padding: 10px 20px; margin-left: 10px; } .contactUsResetButton { background: linear-gradient(287.95deg, #F9FAFB 6.31%, rgba(1, 120, 176, 0) 190.58%); border-radius: 4px !important; color: #374151 !important; border: none !important; padding: 10px 20px; } .contactUsResetButton:hover { background: linear-gradient(287.95deg, #F9FAFB 6.31%, rgba(1, 120, 176, 0) 190.58%) !important; border-radius: 4px !important; color: #374151 !important; filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.15)); border: none !important; padding: 10px 20px; } .aghButton { background: linear-gradient(287.95deg, var(--color-bg) 6.31%, rgba(1, 120, 176, 0) 190.58%); border-radius: 4px !important; color: white !important; border: none !important; } .aghButton:hover { background: linear-gradient(287.95deg, var(--color-bg) 6.31%, rgba(1, 120, 176, 0) 190.58%) !important; border-radius: 4px !important; color: white !important; filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.25)); border: none !important; } .aghSecondButton { background: linear-gradient(287.95deg, #F9FAFB 6.31%, rgba(1, 120, 176, 0) 190.58%); border-radius: 4px !important; color: #374151 !important; border: none !important; padding: 10px 20px; } .aghSecondButton:hover { background: linear-gradient(287.95deg, #F9FAFB 6.31%, rgba(1, 120, 176, 0) 190.58%) !important; border-radius: 4px !important; color: #374151 !important; filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.15)); border: none !important; padding: 10px 20px } /*CONTACT FORM*/ .contactUsButtonsDiv { display: flex; flex-direction: row-reverse; padding: 14px 0px; } .cform { box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1); padding: 30px 20px 0px 20px; border-radius: 6px; } .cform input, textarea { box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.25); border-radius: 6px; } /*NEW DESIGN BOOK APPOINTMENT BUTTON*/ .bookAppointmentMobileButton { font-size: 18px; text-align: center; display: block; padding: 20px 30px; } /*CARD*/ .card { margin-top: 20px; box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 10%); padding: 30px 20px 50px 20px; border-radius: 6px; } .mt15 { margin-top: 15px; } .mb15 { margin-bottom: 15px; } select { cursor: pointer; } /*FOOTER EMAIL SUBSCRIBE BUTTOn*/ input#mc-embedded-subscribe:hover { filter: drop-shadow(0px 2px 7px rgba(0, 0, 0, 0.5)); } /*CHANGE THE RADIO BUTTONS COLOR*/ input[type=checkbox], input[type=radio] { accent-color: var(--color-bg); } /* ========================================================================== $BASE-PICKER ========================================================================== */ /** * Note: the root picker element should *NOT* be styled more than what’s here. */ .picker { font-size: 16px; text-align: left; line-height: 1.2; color: #000000; position: absolute; z-index: 10000; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /** * The picker input element. */ .picker__input { cursor: default; } /** * When the picker is opened, the input element is “activated”. */ .picker__input.picker__input--active { border-color: #0089ec; } /** * The holder is the only “scrollable” top-level container element. */ .picker__holder { width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; } /*! * Classic picker styling for pickadate.js * Demo: http://amsul.github.io/pickadate.js */ /** * Note: the root picker element should *NOT* be styled more than what’s here. */ .picker { width: 100%; width: 200%; } /** * The holder is the base of the picker. */ .picker__holder { position: absolute; background: #ffffff; border: 1px solid #aaaaaa; border-top-width: 0; border-bottom-width: 0; border-radius: 0 0 5px 5px; box-sizing: border-box; min-width: 176px; max-width: 466px; max-height: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -moz-opacity: 0; opacity: 0; -webkit-transform: translateY(-1em) perspective(600px) rotateX(10deg); transform: translateY(-1em) perspective(600px) rotateX(10deg); transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s 0.15s, border-width 0s 0.15s; } /** * The frame and wrap work together to ensure that * clicks within the picker don’t reach the holder. */ .picker__frame { padding: 1px; } .picker__wrap { margin: -1px; } /** * When the picker opens... */ .picker--opened .picker__holder { max-height: 25em; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; opacity: 1; border-top-width: 1px; border-bottom-width: 1px; -webkit-transform: translateY(0) perspective(600px) rotateX(0); transform: translateY(0) perspective(600px) rotateX(0); transition: -webkit-transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s; transition: transform 0.15s ease-out, opacity 0.15s ease-out, max-height 0s, border-width 0s; box-shadow: 0 6px 18px 1px rgba(0, 0, 0, 0.12); } /* ========================================================================== $BASE-DATE-PICKER ========================================================================== */ /** * The picker box. */ .picker__box { padding: 0 1em; } /** * The header containing the month and year stuff. */ .picker__header { text-align: center; position: relative; margin-top: .75em; } /** * The month and year labels. */ .picker__month, .picker__year { font-weight: 500; display: inline-block; margin-left: .25em; margin-right: .25em; } .picker__year { color: #999999; font-size: .8em; font-style: italic; } /** * The month and year selectors. */ .picker__select--month, .picker__select--year { border: 1px solid #b7b7b7; height: 2em; padding: .5em; margin-left: .25em; margin-right: .25em; } @media (min-width: 24.5em) { .picker__select--month, .picker__select--year { margin-top: -0.5em; } } .picker__select--month { width: 35%; } .picker__select--year { width: 22.5%; } .picker__select--month:focus, .picker__select--year:focus { border-color: #0089ec; } /** * The month navigation buttons. */ .picker__nav--prev, .picker__nav--next { position: absolute; padding: .5em 1.25em; width: 1em; height: 1em; box-sizing: content-box; top: -0.25em; } @media (min-width: 24.5em) { .picker__nav--prev, .picker__nav--next { top: -0.33em; } } .picker__nav--prev { left: -1em; padding-right: 1.25em; } @media (min-width: 24.5em) { .picker__nav--prev { padding-right: 1.5em; } } .picker__nav--next { right: -1em; padding-left: 1.25em; } @media (min-width: 24.5em) { .picker__nav--next { padding-left: 1.5em; } } .picker__nav--prev:before, .picker__nav--next:before { content: " "; border-top: .5em solid transparent; border-bottom: .5em solid transparent; border-right: 0.75em solid #000000; width: 0; height: 0; display: block; margin: 0 auto; } .picker__nav--next:before { border-right: 0; border-left: 0.75em solid #000000; } .picker__nav--prev:hover, .picker__nav--next:hover { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__nav--disabled, .picker__nav--disabled:hover, .picker__nav--disabled:before, .picker__nav--disabled:before:hover { cursor: default; background: none; border-right-color: #f5f5f5; border-left-color: #f5f5f5; } /** * The calendar table of dates */ .picker__table { text-align: center; border-collapse: collapse; border-spacing: 0; table-layout: fixed; font-size: inherit; width: 100%; margin-top: .75em; margin-bottom: .5em; } @media (min-height: 33.875em) { .picker__table { margin-bottom: .75em; } } .picker__table td { margin: 0; padding: 0; } /** * The weekday labels */ .picker__weekday { width: 14.285714286%; font-size: .75em; padding-bottom: .25em; color: #999999; font-weight: 500; /* Increase the spacing a tad */ } @media (min-height: 33.875em) { .picker__weekday { padding-bottom: .5em; } } /** * The days on the calendar */ .picker__day { padding: .3125em 0; font-weight: 200; border: 1px solid transparent; } .picker__day--today { position: relative; } .picker__day--today:before { content: " "; position: absolute; top: 2px; right: 2px; width: 0; height: 0; border-top: 0.5em solid #0059bc; border-left: .5em solid transparent; } .picker__day--disabled:before { border-top-color: #aaaaaa; } .picker__day--outfocus { color: #dddddd; } .picker__day--infocus:hover, .picker__day--outfocus:hover { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__day--highlighted { border-color: #0089ec; } .picker__day--highlighted:hover, .picker--focused .picker__day--highlighted { cursor: pointer; color: #000000; background: #b1dcfb; } .picker__day--selected, .picker__day--selected:hover, .picker--focused .picker__day--selected { background: #0089ec; color: #ffffff; } .picker__day--disabled, .picker__day--disabled:hover, .picker--focused .picker__day--disabled { background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; } .picker__day--highlighted.picker__day--disabled, .picker__day--highlighted.picker__day--disabled:hover { background: #bbbbbb; } /** * The footer containing the "today", "clear", and "close" buttons. */ .picker__footer { text-align: center; } .picker__button--today, .picker__button--clear, .picker__button--close { border: 1px solid #ffffff; background: #ffffff; font-size: .8em; padding: .66em 0; font-weight: bold; width: 33%; display: inline-block; vertical-align: bottom; } .picker__button--today:hover, .picker__button--clear:hover, .picker__button--close:hover { cursor: pointer; color: #000000; background: #b1dcfb; border-bottom-color: #b1dcfb; } .picker__button--today:focus, .picker__button--clear:focus, .picker__button--close:focus { background: #b1dcfb; border-color: #0089ec; outline: none; } .picker__button--today:before, .picker__button--clear:before, .picker__button--close:before { position: relative; display: inline-block; height: 0; } .picker__button--today:before, .picker__button--clear:before { content: " "; margin-right: .45em; } .picker__button--today:before { top: -0.05em; width: 0; border-top: 0.66em solid #0059bc; border-left: .66em solid transparent; } .picker__button--clear:before { top: -0.25em; width: .66em; border-top: 3px solid #ee2200; } .picker__button--close:before { content: "\D7"; top: -0.1em; vertical-align: top; font-size: 1.1em; margin-right: .35em; color: #777777; } .picker__button--today[disabled], .picker__button--today[disabled]:hover { background: #f5f5f5; border-color: #f5f5f5; color: #dddddd; cursor: default; } .picker__button--today[disabled]:before { border-top-color: #aaaaaa; } /* ========================================================================== $CLASSIC-DATE-PICKER ========================================================================== */ /* ============================================================================ - CSS Document - Theme Name: EXCEPTION Multi-Purpose Responsive Template. - Theme URI: http://demo.it-rays.com/exception - Author: IT-RAYS - Version: 1.0 ============================================================================= */ .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .clearfix:after, .container:after, .row:after { clear: both; } [class*="cell-"], .masonry .post-item { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left } .row { margin-right: -15px; margin-left: -15px } .cell-12 { width: 100%; } .cell-11 { width: 91.66666667%; } .cell-10 { width: 83.33333333%; } .cell-9 { width: 75%; } .cell-8 { width: 66.66666667%; } .cell-7 { width: 58.33333333%; } .cell-6, .masonry .post-item { width: 50%; } .cell-5 { width: 41.66666667%; } .cell-4, .masonry.nobar .post-item { width: 33.33333333%; } .cell-3 { width: 25%; } .cell-2 { width: 16.66666667%; } .cell-1 { width: 8.33333333%; } .responsive-nav, .menuBtn, .responsive-one { display: none } @media (min-width: 1200px) { .container { width: 1170px; } .pageWrapper.fixedPage { width: 1170px; margin: 20px auto; border-radius: 10px; border-top-width: 2px; border-top-style: solid; } .fixedPage .top-bar, .fixedPage .login-box { border-top-right-radius: 10px; border-top-left-radius: 10px; } } @media all and (max-width: 1447px) and (min-width: 1200px) { .left-side-wrap .container, .right-side-wrap .container { width: auto; } } @media (max-width: 1024px) { .dark-bg h2 { font-size: 20px; } .head2-lft-links { float: right !important; width: auto !important } .head2-lft-links li, .head-style2 .right-bar { float: left !important } .bg-head2 { display: none } .head2-lft-links li i { margin-right: 10px; float: left; margin-top: 4px } .head-style2 .top-menu { margin: auto; float: none !important; clear: both !important; } .top-nav > ul > li > a { padding-right: 13px; padding-left: 13px } .side-heading { font-size: 26px } .team-box .team-socials li a { font-size: 15px; padding: 3px 5px } .pageWrapper.fixedPage { width: auto; } .masonry .post-image { max-height: 138px !important; overflow: hidden; } footer .NL .input-box, footer .NL .txt-box, footer .NL .NL-btn, footer .NL .NL-btn .btn { transform: skew(0deg, 0); -webkit-transform: skew(0deg, 0); -moz-transform: skew(0deg, 0); -o-transform: skew(0deg, 0); -ms-transform: skew(0deg, 0); } footer .NL .input-box { margin: 0; padding-left: 10px } footer .NL:before { left: 7px } } @media (max-width: 1188px) { .masonry .post-image { max-height: 137px; } } @media (max-width: 1070px) { .testimonials-img { max-width: 60px } .masonry .post-image { max-height: 167px; } } @media (max-width: 992px) { [class*="cell-"], .masonry .post-item, .masonry.nobar .post-item, .masonry .post-image img { width: 100%; float: none; clear: both; } .masonry .post-image, .masonry .post-image img { height: auto; } .staff-3 [class*="cell-"] { margin-top: 10px } .staff-3 [class*="cell-"]:first-child { margin-top: 0px } header.top-head .logo { margin-bottom: 20px } header.top-head .logo a { background-position: 50% 0 !important; margin-bottom: 15px } .toolsBar .left, .top-bar [class*="cell-"] { clear: none !important; float: left !important; width: auto !important } .top-bar .right-bar { float: right !important } .toolsBar .right { clear: none !important; float: right !important; width: auto !important } .top-menu { float: none !important; display: table; margin: auto; } .service-box-1, .footer-top .cell-3, .service-box-2 { margin-top: 20px } .service-box-1:first-child, .footer-top .cell-3:first-child, .service-box-2:first-child { margin-top: 0px } .staff-1 .cell-2 { width: 50%; float: left; clear: none } .staff-1 .cell-4 { padding-top: 30px; padding-bottom: 30px; } .portfolio-items > div { width: 32%; float: left; clear: none } .img-over { top: -69%; left: -46%; width: 220%; height: 220%; -ms-transform: rotate(-34deg); -webkit-transform: rotate(-34deg); -moz-transform: rotate(-34deg); transform: rotate(-34deg); } .img-over a.link b { left: 42%; top: 79%; } .img-over a b { left: 57%; top: 11%; } .copyrights { text-align: center } .social-list, .rit-dark { float: none !important; display: table; margin: auto; width: auto } .right-sidebar { margin-top: 50px } .top-nav > ul > li > a i:after { display: none } #vertical-ticker { height: 90px } .viewAll { padding: 0 0 10px; overflow: hidden } .homeGallery .slick-prev, .homeGallery .slick-next { top: -38px } .homeGallery .slick-prev { right: 26px; left: auto; } .homeGallery .slick-next { left: auto; right: -5px; } .plan-title { height: auto !important; padding: 20px 0; font-size: 250% } .lft-plan .plan-year { right: -42px; } .rit-plan .plan-year { left: -47px; } .plan-year { bottom: 30px; } .team-boxes [class*="cell-"], .shop-item { float: left; width: 33%; clear: none } .team-boxes-2 [class*="cell-"] { float: left; width: 50%; clear: none } header.top-head .logo a { margin: auto } .portfolio-img-slick { margin-bottom: 20px } .project-info { margin-top: 20px } .accordion li > h3 a { width: 80% } .my-details [class*="cell-"] { float: left; width: 33%; clear: none } .btn.ExtraLargeBtn { margin: 20px auto 0; width: 60% } .blog-thumbs .post-image { max-height: none } .blog-thumbs .post-image, .masonry .post-image { max-height: 177px; overflow: hidden; } .blog-thumbs .post-image img, .masonry .post-image img { width: 100% } .our_gallery div.content { margin-bottom: 15px; padding: 0; } .footer-bottom { /* margin-bottom: 125px; */ padding-bottom: 125px; } } @media (max-width: 768px) { .top-menu, .top-bar .cell-5, .head-style2 .right-bar, .gray-nav, .left-side-header, .right-side-header { display: none !important } .h-social { margin-bottom: 30px; } .left-side-wrap, .right-side-wrap { margin: 0 } .pageWrapper { z-index: 9; position: relative; background: #fff } .pageWrapper.fixedPage { z-index: 9; position: relative; background: #fff; margin: 0 !important } body { overflow-x: hidden } .responsive-nav { position: fixed; width: 60%; overflow: auto; left: -60%; top: 0px; height: 100%; z-index: 9999; display: block; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; } .responsive-nav.showNav { z-index: 6666; left: 0 } .res-act { left: 0; } .one-page header.top-head .logo { margin-bottom: 0 } .one-page .menuBtn { position: fixed !important } .colBody:before { content: ""; background: rgba(0,0,0,.8); position: fixed; width: 100%; height: 100%; display: inline-block; z-index: 99999 } .menuBtn { padding: 9px 12px 8px 12px; margin: 0; cursor: pointer; z-index: 999; top: 0; left: 0; position: fixed; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; display: block } .menuBtnOne { padding: 9px 12px 8px 12px; margin: 0; cursor: pointer; z-index: 999999; top: 0px; left: 0px; position: absolute; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; display: block; } .menuBtnOneTogg { left: 160px } .responsive-one { position: fixed; z-index: 9999999; top: 12px; display: block } .responsive-one ul { position: absolute; left: -160px; z-index: 9999999; width: 160px; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; } .responsive-nav ul li span.collapse { position: absolute; right: 10px; z-index: 999; top: 10px; cursor: pointer; transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; } .responsive-nav ul li span.collapse:before { content: "\f107"; font-family: FontAwesome; display: inline-block; width: 20px; height: 20px; top: 10px; border-radius: 50%; background: #EAEAEA; /*color: #000;*/ color: var(--color-bg); text-align: center; line-height: 20px } .responsive-nav ul li li span.collapse:before { border-radius: 0; } .responsive-nav ul li.current > span.collapse:before { content: "\f106"; } .responsive-nav ul li ul { background: #fff } .responsive-nav ul li ul li { border-top-color: #eee } .responsive-nav ul li ul li a { color: #333 } .responsive-one ul li.current a { background: #333 } .showOne { left: 0 !important } .menuBtn-selected { margin-left: 60% } .menuBtn-selected i:before, .menuBtnOneTogg i:before { content: "\f00d" } .menuBtn:focus, .menuBtn:hover { color: #fff } .menuBtn i { font-size: 21px; } .responsive-nav h3 { color: #fff; margin: 0px; padding: 15px; font-size: 100%; text-transform: uppercase; font-weight: bold } .responsive-nav ul li, .responsive-one ul li { position: relative; border-top: 1px solid rgba(255, 255, 255, 0.1); } .responsive-nav ul li a, .responsive-one ul li a { display: block; color: #fff; font-size: 14px; outline: none; padding: 10px 15px; text-transform: uppercase } .responsive-nav ul li a i, .responsive-one ul li a i { margin-right: 10px } .responsive-nav > ul > li.selected { background: #9E9E9E } .responsive-nav ul li a:hover { text-decoration: none } .responsive-nav ul li ul, .responsive-nav ul li div.div-mega { display: none; } .div-mega-section { float: none; width: 100%; margin: 0 !important } .div-mega-section h4 { margin: 0; padding: 10px; background: #eee } .div-mega-section ul { display: block !important } .responsive-nav ul li ul li a { font-size: 13px; text-transform: none } .responsive-nav ul li ul li.selected { background: #E8E8E8 } .responsive-nav ul ul ul { padding-left: 25px } .responsive-nav ul ul ul li a { font-size: 11px } .portfolio-items > div { width: 48%; float: left; clear: none } .err-404:before { left: 44.5% } .steps li { display: block; width: 100%; margin: 0 0 5px } .top-nav-style3 { display: none } .pricing-table { margin-bottom: 50px } .pricing-table-2 { margin-bottom: 40px } .team-box-2 { margin-bottom: 70px } #vertical-ticker { height: 60px } .team-boxes [class*="cell-"], .shop-item { float: left; width: 50%; clear: none } .head-style3 header.top-head { margin: 0 } header.top-head .logo { margin-bottom: 0 } } @media (max-width: 640px) { .pager, .pager * { transform: skew(0deg, 0); -webkit-transform: skew(0deg, 0); -moz-transform: skew(0deg, 0); -o-transform: skew(0deg, 0); -ms-transform: skew(0deg, 0); } .pager ul li a, .pager ul li span { padding: 0 15px !important } .icon-cont:after { border-width: 5px 5px 0 5px; bottom: -5px; } .plan-block { padding: 20px 10px 0 !important } .lft-plan .plan-year { right: 0px } .rit-plan .plan-year { left: 0px } .levels-2 li { display: block; float: none; margin: 0 0 30px; text-align: center; width: 100% } .level-out-2 { display: table; margin: auto } .comment-content p { padding-left: 0px; padding-top: 15px; clear: both; } ul.child-comment { margin-left: 37px; } ul.child-comment li:before { top: 35px } ul.child-comment li:after { height: 110%; top: -94%; } article.comment { overflow: hidden } .comment-author { background: transparent none } .author-name { margin: 0; padding: 0; float: none } .comment-reply { font-size: 11px; padding: 3px 7px; } .comment-date { padding: 3px 10px 0 0; float: none } .comment-avatar { position: static; float: left } .product-specs a.btn, .item-avl > div { margin-bottom: 5px } .fun-title { font-size: 250%; margin-bottom: 15px } [class*="skew"], .accordion li > h3[class*="skew-"] u::before { transform: skew(0deg, 0); -webkit-transform: skew(0deg, 0); -moz-transform: skew(0deg, 0); -o-transform: skew(0deg, 0); -ms-transform: skew(0deg, 0); } .tabs-vertical .tabs-pane, .accordion-horizontal > li.active { width: 60% } #filters li a { padding: 0 9px } .my-details [class*="cell-"], .my-img img { clear: both; margin: auto; float: none; display: table } .my-details [class*="cell-"] { width: 100% } .my-img img { margin-top: 10px } .my-img .my-name { margin: 15px auto; padding: 0 } .post-image { clear: both; margin: 0 0 5px; float: none !important; margin-right: 0 !important } .post-image img { width: 100% !important; } .post-item { padding-bottom: 15px } .soon-inputs input[type="text"] { width: auto !important; min-width: inherit !important; margin-bottom: 5px } .larg-socials li { margin-bottom: 20px } #vertical-ticker { height: 50px; font-size: 170% } } @media (max-width: 500px) { .login-controls .input-box, .login-controls .check-box-box { clear: both; margin: 0 0 3px } .login-box .left.main-bg { float: none; clear: both; width: 60px; margin: 0 } .check-box-box a { float: none !important; clear: both !important; display: table; margin: 0 !important; } .filter-by { margin-left: 10px } .cart-icon { margin-top: 10px } .pageWrapper.fixedPage #vertical-ticker { font-size: 170% } } @media (max-width: 480px) { .dark-bg .btn-large { font-size: 18px } .head-links { display: none; } .site-logo { padding-top: 15px !important; } .testimonials-bg > span { font-size: 11px } .testimonials-img { max-width: 60px } .portfolio-filterable .white-bg, .portfolio-filterable .gry-bg { margin: 0 25px 10px; } #filters { width: 100% } #filters li { display: block; float: none; } .portfolio-items > div { width: 100% } .follow-block .follow-link { font-size: 14px } .err-404:before { left: 40.5% } .small-txt-box { margin-bottom: 5px } .small-txt-box input[type=text] { width: 80px !important } .products-filter-top { padding: 10px 0; } .products-filter-top .left { padding: 0 0 5px } .pager ul li a, .pager ul li span { padding: 0 10px !important } .shop-bottom-btns .btn { clear: both; display: table; margin: 5px auto; float: none !important } .portfolio-filterable .filter-by { display: block; clear: both; margin-bottom: 5px } .portfolio-filterable [class*="skew"], .comment-reply [class*="skew"] { transform: skew(0deg, 0); -webkit-transform: skew(0deg, 0); -moz-transform: skew(0deg, 0); -o-transform: skew(0deg, 0); -ms-transform: skew(0deg, 0); } .tabs ul li { float: none } .tabs-vertical > ul { float: none; width: 100% } .post-image { height: auto } .toolsBar [class*="cell-"] { clear: both !important; float: none !important; width: 100% !important; padding: 10px 0; text-align: center } .list-grid a { float: none } .masonry .post-item, .masonry.nobar .post-item { float: none; padding: 0; margin: 15px 0; width: 100%; clear: both } .post-image { height: auto !important; max-height: 200px } .share-post .sh, .share-post ul li a { padding: 5px 6px; font-size: 12px; } .comment-avatar { width: 50px; height: 50px } .comment-author, .comment-author * { transform: skew(0deg, 0); -webkit-transform: skew(0deg, 0); -moz-transform: skew(0deg, 0); -o-transform: skew(0deg, 0); -ms-transform: skew(0deg, 0); } .custom-heading { font-size: 20px } .social-list li { font-size: 12px } [class*="block-bg-"] { background-attachment: scroll !important } .list-grid { display: none } .copyrights span { clear: both; display: block } .slick-slider .slick-list { padding-bottom: 40px } .portfolio-img-slick .slick-list { padding-bottom: 0px } .slick-prev, .slick-next { top: auto !important; bottom: 0 } .slick-prev { right: auto !important; left: 50% !important; margin-left: -29px } .slick-next { left: auto !important; right: 50% !important; margin-right: -29px } .team-boxes [class*="cell-"] { float: none; width: 100%; clear: both } .btn.ExtraLargeBtn { margin: 20px auto 0; width: 80% } .top-bar li:first-child { display: none } .post-lft-info div { padding: 15px; font-size: 13px; } .post-lft-info .tri-col { border-width: 15px 30px 0 30px; bottom: -15px; } .portfolio-img-slick .slick-prev { right: 0 !important; left: auto !important; margin-right: 35px; } .portfolio-img-slick .slick-next { right: 0 !important; left: auto !important; margin-right: 0px !important; } .masonry.nobar .blog-posts { padding: 0 15px } .portfolio-img-slick .slick-prev, .portfolio-img-slick .slick-next { -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); -webkit-transform: scale(0.5); transform: scale(0.5); } .team-boxes-2 [class*="cell-"], .shop-item { width: 100%; float: none; clear: both; } .grid-list.list .shop-item p { min-height: 50px; max-height: 95px; overflow: hidden } } @media (max-width: 320px) { .dark-bg .btn-large { font-size: 18px } .staff-1 .cell-2 { width: 100%; float: none; clear: both; } .toolsBar select { margin-right: 5px } table * { font-size: 10px; } .tabs-vertical .tabs-pane { width: 100% } .pager { margin: 0 } } /********* version 2 *********/ @media (max-width: 1200px) { .nav-4 .top-nav > ul > li > a i { display: none } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date { left: -98px; } .timeline_no_bar .timeline-cell:nth-child(odd) .timeline_date { right: -97px; } .timeline_no_bar .timeline_date:before { left: 20px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date:before { right: 18px; } } @media (max-width: 1100px) { footer .NL .input-box { width: 60% } } @media (max-width: 1024px) { .page-title > .container > .row .lft-title { margin: auto } .timeline_no_bar .timeline-cell:nth-child(odd) .timeline_date { right: -89px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date { left: -91px; } .timeline_no_bar .timeline_date:before { left: 28px; } .timeline_no_bar .timeline-cell:nth-child(even) .timeline_date:before { right: 25px; } } @media (max-width: 992px) { .blog-timeline > .row { margin: 0 } .head-links, .h-social { margin: 10px 0 0; } .h-social { margin-bottom: 10px; } .site-logo { padding: 0; text-align: center; } .timeline_no_bar .timeline-cell { float: none !important; width: 100% !important; clear: both !important; margin: 0 0 30px !important } .blog-timeline:before, .top-nav-style3 { display: none !important } .blog-timeline .timeline_date { display: none } .blog-timeline .meta-date { display: list-item } .timeline_no_bar .timeline-cell .post-item { min-height: inherit } .timeline-cell .cont { display: block; padding: 10px; } .timeline-left .timeline-cell, .timeline-right .timeline-cell { margin: 0 0 30px; padding: 0 } .top-bar-mobile { display: block; text-align: center; } .blog-timeline .timeline-left:before, .blog-timeline .timeline-right:before, .top-bar { display: none } .figures-box { margin-bottom: 2px; } } /***** Main Colors *******/ @font-face { font-family: 'JFFlat'; src: url('fonts/jf_flat_regular-webfont.woff2') format('woff2'), url('fonts/jf_flat_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'STV'; src: url('fonts/stv_bold-webfont.woff') format('woff2'), url('fonts/stv_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Bahij'; src: url('fonts/bahij_thesansarabic_bold-webfont.woff2') format('woff2'), url('fonts/bahij_thesansarabic_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'CoconNextArabic'; src: url('fonts/fontsfree-net-slc_-webfont.woff2') format('woff2'), url('fonts/fontsfree-net-slc_-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } a, .top-search a, .main-color, .hr-style4:after, .hr-style4:before, .block-head, .widget-head, footer a:hover, .title-2 .breadcrumbs a, .title-3 .breadcrumbs a, .title-4 .breadcrumbs a, .nav-3 .top-nav > ul > li.current > a,.nav-3 .top-nav > ul > li.current > a i,.nav-3 .top-nav > ul > li.selected > a i,.nav-3 .top-nav > ul > li > a:hover i, .nav-3 .top-nav > ul > li > a:hover, .nav-3 .top-nav > ul > li.selected > a, .nav-3 .top-nav > ul > li.selected > a i, .footer-top a:hover:before, .list.prim li:before, #filters li a, .team-box-2 .t-position, .team-box-2 .team-socials a, .head-style3 .top-bar li a, .author-name, .add-items i.fa, .copyrights b, .dark-bg .btn-large:before, .box-top .more-btn, .service-box-1:hover a, .box-top i.fa, .item-box:hover .item-tools i, .item-cart a:hover, .main-border, .fun-title, .staff-1 .fun-icon, .top-bar ul.social-list li a:hover span, .nav-2 .top-nav > ul > li > a:hover i, .nav-2 .top-nav > ul > li.current > a i, .nav-2 .top-nav > ul > li.selected > a i, .nav-2 .top-nav > ul > li.selected > a i, .project-name, .slick-dots li.slick-active button:before, .title-1 h1, .list.alt li:before,.product-price, .title-2 h1,.main-title, .accordion li.active a, .accordion li > h3 i.fa, .post-info h2 a:hover, .siteMap-nav ul ul li a:hover, .head2-lft-links li i, .head-style3 .top-bar li i, .item-tools i, .product-specs a.btn.selected,.widget-content a:hover, .service-box-4 h3 span,.service-box-5 h3 span,.service-box-5 h3,.block-head-News a span,.block-head-News:hover { color: var(--color-bg); } .sticky .top-nav > ul > li.selected > a, .sticky .top-nav > ul > li.current > a{ color: #e7512f !important; } .main-bg, .top-nav > ul li a:hover, .top-nav > ul > li.selected > a, .top-search.selected a, .top-nav li.current > a, .plan-year:after, .team-boxes-2 .cell-3:hover .team-box-2, .head-style3 .top-search a, .service-box-1:hover .box-top, .top-nav-style3, .sticky .top-nav > ul > li > a:hover, .item-box:hover .item-title, .tp-bullets.simplebullets.round .bullet, .top-nav li li a, .fixedHead .top-nav > ul > li > a:hover, .fixedHead .top-nav > ul > li.selected > a, .fixedHead .top-nav > ul > li.current > a, .top-search a:hover, .service-box-2:hover a.r-more, .service-box-3:hover a.r-more, .pager ul li.selected, .slick-prev:hover, .slick-next:hover, .hr-style1:before, .hr-style1:after, .social-list li a:hover, .footer-top .tags a:hover, hr:before, hr:after, .tp-arr-allwrapper:hover, .level-in, .tabs-vertical .tabs-pane .tab-panel:before, .table-style2 th, .menuBtn, .service-box-1:hover:after, .portfolio-item:hover:after, #filters li:hover, #filters li.active, .head-style2 .top-search a, .team-box .team-details, .title-4 h1, .tabs > ul li:hover, .tabs > ul li.active, .steps li.selected span, .icon-cont, .view-all-projects a:hover, .accordion-horizontal > li.active a, .list-grid a.selected, .testimonials-2 .slick-prev:hover, .testimonials-2 .slick-next:hover, .comment-reply:hover, .service-box-2:hover .fa, .service-box-3:hover .icon, .share-post ul li a:hover, .item-price, .accordion li.active h3 u, .pager ul li:hover, .tp-bullets.simplebullets.round .bullet:hover, .tp-bullets.simplebullets.round .bullet.selected, footer .NL .NL-btn:hover, .search-w .btn, .cart-icon, .sale, .flex-control-paging li a.flex-active, .responsive-one ul, .menuBtnOne, .service-box-4 a, .service-box-5 a, .block-head-News:hover .icon { /*background-color: #0077AC;*/ background-color: var(--color-bg); color: #fff; /*NEW*/ /*border-color: #0077AC; background-color: white;*/ } .accordion li.active h3 u{ background:none !important; } .sale:before { border-color: transparent #e7512f transparent transparent; } .footer-menu-inline li a:hover,.footer-menu-center li a:hover { color: #e7512f; border-bottom:2px solid #e7512f } .item-box:hover:after, .item-box:hover .item-price, .team-box:hover:after, .team-box-2:hover:after, .responsive-nav, .search-box:before, .block-head:before, .block-head:after, .widget-head:before, .widget-head:after, .details-img:after, .post-image:after, .team-box:after, .team-box-2:after, .item-box:after, .team-box .team-socials li a:hover, .service-box-1:after, .portfolio-item:after { /*background-color: #0077AC;*/ background-color: var(--color-bg); } .main-border { border: 1px #e7512f solid !important; } .Newsslider { border-bottom:6px #e7512f solid; } .nav-3 .top-nav > ul > li.hasChildren > a:after { border-color: transparent transparent #e7512f transparent; } .head-style3 .login-btn .tri{ border-color: #e7512f transparent transparent transparent; } .alter-border { border: 1px #e1e1e1 solid !important; color: #777; } .nav-3 .top-nav > ul > li.current > a, .nav-3 .top-nav > ul > li > a:hover, .nav-3 .top-nav > ul > li > a:hover, .nav-3 .top-nav > ul > li.selected > a,.pageWrapper.fixedPage,.footer-top-2, .sub-menu-white .div-mega,.sub-menu-dark .div-mega,.sub-menu-white.top-nav > ul li ul li:first-child, .sub-menu-dark.top-nav > ul li ul li:first-child { border-top-color: #e7512f; } .item-box:hover .item-title { border-top: 1px #e7512f solid; } .tabs-pane { border-top: 2px #e7512f solid; } blockquote { background: #f9f9f9; border-left: 2px #e7512f solid; } .level-out .tr { border-right: 6px solid transparent; border-top: 6px solid transparent; border-left: 6px solid #e7512f; border-bottom: 6px solid #e7512f; } .service-box-1:hover h3, .clients > div a:hover,.sticky { border-bottom-color: #e7512f !important; } .icon-middle, .product-img li a.active img { border: 2px #e7512f solid; } .title-3 { background-color: #41a1b7; } .tri-col, .icon-cont:after { border-color: #e7512f transparent transparent transparent; } .head-style3 .top-bar { border-top: 5px #e7512f solid; } .steps li.selected span:after { border-left: 16px solid #e7512f; } .item-title { border-top: 1px #777 solid; } .product-specs a.btn.selected { border: 1px #777 solid !important; } header.top-head .logo a, .foot-logo { background: transparent url('../../images/logo.png') no-repeat 50% 50%; } .footer-top-2 .foot-logo { background: transparent url('../../images/logo.png') no-repeat; } .head-style2 .top-head .logo a, .head-style3 .logo a { background: transparent url('../../images/logo-white.png') no-repeat 50% 0 !important; } .head-style2 .logo a, .head-style3 .logo a { background-position: 50% 50% !important; } .accordion li.active h3 u,.accordion li.active h3 a { border-color: #e7512f; } .post-image a .mask { background: rgba(232,82,74,0.5); border-radius:8px; } .pricing-table.selected,.cart-popup { border-color: #e7512f; } .list-grid a.selected:after { border-color: #e7512f transparent transparent transparent; } .continue-btn .btn.right:after { border-left: 15px solid #e7512f; } .continue-btn .btn.right:hover:after { /*border-left: 15px solid #0077ac;*/ border-left: 15px solid var(--color-bg); } .continue-btn .btn.left:after { border-right: 15px solid #777; } .continue-btn .btn.left:hover:after { border-right: 15px solid #666; } .accordion-horizontal li.active > h3 i.fa, .item-box:hover .item-title a, .breadcrumbs .line-separate { color: #fff; } .top-nav li li { /*NEW DESIGN*/ /*border-bottom: 1px #025c84 solid;*/ } .top-nav li li a:hover, .top-nav li li.selected > a, .top-nav li li.current > a, .responsive-nav ul li a:hover, .top-nav > ul > li:hover:after, .top-nav > ul > li.current:after { /*background: #025C84 !important;*/ background: #EEF2FF !important; /*NEW DESIGN*/ color: var(--color-bg) !important; font-weight: bold; /*opacity: 0.8;*/ } .btn.main-bg:hover, .team-box .team-socials li a { /*background-color: #0077ac !important;*/ background-color: var(--color-bg) !important; color: #fff; } .btn.main-border:hover { border-color: #333 !important; color: #333; background:transparent } .flickr-stream-w .img-overlay { background: rgba(232,82,47,.8); } .service-box-1:hover p, .service-box-1:hover i.fa { color: #fff; } .contact-form input[type=text]:focus, .contact-form input[type=password]:focus, .contact-form input[type=email]:focus, .contact-form textarea:focus { border: 1px #e7512f solid; } .img-over a.link, .block-bg-1:before, .block-bg-2:before, .block-bg-3:before, .block-bg-4:before, .block-bg-5:before { background-color: rgba(232,82,47,0.7); } .img-over a.zoom { background-color: rgba(119,119,119,0.7); } .level-in:before { border-color: transparent transparent transparent #e7512f; } .btn.main-bg.btn-3d { -webkit-box-shadow: 0 5px 0 #d23c1a; box-shadow: 0 5px 0 #d23c1a; margin-bottom: 5px; } /* Retina Ready Fix */ @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { header.top-head .logo a, .foot-logo { background: transparent url('../../images/logo@2x.png') no-repeat; background-size: 200px 38px; } .footer-top-2 .foot-logo { background: transparent url('../../images/logo@2x.png') no-repeat; background-size: 200px 38px; } } /*! * jQuery Floating Social Share Plugin v1.1.1 * http://burakozdemir.co.uk * Burak Ozdemir - * Released under the MIT license */ *{ box-sizing: border-box; } #floatingSocialShare{ position: relative; z-index: 9999; } #floatingSocialShare a{ position: relative; width: 48px; height: 48px; line-height: 24px; display:list-item; list-style-type: none; padding: 5px 0; text-align: center; color: #fff; } #floatingSocialShare a.heading { background-color: #3F3F3F; border-bottom: 1px solid; width: 55px; } #floatingSocialShare a:focus, #floatingSocialShare a:hover { color: #fff; width:52px; opacity: 0.8; transition-duration: 0.3s; transition-property: right; transition-timing-function: ease-out; } #floatingSocialShare a.heading:focus, #floatingSocialShare a.heading:hover { opacity: 1; width: 55px; } #floatingSocialShare a, #floatingSocialShare a:visited, #floatingSocialShare a:focus, #floatingSocialShare a:active, #floatingSocialShare a:hover { outline: 0 none !important; } #floatingSocialShare i{ line-height: inherit; font-size: 24px; text-align: center; } #floatingSocialShare .top-left{ position: fixed; top: 33%; left:0; } /*#floatingSocialShare .top-left:before{ content: ""; }*/ #floatingSocialShare .top-right{ position: fixed; top: 33%; right:0; } #floatingSocialShare .carecenter{ background-color: #E44960; } #floatingSocialShare a.carecenter img{ display:none; } #floatingSocialShare a.carecenter:focus, #floatingSocialShare a.carecenter:hover { padding:0; width:auto; } #floatingSocialShare a.carecenter:focus i, #floatingSocialShare a.carecenter:hover i { display:none; } #floatingSocialShare a.carecenter:focus img, #floatingSocialShare a.carecenter:hover img { display:block; } #floatingSocialShare .facebook{ background-color: #3b5998; } #floatingSocialShare .twitter{ background-color: #00aced; } #floatingSocialShare .google-plus{ background-color: #dd4b39; } #floatingSocialShare .linkedin{ background-color: #007bb6; } #floatingSocialShare .envelope{ background-color: #726C6C; } #floatingSocialShare .pinterest{ background-color: #c92228; } #floatingSocialShare .stumbleupon{ background-color: #eb4924; } #floatingSocialShare .reddit{ background-color: #a9bacb; } #floatingSocialShare .tumblr{ background-color: #36465d; } #floatingSocialShare .vk{ background-color: #6383a8; } #floatingSocialShare .odnoklassniki { background-color: #f6900b; } #floatingSocialShare .shareCount{ position: absolute; bottom: 0; right: 0; left: 0; margin: auto; color: #ffffff; font-size: 10px; } #floatingSocialShare .margin-top-5{ margin-top: 5px; } @media only screen and (min-device-width: 0px) and (max-width:961px){ #floatingSocialShare a.heading, #floatingSocialShare a.heading:focus, #floatingSocialShare a.heading:hover { display:block; float:none; width: 100%; } #floatingSocialShare a.carecenter:focus, #floatingSocialShare a.carecenter:hover { padding: 5px 0; } #floatingSocialShare a.carecenter:focus i, #floatingSocialShare a.carecenter:hover i { display:block; } #floatingSocialShare a.carecenter:focus img, #floatingSocialShare a.carecenter:hover img { width: auto; max-width: inherit; position: absolute; bottom: 48px; right: 0; } #floatingSocialShare{ margin-top: 50px; } #floatingSocialShare .top-left{ top: auto; bottom: 0; width: 100%; z-index: 999; } #floatingSocialShare .top-right{ top: auto; bottom: 0; width: 100%; z-index: 999; } #floatingSocialShare a{ position: relative; float: left; display:list-item; list-style-type: none; } #floatingSocialShare a:focus, #floatingSocialShare a:hover { -moz-transition-property: none; -webkit-transition-property: none; -o-transition-property: none; transition-property: none; } }