/*! * TeachEdison Custom CSS */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local("Open Sans Light"),local("OpenSans-Light"),url(https://fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format("woff") } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local("Open Sans"),local("OpenSans"),url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format("woff") } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; src: local("Open Sans Semibold"),local("OpenSans-Semibold"),url(https://fonts.gstatic.com/s/opensans/v13/MTP_ySUJH_bn48VBG8sNSqRDOzjiPcYnFooOUGCOsRk.woff) format("woff") } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 300; src: local("Open Sans Light Italic"),local("OpenSansLight-Italic"),url(https://fonts.gstatic.com/s/opensans/v13/PRmiXeptR36kaC0GEAetxvR_54zmj3SbGZQh3vCOwvY.woff) format("woff") } @font-face { font-family: 'Open Sans'; font-style: italic; font-weight: 400; src: local("Open Sans Italic"),local("OpenSans-Italic"),url(https://fonts.gstatic.com/s/opensans/v13/xjAJXh38I15wypJXxuGMBrrIa-7acMAeDBVuclsi6Gc.woff) format("woff") } html { position: relative; min-height: 100%; box-sizing: border-box } *,*::after,*::before { box-sizing: inherit } /*! Animate.css - http://daneden.me/animate Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2014 Daniel Eden */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 40%, 43% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -30px, 0); -ms-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0) } 70% { -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); -webkit-transform: translate3d(0, -15px, 0); -ms-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0) } 90% { -webkit-transform: translate3d(0, -4px, 0); -ms-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0) } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom } @-webkit-keyframes flash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 50%, 100% { opacity: 1 } 25%, 75% { opacity: 0 } } .flash { -webkit-animation-name: flash; animation-name: flash } @-webkit-keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes pulse { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); -ms-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05) } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .pulse { -webkit-animation-name: pulse; animation-name: pulse } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1) } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1) } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes rubberBand { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); -ms-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1) } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); -ms-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1) } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); -ms-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1) } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); -ms-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1) } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); -ms-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1) } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } @keyframes shake { 0%, 100% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); -ms-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } } .shake { -webkit-animation-name: shake; animation-name: shake } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg) } } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); -ms-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg) } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); -ms-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg) } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); -ms-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg) } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); -ms-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg) } 100% { -webkit-transform: rotate3d(0, 0, 1, 0deg); -ms-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg) } } .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: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes tada { 0% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg) } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg) } 100% { -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .tada { -webkit-animation-name: tada; animation-name: tada } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform: none; transform: none } } @keyframes wobble { 0% { -webkit-transform: none; -ms-transform: none; transform: none } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg) } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg) } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg) } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg) } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .wobble { -webkit-animation-name: wobble; animation-name: wobble } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); -ms-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03) } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); -ms-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97) } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); -ms-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); -ms-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); -ms-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0) } 75% { -webkit-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 90% { -webkit-transform: translate3d(0, 5px, 0); -ms-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); -ms-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); -ms-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0) } 75% { -webkit-transform: translate3d(-10px, 0, 0); -ms-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0) } 90% { -webkit-transform: translate3d(5px, 0, 0); -ms-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; transform: none } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); -ms-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0) } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); -ms-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0) } 75% { -webkit-transform: translate3d(10px, 0, 0); -ms-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0) } 90% { -webkit-transform: translate3d(-5px, 0, 0); -ms-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0) } 100% { -webkit-transform: none; -ms-transform: none; transform: none } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); -ms-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0) } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 75% { -webkit-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 90% { -webkit-transform: translate3d(0, -5px, 0); -ms-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0) } 100% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); -ms-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9) } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); -ms-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1) } 100% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); -ms-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); -ms-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); -ms-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0) } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); -ms-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0) } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); -ms-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0) } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); -ms-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0) } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutDown { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } @keyframes fadeOutDown { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } @keyframes fadeOutDownBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); -ms-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0) } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes fadeOutLeft { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); -ms-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } @keyframes fadeOutLeftBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); -ms-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0) } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig } @-webkit-keyframes fadeOutRight { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } @keyframes fadeOutRight { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); -ms-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0) } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } @keyframes fadeOutRightBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); -ms-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0) } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig } @-webkit-keyframes fadeOutUp { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } @keyframes fadeOutUp { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); -ms-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0) } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } @keyframes fadeOutUpBig { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); -ms-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0) } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -ms-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } } .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) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg) } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px) } } .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) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); transform: perspective(400px) } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0 } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1 } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg) } 100% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px) } } .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); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0 } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-animation-duration: .75s; animation-duration: .75s; -webkit-backface-visibility: visible !important; -ms-backface-visibility: visible !important; backface-visibility: visible !important } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0 } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); -ms-transform: perspective(400px); transform: perspective(400px) } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1 } 100% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 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-animation-duration: .75s; animation-duration: .75s } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } 100% { -webkit-transform: none; transform: none; opacity: 1 } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); -ms-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0 } 60% { -webkit-transform: skewX(20deg); -ms-transform: skewX(20deg); transform: skewX(20deg); opacity: 1 } 80% { -webkit-transform: skewX(-5deg); -ms-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1 } 100% { -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1 } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } @keyframes lightSpeedOut { 0% { opacity: 1 } 100% { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); -ms-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0 } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0 } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); -ms-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0 } 100% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); -ms-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1 } } @keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); -ms-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; -ms-transform: none; transform: none; opacity: 1 } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center; transform-origin: center; opacity: 1 } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0 } } @keyframes rotateOut { 0% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; opacity: 1 } 100% { -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); -ms-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0 } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0, 0, 1, 45deg); transform: rotate(0, 0, 1, 45deg); opacity: 0 } } @keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate(0, 0, 1, 45deg); -ms-transform: rotate(0, 0, 1, 45deg); transform: rotate(0, 0, 1, 45deg); opacity: 0 } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } @keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } @keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; opacity: 1 } 100% { -webkit-transform-origin: left bottom; -ms-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); -ms-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0 } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0 } } @keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; opacity: 1 } 100% { -webkit-transform-origin: right bottom; -ms-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0 } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1 } 100% { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } @keyframes hinge { 0% { -webkit-transform-origin: top left; -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: rotate3d(0, 0, 1, 80deg); -ms-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -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 } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); -ms-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -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; opacity: 1 } 100% { -webkit-transform: translate3d(0, 700px, 0); -ms-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0 } } .hinge { -webkit-animation-name: hinge; animation-name: hinge } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity: 1; -webkit-transform: none; transform: none } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg) } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn } @-webkit-keyframes rollOut { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } @keyframes rollOut { 0% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg) } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 50% { opacity: 1 } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 100% { opacity: 0 } } @keyframes zoomOut { 0% { opacity: 1 } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); -ms-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3) } 100% { opacity: 0 } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0) } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); -ms-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; -ms-transform-origin: left center; transform-origin: left center } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0) } 100% { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); -ms-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; -ms-transform-origin: right center; transform-origin: right center } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -ms-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19) } 100% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -ms-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1) } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp } .invisible { visibility: hidden !important } .hide { display: none !important } .show { display: block !important } .sr-only { height: 1px; width: 1px; overflow: hidden; position: absolute !important; clip: rect(1px, 1px, 1px, 1px) } .hidden-xs-up { display: none !important } @media (max-width: 479px) { .hidden-xs-down { display:none !important } } @media (min-width: 480px) { .hidden-sm-up { display:none !important } } @media (max-width: 767px) { .hidden-sm-down { display:none !important } } @media (min-width: 768px) { .hidden-md-up { display:none !important } } @media (max-width: 991px) { .hidden-md-down { display:none !important } } @media (min-width: 992px) { .hidden-lg-up { display:none !important } } @media (max-width: 1179px) { .hidden-lg-down { display:none !important } } @media (min-width: 1180px) { .hidden-xl-up { display:none !important } } .hidden-xl-down { display: none !important } .visible-print-block { display: none !important } @media print { .visible-print-block { display: block !important } } .visible-print-inline { display: none !important } @media print { .visible-print-inline { display: inline !important } } .visible-print-inline-block { display: none !important } @media print { .visible-print-inline-block { display: inline-block !important } } @media print { .hidden-print { display: none !important } } .clear::after,.clearfix::after { clear: both; content: ""; display: table } .row-gap-huge { margin-top: 60px; } .row-gap-medium { margin-top: 30px; } .row-gap-small { margin-top: 15px; } .pull-right { float: right !important } .pull-left { float: left !important } .inline { display: inline-block } .left { margin-left: 0 !important } .right { margin-right: 0 !important } .center { margin-left: auto; margin-right: auto } .center-block { display: block; margin-left: auto; margin-right: auto } .font-light { font-weight: 300; } .mb-0 { margin-bottom: 0 !important } .mb-half { margin-bottom: 12px !important } .mb-1 { margin-bottom: 24px !important } .mb-2 { margin-bottom: 48px !important } .mb-3 { margin-bottom: 72px !important } .mb-4 { margin-bottom: 96px !important } .mb-5 { margin-bottom: 120px !important } .mb-6 { margin-bottom: 144px !important } .mb-7 { margin-bottom: 168px !important } .mb-8 { margin-bottom: 192px !important } .mb-9 { margin-bottom: 216px !important } .mb-10 { margin-bottom: 240px !important } hr { border: 0; height: 0; margin-top: 0; margin-bottom: 0; max-width: 1180px; box-sizing: border-box; border-bottom: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(0,0,0,0.1) } .bar { position: relative } .bar--white::before { background-color: #fff !important } .bar--green::before { background-color: #15c26b !important } .bar--left::before { top: 20px; content: ""; left: -2px; width: 4px; height: 36px; position: absolute; background: #02b3e4 } @media screen and (min-width: 48rem) { .bar--left::before { top: 48px } } .bar--top::before { left: 0; content: ""; top: -12px; width: 60px; height: 4px; position: absolute; background-color: #02b3e4 } @media screen and (min-width: 48rem) { .bar--top::before { top:-24px } } .bar--bottom::before { left: 0; content: ""; width: 60px; height: 4px; bottom: -12px; position: absolute; background-color: #02b3e4 } @media screen and (min-width: 48rem) { .bar--bottom::before { bottom:-12px } } .shadow-center { box-shadow: 0px 1px 20px 0px rgba(46,61,73,0.2) } .shadow-right { box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15) } .bg-white { background-color: #fff !important } .bg-gray { background-color: #fafbfc !important } .bg-beige { background-color: #f4f4ef !important } .bg-slate { background-color: #2e3d49 !important } .bg-gradient-primary { background-image: linear-gradient(to bottom right, #02ccba, #a951ed) } .bg-gradient-secondary { background-image: linear-gradient(to bottom right, #02b3e4, #02ccba) } .bg-gradient-tertiary { background-image: linear-gradient(to bottom right, #a951ed, #ff5483) } .bg-gradient-blend { background-image: linear-gradient(to bottom right, #F7F7F7, #EAFBFF) } .beige-dark { color: #dfdfd1 !important } .beige-medium { color: #eaeae0 !important } .beige-light { color: #f4f4ef !important } .blue-dark { color: #028bb1 !important } .blue { /*color: #02b3e4 !important*/ color: #0474ff !important } .blue-light { color: #91daee !important } .green { color: #15c26b !important } .magenta { color: #ff5483 !important } .orange { color: #ffa234 !important } .red { color: #f04546 !important } .red-orange { color: #f95c3c !important } .yellow-dark { color: #ffae0c !important } .yellow { color: #ecc81a !important } .purple { color: #a951ed !important } .silver { color: #fafbfc !important } .slate-dark { color: #1c262f !important } .slate { color: #2e3d49 !important } .turquoise { color: #02ccba !important } .gray-dark { color: #525c65 !important } .gray-medium { color: #7d97ad !important } .gray { color: #bcc9d4 !important } .gray-light { color: #dbe2e8 !important } .white { color: #fff !important } .regular { font-weight: 400 !important } .light { font-weight: 300 !important } .italic,em { font-style: italic !important } .strong,strong { font-weight: 600 !important } .text-left { text-align: left !important } .text-right { text-align: right !important } .text-center { text-align: center !important } .text-justify { text-align: justify !important } .text-nowrap { white-space: nowrap !important } .lowercase { text-transform: lowercase } .uppercase { text-transform: uppercase } .capitalize { text-transform: capitalize } .no-margin { margin: 0; } *,*::before,*::after { box-sizing: border-box } /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% } body { margin: 0 } article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary { display: block } audio,canvas,progress,video { display: inline-block } audio:not([controls]) { display: none; height: 0 } progress { vertical-align: baseline } template,[hidden] { display: none } a { background-color: transparent; -webkit-text-decoration-skip: objects } a:active,a:hover { outline-width: 0 } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted } b,strong { font-weight: inherit } b,strong { font-weight: bolder } dfn { font-style: italic } h1 { font-size: 2em; margin: 0.67em 0 } mark { background-color: #ff0; color: #000 } small { font-size: 80% } sub,sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline } sub { bottom: -0.25em } sup { top: -0.5em } img { border-style: none; max-width: 100%; } svg:not(:root) { overflow: hidden } code,kbd,pre,samp { font-family: monospace, monospace; font-size: 1em } figure { margin: 1em 40px } hr { box-sizing: content-box; height: 0; overflow: visible } button,input,optgroup,select,textarea { font: inherit; margin: 0 } optgroup { font-weight: bold } button,input { overflow: visible } button,select { text-transform: none } button,html [type="button"],[type="reset"],[type="submit"] { -webkit-appearance: button } button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner { border-style: none; padding: 0 } button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring { outline: 1px dotted ButtonText } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal } textarea { overflow: auto } [type="checkbox"],[type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button { height: auto } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px } [type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration { -webkit-appearance: none } ::-webkit-input-placeholder { color: inherit; opacity: 0.54 } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } audio,canvas,iframe,img,svg,video { vertical-align: middle } #contain-all { width: 100%; overflow: hidden; background: #fff; backface-visibility: hidden; -webkit-transform-style: preserve-3d } .contain { max-width: 1180px; margin-left: auto; margin-right: auto; padding-top: 48px; padding-bottom: 48px; padding-left: 24px; padding-right: 24px } .contain::after { clear: both; content: ""; display: table } @media screen and (min-width: 48rem) { .contain { padding-top: 96px; padding-bottom: 96px } } @media screen and (min-width: 73.75rem) { .contain { padding-left:0; padding-right: 0 } .contain.no-padding { padding: 0 } } .contain--none { padding-top: 0px; padding-bottom: 0px; margin: 0 auto } @media screen and (min-width: 48rem) { .contain--none { padding-top: 0px; padding-bottom: 0px } } .contain--small { padding-top: 48px; padding-bottom: 48px; margin: 0 auto } @media screen and (min-width: 48rem) { .contain--small { padding-top: 72px; padding-bottom: 72px } } .contain--xs-small { padding-top: 15px; padding-bottom: 30px; margin: 0 auto } @media screen and (min-width: 48rem) { .contain--xs-small { padding-top: 30px; padding-bottom: 60px } } .contain-xs{ padding-left: 0; padding-right: 0; padding-top: 24px !important; padding-bottom: 24px !important; margin: 0 auto; } @media (max-width: 767px) { .contain-xs { padding-left: 15px !important; padding-right: 15px !important; } } body { background-color: #ffffff; color: #525c65; font-size: 16px; font-family: "Open Sans", sans-serif; line-height: 24px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } p { margin-top: 0; margin-bottom: 24px; font-size: 14px; line-height: 24px; color: #525c65; font-weight: 400 } @media screen and (min-width: 48rem) { p { margin-bottom: 24px } } @media screen and (min-width: 48rem) { p { font-size: 16px; line-height: 26px } } p.micro { font-size: 10px; line-height: 12px } @media screen and (min-width: 48rem) { p.micro { font-size: 10px; line-height: 12px; } } p.x-small { font-size: 12px; line-height: 24px; } @media screen and (min-width: 48rem) { p.x-small { font-size: 12px; line-height: 24px } } p small,p.small { font-size: 14px; line-height: 24px } @media screen and (min-width: 48rem) { p small,p.small { font-size: 14px; line-height: 24px } } p.large,p.lead { margin-top: 0; margin-bottom: 24px; font-size: 16px; line-height: 28px; font-weight: 400; } @media screen and (min-width: 48rem) { p.large,p.lead { margin-bottom: 48px } } @media screen and (min-width: 48rem) { p.large,p.lead { font-size: 18px; line-height: 32px } } p a { border-bottom: 1px solid #91daee } p.legible { max-width: 780px } a { border-bottom: none; text-decoration: none; color: #525c65; transition: color 0.3s ease; background-color: transparent; text-decoration: none; } a:active,a:focus,a:hover { color: #525c65; text-decoration: none; } a.white { color: #fff } a.white:hover { color: #cccccc } a.grey { color: #7d97ad } a.grey:hover { color: #4c6478 } .text-only,.more+[data-readmore-toggle] { font-size: 14px; line-height: 24px; width: auto; border-bottom: none; color: #02b3e4; display: inline-block; text-decoration: none; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; transition: color 0.3s ease, background 0.3s ease } @media screen and (min-width: 48rem) { .text-only,.more+[data-readmore-toggle] { font-size: 14px; line-height: 24px } } .text-only:hover,.more+[data-readmore-toggle]:hover { text-decoration: none; color: #028bb1 } blockquote { margin-top: 0; margin-bottom: 12px } @media screen and (min-width: 48rem) { blockquote { margin-bottom: 24px } } h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { margin-top: 0; margin-bottom: 24px; color: #2e3d49; -webkit-font-smoothing: antialiased } @media screen and (min-width: 48rem) { h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6 { margin-bottom: 24px } } h1.light,.h1.light,h2.light,.h2.light,h3.light,.h3.light,h4.light,.h4.light,h5.light,.h5.light,h6.light,.h6.light { color: #dbe2e8 } h1.dark,.h1.dark,h2.dark,.h2.dark,h3.dark,.h3.dark,h4.dark,.h4.dark,h5.dark,.h5.dark,h6.dark,.h6.dark { color: #2e3d49 } h1,.h1 { font-size: 40px; line-height: 48px; font-weight: 300 } @media screen and (min-width: 48rem) { h1,.h1 { font-size: 48px; line-height: 48px } } h1--headline,.h1--headline { font-size: 40px; line-height: 42px } @media screen and (min-width: 48rem) { h1--headline,.h1--headline { font-size: 48px; line-height: 60px } } h2,.h2 { font-size: 28px; line-height: 36px; font-weight: 300 } @media screen and (min-width: 48rem) { h2,.h2 { font-size: 32px; line-height: 36px } } h3,.h3 { font-size: 24px; line-height: 36px; font-weight: 300 } @media screen and (min-width: 48rem) { h3,.h3 { font-size: 28px; line-height: 36px } } h4,.h4 { font-size: 18px; line-height: 28px; font-weight: 400 } @media screen and (min-width: 48rem) { h4,.h4 { font-size: 20px; line-height: 32px; } } h5,.h5 { font-size: 16px; line-height: 28px; font-weight: 600 } @media screen and (min-width: 48rem) { h5,.h5 { font-size: 18px; line-height: 32px } } h6,.h6 { font-size: 14px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: #7d97ad } @media screen and (min-width: 48rem) { h6,.h6 { font-size: 14px; line-height: 24px } } input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="month"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],input:not([type]),textarea,select[multiple] { margin-top: 0; margin-bottom: 12px; width: 100%; outline: none; color: #7d97ad; vertical-align: top; height: 48px; border: 1px solid #dbe2e8; padding: 0 20px; box-sizing: border-box; font-size: 14px; box-shadow: 0 2px 8px 0 rgba(46,61,73,0.06); border-radius: 2px; transition: box-shadow 0.3s ease, border 0.3s ease } .payment-list-items li { list-style: none; counter-increment: foo; display: table-row; } .payment-list-items li:before { font-family: "FontAwesome"; content: "\f00c"; color: #1f8fc1; display: table-cell; text-align: right; padding-right: .3em; } @media screen and (min-width: 48rem) { input[type="color"],input[type="date"],input[type="datetime"],input[type="datetime-local"],input[type="email"],input[type="month"],input[type="number"],input[type="password"],input[type="search"],input[type="tel"],input[type="text"],input[type="time"],input[type="url"],input[type="week"],input:not([type]),textarea,select[multiple] { margin-bottom: 24px } } input[type="color"]:hover,input[type="color"].hover,input[type="date"]:hover,input[type="date"].hover,input[type="datetime"]:hover,input[type="datetime"].hover,input[type="datetime-local"]:hover,input[type="datetime-local"].hover,input[type="email"]:hover,input[type="email"].hover,input[type="month"]:hover,input[type="month"].hover,input[type="number"]:hover,input[type="number"].hover,input[type="password"]:hover,input[type="password"].hover,input[type="search"]:hover,input[type="search"].hover,input[type="tel"]:hover,input[type="tel"].hover,input[type="text"]:hover,input[type="text"].hover,input[type="time"]:hover,input[type="time"].hover,input[type="url"]:hover,input[type="url"].hover,input[type="week"]:hover,input[type="week"].hover,input:not([type]):hover,input:not([type]).hover,textarea:hover,textarea.hover,select[multiple]:hover,select[multiple].hover { box-shadow: 0 4px 8px 0 rgba(46,61,73,0.12) } input[type="color"]:focus,input[type="color"].focus,input[type="date"]:focus,input[type="date"].focus,input[type="datetime"]:focus,input[type="datetime"].focus,input[type="datetime-local"]:focus,input[type="datetime-local"].focus,input[type="email"]:focus,input[type="email"].focus,input[type="month"]:focus,input[type="month"].focus,input[type="number"]:focus,input[type="number"].focus,input[type="password"]:focus,input[type="password"].focus,input[type="search"]:focus,input[type="search"].focus,input[type="tel"]:focus,input[type="tel"].focus,input[type="text"]:focus,input[type="text"].focus,input[type="time"]:focus,input[type="time"].focus,input[type="url"]:focus,input[type="url"].focus,input[type="week"]:focus,input[type="week"].focus,input:not([type]):focus,input:not([type]).focus,textarea:focus,textarea.focus,select[multiple]:focus,select[multiple].focus { border-color: #91daee; box-shadow: 0 0px 12px 4px rgba(145,218,238,0.35) } input[type="color"]:disabled,input[type="color"].disabled,input[type="date"]:disabled,input[type="date"].disabled,input[type="datetime"]:disabled,input[type="datetime"].disabled,input[type="datetime-local"]:disabled,input[type="datetime-local"].disabled,input[type="email"]:disabled,input[type="email"].disabled,input[type="month"]:disabled,input[type="month"].disabled,input[type="number"]:disabled,input[type="number"].disabled,input[type="password"]:disabled,input[type="password"].disabled,input[type="search"]:disabled,input[type="search"].disabled,input[type="tel"]:disabled,input[type="tel"].disabled,input[type="text"]:disabled,input[type="text"].disabled,input[type="time"]:disabled,input[type="time"].disabled,input[type="url"]:disabled,input[type="url"].disabled,input[type="week"]:disabled,input[type="week"].disabled,input:not([type]):disabled,input:not([type]).disabled,textarea:disabled,textarea.disabled,select[multiple]:disabled,select[multiple].disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none } input[type="color"]:disabled:hover,input[type="color"].disabled:hover,input[type="date"]:disabled:hover,input[type="date"].disabled:hover,input[type="datetime"]:disabled:hover,input[type="datetime"].disabled:hover,input[type="datetime-local"]:disabled:hover,input[type="datetime-local"].disabled:hover,input[type="email"]:disabled:hover,input[type="email"].disabled:hover,input[type="month"]:disabled:hover,input[type="month"].disabled:hover,input[type="number"]:disabled:hover,input[type="number"].disabled:hover,input[type="password"]:disabled:hover,input[type="password"].disabled:hover,input[type="search"]:disabled:hover,input[type="search"].disabled:hover,input[type="tel"]:disabled:hover,input[type="tel"].disabled:hover,input[type="text"]:disabled:hover,input[type="text"].disabled:hover,input[type="time"]:disabled:hover,input[type="time"].disabled:hover,input[type="url"]:disabled:hover,input[type="url"].disabled:hover,input[type="week"]:disabled:hover,input[type="week"].disabled:hover,input:not([type]):disabled:hover,input:not([type]).disabled:hover,textarea:disabled:hover,textarea.disabled:hover,select[multiple]:disabled:hover,select[multiple].disabled:hover { box-shadow: 0 2px 8px 0 rgba(46,61,73,0.06) } input[type="color"].inline,input[type="date"].inline,input[type="datetime"].inline,input[type="datetime-local"].inline,input[type="email"].inline,input[type="month"].inline,input[type="number"].inline,input[type="password"].inline,input[type="search"].inline,input[type="tel"].inline,input[type="text"].inline,input[type="time"].inline,input[type="url"].inline,input[type="week"].inline,input:not([type]).inline,textarea.inline,select[multiple].inline { display: inline-block; margin-right: 12px } input[type="color"].inline:last-child,input[type="date"].inline:last-child,input[type="datetime"].inline:last-child,input[type="datetime-local"].inline:last-child,input[type="email"].inline:last-child,input[type="month"].inline:last-child,input[type="number"].inline:last-child,input[type="password"].inline:last-child,input[type="search"].inline:last-child,input[type="tel"].inline:last-child,input[type="text"].inline:last-child,input[type="time"].inline:last-child,input[type="url"].inline:last-child,input[type="week"].inline:last-child,input:not([type]).inline:last-child,textarea.inline:last-child,select[multiple].inline:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { input[type="color"].inline,input[type="date"].inline,input[type="datetime"].inline,input[type="datetime-local"].inline,input[type="email"].inline,input[type="month"].inline,input[type="number"].inline,input[type="password"].inline,input[type="search"].inline,input[type="tel"].inline,input[type="text"].inline,input[type="time"].inline,input[type="url"].inline,input[type="week"].inline,input:not([type]).inline,textarea.inline,select[multiple].inline { margin-top:0; margin-bottom: 0 } } @media screen and (min-width: 48rem) and (min-width: 48rem) { input[type="color"].inline,input[type="date"].inline,input[type="datetime"].inline,input[type="datetime-local"].inline,input[type="email"].inline,input[type="month"].inline,input[type="number"].inline,input[type="password"].inline,input[type="search"].inline,input[type="tel"].inline,input[type="text"].inline,input[type="time"].inline,input[type="url"].inline,input[type="week"].inline,input:not([type]).inline,textarea.inline,select[multiple].inline { margin-bottom:0 } } fieldset { margin-top: 0; margin-bottom: 12px; border: 0; padding: 0; background-color: transparent } @media screen and (min-width: 48rem) { fieldset { margin-bottom: 24px } } legend { margin-top: 0; margin-bottom: 12px; padding: 0 } @media screen and (min-width: 48rem) { legend { margin-bottom: 24px } } label { margin-top: 0; margin-bottom: 12px; display: block } @media screen and (min-width: 48rem) { label { margin-bottom: 24px } } textarea { padding: 11px 20px } input[type="number"] { -moz-appearance: textfield } input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none } [type="search"] { appearance: none } [type="radio"] { display: inline; margin-right: 12px } [type="file"] { margin-top: 0; margin-bottom: 12px; width: 100% } @media screen and (min-width: 48rem) { [type="file"] { margin-bottom: 24px } } select { margin-top: 0; margin-bottom: 12px; max-width: 100%; width: auto } @media screen and (min-width: 48rem) { select { margin-bottom: 24px } } .checkbox { position: relative } .checkbox input[type=checkbox] { display: none !important } .checkbox input[type=checkbox]:checked+label::after { background-size: 60%; opacity: 1 } .checkbox input[type=checkbox]:disabled+label { opacity: .5 } .checkbox label { font-size: 14px; line-height: 24px; margin-top: 0; margin-bottom: 12px; clear: left; display: block; position: relative; padding-left: 24px; color: #7d97ad; letter-spacing: 1px; text-transform: uppercase } @media screen and (min-width: 48rem) { .checkbox label { font-size: 14px; line-height: 24px } } @media screen and (min-width: 48rem) { .checkbox label { margin-bottom: 12px } } .checkbox label a { color: #7d97ad; text-decoration: none; border-bottom: 1px solid #91daee; transition: color 0.3s ease } .checkbox label a:hover { color: #9db0c0 } .checkbox label::before,.checkbox label::after { content: ''; position: absolute; top: 4px; left: 0; width: 16px; height: 16px; background: white; border: 1px solid #dbe2e8 } .checkbox label::after { opacity: 0; background-size: 20%; background: url(../images/check_blue.svg) no-repeat center; transition: opacity 0.3s ease, background-size 0.3s ease } input.form-error,select.form-error,textarea.form-error { color: #B94A48; border: 1px solid #f95c3c } .error-container { height: 36px; position: absolute; left: 0; right: 0; width: 90%; margin: 0 auto; display: block; text-align: center; top: -3rem; background-color: #f95c3c; border-radius: 2px; transition: all 0.3s ease; opacity: 0 } .error-container.filled { transition: all 0.3s ease; opacity: 1 } .error-container:after { content: ''; width: 0; height: 0; top: 18px; position: relative; border-style: solid; border-width: 8px 6px 0; border-color: #f95c3c transparent transparent } .error-text { font-size: 12px; line-height: 24px; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: #fff; display: block; text-align: center } @media screen and (min-width: 48rem) { .error-text { font-size: 12px; line-height: 24px } } ul,ol { padding: 0; list-style-type: none; margin-top: 0; margin-bottom: 12px } @media screen and (min-width: 48rem) { ul,ol { margin-bottom: 24px } } ul.alph,ul.disc,ul.num,ol.alph,ol.disc,ol.num { list-style-type: disc; padding-left: 24px } ul.alph p,ul.disc p,ul.num p,ol.alph p,ol.disc p,ol.num p { padding-left: 12px } ul.alph.no-margin p,ul.disc.no-margin p,ul.num.no-margin p,ol.alph.no-margin p,ol.disc.no-margin p,ol.num.no-margin p { margin-bottom: 0 } ul.alph,ol.alph { list-style-type: lower-alpha } ul.checks li,ol.checks li { font-size: 14px; line-height: 24px; margin-top: 0; margin-bottom: 12px; display: block; position: relative; padding-left: 36px } @media screen and (min-width: 48rem) { ul.checks li,ol.checks li { font-size: 16px; line-height: 28px } } @media screen and (min-width: 48rem) { ul.checks li,ol.checks li { margin-bottom: 24px } } ul.checks li:last-child,ol.checks li:last-child { margin-bottom: 0 } ul.checks li::before,ol.checks li::before { background: #15c26b url(../images/icon_checkmark_white.svg) no-repeat center; content: ""; left: 0; top: 3px; width: 20px; height: 20px; position: absolute; background-size: 60%; border-radius: 20px } @media screen and (min-width: 48rem) { ul.checks li::before,ol.checks li::before { top: 5px } } ul.num,ol.num { list-style-type: decimal } ul:last-child,ol:last-child { margin-bottom: 0 } dl { margin-top: 0; margin-bottom: 12px } @media screen and (min-width: 48rem) { dl { margin-bottom: 24px } } dt { margin-top: 0; margin-bottom: 12px; font-weight: 600 } @media screen and (min-width: 48rem) { dt { margin-bottom: 24px } } dd { margin-top: 0; margin-bottom: 24px } @media screen and (min-width: 48rem) { dd { margin-bottom: 48px } } figure { margin-top: 0; margin-bottom: 12px } @media screen and (min-width: 48rem) { figure { margin-bottom: 24px } } img,picture,svg { margin: 0; max-width: 100%; height: auto } table { border-collapse: collapse; margin: 12px 0; table-layout: fixed; width: 100% } th { border-bottom: 1px solid #a4aaae; font-weight: 600; padding: 12px 0; text-align: left } td { border-bottom: 1px solid #dbe2e8; padding: 12px 0 } tr,td,th { vertical-align: middle } .breadcrumbs { margin-bottom: 36px } .breadcrumbs ul { list-style-type: none; margin: 0; padding: 0 } .breadcrumbs ul li { display: inline-block; margin: 0; font-size: 12px; font-weight: 600; color: #7d97ad; text-transform: uppercase } .breadcrumbs ul li::after { content: "›"; margin: 0 8px 0 12px } .breadcrumbs ul li:last-child::after { display: none } .breadcrumbs ul li a { color: #7d97ad; text-decoration: none; transition: color .3s ease } .breadcrumbs ul li a:hover { color: #4c6478 } /*:target:before { content: ""; display: inline-block; height: 130px; margin: -130px 0 0 }*/ button,input[type="button"],input[type="reset"],input[type="submit"],.button,.button--primary,.button--secondary,.button--outline,.button--white,.button--transparent,.button--navigation,.button--turquoise { display: block; cursor: pointer; appearance: none; user-select: none; text-align: center; white-space: nowrap; vertical-align: top; text-decoration: none; vertical-align: middle; height: 48px; padding: 0 8px; text-transform: uppercase; font-size: 16px; font-weight: 600; font-size: 14px; font-family: "Open Sans", sans-serif; line-height: 42px; -webkit-font-smoothing: antialiased; border-radius: 4px; letter-spacing: 2px; transition: all 0.3s ease } .button--primary { width: 220px; color: #fff; background-color: #02b3e4; border: 2px solid transparent } .button--primary:focus,.button--primary.focus,.button--primary:hover { color: white; border-color: transparent; background-color: #029fcb } .button--primary.disabled,.button--primary[disabled],fieldset[disabled] .button--primary { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--primary.inline { display: inline-block } .button--primary.xs { width: 124px; height: 36px; font-size: 14px; font-weight: 600; line-height: 32px; } .button--primary.sm { width: 180px } .button--primary.lg { width: 280px } .button--primary.full { width: 100% } .button--primary>svg { fill: currentcolor } .button--secondary { width: 220px; color: #fff; background-color: #7d97ad; border: 2px solid transparent } .button--secondary:focus,.button--secondary.focus,.button--secondary:hover { color: white; border-color: transparent; background-color: #6d8aa3 } .button--secondary.disabled,.button--secondary[disabled],fieldset[disabled] .button--secondary { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--secondary.inline { display: inline-block } .button--secondary.xs { width: 124px; height: 36px; font-size: 14px; font-weight: 600; line-height: 32px; } .button--secondary.sm { width: 180px } .button--secondary.lg { width: 280px } .button--secondary.full { width: 100% } .button--secondary>svg { fill: currentcolor } .button--outline { width: 220px; color: #fff; background-color: transparent; border: 0.125rem solid #fff } .button--outline:focus,.button--outline.focus,.button--outline:hover { color: white; border-color: #fff; background-color: transparent } .button--outline.disabled,.button--outline[disabled],fieldset[disabled] .button--outline { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--outline.inline { display: inline-block } .button--outline.sm { width: 180px; } .button--outline.lg { width: 280px } .button--outline.full { width: 100% } .button--outline>svg { fill: currentcolor } .button--white { width: 220px; color: #02b3e4; background-color: #fff; border: 2px solid transparent } .button--white:focus,.button--white.focus,.button--white:hover { color: #1cccfd; border-color: transparent; background-color: #f2f2f2 } .button--white.disabled,.button--white[disabled],fieldset[disabled] .button--white { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--white.inline { display: inline-block } .button--white.sm { width: 180px } .button--white.lg { width: 280px } .button--white.full { width: 100% } .button--white>svg { fill: currentcolor } .button--transparent { width: 220px; color: #525c65; background-color: transparent; border: 2px solid transparent } .button--transparent:focus,.button--transparent.focus,.button--transparent:hover { color: #697681; border-color: transparent; background-color: transparent } .button--transparent.disabled,.button--transparent[disabled],fieldset[disabled] .button--transparent { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--transparent.inline { display: inline-block } .button--transparent.sm { width: 180px } .button--transparent.lg { width: 280px } .button--transparent.full { width: 100% } .button--transparent>svg { fill: currentcolor } .button--navigation { color: #fff; background-color: transparent; border: 2px solid transparent } .button--navigation:focus,.button--navigation.focus,.button--navigation:hover { color: white; border-color: transparent; background-color: transparent } .button--navigation.disabled,.button--navigation[disabled],fieldset[disabled] .button--navigation { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--navigation.inline { display: inline-block } .button--navigation.sm { width: 180px } .button--navigation.lg { width: 280px } .button--navigation.full { width: 100% } .button--navigation>svg { fill: currentcolor } .button--turquoise { color: #fff; /*background-color: #02ccba;*/ background-color: #0474ff; border: 2px solid transparent } .button--turquoise.xs { width: 124px; height: 36px; font-size: 14px; font-weight: 600; line-height: 32px; } .button--turquoise, .md { width: 220px } .button--turquoise:focus,.button--turquoise.focus,.button--turquoise:hover { color: white; border-color: transparent; background-color: #02b3a3 } .button--turquoise.disabled,.button--turquoise[disabled],fieldset[disabled] .button--turquoise { cursor: not-allowed; border-color: #dbe2e8; background-color: #dbe2e8 } .button--turquoise.inline { display: inline-block } .button--turquoise.sm { width: 180px } .button--turquoise.lg { width: 280px } .button--turquoise.full { width: 100% } .button--turquoise>svg { fill: currentcolor } .header { max-width: 100%; margin-left: auto; margin-right: auto } .header::after { clear: both; content: ""; display: table } .header.header--clone { width: 100% } .header.header--clone .header__navbar { height: 72px } .header.header--stick { background-color: #fff; z-index: 8000; box-shadow: 0px 1px 2px rgba(0,0,0,0.1) } .header__navbar { margin-left: auto; margin-right: auto; height: 72px; padding: 0 24px; } .header__navbar::after { clear: both; content: ""; display: table } @media screen and (min-width: 48rem) { .header__navbar { height: 72px } } @media screen and (min-width: 73.75rem) { .header__navbar { padding:0 } } .header__navbar--toggle { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); float: left; display: block; margin-right: 1.69492%; width: 15.25424% } .header__navbar--toggle:last-child { margin-right: 0 } @media screen and (min-width: 30rem) { .header__navbar--toggle { display:none } } .header__navbar--logo { position: relative; top: 30%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); float: left; display: block; margin-right: 1.69492%; width: 66.10169% } .header__navbar--logo:last-child { margin-right: 0 } @media screen and (min-width: 30rem) { .header__navbar--logo { float:left; display: block; margin-right: 1.69492%; width: 32.20339% } .header__navbar--logo:last-child { margin-right: 0 } } .header__navbar--navigation { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: none } @media screen and (min-width: 30rem) { .header__navbar--navigation { float:left; display: block; margin-right: 1.69492%; width: 66.10169% } .header__navbar--navigation:last-child { margin-right: 0 } } .header__navbar--logo { text-align: center } .header__navbar--logo .logo-wordmark { width: 217px; /*height: 32px;*/ display: none } @media screen and (min-width: 30rem) { .header__navbar--logo .logo-wordmark { display:block } } .header__navbar--logo .logo-mark { display: block; margin: 0 auto; /* width: 32px; */ height: 32px } @media screen and (min-width: 30rem) { .header__navbar--logo .logo-mark { display:none } } @media screen and (min-width: 30rem) { .header__navbar--logo { text-align:left } } .header__navbar--toggle .nav-toggle { display: block; width: 20px; height: 20px; cursor: pointer; transition: transform .25s ease } .header__navbar--toggle .nav-toggle .bar { display: block; width: 100%; height: 3px; margin-left: -8px; margin-top: 3px; background: #02b3e4; transition: opacity .25s ease, transform .25s ease; user-select: none } .header__navbar--navigation nav { float: right } .header__navbar--navigation a,.header__navbar--navigation div { float: left } .header__navbar--navigation .button { display: none; letter-spacing: 0; font-size: 14px; text-transform: capitalize; height: 36px; font-weight: 400; margin-left: 25px; line-height: 32px; } .header__navbar--navigation .button:first-child { margin-left: 0 } @media screen and (min-width: 62rem) { .header__navbar--navigation .button { display:block } } .header__navbar--navigation .button--navigation { padding: 0; color: #525c65 } .header__navbar--navigation .button--navigation:hover { color: #474f57 } .header__navbar--navigation .button--primary,.header__navbar--navigation .button--turquoise { width: 124px; box-shadow: 8px 10px 20px 0px rgba(46,61,73,0.15) } .header__navbar--navigation .button--primary:hover,.header__navbar--navigation .button--turquoise:hover { box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2); background-color: #02d1bf } .header__navbar--navigation .button--primary:hover { background-color: #02b7e9 } .header__navbar--navigation .button--turquoise { margin-left: 25px } .header__navbar--navigation .button--guest,.header__navbar--navigation .button--student, .header__navbar--navigation .button--free { display: none } .header__navbar--navigation .divider { cursor: default } .header__navbar--navigation .divider::before { content: ''; border-left: 2px solid rgba(82,92,101,0.4); width: 0px; height: 12px } .header__sidenav { background-color: #2e3d49 } .header__sidenav--logo { height: 72px; display: block; background-color: #1C262F } .header__sidenav--logo::after { clear: both; content: ""; display: table } .header__sidenav--logo .logo-link { display: block; width: 100%; height: 100% } .header__sidenav--logo .logo-link .logo-wordmark { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); padding-left: 24px; width: 177px; height: 31px } .header__sidenav--logo .logo-link #wordmark { fill: #fff } .header__sidenav--navigation { display: block } .header__sidenav--navigation::after { clear: both; content: ""; display: table } .header__sidenav--navigation li { height: 72px } .header__sidenav--navigation a { padding-top: 24px; padding-bottom: 24px; color: #fff; display: block; padding-left: 24px } @media screen and (min-width: 48rem) { .header__sidenav--navigation a { padding-top: 24px; padding-bottom: 24px } } .header__sidenav--navigation a:hover { color: #cccccc } .header__sidenav--navigation .guest,.header__sidenav--navigation .student { display: none } .header__sidenav--navigation .guest a,.header__sidenav--navigation .student a { color: #02b3e4 } .header__sidenav--navigation .guest a:hover,.header__sidenav--navigation .student a:hover { color: #01647f } .header--clone { top: 0; left: 0; position: fixed; z-index: 7000; backface-visibility: hidden; transform: translate3d(0, -100%, 0); -webkit-transform-style: preserve-3d; transition: all 0.3s ease } .header--stick { transform: translate3d(0, 0, 0) } .header--open { transform: translate3d(260px, 0, 0) } .slideout-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; overflow-y: auto; z-index: 6000; width: 260px; -webkit-overflow-scrolling: touch } .slideout-panel { position: relative; z-index: 7000 } .slideout-open,.slideout-open body,.slideout-open .slideout-panel { overflow: hidden } .slideout-open .slideout-menu { display: block } .pill { font-size: 14px; line-height: 24px; height: 24px; color: transparent; padding: 2px 6px; border-radius: 2px; letter-spacing: 2px; z-index: 5000; text-transform: uppercase; font-weight: 600; box-shadow: 4px 6px 8px 0px rgba(46,61,73,0.2) } @media screen and (min-width: 48rem) { .pill { font-size: 14px; line-height: 24px; } } .pill--white { background-color: #fff; color: #7d97ad; } .hero { background-size: cover; background-repeat: no-repeat; background-position: center center } .hero a { color: #fff } .hero a:hover { color: #f2f2f2 } .hero a.button--white { color: #02b3e4 } .hero h1,.hero h2,.hero h3,.hero h4,.hero h5,.hero h6,.hero p,.hero .h1,.hero .h2,.hero .h3,.hero .h4,.hero .h5,.hero .h6 { color: #fff; margin-left: auto; margin-right: auto } .hero h1:last-child,.hero h2:last-child,.hero h3:last-child,.hero h4:last-child,.hero h5:last-child,.hero h6:last-child,.hero p:last-child,.hero .h1:last-child,.hero .h2:last-child,.hero .h3:last-child,.hero .h4:last-child,.hero .h5:last-child,.hero .h6:last-child { margin-bottom: 0 } .hero p { max-width: 580px } .hero .contain { padding-top: 48px; padding-bottom: 48px } @media screen and (min-width: 48rem) { .hero .contain { padding-top:0px; padding-bottom: 0px } } @media screen and (min-width: 48rem) { .hero .contain { height: 600px } } .hero__content { float: left; display: block; margin-right: 1.69492%; width: 100%; text-align: center } .hero__content:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .hero__content { position:relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%) } } .hero__logo { margin-top: 0; margin-bottom: 24px } @media screen and (min-width: 48rem) { .hero__logo { margin-bottom: 48px } } @media screen and (min-width: 48rem) { .hero--half .contain { height: 384px } } .hero--inverse { margin-top: -96px } .hero--inverse .contain { padding-top: 72px; padding-bottom: 72px } @media screen and (min-width: 48rem) { .hero--inverse .contain { padding-top:0px; padding-bottom: 0px } } .hero--inverse .hero__content { margin-top: 48px } @media screen and (min-width: 48rem) { .hero--inverse .hero__content { margin-top:-24px } } .hero-video { margin: 0 auto 48px; max-width: 640px } .hero-video .video_contain { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; cursor: pointer; z-index: 1000; box-shadow: 0 5px 20px 0 rgba(46,61,73,0.12) } .hero-video .video_contain iframe,.hero-video .video_contain object,.hero-video .video_contain embed { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .hero-video .video_contain img { float: left } .hero-video .video_contain .play_icon { position: absolute; left: 50%; top: 50%; z-index: 1; display: inline-block; width: 80px; height: 80px; margin-left: 5px; transform: translate(-50%, -50%) } .hero-video .video_contain .play_icon::before { content: ""; display: block; position: absolute; z-index: -1; left: 40%; bottom: 15%; width: 55%; height: 0%; background: #02b3e4; transform: translateX(-50%) rotate(32deg); transition: height .5s ease-in-out } .hero-video .video_contain:hover .play_icon::before { height: 55% } .home-page .button--navigation { color: #020202 } .home-page .button--navigation:hover { color: #020202 } .home-page .header__navbar--navigation .divider::before { border-left: 2px solid rgba(255,255,255,0.4) } .home-page .header--stick .header__navbar--navigation .button--navigation { color: #525c65 } .home-page .header--stick .header__navbar--navigation .button--navigation:hover { color: #697681 } .home-page .header--stick .header__navbar--navigation .divider::before { border-left: 2px solid rgba(82,92,101,0.4) } .home-page .header--stick .logo-wordmark img { display: block; } .home-page .header--stick .header__navbar--navigation .button--free{ display: block; } .home-page .logo-wordmark img { display: block; } @media screen and (min-width: 30rem) { .home-page .header--stick .logo-mark img { display: block; } .home-page .logo-mark img { display: none; } } .home-page .hero { background-image: url(../images/BG_2.jpg); } .home-page .hero--am { background-image: url(../images/am.png); } .hero-overlay { position: relative; z-index: -1; } .hero-overlay::before { content: " "; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000000; opacity: .4 } @media screen and (min-width: 648px) { .hero-overlay::before { opacity:.4 } } .home-page .hero .sentence { position: relative; white-space: no-wrap; margin-top: 0; margin-bottom: 48px } @media screen and (min-width: 48rem) { .home-page .hero .sentence { margin-bottom: 48px } } .home-page .hero .sentence .words { display: block } @media screen and (min-width: 62rem) { .home-page .hero .sentence .words { display:inline } } .home-page .hero .sentence .words span { opacity: 0; overflow: hidden; position: absolute; font-weight: 600 } @media screen and (min-width: 62rem) { .home-page .words-1 span { text-indent: 0px } .home-page .words-2 span { text-indent: 8px } } .home-page .hero h2 { font-size: 16px; line-height: 28px } @media screen and (min-width: 30rem) { .home-page .hero h2 { font-size: 24px; line-height: 36px } } @media screen and (min-width: 48rem) { .home-page .hero h2 { font-size: 32px; line-height: 36px } } .home-page .words-1 span { animation: firstWord 16s linear infinite 0s } .home-page .words-2 span { animation: secondWord 16s linear infinite 0s } .home-page .words span:nth-child(2) { animation-delay: 4s } .home-page .words span:nth-child(3) { animation-delay: 8s } .home-page .words span:nth-child(4) { animation-delay: 12s } @keyframes firstWord { 0% { opacity: 0; height: 0; animation-timing-function: ease-in } 8% { opacity: 1; height: 100% } 19% { opacity: 1; height: 100% } 25% { opacity: 0; height: 100% } 100% { opacity: 0 } } @keyframes secondWord { 0% { opacity: 0; height: 0; animation-timing-function: ease-in } 10% { opacity: 1; height: 0 } 20% { opacity: 1; height: 100% } 27% { opacity: 0; height: 100% } 100% { opacity: 0 } } .intro .contain { padding-top: 15px; padding-bottom: 15px } .intro .contain::before { content: ''; width: 100%; height: 660px; z-index: -1000; background: linear-gradient(to bottom right, #F7F7F7, #EAFBFF); transform-origin: left bottom; position: absolute; top: 0; left: 0; -webkit-transform: skew(0deg, -15deg); -moz-transform: skew(0deg, -15deg); -ms-transform: skew(0deg, -15deg); -o-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg) } .home-page .intro .contain::before { content: ''; width: 100%; height: 950px; z-index: -1000; background: linear-gradient(to bottom right, #F7F7F7, #EAFBFF); transform-origin: left bottom; position: absolute; top: 0; left: 0; -webkit-transform: skew(0deg, -15deg); -moz-transform: skew(0deg, -15deg); -ms-transform: skew(0deg, -15deg); -o-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg) } @media screen and (min-width: 48rem) { .intro .contain::before { content:''; width: 100%; height: 1000px; z-index: -1000; background: linear-gradient(to bottom right, #F7F7F7, #EAFBFF); transform-origin: left bottom; position: absolute; top: 0; left: 0; -webkit-transform: skew(0deg, -15deg); -moz-transform: skew(0deg, -15deg); -ms-transform: skew(0deg, -15deg); -o-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg) } .home-page .intro .contain::before { content:''; width: 100%; height: 1350px; z-index: -1000; background: linear-gradient(to bottom right, #F7F7F7, #EAFBFF); transform-origin: left bottom; position: absolute; top: 0; left: 0; -webkit-transform: skew(0deg, -15deg); -moz-transform: skew(0deg, -15deg); -ms-transform: skew(0deg, -15deg); -o-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg) } } .intro__content { float: left; display: block; margin-right: 1.69492%; width: 100%; text-align: center } .intro__content:last-child { margin-right: 0 } .intro__content p { margin-top: 0; margin-bottom: 24px } @media screen and (min-width: 48rem) { .intro__content p { margin-bottom: 24px } } .intro__partners { float: left; display: block; margin-right: 1.69492%; width: 100% } .intro__partners:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .intro__partners .affiliates__image { height:54px; margin: 0 6px } } .card { margin-top: 0; margin-bottom: 24px; background: #fff; text-align: left; position: relative; border: 1px solid #dbe2e8; box-shadow: 0 2px 4px 0 rgba(46,61,73,0.12); border-radius: 2px; transition: box-shadow 0.3s ease, border 0.3s ease } @media screen and (min-width: 48rem) { .card { margin-bottom: 24px } } .card:hover { box-shadow: 0 4px 8px 0 rgba(46,61,73,0.12); border: 1px solid #bcc9d4 } .card.no-hover:hover { border: 1px solid #dbe2e8; box-shadow: 0 2px 4px 0 rgba(46,61,73,0.12) } .card:last-child { margin-bottom: 0 } .list-contents { max-width: 100%; margin-left: auto; margin-right: auto } .list-contents::after { clear: both; content: ""; display: table } .list-contents.contain { text-align: center } .card__container { float: left; display: block; margin-right: 1.69492%; width: 100%; margin-top: 0; margin-bottom: 24px } .card__container:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .card__container { margin-bottom: 72px; } } @media screen and (min-width: 30rem) { .card__container { float:left; display: block; margin-right: 1.69492%; width: 66.10169%; margin-left: 16.94915% } .card__container:last-child { margin-right: 0 } .card__container:nth-child(2n) { margin-right: 0 } .card__container:nth-child(2n+1) { clear: left } } @media screen and (min-width: 48rem) { .card__container { float:left; display: block; margin-right: 1.69492%; width: 49.15254%; margin-left: 0% } .card__container:last-child { margin-right: 0 } .card__container .card--content { margin-left: auto; margin-right: auto } .card__container:nth-last-child(-n+3) { margin-bottom: 0 } } @media screen and (min-width: 62rem) { .card__container { float:left; display: block; margin-right: 1.69492%; width: 32.20339% } .card__container:last-child { margin-right: 0 } .card__container:nth-child(2n) { margin-right: 1.69492% } .card__container:nth-child(2n+1) { clear: none } .card__container:nth-child(3n) { margin-right: 0 } .card__container:nth-child(3n+1) { clear: left } } /*.card__container .card--content__header--overlay { background-color: rgba(125,151,173,0.8) } .card__container .card--content__header--overlay .pill { color: #7d97ad }*/ .card--content__header--overlay .card__container{ background-color: transparent; } .card--content__header--overlay .pill .card__container{ color: #fff; background-color: #f6a926; } @media screen and (min-width: 73.75rem) { .card__container:nth-of-type(3n+1) .card--content { margin-left: 0; } .card__container:nth-of-type(3n+2) .card--content { margin-left: auto; margin-right: auto } .card__container:nth-of-type(3n+3) .card--content { float: right; margin-left: 0; } } .card--content { height: 312px; border: none; box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15); border-radius: 6px } @media screen and (min-width: 48rem) { .card--content { height: 360px } } @media screen and (min-width: 73.75rem) { .card--content { /* max-width: 348px */ width: 348px; } } .card--content:hover { box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2); border: none } .card--content a { width: 100%; height: 100%; display: block } .card--content__header { border-top-left-radius: 6px; border-top-right-radius: 6px; height: 156px } .card--content__header { width: 348px; height: 156px; background-size: cover !important; width: 100% } .card--content__header--overlay { border-top-left-radius: 6px; border-top-right-radius: 6px; height: 156px; width: 100%; z-index: 4000 } .card--content__header--overlay .pill { position: relative; top: 8px; left: 12px } .card--content__title { padding-top: 12px; padding-bottom: 12px; height: 84px; padding: 20px 24px; position: relative } @media screen and (min-width: 48rem) { .card--content__title { padding-top: 24px; padding-bottom: 24px } } @media screen and (min-width: 48rem) { .card--content__title { height: 132px; padding: 24px 32px } } .card--content__title h4 { margin-bottom: 0; font-size: 18px; } .card--content__affiliates { padding: 24px; width: 100%; position: relative } @media screen and (min-width: 48rem) { .card--content__affiliates { padding: 24px 32px } } .card--content__affiliates ul { height: 26px; overflow: hidden } .card--content__affiliates ul li { float: left; margin: 0px; font-size: 14px; } .card--content__affiliates ul li:last-child { float: right; margin: 0px; } .card--content__affiliates ul li i{ font-size: 16px; } .card--content__affiliates ul li:last-child { margin-right: 0 } .card--content__affiliates--image { height: 36px; margin: -7px 0 0 } .find-content .contain { padding-top: 48px; padding-bottom: 48px } @media screen and (min-width: 48rem) { .find-content .contain { padding-top: 72px; padding-bottom: 72px } } .find-content__card { float: left; display: block; margin-right: 1.69492%; width: 100%; padding: 36px; box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15); border-radius: 2px } .find-content__card:last-child { margin-right: 0 } @media screen and (min-width: 30rem) { .find-content__card { float:left; display: block; margin-right: 1.69492%; width: 66.10169%; margin-left: 16.94915% } .find-content__card:last-child { margin-right: 0 } } @media screen and (min-width: 48rem) { .find-content__card { float:left; display: block; margin-right: 1.69492%; width: 100%; height: 240px; margin-left: 0%; padding: 48px } .find-content__card:last-child { margin-right: 0 } } @media screen and (min-width: 62rem) { .find-content__card { float:left; display: block; margin-right: 1.69492%; width: 83.05085%; margin-left: 8.47458%; padding: 60px } .find-content__card:last-child { margin-right: 0 } } .find-content__card--icon { text-align: center; float: left; display: block; margin-right: 1.69492%; width: 100% } .find-content__card--icon:last-child { margin-right: 0 } .find-content__card--icon img { height: 48px } @media screen and (min-width: 48rem) { .find-content__card--icon img { height: 72px } } @media screen and (min-width: 48rem) { .find-content__card--icon { text-align:left; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); float: left; display: block; margin-right: 2.04082%; width: 8.16327% } .find-content__card--icon:last-child { margin-right: 0 } } .find-content__card--copy { margin-top: 0; margin-bottom: 24px; float: left; display: block; margin-right: 1.69492%; width: 100%; text-align: center } @media screen and (min-width: 48rem) { .find-content__card--copy { margin-bottom: 48px } } .find-content__card--copy:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .find-content__card--copy { float:left; display: block; margin-right: 2.04082%; width: 48.97959%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-align: left; padding-left: 24px; padding-right: 24px } .find-content__card--copy:last-child { margin-right: 0 } .find-content__card--copy:nth-child(2n) { margin-right: 0 } .find-content__card--copy:nth-child(2n+1) { clear: left } } @media screen and (min-width: 62rem) { .find-content__card--copy { float:left; display: block; margin-right: 2.04082%; width: 59.18367% } .find-content__card--copy:last-child { margin-right: 0 } } .find-content__card--cta { float: left; display: block; margin-right: 1.69492%; width: 100% } .find-content__card--cta:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .find-content__card--cta { float:left; display: block; margin-right: 2.04082%; width: 38.77551%; position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%) } .find-content__card--cta:last-child { margin-right: 0 } } @media screen and (min-width: 62rem) { .find-content__card--cta { float:left; display: block; margin-right: 2.04082%; width: 28.57143% } .find-content__card--cta:last-child { margin-right: 0 } } .find-content__card--cta .button--primary { box-shadow: 12px 15px 20px 0px rgba(46,61,73,0.15); margin: 0 auto; transition: box-shadow 0.3s ease } .find-content__card--cta .button--primary:hover { box-shadow: 2px 4px 8px 0px rgba(46,61,73,0.2) } .m-filter .m-filter-options__label { margin-left: -null } @media screen and (min-width: 480px) { .m-filter__status { text-align:center } } .m-filter__panel { margin-top: 36px; margin-bottom: 36px } @media screen and (min-width: 680px) { .m-filter__panel { margin-top:40px } } @media screen and (min-width: 1695px) { .m-filter__panel { margin-top:45px } } @media screen and (min-width: 680px) { .m-filter__panel { margin-bottom:40px } } @media screen and (min-width: 1695px) { .m-filter__panel { margin-bottom:45px } } .m-filter__panel-instruction { display: none } .m-filter__submit { text-align: center } .m-filter__close { display: none } .m-filter__prevent-body-scroll { overflow: hidden } .m-filter__panel-title { display: none } .m-filter__panel { display: none } .m-filter__submit { display: none } .m-filter__loader--loading { position: relative } .m-filter__loader--loading .a-loader { display: block; top: 0; bottom: 0 } .m-filter__loader--loading .a-loader .a-loader__ball { background-color: #de00a5 } .m-filter__loader--loading .a-loader { position: static; height: 16px } .m-filter__loader--loading .a-loader__ball { height: 16px; width: 16px } .m-filter__loader--loading .m-filter__content { display: none } .m-filter__panel--active { display: block } @media screen and (max-width: 679px) { .m-filter__panel { display:block; visibility: hidden; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; margin: 0; padding: 16px; background-color: #fafafa; overflow-y: scroll; -webkit-overflow-scrolling: touch; will-change: transform; -webkit-transform: translatey(100%) translatez(0); transform: translatey(100%) translatez(0); -webkit-transition: visibility ease-out 0s 0.4s, -webkit-transform ease-out 0.4s; transition: visibility ease-out 0s 0.4s, -webkit-transform ease-out 0.4s; transition: transform ease-out 0.4s, visibility ease-out 0s 0.4s; transition: transform ease-out 0.4s, visibility ease-out 0s 0.4s, -webkit-transform ease-out 0.4s } .m-filter__panel--active { visibility: visible; -webkit-transform: translatey(0); transform: translatey(0); -webkit-transition: -webkit-transform ease-out 0.4s; transition: -webkit-transform ease-out 0.4s; transition: transform ease-out 0.4s; transition: transform ease-out 0.4s, -webkit-transform ease-out 0.4s } .m-filter__panel-instruction { display: block; margin-right: 32px; margin-bottom: 32px } .m-filter__close { -webkit-transition: color linear 0.4s; transition: color linear 0.4s; text-decoration: none; background-color: transparent; display: block; position: absolute; right: 0; z-index: 1; padding: 0; border: 0; font-size: 50px; color: #de00a5; background: none; cursor: pointer; top: 0px; } .m-filter__close:active,.js .m-filter__close:hover { outline: 0 } .m-filter__close:hover { color: #0000ff } .m-filter-options__label { font-size: 16px; line-height: 1.36 } } .m-filter .m-filter-options--for-categories { -webkit-column-width: 260px; -moz-column-width: 260px; column-width: 260px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px } @media screen and (min-width: 680px) { .m-filter .m-filter-options--for-categories { width:480px; -webkit-column-width: 230px; -moz-column-width: 230px; column-width: 230px; margin-left: auto; margin-right: auto } } @media screen and (min-width: 768px) { .m-filter .m-filter-options--for-categories { width:730px } } .m-filter .m-filter-options--for-date { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1 } @media screen and (min-width: 680px) { .m-filter .m-filter-options--for-date { width:535px; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-width: 165px; -moz-column-width: 165px; column-width: 165px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; margin-left: auto; margin-right: auto } .m-filter .m-filter-options--for-date .m-filter-options__item { text-align: center } } .m-filter-options { font-size: 16px; line-height: 1.375; -webkit-columns: 3; -moz-columns: 3; columns: 3 } .m-filter-options__input { display: none } .m-filter-options__label-container { display: inline-block; padding: 0; margin: 1px 0 } .m-filter-options__label-container:focus { outline: 1px solid #0000ff } .m-filter-options__label { font-size: 15px; line-height: 1.38; padding: 9px 12px; display: inline-block; font-weight: normal; cursor: pointer } .m-filter-options__label:hover { color: #0000ff } .m-filter-options__input:checked+.m-filter-options__label-container .m-filter-options__label { color: #0000ff } .m-filter-status { font-size: 18px; line-height: 1.36; } .m-filter-status__option { /*color: #de00a5*/ color: #0474ff; } .m-filter-status__option-text { text-transform: lowercase } .m-filter-status__handle svg { display: inline-block; height: 6px; width: 9px; margin-left: -1px; -webkit-transition: -webkit-transform ease-out 0.3s; transition: -webkit-transform ease-out 0.3s; transition: transform ease-out 0.3s; transition: transform ease-out 0.3s, -webkit-transform ease-out 0.3s } .m-filter-status__handle svg * { /*fill: #de00a5*/ color: #0474ff; } .m-filter-status__option:hover .m-filter-status__handle svg *, .m-filter-status__option:focus .m-filter-status__handle svg *, .m-filter-status__option:active .m-filter-status__handle svg *, .m-filter-status__option--active .m-filter-status__handle svg * { fill: #0000ff } .m-filter-status__option:hover .m-filter-status__option-text, .m-filter-status__option:focus .m-filter-status__option-text,.m-filter-status__option--active .m-filter-status__option-text, .m-filter-status__option:active .m-filter-status__option-text{ color: #0000ff } .m-filter-status__option--active .m-filter-status__handle svg { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .m-filter-status__option--active { color: #0000ff } .course_intro .contain { position: relative; padding: 56px 24px; } .course_intro .course_heading { text-align: center } .course_intro .course_heading a { color: #fff; } .course_intro .course_heading a:hover { color:#f2f2f2 } .information .contain{ padding-top: 24px; padding-bottom: 24px; } .information .information__summary { float: left; display: block; margin-right: 1.69492%; width: 100% } .information .information__summary ul, .information .information__summary ol{ list-style-type: initial !important; padding-left: 20px; font-size: 14px; line-height: 24px; } @media screen and (min-width: 48rem) { .information .information__summary ul, .information .information__summary ol { font-size: 16px; line-height: 28px; } } .information .information__summary:last-child { margin-right: 0 } @media screen and (min-width: 62rem) { .information .information__summary { float:left; display: block; margin-right: 1.69492%; width: 40.67797% } .information .information__summary:last-child { margin-right: 0 } } .information .information__summary .button--primary { margin: 0 auto } @media screen and (min-width: 48rem) { .information .information__summary .button--primary { margin:0 } } .information .information__details { float: left; display: block; margin-right: 1.69492%; width: 100% } .information .information__details:last-child { margin-right: 0 } @media screen and (min-width: 62rem) { .information .information__details { float:left; display: block; margin-right: 1.69492%; width: 49.15254%; margin-left: 8.47458% } .information .information__details:last-child { margin-right: 0 } } .information .information__details .section--top,.information .information__details .section--bottom { display: block } .information .information__details .section--bottom i{ vertical-align: middle; color: #15C26B; font-size: 34px; } .information .information__details .section--top::after,.information .information__details .section--bottom::after { clear: both; content: ""; display: table } .information .information__details .section--top h6,.information .information__details .section--bottom h6 { margin-top: 0; margin-bottom: 6px } @media screen and (min-width: 48rem) { .information .information__details .section--top h6,.information .information__details .section--bottom h6 { margin-bottom: 6px } } @media screen and (min-width: 30rem) { .information .information__details .section--top { padding-top: 24px; border-bottom: 1px solid #dbe2e8; padding-bottom: 24px } .information .information__details .section--top-part-1 { padding-top: 0px; } } .information .information__details .section--top .col { float: left; display: block; margin-right: 3.44828%; width: 100%; padding-top: 12px; border-bottom: 1px solid #dbe2e8; padding-bottom: 12px } .information .information__details .section--top .col:last-child { margin-right: 0 } .information .information__details .section--top:last-child { border-bottom: 0; } @media screen and (min-width: 30rem) { .information .information__details .section--top .col { float:left; display: block; margin-right: 3.44828%; width: 48.27586%; padding: 0; border-bottom: 0 } .information .information__details .section--top .col:last-child { margin-right: 0 } .information .information__details .section--top .col:nth-child(2n) { margin-right: 0 } .information .information__details .section--top .col:nth-child(2n+1) { clear: left } } .information .information__details .section--top .col h5 { margin-top: 0; margin-bottom: 0px } @media screen and (min-width: 48rem) { .information .information__details .section--top .col h5 { margin-bottom:0px } } .information .information__details .section--bottom { padding-top: 12px; padding-bottom: 12px } @media screen and (min-width: 30rem) { .information .information__details .section--bottom { padding-top: 24px; padding-bottom: 24px } } .information .information__details .section--bottom li { padding-top: 12px; padding-bottom: 12px; float: left; display: block; margin-right: 3.44828%; width: 100%; height: 48px } @media screen and (min-width: 48rem) { .information .information__details .section--bottom li { padding-top: 24px; padding-bottom: 24px } } .information .information__details .section--bottom li:last-child { margin-right: 0 } @media screen and (min-width: 30rem) { .information .information__details .section--bottom li { float:left; display: block; margin-right: 3.44828%; width: 48.27586% } .information .information__details .section--bottom li:last-child { margin-right: 0 } .information .information__details .section--bottom li:nth-child(2n) { margin-right: 0 } .information .information__details .section--bottom li:nth-child(2n+1) { clear: left } } .information .information__details .section--bottom li img { padding-right: 12px } .information .information__details .section--bottom li p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; line-height: 24px; margin-bottom: 0; color: #2e3d49; font-weight: 600 } @media screen and (min-width: 48rem) { .information .information__details .section--bottom li p { font-size: 14px; line-height: 24px } } .information .information__details .intermediate #intermediate { fill: #02b3e4 } .information .information__details .advanced #intermediate,.information .information__details .advanced #advanced { fill: #02b3e4 } .card_scroller { overflow: hidden } .card_scroller .scroll_pane { overflow: visible !important; width: 100%; height: 360px; overflow-y: hidden; overflow-x: scroll } .scroll_cards { list-style-type: none; margin: 0; padding: 0 } .scroll_cards ul, .scroll_cards li { font-size: 14px !important; line-height: 24px !important; margin-bottom: 20px !important; } @media screen and (min-width: 48rem) { .scroll_cards ul, .scroll_cards li { font-size: 14px !important; line-height: 24px !important; margin-bottom: 20px !important; } } .scroll_cards li { float: left; display: inline-block; width: 280px; margin: 0 1em 3.125em 0 } .scroll_cards li:last-child { margin-right: 0 } @media (min-width: 35em) { .scroll_cards li { float:left; display: inline-block; width: 370px; margin: 0 20px 50px 0 } } .scroll_cards[data-cards-size="1"] { width: 296px } .scroll_cards[data-cards-size="2"] { width: 592px } .scroll_cards[data-cards-size="3"] { width: 888px } .scroll_cards[data-cards-size="4"] { width: 1184px } .scroll_cards[data-cards-size="5"] { width: 1480px } .scroll_cards[data-cards-size="6"] { width: 1776px } .scroll_cards[data-cards-size="7"] { width: 2072px } .scroll_cards[data-cards-size="8"] { width: 2368px } .scroll_cards[data-cards-size="9"] { width: 2664px } .scroll_cards[data-cards-size="10"] { width: 2960px } .scroll_cards[data-cards-size="11"] { width: 3256px } .scroll_cards[data-cards-size="12"] { width: 3552px } .scroll_cards[data-cards-size="13"] { width: 3848px } .scroll_cards[data-cards-size="14"] { width: 4144px } .scroll_cards[data-cards-size="15"] { width: 4440px } .scroll_cards[data-cards-size="16"] { width: 4736px } .scroll_cards[data-cards-size="17"] { width: 5032px } .scroll_cards[data-cards-size="18"] { width: 5328px } .scroll_cards[data-cards-size="19"] { width: 5624px } .scroll_cards[data-cards-size="20"] { width: 5920px } @media (min-width: 35em) { .scroll_cards[data-cards-size="1"] { width:390px } .scroll_cards[data-cards-size="2"] { width: 780px } .scroll_cards[data-cards-size="3"] { width: 1170px } .scroll_cards[data-cards-size="4"] { width: 1560px } .scroll_cards[data-cards-size="5"] { width: 1950px } .scroll_cards[data-cards-size="6"] { width: 2340px } .scroll_cards[data-cards-size="7"] { width: 2730px } .scroll_cards[data-cards-size="8"] { width: 3120px } .scroll_cards[data-cards-size="9"] { width: 3510px } .scroll_cards[data-cards-size="10"] { width: 3900px } .scroll_cards[data-cards-size="11"] { width: 4290px } .scroll_cards[data-cards-size="12"] { width: 4680px } .scroll_cards[data-cards-size="13"] { width: 5070px } .scroll_cards[data-cards-size="14"] { width: 5460px } .scroll_cards[data-cards-size="15"] { width: 5850px } .scroll_cards[data-cards-size="16"] { width: 6240px } .scroll_cards[data-cards-size="17"] { width: 6630px } .scroll_cards[data-cards-size="18"] { width: 7020px } .scroll_cards[data-cards-size="19"] { width: 7410px } .scroll_cards[data-cards-size="20"] { width: 7800px } } .card--scroll { width: 100%; height: 300px; display: block; cursor: pointer; margin-bottom: 0; background: #fff } .card--scroll a { text-decoration: none } .card--scroll .overflow_contain { overflow: hidden; height: 100% } .card--scroll .card-info { padding: 30px } @media screen and (min-width: 48rem) { .card--scroll .card-info { padding: 40px } } .card--scroll .card-info h6 { margin-bottom: 0 } .card--scroll .card-info p { font-size: 14px; line-height: 24px } @media screen and (min-width: 48rem) { .card--scroll .card-info p { font-size: 14px; line-height: 24px } } .card--scroll .card-info p:last-child { margin-bottom: 0 } .card--scroll.fade { position: relative } .card--scroll.fade:after { content: ""; width: 100%; height: 56px; position: absolute; left: 0; bottom: 0; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, #fff 100%) } .card--lesson { position: relative; height: 384px } @media screen and (min-width: 48rem) { .card--lesson { height: 448px } } .card--lesson .overflow_contain { padding: 36px } .card--lesson:before { content: ""; top: 32px; width: 4px; left: -2px; position: absolute; height: 36px; background: #02b3e4 } .card--lesson:after { content: ""; width: 100%; height: 56px; position: absolute; left: 0; bottom: 0px; z-index: 4; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, #fff 100%) } .card--lesson[data-has-course="true"]::after { bottom: 160px } .card--lesson[data-has-course="false"]::after { bottom: 0px; height: 88px } .card--lesson .lesson-info--title { font-weight: 600 } .card--lesson .lesson-info--summary { font-size: 14px !important; line-height: 24px !important; } @media screen and (min-width: 48rem) { .card--lesson .lesson-info--summary { font-size: 14px !important; line-height: 24px !important; } } .card--lesson .lesson-info--summary p{ font-size: 14px !important; line-height: 24px !important; } @media screen and (min-width: 48rem) { .card--lesson .lesson-info--summary p{ font-size: 14px !important; line-height: 24px !important; } } .card--lesson p{ font-size: 14px !important; line-height: 24px !important; } @media screen and (min-width: 48rem) { .card--lesson p{ font-size: 14px !important; line-height: 24px !important; } } .card--lesson .related-courses { left: 0; bottom: 0; z-index: 5; width: 100%; display: block; min-height: 160px; position: absolute; padding: 28px 40px; background: #fafbfc } .card--lesson .related-courses--title { margin-bottom: 0; font-size: 14px; line-height: 24px } @media screen and (min-width: 48rem) { .card--lesson .related-courses--title { font-size: 14px; line-height: 24px } } .jspContainer { overflow: visible; position: relative; outline: 0 none; -webkit-overflow-scrolling: touch } .jspPane { position: absolute } .jspVerticalBar { position: absolute; top: 0; right: 0; width: 16px; height: 100%; background: red; display: none } .jspHorizontalBar { position: absolute; bottom: 0; left: 0; width: 100%; height: 13px; border-radius: 16px; background: none; display: none } @media screen and (min-width: 30rem) { .jspHorizontalBar { display:block } } .jspCap { display: none } .jspHorizontalBar .jspCap { float: left } .jspTrack { background: rgba(46,61,73,0.1); border-radius: 16px; position: relative } .jspDrag { background: #7d97ad; position: relative; top: 0; left: 0; border-radius: 16px; cursor: pointer } .jspHorizontalBar .jspTrack,.jspHorizontalBar .jspDrag { float: left; height: 100% } .jspArrow { background: #50506d; text-indent: -20000px; display: block; cursor: pointer; padding: 0; margin: 0 } .jspArrow.jspDisabled { cursor: default; background: #80808d } .jspVerticalBar .jspArrow { height: 16px } .jspHorizontalBar .jspArrow { width: 16px; float: left; height: 100% } .jspVerticalBar .jspArrow:focus { outline: none } .jspCorner { background: #eeeef4; float: left; height: 100% } .course_details { max-width: 100%; margin-left: auto; margin-right: auto; } .course_details .contain { padding-top: 24px; padding-bottom: 24px; } @media (max-width: 767px) { .course_details .contain{ padding-top: 24px; padding-bottom: 24px; padding-left: 15px; padding-right: 15px; } } .course_details::after { clear: both; content: ""; display: table } .course_details .scroll_pane { height: 448px } @media (min-width: 35em) { .course_details .scroll_pane { height: 512px } } .lesson-remodal{ padding: 2em 1.5em; text-align: left; max-width: 48.75em } @media screen and (min-width: 48rem) { .lesson-remodal{ padding:5em; } } .lesson-remodal button{ margin: 0 auto } .lesson-remodal p{ font-size: 14px !important; line-height: 18px !important; } .course--extra-info .contain{ padding-top: 24px; padding-bottom: 24px; padding-left: 0; padding-right: 0; } @media (max-width: 767px) { .course--extra-info .contain{ padding-top: 24px; padding-bottom: 24px; padding-left: 15px; padding-right: 15px; } } .course--extra-info-summary { float: left; display: block; width: 100%; text-align: left } .course--extra-info-summary ul { width: 97%; text-align: left; margin-left: auto; margin-right: auto; list-style-type: disc } .course--extra-info-summary ul li { font-size: 14px; line-height: 24px } @media screen and (min-width: 48rem) { .course--extra-info-summary ul li { font-size: 16px; line-height: 28px } } .instructors .contain{ padding-top: 24px; padding-bottom: 24px; padding-left: 0; padding-right: 0 } @media (max-width: 767px) { .instructors .contain{ padding-top: 24px; padding-bottom: 24px; padding-left: 15px; padding-right: 15px; } } .instructors { text-align: center; } .instructors h2 { text-align: left; } .instructors .list-instructors { padding: 0; display: flex; margin: 0 auto; flex-wrap: wrap; justify-content: center } .instructors .instructor { margin: 0; width: 240px; padding: 24px 36px } .instructors .instructor--name { margin-bottom: 0 } .instructors .instructor--title { margin-bottom: 0; font-size: 14px; line-height: 24px } @media screen and (min-width: 48rem) { .instructors .instructor--title { font-size: 14px; line-height: 24px } } .instructors .instructor--photo { margin-top: 0; margin-bottom: 24px; height: 144px; border-radius: 160px } @media screen and (min-width: 48rem) { .instructors .instructor--photo { margin-bottom: 24px } } .faq { max-width: 1180px; margin-left: auto; margin-right: auto } .faq .contain{ padding-top: 48px; padding-bottom: 48px; } .faq::after { clear: both; content: ""; display: table } .faq h2 { font-size: 28px; font-weight: 300; margin-bottom: 7px; color: #2e3d49; text-align: left } .faq p { text-align: left } .faq__list>li { padding-top: 24px; padding-bottom: 24px; text-align: left; margin-bottom: 0; border-bottom: 1px solid #dbe2e8 } .faq__list>li:last-child { border-bottom: 0 } .faq__list>li p { margin-left: 0; text-align: left; max-width: 1180px } .faq__list>li p:last-child { margin-top: 0; margin-bottom: 0px } @media screen and (min-width: 48rem) { .faq__list>li p:last-child { margin-bottom: 12px } } .faq__list>li h4 { max-width: 1180px } #more-faq>li{ padding-top: 24px; padding-bottom: 24px; text-align: left; margin-bottom: 0; border-bottom: 1px solid #dbe2e8 } #more-faq>li:last-child { border-bottom: 0 } #more-faq>li p { margin-left: 0; text-align: left; max-width: 1180px } #more-faq>li p:last-child { margin-top: 0; margin-bottom: 0px } @media screen and (min-width: 48rem) { #more-faq>li p:last-child { margin-bottom: 12px } } #more-faq>li h4 { max-width: 1180px } .faq .faq__header { max-width: 1180px; margin-left: auto; margin-right: auto } .faq .faq__header::after { clear: both; content: ""; display: table } .faq .faq__header h2 { float: left; display: block; width: 100% } .dashboard-header { font-size: 28px; font-weight: 400; } .dashboard-header h3{ margin-bottom: 0; font-weight: 600; color: #2e3d49!important; } .dashboard-page-border{ border-bottom: 1px solid #eeeeee; } .dashboard-nav .list-group-item { padding: 12px; } .list-group-item { border: 0; } .dashboard-nav { border-right: 1px solid #dcdcdc; padding-top: 10px; padding-bottom: 10px; margin-bottom: 0; padding-left: 0; list-style: none; line-height: 1.1; font-size: 16px; } .dashboard-nav > li > a{ color: #293c91; } .dashboard-nav > li + li { margin-top: 4px; margin-left: 0; } .dashboard-nav .active > a { background-color: #e6e6e6; border-right: 5px solid #293c91; font-weight: 700; color: #293c91; } .dashboard-nav > li > a:hover, .dashboard-nav > li > a:focus { background-color: #e6e6e6; } .dashboard-nav .active > a:hover, .dashboard-nav .active > a:focus { color: #293c91; background-color: #e6e6e6; } .list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; } .list-group-item:last-child { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; } .user-dashboard-list { clear: both } .user-dashboard-list .contain { padding: 0; } .tabs { background: white; } .tabs ul.tab_nav { overflow: hidden; list-style-type: none; margin: 0; padding: 0; display: flex } .tabs ul.tab_nav li { flex-grow: 1 } @media (min-width: 40em){ .tabs ul.tab_nav li { width:50% } } .tabs ul.tab_nav li a { font-size: 12px; text-transform: uppercase; display: block; color: #7d97ad; font-weight: 600; text-decoration: none; text-align: center; padding: 24px 12px; letter-spacing: 0.5px; background: #fafbfc; border-right: 1px solid #dbe2e8; border-bottom: 1px solid #dbe2e8; transition: color .3s ease; line-height: 18px } @media (min-width: 35em) { .tabs ul.tab_nav li a { letter-spacing:2px } } .tabs ul.tab_nav li a:hover { color: #4c6478 } .tabs ul.tab_nav li:last-child a { border-right: none } .tabs .tab_content { padding-top: 46px; display: none } .tabs .past_content,.tabs .upcoming_content { min-height: 150px } .upcoming--on .tabs ul.tab_nav li.upcoming_tab a { background: white; color: #f6a926; border-bottom: none } .upcoming--on .tabs .upcoming_content { display: block } .past--on .tabs ul.tab_nav li.past_tab a { background: white; color: #f6a926; border-bottom: none } .past--on .tabs .past_content { display: block } .profile-panel { border: none; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } .profile-panel-header img { margin-right: 15px; max-width: 55px; vertical-align: middle; } .course-icon { margin-top: 6px; } .profile-panel * { box-sizing: border-box; } .profile-course-card .profile-course-panel-header { border-bottom: none; cursor: pointer; } .profile-panel-header { padding-top: 12px; padding-bottom: 12px; } .profile-course-card .profile-course-icon-container { width: 60px; } .profile-course-card .profile-panel-header .profile-course-title { word-wrap: break-word; } .large-text { font-size: 16px; font-weight: 600; color: #24292d; } .small-text { font-size: 13px; color: #525c65; font-weight: 400; } .profile-course-card .profile-panel-header .play-circle { padding-right: 15px; } .profile-course-card .profile-panel-header .more-details { top: 35px; color: #b3b3b3; padding-right: 12px; right: 16px; } .profile-panel-header .play-circle { position: absolute; top: 2px; right: 15px; color: #02b3e4; font-size: 1.3em; } .profile-panel-header .more-details { position: absolute; top: 10px; right: 15px; color: #02b3e4; font-size: 1.3em; } .mentor-mode-label{ text-transform: capitalize !important; } .avatar-upload{ width: 200px; } .avatar-upload .file-input { display: table-cell; max-width: 172px; } .avatar-upload .file-preview-frame,.avatar-upload .file-preview-frame:hover { margin: 0; padding: 0; border: none; box-shadow: none !important; text-align: center; } .fileinput-remove-button { display: inline-block; margin-left: 30px; height: auto; background-color: #7d97ad !important; border-color: #7d97ad !important; color: #fff !important; } .fileinput-remove-button:hover{ background-color: #6d8aa3 !important; border-color: #6d8aa3 !important; color: #fff !important; } .fileinput-remove-button .glyphicon{ left: 1px; top:2px; } .file-actions{ display: none; } .btn-file{ display: inline-block; margin-left: 10px; background-color: #02b3e4 !important; border-color: #02b3e4 !important; } .btn-file:hover{ color: #fff !important; background-color: #029fcb !important; border-color: #029fcb !important; } .avatar-upload-label{ font-size: 15px !important; line-height: 0.99999998; color: #BDBDBD; font-weight: 400; margin: 16px 0 5px 0; } .select-container { margin-top: 24px; margin-bottom: 24px; width: 100%; position: relative } select { cursor: pointer; position: relative; background: #fff; vertical-align: top; height: 48px; border: 1px solid #dbe2e8; padding: 11px 40px 11px 20px; color: #7d97ad; font-size: 14px; box-shadow: 0 2px 8px 0 rgba(46,61,73,0.06); border-radius: 6px; transition: box-shadow 0.3s ease, border 0.3s ease; } select:hover { box-shadow: 0 4px 8px 0 rgba(46,61,73,0.12); } select:focus { border-color: #91daee; box-shadow: 0 4px 8px 0 rgba(46,61,73,0.12); } option { display: block; cursor: pointer; color: #7d97ad; padding: 11px 40px 11px 20px; font-size: 14px; transition: all 0.3s ease } option:hover { color: #6d8aa3; background: #eaeef2 } option:focus { color: #6d8aa3; background: #eaeef2 } .footer h6{ margin-bottom: 10px; } .is-visually-hidden { text-indent: -10000000000px; width: 1px; height: 1px; display: inline-block; position: absolute; overflow: hidden; border: 0; outline: none; margin: -1px; padding: 0; clip: rect(0 0 0 0) } .m-sharing-links { margin: 0; padding: 0; list-style: none; display: inline-block } .m-sharing-links__item { display: inline-block } .m-sharing-links__icon { -webkit-transition-property: color; -moz-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; text-decoration: none; background-color: transparent; color: #4a4d55; font-size: 32px; line-height: 1.3; margin-right: 8px } .m-sharing-links__icon:active,.m-sharing-links__icon:hover { outline: 0 } .m-sharing-links__icon:hover { color: #0000ff } .m-sharing-links__icon:hover { color: #0000ff } .m-sharing-links--inverse .m-sharing-links__icon { color: #ffffff } .m-sharing-links--coloured .m-sharing-links__icon--twitter:hover { color: #55acee } .m-sharing-links--coloured .m-sharing-links__icon--facebook:hover { color: #3b5999 } .m-sharing-links--coloured .m-sharing-links__icon--google:hover { color: #db4437 } .m-sharing-links--coloured .m-sharing-links__icon--linkedin:hover { color: #0077b5 } .m-sharing-links--coloured .m-sharing-links__icon--youtube:hover{ color: #e62117 } .m-sharing-links--large .m-sharing-links__icon { font-size: 36px; line-height: 1.1; margin-left: 10px; margin-right: 10px } .m-sharing-links--spaced .m-sharing-links__icon { margin-left: 10px; margin-right: 10px } .m-sharing-links--run-details { position: relative; top: -3px } .m-sharing-links--run-details .m-sharing-links__item { margin-right: 2px } .m-sharing-links--invite .m-sharing-links__icon { font-size: 38px; margin-right: 20px } .m-sharing-links--welcome-share .m-sharing-links__icon { font-size: 36px; line-height: 1.1; margin: 0 10px } .icon-level { display: inline-block; height: 12px; width: 12px; margin-left: 28px; background-color: #dcdcdc; position: relative } .icon-level:before,.icon-level:after { position: absolute; bottom: 0; content: ""; display: block; width: 12px; background-color: inherit } .icon-level:before { height: 12px; left: -14px } .icon-level:after { height: 12px; left: -28px } .icon-level.icon-level-3 { background-color: #666 } .icon-level.icon-level-2:before,.icon-level.icon-level-2:after { background-color: #666 } .icon-level.icon-level-1:after { background-color: #666 } .icon-middle { display: inline-block; vertical-align: middle; } .skill .intermediate #intermediate { fill: #02b3e4 } .skill .advanced #intermediate, .skill .advanced #advanced { fill: #02b3e4 } svg:not(:root) { overflow: hidden; } svg { margin: 0; max-width: 100%; height: auto; } .u-with-overlay { position: relative } .u-with-overlay::before { content: " "; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000000; opacity: .6 } @media screen and (min-width: 648px) { .u-with-overlay::before { opacity:.6 } } .u-relative { position: relative } .product { clear: both; } .partners__business { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center } .partners__business--image { height: 48px; margin: 6px 12px; } @media screen and (min-width: 30rem) { .contact__content { float:left; display: block; margin-right: 1.69492%; width: 66.10169%; margin-left: 16.94915% } .contact__content:last-child { margin-right: 0 } } @media screen and (min-width: 62rem) { .contact__content { float:left; display: block; margin-right: 1.69492%; width: 49.15254%; margin-left: 25.42373% } .contact__content:last-child,.contact__content:nth-child(1n) { margin-right: 0 } .contact__content:nth-child(1n+1) { clear: left } } @media screen and (min-width: 48rem) { .contact-business .input-container { float:left; display: block; margin-right: 3.44828%; width: 48.27586% } .contact-business .input-container:last-child,.contact-business .input-container:nth-child(2n) { margin-right: 0 } .contact-business .input-container:nth-child(2n+1) { clear: left } } .contact-business textarea { margin-top: 0; margin-bottom: 28px; width: 100%; outline: 0; color: #7d97ad; vertical-align: top; height: 48px; border: 1px solid #dbe2e8; padding: 10px 20px; box-sizing: border-box; font-size: 14px; box-shadow: 0 2px 8px 0 rgba(46,61,73,.06); border-radius: 2px; transition: box-shadow .3s ease,border .3s ease } .contact-business input[type=text] { color: #7d97ad; font-size: 14px } .contact-business .banner { font-size: 14px; line-height: 24px; width: 100%; color: #fff; display:none; position: relative; text-align: center; padding: 12px 24px; background-color: #7d97ad; } @media (min-width: 48rem) { .contact-business .banner { font-size: 14px; line-height: 24px; padding: 10px 24px } } .contact-business .banner.success { background-color: #15c26b } .contact-business .banner.error { background-color: #f95c3c } .banner--close { position: absolute; top: 16px; right: 16px; width: 12px; height: 12px; cursor: pointer; opacity: .7; display: block; line-height: 0; transition: opacity .3s ease; background: url(../images/icon_close_white.svg) no-repeat } .banner--close:hover { opacity: 1 } .banner--close.dark { background-image: url(../images/icon_close_dark.svg) } @media screen and (min-width: 30rem) { .banner--close { position:absolute; top: 50%; transform: translateY(-50%); width: 14px; height: 14px } } .contact-business .activation { display: block; } .categories .contain { padding-top: 48px; padding-bottom: 48px } .categories .cards-wrapper { max-width: 1180px; width: 100%; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-direction: row; flex-direction: row; -ms-flex-pack: center; justify-content: center } .categories .path_card { -ms-flex-positive: 1; flex-grow: 1; -ms-flex-negative: 1; flex-shrink: 1; margin: 0 0 12px; border-radius: 8px; height: 110px; text-align: center; box-shadow: 12px 15px 20px 0 rgba(46,61,73,.15); background: #02b3e4; padding: 0 15px; color: #fff; cursor: pointer; width: 100% } .categories .path_card:hover { box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2) } .categories .path_card--description { max-width: 1180px; margin-left: auto; margin-right: auto; font-size: 18px; line-height: 32px; font-weight: 600; position: relative; top: 50%; transform: translateY(-50%) } .categories .path_card--description::after { clear: both; content: ""; display: table } .categories h2 { color: #02b3e4 } .categories .subtitle { font-weight: 300 } .categories .bg-business { background: url(../images/business.jpg) center center no-repeat; background-size: cover } .categories .bg-data-science { background: url(../images/data-science.png) center center no-repeat; background-size: cover } .categories .bg-technology { background: url(../images/programming-basics.png) center center no-repeat; background-size: cover } .categories .bg-training { background: url(../images/teaching.jpg) center center no-repeat; background-size: cover } .categories .bg-tools { background: url(../images/tools.jpg) center center no-repeat; background-size: cover } @media screen and (min-width: 48rem) { .categories .contain { padding-top: 72px; padding-bottom: 72px } } @media screen and (min-width: 73.75rem) { .categories .wrap_left { -ms-flex-pack:start; justify-content: flex-start } } @media screen and (min-width: 30rem) { .categories .path_card { height: 180px; padding: 0 40px; margin: 0 12px 24px; width: 212px; max-width: 271px; min-width: 212px } } .title-section .contain { padding-top: 48px; padding-bottom: 12px } .title-section .subtitle { font-weight: 300; } .start_trial { display: block; position: absolute; bottom: 0; right: 0; left: 0; text-align: center; height: 60px; line-height: 60px; background: #20b3e4; color: #fff; border-radius: 0 0 5px 5px } .web-content .contain ul { list-style-type: none; margin: 0 24px; padding: 0 } .web-content .contain ul li { position: relative; color: #525c65; margin-bottom: 24px; padding-left: 40px } .web-content .contain ul li:last-child { margin-bottom: 0 } .web-content .contain ul li::before { content: ""; position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background-color: #15c26b; background-image: url(../images/check_white.min.svg); background-repeat: no-repeat; background-position: center; background-size: 70%; border-radius: 16px; } @media (min-width: 992px) { .contact-address{ max-width: 1180px; margin: 0 auto; display: -ms-flexbox; display: flex; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; } .contact-address .left_col { float: left; display: block; margin-right: 1.69492%; width: 31.20339%; padding-right: 24px; margin-bottom: 16px; } .contact-address .right_col { float: left; display: block; margin-right: 1.69492%; width: 31.20339%; padding-right: 24px; margin-bottom: 16px; } } .tick { position: absolute; top: -75px; left: 50%; transform: translate(-50%, -50%) scale(4); width: 50px; height: 50px; background: #71c341; color: white; padding: 8px; border-radius: 50%; opacity: 0; transition: transform 0.2s 0.25s cubic-bezier(0.31, 0.25, 0.5, 1.5), opacity 0.1s 0.25s ease-in-out; } .scaledown { transform: translate(-50%, -50%) scale(1); opacity: 1; } .tick i{ font-size: 35px; } .panel { margin-bottom: 20px; background-color: #fff; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); box-shadow: 0 1px 1px rgba(0,0,0,.05) } .panel-body { padding: 15px } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px } .panel-title { margin-top: 0; font-size: 16px; margin-bottom: 0; } .panel-footer { padding: 10px 15px; background-color: #f5f5f5; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px } .panel-group .panel-heading{ border-bottom: 0 } .panel-group { margin-bottom: 20px } .panel-group .panel { margin-bottom: 0; border-radius: 4px } .panel-group .panel+.panel { margin-top: 5px } .panel-group .panel-heading+.panel-collapse>.list-group,.panel-group .panel-heading+.panel-collapse>.panel-body { border-top: 1px solid #ddd } .panel-group .panel-footer { border-top: 0 } .panel-group .panel-footer+.panel-collapse .panel-body { border-bottom: 1px solid #ddd } .panel-default { border-color: #ddd } .panel-default>.panel-heading { color: #333; background-color: #f5f5f5; border-color: #ddd } .panel-default>.panel-heading+.panel-collapse>.panel-body { border-top-color: #ddd } .panel-default>.panel-heading .badge { color: #f5f5f5; background-color: #333 } .panel-default>.panel-footer+.panel-collapse>.panel-body { border-bottom-color: #ddd } .syllabus-accordion { margin-top: 22px; border: 1px solid #ddd; box-shadow: 0 2px 4px 0 rgba(46,61,73,0.12); border-radius: 2px; transition: box-shadow 0.3s ease, border 0.3s ease; } #syllabus-accordion.panel-group { margin-bottom: 0 } #syllabus-accordion.panel-group .panel+.panel { margin-top: 0 } .syllabus-panel-section { border: none } .syllabus-panel-section .panel-body { padding-top: 16px; padding-left: 32px; background: #fafafa; margin-left: 0 } .syllabus-panel-heading { padding: 24px 28px; color: #333; font-weight: 600; border-bottom: 1px solid #ddd } .syllabus-accordion-icon { -webkit-text-stroke: 1px background-color; margin-right: 16px; border-radius: 50%; font-weight: 300; font-size: 14px; margin-top: 6px; background: 0 0; transition: transform .1s linear; color: #888 } .active-syllabus-collapsible,.syllabus-panel-section { border-radius: 0!important } .syllabus-panel-section { box-shadow: none; margin-bottom: 0; border-top: 1px solid #eee; margin-top: -1px!important } .active-syllabus-collapsible .syllabus-accordion-icon { transform: rotate(0); transition: transform .1s linear; color: #888 } .btn-show-more-syllabus { background: #f0f0f0; font-weight: 700; color: #545454; padding: 16px 0; border-radius: 0; margin: 0; display: block; cursor: pointer; opacity: 1 } .btn-show-more-syllabus span { font-weight: 400 } .btn-show-more-syllabus:hover { opacity: .7; transition: opacity .3s ease } .bold-font { font-weight: 700; } .syllabus-accordion-title { margin-top: 3px; line-height: 24px } .icon-col-syllabus { width: 6%; margin-top: 3px; } .syllabus-panel-section ul { margin-bottom: 10px } .syllabus-panel-section ul li { margin-left: 24px; display: list-item } .syllabus-panel-section ul li { list-style-type: disc } .course-syllabus .contain{ padding-top: 15px; padding-bottom: 15px; padding-left: 0; padding-right: 0 } .courseHeader .topRow { position: relative } @media (max-width: 767px) { .courseHeader .topRow { text-align:center } } .courseHeader .topRow .rightSideBar { position: relative } .courseHeader .topRow .rightSideBarWapper { position: absolute; width: 332px; z-index: 4; top: 37px } @media (max-width: 1180px) { .courseHeader .topRow .rightSideBarWapper { width:300px } } @media (max-width: 1000px) { .courseHeader .topRow .rightSideBarWapper { width:250px } } @media (max-width: 767px) { .courseHeader .topRow .rightSideBarWapper { margin-top:10px; position: relative; right: auto; width: auto } .courseHeader .topRow .rightSideBarWapper.help-listing { top: 0px !important; position: relative !important } } .courseHeader .topRow .rightSideBarWapper .dropdown-btn { margin-top: 20px } .courseHeader .topRow .rightSideBarWapper .actionCard>div { border-bottom: 1px solid #ddd; padding: 5px 30px; text-align: center } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #fff; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); position: relative } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard .img-circle { width: 70px } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard .display-name { display: block; margin: 15px 0 12px; font-size: 18px; font-weight: bold; color: #444 } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard .price { font-size: 0.9em; line-height: 1.5 } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard .price strong { display: block; font-size: 2em; font-weight: bold } .courseHeader .topRow .rightSideBarWapper .actionCard .btn { margin-top: 12px; box-sizing: border-box; width: 100%; white-space: normal; font-weight: bold } .courseHeader .topRow .rightSideBarWapper .actionCard .dropdown-btn .btn:active { background: #ddd } .courseHeader .topRow .rightSideBarWapper .actionCard .messageBtn { width: 100% } .courseHeader .topRow .rightSideBarWapper .actionCard .ScheduleBtn { width: 100% } .courseHeader .topRow .rightSideBarWapper .restInfo { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #fff; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15) } .courseHeader .topRow .rightSideBarWapper .restInfo>.info-block { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 10px 20px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600!important; color: #7d97ad !important; line-height: 10px; font-size: 12px; } .courseHeader .topRow .rightSideBarWapper .restInfo>.info-block i{ vertical-align: middle; font-size: 22px; margin-top: -2px; margin-right: 1px; } .courseHeader .topRow .rightSideBarWapper .restInfo>.video-block { padding: 0; } .courseHeader .topRow .rightSideBarWapper .restInfo .rate { color: #000 } .courseHeader .topRow .rightSideBarWapper .restInfo .wide .socialIcon { background-color: #f8f8f8 } .course_heading h1 { font-size: 28px; font-weight: 400; margin-bottom: 7px; color: #2e3d49 } .course_heading h2 { color: #525c65; font-size: 16px; font-weight: 400; line-height: 28px; } .course_heading h4,.course_heading h3 { letter-spacing: 2px; color: #7d97ad; text-transform: uppercase } .course_heading h3 { font-size: 12px; font-weight: 600; margin-bottom: 28px } .course-info h2{ font-size: 28px; font-weight: 300; margin-bottom: 7px; color: #2e3d49 } .course_heading .course-tags { max-height: 23px; overflow: hidden } .course_heading .course-tags .badge { background-color: #D3E4F2; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; color: #777; margin-bottom: 5px; font-weight: normal; text-shadow: none } @media screen and (min-width: 48rem) { .course_heading .course-bar--bottom { position: relative } .course_heading .course-bar--bottom::before { left: 0; content: ""; width: 60px; height: 4px; bottom: -5px; position: absolute; background-color: #02b3e4 } } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard .price { font-size: 14px; line-height: 1.5; } .courseHeader .topRow .rightSideBarWapper .actionCard .topCard .button{ margin: 10px auto 10px auto; text-align: center; } .course-info .information__summary { float: left; display: block; margin-right: 1.69492%; width: 100% } .course-info .information__summary:last-child { margin-right: 0 } .course-info .information__details { float: left; display: block; margin-right: 1.69492%; width: 100%; margin-left: 0; } .course-info .information__details:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .course-info .information__details .section--top { padding-top: 24px; border-bottom: 1px solid #dbe2e8; padding-bottom: 24px; } } .course-info .information__details .section--bottom i{ vertical-align: middle; color: #15C26B; font-size: 34px; } .course-info .information__details .section--top,.course-info .information__details .section--bottom { display: block } .course-info .information__details .section--top::after,.course-info .information__details .section--bottom::after { clear: both; content: ""; display: table } .course-info .information__details .section--top h6,.course-info .information__details .section--bottom h6 { margin-top: 0; margin-bottom: 5px } .course-info .information__details .section--top .col { float: left; display: block; margin-right: 3.44828%; width: 100%; padding-top: 12px; border-bottom: 1px solid #dbe2e8; padding-bottom: 12px } .course-info .information__details .section--top .col:last-child { margin-right: 0 } @media screen and (min-width: 30rem) { .course-info .information__details .section--top .col { float:left; display: block; margin-right: 3.44828%; width: 48.27586%; padding: 0; border-bottom: 0 } .course-info .information__details .section--top .col:last-child { margin-right: 0 } .course-info .information__details .section--top .col:nth-child(2n) { margin-right: 0 } .course-info .information__details .section--top .col:nth-child(2n+1) { clear: left } } .course-info .information__details .section--top .col h5 { margin-top: 0px; margin-bottom: 0px; font-size: 18px; line-height: 32px; font-weight: 700; color: #2e3d49; -webkit-font-smoothing: antialiased; } .icon-middle { display: inline-block; vertical-align: middle; } @media screen and (min-width: 48rem) { .course-info .information__details .section--top .col h5 { margin-bottom:0px } } .course-info .information__details .section--bottom { padding-top: 12px; padding-bottom: 24px; } .course-info .information__details .section--bottom ul { padding: 0; } .course-info .information__details .section--bottom li { padding-top: 12px; padding-bottom: 12px; float: left; display: block; margin-right: 3.44828%; width: 100%; height: 48px; } @media screen and (min-width: 48rem) { .course-info .information__details .section--bottom li { padding-top: 24px; padding-bottom: 24px } } .course-info .information__details .section--bottom li:last-child { margin-right: 0 } @media screen and (min-width: 30rem) { .course-info .information__details .section--bottom li { float:left; display: block; margin-right: 3.44828%; width: 48.27586% } .course-info .information__details .section--bottom li:last-child { margin-right: 0 } .course-info .information__details .section--bottom li:nth-child(2n) { margin-right: 0 } .course-info .information__details .section--bottom li:nth-child(2n+1) { clear: left } } .course-info .information__details .section--bottom li img { padding-right: 12px } .course-info .information__details .section--bottom li p { position: relative; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; line-height: 24px; margin-bottom: 0; color: #2e3d49; font-weight: 700 } .course-info .information__details .section--bottom li p { font-size: 14px; line-height: 24px; } .course-info .information__details .intermediate #intermediate { fill: #02b3e4 } .course-info .information__details .advanced #intermediate,.course-info .information__details .advanced #advanced { fill: #02b3e4 } .featured-container { margin-left: auto; margin-right: auto; } .featured-container::after { clear: both; content: ""; display: table } .browse-msg h3{ color: #384047; font-style: normal; line-height: 1.1; margin-bottom: 15px; margin-top: 0px; text-rendering: optimizeLegibility; font-size: 22px; font-weight: 500; } .browse-msg p{ color: #717f86; margin-top: 10px; margin-bottom: 10px; font-weight: 400; } .browse-msg img{ max-width: 100%; width: 100px; height: 100px; padding-bottom: 25px; } .icon-cddf { background-image: url("../images/feedback.png"); } #feedbackTabContainer { background-color: #0474ff; border-bottom-left-radius: 5px; border-top-left-radius: 5px; color: #ffffff; cursor: pointer; display: block; font-weight: normal; height: 110px; padding-top: 41px; position: fixed; right: 0; text-decoration: none; top: 40%; width: 31px; z-index: 1000; } #feedbackTabImage { width: 24px; height: 30px; display: inline-block; margin: 0 15px 0 6px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } #feedbackTab { margin-bottom: 9px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .feedback-remodal{ padding: 2em 1.5em; text-align: left; max-width: 48.75em; margin: auto; } @media screen and (min-width: 48rem) { .feedback-remodal { padding:2em; } } .feedback-remodal button{ margin: 0 auto } .feedback-remodal p{ font-size: 16px; line-height: 28px; font-weight: 400; color: #525c65; text-align: justify; } .feedback-remodal h6{ font-size: 14px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #7d97ad; } .feedback-remodal h4{ font-size: 20px; line-height: 36px; color: #2e3d49; -webkit-font-smoothing: antialiased; font-weight: 500; } @media only screen and (min-width: 641px) { .feedback-remodal { max-width:750px !important; } } .video-remodal{ padding: 0px !important; text-align: left; max-width: 48.75em; } @media screen and (min-width: 48rem) { .video-remodal { padding: 0px !important; } } .video-remodal button{ margin: 0 auto } .video-remodal p{ font-size: 16px; line-height: 28px; font-weight: 400; color: #525c65; text-align: justify; } .video-remodal h6{ font-size: 14px; line-height: 24px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; color: #7d97ad; } .video-remodal h4{ font-size: 20px; line-height: 36px; color: #2e3d49; -webkit-font-smoothing: antialiased; font-weight: 500; } @media screen and (min-width: 48rem) { .quick-enquiry .input-container { float:left; display: block; margin-right: 3.44828%; width: 48.27586% } .quick-enquiry .input-container:last-child,.quick-enquiry .input-container:nth-child(2n) { margin-right: 0 } .quick-enquiry .input-container:nth-child(2n+1) { clear: left } } .quick-enquiry textarea { margin-top: 0; margin-bottom: 28px; width: 100%; outline: 0; color: #7d97ad; vertical-align: top; height: 48px; border: 1px solid #dbe2e8; padding: 10px 20px; box-sizing: border-box; font-size: 14px; box-shadow: 0 2px 8px 0 rgba(46,61,73,.06); border-radius: 2px; transition: box-shadow .3s ease,border .3s ease } .quick-enquiry input[type=text] { color: #7d97ad; font-size: 14px } .quick-enquiry .banner { font-size: 14px; line-height: 24px; width: 100%; color: #fff; display:none; position: relative; text-align: center; padding: 12px 24px; background-color: #7d97ad; } .quick-enquiry .checkbox-div{ margin-top:0px; } @media (min-width: 48rem) { .quick-enquiry .banner { font-size: 14px; line-height: 24px; padding: 10px 24px } .quick-enquiry .checkbox-div{ margin-top: 64px; } } .quick-enquiry .banner.success { background-color: #15c26b } .quick-enquiry .banner.error { background-color: #f95c3c } .icon__arrow--white { background: url(../images/icon-arrow-right-white.svg) center center no-repeat #02b3e4; width: 36px; height: 36px; border-radius: 50%; background-size: 22%; display: inline-block; vertical-align: middle; margin-left: 12px; box-shadow: 8px 10px 20px 0 rgba(46,61,73,.15); transition: box-shadow .3s ease } .icon__arrow--white:hover { box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2) } .nd-hub-link { display: block; text-align: center; margin: 0 auto } .nd-hub-link .h4 { font-size: 18px; line-height: 32px; margin-bottom: 0; border-bottom: none; color: #02b3e4 } .nd-hub-link .h4:hover { color: #028bb1 } @media screen and (min-width: 48rem) { .icon__arrow--white { margin-left: 24px; width: 60px; height: 60px } .nd-hub-link { padding-top: 48px; padding-bottom: 48px } .nd-hub-link .h4 { font-size: 24px; line-height: 36px } } @media screen and (min-width: 62rem) { .nd-hub-link .h4 { float:right } } .lectures-container{ margin: 0 !important; padding: 0 !important; background-color: #fff; } .lecture-container { display: flex; padding: 12px 30px 12px 8px; border-top: 1px solid #ededed; } .lecture-container .left-content { display: flex; align-items: flex-start; width: 100% } .lecture-container [class*=" udi_"],.lecture-container [class^=udi] { opacity: .3; font-size: 20px; } .lecture-container .down-arrow { cursor: pointer; display: inline-block; margin-left: 10px; font-size: 16px; } .lecture-container .description { font-size: 14px } .lecture-container .description.collapsing+.title i:before,.lecture-container .description.in+.title i:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } .lecture-container .description p { margin-bottom: 0 } .lecture-container .description.in~.title .down-arrow { transform: rotate(180deg) } .lecture-container.lecture-container--preview .content-summary,.lecture-container.lecture-container--preview .preview-text,.lecture-container.lecture-container--preview .title,.lecture-container.lecture-container--preview [class*=" udi_"],.lecture-container.lecture-container--preview [class^=udi] { color: #1376d7 } .lecture-container .title { color: #333; font-size: 15px; margin-top: -2px } .lecture-container .title i:before { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg) } .lecture-container .top { display: flex; flex-direction: column-reverse; margin-left: 8px; width: 100% } .lectures-container .details { display: none; font-size: 14px } .lecture-container { padding: 12px 30px 12px 43px } .lecture-container .top { margin-left: 15px } .lecture-container .left-content { width: 90% } .lectures-container .details { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; width: 10% } .video-preview-icon { -webkit-text-stroke: 1px background-color; margin-right: 1em; border-radius: 50%; font-weight: 400; font-size: .9em; background: 0 0; transition: transform .1s linear; color: #888 } .icon-col-preview { width: 6%; font-size: 16px !important; } .view-syllabus-btn { border-bottom: none; width: auto; display: inline-block; font-size: 14px; text-transform: uppercase; font-weight: 600; color: #02b3e4; text-decoration: none; transition: color .3s ease,background .3s ease } .view-syllabus-btn:hover { color: #028bb1; text-decoration: none } .view-preview-btn { border-bottom: none; width: auto; display: inline-block; font-size: 14px; text-transform: uppercase; font-weight: 600; color: #02b3e4; text-decoration: none; transition: color .3s ease,background .3s ease } .view-preview-btn:hover { color: #028bb1; text-decoration: none } /* Workshop Css*/ .section-schedule h5 { margin-bottom: 10px } div.controls { position: relative; margin-bottom: 20px } .inline-checkbox { padding: 6px 12px 7px; margin-right: 10px; border: 1px solid #ddd; box-shadow: 0 2px 4px 0 rgba(46,61,73,0.12); border-radius: 2px; transition: box-shadow 0.3s ease, border 0.3s ease; } .inline-checkbox input[type=checkbox] { display: none; cursor: pointer } .inline-checkbox input[type=checkbox]:active,.inline-checkbox input[type=checkbox]:focus{ outline: 0 } .inline-checkbox input[type=checkbox]+label{ cursor: pointer; display: inline-block; position: relative; padding-left: 25px; color: #333; font-size: 12px; text-transform: uppercase; margin: 0; } .inline-checkbox input[type=checkbox]+label:after,.inline-checkbox input[type=checkbox]+label:before{ content: ''; font-family: helvetica; display: inline-block; width: 18px; height: 18px; left: 0; bottom: 0; text-align: center; position: absolute; margin-bottom: 3px; } .inline-checkbox input[type=checkbox]+label:before { background-color: #d5d5d5; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out } .inline-checkbox input[type=checkbox]+label:after{ color: #fff } .inline-checkbox input[type=checkbox]:checked+label:before{ -moz-box-shadow: inset 0 0 0 10px #02b3e4; -webkit-box-shadow: inset 0 0 0 10px #02b3e4; box-shadow: inset 0 0 0 10px #02b3e4 } .inline-checkbox input[type=checkbox]+label:before { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px } .inline-checkbox input[type=checkbox]+label:hover:after,.inline-checkbox input[type=checkbox]:checked+label:after { content: "\2713"; line-height: 18px; font-size: 14px } .inline-checkbox input[type=checkbox]+label:hover:after { color: #999 } .inline-checkbox input[type=checkbox]:checked+label:after,.inline-checkbox input[type=checkbox]:checked+label:hover:after { color: #fff } .inline-checkbox input[type=checkbox].toggle { display: inline-block; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 55px; height: 28px; background-color: #fafafa; position: relative; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .inline-checkbox input[type=checkbox].toggle:hover:after { background-color: #c7c7c7 } .inline-checkbox input[type=checkbox].toggle:after { content: ''; display: inline-block; position: absolute; width: 24px; height: 24px; background-color: #aeaeae; top: 2px; left: 2px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out } .inline-checkbox input[type=checkbox]:checked.toggle { -moz-box-shadow: inset 0 0 0 15px #158EC6; -webkit-box-shadow: inset 0 0 0 15px #158EC6; box-shadow: inset 0 0 0 15px #158EC6 } .inline-checkbox input[type=checkbox]:checked.toggle:after { left: 29px; background-color: #fff } .inline-checkbox { display: inline-block; } #detail-schedule .bg-white-rounded { padding: 0; border: 1px solid #ddd; box-shadow: 0 2px 4px 0 rgba(46,61,73,0.12); border-radius: 2px; transition: box-shadow 0.3s ease, border 0.3s ease; } .table-schedule { margin-bottom: 0 } .table-head { color: #999; border-bottom: 1px solid #ebebeb } .table-body .table-caption,.table-head .table-caption { padding: 10px } .table-head .table-caption { font-size: 14px; font-weight: 700; } .table-head .table-caption i { font-size: 16px; margin-right: 3px; vertical-align: middle; line-height: 20px; margin-top: -2px; } .table-body .table-caption.type-course,.table-head .table-caption.type-course { padding: 10px 0 } .table-body .table-caption.type-course a:hover { border-bottom: 1px solid #1e8ebe; color: #1e8ebe } .section-schedule .table-body { border-bottom: 1px solid #ebebeb; background-color: #fcfbfb } .enroll,.schedule-date,.schedule-price,.table-schedule>tbody>tr>td:last-child a { font-weight: 700 } .enroll { background: 0 0; display: block; margin: 7px; white-space: nowrap; } .enroll.active.focus,.enroll.active:focus,.enroll.focus,.enroll:active.focus,.enroll:active:focus,.enroll:focus { outline: transparent; -webkit-box-shadow: none; box-shadow: none; } a.enroll:focus, a.enroll:hover { color: #333!important } .batch_schedule h5,.section-schedule .bg-white-rounded { margin-bottom: 10px } .section-schedule h3>a { font-size: 14px; } .batch_schedule { padding: 10px; border-bottom: 1px solid #ebebeb } .col-batch>li { width: 100%; margin-right: 15px; margin-bottom: 15px; padding: 15px; background-color: #f0f0f0; border-radius: 5px; -webkit-border-radius: 5px } .colbatch h5 { display: block; font-size: 14px } .batch_schedule p { font-size: 14px; margin-bottom: 5px } .venue-details p { line-height: 24px; font-size: 14px; height: 100px; overflow-y: auto; overflow-x: hidden } ul.batch-days li { display: inline-block; width: 18%; text-align: center } ul.batch-days li span { display: block; font-size: 14px } .border-round { border: 1px solid #ebebeb } .color-blue { color: #02b3e4!important; outline: 0!important; text-decoration: none!important; text-transform: capitalize; } .color-gray { color: #999; } .text-capitalize { text-transform: capitalize; } @media only screen and (max-width: 767px) { .xs-title { color: #999; width: 30%; float: left; font-size: 14px; text-transform: uppercase; text-align: right; padding-right: 10px } .xs-caption { width: 69.5%; float: left } .col-batch>li { width: 100%; margin-bottom: 10px } .col-batch>li:last-child { margin-bottom: 0px } ul.batch-days li { width: 25% } .enroll { margin: 0; padding: 0; text-align: right; display: inline-block; float: right; } .inline-checkbox { margin-bottom: 10px; display: block; margin-right: 0px; } .venue-details{ margin-top: 30px; } } .workshop-batch-enroll-remodal{ padding: 2em 1.5em; text-align: left; max-width: 48.75em } @media screen and (min-width: 48rem){ .workshop-batch-enroll-remodal{ padding:5em; } } .workshop-batch-enroll-remodal button{ margin: 0 auto } .batch-enroll_pricing .pricing-box { width: 49%; vertical-align: top; min-height: 304px; position: relative } @media (max-width: 970px) { .batch-enroll_pricing .pricing-box { width: 40% } .batch-enroll_pricing .pricing-box:last-child { margin-right: 1% } .batch-enroll_pricing .pricing-box:nth-child(1),.batch-enroll_pricing .pricing-box:nth-last-child(2) { margin-right: 1%; width: 40% } } @media (max-width: 900px) { .batch-enroll_pricing .pricing-box { width: 45% } .batch-enroll_pricing .pricing-box:nth-child(1),.batch-enroll_pricing .pricing-box:nth-last-child(2) { width: 45% } } @media (max-width: 768px) { .batch-enroll_pricing .pricing-box { width: 65% } .batch-enroll_pricing .pricing-box:nth-child(1),.batch-enroll_pricing .pricing-box:nth-last-child(2) { width: 65% } } @media (max-width: 600px) { .batch-enroll_pricing .pricing-box { width: 100% } .batch-enroll_pricing .pricing-box:nth-child(1),.batch-enroll_pricing .pricing-box:nth-last-child(2) { width: 100% } } .batch-enroll_pricing .pricing-box-wrapper { width: 100%; margin: 0 auto } @media (min-width: 30rem) { .batch-enroll_pricing .pricing-box-wrapper { clear:both; display: inline-block; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-positive: 1; flex-grow: 1 } } .batch-enroll_pricing .pricing-box { margin-top: 16px; margin-right: 1%; display: inline-block; padding: 0 16px 16px; text-align: center; border: 2px solid #f4f4ef; background-color: #fff; } @media (max-width: 30rem) { .batch-enroll_pricing .pricing-box { width:100%; margin-bottom: 16px } } .batch-enroll_pricing .pricing-box:last-child { margin-right: 0 } .batch-enroll_pricing .pricing-box .duration,.batch-enroll_pricing .pricing-box .price,.batch-enroll_pricing .pricing-box h3 { width: 100%; display: block } .batch-enroll_pricing .pricing-box h3 { text-align: center; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: #7d97ad; padding: 12px 0 } .batch-enroll_pricing .pricing-box .small { text-align: center; line-height: 24px; margin: 0; font-size: 14px; text-transform: uppercase; font-weight: 600; color: #757c81 } .batch-enroll_pricing .pricing-box .primary_btn { margin: 16px auto } .batch-enroll_pricing .price { font-weight: 600; font-size: 32px } .batch-enroll_pricing .duration { color: #2e3d49; font-size: 16px; margin-bottom: 16px } .batch-enroll_pricing .strike { font-weight: 400; font-size: 24px; color: #757c81; text-decoration: line-through } .primary_btn { display: block; text-align: center; padding: 1em .25em; font-weight: 600; font-size: .8125em; max-width: 20em; transition: background .3s ease; text-transform: uppercase } .primary_btn { color: #fff; text-decoration: none; border-radius: .307692308em; background: #02b3e4; width: 100%; border: none; cursor: pointer; line-height: initial } .primary_btn:hover { background: #028bb1; text-decoration: none; color: #fff } @media (min-width: 25em) { .primary_btn { letter-spacing:1.25px } } @media (min-width: 768px) { .bg-am{ /* background-image: url(../images/fin-bg.jpg); */ } } @media (max-width: 767px) { .bg-am{ background-image: linear-gradient(to bottom right, #F7F7F7, #EAFBFF) } } .bg-am .contain { position: relative; } .bg-am-overlay { position: relative; z-index: -1; } .bg-am-overlay::before { content: " "; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: linear-gradient(270deg,#eafaff 0,#f7f7f7); opacity: .7; } .features { position: relative } .features .contain { padding-top: 48px; padding-bottom: 48px; } @media (max-width: 767px) { .features .contain { padding-top: 24px; padding-bottom: 24px; padding-left: 15px; padding-right: 15px; } } .features__detail { float: left; display: block; margin-right: 1.6949152542%; width: 100% } .features__detail:last-child { margin-right: 0 } @media screen and (min-width: 48rem) { .features__detail { float:left; display: block; margin-right: 1.6949152542%; width: 32%; padding: 0 24px 0 24px; margin: 0; border-right: 1px solid #dbe2e8 } .features__detail:last-child { margin-right: 0 } .features__detail:nth-child(2n) { margin-right: 1.6949152542% } .features__detail:nth-child(2n+1) { clear: none } .features__detail:last-child { border-right: none } .features__detail--container { margin: auto } .features::before { content: ''; width: 100%; height: 500px; z-index: -1000; background: rgba(2,204,186,0.05); transform-origin: left bottom; position: absolute; top: 80%; left: 0; -webkit-transform: skew(0deg, -15deg); -moz-transform: skew(0deg, -15deg); -ms-transform: skew(0deg, -15deg); -o-transform: skew(0deg, -15deg); transform: skew(0deg, -15deg) } } .features__detail img { height: 84px; } @media screen and (min-width: 48rem) { .features__detail p { margin-bottom:0 } } .expert-teachers .contain { padding-top: 24px; padding-bottom: 24px; } @media (max-width: 767px) { .expert-teachers .contain { padding-top: 24px; padding-bottom: 24px; padding-left: 15px; padding-right: 15px; } } .expert-teachers { padding: 80px 4% 60px; } .expert-teachers .teacher-slider { width: 1180px; margin: 0 auto; position: relative; } .teacher-slider .teacher-block .teacher-pic { width: 95px; height: 95px; border-radius: 50px; } .teacher-slider .teacher-block .teacher-info { font-size: 12px; color: #555; margin-top: 5px; } .zoom .teacher-pic { border-radius: 80px; } .teacher-slider .teacher-block-big { display: inline-block; transform: scale(1); -ms-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .teacher-slider .teacher-block-big .teacher-pic { width: 160px; height: 160px; border-radius: 80px; } .zoom .teacher-info { margin-top: 5px !important; } .zoom .teacher-name { color: #333 !important; } .zoom .teacher-qualification { font-size: 10px !important; color: #666 !important; } .teacher-slider .teacher-block-big .teacher-info { font-size: 12px !important; color: #333; margin-top: 5px; } .teacher-rating { color: #fff; } .zoom .teacher-rating { color: #e6632f; font-size: 10px !important; } .expert-teachers .teacher-testimonial { background: linear-gradient(270deg,#eafaff 0,#f7f7f7); border-radius: 2px; width: 400px; font-size: 18px; font-style: italic; color: #555; font-weight: 300; margin: 0 auto; padding: 25px; box-shadow: 12px 15px 20px 0 rgba(46,61,73,.15); position: relative; } .expert-teachers .teacher-testimonial:before { border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #f3f3f3; border-left: 10px solid transparent; content: ""; position: absolute; top: -20px; left: 47%; } .teacher-slider .teacher-block .teacher-name,.teacher-slider .teacher-block-big .teacher-name { text-transform: uppercase; margin: 0; padding: 0; font-size: 12px !important; color: #555; } .teacher-slider .teacher-block .teacher-qualification,.teacher-slider .teacher-block-big .teacher-qualification { text-transform: uppercase; margin: 0; padding: 0; font-size: 10px !important; color: #555; line-height: 16px !important; } .scroll-block-container { white-space: nowrap; overflow: hidden; } .slider { position: relative; overflow: visible; margin: 20px auto 0px auto; border-radius: 4px; width: 890px; } .slider-wrapper { overflow: hidden; width: 840px; margin: 0 auto; } .testimonials .slider-wrapper { overflow: hidden; width: 1000px; margin: 0 auto; } .slider ul { margin: 0; padding: 50px 0 0; height: 240px; list-style: none; } .slider ul li { display: inline-block; padding: 0; width: 155px; vertical-align: middle; text-align: center; } .expert-teachers .slider .block-transition { transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; } a.control_prev,a.control_next { content: ""; width: 25px; height: 25px; border: 2px solid; position: absolute; top: 40%; border-color: #333 #333 transparent transparent; transition: ease-in .1s; opacity: .3; cursor: pointer; z-index: 29; } a.control_prev:hover,a.control_next:hover { opacity: 1; } a.control_prev { left: -3%; transform: rotateZ(-135deg); } a.control_next { right: -3%; transform: rotateZ(45deg); } .slider_option { position: relative; margin: 10px auto; width: 160px; font-size: 18px; } .zoom { transform: scale(1.5); margin: 0 25px; } .zoom-out { transform: scale(1); } .expert-teachers h2 { color: #02b3e4 } .expert-teachers .subtitle { font-weight: 300 } .founders { position: relative; background-color: #fafbfc; display: inherit; } .founders .card { margin-top: 0; margin-bottom: 24px; text-align: left; position: relative; background: #fff; box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2); border-radius: 6px; transition: all .3s ease } @media screen and (min-width: 48rem) { .founders .card { margin-bottom: 24px; } } .founders .card:hover { box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2) } .founders .card:last-child { margin-bottom: 0 } .founders .contain { padding-top: 48px; padding-bottom: 48px } @media screen and (min-width: 48rem) { .founders .contain { padding-top: 72px; padding-bottom: 72px } } .founders .contain:before { content: ""; width: 2000px; z-index: -1000; background: 0 100%; -webkit-transform-origin: top left; transform-origin: top left; position: absolute; top: 0; left: 0; -webkit-transform: 100%; transform: 100% } .founders h2 { color: #02b3e4 } .founders .subtitle { color: #525c65; font-weight: 300; } .founders .card { margin-bottom: 48px!important } @media screen and (min-width: 48rem) { .founders__cards { float:left; display: block; margin-right: 1.69491525%; width: 49.15254237% } .founders__cards:last-child { margin-right: 0 } } .founders__cards--content { margin-top: 0; margin-bottom: 24px; padding-top: 48px; padding-bottom: 48px } @media screen and (min-width: 48rem) { .founders__cards--content { margin-bottom:0 } } @media screen and (min-width: 62rem) { .founders__cards--content { padding-top: 24px; padding-bottom: 24px; height: 310px } } .founders__cards--content .left img{ border-radius: 50%; display: block; width: 105px; height: 105px; vertical-align: middle; margin-left: 20px; } @media screen and (min-width: 62rem) { .founders__cards--content .left { float:left; display: block; margin-right: 1.69491525%; width: 23.72881356% } .founders__cards--content .left:last-child { margin-right: 0 } } .founders__cards--content .right { padding: 0 26px } .founders__cards--content .right ul { list-style-type: none; padding: 0 } .founders__cards--content .right ul li { position: relative; color: #525c65; margin-bottom: 12px; padding-left: 30px } .founders__cards--content .right ul li:last-child { margin-bottom: 0 } .founders__cards--content .right ul li::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; background-color: #15c26b; background-image: url(../images/check_white.min.svg); background-repeat: no-repeat; background-position: center; background-size: 70%; border-radius: 16px; } @media screen and (min-width: 62rem) { .founders__cards--content .right { float:left; display: block; margin-right: 1.69491525%; width: 74.57627119%; max-width: 362px; padding: 0 } .founders__cards--content .right:last-child { margin-right: 0 } } @media (max-width: 767px) { .founders__cards--content .left img{ margin: 0 auto !important; text-align: center !important; } .founders__cards--content .right h4{ margin: 12px auto !important; text-align: center !important; font-size: 20px; } } /* carousel */ #quote-carousel { padding: 0 10px 30px 10px; margin-top: 30px; text-align:center; } /* indicator position */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: -10px; margin-right: -19px; } /* indicator color */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } /* active indicator */ #quote-carousel .carousel-indicators .active { background: #333333; height:10px; width:10px; margin-bottom:1px; } .testimonials{ position: relative; background-color: #fafbfc; display: inherit; } @media only screen and (min-width: 641px) { .remodal { max-width: 800px; } } @media (min-width: 1024px){ .intl-tel-input { display: block !important; } } .iti-mobile .intl-tel-input.iti-container { z-index: 9999; } .am-hd{ color: #0F3271; text-transform: capitalize; } .dropdown { position: relative; } .dropdown-menu { margin-top: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .dropdown-toggle::after { display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: 4px; content: ""; border-top: 4px solid; border-right: 4px solid transparent; border-left: 4px solid transparent; } .dropdown-toggle:empty::after { margin-left: 0; } .dropup .dropdown-menu { margin-top: 0; margin-bottom: 2px; } .dropup .dropdown-toggle::after { border-top: 0; border-bottom: 4px solid; } .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 230px; padding: 8px 0; margin: 2px 0 0; font-size: 14px; color: #555; text-align: left; list-style: none; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 4px; } .dropdown-divider { height: 0; margin: 8px 0; overflow: hidden; border-top: 1px solid #e9ecef; } .dropdown-item { display: block; width: 100%; padding: 4px 24px; clear: both; font-weight: normal; color: #555; text-decoration: none; text-align: inherit; white-space: nowrap; background: none; border: 0; } .dropdown-item:focus, .dropdown-item:hover { background-color: #e6e6e6; text-decoration: none; } .dropdown-item.active, .dropdown-item:active { background-color: #e6e6e6; border-right: 5px solid #02b3e4; font-weight: 700; color: #02b3e4; text-decoration: none; } .dropdown-item.disabled, .dropdown-item:disabled { color: #868e96; background-color: transparent; } .show > a { outline: 0; } .dropdown-menu.show { display: block; } .dropdown:hover .dropdown-menu { display: block; } .offerings-section-cta-link { font-weight: 400; font-size: 85%; text-decoration: none; color: #02b3e4; } .offerings-section-cta-link-arrow { fill: #02b3e4; color: #02b3e4; vertical-align: middle; margin-top: -1px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease; } .offerings-section-cta-link:hover, .offerings-section-cta-link:active{ text-decoration: none; color: #029fcb; } .offerings-section-cta-link:hover i { margin-left: 5px; fill: #299abc; color: #299abc; text-decoration: none; } .nav-pills>li>a { border-radius: 0; font-weight: 600; } .nav.nav-stacked { border-right: 1px solid #dcdcdc } .nav.nav-stacked>li:not(.active) a:hover { background-color: #e6e6e6 } .nav.nav-stacked>li a { font-size: 16px; padding: 8px 30px 8px 10px } .nav.nav-stacked>li a:hover { color: #02b3e4 } .nav.nav-stacked>li.active a { background-color: #e6e6e6; border-right: 5px solid #02b3e4; font-weight: bold; color: #02b3e4 } .nav.nav-stacked>li.active a:hover { background-color: #e6e6e6; color: #02b3e4 } .nav.nav-stacked .nav.nav-stacked { border-right: 0; font-size: 94% } .nav.nav-stacked .nav.nav-stacked>li { padding-left: 20px } .nav.nav-stacked-extended { padding-top: 10px; padding-bottom: 10px } .nav-pills>li { float: left } .nav-pills>li>a { border-radius: 0 } .nav-pills>li+li { margin-left: 2px } .nav-pills>li.active>a,.nav-pills>li.active>a:hover,.nav-pills>li.active>a:focus { background-color: #e6e6e6; color: #02b3e4 } .nav-stacked>li { float: none } .nav-stacked>li+li { margin-top: 2px; margin-left: 0 } .faqs h4{ color: #02b3e4; text-transform: uppercase; } .faq-question{ font-size: 16px; line-height: 1.7; font-weight: 600; border: 0; color: #0F3271; } .faq-question:focus, .faq-question:hover{ color: #0F3271; } .faq-answer{ font-size: 15px; line-height: 1.7; font-weight: 400; } .faq-contact{ color: #02b3e4; line-height: 1.6; font-size: 22px; margin-top: 23px; margin-bottom: 11.5px; font-weight: 600; } /*.col { float: left !important; width: 100% !important }*/ .col-gutters { margin: 0 -15px } .col-gutters>.col { padding: 0 15px } .col-container:before,.col-container:after { content: " "; display: table } .col-container:after { clear: both } .col-max { max-width: 1180px !important; margin: 0 auto !important } @media screen { .col-max { padding: 0 } } @media screen and (min-width: 680px) { .col-max { padding:0 5px } } @media screen and (min-width: 960px) { .col-max { padding:0 15px } } .col-center { float: none !important; margin: 0 auto !important; } .text-center-xs { text-align: center !important; } .text-color-white { color: #fff !important; } .p-tb-2-xs { padding-top: 24px !important; padding-bottom: 24px !important } .p-b-6-xs { padding-bottom: 80px !important } .p-t-1-xs { padding-top: 16px !important } .m-0-xs { margin: 0px !important; } @media screen and (min-width: 960px) { .col-70-lg { width: 70% !important; } } @media screen and (min-width: 680px) { .resource-item { height:275px } .financial-resource-item { height: 325px } .p-tb-4-md { padding-top: 48px !important; padding-bottom: 48px !important } .p-lr-5-md { padding-left: 64px !important; padding-right: 64px !important; } .col-90-md { width: 90% !important; } } .hero-section .col-container::before { content: ""; width: 100%; height: 275px; z-index: -1000; background: linear-gradient(160deg,#02ccba,#aa7ecd); position: absolute; top: 0; left: 0; } @media screen and (min-width: 767px) { .hero-section .col-container::before { content: ""; width: 100%; height: 350px; z-index: -1000; background: linear-gradient(160deg,#02ccba,#aa7ecd); position: absolute; top: 0; left: 0; } } @media screen { .hero-section .text-0-md { font-size: 36px !important } } @media screen and (min-width: 680px) { .hero-section .text-0-md { font-size:48px !important } } @media screen and (min-width: 1031px) { .hero-section .text-0-md { font-size:64px !important } } .resource-item { padding: 16px !important; } .resource { border-width: 2px !important; height: 100% !important; position: relative !important; padding: 24px !important; border-color: #02ccba !important; border-radius: 4px !important; border: 1px solid; } .financial-resource{ border: none; box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2); border-radius: 6px; transition: all .3s ease } .financial-resource:hover { border: none; box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2) } .resource h4{ margin: 0px !important; color: #02ccba !important; } .financial-resource h4{ color: #02b3e4 !important; } .resource p{ color: #717f86; font-size: 16px; line-height: 1.6; margin-top: 10px; margin-bottom: 24px !important; font-weight: 400; } @media screen and (max-width: 768px) { .resource p { font-size: 15px; } } .resource ul { list-style-type: none; padding: 0 } .resource ul li { position: relative; color: #525c65; margin-bottom: 12px; padding-left: 30px } .resource ul li:last-child { margin-bottom: 0 } .resource ul li::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; background-color: #15c26b; background-image: url(../images/check_white.min.svg); background-repeat: no-repeat; background-position: center; background-size: 70%; border-radius: 16px; } .why-am { position: relative; display: inherit; } .why-am .card { margin-top: 0; margin-bottom: 24px; text-align: left; position: relative; background: #fff; box-shadow: 5px 5px 25px 0 rgba(46,61,73,.2); border-radius: 6px; transition: all .3s ease } @media screen and (min-width: 48rem) { .why-am .card { margin-bottom: 24px; } } .why-am .card:hover { box-shadow: 2px 4px 8px 0 rgba(46,61,73,.2) } .why-am .card:last-child { margin-bottom: 0 } .why-am .contain { padding-top: 48px; padding-bottom: 48px } @media screen and (min-width: 48rem) { .why-am .contain { padding-top: 72px; padding-bottom: 72px } } .why-am .contain:before { content: ""; width: 2000px; z-index: -1000; background: 0 100%; -webkit-transform-origin: top left; transform-origin: top left; position: absolute; top: 0; left: 0; -webkit-transform: 100%; transform: 100% } .why-am h2 { color: #02b3e4 } .why-am .subtitle { color: #525c65; font-weight: 300; } .why-am .card { margin-bottom: 48px!important } @media screen and (min-width: 48rem) { .why-am__cards { float:left; display: block; margin-right: 1.69491525%; width: 49.15254237% } .why-am__cards:last-child { margin-right: 0 } } .why-am__cards--content { margin-top: 0; margin-bottom: 24px; padding: 30px; } @media screen and (min-width: 48rem) { .why-am__cards--content { margin-bottom:0 } } @media screen and (min-width: 62rem) { .why-am__cards--content { padding: 24px; height: 420px } } .why-am__cards--content ul { list-style-type: none; padding: 0 } .why-am__cards--content ul li { position: relative; color: #525c65; margin-bottom: 12px; padding-left: 30px } .why-am__cards--content ul li:last-child { margin-bottom: 0 } .why-am__cards--content ul li::before { content: ""; position: absolute; top: 3px; left: 0; width: 20px; height: 20px; background-color: #15c26b; background-image: url(../images/check_white.min.svg); background-repeat: no-repeat; background-position: center; background-size: 70%; border-radius: 16px; } /* Review with pagination CSS */ #reviews { clear: both } .reviews_contain { margin-bottom: 10px } .stats,.review-card { width: 100%; float: left } @media (min-width: 44em) { .stats,.review-card { width: 50%; float: left } } .stats { margin-bottom: 24px; padding-left: 10px } .reviews-avg { margin: 0 0 20px } .reviews-avg .reviews-avg-rating { font-size: 40px; display: inline-block; color: #2e3d49 } .reviews-avg .reviews-avg-stars { margin-left: 15px; background: url(../images/review-star.png) repeat-x; background-size: 25px 70px; font-size: 0; height: 25px; line-height: 0; overflow: hidden; text-indent: 999em; width: 125px; display: inline-block } .reviews-avg .reviews-avg-stars .rating { background: url(../images/review-star.png) repeat-x; background-position: 0 -40px; background-size: 25px 70px; float: left; height: 25px } .reviews-avg-med-stars { background: url(../images/review-star.png) repeat-x; background-size: 18px 52px; font-size: 0; height: 18px; line-height: 0; overflow: hidden; text-indent: 999em; width: 90px; display: inline-block; } .reviews-avg-med-stars .rating { background: url(../images/review-star.png) repeat-x; background-position: 0 -30px; background-size: 18px 52px; float: left; height: 18px; } .reviews-avg-small-stars { background: url(../images/review-star.png) repeat-x; background-size: 14px 40px; font-size: 0; height: 14px; line-height: 0; overflow: hidden; text-indent: 999em; width: 70px; display: inline-block; } .reviews-avg-small-stars .rating { background: url(../images/review-star.png) repeat-x; background-position: 0 -23px; background-size: 14px 40px; float: left; height: 14px; } .reviews-avg .reviews-total-count { font-size: 14px; position: relative; bottom: 4px; color: #AFAFAF; margin-left: 10px } .reviews-overview { width: 85% } .reviews-overview .review-bar-wrapper { display: flex; flex-wrap: nowrap; justify-content: space-between; margin-bottom: 10px } .reviews-overview .review-bar-wrapper .review-progress { margin: 0; width: 65%; background-color: #dbe2e8 } .reviews-overview .review-bar-wrapper .review-progress-bar { background-color: #ecc81a; color: #fff; font-size: 12px; font-weight: 700; text-indent: 10px; text-align: left; height: 30px; line-height: 30px } .reviews-overview .review-bar-wrapper .left-label,.reviews-overview .review-bar-wrapper .right-label { letter-spacing: 0.5px; height: 30px; line-height: 30px; font-size: 12px; color: #AFAFAF; text-transform: uppercase; font-weight: 700; -webkit-font-smoothing: antialiased } .reviews-overview .review-bar-wrapper .left-label { width: 60px; color: #7E97AC } .reviews-overview .review-bar-wrapper .right-label { width: 40px; padding-left: 10px; text-align: left } .star { background: url(../images/review-star.png) 0 4px no-repeat; background-size: 75%; width: 18px; height: 18px; display: inline-block } .star.yellow { background-position: 0 -17px } .review-card-details { cursor: pointer; padding: 34px; position: relative; z-index: 1; background: #FFFFFF; margin: 10px; color: #2e3d49; border: 1px solid #dbe2e8; box-shadow: 0px 2px 4px 0px rgba(46,60,73,0.2); font-size: 16px; line-height: 24px } .review-card-details:after { width: 100%; height: 80px; content: ''; display: block; position: absolute; bottom: 0; left: 0; background: rgba(255,255,255,0.5); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 50%, #fff 100%) } @media (min-width: 44em) { .review-card-details { height:310px } } .review-card-head { height: 30px } .review-card-head .student-name { font-size: 16px; text-transform: capitalize; font-weight: 700; float: left; max-width: 40%; height: 25px; overflow: hidden; text-overflow: ellipsis } .review-card-head .student-stars { text-align: right; float: right } .review-card-head .glyphicon { color: #dcdcdc } .review-card-head .glyphicon.orange { color: #f08c35 } .review-card-body { overflow: hidden; height: 164px } @media (min-width: 35em) { .review-card-body { overflow:hidden; height: 224px } } .review-card-body p { margin: 0; line-height: 24px } @media (min-width: 35em) { .review-card-body p { overflow: hidden; line-height: 32px } } .review-card-body .student-date { color: #AFAFAF; float: right; display: none; font-size: 12px; position: absolute; bottom: 30px; right: 30px; padding: 0; z-index: 5 } @media (min-width: 44em) { .review-card-body .student-date { bottom: 15px; display: block } } .pagination-contain { display: block } .pagination-contain .left-col { float: left; width: 50% } .pagination-contain .right-col { text-align: right } .pagination-contain .prevPage,.pagination-contain .nextPage { cursor: pointer; text-transform: uppercase; color: #02b3e4; font-weight: 700; letter-spacing: 0; font-size: 12px } .pagination-contain .prevPage.disabled,.pagination-contain .nextPage.disabled { color: #AFAFAF; pointer-events: none; cursor: not-allowed } @media (min-width: 44em) { .pagination-contain .prevPage,.pagination-contain .nextPage { font-size:0.875em; letter-spacing: 0.2px } } .pagination-contain .prevPage:before { background: url(../images/review-arrows.png) 10px -20px no-repeat; content: ''; width: 30px; height: 10px; display: inline-block; background-size: 20px 80px } .pagination-contain .prevPage.disabled:before { background-position: 10px 0 } .pagination-contain .nextPage:after { background: url(../images/review-arrows.png) 8px -60px no-repeat; content: ''; width: 30px; height: 10px; display: inline-block; background-size: 20px 80px } .pagination-contain .nextPage.disabled:after { background-position: 8px -40px } .reviews_modal { padding: 32px 40px; text-align: left } .reviews_modal .student-name { float: left; width: 50% font-weight: 700; color: #2e3d49; } .reviews_modal .student-stars { text-align: right } .reviews_modal p { padding: 0; font-size: 14px; line-height: 24px; margin-bottom: 40px; text-align: justify; font-weight: 400; color: #525c65; } @media screen and (min-width: 48rem) { .reviews_modal p { font-size: 16px; line-height: 28px; } } .reviews_modal .review-card-head { height: 32px; } .reviews_modal .review-card-body { height: auto } .reviews_modal .student-date { bottom: 32px; right: 56px; display: block } @media (min-width: 44em) { .reviews_modal { padding: 80px } .reviews_modal .review-card-body { height: auto } .reviews_modal .student-date { bottom: 30px; display: block } } .review-avg{ font-size: 13px; } .review-avg-prg{ font-size: 14px; } .resource-content .contain ul { list-style-type: none; margin: 0 24px; padding: 0 } .resource-content .contain ul li { position: relative; color: #525c65; margin-bottom: 24px; padding-left: 40px } .resource-content .contain ul li:last-child { margin-bottom: 0 } .resource-content .contain ul li::before { content: ""; position: absolute; top: 4px; left: 0; width: 20px; height: 20px; background-color: #15c26b; background-image: url(../images/check_white.min.svg); background-repeat: no-repeat; background-position: center; background-size: 70%; border-radius: 16px; } .resource-content strong{ font-size: 18px; } /*mento profile update css*/ .menu { padding: 0 !important; } .menu .nav { margin: 0 !important; } .mentor-profile-menu{ padding: 0 !important; margin: 0 !important; } .menu .nav li { border-top: 1px solid #ddd; line-height: 20px; } .menu .nav li a { outline: none; font-weight: 500; padding: 15px 20px; display: block; line-height: 30px; min-height: 60px } .menu > div { padding: 20px } .menu ul { list-style: none; padding: 0; margin: 0 } .menu i { background-size: 16px; display: inline-block; width: 30px; height: 16px } .menu .active a { color: #444; background: whitesmoke } .menu .nav a:hover { background: whitesmoke } .menu .navHeader { background-color: #f8f9fa; line-height: 40px !important; padding: 0px 20px; color: #666 } .profile-complete-progress-bar { height: 20px; } legend small { font-size: 15px; } .tag-label{ margin-bottom: 10px !important; } .mentor-exp-gap-short{ margin-top: 27px; } .enable-vacation{ margin: 0px 0 30px 5px; color: #5f6366; } .vacation-message{ margin-bottom: 10px; padding: 10px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; } .enable-vacation label>b { padding-left: 5px; } .enable-vacation label { display: inline-block; line-height: 40px; color: #333; } .enable-vacation small { font-size: 12px; } .avatar-upload{ width: 200px; } .avatar-upload .file-input { display: table-cell; max-width: 172px; } .avatar-upload .file-preview-frame,.avatar-upload .file-preview-frame:hover { margin: 0; padding: 0; border: none; box-shadow: none !important; text-align: center; } .fileinput-remove-button { color: #333; background-color: #fff; border-color: #ccc; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 15px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid #ccc; border-radius: 4px; margin: 0; margin-left: 25%; } .file-actions{ display: none; } .btn-file{ color: #fff !important; background-color: #1f8fc1 !important; border-color: #1f8fc1 !important; display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 15px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid #ccc; border-radius: 4px; margin: 0; margin-left: 5px; } .btn-file:hover{ color: #fff !important; background-color: #307699 !important; border-color: #307699 !important; } .avatar-upload-label{ font-size: 15px !important; line-height: 0.99999998; color: #BDBDBD; font-weight: 400; margin: 16px 0 5px 0; } .add_new { color:green !important; margin-left: 25px; cursor: pointer; text-decoration: none !important; } .preview { color: #1f8fc1 !important; cursor: pointer; text-decoration: none !important; } .delete_record { color:red !important; cursor: pointer; text-decoration: none !important; } .mentor-language{ display: block; margin-bottom: 10px; font-size: 16px; } .free-session-message{ margin-bottom: 10px; padding: 10px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); background-color: #fcf8e3; border: 1px solid #fbeed5; } .enable-free-session label>b { padding-left: 5px; } .enable-free-session label { display: inline-block; line-height: 40px; color: #333; } .enable-free-session small { font-size: 12px; } .lectures-container{ margin: 0 !important; padding: 0 !important; background-color: #fff; } .lecture-container { display: flex; padding: 12px 30px 12px 8px; border-top: 1px solid #ededed; } .lecture-container .down-arrow { cursor: pointer; display: inline-block; margin-left: 10px } .lecture-container .left-content { display: flex; align-items: flex-start; width: 100% } .lecture-container [class*=" udi_"],.lecture-container [class^=udi] { opacity: .3; font-size: 18px; } .lecture-container .description { font-size: 14px } .lecture-container .description.collapsing+.title i:before,.lecture-container .description.in+.title i:before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg) } .lecture-container .description p { margin-bottom: 0 } .lecture-container .description.in~.title .down-arrow { transform: rotate(180deg) } .lecture-container.lecture-container--preview .content-summary,.lecture-container.lecture-container--preview .preview-text,.lecture-container.lecture-container--preview .title,.lecture-container.lecture-container--preview [class*=" udi_"],.lecture-container.lecture-container--preview [class^=udi] { color: #1376d7 } .lecture-container .title { color: #333; font-size: 15px; margin-top: -2px } .lecture-container .title i:before { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); -o-transform: rotate(270deg); transform: rotate(270deg) } .lecture-container .top { display: flex; flex-direction: column-reverse; margin-left: 8px; width: 100% } .lectures-container .details { display: none; font-size: 14px } .lecture-container { padding: 12px 30px 12px 43px } .lecture-container .top { margin-left: 15px } .lecture-container .left-content { width: 90% } .lectures-container .details { display: flex; align-items: flex-start; justify-content: flex-end; flex-wrap: wrap; margin-left: auto; width: 10% } .start-time-label { width: 23%; display: inline-block; margin-bottom: 15px; margin-left: 8%; -webkit-column-break-inside: avoid; background-color: #f6f7f7; pointer-events: initial; cursor: pointer; transition: all .19s ease; border: 1px solid #d1d3d6; border-radius: 3px; font-size: 15px; line-height: 15px; color: #404853; font-size: 15px; line-height: 15px; color: #404853; } .start-time-label:hover { background-color: #e6eeff; } .start-time-label input[type="radio"] { display: none; border-radius: 100%; -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border: 1px solid #d0d2d5; color: #6799ff; margin-bottom: -4px; margin-top: -4px; margin-left: 0; -moz-appearance: default; } .start-time-label input[type="radio"]:checked { background-color: #fff; border-color: #5288f7; box-shadow: inset 0 0 0 4px #6799ff; } .start-time-label p { margin: 0; color: #6799ff; font-weight: 400 !important; font-style: normal; font-size: 12px; line-height: 22px; padding: 5px; } .start-time-label.checked { border: 1px solid #ff6300; background-color: transparent; } .start-time-label.checked p { color: #ff6300; font-weight: bold !important; } .mentor-time-zone{ font-weight: 400 !important; float: left; } .student-time-zone{ margin-right: 27px; font-weight: 400 !important; float: right; } @media (min-width: 992px) { .mentor-time{ margin-left: 25px; } .user-time{ margin-right: 40px; } } @media (max-width: 767px) { .mentor-time-zone{ font-weight: 400 !important; float: none; } .student-time-zone{ font-weight: 400 !important; float: none; } .start-time-label { margin-left: 1%; width: 20%; margin-top: 20px; } .time-date-picker{ text-align:center; } #datepicker{ margin-left: 31%; } } @media (max-width: 648px) { #datepicker{ margin-left: 20%; } } @media (max-width: 480px) { #datepicker{ margin-left: 10%; } .start-time-label { margin-left: 1%; width: 25%; margin-top: 20px; } } @media (max-width: 375px) { #datepicker{ margin-left: 0; } .start-time-label { margin-left: 1%; width: 27%; margin-top: 20px; } } @media (max-width: 320px) { #datepicker{ margin-left: 0; } .start-time-label { margin-left: 1%; width: 27%; margin-top: 20px; } .start-time-label p { font-size: 12px; line-height: 15px; padding: 2px; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { .start-time-label { margin-left: 6%; width: 17%; } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .start-time-label { margin-left: 7%; width: 17%; } .start-time-label p { font-size: 12px; line-height: 28px; padding: 2px; } .student-time-zone { margin-right: 5px; } } /* Media Queries - Responsive -------------------------------------------------- */ @media (min-width: 768px) { } @media (max-width: 767px) { .footer { position: absolute; width: 100%; /* Set the fixed height of the footer here */ height: 810px; border-top: solid 1px #e6e6e6; background-color: #f3f3f3; bottom: 0; font-size: 14px; } body { /* Margin bottom by footer height */ margin-bottom: 810px; } .footer h6{ margin-top: 15px; margin-bottom: 5px; } .footer p{ line-height: 24px; font-size: 14px; } .footer p a{ border-bottom: none; } } @media (min-width: 768px) and (max-width: 991px) { .footer { position: absolute; width: 100%; /* Set the fixed height of the footer here */ height: 610px; border-top: solid 1px #e6e6e6; background-color: #f3f3f3; bottom: 0; font-size: 14px; } body { /* Margin bottom by footer height */ margin-bottom: 610px; } .footer h6{ margin-top: 15px; margin-bottom: 5px; } .footer p{ line-height: 24px; font-size: 14px; } .footer p a{ border-bottom: none; } } @media (min-width: 992px) and (max-width: 1199px) { .footer { position: absolute; width: 100%; /* Set the fixed height of the footer here */ height: 310px; border-top: solid 1px #e6e6e6; background-color: #f3f3f3; bottom: 0; font-size: 14px; } body { /* Margin bottom by footer height */ margin-bottom: 310px; } .footer p{ line-height: 24px; font-size: 14px; } .footer p a{ border-bottom: none; } } @media (min-width: 1200px) { .footer { position: absolute; width: 100%; /* Set the fixed height of the footer here */ height: 304px; border-top: solid 1px #e6e6e6; background-color: #f3f3f3; bottom: -41px; font-size: 14px; } body { /* Margin bottom by footer height */ margin-bottom: 260px; } .footer p{ line-height: 24px; font-size: 14px; } .footer p a{ border-bottom: none; } } /*//mentoring*/ .a-section { overflow: hidden; padding-left: 16px; padding-right: 16px } .a-section--inverse { background-color: #4a4d55; color: #ffffff } .a-section--bg { background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; text-shadow: 0 0 7px rgba(0,0,0,0.4) } #course_header { background-image: url(../images/6.png); } @media (min-width: 480px) { #course_header { background-image: url(../images/7.png); } } @media (min-width: 900px){ #course_header { background-image: url(../images/8.png); } } #business_header { background-image: url(../images/14.jpg); } @media (min-width: 480px) { #business_header{ background-image: url(../images/13.jpg); } } @media (min-width: 900px){ #business_header { background-image: url(../images/12.jpg); } } #business-header { background-image: url(../images/6.jpg); } @media (min-width: 480px){ #business-header { background-image: url(../images/7.jpg); } } @media (min-width: 900px){ #business-header { background-image: url(../images/8.jpg); } } #about_header { background-image: url(../images/about-mission-2.jpg); min-height: 350px; } @media (min-width: 480px) { #about_header { background-image: url(../images/about-mission-2.jpg); min-height: 400px; } } @media (min-width: 900px){ #about_header { background-image: url(../images/about-mission-2.jpg); min-height: 450px; } } #business_subscription_header { background-image: url(../images/about-mission-2.jpg); min-height: 350px; } @media (min-width: 480px) { #business_subscription_header { background-image: url(../images/about-mission-2.jpg); min-height: 400px; } } @media (min-width: 900px){ #business_subscription_header { background-image: url(../images/about-mission-2.jpg); min-height: 450px; } } #job_header { background-image: url(../images/careers.jpg); min-height: 250px; } @media (min-width: 480px) { #job_header { background-image: url(../images/careers.jpg); min-height: 300px; } } @media (min-width: 900px){ #job_header { background-image: url(../images/careers.jpg); min-height: 350px; } } #mentor_header { background-image: url(../images/mentor-image.jpg); min-height: 350px; } @media (min-width: 480px) { #mentor_header { background-image: url(../images/mentor-image.jpg); min-height: 450px; } } @media (min-width: 900px){ #mentor_header { background-image: url(../images/mentor-image.jpg); min-height: 590px; } } .a-section--alt { background-color: #f3f3f3 } .a-content { font-size: 18px; line-height: 1.3; margin-top: 61px; margin-bottom: 61px; max-width: 35em; margin-left: auto; margin-right: auto } .a-content-list { font-size: 18px; line-height: 1.3; margin-top: 61px; margin-bottom: 61px; max-width: 45em; margin-left: auto; margin-right: auto } @media screen and (min-width: 680px) { .a-content { margin-top:68px } .a-content-list { margin-top:68px } } @media screen and (min-width: 1695px) { .a-content { margin-top:76px } .a-content-list { margin-top:76px } } @media screen and (min-width: 680px) { .a-content { margin-bottom:68px } .a-content-list { margin-bottom:68px } } @media screen and (min-width: 1695px) { .a-content { margin-bottom:76px } .a-content-list { margin-bottom:76px } } .a-content--mega { font-size: 24px; line-height: 1.3; } .a-content--contiguous { margin-top: 0px; margin-bottom: 0px } @media screen and (min-width: 680px) { .a-content--contiguous { margin-top:0px } } @media screen and (min-width: 1695px) { .a-content--contiguous { margin-top:0px } } @media screen and (min-width: 680px) { .a-content--contiguous { margin-bottom:0px } } @media screen and (min-width: 1695px) { .a-content--contiguous { margin-bottom:0px } } .a-content--tight { margin-top: 37px; margin-bottom: 37px } @media screen and (min-width: 680px) { .a-content--tight { margin-top:40px } } @media screen and (min-width: 1695px) { .a-content--tight { margin-top:45px } } @media screen and (min-width: 680px) { .a-content--tight { margin-bottom:40px } } @media screen and (min-width: 1695px) { .a-content--tight { margin-bottom:45px } } .a-content--tight-top { margin-top: 38px } @media screen and (min-width: 680px) { .a-content--tight-top { margin-top:40px } } @media screen and (min-width: 1695px) { .a-content--tight-top { margin-top:45px } } .a-content--contiguous-bottom { margin-bottom: 0px } @media screen and (min-width: 680px) { .a-content--contiguous-bottom { margin-bottom:0px } } @media screen and (min-width: 1695px) { .a-content--contiguous-bottom { margin-bottom:0px } } .u-centered { text-align: center } .o-billboard { background-position: center center; background-repeat: no-repeat; background-size: cover } .o-billboard__content { text-align: center } .o-billboard__header { margin-bottom: 62px } @media screen and (min-width: 680px) { .o-billboard__header { margin-bottom:68px } } @media screen and (min-width: 1695px) { .o-billboard__header { margin-bottom:75px } } .o-billboard__headline { font-size: 18px; line-height: 1.2; margin-bottom: 25px } @media screen and (min-width: 680px) { .o-billboard__headline { margin-bottom:28px } } @media screen and (min-width: 1695px) { .o-billboard__headline { margin-bottom:30px } } .o-billboard__heading { font-size: 46px; line-height: 1.1; margin-bottom: 25px; margin-top: 0 } @media screen and (max-width: 679px) { .o-billboard__heading { font-size:36px } } @media screen and (min-width: 680px) { .o-billboard__heading { margin-bottom:27px } } @media screen and (min-width: 1695px) { .o-billboard__heading { margin-bottom:30px } } .o-billboard__message { font-size: 18px; line-height: 1.3; margin-bottom: 0 } .o-billboard__attribution { font-size: 12px; line-height: 1.4; margin-top: 12px; margin-bottom: 0 } @media screen and (min-width: 680px) { .o-billboard__attribution { margin-top:13px } } @media screen and (min-width: 1695px) { .o-billboard__attribution { margin-top:15px } } .o-billboard__cta { margin-top: 49px } @media screen and (min-width: 680px) { .o-billboard__cta { margin-top:55px } } @media screen and (min-width: 1695px) { .o-billboard__cta { margin-top:60px } } .a-section-label { font-weight: bold; text-transform: uppercase; letter-spacing: 0.05em; font-size: 16px; line-height: 1.3; } .o-page-header__title { margin-bottom: 25px; margin-top: 0 } .section-heading { font-weight: 500; text-align: center; margin-top: 0 } .section-course-heading{ font-size: 40px; font-weight: bold; line-height: 1.6; text-align: center; color: #307699; } .te-popular-heading{ text-align: center; margin: 0px auto; margin-top: 40px; font-size: 30px; margin-bottom: 20px; line-height: 1.4; font-weight: 500; } .section-heading--exsmall { font-size: 22px; line-height: 1.2; } .section-heading--small { font-size: 28px; line-height: 1.1; } .section-heading--medium { font-size: 36px; line-height: 1.1; } .section-heading--medium-large { font-size: 41px; line-height: 1.1; } @media screen and (max-width: 679px) { .section-heading--medium-large { font-size:36px } } .section-heading--large { font-size: 44px; line-height: 1.1; color: white; } @media screen and (max-width: 679px) { .section-heading--large { font-size:36px } } .section-heading--ex-large { font-size: 51px; line-height: 1.0; } @media screen and (max-width: 679px) { .section-heading--ex-large { font-size:36px } } .section-heading--welcome { font-size: 36px; line-height: 1.1; margin: 0; margin-bottom: 49px } @media screen and (min-width: 680px) { .section-heading--welcome { margin-bottom:54px } } @media screen and (min-width: 1695px) { .section-heading--welcome { margin-bottom:60px } } .section-heading--highlights { font-size: 36px; line-height: 1.1; margin: 0; margin-bottom: 49px } @media screen and (min-width: 680px) { .section-heading--highlights { margin-bottom:54px } } @media screen and (min-width: 1695px) { .section-heading--highlights { margin-bottom:60px } } .section-heading--before-block { margin-bottom: 36px } @media screen and (min-width: 680px) { .section-heading--before-block { margin-bottom:40px } } @media screen and (min-width: 1695px) { .section-heading--before-block { margin-bottom:45px } } .a-content--contiguous-top { margin-top: 0px } @media screen and (min-width: 680px) { .a-content--contiguous-top { margin-top:0px } } @media screen and (min-width: 1695px) { .a-content--contiguous-top { margin-top:0px } } .a-content--tight-bottom { margin-bottom: 38px } @media screen and (min-width: 680px) { .a-content--tight-bottom { margin-bottom:40px } } @media screen and (min-width: 1695px) { .a-content--tight-bottom { margin-bottom:45px } } .a-content--spacious { margin-top: 85; margin-bottom: 85px } @media screen and (min-width: 680px) { .a-content--spacious { margin-top:95px } } @media screen and (min-width: 1695px) { .a-content--spacious { margin-top:105px } } @media screen and (min-width: 680px) { .a-content--spacious { margin-bottom:95px } } @media screen and (min-width: 1695px) { .a-content--spacious { margin-bottom:105px } } .a-content--spacious-top { margin-top: 85px } @media screen and (min-width: 680px) { .a-content--spacious-top { margin-top:95px } } @media screen and (min-width: 1695px) { .a-content--spacious-top { margin-top:105px } } .a-content--spacious-bottom { margin-bottom: 85px } @media screen and (min-width: 680px) { .a-content--spacious-bottom { margin-bottom:95px } } @media screen and (min-width: 1695px) { .a-content--spacious-bottom { margin-bottom:105px } } .text-typescale { font-size: 18px; line-height: 1.6; color: white; } .text-typescale-1 { font-size: 20px; line-height: 1.8; } .text-typescale-2 { font-size: 18px; line-height: 1.7; } .u-with-overlay { position: relative } .u-with-overlay::before { content: " "; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #000000; opacity: .6 } @media screen and (min-width: 648px) { .u-with-overlay::before { opacity:.6 } } .u-relative { position: relative } .section-cta { margin-top: 25px } @media screen and (min-width: 680px) { .section-cta { margin-top:27px } } @media screen and (min-width: 1695px) { .section-cta { margin-top:30px } } .section-cta--after-copy { margin-top: 36px } @media screen and (min-width: 680px) { .section-cta--after-copy { margin-top:40px } } @media screen and (min-width: 1695px) { .section-cta--after-copy { margin-top:45px } } .o-hero-header__content { position: absolute; z-index: 0; top: 0; bottom: 0; left: 16px; right: 16px; width: 100%; padding-top: 8% } @media screen and (min-width: 648px) { .o-hero-header__content { padding-top:16% } } @media screen and (min-width: 900px) { .o-hero-header__content { padding-top:12% } } @media screen and (min-width: 1600px) { .o-hero-header__content { padding-top:10% } } .o-hero-header__title { margin-top: 15%; margin-bottom: 2%; font-size: 50px; line-height: 1; color: #f3f3f3 } @media screen and (min-width: 648px) { .o-hero-header__title { margin-top: 10%; font-size:50px; line-height: 1 } } @media screen and (min-width: 1280px) { .o-hero-header__title { margin-top: 0; font-size:80px; line-height: 1 } } @media screen and (min-width: 1600px) { .o-hero-header__title { margin-top: 0; font-size:80px; line-height: .98 } } .profile-page-header-text { margin-bottom: 0; font-size: 24px; font-weight: 400; } .profile-heading-color { color: #666!important; } .font-light { font-weight: lighter; } .no-margin { margin: 0; } .profile-panel { border: none; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } .profile-panel-header img { margin-right: 15px; max-width: 55px; vertical-align: middle; } .course-icon { margin-top: 2px; } .workshop-icon { margin-top: 2px; } .profile-panel * { box-sizing: border-box; } .profile-course-card .profile-course-panel-header { border-bottom: none; cursor: pointer; } .profile-workshop-card .profile-workshop-panel-header { border-bottom: none; } .profile-mentoring-card .profile-mentoring-panel-header { border-bottom: none; } .profile-panel-header { padding-top: 12px; padding-bottom: 12px; } .profile-course-card .profile-course-icon-container { width: 60px; } .profile-workshop-card .profile-workshop-icon-container { width: 60px; } .profile-mentoring-card .profile-mentoring-icon-container { width: 90px; } .profile-course-card .profile-panel-header .profile-course-title { word-wrap: break-word; } .profile-workshop-card .profile-panel-header .profile-workshop-title { word-wrap: break-word; } .profile-mentoring-card .profile-panel-header .profile-mentoring-title { word-wrap: break-word; } .large-text { font-size: 16px; font-weight: 700; color: #384047; } .status-text label{ font-weight: bold; font-size: 15px; text-transform: uppercase; } .mentor-star-rate{ margin: auto; width: 50%; } .confirmed{ color: #68aa22; } .waiting{ color: #ff5722; } .cancelled{ color: #999; } .workshop-session-details{ font-size: 12px; color: #1f8fc1; text-decoration: none; } .mentoring-session-details{ font-size: 12px; color: #1f8fc1; text-decoration: none; } .workshop-session-details:hover, .workshop-session-details:focus{ font-size: 12px; color: #337ab7; text-decoration: none; } .mentoring-session-details:hover, .mentoring-session-details:focus{ font-size: 12px; color: #337ab7; text-decoration: none; } .profile-course-card .profile-panel-header .play-circle { padding-right: 15px; } .profile-workshop-card .profile-panel-header .play-circle { top: 0px; padding-right: 15px; } .profile-mentoring-card .profile-panel-header .play-circle { top: 0px; padding-right: 15px; } .profile-mentoring-card .profile-panel-header .confirm-session i { font-size: 28px; -webkit-animation: glowIt 3s infinite; -moz-animation: glowIt 3s infinite; -o-animation: glowIt 3s infinite; animation: glowIt 3s infinite; } .profile-mentoring-card .profile-panel-header .confirm-session { color: #68aa22; } .profile-workshop-card .profile-panel-header .plus-circle { padding-right: 8px; } .profile-mentoring-card .profile-panel-header .plus-circle { padding-right: 8px; } .profile-workshop-card .profile-panel-header .more-details { top: 30px; color: #b3b3b3; padding-right: 12px; } .profile-mentoring-card .profile-panel-header .more-details { top: 65px; color: #b3b3b3; padding-right: 12px; } .profile-panel-header .play-circle { position: absolute; top: 10px; right: 15px; color: #307699; font-size: 1.3em; } .profile-panel-header .more-details { position: absolute; top: 10px; right: 15px; color: #307699; font-size: 1.3em; } #particles { min-height: 370px; position: absolute; top: 0px; width: 100%; } .mentorProfileHeader { background-color: #383753; background-image: -moz-linear-gradient(144deg, #7460a8 0%, #2856ab 100%); background-image: -webkit-linear-gradient(144deg, #7460a8 0%, #2856ab 100%); background-image: -ms-linear-gradient(144deg, #7460a8 0%, #2856ab 100%); padding: 50px 0px; } .mentorProfileHeader .topRow { position: relative } @media (max-width: 767px) { .mentorProfileHeader .topRow { text-align:center } } .mentorProfileHeader .topRow .mainInfo { margin-bottom: 0px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; border-bottom: 0px; border-bottom-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; -moz-border-bottom-left-radius: 0px } .mentorProfileHeader .topRow .mainInfo .title-info { padding-left: 10px; padding-bottom: 10px; } .mentorProfileHeader .topRow .mainInfo .headLine { font-size: 1.2em; line-height: 1.5; color: #fff; font-weight: 300; } .mentorProfileHeader .topRow .mainInfo .pageTitle { margin-top: 0px; display: inline-block; color: #fff; font-weight: 400 } @media (min-width: 1200px) { .mentorProfileHeader .topRow .mainInfo .pageTitle { font-size:30px } } @media (max-width: 1199px) { .mentorProfileHeader .topRow .mainInfo .pageTitle { font-size:28px } } @media (max-width: 979px) { .mentorProfileHeader .topRow .mainInfo .pageTitle { font-size:20px } } @media (max-width: 767px) { .mentorProfileHeader .topRow .mainInfo .pageTitle { font-size:30px } } .mentorProfileHeader .topRow .mainInfo .status { bottom: 1.5em; margin-left: 5px; font-size: 12px } @media (min-width: 1200px) { .mentorProfileHeader .topRow .mainInfo .status { bottom:0.6em } } @media (max-width: 1199px) { .mentorProfileHeader .topRow .mainInfo .status { bottom:0.6em; font-size: 15px } } @media (max-width: 979px) { .mentorProfileHeader .topRow .mainInfo .status { bottom:0.6em; font-size: 15px } } @media (max-width: 767px) { .mentorProfileHeader .topRow .mainInfo .status { bottom:0.6em; font-size: 15px } } .mentorProfileHeader .topRow .mainInfo .status .for-hire { color: #CE4A3A } .mentorProfileHeader .topRow .mainInfo .timezone,.mentorProfileHeader .topRow .mainInfo .language { display: inline-block; color: #fff; font-weight: 300; } .mentorProfileHeader .topRow .mainInfo .timezone { margin-right: 10px; font-weight: 300; } .mentorProfileHeader .topRow .mainInfo .social-media { margin-top: 20px; } .mentorProfileHeader .topRow .mainInfo .expBadge { margin: 20px 0 0; text-align: left } @media (max-width: 767px) { .mentorProfileHeader .topRow .mainInfo .expBadge { text-align:center } } .mentorProfileHeader .topRow .mainInfo .expBadge .customizeBadge { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #8e979b; font-size: 1em; padding: 3px 8px 5px; margin-bottom: 4px; color: #fff; font-weight: bold } @media (max-width: 480px) { .mentorProfileHeader .topRow .mainInfo .expBadge .customizeBadge { margin-right:8px; margin-bottom: 8px } } .mentorProfileHeader .topRow .mainInfo .expBadge .customizeBadge:hover { background-color: #3e90ca; color: #fff } .mentorProfileHeader .topRow .rightSideBar { position: relative } .mentorProfileHeader .topRow .rightSideBarWapper { position: absolute; width: 332px; z-index: 4; top: 37px } @media (max-width: 1180px) { .mentorProfileHeader .topRow .rightSideBarWapper { width:300px } } @media (max-width: 1000px) { .mentorProfileHeader .topRow .rightSideBarWapper { width:250px } } @media (max-width: 767px) { .mentorProfileHeader .topRow .rightSideBarWapper { margin-top:10px; position: relative; right: auto; width: auto } .mentorProfileHeader .topRow .rightSideBarWapper.help-listing { top: 0px !important; position: relative !important } } .mentorProfileHeader .topRow .rightSideBarWapper .dropdown-btn { margin-top: 20px } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard>div { border-bottom: 1px solid #ddd; padding: 15px 30px; text-align: center } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .topCard { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #fff; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); position: relative } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .topCard .img-circle { width: 70px } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .topCard .display-name { display: block; margin: 15px 0 12px; font-size: 18px; font-weight: bold; color: #444 } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .topCard .price { font-size: 0.9em; line-height: 1.5 } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .topCard .price strong { display: block; font-size: 2em; font-weight: bold } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .btn { margin-top: 12px; box-sizing: border-box; width: 100%; white-space: normal; font-weight: bold } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .dropdown-btn .btn:active { background: #ddd } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .messageBtn { width: 100% } .mentorProfileHeader .topRow .rightSideBarWapper .actionCard .ScheduleBtn { width: 100% } .mentorProfileHeader .topRow .rightSideBarWapper .restInfo { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #fff; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); -moz-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15); box-shadow: 0 2px 4px 0 rgba(0,0,0,0.15) } .mentorProfileHeader .topRow .rightSideBarWapper .restInfo>.info-block { border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 15px 20px; background-color: #f8f8f8; text-align: center } .mentorProfileHeader .topRow .rightSideBarWapper .restInfo .sessionGiven { color: #000 } .mentorProfileHeader .topRow .rightSideBarWapper .restInfo .rate { color: #000 } .mentorProfileHeader .topRow .rightSideBarWapper .restInfo .wide .socialIcon { background-color: #f8f8f8 } .mentor-social-media-cover { display: inline-block; border-radius: 50%; width: 37px; height: 37px; padding: 7px; border: 2px solid #00acbd; background-color: transparent; margin-right: 10px; position: relative; } .mentor-social-media-cover i { position: relative; color: #00acbd; left: 1px; } .mentor-social-media-cover:hover { border: 2px solid #fff; } .mentor-social-media-cover:hover *{ color: #fff; } .rating { unicode-bidi: bidi-override; text-align: center; padding: 0.2em 0 0.5em; display: inline-block; } .rating>span { display: inline-block; color: #3e90ca; } .mentor-response { color: #5f6366; line-height: 30px; } .mentor-response .num { display: inline-block; padding-left: 5px; } .mentor-response .num.bad { color: #d14836; } .mentor-response .num.average { color: #ff6300; } .mentor-response .num.good { color: #32a321; } .free-trial-badge { display: block; color: #fff; width: 100px; height: 100px; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; background: #ec452f; text-align: center; box-sizing: border-box; border: 5px #ec452f solid; -moz-box-sizing: border-box; padding: 15px; font-weight: bold; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.2); -moz-box-shadow: 0 2px 2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px rgba(0,0,0,0.2); text-shadow: 0 2px 2px rgba(0,0,0,0.2); -webkit-text-shadow: 0 2px 2px rgba(0,0,0,0.2); -moz-text-shadow: 0 2px 2px rgba(0,0,0,0.2); position: absolute; top: -30px; right: -30px; text-decoration: none; z-index: 1 } .free-trial-badge:before { content: ''; position: absolute; display: block; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; top: 0px; left: 0px; width: 100%; height: 100%; background: transparent; box-sizing: border-box; -moz-box-sizing: border-box; border: 2px #fff solid } .free-trial-badge:hover { text-decoration: none; color: #fff } @media (max-width: 480px) { .free-trial-badge { right:-15px } } .tabPart { background: #fff; width: 100%; z-index: 3 } .tabPart.fixed { position: fixed; top: 44px; left: 0px } .tabRow { display: flex; display: -webkit-flex } .tabRow .tab { padding: 0 25px; line-height: 55px; color: #3e90ca; font-size: 16px; cursor: pointer; text-decoration: none } .tabRow .tab.active { color: #444; background: #f6f8f8 } .tabRow .tab.active:hover { background: #f6f8f8 } .tabRow .tab.active .label { color: #444; border: 2px solid #444 } .tabRow .tab .label { padding: 4px; min-width: 14px; text-align: center; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; border: 2px solid #3e90ca; color: #3e90ca; margin-left: 3px; background: transparent } .tabRow .tab:hover { text-decoration: none; background: #fafafa } @media (max-width: 460px) { .tabRow .tab { padding:0 15px } } .tab.group:hover { text-decoration: none; background: #fff; cursor: auto } .mentor-profile-header h3{ font-size: 18px; } .mentorProfileContent { padding: 20px 0 40px 0px; min-height: 100px } .mentorProfileContent #profileOverviewContent .about { font-size: 16px; line-height: 1.5; color: #5f6366; white-space: pre-line; padding-top: 0 !important; text-align: justify; } .mentorProfileContent #profileOverviewContent .skillModule { margin: 20px 0px 20px; border-bottom: 1px solid #eee; padding-bottom: 20px } .mentorProfileContent #profileOverviewContent .skillModule .info-title>img { width: 30px; vertical-align: top; margin-right: 10px } .mentorProfileContent #profileOverviewContent .skillModule .skillName { color: #444; font-size: 1.2em; font-weight: bold; line-height: 30px; display: inline-block } .mentorProfileContent #profileOverviewContent .skillModule .skillYear { font-size: 0.9em; line-height: 30px; display: inline-block } .mentorProfileContent #profileOverviewContent .skillModule .description { margin: 10px 0px 0 45px; font-size: 16px; line-height: 1.5; color: #5f6366; text-align: justify; } .mentorProfileContent #profileOverviewContent .skillModule:last-child { border-bottom: 0px; margin-bottom: 0px } .mentorProfileContent #profileOverviewContent .tags-wrapper { padding-left: 45px; margin-top: 15px } .mentorProfileContent #profileOverviewContent .tags { color: #9BB6BF; font-size: 15px; margin-right: 12px } @media (max-width: 480px) { .mentorProfileContent #profileOverviewContent .tags { line-height:2 } } .related-mentors { padding: 40px 0px; background-color: #fff } .related-mentors .block-title { margin: 30px 20px 20px; font-size: 1.5em; text-transform: uppercase } .related-mentors .mentor-module { margin-top: 100px; padding: 0px 30px 30px; background-color: #fff; -webkit-box-shadow: rgba(0,0,0,0.05) 0 1px 3px 0; box-shadow: rgba(0,0,0,0.05) 0 1px 3px 0; border-top: 1px solid #eee; border-left: 1px solid #eaeaea; border-right: 1px solid #eaeaea; border-bottom: 1px solid #e5e5e5 } .related-mentors .mentor-module hr { width: 50%; margin: 10px 0px } .related-mentors .mentor-module .mentor-img { width: 100px; height: 100px; margin-top: -60px; margin-bottom: 5px } .related-mentors .mentor-module .mentor-name { font-size: 20px; font-weight: bold; line-height: 26px; margin: 10px 0px; display: block } .related-mentors .mentor-module .mentor-rating { color: #3e90ca; margin-bottom: 5px } .related-mentors .mentor-module .mentor-headline { font-size: 12px; font-weight: bold; line-height: 16px; color: #666; margin-bottom: 5px } .related-mentors .mentor-module .mentor-description { font-size: 15px; line-height: 22px; margin-bottom: 10px; color: #999 } .related-mentors .mentor-module .mentor-info { position: relative; height: 150px; overflow: hidden; margin-bottom: 10px } .related-mentors .mentor-module .mentor-info:after { background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%); background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, #fff 100%); background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); height: 30px; width: 100%; position: absolute; bottom: 0px; left: 0px; content: " " } .related-mentors .mentor-module .mentor-tags { max-height: 23px; overflow: hidden } .related-mentors .mentor-module .mentor-tags .badge { background-color: #f2f2f2; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; color: #777; margin-bottom: 5px; font-weight: normal; text-shadow: none } .related-mentors .mentor-module .view-action { border-radius: 25px; -webkit-border-radius: 25px; -moz-border-radius: 25px } .mentor-profile-tabs { margin-top: 20px; border-bottom: solid 1px #c2c2c2; } .mentor-profile-tabs a { padding: 10px 15px; display: inline-block; color: black; text-transform: uppercase; border-bottom: solid 3px white; margin-right: 10px; text-decoration: none } .mentor-profile-tabs a .badge{ vertical-align: top; padding: 4px 7px; } .mentor-profile-tabs a:hover { border-bottom: solid 3px #00acbd } .mentor-profile-tabs .active { border-bottom: solid 3px #00acbd } .expertContent { display: none } .expertContent.open { display: block } @media (max-width: 767px) { .expertContent { display: block !important; } } .stepNumber { font-weight: bold; width: 24px; height: 24px; border-radius: 50%; background: #666; color: #fff; display: inline-block; text-align: center; margin-right: 5px; } .header-section .headline-primary { margin-bottom: -1px; padding-bottom: 2px; } .header-large, .header-section { border-bottom: 1px solid #ededee; } .request-mentor-session { margin-top: 50px; margin-bottom: 50px !important; } .requestSession-questionBlock { margin-bottom: 30px; } .requestSession-question { margin-bottom: 15px; } .requestSession-question .colName { line-height: 20px; font-weight: bold; display: inline-block; color: #666; } .indentBlock { margin-left: 25px; } .mentor-request-session-btn{ margin-left: 10px; } .upcoming--on .tabs ul.tab_nav li.upcoming_tab a { background: white; /*color: #2e3d49;*/ color: #ffa500; border-bottom: none } .upcoming--on .tabs .upcoming_content { display: block } .own--on .tabs ul.tab_nav li.own_tab a { background: white; /*color: #2e3d49;*/ color: #ffa500; border-bottom: none } .past--on .tabs ul.tab_nav li.past_tab a { background: white; /*color: #2e3d49;*/ color: #ffa500; border-bottom: none } .tabs ul.tab_nav { overflow: hidden; list-style-type: none; margin: 0; padding: 0; display: flex } .tabs ul.tab_nav li { flex-grow: 1 } @media (min-width: 40em){ .tabs ul.tab_nav li { width:50% } } .tabs ul.tab_nav li a { font-size: .75em; text-transform: uppercase; display: block; color: #7d97ad; font-weight: 700; text-decoration: none; text-align: center; padding: 1.5em .75em; letter-spacing: 0.5px; background: #fafbfc; border-right: 1px solid #dbe2e8; border-bottom: 1px solid #dbe2e8; transition: color .3s ease; line-height: 18px } @media (min-width: 35em) { .tabs ul.tab_nav li a { letter-spacing:2px } } .tabs ul.tab_nav li a:hover { color: #4c6478 } .tabs ul.tab_nav li:last-child a { border-right: none } .browse-msg h3{ color: #384047; font-style: normal; line-height: 1.1; margin-bottom: 15px; margin-top: 0px; text-rendering: optimizeLegibility; font-size: 22px; font-weight: 500; } .browse-msg p{ font-size: 16px; line-height: 24px; color: #717f86; margin-top: 10px; margin-bottom: 10px; font-weight: 400; text-align:justify; } .browse-msg img{ max-width: 100%; width: 100px; height: 100px; padding-bottom: 25px; } .profile-panel { border: none; border-radius: 2px; background-color: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); margin-bottom: 30px; } .profile-panel-header img { margin-right: 15px; max-width: 55px; vertical-align: middle; } .profile-panel * { box-sizing: border-box; } .profile-panel-header { padding-top: 12px; padding-bottom: 12px; } .profile-mentoring-card .profile-mentoring-icon-container { width: 90px; } .profile-mentoring-card .profile-panel-header .profile-mentoring-title { word-wrap: break-word; } .profile-mentoring-card .profile-panel-header .play-circle { top: 0px; padding-right: 15px; } .profile-mentoring-card .profile-panel-header .confirm-session i { font-size: 28px; -webkit-animation: glowIt 3s infinite; -moz-animation: glowIt 3s infinite; -o-animation: glowIt 3s infinite; animation: glowIt 3s infinite; } .profile-mentoring-card .profile-panel-header .confirm-session { color: #68aa22; } .profile-mentoring-card .profile-panel-header .plus-circle { padding-right: 8px; } .profile-mentoring-card .profile-panel-header .more-details { top: 65px; color: #b3b3b3; padding-right: 12px; } .session-metadata { text-align: right; padding: 0px 15px; } .required-pf::after { content:"*";color:red; } .mentorModule { min-height: 220px; position: relative; margin-bottom: 20px; border: 1px solid #dbe2e8; background: white; padding: 1em 0.5em; border-radius: .1875em; width: 100%; display: block; flex-grow: 1; text-decoration: none; box-shadow: 0 0.125em 0.25em 0 rgba(46,61,73,0.12); transition: box-shadow .3s ease, border .3s ease; } .mentorModule .rate { margin: 16px 0 16px } .mentorModule .name { font-size: 18px; font-weight: bold; color: #3e90ca; line-height: 23px; text-transform: capitalize; } .mentorModule .messageBtn { border-bottom: none; min-width: 140px } @media (max-width: 767px) { .mentorModule .messageBtn { margin-bottom:20px } } .mentorModule .headLine { margin-top: 5px; color: #666; font-weight: bold } .mentorModule .headLine em { font-style: normal; color: #000 } .mentorModule .about { color: #8e979b; margin-top: 5px } .mentorModule .about em { font-style: normal; font-weight: bold } .mentorModule .expertise { display: block; margin-top: 10px } .mentorModule .expertise .customizeBadge { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #f2f2f2; font-size: 0.8em; padding: 2px 6px 3px; margin-bottom: 4px; font-weight: normal } @media (max-width: 480px) { .mentorModule .expertise .customizeBadge { margin-right:8px; margin-bottom: 8px } } .mentorModule .expertise .customizeBadge em { font-style: normal; font-weight: bold } .mentorModule .expertise .customizeBadge .removeDec { color: #777; text-shadow: none } .mentorModule .expertise .space { margin-right: 4px } .mentorModule .language { display: block; margin-top: 10px } .mentorModule .language .customizeBadge { border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; background-color: #D3E4F2; font-size: 0.8em; padding: 2px 6px 3px; margin-bottom: 4px; font-weight: normal } @media (max-width: 480px) { .mentorModule .language .customizeBadge { margin-right:8px; margin-bottom: 8px } } .mentorModule .language .customizeBadge em { font-style: normal; font-weight: bold } .mentorModule .language .customizeBadge .removeDec { color: #777; text-shadow: none } .mentorModule .language .space { margin-right: 4px } .mentorModule .rating { padding: 0; text-align: left } .mentorModule .hirable { color: #999; margin-top: 8px; font-size: 85%; } .mentorModule .status { float: right; } .ratingNum { font-size: 80%; color: #666; } .mentorModule .status>span.away { color: #F9C928; } sup { top: -0.5em; font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } .mentorModule .rating:after { clear: both } .mentorModule:hover { background: #f8f9fa; -ms-transform: translate(0px, -2px); -webkit-transform: translate(0px, -2px); transform: translate(0px, -2px); cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.09),0 6px 6px rgba(0,0,0,0.13) } .mentorModule:hover .backDiv { display: inherit } .mentorModule:hover .msgBtn { display: inherit } @media (min-width: 768px) { .mentorModule .mentor-item-row { display:-webkit-flex; display: flex } .mentorModule .mentor-info { width: 188px } .mentorModule .mentor-details { flex: 1; -webkit-flex: 1 } } .btn.btn-raised.btn-register{ background-color: #f08c35; border-color: #f08c35; color: #ffffff; } .btn.btn-raised.btn-register:hover,.btn.btn-raised.btn-register:focus{ background-color: #e5781a; border-color: #e5781a; color: #ffffff; } .headline { margin: 16px 0 9px; font-weight: bold; text-transform: uppercase; font-size: 15px; line-height: 1.44495; } @media screen and (max-width: 679px) { .headline { font-size:15px } } .headline-primary { display: inline-block; border-bottom: 0; color: #384047; max-width: 90% } .headline-primary>a { color: #384047; text-decoration: none; } .headline-primary>i { position: relative; top: 8px; margin-left: -5px; font-size: 28px } .a-section--closed-step .headline-primary { font-size: 20px; line-height: 26px; margin-top: 0; margin-bottom: 0; font-weight: normal } .headline-with-icon { margin-top: -3px } .headline-secondary { color: #727376; text-decoration: none; } .headline-secondary>a { color: #727376 } .a-section--closed-step .headline-secondary { font-size: 20px; line-height: 26px; margin-top: 0; margin-bottom: 74px; font-weight: normal } @media screen and (min-width: 680px) { .a-section--closed-step .headline-secondary { margin-bottom:82px } } @media screen and (min-width: 1695px) { .a-section--closed-step .headline-secondary { margin-bottom:92px } } .headline-strong { padding-bottom: 10px; border-bottom: 1px solid #384047 } .headline-primary>a:hover,.headline-secondary>a:hover { color: #1f8fc1 } /* Legacy Checkbox */ .checkbox-filter input[type="checkbox"]{ box-sizing: border-box; padding: 0 } .checkbox-filter input[type="checkbox"] { margin: 4px 0 0; margin-top: 1px; line-height: normal } .checkbox-filter input[type="checkbox"]:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px } .checkbox-filter { display: block; min-height: 23px; margin-top: 10px; margin-bottom: 10px; } ..checkbox-filter label { display: inline; font-weight: normal; cursor: pointer } ..checkbox-filter input[type="checkbox"],.checkbox-inline input[type="checkbox"] { float: left; margin-left: -20px } .checkbox+.checkbox { margin-top: -2px } .checkbox-inline { display: inline-block; padding-left: 20px; margin-bottom: 0; vertical-align: middle; font-weight: normal; cursor: pointer } .checkbox-inline+.checkbox-inline { margin-top: 0; margin-left: 10px } .checkbox-filter input[type="checkbox"][disabled],.checkbox-filter[disabled],.checkbox-inline[disabled],fieldset[disabled] .checkbox,fieldset[disabled] .checkbox-inline { cursor: not-allowed } .filter-heading{ color: #767676; line-height: 1.6; text-transform: uppercase; font-weight: normal; } .checkbox-filter label{ color: #384047; margin-bottom: 0px; font-weight: 300; font-size: 14px; } .read_more a, .read_less a { font-weight: bolder; color: #f26a22 !important; text-transform: none; text-decoration: none; cursor: pointer } .cat_read_more a, .cat_read_less a { font-weight: bolder; color: #f26a22 !important; text-transform: none; text-decoration: none; cursor: pointer } .timezone_disp { border: 1px solid #dbe2e8; border-radius: 5px; background: #fff; padding: 10px; background-color: #fafbfc; display: block; clear: both; text-align: center; max-width: 34em; font-size: 14px; margin: 10px auto; font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.42857143; } .timezone_disp i { margin-right: 5px; vertical-align: middle; font-size: 24px; color: #11B7E5; } .timezone_disp p { color: #666; display: inline; font-weight: 400 !important; } .timezone_disp p span { border-bottom: 1px solid #91daee; color: #525c65; font-weight: 500; font-size: 13px; line-height: 20px; } .detail-text section p{ font-size: 16px; line-height: 20px; } @media (min-width: 992px) .user-time { margin-right: 40px; } /* form-group design */ .form-group.is-focused .form-control .material-input:after { background-color: #1f8fc1; } .form-group.is-focused label, .form-group.is-focused label.control-label { color: #1f8fc1; } .form-group.has-error.is-focused label, .form-group.has-error.is-focused label.control-label{ color: #d14836; } .form-group.is-focused .form-control { outline: none; background-image: -webkit-gradient(linear, left top, left bottom, from(#1f8fc1), to(#1f8fc1)), -webkit-gradient(linear, left top, left bottom, from(#D2D2D2), to(#D2D2D2)); background-image: -webkit-linear-gradient(#1f8fc1, #1f8fc1), -webkit-linear-gradient(#D2D2D2, #D2D2D2); background-image: -o-linear-gradient(#1f8fc1, #1f8fc1), -o-linear-gradient(#D2D2D2, #D2D2D2); background-image: linear-gradient(#1f8fc1, #1f8fc1), linear-gradient(#D2D2D2, #D2D2D2); -webkit-background-size: 100% 2px, 100% 1px; background-size: 100% 2px, 100% 1px; -webkit-box-shadow: none; box-shadow: none; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .indentBlock .form-control { box-shadow: none !important; } .error-msg { color: red; font-size: 13px; } .profile-panel-header img { margin-right: 15px; max-width: 55px; vertical-align: middle; } .profile-course-card .profile-panel-header .profile-course-title { word-wrap: break-word; } .profile-workshop-card .profile-panel-header .profile-workshop-title { word-wrap: break-word; } .profile-mentoring-card .profile-panel-header .profile-mentoring-title { word-wrap: break-word; } .profile-course-card .profile-panel-header .play-circle { padding-right: 15px; } .profile-workshop-card .profile-panel-header .play-circle { top: 0px; padding-right: 15px; } .profile-mentoring-card .profile-panel-header .play-circle { top: 0px; padding-right: 15px; } .profile-mentoring-card .profile-panel-header .confirm-session i { font-size: 28px; -webkit-animation: glowIt 3s infinite; -moz-animation: glowIt 3s infinite; -o-animation: glowIt 3s infinite; animation: glowIt 3s infinite; } .profile-mentoring-card .profile-panel-header .confirm-session { color: #68aa22; } .profile-workshop-card .profile-panel-header .plus-circle { padding-right: 8px; } .profile-mentoring-card .profile-panel-header .plus-circle { padding-right: 8px; } .profile-workshop-card .profile-panel-header .more-details { top: 30px; color: #b3b3b3; padding-right: 12px; } .profile-mentoring-card .profile-panel-header .more-details { top: 65px; color: #b3b3b3; padding-right: 12px; } .profile-panel-header .play-circle { position: absolute; top: 10px; right: 15px; color: #307699; font-size: 1.3em; } .profile-panel-header .more-details { position: absolute; top: 10px; right: 15px; color: #307699; font-size: 1.3em; } .profile-mentoring-card .profile-mentoring-panel-header { border-bottom: none; } .column,.columns { float: left; min-height: 1px; padding: 0 15px; position: relative } @media screen and (max-width: 767px) { .column,.columns { width:auto !important; float: none } .column:before,.column:after,.columns:before,.columns:after { content: " "; display: table } .column:after,.columns:after { clear: both } .column:last-child,.columns:last-child { float: none; } } .centered { float: none; margin: 0 auto } .column-control .column-control-container>.row>.columns:first-child { padding-left: .9375rem!important } .column-control .column-control-container>.row>.columns:last-child { padding-right: .9375rem!important } .solution .column { background-color: rgba(255,255,255,0.15); padding: 20px; margin-bottom: 20px; border-radius: 3px; min-height: 275px; } .tooltip, .tooltip.in { width: 100% !important; } .tooltip-inner { max-width: 260px !important; padding: 6px 6px !important; text-align: left; line-height: 1.3; } .session-waiting .img-1{ animation-name: stretch; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 0; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: none; animation-play-state: running; } .session-waiting .img-2{ animation-name: stretch; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 1s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: none; animation-play-state: running; } .session-waiting .img-3{ animation-name: stretch; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 2s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: none; animation-play-state: running; } .session-waiting .img-4{ animation-name: stretch; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 3s; animation-direction: normal; animation-iteration-count: 1; animation-fill-mode: none; animation-play-state: running; } @keyframes stretch { 0% { transform: scale(.3); } 50% { } 100% { transform: scale(1); } } @media screen and (max-width: 768px) { .session-waiting h5{ font-size: 16px; } .session-waiting h2{ font-size: 24px; } .session-waiting img{ width: 60px; } } @media screen and (min-width: 767px) and (max-width: 1000px) { .session-waiting img{ width: 90px; } } .session-waiting-instructions h2{ color: #384047; line-height: 1.4; margin-bottom: 15px; margin-top: 15px; text-rendering: optimizeLegibility; font-size: 40px; font-weight: 700; } .session-waiting-instructions p{ color: #717f86; font-size: 18px; line-height: 1.6; margin-top: 10px; margin-bottom: 20px; text-rendering: optimizeLegibility; font-weight: 500; } .session-waiting-instructions-card { background: white; border-radius: 8px; margin: 10px auto; box-shadow: 0 2px 0 0 rgba(0,0,0,0.1); padding: 10px 25px; position: static } .session-waiting-instructions-card h4 { margin-bottom: 0 color: #384047; font-style: normal; line-height: 1.4; font-size: 20px; margin-top: 15px; text-rendering: optimizeLegibility; font-weight: 700; } .session-waiting-instructions-card p { font-size: 16px; color: #717f86; line-height: 1.6; margin-top: 10px; font-weight: 500; } .session-waiting-instructions-card p:last-child{ padding-bottom: 20px; } .bootbox .modal-content .modal-header{ padding-top: 0px; } .bootbox .modal-content .modal-body{ padding-top: 0px; } @-webkit-keyframes glowIt { 0% { -webkit-text-shadow: 0px 0px 3px #FFFFFF; } 50% { -webkit-text-shadow: 0px 0px 3px #68aa22; } 100% { -webkit-text-shadow: 0px 0px 3px #FFFFFF; } } @-moz-keyframes glowIt { 0% { -moz-text-shadow: 0px 0px 3px #FFFFFF; } 50% { -moz-text-shadow: 0px 0px 3px #68aa22; } 100% { -moz-text-shadow: 0px 0px 3px #FFFFFF; } } @-o-keyframes glowIt { 0% { -o-text-shadow: 0px 0px 3px #FFFFFF; } 50% { -o-text-shadow: 0px 0px 3px #68aa22; } 100% { -o-text-shadow: 0px 0px 3px #FFFFFF; } } @keyframes glowIt { 0% { text-shadow: 0px 0px 3px #FFFFFF; } 50% { text-shadow: 0px 0px 3px #68aa22; } 100% { text-shadow: 0px 0px 3px #FFFFFF; } } .session-waiting { text-align: center; border-bottom: solid 1px #e9f0f3; background: url(../images/header-bg.svg) #f6f9fa 0 -70px repeat; padding: 80px 0; display: block; } .session-waiting h5{ color: #384047; line-height: 1.4; margin-bottom: 15px; margin-top: 15px; text-rendering: optimizeLegibility; font-size: 18px; font-weight: 500; } .session-waiting h2{ color: #384047; line-height: 1.4; margin-bottom: 35px; margin-top: 15px; text-rendering: optimizeLegibility; font-size: 40px; font-weight: 700; } .session-waiting img{ max-width: 100%; height: auto; display: inline-block; width: 120px; } .get-help-button { border-radius: 4px; color: #42b4d6; font-weight: 500; padding: 10px 20px; font-size: 16px; line-height: 24px; border: 2px solid #42b4d6; background-color: transparent; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; transition: background-color 0.3s ease; text-transform: uppercase; } .get-help-button:hover { border: 2px solid #299abc; background-color: transparent; color: #299abc; text-decoration: none; } .user-request-mentor{ border: 4px dashed #c1e0f5; width: 90%; height: 150px; border-radius: 4px; vertical-align: middle; position: relative; padding: 10px; margin-left: 20px; text-align: center; text-decoration: none; } .user-request-mentor p{ margin-top: 10px; font-size: 16px; color: #717f86; line-height: 1.6; text-decoration: none; font-weight: 400; text-decoration: none; margin-bottom: 20px; } .user-request-mentor a{ background-color: #39ADD1 !important; border-color: #39ADD1 !important; border-radius: 4px; color: #fff; font-weight: 500; padding: 10px 15px; font-size: 16px; line-height: 24px; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .user-request-mentor a:hover{ text-decoration: none; } .time-slot-msg { margin-left: 70px; font-size: 12px; } .table > tbody > tr > td > .payment-item { font-size: 18px; font-weight: 700; } ul.tagit{ font-size: 15px; padding: .5em 1em; border-radius: .142857143em; border: 1px solid #dbe2e8 !important; outline: none; color: #2e3d49; -webkit-font-smoothing: antialiased; } ul.tagit:hover{ box-shadow: 0 0.125em 0.5em 0 rgba(46,61,73,0.06) } ul.tagit:focus{ border-color: #91daee; box-shadow: 0 0 0.75em 0.25em rgba(145,218,238,0.35) } .swal-button { padding: 0px 24px; } ul.tagit input[type="text"] { margin-top: 0px !important; height: 24px !important; } .confirm, .cancel { padding: 0px 32px !important; } .tooltip-d { position: relative; display: inline-block; } .tooltip-d .tooltiptext-d { visibility: hidden; width: 320px; background-color: rgb(0, 0, 0, 0.7); color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -160px; font-size: 10px; line-height: 15px; } .tooltip-d .tooltiptext-d::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: rgb(0, 0, 0, 0.7) transparent transparent transparent; } .tooltip-d:hover .tooltiptext-d { visibility: visible; } .owl-prev, .owl-next { position:relative; top: 45%; transform: translateY(-50%); } .owl-prev { left: -2rem; } .owl-next { right: -2rem; } .owl-theme .owl-nav [class*=owl-] { margin: -22px; } /*riversand home page style*/ .site-content { margin-top: 0; } .overview .site-content .banner-btn-blue { padding: 0 44px; } .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0 0 2px; } .slick-slider .slick-track,.slick-slider .slick-list { -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin: auto; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } .slick-slide img { display: block; } .slick-initialized .slick-slide { display: block; } .slick-dots{position:absolute;bottom:-40px;list-style:none;display:block;text-align:center;padding:0;margin:0;width:100%;} .slick-dots li{display:inline-block;cursor:pointer;margin:0 8px;} .slick-dots li button{border:0;background:transparent;display:inline-block;height:16px;width:16px;outline:0;line-height:0;font-size:0;color:transparent;cursor:pointer;position:relative;} .slick-dots li button:hover,.slick-dots li button:focus{outline:0;} .slick-dots li button:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";border-radius:50%;font-size:0;line-height:0;background:#c1cad4;opacity:.46;} .slick-dots li button:hover:before,.slick-dots li button:focus:before{opacity:1;} .slick-dots li.slick-active button:before{background:#0474ff;opacity:1;} .slick-dotted.slick-slider{margin-bottom:50px;} .homepage * { outline: 0; } .homepage .svg-container { width: 100%; margin: 0 auto; position: relative; -webkit-transform: rotate(7deg); transform: rotate(7deg); transition: all 5s; } .homepage .svg-container svg path { stroke-width: 2; stroke-dasharray: 870; stroke-dashoffset: 870; transition: all 5s; stroke: #1360ff; } .homepage .banner-circular-image { width: 100%; height: 100%; padding: 7%; box-sizing: border-box; margin: 0; transition: all 1s; opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); transition-delay: .5s; position: relative; } .homepage .banner-circular-image { width: 100%; height: 100%; padding: 5%; box-sizing: border-box; margin: 0 auto auto 0; transition: all 1s; opacity: 0; -webkit-transform: scale(0.95); transform: scale(0.95); transition-delay: .5s; position: relative; } .homepage .svg-container.animated { -webkit-transform: rotate(0); transform: rotate(0); } .homepage .svg-container.animated svg path { stroke-dashoffset: 0; } .homepage .svg-container.animated .particle { -webkit-transform: scale(1); transform: scale(1); } .homepage .svg-container.animated .banner-circular-image { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } .homepage .particle { border-radius: 50%; opacity: .9; position: absolute; transition: all .6s; -webkit-transform: scale(0); transform: scale(0); } .homepage .particle-green { background: #38b54a; width: 45px; height: 45px; right: 7%; bottom: 22%; transition-delay: .2s; } .homepage .particle-yellow { background: #f6d50a; width: 25px; height: 25px; left: 5%; bottom: 37%; transition-delay: .5s; } .homepage .particle-maroon { background: #ed1e4c; width: 20px; height: 20px; top: 11%; left: 23%; transition-delay: .3s; } .homepage .particle-cyan { background: #17b3e8; width: 17px; height: 17px; top: 17%; right: 17%; transition-delay: .6s; } .homepage .particle-purple { background: #795da8; width: 10px; height: 10px; bottom: 7.5%; right: 33%; transition-delay: .75s; } .homepage .particle-orange { background: #f68e1e; width: 7px; height: 7px; bottom: 13%; right: 24%; transition-delay: .25s; } .gridBlock { padding-top: 10px; background: transparent; } .gridBlock:after { content: ''; display: block; clear: both; } .gridBlock-item { float: left; width: 100%; min-height: 260px; background-color: #dadada; background-size: cover; background-repeat: no-repeat; border: 5px solid #fff; } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .fadeInUp-animation, .bounceInUp-animation, .fadeInRight-animation, .fadeInLeft-animation { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slideInUp-animation { opacity: 0; -webkit-animation-duration: 1.8s; animation-duration: 1.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-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); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 0; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInUp { 0% { -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 100% { opacity: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slideInUp { 0% { visibility: visible; opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 100% { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } @keyframes slideInUp { 0% { visibility: visible; opacity: 0; -webkit-transform: translate3d(0,100%,0); transform: translate3d(0,100%,0); } 100% { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0); } } .page-wrap { transition: padding-top .7s!important; } .page-wrap header { transition: top .7s!important; } .flexed { display: flex; align-items: center; justify-content: center; } .enroll .flexed { justify-content: flex-end; } .enroll { margin-top: 22px } .overview h1 { font-size: 24px; color: #495259; } .overview p { font-size: 20px; font-weight: 500; line-height: 1.4; color: #364653; } .overview ul.checklist li { font-size: 16px; color: #364653; } .overview .back { /*font-family: Montserrat, sans-serif;*/ font-size: 18px; font-weight: 600; color: #0474ff; text-align:right; margin-right: 20px; } .industries__content { height: 600px; max-height: 600px; /* background:linear-gradient(253deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('../images/home-image.png'); */ background:linear-gradient(253deg,rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url('../images/home-image_new.png'); background-size:cover; } .industries__content .contentSlider { visibility: hidden; opacity: 0; transition: opacity 1s; } .industries__content .contentSlider.slick-initialized { visibility: visible; opacity: 1; height:600px; } .slick-list { min-height:500px !important; } .industries__content .contentSlider .contentSlider__single { display: none; } .industries__content .contentSlider .contentSlider__single:first-child { display: block; visibility: hidden; } .industries__content .contentSlider.slick-initialized .contentSlider__single { display: block; visibility: visible; } .industries__content .contentSlider { padding: 60px 0; margin: 0 auto; } .industries__content .contentSlider * { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .industries__content .contentSlider__single--right { padding: 0 3.75%; height:300px; } .industries__content .contentSlider__single--right .heading { /*font-family: Lato,sans-serif;*/ font-size: 16px; font-weight: bold; text-align: left; color: #fff; display: inline-block; position: relative; } .industries__content .contentSlider__single--right .heading:after { content: ''; border-bottom: solid 2px #fff; position: absolute; width: 100%; bottom: -1px; left: 0; } .industries__content .contentSlider__single--right .title { line-height: 1.25; /*font-family: Montserrat,sans-serif;*/ font-size: 33px; font-weight: bold; text-align: left; color: #fff; margin-bottom: 11px; } .industries__content .contentSlider__single--right .subtitle { /*font-family: Lato,sans-serif;*/ font-size: 21px; text-align: left; color: #fff; font-weight: normal; line-height: 36px; margin-bottom:30px; } .industries__content .contentSlider__single--right .emphasized { font-size: 30px; font-weight: bold; font-style: italic; margin-top: -0.105em; margin-left: 4px; margin-right: 4px; } .homepage .clients { padding: 50px 0; } .homepage .clients__heading { /*font-family: Montserrat,sans-serif;*/ font-size: 32px; font-weight: bold; text-align: center; color: #364653; } .homepage .clients__subtitle { /*font-family: Lato,sans-serif;*/ font-size: 18px; font-weight: 500; text-align: center; color: #364653; padding: 10px 0; } .homepage .clients .contentWrapper { position: relative; overflow: hidden; } .homepage .clients .contentWrapper .content { transition: visibility .7s cubic-bezier(0.25,0.1,0.25,1),opacity .7s cubic-bezier(0.25,0.1,0.25,1),-webkit-transform .7s cubic-bezier(0.25,0.1,0.25,1); transition: transform .7s cubic-bezier(0.25,0.1,0.25,1),visibility .7s cubic-bezier(0.25,0.1,0.25,1),opacity .7s cubic-bezier(0.25,0.1,0.25,1); transition: transform .7s cubic-bezier(0.25,0.1,0.25,1),visibility .7s cubic-bezier(0.25,0.1,0.25,1),opacity .7s cubic-bezier(0.25,0.1,0.25,1),-webkit-transform .7s cubic-bezier(0.25,0.1,0.25,1); } .homepage .clients .content__link .contentWrapper .overlay { top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: 0; background:#ffffff; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; z-index:0 } /* .industries__content { position: relative; background-image:linear-gradient(253deg,#6506a8,#0e0374); } .industries__content::before { content:''; position: absolute; background-image: linear-gradient(253deg,#6506a8,#0e0374); width: 100%; height: 100%; bottom: 0; left: 0; right: 0; } .industries__content .contentSlider { visibility: hidden; opacity: 0; transition: opacity 1s; } .industries__content .contentSlider.slick-initialized { visibility: visible; opacity: 1; } .industries__content .contentSlider .contentSlider__single { display: none; } .industries__content .contentSlider .contentSlider__single:first-child { display: block; visibility: hidden; } .industries__content .contentSlider.slick-initialized .contentSlider__single { display: block; visibility: visible; } .industries__content .contentSlider { padding: 60px 0; margin: 0 auto; } .industries__content .contentSlider * { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .industries__content .contentSlider__single--right { padding: 0 3.75%; } .industries__content .contentSlider__single--right .heading { font-family: Lato,sans-serif; font-size: 16px; font-weight: bold; text-align: left; color: #fff; display: inline-block; position: relative; } .industries__content .contentSlider__single--right .heading:after { content: ''; border-bottom: solid 2px #fff; position: absolute; width: 100%; bottom: -1px; left: 0; } .industries__content .contentSlider__single--right .title { line-height: 1.25; font-family: Montserrat,sans-serif; font-size: 33px; font-weight: bold; text-align: left; color: #fff; margin-bottom: 11px; } .industries__content .contentSlider__single--right .subtitle { font-family: Lato,sans-serif; font-size: 24px; text-align: left; color: #fff; margin-bottom: 40px; font-weight: 300; line-height: 1.25; } .industries__content .contentSlider__single--right .subtitle .emphasized { font-size: 30px; font-weight: bold; font-style: italic; }*/ .homepage .clients { padding: 50px 0; } .homepage .clients__heading { /*font-family: Montserrat,sans-serif;*/ font-size: 32px; font-weight: bold; text-align: center; color: #364653; } .homepage .clients__subtitle { /*font-family: Lato,sans-serif;*/ font-size: 18px; font-weight: 500; text-align: center; color: #364653; padding: 10px 0; } .homepage .clients .contentWrapper { position: relative; overflow: hidden; } .homepage .clients .contentWrapper .content { transition: visibility .7s cubic-bezier(0.25,0.1,0.25,1),opacity .7s cubic-bezier(0.25,0.1,0.25,1),-webkit-transform .7s cubic-bezier(0.25,0.1,0.25,1); transition: transform .7s cubic-bezier(0.25,0.1,0.25,1),visibility .7s cubic-bezier(0.25,0.1,0.25,1),opacity .7s cubic-bezier(0.25,0.1,0.25,1); transition: transform .7s cubic-bezier(0.25,0.1,0.25,1),visibility .7s cubic-bezier(0.25,0.1,0.25,1),opacity .7s cubic-bezier(0.25,0.1,0.25,1),-webkit-transform .7s cubic-bezier(0.25,0.1,0.25,1); } .homepage .clients .content__link .contentWrapper .overlay { top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: 0; background:#ffffff; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; z-index:0 } .homepage .clients .content__link { min-height: 260px; } .homepage .clients .content__link:hover .contentWrapper .overlay { opacity: 0.3; } .homepage .clients .content__link .contentWrapper .content { top: 0; bottom: 0; left: 0; right: 0; position: absolute; opacity: 1; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 25px; z-index:1 } .homepage .clients .content__link .contentWrapper .content h1 { font-size: 24px; font-weight: 600; color: #ffffff; margin: auto 0 0 0; } .homepage .clients .content__link .contentWrapper .content h1:after { content: " "; background-image: url(../images/link_arrow.svg); background-repeat: no-repeat; background-position: center center; background-size: contain; width: 18px; height: 18px; display: inline-block; margin-left: 8px; } .banner-btn-blue { line-height: 42px; font-size: 16px; -webkit-border-radius: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; border-radius: 30px; padding: 0 24px; margin-top: 0; margin-bottom: 0; font-weight: 300; display: inline-block; cursor: pointer; color: #fff !important; background: #0474ff; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; -webkit-transition: all .25s ease-in-out; transition: all .25s ease-in-out; border: 1px solid transparent; } .overview .site-content .banner-btn-blue { padding: 0 44px; } .header .banner-btn-blue { -moz-transition: all .25s ease-in-out!important; -o-transition: all .25s ease-in-out!important; -webkit-transition: all .25s ease-in-out!important; transition: all .25s ease-in-out!important; } @media (max-width: 768px) { .homepage .resources__heading { font-size:45px; padding: 40px 0 25px; } .homepage .clients__heading { font-size:45px; margin-bottom: 40px; } .gridBlock { margin-bottom:0; } .gridBlock-item { padding:4.5% 0; height: auto; } .industries__content .contentSlider { padding:20px 0 28px; } .industries__content .industry_readmore { padding-top: 15px; text-align: center; } .industries__content .industry_readmore a { margin: auto!important; } .industries__content .contentSlider__single--right { padding:0; } .industries__content .contentSlider__single--right .title { font-size:24px; text-align: center; } .industries__content .contentSlider__single--right .heading { display:none; } .industries__content .contentSlider__single--right .subtitle { font-size:18px; margin-bottom: 15px; } .industries__content .contentSlider__single--right .subtitle .emphasized { font-size: 18px; } .footer-wrap .footer-widgets { padding-bottom: 35px; } .wsmenu-list>li>a:after { content:""; } .wsmenu-list>li:hover>a { text-decoration: none; } .wsmenu-list li:first-child a { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .wsmenu-list li:last-child a { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0; border-radius: 0; border-right: 0 solid; } .svg-container { margin: 0 auto!important; text-align: center; } .banner-btn-blue { font-size: 14px; padding: 0 14px; } .site-content { margin-top: 0; } .site-footer { padding: 25px 0; } .site-footer .copyright { margin-top: 10px; } .wsmenu-list>li>a { margin-top: 0; } .wsmenu-list>li:last-child { padding-right: 0; } } @media (max-width: 992px) and (min-width:768px) { .homepage .svg-container { width:70%; } } @media (max-width: 1200px) and (min-width:991px) { .homepage .svg-container { width:75%; } } @media (max-width: 1024px) { .banner-circular-image { margin: -.8% auto auto -.3%!important; } .home .svg-container { margin-left: -3.5%; } } @media (max-width: 768px) { .homepage .resources__heading { font-size:45px; padding: 40px 0 25px; } .homepage .clients__heading { font-size:45px; margin-bottom: 40px; } .gridBlock { margin-bottom:0; } .gridBlock-item { padding:4.5% 0; height: auto; } .industries__content .contentSlider { padding:20px 0 28px; } .industries__content .industry_readmore { padding-top: 15px; text-align: center; } .industries__content .industry_readmore a { margin: auto!important; } .industries__content .contentSlider__single--right { padding:0; } .industries__content .contentSlider__single--right .title { font-size:24px; text-align: center; } .industries__content .contentSlider__single--right .heading { display:none; } .industries__content .contentSlider__single--right .subtitle { font-size:18px; margin-bottom: 15px; } .industries__content .contentSlider__single--right .subtitle .emphasized { font-size: 18px; } .footer-wrap .footer-widgets { padding-bottom: 35px; } .wsmenu-list>li>a:after { content:""; } .wsmenu-list>li:hover>a { text-decoration: none; } .wsmenu-list li:first-child a { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .wsmenu-list li:last-child a { -webkit-border-radius: 0 4px 0 0; -moz-border-radius: 0; border-radius: 0; border-right: 0 solid; } .svg-container { margin: 0 auto!important; text-align: center; } .banner-btn-blue { font-size: 14px; padding: 0 14px; } .site-content { margin-top: 0; } .site-footer { padding: 25px 0; } .site-footer .copyright { margin-top: 10px; } .wsmenu-list>li>a { margin-top: 0; } .wsmenu-list>li:last-child { padding-right: 0; } } @media (max-width: 767px) { .hidden-xs { display:none; } .gridBlock { padding-top: 0 } .homepage .svg-container { width:80%; } .flexed { display:inherit; align-items: inherit; justify-content: inherit; } .site-footer.no-menus .logo-footer, .site-footer.no-menus .col-sm-4, .site-footer.no-menus .row.social { text-align: center; margin: auto; } .site-footer.no-menus .footer-widgets { padding-bottom: 0; } } .svg-container { width: 28.264rem; margin: 0 auto; position: relative; transform: rotate(7deg); transition: all 5s; margin-left: -7.5%; } svg:not(.initial) { max-width: 98%; max-height: 98%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } svg:not(.initial) path { stroke-width: 2; stroke-dasharray: 870; stroke-dashoffset: 870; transition: all 2s; stroke: #1360ff; } .m-filter-status__handle svg:not(.initial) { position: inherit; margin-left: -3px; margin-right: 3px; margin-bottom: 2px; } .icon-middle svg:not(.initial) { position: inherit; } .banner-circular-image { width: 100%; height: 100%; padding: 7%; box-sizing: border-box; margin: -.8% auto auto -.5%; transition: all 1s; opacity: 0; transform: scale(0.95); transition-delay: .5s; position: relative; } .svg-container.animated { transform: rotate(0); } .svg-container.animated svg path { stroke-dashoffset: 0; } .svg-container.animated .particle { transform: scale(1); } .svg-container.animated .banner-circular-image { opacity: 1; transform: scale(1); } .particle { border-radius: 50%; opacity: .9; position: absolute; transition: all .6s; transform: scale(0); } .particle-green { background: #38b54a; width: 84px; width: 3rem; height: 84px; height: 3rem; right: 38px; right: 1.26rem; bottom: 242px; bottom: 8.7rem; transition-delay: .2s; } .particle-yellow { background: #f6d50a; width: 51px; width: 1.7rem; height: 51px; height: 1.7rem; left: 38px; left: 1.4rem; bottom: 297px; bottom: 10.8rem; transition-delay: .5s; } .particle-maroon { background: #ed1e4c; width: 41px; width: 1.5rem; height: 41px; height: 1.5rem; top: 81px; top: 2.8rem; left: 187px; left: 6.5rem; transition-delay: .3s; } .particle-cyan { background: #17b3e8; width: 24px; width: .87rem; height: 24px; height: .87rem; top: 138px; top: 4.61rem; right: 120px; right: 4.27rem; transition-delay: .6s; } .particle-purple { background: #795da8; width: 27px; width: 1rem; height: 27px; height: 1rem; bottom: 86px; bottom: 3.3rem; right: 180px; right: 6.1rem; transition-delay: .75s; } .particle-orange { background: #f68e1e; width: 13px; width: .48rem; height: 13px; height: .48rem; bottom: 153px; bottom: 5.7rem; right: 127px; right: 4.4rem; transition-delay: .25s; } .banner-circular-image { -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; overflow: hidden; height: auto; } @media (min-width: 769px) and (max-width:992px) { .particle-maroon { top:2rem; left: 5.5rem; } .particle-cyan { top: 3.8rem; right: 3.4rem; } .particle-green { bottom: 6.9rem; right: .86rem; } .particle-yellow { left: 1rem; bottom: 8.8rem; } .particle-orange { right: 3.5rem; bottom: 4.7rem; } .particle-purple { bottom: 2.3rem; right: 5.3rem; } } @media (max-width: 992px) and (min-width:768px) { .homepage .svg-container { width:70%; } } @media (max-width: 1200px) and (min-width:991px) { .homepage .svg-container { width:75%; } } @media (max-width: 1024px) { .banner-circular-image { margin: -.8% auto auto -.3%!important; } .home .svg-container { margin-left: -3.5%; } } @media (min-width: 992px) { .col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7 { float:left; } .col-md-2 { width: 16.66667%; } .col-md-3 { width: 25%; } .col-md-4 { width: 33.33333%; } .col-md-5 { width: 41.66667%; } .col-md-6 { width: 50%; } .col-md-7 { width: 58.33333%; } .d-flex-md { display:-webkit-box; display: -ms-flexbox; display: flex; } .d-flex-align-end-md { -webkit-box-align:end; -ms-flex-align: end; align-items: flex-end; } .homepage .d-flex-align-end-md { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .d-flex-wrap-md { -ms-flex-wrap:wrap; flex-wrap: wrap; } .industries__content .contentSlider__single--right { width:100%; } } /*know more style css*/ .offerings-section-cta-link { font-weight: 400; font-size: 85%; text-decoration: none; color: #0F3271; } .offerings-section-cta-link-arrow { fill: #0F3271; color: #0F3271; vertical-align: middle; margin-top: -1px; -webkit-transition: 0.2s ease; -moz-transition: 0.2s ease; transition: 0.2s ease; } .offerings-section-cta-link:hover, .offerings-section-cta-link:active{ text-decoration: none; color: #029fcb; } .offerings-section-cta-link:hover i { margin-left: 5px; fill: #299abc; color: #299abc; text-decoration: none; } .button--primary { background: #0474ff; } /*Projects Card CSS */ @media (max-width:767px){ .gridBlock-item-sm50 { width: 100%; } } .partnerModule { min-height: 280px; position: relative; margin-bottom: 20px; border: 1px solid #dbe2e8; background: white; padding: 1em 0.5em; border-radius: .1875em; width: 32%; display: inline-block; flex-grow: 1; text-decoration: none; box-shadow: 0 0.125em 0.25em 0 rgba(46,61,73,0.12); transition: box-shadow .3s ease, border .3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.09), 0 6px 6px rgba(0,0,0,0.13); } @media (max-width:767px){ .partnerModule { width: 100%; } } .partnerModule .name { font-size: 14px; font-weight: bold; min-height: 70px; text-transform: capitalize; } @media (max-width: 767px) { .partnerModule .messageBtn { margin-bottom:20px } } .partnerModule .headLine { margin-top: 5px; color: #666; font-weight: bold } .partnerModule .headLine em { font-style: normal; color: #000 } .partnerModule .about { color: #3e90ca; margin-top: 5px; overflow: hidden; } .partnerModule .about em { font-style: normal; font-weight: bold } .partnerModule:hover { background: #f8f9fa; -ms-transform: translate(0px, -2px); -webkit-transform: translate(0px, -2px); transform: translate(0px, -2px); cursor: pointer; box-shadow: 0 10px 20px rgba(0,0,0,0.09),0 6px 6px rgba(0,0,0,0.13) } .partnerModule:hover .backDiv { display: inherit } .partnerModule:hover .msgBtn { display: inherit } @media (min-width: 768px) { .partnerModule .partner-item-row { display:-webkit-flex; display: flex } .partnerModule .partner-info { width: 188px } .partnerModule .partner-details { flex: 1; -webkit-flex: 1 } .partnerModule .partner-details img{ height: 130px; width:fit-content; margin-bottom: 25px; } .partnerModule .partner-details #type{ margin-top: 12px; margin-bottom: 0px; } } .search span { position: absolute; top: 35%; right: 3.5rem; width: 20px; height: 20px; background-image: url(../images/icon_magnify_blue.svg); background-repeat: no-repeat; background-position: center; background-size: contain; background-color: transparent; text-indent: -9999em; border: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); cursor: pointer; }