@import url("//fonts.googleapis.com/css?family=Bree+Serif:400"); /** USAGE EXAMPLE: ******************************************************************** .projectlist { @include element(navigation) {} @include element(search) {} }
**************************************************************************************/ /** USAGE EXAMPLE: ******************************************************************** .projectlist { @mixin border-radius(20px); } **************************************************************************************/ /** USAGE EXAMPLE: ******************************************************************** .projectlist { // Default border: 25px solid brown; // > 700px @mixin minpoint(700px) { border: 5px solid brown; } // > 1200px @mixin minpoint(1200px) { border: 1px solid brown; } } **************************************************************************************/ /* Minpoint references: *-----------------------------------------------------------------------------------------------------* | widescreen | desktop | tablet-landscape | tablet | phone-xl | phone-large | phone-medium | phone-sm | | 1824px | 1224px | 1024px | 768px | 414px | 375px | 360px | 320px | *----------------------------------------------------------------------------------------------------*/ /** USAGE EXAMPLE: ******************************************************************** .element p { @include vertical-align(); } note: parent element must have a fixed height in px **************************************************************************************/ /** USAGE EXAMPLE: ******************************************************************** .element p { @include center(); } **************************************************************************************/ /** USAGE EXAMPLE: ******************************************************************** .element { width: 100px; height: 100px; background: black; @include animation('slide-down 5s 3'); } @include keyframes(slide-down) { 0% { opacity: 1; } 90% { opacity: 0; } } **************************************************************************************/ .animated { -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.bounceIn, .animated.bounceOut, .animated.flipOutX, .animated.flipOutY { -webkit-animation-duration: .75s; animation-duration: .75s; } @-webkit-keyframes bounce { 0%, 20%, 53%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%, 43%, 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -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%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-transform: translateZ(0); transform: translateZ(0); } 40%, 43% { -webkit-transform: translate3d(0, -30px, 0); transform: translate3d(0, -30px, 0); } 40%, 43%, 70% { -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); } 70% { -webkit-transform: translate3d(0, -15px, 0); transform: translate3d(0, -15px, 0); } 90% { -webkit-transform: translate3d(0, -4px, 0); transform: translate3d(0, -4px, 0); } } .bounce { -webkit-animation-name: bounce; animation-name: bounce; -webkit-transform-origin: center bottom; transform-origin: center bottom; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(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); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(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); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(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%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; } @-webkit-keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes headShake { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 6.5% { -webkit-transform: translateX(-6px) rotateY(-9deg); transform: translateX(-6px) rotateY(-9deg); } 18.5% { -webkit-transform: translateX(5px) rotateY(7deg); transform: translateX(5px) rotateY(7deg); } 31.5% { -webkit-transform: translateX(-3px) rotateY(-5deg); transform: translateX(-3px) rotateY(-5deg); } 43.5% { -webkit-transform: translateX(2px) rotateY(3deg); transform: translateX(2px) rotateY(3deg); } 50% { -webkit-transform: translateX(0); transform: translateX(0); } } .headShake { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-name: headShake; animation-name: headShake; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(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) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes jello { 0%, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } @keyframes jello { 0%, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39063deg) skewY(0.39063deg); transform: skewX(0.39063deg) skewY(0.39063deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: translateZ(0); transform: translateZ(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); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { 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); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes fadeOutDownBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes fadeOutLeftBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes fadeOutRightBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes fadeOutUpBig { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%, 80% { -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); } to { -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) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); } 0%, 40% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); } 50%, 80% { -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); } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } 0%, 40% { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; } @-webkit-keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedIn { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); } 60%, 80% { opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOut { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes rotateIn { 0% { transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center; -webkit-transform: rotate(-200deg); transform: rotate(-200deg); opacity: 0; } 0%, to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInDownLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInDownRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInDownRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateInUpLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpLeft { 0% { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInUpRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateInUpRight { 0% { transform-origin: right bottom; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } @keyframes rotateOut { 0% { transform-origin: center; opacity: 1; } 0%, to { -webkit-transform-origin: center; } to { transform-origin: center; -webkit-transform: rotate(200deg); transform: rotate(200deg); opacity: 0; } } .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } @keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; } } .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; opacity: 1; } 0%, to { -webkit-transform-origin: left bottom; } to { transform-origin: left bottom; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); opacity: 0; } } .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; opacity: 1; } 0%, to { -webkit-transform-origin: right bottom; } to { transform-origin: right bottom; -webkit-transform: rotate(90deg); transform: rotate(90deg); opacity: 0; } } .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes hinge { 0% { transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(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; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hinge { 0% { transform-origin: top left; } 0%, 20%, 60% { -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); transform-origin: top left; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(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; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hinge { -webkit-animation-name: hinge; animation-name: hinge; } @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollIn { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollIn { -webkit-animation-name: rollIn; animation-name: rollIn; } @-webkit-keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOut { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOut { -webkit-animation-name: rollOut; animation-name: rollOut; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%, to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50%, to { 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); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0); transform: scale(0.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(0.1) translate3d(2000px, 0, 0); transform: scale(0.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } to { opacity: 0; -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } } .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInDown { 0% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; } @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft; } @-webkit-keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInRight { 0% { -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } @-webkit-keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } @keyframes slideInUp { 0% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); visibility: visible; } to { -webkit-transform: translateZ(0); transform: translateZ(0); } } .slideInUp { -webkit-animation-name: slideInUp; animation-name: slideInUp; } @-webkit-keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes slideOutDown { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .slideOutDown { -webkit-animation-name: slideOutDown; animation-name: slideOutDown; } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes slideOutLeft { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft; } @-webkit-keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes slideOutRight { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } @-webkit-keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes slideOutUp { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } to { visibility: hidden; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp; } body { background-position: center 316px; } h1 { color: #002663; font-size: 24px; line-height: 32px; } #cookieWarningDiv { z-index: 9001; background-color: #d0e7fc; box-shadow: 0 0 5px black; font-size: 12px; color: #333333; position: fixed; left: 0px; top: 0px; width: 100%; padding: 5em 15px 0 15px; max-height: 80vh; } #cookieButtons { padding-bottom: 15px; } #cookieButtons a { font-family: "Bree Serif"; } #cookieAcceptAll { background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; display: inline-block; color: white; padding: 12px 25px; font-size: 18px; line-height: 26px; } #cookieAcceptAll i { color: white; } #cookieAcceptFunctional, #cookieAcceptNone { color: #f77c00; font-size: 18px; font-weight: 400; line-height: 28px; } #cookieAcceptFunctional i, #cookieAcceptNone i { font-size: 12px; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; color: white; text-align: center; vertical-align: top; padding-top: 6px; padding-left: 2px; margin-right: 10px; } /*#FormMarketplaceSearch.form-body { }*/ .form-body { /* Custom select arrow */ /* style icon */ /* align icon */ /* add padding */ /* Submit button */ /*Required field asterisk */ /* Hide actual file input fields */ /*tooltips*/ /*orange borders*/ /*error on custom clientside validations*/ /*succes on custom clientside validations*/ /*search submit*/ } .form-body .form-inline { margin-bottom: 20px; clear: both; } .form-body .form-control { min-width: 270px; border: 2px solid #e3f0fd; display: inline-block; border-radius: 10px; } .form-body .form-control:first-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .form-body .form-control.input-md { min-width: 100px; border: 2px solid #e3f0fd; display: inline-block; border-radius: 10px; } .form-body .form-control.input-sm { min-width: 50px; width: 50px; border: 2px solid #e3f0fd; display: inline-block; border-radius: 10px; } .form-body .form-control.has-input-group-addon-right { min-width: 200px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: 0; } .form-body .input-group-addon.input-group-addon-right { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-color: #e3f0fd; border-style: solid; border-width: 2px; } .form-body .form-control.has-input-group-addon-left { min-width: 200px; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; } .form-body .input-group-addon.input-group-addon-left { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-color: #e3f0fd; border-style: solid; border-width: 2px; } .form-body input.form-control, .form-body select.form-control { height: 40px; } .form-body .control-label { padding-left: 0; text-transform: uppercase; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; margin-top: 10px; } .form-body .radiodiv { position: relative; display: inline-block; } .form-body .selectdiv { position: relative; } .form-body .selectdiv:after { content: '\f078'; font: 12px FontAwesome; color: #fff; background-color: #0c74d5; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; width: 21px; height: 21px; /* Positioning */ margin-left: -28px; top: 10px; padding: 0 0 0 4px; border-top: 1px solid #0c74d5; line-height: 18px; position: absolute; pointer-events: none; } .form-body input.info:after { /*content: '\f078'; font: 12px FontAwesome; color: $default-color; background-color: $quinary-color; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; width: 21px; height: 21px; margin-left: -28px; top: 10px; padding: 0 0 0 4px; border-top: 1px solid $quinary-color; line-height: 18px; position: absolute; pointer-events: none;*/ } .form-body .inner-addon { position: relative; padding: 0; min-width: 270px; } @media (min-width: 1200px) { .form-body .inner-addon { max-width: 270px; } } .form-body .inner-addon i.fa { position: absolute; padding: 3px 5px; pointer-events: none; color: #fff; background-color: #0c74d5; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; width: 21px; height: 21px; margin-right: 8px; top: 10px; display: block; /*margin-left: -28px;*/ } .form-body .inner-addon i.fa.fa-question { pointer-events: auto; cursor: help; } .form-body i.fa.blue { position: relative; padding: 3px 5px; color: #fff; background-color: #0c74d5; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; width: 21px; height: 21px; margin-right: 8px; pointer-events: auto; cursor: help; } .form-body .left-addon i.fa { left: 0px; } .form-body .right-addon i.fa { right: 0px; } .form-body .left-addon input { padding-left: 30px; } .form-body .right-addon input { padding-right: 30px; } .form-body .selectdiv select { -webkit-appearance: none; -moz-appearance: none; appearance: none; min-width: 271px; background-color: #f5fafe; } .form-body .submitBtn, .form-body .panelbutton, .form-body #btnAddCoRegistered { background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); -moz-border-radius: 20px 20px 0; -webkit-border-radius: 20px 20px 0; border-radius: 20px 20px 0; border: none; display: inline-block; color: #fff; padding: 12px 25px; font-size: 18px; line-height: 26px; margin-top: 15px; } .form-body .submitBtn i.fa, .form-body .panelbutton i.fa, .form-body #btnAddCoRegistered i.fa { color: #fff; margin-right: 10px; } .form-body .submitBtn i.fa.no-mr, .form-body .panelbutton i.fa.no-mr, .form-body #btnAddCoRegistered i.fa.no-mr { margin-right: 0px; } .form-body .submitBtn--previous, .form-body .panelbutton--previous, .form-body #btnAddCoRegistered--previous { background-color: #f77c00; background-image: linear-gradient(180deg, #fff 0%, #dddddd 100%); color: #fff; } .form-body .submitBtn:hover, .form-body .panelbutton:hover, .form-body #btnAddCoRegistered:hover { background-image: none; } .form-body .submitBtn:hover--previous, .form-body .panelbutton:hover--previous, .form-body #btnAddCoRegistered:hover--previous { background-image: none; background-color: #fff; border-color: #f77c00; color: #f77c00; } .form-body .submitBtn:disabled, .form-body .panelbutton:disabled, .form-body #btnAddCoRegistered:disabled { background: #dddddd; } .form-body .submitBtn:disabled i.fa-spinner, .form-body .panelbutton:disabled i.fa-spinner, .form-body #btnAddCoRegistered:disabled i.fa-spinner { color: #fff; } .form-body #btn-all-studs i.fa { color: #f77c00; } .form-body .fa-asterisk { color: #f77c00; font-size: 8px; vertical-align: text-top; padding-left: 3px; } .form-body input[type=file] { display: none; } .form-body .agreement-checkbox { min-width: 10px !important; min-height: 10px !important; width: auto !important; margin: -5px 0 0 -5px; height: auto !important; } .form-body .checkbox-label, .form-body .radio-label { font-weight: 400; } .form-body .iban { text-transform: uppercase; } .form-body .fileSelect { padding-left: 0; } .form-body .fileSelect label { min-width: 220px; } .form-body .fileSelect i:not(.fa-asterisk) { font-size: 12px; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; color: white; text-align: center; padding-top: 6px; padding-left: 2px; margin-right: 10px; } .form-body .dropdown-menu li a span { margin-left: 10px; } .form-body .form-order-overview { background-color: #f5fafe; border: 2px solid #e3f0fd; border-radius: 10px; padding: 40px; } .form-body .form-order-overview h2, .form-body .form-order-overview .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .form-body .form-order-overview a.content-filter-activator { margin-top: 0; } .form-body .form-order-overview table { width: 100%; background-color: transparent; } .form-body .form-order-overview table tr.head th { padding: 0 0 5px 0; } .form-body .form-order-overview table tr.head th i.fa { color: #0c74d5; font-size: 16px; } .form-body .form-order-overview table tr td { padding: 0 0 10px 0; } .form-body .form-order-overview table tr.required-services.hidden { display: none; } .form-body .form-order-overview table tr.conditions label { font-weight: 400; cursor: pointer; } .form-body div.conditions label { font-weight: 400; cursor: pointer; } .form-body .genome-box, .form-body .wffs-box { background-color: #f5fafe; border: 2px solid #e3f0fd; border-radius: 10px; padding: 20px 15px; margin-left: -15px; margin-right: -15px; } .form-body .genome-box .oc-acceptance, .form-body .genome-box .wffs-acceptance, .form-body .wffs-box .oc-acceptance, .form-body .wffs-box .wffs-acceptance { display: inline-block; width: 100%; } .form-body .genome-box .oc-acceptance input, .form-body .genome-box .wffs-acceptance input, .form-body .wffs-box .oc-acceptance input, .form-body .wffs-box .wffs-acceptance input { float: left; margin-right: 10px; } .form-body .genome-box .oc-acceptance label, .form-body .genome-box .wffs-acceptance label, .form-body .wffs-box .oc-acceptance label, .form-body .wffs-box .wffs-acceptance label { margin-top: 0; text-transform: none; float: left; font-weight: normal; font-size: 16px; } .form-body .genome-box #DisabledByBreedingType, .form-body .wffs-box #DisabledByBreedingType { display: none; } .form-body .genome-box #oc-acceptance h3, .form-body .wffs-box #oc-acceptance h3 { font-size: 20px; } .form-body .genome-box.disabled { background-color: #BBB; border: 2px solid gray; } .form-body .genome-box.disabled #DisabledByBreedingType { display: inline-block; font-size: 10px; color: red; margin-left: 10px; } .form-body .wffs-box { margin-top: 20px; } .form-body .tooltip.top .tooltip-inner { background-color: #f77c00; min-width: 200px; } .form-body .tooltip.top .tooltip-arrow { border-top-color: #f77c00; } .form-body input:not(.hide-hints):invalid, .form-body select:not(.hide-hints):invalid, .form-body textarea:not(.hide-hints):invalid { border-color: #f77c00; } .form-body .error select { border-color: #f77c00; } .form-body .error input { border-color: #f77c00; } .form-body .error .errormessage { color: #f77c00; font-size: 14px; } @media (min-width: 768px) { .form-body .error .errormessage { max-width: 600px; } } .form-body .error .errortext { float: left; clear: both; color: #f77c00; } .form-body #ageError { display: inline-block; color: #f77c00; font-size: 10px; float: left; font-weight: 400; line-height: 10px; } .form-body .success .successtext { float: left; clear: both; color: #002663; } .form-body .btn-search-submit { background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; border-radius: 20px 20px 0 20px; margin-top: 20px; } .form-body .btn-search-submit i.fa { color: #fff; margin-left: 8px; } .form-body .btn-search-submit:hover { background-image: none; } .form-body .normal { font-weight: 400; } .form-body .checkboxList { position: relative; display: inline-block; } .form-body #Kwpn_Form_EventSignUp_AmazoneSearchResults, .form-body #VueStudSearchResults, .form-body #StudSearchResults, .form-body #HorseSearchResults { max-width: 270px; font-size: 13px; } .form-body #Kwpn_Form_EventSignUp_AmazoneSearchResults a, .form-body #VueStudSearchResults a, .form-body #StudSearchResults a, .form-body #HorseSearchResults a { font-size: 13px; } @media (max-width: 767px) { .form-body .selectdiv:after { top: 43px; right: 10px; } } .form-body .resultStyling .form-control { background: white; } .form-body .resultStyling .selectdiv:after { position: absolute !important; top: 53px !important; } .form-body .selectedAmazone, .form-body .selectedFather { position: relative; display: inline-block; background-color: #d0e7fc; margin-top: 10px; padding: 10px; border-radius: 10px; } .form-body .selectedAmazone i.fa.fa-close, .form-body .selectedFather i.fa.fa-close { position: absolute; top: 3px; right: 8px; cursor: pointer; } /*.form-body.marketplace { .form-inline .input-group .input-group-addon.input-group-addon-right { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border: 2px solid #e3f0fd; } .input-group .form-control.has-group-addon-right, .input-group .has-group-addon-right.form-control:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right:0; width: 221px; } }*/ #DatabaseSearchForm_FreeSearchForm input[type="checkbox"], #DatabaseSearchForm_FreeSearchForm input[type="radio"], #DatabaseSearchForm_DatabaseForm input[type="checkbox"], #DatabaseSearchForm_DatabaseForm input[type="radio"], #DatabaseSearchForm input[type="checkbox"], #DatabaseSearchForm input[type="radio"] { margin-right: 20px; } #FormPredicatesRequest input[type="checkbox"] { min-width: 10px !important; margin-top: 0 !important; margin-right: 20px; height: auto !important; } #FormRegisterHorse .navigation-prev { margin-bottom: 20px; } #FormRegisterHorse .navigation-next { padding-left: 0; margin-bottom: 20px; } div.input-group.form-control { overflow: hidden; height: 40px; -webkit-transition: all 0.15s ease-out; transition: all 0.15s ease-out; } @media screen and (max-width: 767px) { div.input-group.form-control { width: 100%; display: block; } } div.input-group.form-control input#Kwpn_Form_EventSignUp_AmazoneSearch, div.input-group.form-control input#SearchFather, div.input-group.form-control input#SearchHorse { border: none; } div.input-group.form-control span.input-group-btn { position: absolute; right: 0; top: 2px; width: auto; } @media screen and (max-width: 767px) { div.input-group.form-control span.input-group-btn { position: absolute; right: 40px; top: 2px; } } div.input-group.form-control span.input-group-btn .btn-default { outline: none; border: none; z-index: 100; background: none; } div.input-group.form-control span.input-group-btn .btn-default:hover, div.input-group.form-control span.input-group-btn .btn-default:focus, div.input-group.form-control span.input-group-btn .btn-default:visited { background: none; } div.input-group.form-control span.input-group-btn .btn-default:active { background: none; -webkit-box-shadow: none; box-shadow: none; } #selectedHorsesHolder { display: inline-block; width: 270px; } #selectedHorsesHolder .selectedHorse { background-color: #d0e7fc; border-radius: 20px; position: relative; display: inline-block; width: 270px; margin-bottom: 15px; } #selectedHorsesHolder .selectedHorse .gender { padding-top: 10px; } #selectedHorsesHolder .selectedHorse .gender i.fa { color: #0c74d5; } #selectedHorsesHolder .selectedHorse .lifeNumber { color: #0c74d5; padding-top: 10px; font-size: 12px; } #selectedHorsesHolder .selectedHorse .animalName { color: #002663; font-weight: 700; } #selectedHorsesHolder .selectedHorse .pedigree { color: #002663; font-weight: 400 !important; text-transform: none !important; } #selectedHorsesHolder .selectedHorse .itemPriceInfo { color: #002663; font-weight: 400 !important; text-transform: none !important; padding-bottom: 10px; font-size: 12px; line-height: 18px; } #selectedHorsesHolder .selectedHorse .itemPriceInfo hr { margin: 10px 0; border-top: 1px solid #002663; } #selectedHorsesHolder .selectedHorse .itemPriceInfo input[type=checkbox] { float: left; clear: left; width: auto; margin-right: 4px; top: -2px; position: relative; } #selectedHorsesHolder .selectedHorse .itemPriceInfo label { float: left; width: auto; max-width: calc(100% - 20px); font-weight: normal; font-size: 10pt; line-height: 10pt; cursor: pointer; } #selectedHorsesHolder .selectedHorse .itemPriceInfo label span { white-space: nowrap; font-size: 8pt; } #selectedHorsesHolder .selectedHorse .close { filter: alpha(opacity=100); opacity: 1; padding-top: 10px; } #selectedHorsesHolder .selectedHorse .close a { text-decoration: none; } #selectedHorsesHolder .selectedHorse .close a span { padding: 0px 4px; width: 25px; height: 25px; border-radius: 20px; background-color: #0c74d5; } #selectedHorsesHolder .selectedHorse .close a span i.fa { color: #fff; font-weight: 400; } #Kwpn_Form_EventSignUp_AmazoneSearchResults .amazoneoption { cursor: pointer; font-size: 13px; } #Kwpn_Form_EventSignUp_AmazoneSearchResults .amazoneoption:hover { background-color: #d0e7fc; } #Kwpn_Form_EventSignUp_AmazoneSearchResults p { margin: 0; font-size: 13px; } .event-horse-search { margin-bottom: 60px; } .event-horse-search .input-group.form-control { position: absolute; z-index: 100; } #SearchHorse { width: 300px; max-width: 100%; } #StudSearchResults .studoption, #StudSearchResults .horseoption, #VueStudSearchResults .studoption, #VueStudSearchResults .horseoption, #HorseSearchResults .studoption, #HorseSearchResults .horseoption { cursor: pointer; font-size: 13px; } #StudSearchResults .studoption:hover, #StudSearchResults .horseoption:hover, #VueStudSearchResults .studoption:hover, #VueStudSearchResults .horseoption:hover, #HorseSearchResults .studoption:hover, #HorseSearchResults .horseoption:hover { background-color: #d0e7fc; } #StudSearchResults p, #VueStudSearchResults p, #HorseSearchResults p { margin: 0; font-size: 13px; } .owner-subheader { color: #d0e7fc; } #footerlogos { min-height: 100px; margin-bottom: 40px; background-color: transparent; margin-top: 30px; } #footerlogos .logolist { vertical-align: middle; } #footerlogos .logolist h3 { padding-left: 30px; } #footerlogos .logolist .carousel { height: 100px; } #footerlogos .logolist .partnerLogo { float: left; margin-bottom: 15px; margin-right: 25px; } #footerlogos .logolist .partnerLogo img { max-height: 100px; } #footerlogos .logolist .partnerLogo:last-child { margin-right: 0; } #footerlogos .logolist.logolist-blue { margin-bottom: 30px; } @media screen and (min-width: 768px) { #footerlogos .logolist.logolist-blue { margin-top: 30px; } } #footerlogos .logolist.logolist-blue > div { background-color: #f5fafe; border-radius: 20px; box-shadow: 0 2px 0px 0 rgba(0, 38, 99, 0.02), 0 2px 10px 0 rgba(0, 0, 0, 0.1); } #footerlogos .logolist.logolist-blue > div a { display: inline-block; margin: 0 0 15px 0; } #ui-datepicker-div { border: 1px solid #f77c00; border-radius: 20px; background-color: #fff; } #ui-datepicker-div .ui-datepicker-header { border: 0; background-color: transparent; } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-prev.ui-state-hover, #ui-datepicker-div .ui-datepicker-header .ui-datepicker-next.ui-state-hover { background-color: transparent; border: 0; cursor: pointer; } #ui-datepicker-div .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month, #ui-datepicker-div .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year { text-transform: capitalize; color: #002663; font-family: "Bree Serif"; font-weight: 400; font-size: 18px; } #ui-datepicker-div .ui-datepicker-calendar { background-color: transparent; } #ui-datepicker-div .ui-datepicker-calendar td { width: 30px; height: 20px; } #ui-datepicker-div .ui-datepicker-calendar td a { padding: 0; } #ui-datepicker-div .ui-datepicker-calendar .ui-state-default { background-color: transparent; color: #002663; text-align: center; border: 0; font-size: 16px; font-weight: 400; line-height: 38px; } #ui-datepicker-div .ui-datepicker-calendar .ui-state-highlight { background: #e3f0fd; background-color: #e3f0fd; color: #002663; font-weight: 400; font-size: 16px; text-align: center; line-height: 38px; border-radius: 20px; border: 0; } #ui-datepicker-div .ui-datepicker-calendar .ui-state-active { background: #0c74d5; background-color: #0c74d5; color: #fff; font-weight: 400; font-size: 16px; text-align: center; line-height: 38px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 20px; border: 0; } #ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-unselectable, #ui-datepicker-div .ui-datepicker-calendar .ui-state-disabled { background-color: transparent; color: #d0e7fc; text-align: center; border: 0; font-size: 16px; font-weight: 400; line-height: 38px; } /* * jQuery OrgChart Plugin * https://github.com/dabeng/OrgChart * * Demos of jQuery OrgChart Plugin * http://dabeng.github.io/OrgChart/local-datasource/ * http://dabeng.github.io/OrgChart/ajax-datasource/ * http://dabeng.github.io/OrgChart/ondemand-loading-data/ * http://dabeng.github.io/OrgChart/option-createNode/ * http://dabeng.github.io/OrgChart/export-orgchart/ * http://dabeng.github.io/OrgChart/integrate-map/ * * Copyright 2016, dabeng * http://dabeng.github.io/ * * Licensed under the MIT license: * http://www.opensource.org/licenses/MIT */ @media print { .pedigreetree { page-break-inside: avoid; max-width: 400px !important; } } @media screen and (max-width: 767px) { .pedigreetree { overflow-x: scroll; } } .pedigreetree .orgchart { display: inline-block; min-height: 202px; min-width: 202px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: linear-gradient(90deg, rgba(200, 0, 0, 0.15) 10%, transparent 10%), linear-gradient(rgba(200, 0, 0, 0.15) 10%, transparent 10%); background-size: 10px 10px; border: 1px dashed transparent; padding: 20px; } .pedigreetree .orgchart .hidden, .pedigreetree .orgchart ~ .hidden { display: none !important; } .pedigreetree .orgchart *, .pedigreetree .orgchart *:before, .pedigreetree .orgchart *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .pedigreetree .orgchart.b2t { transform: rotate(180deg); -ms-transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .pedigreetree .orgchart.l2r { position: absolute; transform: rotate(-90deg) scaleX(-1); -ms-transform: rotate(-90deg) scaleX(-1); -moz-transform: rotate(-90deg) scaleX(-1); -webkit-transform: rotate(-90deg) scaleX(-1); transform-origin: left top; -ms-transform-origin: left top; -moz-transform-origin: left top; -webkit-transform-origin: left top; } .pedigreetree .orgchart .verticalNodes ul { list-style: none; margin: 0px; padding-left: 18px; text-align: left; } .pedigreetree .orgchart .verticalNodes ul:first-child { margin-top: 2px; } .pedigreetree .orgchart .verticalNodes > td::before { content: ''; border: 1px solid rgba(217, 83, 79, 0.8); } .pedigreetree .orgchart .verticalNodes > td > ul > li:first-child::before { top: -4px; height: 30px; width: calc(50% - 2px); border-width: 2px 0 0 2px; } .pedigreetree .orgchart .verticalNodes ul > li { position: relative; } .pedigreetree .orgchart .verticalNodes ul > li::before, .pedigreetree .orgchart .verticalNodes ul > li::after { content: ''; position: absolute; left: -6px; border-color: #e3f0fd; border-style: solid; border-width: 0 0 2px 2px; } .pedigreetree .orgchart .verticalNodes ul > li::before { top: -4px; height: 30px; width: 11px; } .pedigreetree .orgchart .verticalNodes ul > li::after { top: 1px; height: 100%; } .pedigreetree .orgchart .verticalNodes ul > li:first-child::after { top: 24px; width: 11px; border-width: 2px 0 0 2px; } .pedigreetree .orgchart .verticalNodes ul > li:last-child::after { border-width: 2px 0 0; } .pedigreetree .orgchart.r2l { position: absolute; transform: rotate(90deg); -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform-origin: left top; -ms-transform-origin: left top; -moz-transform-origin: left top; -webkit-transform-origin: left top; } .pedigreetree .orgchart > .spinner { font-size: 20px; margin-top: 30px; color: #0c74d5; } .pedigreetree .orgchart table { border-spacing: 0 !important; border-collapse: separate !important; } .pedigreetree .orgchart > table:first-child { margin: 20px auto; } .pedigreetree .orgchart td { text-align: center; vertical-align: top; padding: 0 3px; } .pedigreetree .orgchart tr.lines td.topLine { border-top: 2px solid rgba(217, 83, 79, 0.8); } .pedigreetree .orgchart tr.lines td.rightLine { border-right: 1px solid rgba(217, 83, 79, 0.8); float: none; border-radius: 0px; } .pedigreetree .orgchart tr.lines td.leftLine { border-left: 1px solid rgba(217, 83, 79, 0.8); float: none; border-radius: 0px; } .pedigreetree .orgchart tr.lines .downLine { background-color: rgba(217, 83, 79, 0.8); margin: 0px auto; height: 20px; width: 2px; float: none; } @media print { .pedigreetree .orgchart tr.lines .downLine { height: 10px; } } .pedigreetree .orgchart .node { display: inline-block; position: relative; margin: 0; padding: 3px; border: 2px solid #e3f0fd; text-align: center; width: 60px !important; border-radius: 10px; } @media print { .pedigreetree .orgchart .node { border-color: black; } } .pedigreetree .orgchart.l2r .node, .pedigreetree .orgchart.r2l .node { width: 50px; height: 130px; } @media print { .pedigreetree .orgchart.l2r .node, .pedigreetree .orgchart.r2l .node { width: 40px; padding: 2px; } } .pedigreetree .orgchart .node > .spinner { position: absolute; top: calc(50% - 15px); left: calc(50% - 15px); vertical-align: middle; font-size: 30px; color: #0c74d5; } .pedigreetree .orgchart .node:hover { background-color: rgba(238, 217, 54, 0.5); transition: .5s; cursor: default; z-index: 20; } .pedigreetree .orgchart .node.focused { background-color: rgba(238, 217, 54, 0.5); } .pedigreetree .orgchart .ghost-node { position: fixed; left: -10000px; top: -10000px; } .pedigreetree .orgchart .ghost-node > * { fill: #ffffff; stroke: #bf0000; } .pedigreetree .orgchart .node.allowedDrop { border-color: rgba(68, 157, 68, 0.9); } .pedigreetree .orgchart .node .title { text-align: left; font-size: 12px; height: 20px; line-height: 20px; background-color: rgba(217, 83, 79, 0.8); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pedigreetree .orgchart.l2r .node .title, .pedigreetree .orgchart.l2r .node .subtext { transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); -ms-transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); -moz-transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); -webkit-transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); transform-origin: bottom center; -ms-transform-origin: bottom center; -moz-transform-origin: bottom center; -webkit-transform-origin: bottom center; width: 120px; } .pedigreetree .orgchart .node .title .symbol { float: left; margin-top: 4px; margin-left: 2px; } .pedigreetree .orgchart .node .content { width: 90%; height: 20px; font-size: 11px; line-height: 18px; border: 1px solid rgba(217, 83, 79, 0.8); border-radius: 0 0 4px 4px; text-align: center; background-color: #fff; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pedigreetree .orgchart.l2r .node .content { transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); -ms-transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); -moz-transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); -webkit-transform: rotate(-90deg) translate(-40px, -40px) scaleX(-1); transform-origin: top center; -ms-transform-origin: top center; -moz-transform-origin: top center; -webkit-transform-origin: top center; width: 120px; } .pedigreetree .orgchart .node .edge { font-size: 15px; position: absolute; color: #0c74d5; cursor: default; transition: .2s; -webkit-transition: .2s; } .pedigreetree .orgchart.noncollapsable .node .edge { display: none; } .pedigreetree .orgchart .edge:hover { color: #3a9af4; cursor: pointer; } .pedigreetree .orgchart .node .verticalEdge { width: calc(100% - 10px); width: -webkit-calc(100% - 10px); width: -moz-calc(100% - 10px); left: 5px; } .pedigreetree .orgchart .node .topEdge { top: -4px; } .pedigreetree .orgchart .node .bottomEdge { bottom: -4px; } .pedigreetree .orgchart .node .horizontalEdge { width: 15px; height: calc(100% - 10px); height: -webkit-calc(100% - 10px); height: -moz-calc(100% - 10px); top: 5px; } .pedigreetree .orgchart .node .rightEdge { right: -4px; } .pedigreetree .orgchart .node .leftEdge { left: -4px; } .pedigreetree .orgchart .node .horizontalEdge::before { position: absolute; top: calc(50% - 7px); top: -webkit-calc(50% - 7px); top: -moz-calc(50% - 7px); } .pedigreetree .orgchart .node .rightEdge::before { right: 3px; } .pedigreetree .orgchart .node .leftEdge::before { left: 3px; } .pedigreetree .orgchart .node .toggleBtn { position: absolute; left: 5px; bottom: -2px; color: #0c74d5; } .pedigreetree .orgchart .node .toggleBtn:hover { color: #0c74d5; } .pedigreetree .oc-export-btn { display: inline-block; position: absolute; right: 5px; top: 5px; padding: 6px 12px; margin-bottom: 0; font-size: 14px; 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; color: #fff; background-color: #3a9af4; border: 1px solid transparent; border-color: #3a9af4; border-radius: 4px; } .pedigreetree .oc-export-btn[disabled] { cursor: not-allowed; filter: alpha(opacity=30); -webkit-box-shadow: none; box-shadow: none; opacity: 0.3; } .pedigreetree .oc-export-btn:hover, .pedigreetree .oc-export-btn:focus, .pedigreetree .oc-export-btn:active { background-color: #3a9af4; border-color: #0c74d5; } .pedigreetree .orgchart ~ .mask { position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 999; text-align: center; background-color: rgba(0, 0, 0, 0.3); } .pedigreetree .orgchart ~ .mask .spinner { position: absolute; top: calc(50% - 54px); left: calc(50% - 54px); color: rgba(255, 255, 255, 0.8); font-size: 108px; } .pedigreetree .orgchart .node { transition: all 0.3s; webkit-transition: all 0.3s; opacity: 1; top: 0; left: 0; } .pedigreetree .orgchart .slide-down { opacity: 0; top: 40px; } .pedigreetree .orgchart.l2r .node.slide-down, .pedigreetree .orgchart.r2l .node.slide-down { top: 130px; } .pedigreetree .orgchart .slide-up { opacity: 0; top: -40px; } .pedigreetree .orgchart.l2r .node.slide-up, .pedigreetree .orgchart.r2l .node.slide-up { top: -130px; } .pedigreetree .orgchart .slide-right { opacity: 0; left: 130px; } .pedigreetree .orgchart.l2r .node.slide-right, .pedigreetree .orgchart.r2l .node.slide-right { left: 40px; } .pedigreetree .orgchart .slide-left { opacity: 0; left: -130px; } .pedigreetree .orgchart.l2r .node.slide-left, .pedigreetree .orgchart.r2l .node.slide-left { left: -40px; } .pedigreetree #chart-container .orgchart .node .verticalEdge, .pedigreetree #chart-container .orgchart .node .horizontalEdge, .pedigreetree #pedigree_stallion .orgchart .node .verticalEdge, .pedigreetree #pedigree_stallion .orgchart .node .horizontalEdge, .pedigreetree #pedigree_mare .orgchart .node .verticalEdge, .pedigreetree #pedigree_mare .orgchart .node .horizontalEdge { display: none; } .pedigreetree #chart-container .orgchart.l2r, .pedigreetree #pedigree_stallion .orgchart.l2r, .pedigreetree #pedigree_mare .orgchart.l2r { position: relative; top: 40px; margin: 0; padding: 0; } .pedigreetree #chart-container .orgchart > table:first-child, .pedigreetree #pedigree_stallion .orgchart > table:first-child, .pedigreetree #pedigree_mare .orgchart > table:first-child { margin: 0; } .pedigreetree #chart-container tr, .pedigreetree #pedigree_stallion tr, .pedigreetree #pedigree_mare tr { box-shadow: none !important; } .pedigreetree #chart-container tr.lines td.topLine, .pedigreetree #chart-container tr.lines td.leftLine, .pedigreetree #chart-container tr.lines td.rightLine, .pedigreetree #chart-container tr.lines td.downLine, .pedigreetree #pedigree_stallion tr.lines td.topLine, .pedigreetree #pedigree_stallion tr.lines td.leftLine, .pedigreetree #pedigree_stallion tr.lines td.rightLine, .pedigreetree #pedigree_stallion tr.lines td.downLine, .pedigreetree #pedigree_mare tr.lines td.topLine, .pedigreetree #pedigree_mare tr.lines td.leftLine, .pedigreetree #pedigree_mare tr.lines td.rightLine, .pedigreetree #pedigree_mare tr.lines td.downLine { border-color: #e3f0fd; } @media print { .pedigreetree #chart-container tr.lines td.topLine, .pedigreetree #chart-container tr.lines td.leftLine, .pedigreetree #chart-container tr.lines td.rightLine, .pedigreetree #chart-container tr.lines td.downLine, .pedigreetree #pedigree_stallion tr.lines td.topLine, .pedigreetree #pedigree_stallion tr.lines td.leftLine, .pedigreetree #pedigree_stallion tr.lines td.rightLine, .pedigreetree #pedigree_stallion tr.lines td.downLine, .pedigreetree #pedigree_mare tr.lines td.topLine, .pedigreetree #pedigree_mare tr.lines td.leftLine, .pedigreetree #pedigree_mare tr.lines td.rightLine, .pedigreetree #pedigree_mare tr.lines td.downLine { border-color: black; } } .pedigreetree #chart-container .orgchart tr.lines .downLine, .pedigreetree #pedigree_stallion .orgchart tr.lines .downLine, .pedigreetree #pedigree_mare .orgchart tr.lines .downLine { background: #e3f0fd !important; } .pedigreetree #chart-container .orgchart .node:hover, .pedigreetree #chart-container .orgchart .node:focus, .pedigreetree #chart-container .orgchart .node.focused, .pedigreetree #pedigree_stallion .orgchart .node:hover, .pedigreetree #pedigree_stallion .orgchart .node:focus, .pedigreetree #pedigree_stallion .orgchart .node.focused, .pedigreetree #pedigree_mare .orgchart .node:hover, .pedigreetree #pedigree_mare .orgchart .node:focus, .pedigreetree #pedigree_mare .orgchart .node.focused { background: #e3f0fd; } .pedigreetree #chart-container .title, .pedigreetree #chart-container .content, .pedigreetree #pedigree_stallion .title, .pedigreetree #pedigree_stallion .content, .pedigreetree #pedigree_mare .title, .pedigreetree #pedigree_mare .content { border: none; background: none; } .pedigreetree #chart-container .title, .pedigreetree #pedigree_stallion .title, .pedigreetree #pedigree_mare .title { width: 100px; color: #0c74d5; font-size: 10px; text-align: left; } .pedigreetree #chart-container .content, .pedigreetree #pedigree_stallion .content, .pedigreetree #pedigree_mare .content { width: 100px; font-weight: 700; font-size: 12px; text-align: left; } .pedigreetree #chart-container .subtext, .pedigreetree #pedigree_stallion .subtext, .pedigreetree #pedigree_mare .subtext { font-size: 10px; height: 20px; width: 100px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; position: relative; top: -40px; left: 35px; white-space: nowrap; text-align: left; color: #002663; } .pedigreetree #chart-container .contextcontainer, .pedigreetree #pedigree_stallion .contextcontainer, .pedigreetree #pedigree_mare .contextcontainer { margin-top: -10px; margin-left: 5px; } .pedigreetree #chart-container .imagecontainer, .pedigreetree #pedigree_stallion .imagecontainer, .pedigreetree #pedigree_mare .imagecontainer { margin-left: 4px; margin-top: -5px; text-align: left; } .pedigreetree #chart-container .imagecontainer i.fa, .pedigreetree #pedigree_stallion .imagecontainer i.fa, .pedigreetree #pedigree_mare .imagecontainer i.fa { font-size: 16px; } .pedigreetree #chart-container .fa-mars, .pedigreetree #pedigree_stallion .fa-mars, .pedigreetree #pedigree_mare .fa-mars { transform: rotate(180deg); } .pedigreetree #chart-container .fa-venus, .pedigreetree #pedigree_stallion .fa-venus, .pedigreetree #pedigree_mare .fa-venus { transform: rotate(-90deg); } @media print { .pedigreetree #chart-container .content, .pedigreetree #pedigree_stallion .content, .pedigreetree #pedigree_mare .content { font-size: 10px; padding-left: 0px; } .pedigreetree #chart-container .title, .pedigreetree #pedigree_stallion .title, .pedigreetree #pedigree_mare .title { padding-left: 0px; padding-top: 5px; } .pedigreetree #chart-container .subtext, .pedigreetree #pedigree_stallion .subtext, .pedigreetree #pedigree_mare .subtext { padding-left: 0px; } .pedigreetree #chart-container .imagecontainer, .pedigreetree #pedigree_stallion .imagecontainer, .pedigreetree #pedigree_mare .imagecontainer { margin-left: 5px; margin-top: 0px; text-align: left; } .pedigreetree #chart-container .imagecontainer i.fa, .pedigreetree #pedigree_stallion .imagecontainer i.fa, .pedigreetree #pedigree_mare .imagecontainer i.fa { font-size: 10px; } } .pedigreetree #chart-container .tooltip, .pedigreetree #pedigree_stallion .tooltip, .pedigreetree #pedigree_mare .tooltip { position: fixed; transform: rotate(270deg) scaleX(-1); -ms-transform: rotate(270deg) scaleX(-1); -moz-transform: rotate(270deg) scaleX(-1); -webkit-transform: rotate(270deg) scaleX(-1); } .pedigreetree .orgchart { background-image: none; background-size: auto; } #custom_tooltip { color: #fff; padding-left: 10px; padding-right: 10px; position: fixed; z-index: 100; width: auto; height: 40px; display: none; background-color: #0c74d5; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; } #custom_tooltip .title { color: #fff; font-size: 12px; font-weight: bold; line-height: 20px; } #custom_tooltip .subtext { color: #fff; font-size: 12px; line-height: 15px; } #hippomundo table { background-color: #fff; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); border-radius: 20px; } #hippomundo table tfoot tr td { text-align: right; } #hippomundo table thead tr td { padding: 10px 20px; } #hippomundo tr.odd.sec, #hippomundo tr.even.sec { box-shadow: 0 2px 0 0 #E3F0FD; } #hippomundo tr.even { background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); } #hippomundo tr.sec.last { box-shadow: none; } #hippomundo tr th { font-size: 12px; font-weight: 700; line-height: 18px; } #hippomundo tr td { font-size: 12px; padding: 0 20px 0 10px; } #hippomundo tr td a { color: #f77c00; font-size: 12px; } #hippomundo tr td a.horse-father { font-size: 10px; } #hippomundo tr td .breeder-link-image { height: 16px; } #hippomundo tr td .horse-breeder { font-size: 12px; } #hippomundo tr.edition { background-color: #f77c00; line-height: 18px; } #hippomundo tr.class { background-color: #0c74d5; line-height: 18px; } #hippomundo tr.class td { color: #fff; } #hippomundo .flag { width: 16px; height: 11px; background: url(https://hippomundo.com/img/flags/flags.png) no-repeat; } #hippomundo .flag.flag-ad { background-position: -16px 0; } #hippomundo .flag.flag-ae { background-position: -32px 0; } #hippomundo .flag.flag-af { background-position: -48px 0; } #hippomundo .flag.flag-ag { background-position: -64px 0; } #hippomundo .flag.flag-ai { background-position: -80px 0; } #hippomundo .flag.flag-al { background-position: -96px 0; } #hippomundo .flag.flag-am { background-position: -112px 0; } #hippomundo .flag.flag-an { background-position: -128px 0; } #hippomundo .flag.flag-ao { background-position: -144px 0; } #hippomundo .flag.flag-ar { background-position: -160px 0; } #hippomundo .flag.flag-as { background-position: -176px 0; } #hippomundo .flag.flag-at { background-position: -192px 0; } #hippomundo .flag.flag-au { background-position: -208px 0; } #hippomundo .flag.flag-aw { background-position: -224px 0; } #hippomundo .flag.flag-az { background-position: -240px 0; } #hippomundo .flag.flag-ba { background-position: 0 -11px; } #hippomundo .flag.flag-bb { background-position: -16px -11px; } #hippomundo .flag.flag-bd { background-position: -32px -11px; } #hippomundo .flag.flag-be { background-position: -48px -11px; } #hippomundo .flag.flag-bf { background-position: -64px -11px; } #hippomundo .flag.flag-bg { background-position: -80px -11px; } #hippomundo .flag.flag-bh { background-position: -96px -11px; } #hippomundo .flag.flag-bi { background-position: -112px -11px; } #hippomundo .flag.flag-bj { background-position: -128px -11px; } #hippomundo .flag.flag-bm { background-position: -144px -11px; } #hippomundo .flag.flag-bn { background-position: -160px -11px; } #hippomundo .flag.flag-bo { background-position: -176px -11px; } #hippomundo .flag.flag-br { background-position: -192px -11px; } #hippomundo .flag.flag-bs { background-position: -208px -11px; } #hippomundo .flag.flag-bt { background-position: -224px -11px; } #hippomundo .flag.flag-bv { background-position: -240px -11px; } #hippomundo .flag.flag-bw { background-position: 0 -22px; } #hippomundo .flag.flag-by { background-position: -16px -22px; } #hippomundo .flag.flag-bz { background-position: -32px -22px; } #hippomundo .flag.flag-ca { background-position: -48px -22px; } #hippomundo .flag.flag-catalonia { background-position: -64px -22px; } #hippomundo .flag.flag-cd { background-position: -80px -22px; } #hippomundo .flag.flag-cf { background-position: -96px -22px; } #hippomundo .flag.flag-cg { background-position: -112px -22px; } #hippomundo .flag.flag-ch { background-position: -128px -22px; } #hippomundo .flag.flag-ci { background-position: -144px -22px; } #hippomundo .flag.flag-ck { background-position: -160px -22px; } #hippomundo .flag.flag-cl { background-position: -176px -22px; } #hippomundo .flag.flag-cm { background-position: -192px -22px; } #hippomundo .flag.flag-cn { background-position: -208px -22px; } #hippomundo .flag.flag-co { background-position: -224px -22px; } #hippomundo .flag.flag-cr { background-position: -240px -22px; } #hippomundo .flag.flag-cu { background-position: 0 -33px; } #hippomundo .flag.flag-cv { background-position: -16px -33px; } #hippomundo .flag.flag-cw { background-position: -32px -33px; } #hippomundo .flag.flag-cy { background-position: -48px -33px; } #hippomundo .flag.flag-cz { background-position: -64px -33px; } #hippomundo .flag.flag-de { background-position: -80px -33px; } #hippomundo .flag.flag-dj { background-position: -96px -33px; } #hippomundo .flag.flag-dk { background-position: -112px -33px; } #hippomundo .flag.flag-dm { background-position: -128px -33px; } #hippomundo .flag.flag-do { background-position: -144px -33px; } #hippomundo .flag.flag-dz { background-position: -160px -33px; } #hippomundo .flag.flag-ec { background-position: -176px -33px; } #hippomundo .flag.flag-ee { background-position: -192px -33px; } #hippomundo .flag.flag-eg { background-position: -208px -33px; } #hippomundo .flag.flag-eh { background-position: -224px -33px; } #hippomundo .flag.flag-england { background-position: -240px -33px; } #hippomundo .flag.flag-er { background-position: 0 -44px; } #hippomundo .flag.flag-es { background-position: -16px -44px; } #hippomundo .flag.flag-et { background-position: -32px -44px; } #hippomundo .flag.flag-eu { background-position: -48px -44px; } #hippomundo .flag.flag-fi { background-position: -64px -44px; } #hippomundo .flag.flag-fj { background-position: -80px -44px; } #hippomundo .flag.flag-fk { background-position: -96px -44px; } #hippomundo .flag.flag-fm { background-position: -112px -44px; } #hippomundo .flag.flag-fo { background-position: -128px -44px; } #hippomundo .flag.flag-fr { background-position: -144px -44px; } #hippomundo .flag.flag-ga { background-position: -160px -44px; } #hippomundo .flag.flag-gb { background-position: -176px -44px; } #hippomundo .flag.flag-gd { background-position: -192px -44px; } #hippomundo .flag.flag-ge { background-position: -208px -44px; } #hippomundo .flag.flag-gf { background-position: -224px -44px; } #hippomundo .flag.flag-gg { background-position: -240px -44px; } #hippomundo .flag.flag-gh { background-position: 0 -55px; } #hippomundo .flag.flag-gi { background-position: -16px -55px; } #hippomundo .flag.flag-gl { background-position: -32px -55px; } #hippomundo .flag.flag-gm { background-position: -48px -55px; } #hippomundo .flag.flag-gn { background-position: -64px -55px; } #hippomundo .flag.flag-gp { background-position: -80px -55px; } #hippomundo .flag.flag-gq { background-position: -96px -55px; } #hippomundo .flag.flag-gr { background-position: -112px -55px; } #hippomundo .flag.flag-gs { background-position: -128px -55px; } #hippomundo .flag.flag-gt { background-position: -144px -55px; } #hippomundo .flag.flag-gu { background-position: -160px -55px; } #hippomundo .flag.flag-gw { background-position: -176px -55px; } #hippomundo .flag.flag-gy { background-position: -192px -55px; } #hippomundo .flag.flag-hk { background-position: -208px -55px; } #hippomundo .flag.flag-hm { background-position: -224px -55px; } #hippomundo .flag.flag-hn { background-position: -240px -55px; } #hippomundo .flag.flag-hr { background-position: 0 -66px; } #hippomundo .flag.flag-ht { background-position: -16px -66px; } #hippomundo .flag.flag-hu { background-position: -32px -66px; } #hippomundo .flag.flag-ic { background-position: -48px -66px; } #hippomundo .flag.flag-id { background-position: -64px -66px; } #hippomundo .flag.flag-ie { background-position: -80px -66px; } #hippomundo .flag.flag-il { background-position: -96px -66px; } #hippomundo .flag.flag-im { background-position: -112px -66px; } #hippomundo .flag.flag-in { background-position: -128px -66px; } #hippomundo .flag.flag-io { background-position: -144px -66px; } #hippomundo .flag.flag-iq { background-position: -160px -66px; } #hippomundo .flag.flag-ir { background-position: -176px -66px; } #hippomundo .flag.flag-is { background-position: -192px -66px; } #hippomundo .flag.flag-it { background-position: -208px -66px; } #hippomundo .flag.flag-je { background-position: -224px -66px; } #hippomundo .flag.flag-jm { background-position: -240px -66px; } #hippomundo .flag.flag-jo { background-position: 0 -77px; } #hippomundo .flag.flag-jp { background-position: -16px -77px; } #hippomundo .flag.flag-ke { background-position: -32px -77px; } #hippomundo .flag.flag-kg { background-position: -48px -77px; } #hippomundo .flag.flag-kh { background-position: -64px -77px; } #hippomundo .flag.flag-ki { background-position: -80px -77px; } #hippomundo .flag.flag-km { background-position: -96px -77px; } #hippomundo .flag.flag-kn { background-position: -112px -77px; } #hippomundo .flag.flag-kp { background-position: -128px -77px; } #hippomundo .flag.flag-kr { background-position: -144px -77px; } #hippomundo .flag.flag-kurdistan { background-position: -160px -77px; } #hippomundo .flag.flag-kw { background-position: -176px -77px; } #hippomundo .flag.flag-ky { background-position: -192px -77px; } #hippomundo .flag.flag-kz { background-position: -208px -77px; } #hippomundo .flag.flag-la { background-position: -224px -77px; } #hippomundo .flag.flag-lb { background-position: -240px -77px; } #hippomundo .flag.flag-lc { background-position: 0 -88px; } #hippomundo .flag.flag-li { background-position: -16px -88px; } #hippomundo .flag.flag-lk { background-position: -32px -88px; } #hippomundo .flag.flag-lr { background-position: -48px -88px; } #hippomundo .flag.flag-ls { background-position: -64px -88px; } #hippomundo .flag.flag-lt { background-position: -80px -88px; } #hippomundo .flag.flag-lu { background-position: -96px -88px; } #hippomundo .flag.flag-lv { background-position: -112px -88px; } #hippomundo .flag.flag-ly { background-position: -128px -88px; } #hippomundo .flag.flag-ma { background-position: -144px -88px; } #hippomundo .flag.flag-mc { background-position: -160px -88px; } #hippomundo .flag.flag-md { background-position: -176px -88px; } #hippomundo .flag.flag-me { background-position: -192px -88px; } #hippomundo .flag.flag-mg { background-position: -208px -88px; } #hippomundo .flag.flag-mh { background-position: -224px -88px; } #hippomundo .flag.flag-mk { background-position: -240px -88px; } #hippomundo .flag.flag-ml { background-position: 0 -99px; } #hippomundo .flag.flag-mm { background-position: -16px -99px; } #hippomundo .flag.flag-mn { background-position: -32px -99px; } #hippomundo .flag.flag-mo { background-position: -48px -99px; } #hippomundo .flag.flag-mp { background-position: -64px -99px; } #hippomundo .flag.flag-mq { background-position: -80px -99px; } #hippomundo .flag.flag-mr { background-position: -96px -99px; } #hippomundo .flag.flag-ms { background-position: -112px -99px; } #hippomundo .flag.flag-mt { background-position: -128px -99px; } #hippomundo .flag.flag-mu { background-position: -144px -99px; } #hippomundo .flag.flag-mv { background-position: -160px -99px; } #hippomundo .flag.flag-mw { background-position: -176px -99px; } #hippomundo .flag.flag-mx { background-position: -192px -99px; } #hippomundo .flag.flag-my { background-position: -208px -99px; } #hippomundo .flag.flag-mz { background-position: -224px -99px; } #hippomundo .flag.flag-na { background-position: -240px -99px; } #hippomundo .flag.flag-nc { background-position: 0 -110px; } #hippomundo .flag.flag-ne { background-position: -16px -110px; } #hippomundo .flag.flag-nf { background-position: -32px -110px; } #hippomundo .flag.flag-ng { background-position: -48px -110px; } #hippomundo .flag.flag-ni { background-position: -64px -110px; } #hippomundo .flag.flag-nl { background-position: -80px -110px; } #hippomundo .flag.flag-no { background-position: -96px -110px; } #hippomundo .flag.flag-np { background-position: -112px -110px; } #hippomundo .flag.flag-nr { background-position: -128px -110px; } #hippomundo .flag.flag-nu { background-position: -144px -110px; } #hippomundo .flag.flag-nz { background-position: -160px -110px; } #hippomundo .flag.flag-om { background-position: -176px -110px; } #hippomundo .flag.flag-pa { background-position: -192px -110px; } #hippomundo .flag.flag-pe { background-position: -208px -110px; } #hippomundo .flag.flag-pf { background-position: -224px -110px; } #hippomundo .flag.flag-pg { background-position: -240px -110px; } #hippomundo .flag.flag-ph { background-position: 0 -121px; } #hippomundo .flag.flag-pk { background-position: -16px -121px; } #hippomundo .flag.flag-pl { background-position: -32px -121px; } #hippomundo .flag.flag-pm { background-position: -48px -121px; } #hippomundo .flag.flag-pn { background-position: -64px -121px; } #hippomundo .flag.flag-pr { background-position: -80px -121px; } #hippomundo .flag.flag-ps { background-position: -96px -121px; } #hippomundo .flag.flag-pt { background-position: -112px -121px; } #hippomundo .flag.flag-pw { background-position: -128px -121px; } #hippomundo .flag.flag-py { background-position: -144px -121px; } #hippomundo .flag.flag-qa { background-position: -160px -121px; } #hippomundo .flag.flag-re { background-position: -176px -121px; } #hippomundo .flag.flag-ro { background-position: -192px -121px; } #hippomundo .flag.flag-rs { background-position: -208px -121px; } #hippomundo .flag.flag-ru { background-position: -224px -121px; } #hippomundo .flag.flag-rw { background-position: -240px -121px; } #hippomundo .flag.flag-sa { background-position: 0 -132px; } #hippomundo .flag.flag-sb { background-position: -16px -132px; } #hippomundo .flag.flag-sc { background-position: -32px -132px; } #hippomundo .flag.flag-scotland { background-position: -48px -132px; } #hippomundo .flag.flag-sd { background-position: -64px -132px; } #hippomundo .flag.flag-se { background-position: -80px -132px; } #hippomundo .flag.flag-sg { background-position: -96px -132px; } #hippomundo .flag.flag-sh { background-position: -112px -132px; } #hippomundo .flag.flag-si { background-position: -128px -132px; } #hippomundo .flag.flag-sk { background-position: -144px -132px; } #hippomundo .flag.flag-sl { background-position: -160px -132px; } #hippomundo .flag.flag-sm { background-position: -176px -132px; } #hippomundo .flag.flag-sn { background-position: -192px -132px; } #hippomundo .flag.flag-so { background-position: -208px -132px; } #hippomundo .flag.flag-somaliland { background-position: -224px -132px; } #hippomundo .flag.flag-sr { background-position: -240px -132px; } #hippomundo .flag.flag-ss { background-position: 0 -143px; } #hippomundo .flag.flag-st { background-position: -16px -143px; } #hippomundo .flag.flag-sv { background-position: -32px -143px; } #hippomundo .flag.flag-sx { background-position: -48px -143px; } #hippomundo .flag.flag-sy { background-position: -64px -143px; } #hippomundo .flag.flag-sz { background-position: -80px -143px; } #hippomundo .flag.flag-tc { background-position: -96px -143px; } #hippomundo .flag.flag-td { background-position: -112px -143px; } #hippomundo .flag.flag-tf { background-position: -128px -143px; } #hippomundo .flag.flag-tg { background-position: -144px -143px; } #hippomundo .flag.flag-th { background-position: -160px -143px; } #hippomundo .flag.flag-tibet { background-position: -176px -143px; } #hippomundo .flag.flag-tj { background-position: -192px -143px; } #hippomundo .flag.flag-tk { background-position: -208px -143px; } #hippomundo .flag.flag-tl { background-position: -224px -143px; } #hippomundo .flag.flag-tm { background-position: -240px -143px; } #hippomundo .flag.flag-tn { background-position: 0 -154px; } #hippomundo .flag.flag-to { background-position: -16px -154px; } #hippomundo .flag.flag-tr { background-position: -32px -154px; } #hippomundo .flag.flag-tt { background-position: -48px -154px; } #hippomundo .flag.flag-tv { background-position: -64px -154px; } #hippomundo .flag.flag-tw { background-position: -80px -154px; } #hippomundo .flag.flag-tz { background-position: -96px -154px; } #hippomundo .flag.flag-ua { background-position: -112px -154px; } #hippomundo .flag.flag-ug { background-position: -128px -154px; } #hippomundo .flag.flag-um { background-position: -144px -154px; } #hippomundo .flag.flag-us { background-position: -160px -154px; } #hippomundo .flag.flag-uy { background-position: -176px -154px; } #hippomundo .flag.flag-uz { background-position: -192px -154px; } #hippomundo .flag.flag-va { background-position: -208px -154px; } #hippomundo .flag.flag-vc { background-position: -224px -154px; } #hippomundo .flag.flag-ve { background-position: -240px -154px; } #hippomundo .flag.flag-vg { background-position: 0 -165px; } #hippomundo .flag.flag-vi { background-position: -16px -165px; } #hippomundo .flag.flag-vn { background-position: -32px -165px; } #hippomundo .flag.flag-vu { background-position: -48px -165px; } #hippomundo .flag.flag-wales { background-position: -64px -165px; } #hippomundo .flag.flag-wf { background-position: -80px -165px; } #hippomundo .flag.flag-ws { background-position: -96px -165px; } #hippomundo .flag.flag-xk { background-position: -112px -165px; } #hippomundo .flag.flag-ye { background-position: -128px -165px; } #hippomundo .flag.flag-yt { background-position: -144px -165px; } #hippomundo .flag.flag-za { background-position: -160px -165px; } #hippomundo .flag.flag-zanzibar { background-position: -176px -165px; } #hippomundo .flag.flag-zm { background-position: -192px -165px; } #hippomundo .flag.flag-zw { background-position: -208px -165px; } .sideMenu { position: fixed; top: 50%; transform: translateY(-50%); right: -415px; width: 465px; min-height: 0; max-height: 95%; transition: right 0.15s ease-in-out; overflow: hidden; z-index: auto 1000; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; justify-content: flex-start; z-index: 100; } .sideMenu.sideMenuActive { right: 0 !important; } .sideMenu:hover { right: 0; } .sideMenu .menuButton { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; width: 50px; } .sideMenu .menuButton .hamburgerIcon { background: linear-gradient(#ffa245, #f77c00); height: 50px; width: 50px; padding: 15px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .sideMenu .menuButton .hamburgerIcon span { display: block; position: relative; height: 3px; width: 20px; background: #fff; border-radius: 9px; opacity: 1; left: 0; } .sideMenu .menuButton .hamburgerIcon span:nth-child(1) { top: 0px; } .sideMenu .menuButton .hamburgerIcon span:nth-child(2) { top: 5px; } .sideMenu .menuButton .hamburgerIcon span:nth-child(3) { top: 10px; } .sideMenu .menuHolder { box-sizing: border-box; width: 415px; background: linear-gradient(270deg, #fff 0%, #f5fafe 100%); border: 2px solid #d0e7fc; border-radius: 20px 0 0 20px; padding: 20px; overflow-y: auto; min-height: 0; } .sideMenu .menuHolder aside { display: block !important; } .sideMenu .menuHolder aside h2, .sideMenu .menuHolder aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .sideMenu .menuHolder aside a.content-filter-activator { margin: 0 -15px 2px -15px; padding: 0 0 15px 0; position: relative; clear: both; width: calc(100% - 25px); cursor: pointer; } .sideMenu .menuHolder aside h2 span, .sideMenu .menuHolder aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator span, .contentFilterHolder:not(.selected) .title h2 .sideMenu .menuHolder aside a.content-filter-activator span { padding: 15px; color: #002663; font-family: "Bree Serif"; font-weight: 400; font-size: 20px; line-height: 28px; display: inline-block; } .sideMenu .menuHolder aside ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .sideMenu .menuHolder aside ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .sideMenu .menuHolder aside ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .sideMenu .menuHolder aside ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .sideMenu .menuHolder aside .list-tabs { margin: 0 0 15px -15px; } .sideMenu .menuHolder aside .list-tabs ul { display: inline-block; position: relative; clear: both; } .sideMenu .menuHolder aside .list-tabs ul li { list-style-type: none; display: inline-block; float: left; clear: left; line-height: 28px; margin: 0; padding: 5px 10px 5px 45px; width: 100%; } .sideMenu .menuHolder aside .list-tabs ul li a { text-decoration: none; color: #002663; } .sideMenu .menuHolder aside .list-tabs ul li.active, .sideMenu .menuHolder aside .list-tabs ul li:hover { background-color: #0c74d5; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; } .sideMenu .menuHolder aside .list-tabs ul li.active a, .sideMenu .menuHolder aside .list-tabs ul li:hover a { text-decoration: none; color: #fff; } .sideMenu .menuHolder aside .list-tabs ul li.user-not-logged-in { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } .sideMenu .menuHolder aside .list-tabs ul li:before { content: '\f053'; margin-left: 15px; } .sideMenu .menuHolder aside .list-tabs ul li.active:before, .sideMenu .menuHolder aside .list-tabs ul li:hover:before { color: #fff; } .sideMenu .menuHolder aside .list-tabs ul li.user-not-logged-in:hover { background-color: transparent; background-image: none; cursor: default; } .sideMenu .menuHolder aside .list-tabs ul li.user-not-logged-in:hover a { color: #002663; text-decoration: none; cursor: default; } .sideMenu .menuHolder aside .list-tabs ul li.user-not-logged-in:before { color: #0c74d5; } .sideMenu .menuHolder aside .aside-content.aside-content-info { background-color: transparent; } .sideMenu .menuHolder aside .aside-content.aside-content-info tr.head th { padding: 0 0 5px 0; } .sideMenu .menuHolder aside .aside-content.aside-content-info tr.head th i.fa { color: #0c74d5; font-size: 16px; } .sideMenu .menuHolder aside .aside-content.aside-content-info tr td { padding: 0 0 10px 0; } .sideMenu .menuHolder aside .aside-content.notactive { /*display: none;*/ } .sideMenu .menuHolder aside .aside-content.active { display: block; } .sideMenu .menuHolder aside .aside-content.categories label { font-weight: 400; } .sideMenu .menuHolder label { font-size: 12px !important; } .sideMenu .menuHolder input[type="checkbox"] { margin-right: 10px; } .marketplace-topx .title--homepage { padding-left: 40px; } .marketplace-topx .background { background-color: #fff; border-radius: 0 0 20px 20px; margin-bottom: 30px; padding: 40px 20px; } .marketplace-topx .background--homepage { border-radius: 20px 20px; } .marketplace-topx.bottom-margin { margin-bottom: 40px !important; } .marketplace-topx .row.result-container { margin-bottom: 0; } .marketplace-topx .marketplace-topx-results { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .google-container { display: block; } .google-container--size--a { max-width: 100%; } .google-container--size--b { max-width: 100%; } .google-container--main-navigation { float: right; margin-bottom: 10px; text-align: right; } .google-container--center { margin: 0 auto; text-align: center; } .google-container--margin-top { margin-top: 15px; } @media only screen and (max-width: 992px) { .google-container--margin-top-p { margin-top: 15px; } } .google-container--margin-bottom { margin-bottom: 15px; } .google-container--databasedetail { margin: 0 auto; } @media screen and (min-width: 1224px) { .google-container--databasedetail { position: absolute; bottom: -265px; } } .google-container * { max-width: 100%; } .kwpntv--livestream { margin-bottom: 30px; } .kwpntv--livestream--video-wrapper { padding: 0; } .kwpntv--livestream--video-wrapper--video-container { background-color: transparent; text-align: center; } @media screen and (min-width: 1224px) { .kwpntv--livestream--video-wrapper--video-container { border-radius: 20px; } } .kwpntv--livestream--video-wrapper--video-container h3 { margin-bottom: 0; color: #002663; } .kwpntv--livestream--video-wrapper--video-container a.tvlink { display: none; text-decoration: none; } .kwpntv--livestream--video-wrapper--video-container--loaded { background-color: #002663; } .kwpntv--livestream--video-wrapper--video-container--loaded h3 { color: #fff; } .kwpntv--livestream--video-wrapper--video-container--loaded a.tvlink { display: block; color: #fff; font-size: 10pt; } .kwpntv--category-topx .title--homepage { padding-left: 40px; } .kwpntv--category-topx .background { background-color: #fff; border-radius: 0 0 20px 20px; margin-bottom: 30px; padding: 40px 20px; } .kwpntv--category-topx .background--homepage { border-radius: 20px 20px; } .kwpntv--category-topx.bottom-margin { margin-bottom: 40px !important; } .kwpntv--category-topx .result-container a { display: inline-block; } .kwpntv--category-topx .result-container a .video { margin-bottom: 40px; } .kwpntv--category-topx .result-container a .video .embed-responsive { display: inline; } .kwpntv--category-topx .result-container a .video .embed-responsive img { width: 100%; max-width: 100%; max-height: 100%; } .kwpntv--category-topx .result-container a .video .embed-title { height: 60px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #e3f0fd; background-color: #f5fafe; border-radius: 0 0 10px 10px; padding: 5px 10px; } .kwpntv--category-topx .result-container a .video .embed-title h3 { font-size: 14pt; line-height: 14pt; height: 60px; overflow: hidden; text-overflow: ellipsis; } .kwpntv--category-topx .result-container a .video .duration { position: absolute; padding: 0 6px; background-color: #f5fafe; color: #002663; top: 0; right: 15px; font-size: 10pt; border-radius: 0 0 0 10px; } .kwpntv--category-topx .result-container a:hover { text-decoration: none; } .kwpntv--category-topx .result-container a:hover .video .embed-title { background-color: #e3f0fd; } @media screen and (min-width: 1224px) { .kwpntv--category-topx .result-container.kwpntv-news-video-results { margin: 0 -15px; } } .kwpntv--category .background { display: inline-block; } .kwpntv--category--results a { display: inline-block; } .kwpntv--category--results a .video { margin-bottom: 40px; } .kwpntv--category--results a .video .embed-responsive img { width: 100%; max-width: 100%; } .kwpntv--category--results a .video .embed-title { height: 60px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #e3f0fd; background-color: #f5fafe; border-radius: 0 0 10px 10px; padding: 5px 10px; } .kwpntv--category--results a .video .embed-title h3 { font-size: 14pt; line-height: 14pt; height: 60px; overflow: hidden; text-overflow: ellipsis; } .kwpntv--category--results a .video .duration { position: absolute; padding: 0 6px; background-color: #f5fafe; color: #002663; top: 0; right: 15px; font-size: 10pt; border-radius: 0 0 0 10px; } .kwpntv--category--results a:hover { text-decoration: none; } .kwpntv--category--results a:hover .video .embed-title { background-color: #e3f0fd; } .kwpntv--category--results .pagination { position: relative; display: inline-block; text-align: center; width: 100%; } .kwpntv--category--results .pagination button { margin-right: 5px; border-radius: 5px; background-color: #f77c00; color: #fff; border: 0; } .kwpntv--category--results .pagination button.active { background-color: #002663; } .kwpntv--category--results .pagination button:last-of-type { margin-right: 0; } .kwpntv--category--results .pagination span { padding: 0 10px; } .breederinfo-panel .background { padding: 0; } .breederinfo-panel h2 a, .breederinfo-panel .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator a, .contentFilterHolder:not(.selected) .title h2 .breederinfo-panel a.content-filter-activator a { text-decoration: none; font-size: 34px; line-height: 28px; font-family: "Bree Serif"; color: #002663; font-weight: 400; } .breederinfo-panel h2 a i.fa, .breederinfo-panel .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator a i.fa, .contentFilterHolder:not(.selected) .title h2 .breederinfo-panel a.content-filter-activator a i.fa { color: #f77c00; padding-left: 10px; font-size: 12px; display: inline-block; vertical-align: middle; } .breederinfo-panel h2 a i.fa.rotated, .breederinfo-panel .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator a i.fa.rotated, .contentFilterHolder:not(.selected) .title h2 .breederinfo-panel a.content-filter-activator a i.fa.rotated { transform: rotate(180deg); } .breederinfo-panel input[type=checkbox] { box-shadow: none; } .breederinfo-panel #quick-links-loader { float: left; color: #f77c00; } .breederinfo-panel #quick-links { margin-top: 20px; } .breederinfo-panel #quick-links a { font-size: 12px; line-height: 12px; padding: 5px; white-space: nowrap; position: relative; display: block; float: left; color: #f77c00; background-color: #e3f0fd; border: 1px solid #f77c00; border-radius: 5px; margin-left: 10px; text-decoration: none; margin-top: 10px; } .breederinfo-panel #quick-links a:hover { text-decoration: none; background-color: #f77c00; color: white; } .breederinfo-panel .error div span { display: inline-block; width: 100%; color: red; } .breederinfo-panel .form-end { display: flex; } .breederinfo-panel .form-end button { order: 1; } .breederinfo-panel .form-end div { order: 2; } .breederinfo-panel .form-end div .grecaptcha-badge { visibility: hidden; } .breederinfo-panel .confirm-text { padding-top: 30px; color: #0c74d5; } #breeder-horses .background, #breeder-products .background { padding: 0 !important; } #breeder-horsenews-items .date { color: #3a9af4; display: inline-block; font-size: 10px; line-height: 10px; margin-right: 10px; float: left; padding-bottom: 0; } #breeder-horsenews-items .horses { display: inline-block; float: left; padding: 0; font-size: 10px; line-height: 10px; } #breeder-horsenews-items .horses .horse { padding: 0; font-size: 10px; line-height: 10px; } #breeder-horsenews-items .horses .horse a { padding: 0; font-size: 10px; line-height: 10px; margin-right: 10px; color: #f77c00; text-decoration: none; } #breeder-horsenews-items .title { display: inline-block; width: 100%; float: left; margin-bottom: 15px; } #breeder-performance-items-approvedstallions-table img { width: 100px; border-radius: 5px; } @media screen and (min-width: 992px) { #breeder-performance-items-approvedstallions-table img { width: 150px; } } #stallion-advice #stallion-advice-content #step-0 .topButton { top: -70px; position: absolute; right: 0; } @media screen and (max-width: 767px) { #stallion-advice #stallion-advice-content #step-0 .topButton { display: none; } } #stallion-advice #stallion-advice-content #step-1 .row { margin-bottom: 30px; } #stallion-advice #stallion-advice-content #step-1 span.input-group-btn { position: absolute; right: 0; top: 2px; } @media screen and (max-width: 767px) { #stallion-advice #stallion-advice-content #step-1 span.input-group-btn { position: absolute; top: 2px; } } #stallion-advice #stallion-advice-content #step-1 span.input-group-btn .btn-default { outline: none; border: none; z-index: 100; background: none; } #stallion-advice #stallion-advice-content #step-1 span.input-group-btn .btn-default:hover, #stallion-advice #stallion-advice-content #step-1 span.input-group-btn .btn-default:focus, #stallion-advice #stallion-advice-content #step-1 span.input-group-btn .btn-default:visited { background: none; } #stallion-advice #stallion-advice-content #step-1 span.input-group-btn .btn-default:active { background: none; -webkit-box-shadow: none; box-shadow: none; } #stallion-advice #stallion-advice-content #step-1 #SearchStallion { border: 0; } #stallion-advice #stallion-advice-content #step-1 .submitBtn i.fa { font-size: 1em; margin-right: 0; } #stallion-advice #stallion-advice-content #step-1 #specific-match, #stallion-advice #stallion-advice-content #step-1 #specific-match a { font-size: 10pt; } #stallion-advice #stallion-advice-content #step-1 .breedingdirection-warningtext { background-color: #d0e7fc; border-radius: 20px; padding: 10px 20px; } #stallion-advice #stallion-advice-content #step-1 .breedingdirection-warningtext p { font-size: 14px; margin: 0; } #stallion-advice #stallion-advice-content #step-2 #SearchStallion { border: 0; } #stallion-advice #stallion-advice-content #step-2 #StallionSearchResults { font-size: 10pt; } #stallion-advice #stallion-advice-content #step-2 #StallionSearchResults p { font-size: 10pt; line-height: 10pt; } #stallion-advice #stallion-advice-content #step-2 #StallionSearchResults div.studoption { font-size: 10pt; cursor: pointer; } #stallion-advice #stallion-advice-content #step-2 #StallionSearchResults div.studoption:nth-child(even) { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #stallion-advice #stallion-advice-content #step-2 #StallionSearchResults div.studoption:nth-child(odd) { background-image: none; } #stallion-advice #stallion-advice-content #step-2 #StallionSearchResults div.studoption:hover { background-image: none; background-color: #e3f0fd; } #stallion-advice #stallion-advice-content #step-2 #StallionSelected .form-inline { margin-bottom: 20px; clear: both; } #stallion-advice #stallion-advice-content #step-2 #StallionSelected .selectedStallion { font-size: 10pt; } #stallion-advice #stallion-advice-content #step-2 #StallionSelected .selectedStallion i.fa { cursor: pointer; } #stallion-advice #stallion-advice-content #step-2 .stalliontext { background-color: #d0e7fc; border-radius: 20px; padding: 10px 20px; } #stallion-advice #stallion-advice-content #step-2 .stalliontext p { font-size: 14px; margin: 0; } #stallion-advice #stallion-advice-content #step-2 .submitBtn i.fa { font-size: 1em; margin-right: 0; } #stallion-advice #stallion-advice-content #step-3 .filter-container { background-color: #f5fafe; margin-bottom: 40px; padding: 20px; border-radius: 20px; } #stallion-advice #stallion-advice-content #step-3 .filter-container #resultcounter { margin-left: 10px; padding: 2px 10px; background: linear-gradient(270deg, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; } #stallion-advice #stallion-advice-content #step-3 .filter-container .form-control { margin-bottom: 20px; min-width: 100px; width: 100%; } #stallion-advice #stallion-advice-content #step-3 .filter-container ul.dropdown-menu { margin-left: 15px; } #stallion-advice #stallion-advice-content #step-3 .filter-container ul.dropdown-menu span { text-transform: uppercase; font-size: 14px; line-height: 20px; } #stallion-advice #stallion-advice-content #step-3 .filter-container ul.dropdown-menu a input { margin-right: 10px; } #stallion-advice #stallion-advice-content #step-3 .filter-container .active-filter { clear: left; } #stallion-advice #stallion-advice-content #step-3 .filter-container .active-filter #active-filter span { font-weight: bold; display: block; font-size: 10pt; padding: 0; margin: 0; line-height: normal; } #stallion-advice #stallion-advice-content #step-3 .filter-container .active-filter #active-filter span.filter { font-weight: normal; } #stallion-advice #stallion-advice-content #step-3 .legend div, #stallion-advice #stallion-advice-content #step-3 .legend div a { font-size: 10pt; } #stallion-advice #stallion-advice-content #step-3 .headerbtn { background-color: transparent; color: #f77c00; border: 0; font-family: "Bree Serif"; border-bottom: 2px solid transparent; } #stallion-advice #stallion-advice-content #step-3 .headerbtn i.fa { color: #f77c00; margin-right: 5px; } #stallion-advice #stallion-advice-content #step-3 .headerbtn:hover { border-bottom: 2px solid #f77c00; } #stallion-advice #stallion-advice-content #step-3 #print-advice { float: right; } @media screen and (max-width: 767px) { #stallion-advice #stallion-advice-content #step-3 #print-advice { float: none; } } #stallion-advice #stallion-advice-content #step-3 .compare-popover { /* display: none;*/ position: absolute; z-index: 10000; left: 0; top: 0; background-color: #f77c00; border-radius: 10px; padding: 10px; } #stallion-advice #stallion-advice-content #step-3 .compare-popover .title { display: inline-block; color: white; font-family: "Bree Serif"; width: 100%; } #stallion-advice #stallion-advice-content #step-3 .compare-popover .title i.compare-popover-close { float: right; color: white; cursor: pointer; } #stallion-advice #stallion-advice-content #step-3 .compare-popover .list span { display: inline-block; color: white; width: 100%; font-size: 10pt; text-transform: uppercase; } #stallion-advice #stallion-advice-content #step-3 .compare-popover button { display: inline-block; width: 100%; border-radius: 10px; background-color: white; color: #f77c00; font-family: "Bree Serif"; border: 1px solid #f77c00; } #stallion-advice #stallion-advice-content #step-3 .compare-popover .error { color: #ffa245; text-transform: uppercase; font-size: 10pt; text-align: center; } #stallion-advice #stallion-advice-content #step-3 .compare-popover:before { content: ' '; height: 0; position: absolute; width: 0; left: -18px; border: 10px solid transparent; border-right-color: #f77c00; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr { background-image: none; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr:nth-child(even) { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr:nth-child(odd) { background-image: none; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr th { font-size: 12px; padding: 10px 10px 10px 10px; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr th.nowrap { white-space: nowrap; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td { font-size: 12px; padding: 10px 10px 10px 10px; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td.compare { display: none; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td.report { width: 100px; min-width: 95px; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td.nowrap { white-space: nowrap; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td.center { text-align: center; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td.value-alert { text-decoration: underline; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.sort-value { visibility: hidden; position: absolute; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td a.stallion-link { font-size: 12px; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.indicator { font-weight: bold; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.indicator.dark-green { color: darkgreen; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.indicator.light-green { color: darkseagreen; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.indicator.orange { color: orange; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.indicator.light-red { color: lightcoral; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td span.indicator.dark-red { color: darkred; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td button.open-pdf { background-color: transparent; border: none; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td button.open-pdf i.fa { color: #f77c00; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td button.open-pdf span { color: #f77c00; font-size: 10px; line-height: 10px; display: inline-block; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td button.open-pdf:hover i.fa, #stallion-advice #stallion-advice-content #step-3 #stallionsTable tr td button.open-pdf:hover span { color: #0c74d5; } #stallion-advice #stallion-advice-content #step-3 #stallionsTable > thead > tr { background-image: none !important; border-bottom: 3px solid #002663; } #stallion-advice #stallion-advice-content .modal #compare-content table tr th { padding: 10px 5px; color: #002663; text-transform: uppercase; font-size: 12px; line-height: 15px; margin: auto; height: auto; min-height: 30px; vertical-align: top; font-weight: bold; } #stallion-advice #stallion-advice-content .modal #compare-content table tr td { padding: 10px 5px; color: #002663; text-transform: uppercase; font-size: 12px; line-height: 15px; margin: auto; height: auto; min-height: 30px; vertical-align: top; } #stallion-advice #stallion-advice-content .modal #compare-content table tr td.center { text-align: center; } #stallion-advice #stallion-advice-content .modal #compare-content table tr td img.photo { width: 85px; max-width: 100%; border-radius: 10px; } #stallion-advice #stallion-advice-content .modal #compare-content table tr:nth-child(odd) { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #stallion-advice #stallion-advice-content .modal #compare-content table tr:first-child, #stallion-advice #stallion-advice-content .modal #compare-content table tr:nth-child(even) { background-image: none; } #stallion-advice-aside-info #stallion-advice-aside-breedingdirection-mare { font-size: 10pt; } .col-centered { float: none; margin: 0 auto; } .carousel-multi { height: 370px; } .carousel-control { width: 0px; } .carousel-control.left, .carousel-control.right { margin-left: 0; margin-right: 0; background-image: none; opacity: 1; } .carousel-control > a > span.glyphicon-chevron-left, .carousel-control > a > span.glyphicon-chevron-right { background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); padding: 17px; color: white; font-size: 12px; text-shadow: none; } @media screen and (min-width: 768px) { .carousel-control > a > span.glyphicon-chevron-left, .carousel-control > a > span.glyphicon-chevron-right { width: 45px; height: 45px; } } .carousel-control > a .glyphicon-chevron-left { border-radius: 20px 20px 20px 0; left: 50%; margin-left: -10px; } .carousel-control > a .glyphicon-chevron-right { border-radius: 20px 20px 0 20px; right: 50%; margin-right: -10px; } .carousel-col { position: relative; min-height: 1px; padding: 15px 15px 5px; float: left; } .active > div.carousel-col { display: none; } .active > div.carousel-col:first-child { display: block; } .block.clickable { cursor: pointer; } /*xs*/ @media (max-width: 500px) { .carousel-inner .active.left { left: -100%; } .carousel-inner .active.right { left: 100%; } .carousel-inner .next { left: 100%; } .carousel-inner .prev { left: -100%; } .carousel-col { width: 100%; } } /*sm*/ @media (min-width: 501px) and (max-width: 991px) { .carousel-inner .active.left { left: -50%; } .carousel-inner .active.right { left: 50%; } .carousel-inner .next { left: 50%; } .carousel-inner .prev { left: -50%; } .carousel-col { width: 50%; } .active > div:first-child + div { display: block; } } /*md*/ @media (min-width: 992px) and (max-width: 1199px) { .carousel-inner .active.left { left: -33%; } .carousel-inner .active.right { left: 33%; } .carousel-inner .next { left: 33%; } .carousel-inner .prev { left: -33%; } .carousel-col { width: 33%; } .active > div:first-child + div { display: block; } .active > div:first-child + div + div { display: block; } } /*lg*/ @media (min-width: 1200px) { .carousel-inner .active.left { left: -25%; } .carousel-inner .active.right { left: 25%; } .carousel-inner .next { left: 25%; } .carousel-inner .prev { left: -25%; } .carousel-col { width: 25%; } .active > div:first-child + div { display: block; } .active > div:first-child + div + div { display: block; } .active > div:first-child + div + div + div { display: block; } } @media screen and (min-width: 1024px) { .homepage-header { margin-bottom: 40px; } } .homepage-header .banner { box-shadow: 0 2px 50px -20px rgba(0, 38, 99, 0.3); } .homepage-header .banner .image { height: 190px; border-radius: 15px 15px 0 0; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } .homepage-header .banner .divider { width: 100%; height: 10px; background: #ffa245; } .homepage-header .banner .divider div { height: 10px; background: #f77c00; } .homepage-header .banner .bottom { background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; height: 165px; } .homepage-header .banner .bottom .text { height: 110px; padding: 20px; line-height: 28px; position: relative; } .homepage-header .banner .bottom .text .truncate-overflow { position: relative; max-height: calc(28px * 3); overflow: hidden; padding-right: 15px; /* space for ellipsis */ font-family: "Bree Serif"; font-size: 20px; } .homepage-header .banner .bottom .text .truncate-overflow::before { position: absolute; content: "..."; inset-block-end: 0; inset-inline-end: 0; } .homepage-header .banner .bottom .text .truncate-overflow::after { content: ""; position: absolute; inset-inline-end: 0; width: 15px; height: 28px; background: white; } .homepage-header .banner .bottom .link { height: 55px; padding: 0 20px; } .homepage-header .first-banner-container .banner .image { height: 350px; } .homepage-header .first-banner-container .banner .bottom { height: 180px; } .homepage-header .first-banner-container .banner .bottom .text { height: 125px; line-height: 32px; } .homepage-header .first-banner-container .banner .bottom .text .truncate-overflow { height: 60px; margin-top: 20px; font-size: 24px; } .homepage-header .first-banner-container .banner .bottom .text .truncate-overflow::before { line-height: 35px; } .homepage-header .first-banner-container .banner .bottom .text .truncate-overflow::after { height: 32px; } .homepage-header .first-banner-container .banner .bottom .link { height: 55px; } .homepage-header .consecutive-banners-container { margin-bottom: 24px; } .homepage-header .consecutive-banners-container .banner .image { height: 180px; } .homepage-header .consecutive-banners-container .banner .bottom { height: 130px; } .homepage-header .consecutive-banners-container .banner .bottom .text { height: 90px; } .homepage-header .consecutive-banners-container .banner .bottom .text .truncate-overflow { max-height: calc(32px * 2); font-size: 17px; line-height: 20px; } .homepage-header .consecutive-banners-container .banner .bottom .text .truncate-overflow::before { line-height: 27px; } .homepage-header .consecutive-banners-container .banner .bottom .text .truncate-overflow::after { height: 32px; } .homepage-header .consecutive-banners-container .banner .bottom .link { height: 55px; } .homepage-header .carousel { margin-bottom: 30px; } .homepage-header .carousel .carousel-control.left, .homepage-header .carousel .carousel-control.right { background: none; opacity: 1; } .homepage-header .carousel .carousel-control.left .glyphicon-chevron-left, .homepage-header .carousel .carousel-control.left .glyphicon-chevron-right, .homepage-header .carousel .carousel-control.right .glyphicon-chevron-left, .homepage-header .carousel .carousel-control.right .glyphicon-chevron-right { background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); padding: 17px; color: white; font-size: 12px; text-shadow: none; top: 95px; } @media screen and (min-width: 768px) { .homepage-header .carousel .carousel-control.left .glyphicon-chevron-left, .homepage-header .carousel .carousel-control.left .glyphicon-chevron-right, .homepage-header .carousel .carousel-control.right .glyphicon-chevron-left, .homepage-header .carousel .carousel-control.right .glyphicon-chevron-right { width: 45px; height: 45px; } } .homepage-header .carousel .carousel-control.left .glyphicon-chevron-left, .homepage-header .carousel .carousel-control.right .glyphicon-chevron-left { border-radius: 20px 20px 20px 0; left: 50%; margin-left: -10px; } .homepage-header .carousel .carousel-control.left .glyphicon-chevron-right, .homepage-header .carousel .carousel-control.right .glyphicon-chevron-right { border-radius: 20px 20px 0 20px; right: 50%; margin-right: -10px; } .homepage-header .direct-links { background-color: white; margin: 0 -30px; padding: 20px 50px; box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); } @media screen and (min-width: 768px) { .homepage-header .direct-links { padding-left: 20px; padding-right: 0; border-radius: 20px; background-color: #fff; box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2), 0 2px 50px -20px rgba(0, 38, 99, 0.3); margin-left: 10px; margin-right: 10px; } } @media screen and (min-width: 1024px) { .homepage-header .direct-links { margin: 0; padding-left: 20px; padding-right: 0; min-height: 195px; width: 100%; border-radius: 20px; background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2), 0 2px 50px -20px rgba(0, 38, 99, 0.3); } } @media screen and (min-width: 1224px) { .homepage-header .direct-links { padding-top: 40px; } } .homepage-header .direct-links ul { margin: 0; padding: 0; list-style-type: none; } @media screen and (min-width: 1024px) { .homepage-header .direct-links ul { -moz-column-count: 2; -moz-column-gap: 20px; -webkit-column-count: 2; -webkit-column-gap: 20px; column-count: 2; column-gap: 20px; } } @media screen and (min-width: 1224px) { .homepage-header .direct-links ul { -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; } } .homepage-header .direct-links ul li { font-size: 14px; letter-spacing: 0; line-height: 38px; } @media screen and (min-width: 1024px) { .homepage-header .direct-links ul li { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } .homepage-header .direct-links ul li a { color: #002663; font-size: inherit; } .homepage-header .direct-links ul li a img { margin-right: 10px; } .homepage-header .direct-links ul li a img path { fill: #0c74d5; } #homepage-events { margin-left: -15px; margin-right: -15px; padding-top: 30px; border-top: 2px solid #e3f0fd; background: #fff; margin-bottom: 30px; } @media screen and (min-width: 768px) { #homepage-events { border-top: none; background: none; } } #homepage-events .events { padding-left: 0; padding-right: 0; } @media screen and (min-width: 768px) { #homepage-events .events { border-radius: 20px; background-color: #FFFFFF; box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); padding: 40px 0 0 0; margin-bottom: 30px; } } @media screen and (min-width: 1024px) { #homepage-events .events { margin-left: 15px; } } #homepage-events .events h2, #homepage-events .events .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #homepage-events .events a.content-filter-activator { padding: 0 15px 0 50px; font-size: 26px; letter-spacing: 0; line-height: 34px; } @media screen and (min-width: 1024px) { #homepage-events .events h2, #homepage-events .events .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #homepage-events .events a.content-filter-activator { font-size: 32px; line-height: 42px; } } #homepage-events .events a.event { display: block; width: 100%; background: #fff; border-bottom: 2px solid #e3f0fd; padding: 0; } #homepage-events .events a.event:last-of-type { border-bottom: none; } #homepage-events .events a.event:nth-child(odd) { background-color: #fff; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } #homepage-events .events a.event:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #homepage-events .events a.event div { position: relative; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #homepage-events .events a.event div.event-date { padding: 22px 40px 0px 80px; font-size: 12px; font-weight: bold; letter-spacing: 0; line-height: 18px; } @media screen and (min-width: 1024px) { #homepage-events .events a.event div.event-date { line-height: 28px; } } #homepage-events .events a.event div.event-date:before { font-family: 'FontAwesome'; content: '\f017'; color: #0c74d5; font-size: 18px; font-weight: 400; min-width: 20px; display: inline-block; position: absolute; left: 50px; } #homepage-events .events a.event div.event-title { padding: 0px 40px 22px 80px; font-size: 16px; letter-spacing: 0; line-height: 28px; } #homepage-events .events a.event:hover { text-decoration: none; } #homepage-events .events .more-events { padding: 10px 40px 30px 50px; } @media screen and (min-width: 1024px) { #homepage-events .events .more-events { padding-top: 30px; } } #homepage-events .membership-info { background-color: #002663; padding-top: 40px; padding-bottom: 30px; margin-bottom: 30px; position: relative; } #homepage-events .membership-info .background { display: none; position: absolute; right: 0; bottom: 20px; z-index: 1; } #homepage-events .membership-info .text { position: relative; z-index: 2; } #homepage-events .membership-info .text * { color: #fff; } #homepage-events .membership-info .text h2, #homepage-events .membership-info .text .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #homepage-events .membership-info .text a.content-filter-activator { padding: 0 15px 0 40px; font-size: 26px; letter-spacing: 0; line-height: 34px; } @media screen and (min-width: 1024px) { #homepage-events .membership-info .text h2, #homepage-events .membership-info .text .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #homepage-events .membership-info .text a.content-filter-activator { font-size: 32px; line-height: 42px; margin-bottom: 20px; } } #homepage-events .membership-info .text ul { position: relative; margin: 0; padding: 0; list-style-type: none; display: block; width: 100%; } #homepage-events .membership-info .text ul li { display: block; width: 100%; padding-left: 75px; padding-right: 30px; margin-bottom: 15px; } #homepage-events .membership-info .text ul li:before { font-family: 'FontAwesome'; content: '\f00c'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 40px; } #homepage-events .membership-info .text a { text-decoration: underline; } #homepage-events .membership-info .text .become-member { margin-top: 40px; padding-left: 50px; } @media screen and (min-width: 1024px) { #homepage-events .membership-info .text .become-member { margin-bottom: 15px; } } @media screen and (min-width: 768px) { #homepage-events .membership-info { margin-top: 30px; border-radius: 20px; background: linear-gradient(0deg, #002663 0%, #00307D 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); margin-bottom: 30px; } } @media screen and (min-width: 1024px) { #homepage-events .membership-info { margin-top: 0; left: -45px; float: right; display: block; } #homepage-events .membership-info .background { display: block; } } #homepage-events .banners { width: 100%; text-align: center; } @media screen and (min-width: 1024px) { #homepage-events .banners { left: -45px; margin-bottom: 30px; width: auto; padding: 0; float: right; } } @media screen and (min-width: 1224px) { #homepage-events .banners { left: -90px; margin-bottom: 30px; width: auto; } } #homepage-events .banners .google-container { width: 300px; max-width: 100%; height: 250px; position: relative; display: inline-block !important; margin-left: 30px; } @media screen and (min-width: 1024px) { #homepage-events .banners .google-container { margin-left: 15px; } } #homepage-events .banners .google-container:first-of-type { margin-left: 0; } @media screen and (min-width: 1024px) { #homepage-events .banners .google-container { width: 270px; height: 225px; } } @media screen and (min-width: 1224px) { #homepage-events .banners .google-container { width: 300px; height: 250px; } } #latest-news { margin-bottom: 0; background-color: #f5fafe; padding: 30px; margin-left: -15px; margin-right: -15px; } @media screen and (min-width: 768px) { #latest-news { background-color: transparent; padding: 0 15px; margin-left: -15px; margin-right: -15px; margin-bottom: 30px; } } #latest-news h2, #latest-news .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #latest-news a.content-filter-activator { padding-left: 20px; } #latest-news .block .image { position: relative; height: 190px; border-radius: 15px 15px 0 0; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } #latest-news .block .image .date { position: absolute; bottom: 0; left: -1px; padding: 10px 15px; background-color: #fff; color: #002663; font-size: 10px; border-radius: 0 20px 0 0; border-left: 1px solid #e3f0fd; line-height: 18px; } #latest-news .block .image .date i.fa { font-size: 15px; color: #0c74d5; line-height: 18px; margin-right: 10px; } #latest-news .block .bottom { background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; height: 165px; } #latest-news .block .bottom .text { padding: 20px 20px 15px 20px; line-height: 28px; position: relative; } #latest-news .block .bottom .text div { font-family: "Bree Serif"; font-size: 20px; } #latest-news .block .bottom .subtext { padding: 0 20px; line-height: 28px; position: relative; } #latest-news .block .bottom .text .truncate-overflow, #latest-news .block .bottom .subtext .truncate-overflow { position: relative; max-height: calc(28px * 2); overflow: hidden; padding-right: 15px; /* space for ellipsis */ } #latest-news .block .bottom .text .truncate-overflow::before, #latest-news .block .bottom .subtext .truncate-overflow::before { position: absolute; content: "..."; inset-block-end: 0; inset-inline-end: 0; } #latest-news .block .bottom .text .truncate-overflow::after, #latest-news .block .bottom .subtext .truncate-overflow::after { content: ""; position: absolute; inset-inline-end: 0; width: 15px; height: 28px; background: white; } #latest-news .block:hover { text-decoration: none; } #latest-news .block:hover .bottom { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #latest-news .more-news { padding-left: 40px; padding-top: 10px; } @media screen and (min-width: 1024px) { #latest-news .more-news { padding-left: 0; } } @media (max-width: 500px) { #latest-news.show-next-item-phone .carousel-inner { width: 100vw; } #latest-news.show-next-item-phone .carousel-inner .item { width: calc(330px * 2); } #latest-news.show-next-item-phone .carousel-inner .item.next:not(.left) { left: 330px; } #latest-news.show-next-item-phone .carousel-inner .item.left:not(.next) { left: -330px; } #latest-news.show-next-item-phone .carousel-inner .item.prev:not(.right) { left: -330px; } #latest-news.show-next-item-phone .carousel-inner .item.right:not(.prev) { left: 330px; } #latest-news.show-next-item-phone .carousel-inner .item.active > div:first-child + div { display: block; } #latest-news.show-next-item-phone .carousel-inner .carousel-col { width: 50%; padding-left: 10px; padding-right: 10px; } } #latest-news .carousel-control .glyphicon-chevron-left, #latest-news .carousel-control .glyphicon-chevron-right { top: 95px; } .horses-for-sale { margin-bottom: 30px; } .horses-for-sale h2, .horses-for-sale .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .horses-for-sale a.content-filter-activator, .horses-for-sale .intro * { padding-left: 20px; } .horses-for-sale .more-adverts { padding-top: 10px; } .horses-for-sale .more-adverts-bottom { padding-left: 30px; padding-top: 10px; margin-top: 20px; } .horses-for-sale .col-centered { padding: 0; } .horses-for-sale .carousel { height: 330px; } .horses-for-sale .carousel .block .image { position: relative; height: 200px; border-radius: 15px 15px 0 0; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } .horses-for-sale .carousel .block .image .datesince { position: absolute; bottom: 0; left: -1px; padding: 10px 15px; background-color: #f5fafe; color: #002663; font-size: 10px; border-radius: 0 20px 0 0; border-left: 1px solid #e3f0fd; line-height: 18px; } .horses-for-sale .carousel .block .divider { height: 2px; background-color: white; } .horses-for-sale .carousel .block .bottom { position: relative; padding-top: 20px; background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; height: 130px; } .horses-for-sale .carousel .block .bottom .top { position: absolute; right: 20px; bottom: 20px; color: #ffa245; font-size: 12px; font-weight: bold; line-height: 30px; z-index: 10; } .horses-for-sale .carousel .block .bottom .top img.icon { margin-right: 5px; margin-top: -5px; width: 24px; } .horses-for-sale .carousel .block .bottom .name, .horses-for-sale .carousel .block .bottom .pedigree, .horses-for-sale .carousel .block .bottom .price, .horses-for-sale .carousel .block .bottom .location { position: relative; font-size: 12px; letter-spacing: 0; line-height: 30px; padding-left: 60px; padding-right: 20px; } .horses-for-sale .carousel .block .bottom .name.truncate-overflow, .horses-for-sale .carousel .block .bottom .pedigree.truncate-overflow, .horses-for-sale .carousel .block .bottom .price.truncate-overflow, .horses-for-sale .carousel .block .bottom .location.truncate-overflow { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .horses-for-sale .carousel .block .bottom .name img.icon, .horses-for-sale .carousel .block .bottom .pedigree img.icon, .horses-for-sale .carousel .block .bottom .price img.icon, .horses-for-sale .carousel .block .bottom .location img.icon { position: absolute; font-size: 15px; color: #0c74d5; left: 25px; top: 4px; } .horses-for-sale .carousel .block .bottom .name { font-weight: bold; } .horses-for-sale .carousel .block .bottom .price { font-weight: bold; color: #0c74d5; } .horses-for-sale .carousel .block:hover { text-decoration: none; } .horses-for-sale .carousel .block:hover .bottom { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .horses-for-sale .carousel .block.topadvert .divider { background-color: #ffa245; } .horses-for-sale .carousel .block.topadvert .bottom { background: #e3f0fd; } .horses-for-sale .carousel .block.horse-search .bottom .name, .horses-for-sale .carousel .block.horse-search .bottom .location { padding-left: 20px; } .horses-for-sale .carousel .carousel-control .glyphicon-chevron-left, .horses-for-sale .carousel .carousel-control .glyphicon-chevron-right { top: 100px; } .kwpntv-carousel { padding-top: 30px; padding-bottom: 30px; } .kwpntv-carousel.background { background-color: #fff; margin-left: -15px; margin-right: -15px; } .kwpntv-carousel.background > .row { padding-left: 15px; padding-right: 15px; } .kwpntv-carousel.bottom-margin { margin-bottom: 30px; } .kwpntv-carousel h3, .kwpntv-carousel p, .kwpntv-carousel .intro * { padding-left: 20px; } .kwpntv-carousel h3 { margin-top: 5px; } .kwpntv-carousel h3.current { padding-left: 0; margin-top: 0; } @media screen and (min-width: 1224px) { .kwpntv-carousel h2, .kwpntv-carousel .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .kwpntv-carousel a.content-filter-activator, .kwpntv-carousel h3.current { padding-left: 40px; } } .kwpntv-carousel .fa.fa-tv { margin-right: 5px; position: relative; } .kwpntv-carousel .fa.fa-tv .fa.fa-play { color: #002663; position: absolute; font-size: 8px; left: 8px; top: 4px; } .kwpntv-carousel .carousel { height: 205px; margin-bottom: 20px; margin-left: -15px; margin-right: -15px; } .kwpntv-carousel .carousel .block { height: 205px; width: auto; } .kwpntv-carousel .carousel .block .video { position: relative; height: 205px; border-radius: 15px; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } .kwpntv-carousel .carousel .block .video .round-button { position: absolute; top: calc(50% - 36px); left: calc(50% - 36px); z-index: 10; box-sizing: border-box; display: block; width: 73px; height: 73px; padding-top: 26px; padding-left: 5px; line-height: 20px; border-radius: 50%; text-align: center; text-decoration: none; background-color: #fff; font-size: 20px; font-weight: bold; transition: all 0.3s ease; } .kwpntv-carousel .carousel .block .video .round-button i.fa { color: #f77c00; } .kwpntv-carousel .carousel .block .video .gradient { position: absolute; z-index: 9; height: 55.13px; width: 100%; bottom: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%); } .kwpntv-carousel .carousel .block:hover { text-decoration: none; } .kwpntv-carousel .carousel .block:hover .bottom { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .kwpntv-carousel .videos-morelink > div { padding-left: 30px; } .kwpntv-carousel.kwpntv-carousel-md .fa.fa-tv { margin-right: 10px; top: -5px; } .kwpntv-carousel.kwpntv-carousel-md .fa.fa-tv .fa.fa-play { left: 10px; top: 6px; } .kwpntv-carousel.kwpntv-carousel-md h3 { padding-bottom: 0; } .kwpntv-carousel.kwpntv-carousel-md h3 span { font-size: inherit; font-weight: inherit; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: calc(100% - 50px); line-height: 32px; } .kwpntv-carousel.kwpntv-carousel-md .content-container { margin-bottom: 0 !important; } .kwpntv-carousel.kwpntv-carousel-md .break-grid .break-grid-background { background-color: transparent; position: relative; } @media (min-width: 992px) { .kwpntv-carousel.kwpntv-carousel-md .break-grid .break-grid-background { background-color: transparent; } } .kwpntv-carousel.kwpntv-carousel-md .background-image { position: absolute; right: -57px; bottom: 75px; } @media screen and (min-width: 1224px) { .kwpntv-carousel.kwpntv-carousel-md .background-image { right: 0; } } .kwpntv-carousel.kwpntv-carousel-md.background { background-color: transparent; padding-top: 0; padding-bottom: 0; } .kwpntv-carousel.kwpntv-carousel-md.background .break-grid .break-grid-background { background-color: #fff !important; padding-top: 40px; padding-bottom: 40px; padding-left: 40px; } @media (min-width: 992px) { .kwpntv-carousel.kwpntv-carousel-md.background .break-grid .break-grid-background { background-color: #fff !important; } } .kwpntv-carousel.kwpntv-carousel-md iframe { border: 0; height: 410px; width: 100%; display: none; border-radius: 20px; } .kwpntv-carousel.kwpntv-carousel-md .video { height: 410px; width: 100%; border-radius: 20px; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; cursor: pointer; } .kwpntv-carousel.kwpntv-carousel-md .video .round-button { position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); z-index: 10; box-sizing: border-box; display: block; width: 150px; height: 150px; padding-top: 55px; padding-left: 5px; line-height: 20px; border-radius: 50%; text-align: center; text-decoration: none; background-color: #fff; font-size: 40px; font-weight: bold; transition: all 0.3s ease; } .kwpntv-carousel.kwpntv-carousel-md .video .round-button i.fa { color: #f77c00; } .kwpntv-carousel.kwpntv-carousel-md .video .gradient { position: absolute; z-index: 9; height: 55.13px; width: 100%; bottom: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%); } @media (min-width: 992px) { .kwpntv-carousel.kwpntv-carousel-md .text-container { margin-left: -35px; } } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-title { color: #002663; font-family: "Bree Serif"; font-size: 20px; letter-spacing: 1px; line-height: 28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 5px; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-image { position: relative; border-radius: 20px; width: 300px; max-width: 100%; height: 180px; background-repeat: no-repeat; background-size: cover; background-position: center; margin-bottom: 5px; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-image .preview-duration { position: absolute; bottom: 0; left: -1px; padding: 10px 15px; background-color: #fff; color: #002663; font-size: 10px; border-radius: 0 20px 0 20px; border-left: 1px solid #e3f0fd; line-height: 18px; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls .next-video { color: #f77c00; font-size: 12px; font-weight: bold; letter-spacing: 0; line-height: 18px; text-transform: uppercase; background-color: transparent; border: 0; margin-right: 75px; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls .btn { background-color: transparent; border: 0; display: inline-block; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls .btn i.fa { color: #ffa245; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls .btn:hover i.fa { color: #f77c00; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls div { color: #ffa245; display: inline-block; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls div span { color: #ffa245; display: inline-block; font-size: 12px; font-weight: bold; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls div span.index { color: #ffa245; } .kwpntv-carousel.kwpntv-carousel-md .preview-container .preview-controls div span.total { color: #f77c00; } @media screen and (min-width: 768px) { .news-for-you { margin-top: 30px; } } .news-for-you .newsTitle { padding-left: 45px; } .news-for-you .highlight { width: 335px; max-width: 100%; box-shadow: 0 2px 50px -20px rgba(0, 38, 99, 0.3); } .news-for-you .highlight.clickable { cursor: pointer; } .news-for-you .highlight .image { position: relative; width: 335px; max-width: 100%; height: 193px; border-radius: 15px 15px 0 0; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } .news-for-you .highlight .image .date { position: absolute; bottom: 0; left: -1px; padding: 10px 15px; background-color: #fff; color: #002663; font-size: 10px; border-radius: 0 20px 0 0; border-left: 1px solid #e3f0fd; line-height: 18px; } .news-for-you .highlight .image .date i.fa { font-size: 15px; color: #0c74d5; line-height: 18px; margin-right: 10px; } .news-for-you .highlight .bottom { width: 335px; max-width: 100%; height: 142px; background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; } .news-for-you .highlight .bottom .text { padding: 20px 20px 0px 20px; line-height: 28px; position: relative; } .news-for-you .highlight .bottom .text div { font-family: "Bree Serif"; font-size: 20px; } .news-for-you .highlight .bottom .text, .news-for-you .highlight .bottom .subtext { line-height: 28px; position: relative; } .news-for-you .highlight .bottom .text .truncate-overflow, .news-for-you .highlight .bottom .subtext .truncate-overflow { position: relative; max-height: calc(28px * 2); overflow: hidden; padding-right: 15px; /* space for ellipsis */ font-family: "Bree Serif"; font-size: 20px; } .news-for-you .highlight .bottom .text .truncate-overflow::before, .news-for-you .highlight .bottom .subtext .truncate-overflow::before { position: absolute; content: "..."; inset-block-end: 0; inset-inline-end: 0; } .news-for-you .highlight .bottom .text .truncate-overflow::after, .news-for-you .highlight .bottom .subtext .truncate-overflow::after { content: ""; position: absolute; inset-inline-end: 0; width: 15px; height: 28px; background: white; } .news-for-you .highlight .bottom .subtext { padding: 0 20px; } .news-for-you .highlight .bottom .subtext .truncate-overflow { padding: 0; line-height: 28px; position: relative; font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: normal; font-size: 16px; } .news-for-you .highlight .bottom .link { height: 55px; padding: 0 20px; } .news-for-you .highlight:hover { text-decoration: none; } .news-for-you .highlight:hover .bottom { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .news-for-you .newslist { width: 335px; max-width: 100%; box-shadow: 0 2px 50px -20px rgba(0, 38, 99, 0.3); margin-top: 20px; background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); border-radius: 15px; } @media screen and (min-width: 768px) { .news-for-you .newslist { margin-top: 0; } } .news-for-you .newslist .links { position: relative; width: 100%; padding: 30px 20px 20px 20px; } .news-for-you .newslist .links ul { margin: 0; padding: 0; } .news-for-you .newslist .links ul li { list-style-type: none; display: inline-block; float: left; clear: left; line-height: 28px; width: 100%; padding-left: 20px; } .news-for-you .newslist .links ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; line-height: 28px; position: absolute; left: 20px; } .news-for-you .newslist .links ul li a.ellipsis { position: relative; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; color: #002663; } @media screen and (min-width: 1024px) { .news-for-you .newslist .links { height: 260px; } } .news-for-you .newslist .bottom { width: 335px; max-width: 100%; min-height: 75px; box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; padding: 0 20px; } @media screen and (min-width: 1024px) { .news-for-you .newslist .bottom { width: 100%; } } @media screen and (min-width: 1024px) { .news-for-you .newslist { width: 100%; height: 335px; margin-top: 0; } } .news-for-you .background p { font-size: 10pt; padding-left: 25px; } .video-carousel { margin-bottom: 30px; } .video-carousel h1, .video-carousel h2, .video-carousel .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .video-carousel a.content-filter-activator, .video-carousel h3 { display: inline-block; } .video-carousel .subtitle { font-size: 22px; font-weight: normal; font-family: "Bree Serif"; margin-bottom: 15px; display: inline-block; } .video-carousel .fa.fa-tv { margin-right: 5px; position: relative; font-size: 24px; } .video-carousel .fa.fa-tv .fa.fa-play { color: #002663; position: absolute; font-size: 7px; left: 10px; top: 7px; } .video-carousel .custom-link { padding-top: 10px; } .video-carousel .custom-link-bottom { padding-left: 30px; padding-top: 10px; margin-top: 20px; } .video-carousel .col-centered { padding: 0; } .video-carousel .carousel { height: 330px; } .video-carousel .carousel .block .image { position: relative; height: 200px; border-radius: 15px 15px 0 0; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } .video-carousel .carousel .block .image .round-button { position: absolute; top: calc(50% - 36px); left: calc(50% - 36px); z-index: 10; box-sizing: border-box; display: block; width: 73px; height: 73px; padding-top: 26px; padding-left: 5px; line-height: 20px; border-radius: 50%; text-align: center; text-decoration: none; background-color: #fff; font-size: 20px; font-weight: bold; transition: all 0.3s ease; } .video-carousel .carousel .block .image .round-button i.fa { color: #f77c00; } .video-carousel .carousel .block .image .gradient { position: absolute; z-index: 9; height: 55.13px; width: 100%; bottom: 0; border-radius: 0 0 20px 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.56) 100%); } .video-carousel .carousel .block .image .duration { position: absolute; bottom: 0; left: -1px; padding: 10px 15px; background-color: #fff; color: #002663; font-size: 10px; border-radius: 0 20px 0 0; border-left: 1px solid #e3f0fd; line-height: 18px; z-index: 10; } .video-carousel .carousel .block .image .duration .fa.fa-clock-o { font-size: 15px; color: #0c74d5; line-height: 18px; margin-right: 10px; } .video-carousel .carousel .block .divider { height: 2px; background-color: white; } .video-carousel .carousel .block .bottom { position: relative; padding-top: 20px; background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; height: 100px; } .video-carousel .carousel .block .bottom .title, .video-carousel .carousel .block .bottom .category { position: relative; font-size: 12px; letter-spacing: 0; line-height: 30px; padding-left: 20px; padding-right: 20px; } .video-carousel .carousel .block .bottom .title.truncate-overflow, .video-carousel .carousel .block .bottom .category.truncate-overflow { position: relative; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .video-carousel .carousel .block .bottom .title { font-weight: normal; font-family: "Bree Serif"; font-size: 20px; } .video-carousel .carousel .block .bottom .category { font-family: Verdana, Geneva, Tahoma, sans-serif; font-weight: normal; font-size: 16px; } .video-carousel .carousel .block:hover { text-decoration: none; } .video-carousel .carousel .block:hover .bottom { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .video-carousel .carousel .carousel-control .glyphicon-chevron-left, .video-carousel .carousel .carousel-control .glyphicon-chevron-right { top: 100px; } .video-carousel .video-container { border-radius: 20px; background-color: #002663; } .video-carousel .video-container .video-carousel-iframe { border-radius: 20px; } @-webkit-keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes ticker { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); visibility: visible; } 100% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .ticker-wrap { position: fixed; bottom: 0; width: 100%; overflow: hidden; height: 4rem; background-color: rgba(0, 0, 0, 0.9); padding-left: 100%; box-sizing: content-box; z-index: 110000; } .ticker-wrap .ticker { display: inline-block; height: 4rem; line-height: 4rem; white-space: nowrap; padding-right: 100%; box-sizing: content-box; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-name: ticker; animation-name: ticker; -webkit-animation-duration: 30s; animation-duration: 30s; } .ticker-wrap .ticker__item { display: inline-block; padding: 0 2rem; font-size: 2rem; color: white; box-sizing: border-box; } html { overflow-x: hidden; } .aside-page .aside_pullLabel { display: none; } @media screen and (min-width: 992px) { .aside-page { position: absolute; } .aside-page .bg_aside { background: linear-gradient(270deg, #fff 0%, #f5fafe 100%); border-radius: 20px 0 0 20px; position: absolute; z-index: 1; right: 0; top: 0; width: 300px; padding: 20px; -moz-transition: right 0.2s ease-in-out; -o-transition: right 0.2s ease-in-out; -webkit-transition: right 0.2s ease-in-out; transition: right 0.2s ease-in-out; } .aside-page .bg_aside .aside_pullLabel .fa-bars { color: #fff; position: relative; top: 3px; left: 10px; } } @media (min-width: 992px) and (max-width: 1346px) { .aside-page .bg_aside { border-radius: 0 0 0 20px; } .aside-page .bg_aside .aside_pullLabel { display: block; } .aside-page .bg_aside.closed { right: -300px; } .aside-page .bg_aside.open { right: 0; } .aside-page .bg_aside:after { content: ""; background: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 0 0 20px; width: 100px; height: 250px; position: absolute; right: 300px; top: 0; cursor: pointer; } .aside-page .bg_aside .aside_pullLabel { font-family: "Bree Serif"; font-weight: 400; font-size: 20px; color: #fff; width: 100px; position: absolute; left: -35px; top: 150px; z-index: 1; text-align: center; cursor: pointer; moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; -webkit-transform-origin: bottom left; transform-origin: bottom left; -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } } @media screen and (min-width: 992px) { .aside-page aside { min-height: 212px; } } .aside-page aside h2 span, .aside-page aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator span, .contentFilterHolder:not(.selected) .title h2 .aside-page aside a.content-filter-activator span { font-family: "Bree Serif"; font-size: 20px; width: 90%; display: inline-block; } .aside-page aside h2 .fa-chevron-down, .aside-page aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator .fa-chevron-down, .contentFilterHolder:not(.selected) .title h2 .aside-page aside a.content-filter-activator .fa-chevron-down { color: #f77c00; font-size: 18px; cursor: pointer; } @media screen and (min-width: 992px) { .aside-page aside h2 .fa-chevron-down, .aside-page aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator .fa-chevron-down, .contentFilterHolder:not(.selected) .title h2 .aside-page aside a.content-filter-activator .fa-chevron-down { display: none; } } .aside-page aside .list-tabs { max-height: 0; overflow: hidden; border-bottom: 2px solid #e3f0fd; -moz-transition: max-height 0.2s ease-in-out; -o-transition: max-height 0.2s ease-in-out; -webkit-transition: max-height 0.2s ease-in-out; transition: max-height 0.2s ease-in-out; } .aside-page aside .list-tabs table { background: none; } @media screen and (min-width: 992px) { .aside-page aside .list-tabs { max-height: 1500px; border: none; } } .aside-page aside .list-tabs.open_tab { max-height: 1500px; } .aside-page aside .list-tabs ul { padding: 0; margin: 0; } .aside-page aside .list-tabs ul li { list-style-type: none; line-height: 28px; margin: 0; padding: 5px 10px 5px 45px; width: 100%; } .aside-page aside .list-tabs ul li.user-not-logged-in { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } .aside-page aside .list-tabs ul li:before { font-family: 'FontAwesome'; content: '\f053'; color: #0c74d5; font-size: 12px; position: relative; left: -25px; } .aside-page aside .list-tabs ul li a { color: #002663; margin-top: -28px; display: list-item; } .aside-page aside .list-tabs ul li span.list-item { color: #002663; margin-top: -28px; display: list-item; } .aside-page aside .list-tabs ul li span.list-item .breeder-link { display: block; width: 100%; clear: left; font-size: 12px; line-height: 20px; cursor: pointer; } .aside-page aside .list-tabs ul li span.list-item .breeder-link::before { font-family: 'FontAwesome'; content: '\f054'; color: transparent; font-size: 10px; position: relative; left: -10px; } .aside-page aside .list-tabs ul li span.list-item .breeder-link:hover::before { color: #fff !important; } .aside-page aside .list-tabs ul li span.list-item .breeder-link.active::before { color: #fff !important; } .aside-page aside .list-tabs ul li:hover, .aside-page aside .list-tabs ul li.active { background-color: #0c74d5; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; text-decoration: none; } .aside-page aside .list-tabs ul li:hover:before, .aside-page aside .list-tabs ul li.active:before { color: #fff; } .aside-page aside .list-tabs ul li:hover a, .aside-page aside .list-tabs ul li:hover span.list-item, .aside-page aside .list-tabs ul li:hover span.list-item .breeder-link, .aside-page aside .list-tabs ul li.active a, .aside-page aside .list-tabs ul li.active span.list-item, .aside-page aside .list-tabs ul li.active span.list-item .breeder-link { color: #fff !important; text-decoration: none; } .aside-page aside .list-tabs.arrow-right > ul > li:before { content: '\f054'; } .aside-page aside .list-actions { max-height: 0; overflow: hidden; border-bottom: 2px solid #e3f0fd; -moz-transition: max-height 0.2s ease-in-out; -o-transition: max-height 0.2s ease-in-out; -webkit-transition: max-height 0.2s ease-in-out; transition: max-height 0.2s ease-in-out; } .aside-page aside .list-actions table { background: none; } @media screen and (min-width: 992px) { .aside-page aside .list-actions { max-height: 1500px; border: none; margin-top: 20px; } } .aside-page aside .list-actions.open_tab { max-height: 1500px; } .aside-page aside .list-actions ul { padding: 0; margin: 0; } .aside-page aside .list-actions ul li { list-style-type: none; margin: 0; width: 100%; line-height: 15px; } .aside-page aside .list-actions ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; position: relative; left: 22px; } .aside-page aside .list-actions ul li a { color: #002663; display: list-item; line-height: 20px; margin-left: 40px; position: relative; top: -20px; } .aside-page aside .list-actions ul li.refresh:before { font-family: 'FontAwesome'; content: '\f021'; color: #0c74d5; font-size: 12px; position: relative; left: 22px; } .aside-page aside .list-actions ul li.refresh a abbr { border-bottom: none; } .aside-page aside .list-actions ul li.refresh a abbr[title] { cursor: pointer; border-bottom: none; } .aside-page aside .list-actions ul li.refresh a:hover { text-decoration: none; } @media print { .aside-page .bg_aside { display: none; } } /* Sweet alert styling */ div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm.btn-sweetalert { background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; border-radius: 20px 20px 0 20px; margin-top: 20px; } div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm:focus { box-shadow: none !important; text-decoration: none; border: 0 !important; outline-width: 0 !important; } div:where(.swal2-container) .swal2-html-container.sweetalert-text { color: #002663; font-family: Verdana; font-size: 14px; font-weight: 400; line-height: 28px; outline: none; } div:where(.swal2-container).swal2-center > .swal2-popup.sweetalert-popup { width: 400px; padding: 25px 0; } div:where(.swal2-container) h2:where(.swal2-title).sweetalert-title, div:where(.swal2-container) .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator:where(.swal2-title).sweetalert-title, .contentFilterHolder:not(.selected) .title h2 div:where(.swal2-container) a.content-filter-activator:where(.swal2-title).sweetalert-title { font-size: 24px; line-height: 32px; font-family: "Bree Serif"; padding-top: 0; margin-top: 0; color: #002663; } .invisible { display: none; } .list-style-none { list-style: none; } #newslettersubjects label { float: left; } #newslettersubjects ul { list-style: none; float: left; /* display: flex; */ width: 100%; } @media print { @page { margin: 0px !important; } } /* WEB LAYOUT ------------------------------------------------------------------------------------------------*/ * { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px; outline: none; } @media print { * { font-size: 12px; line-height: 20px; } } html { overflow-y: -moz-scrollbars-vertical; overflow-y: scroll; height: 100%; } .vcenter, #kwpnlink a i[class*="fa-television"], #kwpnlink a > span, .eventListHeader > span { display: inline-block !important; vertical-align: middle !important; float: none !important; } body { background-color: #fff; height: 100%; min-height: 100%; padding: 0 !important; margin: 0; background-image: url(/files/templates/designs/kwpn/images/kwpn-background-mobile.svg); background-repeat: no-repeat; background-position: top left; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } @media print { body { background: none; } } /*TOP*/ .header_top { height: 100px; } .header_top .searchwrapper { height: 80px; background-color: #f5fafe; border-radius: 0 0 0 20px; padding-top: 20px; } .header_top .searchwrapper .switch-language { margin-top: 10px; width: 21px; height: 15px; } .header_top .searchwrapper a.active .switch-language { opacity: 0.5; } .header_top .searchwrapper .search-form input[type=text] { background-color: #fff; border: 2px solid #e3f0fd; border-radius: 10px 0 0 10px; height: 40px; color: #002663; } .header_top .searchwrapper .search-form .input-group-addon { background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); border-radius: 0 10px 10px 0; border-width: 0; cursor: pointer; width: 40px; height: 40px; } .header_top .searchwrapper .search-form .input-group-addon i { color: #fff; } .header_top .searchwrapper .search-form .input-group-addon:hover { background-image: linear-gradient(to top, #002663 0%, #3a9af4 100%); } .header_top .offline-wrapper { height: 80px; background-color: #f5fafe; border-radius: 0 0 20px 0; padding-top: 20px; } .header_top .login-button { width: 100%; height: 100px; border-radius: 0 0 20px; border: 0; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; color: #fff; outline: none; } .header_top .login-button i.fa { color: #fff; } .header_top .login-button:hover { background-image: none; } .header_top .inloggenMenu { padding: 40px 60px 60px 60px; width: 990px; background-color: #fff; border-radius: 20px 0 20px 20px; position: absolute; top: 90px; right: 0; border-top: 10px solid #f77c00; z-index: 1000; margin-right: 20px; display: none; } .header_top .inloggenMenu .close-login { position: absolute; top: 0; left: 0; background-color: #f77c00; padding: 10px 15px; color: #fff; border-radius: 10px 0; } .header_top .inloggenMenu .close-login i.fa { color: #fff; } .header_top .inloggenMenu button { border-radius: 20px 20px 0; background: linear-gradient(#ffa245, #f77c00); color: #fff; border: none; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 10px 20px; float: right; margin-top: 40px; } .header_top .inloggenMenu button i.fa { color: #fff !important; font-size: 12px !important; font-weight: 400 !important; line-height: 12px; padding: 0 10px; } .header_top .inloggenMenu .aSide, .header_top .inloggenMenu .logIn { display: inline-block; min-width: 370px; max-width: 370px; vertical-align: top; } .header_top .inloggenMenu .aSide h1, .header_top .inloggenMenu .aSide h2, .header_top .inloggenMenu .aSide .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .header_top .inloggenMenu .aSide a.content-filter-activator, .header_top .inloggenMenu .aSide h3, .header_top .inloggenMenu .logIn h1, .header_top .inloggenMenu .logIn h2, .header_top .inloggenMenu .logIn .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .header_top .inloggenMenu .logIn a.content-filter-activator, .header_top .inloggenMenu .logIn h3 { color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .header_top .inloggenMenu .logIn { margin-right: 100px; } .header_top .inloggenMenu .logIn .member-number-group span, .header_top .inloggenMenu .logIn .password-group span { background-color: transparent; padding-left: 0; border: none; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 38px; } .header_top .inloggenMenu .logIn .member-number-group input[type=text], .header_top .inloggenMenu .logIn .member-number-group input[type=password], .header_top .inloggenMenu .logIn .password-group input[type=text], .header_top .inloggenMenu .logIn .password-group input[type=password] { width: 250px; height: 40px; background-color: #fff; border: 2px solid #e3f0fd; border-radius: 10px; float: right; } .header_top .inloggenMenu .logIn .loginErrorMessage span { color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; padding: 2px 10px; white-space: nowrap; } .header_top .inloggenMenu .aSide > div { margin: 0 auto; } .header_top .inloggenMenu .aSide > div h3 { font-size: 24px; line-height: 32px; font-family: "Bree Serif"; padding-top: 0; margin-top: 0; margin-bottom: 10px; } .header_top .inloggenMenu .aSide > div ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .header_top .inloggenMenu .aSide > div ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .header_top .inloggenMenu .aSide > div ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .header_top .inloggenMenu .aSide > div ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .header_top .inloggenMenu .aSide > div a.membership-link { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; } .header_top .inloggenMenu .aSide > div a.membership-link i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 6px; left: 0; top: 3px; } .header_top .inloggenMenu .aSide > div a.membership-link:hover { border-bottom: 4px solid #f77c00; } .header_top .myaccountMenu { padding: 20px 60px 30px 60px; width: 990px; border-radius: 20px 0 20px 20px; position: absolute; background-color: #fff; top: 90px; right: 0; border-top: 10px solid #f77c00; z-index: 1500; margin-right: 20px; display: none; } .header_top .myaccountMenu .navigation_account div:first-of-type { display: none; } .header_top .myaccountMenu .navigation_account ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .header_top .myaccountMenu .navigation_account ul li { padding-left: 0 !important; display: block !important; position: relative; } .header_top .myaccountMenu .navigation_account ul li span i { color: #0c74d5; position: absolute; left: 0; top: 14px; font-size: 12px; } .header_top .myaccountMenu .navigation_account ul li a { font-family: Verdana; color: #002663; font-size: 16px; font-weight: 400; line-height: 38px; margin-left: 30px; padding-bottom: 4px; text-decoration: none; } .header_top .myaccountMenu .navigation_account ul li.active a, .header_top .myaccountMenu .navigation_account ul li:hover a { border-bottom: 4px solid #f77c00; } .header_top .myaccountMenu .navigation_account-footer { position: relative; display: inline-block; width: 100%; margin-top: 20px; } .header_top .myaccountMenu .navigation_account-footer a { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; } .header_top .myaccountMenu .navigation_account-footer a i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 5px; left: 0; top: 3px; } .header_top .myaccountMenu .navigation_account-footer a:hover { border-bottom: 4px solid #f77c00; } @media print { .header_top { display: none; } } /*HEADER*/ .header_content { height: 140px; } .header_content .navigation_header { margin-top: 40px; float: right; font-weight: 400; line-height: 28px; position: relative; z-index: 10; } .header_content .navigation_header ul { display: table-row; z-index: 500; } .header_content .navigation_header ul li { display: inline-block; vertical-align: middle; padding: 10px 20px 12px 20px; } .header_content .navigation_header ul li i.fa-home, .header_content .navigation_header ul li i.fa-tv { font-size: 18px; vertical-align: middle; } .header_content .navigation_header ul li i.fa-tv { position: relative; font-weight: bold; margin-right: 5px; } .header_content .navigation_header ul li i.fa-tv .fa.fa-play { color: #002663; position: absolute; font-size: 7px; left: 8px; top: 4px; } .header_content .navigation_header ul li a { color: #002663; font-family: "Bree Serif"; font-size: 20px; } .header_content .navigation_header ul li a span { color: #002663; font-family: "Bree Serif"; font-size: 20px; padding-bottom: 4px; color: #002663; font-family: "Bree Serif"; font-size: 20px; } .header_content .navigation_header ul li a i { color: #f77c00; padding-left: 10px; font-size: 12px; display: inline-block; vertical-align: middle; } .header_content .navigation_header ul li a i.fa-home, .header_content .navigation_header ul li a i.fa-tv { color: #002663; } .header_content .navigation_header ul li a:hover, .header_content .navigation_header ul li a:active, .header_content .navigation_header ul li a:focus, .header_content .navigation_header ul li a:visited { color: #002663; text-decoration: none; } .header_content .navigation_header ul li.open { background-color: #fff; border-radius: 20px 20px 0 0; } .header_content .navigation_header ul li.open a i { transform: rotate(180deg); padding-left: 0px; padding-right: 10px; } .header_content .navigation_header ul li.active a span { border-bottom: 4px solid #f77c00; } .header_content .navigation_header ul li:first-of-type { padding-left: 0; } @media (min-width: 992px) { .header_content .navigation_header ul.main-nav > li { padding: 10px 10px 12px 10px; } .header_content .navigation_header ul.main-nav > li i.fa-chevron-down { padding-left: 0; } .header_content .navigation_header ul.main-nav > li.open a i.fa-chevron-down { padding-left: 0; padding-right: 0; } } @media (min-width: 1346px) { .header_content .navigation_header ul.main-nav > li { padding: 10px 12px 12px 12px; } .header_content .navigation_header ul.main-nav > li i.fa-chevron-down { padding-left: 10px; } .header_content .navigation_header ul.main-nav > li.open a i.fa-chevron-down { padding-left: 0; padding-right: 10px; } } .header_content .navigation_header ul.main-nav > li:last-of-type { padding-right: 0; } .header_content .bigMenu { padding: 40px 60px 60px 60px; width: 990px; background-color: #fff; border-radius: 20px; position: absolute; right: -50px; top: 50px; z-index: 500; display: none; } .header_content .bigMenu ul { display: inline-block !important; padding-left: 30px; } .header_content .bigMenu .list { display: inline-block !important; margin-right: 10px; vertical-align: top; min-width: 260px; max-width: 260px; } .header_content .bigMenu .list li { padding: 0 !important; display: block !important; position: relative; } .header_content .bigMenu .list li span i { color: #0c74d5; position: absolute; left: -30px; top: 14px; font-size: 12px; } .header_content .bigMenu .list li a { font-family: Verdana; color: #002663; font-size: 16px; font-weight: 400; line-height: 38px; padding-bottom: 4px; } .header_content .bigMenu .list li.active a, .header_content .bigMenu .list li:hover a { border-bottom: 4px solid #f77c00; } .header_content .bigMenu .list:last-of-type { margin-right: 0; } .header_content .bigMenu .bottom .all { display: inline-block; margin-top: 40px; } .header_content .bigMenu .bottom .all i { background: linear-gradient(#ffa245, #f77c00); border-radius: 0 10px; color: #fff; font-size: 12px; padding: 6px 7px; margin-right: 10px; } .header_content .bigMenu .bottom .all span a { color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; margin-right: 20px; } .header_content .bigMenu .bottom .all span a:hover { text-decoration: none; } .header_content .bigMenu .bottom .line-seperator { display: inline-block; background-color: #e3f0fd; height: 2px; width: 530px; margin-bottom: 5px; } @media print { .header_content { display: none; } } /*MOBILE NAV*/ .header_top_mobile { position: relative; height: 60px; margin-bottom: 20px; } .header_top_mobile .mobile-logo { position: absolute; top: 20px; left: 35px; } .header_top_mobile .menuMobile { position: absolute; width: 280px; right: -280px; background: linear-gradient(#fff, #f5fafe); border-radius: 0 0 0 20px; transition: all 0.25s ease-in-out; z-index: 1; } .header_top_mobile .menuMobile .hamburgerMenu { background: linear-gradient(#ffa245, #f77c00); transition: all 0.25s ease-in-out; border-radius: 0 0 0 20px; width: 60px; font-size: 20px; text-align: center; vertical-align: middle; position: relative; left: -60px; cursor: pointer; } .header_top_mobile .menuMobile .hamburgerMenu i { padding: 20px; color: #fff; } .header_top_mobile .menuMobile .mobile-flags { float: right; position: relative; top: -40px; right: 30px; } .header_top_mobile .menuMobile .switch-language { width: 21px; height: 15px; } .header_top_mobile .menuMobile a.active .switch-language { opacity: 0.5; } .header_top_mobile .menuMobile .inloggenMobielLink { text-decoration: none; } .header_top_mobile .menuMobile .inloggenMobielLink .inloggenMobiel { background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); width: 280px; height: 80px; border-radius: 0 0 0 20px; color: #fff; text-align: center; position: relative; } .header_top_mobile .menuMobile .inloggenMobielLink .inloggenMobiel div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "Bree Serif"; color: #fff; font-size: 18px; font-weight: 400; line-height: 26px; } .header_top_mobile .menuMobile .inloggenMobielLink .inloggenMobiel div i { font-size: 12px; padding-left: 9px; color: #fff; margin-right: 10px; } .header_top_mobile .menuMobile form { position: relative; display: inline-block; padding: 20px 0 20px 40px; padding-left: 40px; } .header_top_mobile .menuMobile form input[type=text], .header_top_mobile .menuMobile form input[type=password] { width: 200px; position: relative; height: 40px; border: 2px solid #e3f0fd; border-radius: 10px; } .header_top_mobile .menuMobile form .btn { position: absolute; width: 40px; height: 40px; top: 20px; right: 0px; border-radius: 0 10px 10px 0; background: linear-gradient(#3a9af4, #0c74d5); } .header_top_mobile .menuMobile form .btn i { color: #fff; } .header_top_mobile .menuMobile ul { list-style-type: none; padding: 0; } .header_top_mobile .menuMobile ul li .devider { height: 2px; width: 280px; background: linear-gradient(#fff, #e3f0fd, #fff); } .header_top_mobile .menuMobile ul li a { color: #002663; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 50px; padding-left: 40px; } .header_top_mobile .menuMobile ul li a span { color: #002663; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 50px; } .header_top_mobile .menuMobile ul li i { color: #0c74d5; padding-right: 20px; } .header_top_mobile .menuMobile ul ul li a { padding-left: 60px; } .header_top_mobile .menuMobile .level ul { display: none; } .header_top_mobile .mobileMenuOpen { right: 0px; transition: all 0.25s ease-in-out; display: block; z-index: 2000; } .header_top_mobile .hamburgerMenuOpen { left: 0px !important; border-radius: 0 0 20px !important; transition: all 0.25s ease-in-out !important; } @media print { .header_top_mobile { display: none; } } /*MOBILE SUBNAVIGATION */ .subnavigation_mobile { background-color: #fff; margin: 15px; padding: 15px 40px; border-radius: 20px; } .subnavigation_mobile h1 { color: #002663; font-family: "Bree Serif"; font-size: 32px; font-weight: 400; line-height: 40px; margin: 30px 0 0 0; } .subnavigation_mobile h4 { padding: 25px 0 10px 0; color: #002663; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; } .subnavigation_mobile #subNavigation, .subnavigation_mobile #subNavigationMyAccount { padding-left: 0; } .subnavigation_mobile #subNavigation ul, .subnavigation_mobile #subNavigationMyAccount ul { padding-left: 0; } .subnavigation_mobile #subNavigation li, .subnavigation_mobile #subNavigationMyAccount li { list-style: none; line-height: 38px; display: inline-block; width: 100%; clear: both; } .subnavigation_mobile #subNavigation li a, .subnavigation_mobile #subNavigationMyAccount li a { color: #002663; text-decoration: none; } .subnavigation_mobile #subNavigation li a i, .subnavigation_mobile #subNavigationMyAccount li a i { padding-right: 15px; color: #0c74d5; font-size: 10px; height: 14px; vertical-align: middle; } .subnavigation_mobile #subNavigationMyAccount > li:first-of-type { padding-top: 20px; } .logo { position: relative; display: block; } #pagewrapper { min-height: 100%; height: auto; overflow-x: hidden; } div .grecaptcha-badge { visibility: hidden; } /*FOOTER LINKS*/ #footerlinks { height: auto; background-color: transparent; margin-bottom: 40px; } #footerlinks #goto-navigation { height: auto; padding-left: 30px; margin-bottom: 30px; } @media screen and (min-width: 1024px) { #footerlinks #goto-navigation { padding-left: 0; } } #footerlinks #goto-navigation ul { display: inline-block; padding: 0; margin: 0 0 30px 0; } @media screen and (min-width: 1024px) { #footerlinks #goto-navigation ul { margin-bottom: 0; } } #footerlinks #goto-navigation ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } #footerlinks #goto-navigation ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } #footerlinks #goto-navigation ul li:not(.icon):before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } #footerlinks #goto-navigation ul li.facebook:before { content: '\f09a'; color: #324e97; font-size: 16px; } #footerlinks #goto-navigation ul li.twitter:before { content: '\f099'; color: #0c74d5; font-size: 16px; } #footerlinks #goto-navigation ul li.linkedIn:before { content: '\f0e1'; color: #29a9e1; font-size: 16px; } #footerlinks #goto-navigation ul li.instagram:before { content: '\f16d'; color: #d22d71; font-size: 16px; } #footerlinks #goto-navigation ul li.youtube:before { content: '\f167'; color: #d00404; font-size: 16px; } #footerlinks #goto-navigation ul li.vimeo:before { content: '\f27d'; color: #0c74d5; font-size: 16px; } #footerlinks #goto-navigation ul li.tiktok:before { content: url('data:image/svg+xml; utf8, '); margin-top: 3px; } #footerlinks #goto-navigation ul li.icon { position: relative; margin-left: 35px; } #footerlinks #goto-navigation ul li.icon a img { position: absolute; left: -35px; top: 4px; } #footerlinks #goto-navigation #errormessages li:before { content: none; } #footerlinks #goto-navigation #errormessages li { margin-left: 0; padding: 5px; border: 1px solid red; border-radius: 5px; } #footerlinks #goto-navigation .newsletter-subscription { margin-bottom: 30px; } @media screen and (min-width: 1024px) { #footerlinks #goto-navigation .newsletter-subscription { margin-bottom: 80px; } } #footerlinks #goto-navigation .newsletter-subscription .backandonly { display: none; } #footerlinks #goto-navigation .newsletter-subscription .input-group { width: 100%; display: flex; } #footerlinks #goto-navigation .newsletter-subscription .input-group input[type=text], #footerlinks #goto-navigation .newsletter-subscription .input-group input[type=email] { background-color: #fff !important; border: 2px solid #e3f0fd !important; border-radius: 10px 0 0 10px !important; height: 40px !important; color: #002663 !important; padding-left: 10px !important; width: 180px; order: 1; } #footerlinks #goto-navigation .newsletter-subscription .input-group .input-group-addon { background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); border-radius: 0 10px 10px 0; border-width: 0; cursor: pointer; width: 40px; height: 40px; order: 2; } #footerlinks #goto-navigation .newsletter-subscription .input-group .input-group-addon i { color: #fff; } #footerlinks #goto-navigation .newsletter-subscription .input-group .input-group-addon:hover { background-image: linear-gradient(to top, #002663 0%, #3a9af4 100%); } #footerlinks #goto-navigation .newsletter-subscription .input-group div { order: 3; } #footerlinks #goto-navigation .newsletter-subscription .input-group div .grecaptcha-badge { visibility: hidden; } /*FOOTER*/ #footerwrapper { background-color: #f5fafe; padding: 20px 0; } #footerwrapper ul { margin: 0 0 0 -40px; } #footerwrapper ul li { display: inline-block; list-style-type: none; margin-right: 50px; float: left; clear: left; } #footerwrapper ul li a, #footerwrapper ul li a:active, #footerwrapper ul li a:hover, #footerwrapper ul li a:focus { font-family: Verdana; font-size: 16px; text-decoration: none; color: #002663; font-weight: 400; line-height: 28px; padding-bottom: 6px; } #footerwrapper ul li a:hover { border-bottom: 4px solid #f77c00; } #footerwrapper ul li.active a { border-bottom: 4px solid #f77c00; } #footerwrapper ul li:before { font-size: 12px; margin-right: 15px; font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; } #footerwrapper ul li:last-of-type { margin-right: 0; } #footerwrapper #footer-logo { margin-top: 10px; } @media print { #footerwrapper { display: none; } } #kwpnlink { position: fixed; right: 0px; bottom: 0; width: 245px; z-index: 10000; height: 50px; border-radius: 20px 0 0 0; background-color: #002663; -webkit-animation: showHideLabel 0.5s linear 5s forwards; -moz-animation: showHideLabel 0.5s linear 5s forwards; -ms-animation: showHideLabel 0.5s linear 5s forwards; -o-animation: showHideLabel 0.5s linear 5s forwards; animation: showHideLabel 0.5s linear 5s forwards; } #kwpnlink:hover { background-color: #0c74d5; } #kwpnlink:hover * { text-decoration: none; } #kwpnlink * { color: white; } @-webkit-keyframes showHideLabel { 0% { right: 0; } 100% { right: -200px; } } @-moz-keyframes showHideLabel { 0% { right: 0; } 100% { right: -200px; } } @-ms-keyframes showHideLabel { #kwpnlink 0% { right: 0; } #kwpnlink 100% { right: -200px; } } @-o-keyframes showHideLabel { 0% { right: 0; } 100% { right: -200px; } } @keyframes showHideLabel { 0% { right: 0; } 100% { right: -200px; } } @media screen and (min-width: 1024px) { #kwpnlink { display: none; } } #kwpnlink a { height: 50px; line-height: 50px; width: 100%; display: block; } #kwpnlink a i[class*="fa-chevron"] { display: none; } @media screen and (min-width: 768px) { #kwpnlink a i[class*="fa-chevron"] { font-size: 20px; margin-left: 25px; display: inline-block; vertical-align: middle; float: none; } } #kwpnlink a i[class*="fa-television"] { display: block; font-size: 20px; margin-left: 15px; padding-top: 5px; } @media screen and (min-width: dektop) { #kwpnlink a i[class*="fa-television"] { display: none !important; } } #kwpnlink a > span { text-decoration: none; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; margin-left: 25px; } @media print { #kwpnlink { display: none; } } /*CONTENT + ASIDE PAGE LAYOUT*/ .page-content-aside .background-head-aside-xs:not(.selected) { background-color: transparent; margin: 0 !important; } .page-content-aside .background-head-aside-xs { padding: 0 15px; } .page-content-aside .background-head-aside-xs .background-head-xs { width: 100%; background-color: #fff; border-radius: 10px 10px 0 0; } .page-content-aside .background-head-aside-xs .background-head-xs .page-header { padding: 0; border-bottom: none !important; } .page-content-aside .background-head-aside-xs .background-head-xs .page-header p { white-space: normal; } .page-content-aside .background-head-aside-xs .background-head-xs .page-header h1 { font-size: 25px; line-height: 25px !important; white-space: normal; } .page-content-aside .background-head-aside-xs .background-head-xs .page-header h1 span { font-size: 25px !important; line-height: 25px !important; display: inline-block; } @media screen and (min-width: 992px) { .page-content-aside .background-head-aside-xs .background-head-xs .page-header h1 { font-size: 40px; line-height: 40px !important; } .page-content-aside .background-head-aside-xs .background-head-xs .page-header h1 span { font-size: 40px !important; line-height: 40px !important; display: inline-block; } } .page-content-aside .background-head-aside-xs .background-head-xs .page-header .notification { background-color: #d0e7fc; border-radius: 10px; padding: 15px; margin-bottom: 15px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; } .page-content-aside .background-head-aside-xs .background-head-xs .page-subheader { width: 100%; display: block; clear: both; } .page-content-aside .background-head-aside-xs .background-head-xs.selected { display: inline-block; } .page-content-aside .background-head-aside-xs .background-aside-xs { position: relative; display: inline-block; margin: 0 0 20px 0; padding: 0 15px 15px 15px; width: 100%; background-color: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 2px 2px rgba(0, 38, 99, 0.2); } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside { background-color: #fff; padding: 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator { margin: 0 -15px 2px -15px; padding: 0 0 15px 0; position: relative; clear: both; width: calc(100% - 25px); cursor: pointer; border-top: 2px solid #e3f0fd; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2 span, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator span { padding: 15px; color: #002663; font-family: "Bree Serif"; font-weight: 400; font-size: 20px; line-height: 28px; display: inline-block; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2:after, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator:after, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator:after { font-family: 'FontAwesome'; content: '\f078'; color: #f77c00; font-size: 20px; font-weight: 400; line-height: 20px; min-width: 20px; display: block; float: right; margin-top: 15px; margin-right: 15px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2.active:after, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.active.content-filter-activator:after, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.active.content-filter-activator:after { content: '\f077'; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside ul li { list-style-type: none; display: block; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside ul li a.orange_balloon_link { color: #fff; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside ul li:not(.no-bullet):before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs { margin: 0 0 15px -15px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul { display: inline-block; position: relative; clear: both; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li { list-style-type: none; display: inline-block; float: left; clear: left; line-height: 28px; margin: 0; padding: 5px 10px 5px 45px; width: 100%; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li a { text-decoration: none; color: #002663; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.active, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li:hover { background-color: #0c74d5; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.active a, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li:hover a { text-decoration: none; color: #fff; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.user-not-logged-in { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li:before { content: '\f053'; margin-left: 15px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.active:before, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li:hover:before { color: #fff; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.user-not-logged-in:hover { background-color: transparent; background-image: none; cursor: default; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.user-not-logged-in:hover a { color: #002663; text-decoration: none; cursor: default; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .list-tabs ul li.user-not-logged-in:before { color: #0c74d5; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.aside-content-info { background-color: transparent; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.aside-content-info tr.head th { padding: 0 0 5px 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.aside-content-info tr.head th i.fa { color: #0c74d5; font-size: 16px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.aside-content-info tr td { padding: 0 0 10px 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.notactive { display: none; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.active { display: block; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.categories label { font-weight: 400; } .page-content-aside .page-content { padding-top: 20px; background-color: #fff; } .page-content-aside .page-content h2, .page-content-aside .page-content .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .page-content a.content-filter-activator, .page-content-aside .page-content h2 span, .page-content-aside .page-content .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator span, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .page-content a.content-filter-activator span { color: #002663; font-family: "Bree Serif"; font-size: 34px; font-weight: 400; line-height: 42px; margin: 40px 0 10px 0; } @media only screen and (max-width: 600px) { .page-content-aside .page-content iframe { max-width: 100%; height: 56.25vw; } } @media print { .page-content-aside .page-content h2, .page-content-aside .page-content .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .page-content a.content-filter-activator { font-size: 22.66667px; line-height: 18.66667px; margin: 30px 0 10px 0; } } .page-content-aside .page-content .moduleContent { padding-top: 20px; } .content-filter { position: absolute; display: none; background-color: #fff; z-index: 3000; width: 90%; border-radius: 20px; padding: 60px 40px; left: 5%; top: -40px; -webkit-transition: all 1s ease; /* Safari */ transition: all 1s ease; } .content-filter .content-filter-close { position: absolute; display: block; right: 0; top: 0; width: 60px; height: 60px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 20px; border: 0; color: #fff; outline: none; } .content-filter .content-filter-close:hover { background-image: none; } .content-filter .content-filter-category { margin-top: 40px; } .content-filter .content-filter-category label { font-weight: 400; margin-left: 15px; } .content-filter .content-filter-submit { margin-top: 40px; } .content-filter .content-filter-category:first-of-type { margin-top: 0; } .content-filter.active { display: block; } /* HOMEPAGE ITEMS ------------------------------------------------------------------------------------------------*/ /*TOP BANNER*/ #top-banner { padding: 0 15px; margin: 10px 0 30px 0; width: 100%; } #top-banner .top-banner-image { width: 100%; border-radius: 20px 20px 0 0; background-repeat: no-repeat; background-position-x: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #top-banner .top-banner-image, #top-banner .top-banner-image-top { background-position-y: top !important; } #top-banner .top-banner-image-center { background-position-y: center !important; } #top-banner .top-banner-image-bottom { background-position-y: bottom !important; } #top-banner .top-banner-image, #top-banner .top-banner-image-l { height: 200px; } #top-banner .top-banner-image-m { height: 200px; } #top-banner .top-banner-image-s { height: 200px; } #top-banner .top-banner-content { position: relative; background-color: #fff; border-radius: 0 0 20px 20px; } #top-banner .top-banner-content .well { border-width: 0; background-color: transparent; } #top-banner .top-banner-content .well h2, #top-banner .top-banner-content .well .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #top-banner .top-banner-content .well a.content-filter-activator { margin-top: 0; font-size: 24px; font-weight: 400; line-height: 32px; } #top-banner .top-banner-content .well a { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; } #top-banner .top-banner-content .well a i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 5px; left: 0; top: 3px; } #top-banner .top-banner-content .well a:hover { border-bottom: 4px solid #f77c00; } /*THREE PARAGRAPHS LINKS*/ @media screen and (max-width: 991px) { .three-paragraph-links-wrapper .three-paragraph-links-paragraph { padding: 0; } } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header { /*a:hover { color: $primary-color; background-color: $tertiary-color; }*/ } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header a { display: block; text-decoration: none; color: #002663; background-color: #fff; border-bottom: 2px solid #e3f0fd; padding: 26px 10px 26px 40px; } @media screen and (max-width: 991px) { .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header a { background-color: white; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header a:hover { background-color: white !important; } } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header a h3 { margin: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header a h3:after { font-size: 20px; margin-right: 15px; font-family: 'FontAwesome'; content: '\f078'; color: #f77c00; position: absolute; right: 40px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-header a h3.active:after { content: '\f077'; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content { background: white; padding-left: 40px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content ul { margin: 20px 0 0 15px; padding: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 15px; line-height: 28px; margin-bottom: 12px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content .three-paragraph-links-show-more { display: block; width: 80%; } @media screen and (min-width: 992px) { .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content .three-paragraph-links-show-more { position: absolute; bottom: 30px; } } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content .three-paragraph-links-show-more a { min-width: 50px; position: relative; display: block; margin: 20px 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content .three-paragraph-links-show-more a span { display: inline-block; float: left; white-space: nowrap; background-color: #002663; border-radius: 0 0 0 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; width: calc(100% - 50px); } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content .three-paragraph-links-show-more a i { display: inline-block; float: left; background-color: #0c74d5; color: #fff; font-size: 12px; font-weight: 400; border-radius: 0 20px 0 0; line-height: 12px; padding: 20px 20px; width: 50px; height: 50px; background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content .three-paragraph-links-show-more a:hover i { background-image: none; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content.active { display: block; } @media screen and (max-width: 991px) { .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content.active { padding-bottom: 20px; border-bottom: 1px solid #e3f0fd; } } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-content.notactive { display: none; } /*HOME NEWS & EVENTS */ .news-events { background-color: #e3f0fd; margin: 0 -15px; padding: 40px 15px; } .news-events .news-events-title { margin: 0 15px; } .news-events .news-events-title h2, .news-events .news-events-title .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-events .news-events-title a.content-filter-activator { color: #002663; font-family: "Bree Serif"; font-size: 32px; font-weight: 400; line-height: 40px; margin-bottom: 20px; } .news-events .news-events-news .highlight { padding: 0 15px; } .news-events .news-events-news .highlight .news-image { height: 200px; padding: 0; background-repeat: no-repeat; background-position-x: center; background-position-y: top !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .news-events .news-events-news .highlight .news-image .mask { position: relative; display: block; width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); } .news-events .news-events-news .highlight .news-image .mask .row { height: 100%; } .news-events .news-events-news .highlight .news-image .mask .row > div { height: 100%; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner { display: table; width: 100%; height: 100%; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content { display: table-cell; padding-top: 10px; position: relative; width: 100%; height: 100%; vertical-align: middle; text-align: center; } @media screen and (max-width: 992px) { .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content .news-content { display: inline-block; width: 75%; } } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content h2, .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.content-filter-activator { color: #fff; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 1.4; display: block; /* Fallback for non-webkit */ display: -webkit-box; text-overflow: ellipsis; overflow: hidden; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 84px; padding-left: 10px; padding-right: 10px; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content .date { color: #e3f0fd; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content .date i.fa { color: #e3f0fd; margin-right: 5px; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link { display: inline-block; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; z-index: 2; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; } @media screen and (max-width: 992px) { .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link { position: absolute; right: -7px; bottom: 20px; } .news-events .news-events-news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link:after { clear: both; } } .news-events .news-events-news .highlight .news-image:hover .mask { background: none; } .news-events .news-events-news .highlight:first-of-type .news-image { border-radius: 20px; } .news-events .news-events-news .highlight:first-of-type .news-image .mask { border-radius: 20px; } .news-events .news-events-news .more-news { padding: 0 15px; } .news-events .news-events-news .more-news .background { background-color: #fff; border-radius: 0 0 20px 20px; margin-bottom: 30px; padding: 40px 20px 40px 40px; } .news-events .news-events-news .more-news .background h2, .news-events .news-events-news .more-news .background .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-events .news-events-news .more-news .background a.content-filter-activator { color: #002663; font-family: "Bree Serif"; font-size: 26px; font-weight: 400; line-height: 34px; margin-bottom: 20px; } .news-events .news-events-news .more-news .background ul { position: relative; display: inline-block; width: 100%; margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .news-events .news-events-news .more-news .background ul li { width: calc(100% - 30px); list-style-type: none; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .news-events .news-events-news .more-news .background ul li a { position: relative; display: inline-block; width: 100%; color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .news-events .news-events-news .more-news .background ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .news-events .events { position: relative; display: inline-block; margin: 0; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 38, 99, 0.2); margin-bottom: 15px; } .news-events .events h2, .news-events .events .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-events .events a.content-filter-activator { color: #002663; font-family: "Bree Serif"; font-size: 26px; font-weight: 400; line-height: 34px; padding: 20px 40px 0 32px; margin-top: 10px; } .news-events .events .row { background-color: #fff; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); border-bottom: 2px solid #e3f0fd; padding: 10px 0; } .news-events .events .row a .date-time { display: inline-block; margin-left: 30px; font-size: 12px; font-weight: 700; line-height: 18px; } .news-events .events .row a .date-time:before { font-family: 'FontAwesome'; content: '\f017'; color: #0c74d5; font-size: 18px; font-weight: 400; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; top: 2px; } .news-events .events .row a .title { display: inline-block; margin-left: 30px; max-width: calc(100% - 30px); } .news-events .events .row.mod-1 { background-image: none; } .news-events .events .row:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .news-events .events .more-container { padding: 20px 40px; } /*CONTENT FILTERED*/ .contentFilterHolder:not(.selected) { padding-left: 0; display: inline-block !important; } .contentFilterHolder:not(.selected) .newsTitle { padding-left: 40px; } .contentFilterHolder:not(.selected) .title { height: 50px; padding: 0; margin: 0; } .contentFilterHolder:not(.selected) .title .fa-chevron-down { -webkit-transition: all .5s; transition: all .5s; } .contentFilterHolder:not(.selected) .title h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { color: #002663; font-family: "Bree Serif"; font-size: 4vw; font-weight: 400; line-height: 40px; margin-bottom: 20px; } @media screen and (max-width: 478px) { .contentFilterHolder:not(.selected) .title h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { font-size: 7.1vw; margin-left: 0 !important; margin-top: 20px; } } @media screen and (min-width: 992px) { .contentFilterHolder:not(.selected) .title h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { font-size: 32px; } } .contentFilterHolder:not(.selected) .title i { color: #f77c00; font-size: 20px; margin-left: 10px; position: relative; top: -3px; } .contentFilterHolder:not(.selected) .title span { display: inline-block; margin-right: 5px; } .contentFilterHolder:not(.selected) .title span + span > a h2, .contentFilterHolder:not(.selected) .title span + span > a h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a a.content-filter-activator { margin-left: 0; color: #f77c00; } @media screen and (max-width: 992px) { .contentFilterHolder:not(.selected) .title span + span > a h2, .contentFilterHolder:not(.selected) .title span + span > a h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a a.content-filter-activator { border-bottom: 2px #f77c00 dotted; } } @media screen and (min-width: 992px) { .contentFilterHolder:not(.selected) .title span + span > a h2, .contentFilterHolder:not(.selected) .title span + span > a h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a a.content-filter-activator { border-bottom: 2px solid transparent; } } .contentFilterHolder:not(.selected) .title span + span > a:hover, .contentFilterHolder:not(.selected) .title span + span > a:active, .contentFilterHolder:not(.selected) .title span + span > a:focus, .contentFilterHolder:not(.selected) .title span + span > a:visited { text-decoration: none; cursor: pointer; } .contentFilterHolder:not(.selected) .title span + span > a:hover h2, .contentFilterHolder:not(.selected) .title span + span > a:hover h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a:hover a.content-filter-activator, .contentFilterHolder:not(.selected) .title span + span > a:active h2, .contentFilterHolder:not(.selected) .title span + span > a:active h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a:active a.content-filter-activator, .contentFilterHolder:not(.selected) .title span + span > a:focus h2, .contentFilterHolder:not(.selected) .title span + span > a:focus h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a:focus a.content-filter-activator, .contentFilterHolder:not(.selected) .title span + span > a:visited h2, .contentFilterHolder:not(.selected) .title span + span > a:visited h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span + span > a:visited a.content-filter-activator { margin-left: 0; color: #f77c00; border-bottom: 2px #f77c00 dotted; } .contentFilterHolder:not(.selected) .title span.menuOpen { background-color: #fff; position: relative; z-index: 10; height: 40px; } .contentFilterHolder:not(.selected) .title span.menuOpen .fa-chevron-down { -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); } .contentFilterHolder:not(.selected) .title span.menuOpen:before { content: ""; position: absolute; top: 0; width: 15px; left: -15px; height: 100%; background: #fff; border-top-left-radius: 20px; } .contentFilterHolder:not(.selected) .title span.menuOpen:after { content: ""; position: absolute; top: 0; width: 15px; right: -15px; height: 100%; background: #fff; border-top-right-radius: 20px; } .contentFilterHolder:not(.selected) .title span.menuOpen a > h2, .contentFilterHolder:not(.selected) .title span.menuOpen h2 a > a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 span.menuOpen a > a.content-filter-activator { border: none; } .contentFilterHolder:not(.selected) .filter { position: relative; top: -10px; } .contentFilterHolder:not(.selected) .filter #content-filter { display: block; } .contentFilterHolder:not(.selected) .news .highlight { padding: 0 15px; } .contentFilterHolder:not(.selected) .news .highlight .news-image { padding: 0; margin-top: 40px; width: 300px; background-repeat: no-repeat; background-position-x: center; background-position-y: top !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 992px) { .contentFilterHolder:not(.selected) .news .highlight .news-image { height: 200px; } } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask { position: relative; display: block; width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row { height: 100%; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div { height: 100%; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner { display: table; width: 100%; height: 100%; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content { display: table-cell; padding-top: 10px; position: relative; width: 100%; height: 100%; vertical-align: middle; text-align: center; } @media screen and (max-width: 992px) { .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content .news-content { display: inline-block; width: 75%; } } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content h2, .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.content-filter-activator { color: #fff; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 1.4; display: block; /* Fallback for non-webkit */ display: -webkit-box; text-overflow: ellipsis; overflow: hidden; white-space: normal; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 84px; padding-left: 10px; padding-right: 10px; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content .date { color: #e3f0fd; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content .date i.fa { color: #e3f0fd; margin-right: 5px; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link { display: inline-block; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; z-index: 2; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; } @media screen and (max-width: 992px) { .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link { position: absolute; right: -7px; bottom: 20px; } .contentFilterHolder:not(.selected) .news .highlight .news-image .mask .row > div .content-valigner .news-image-content a.more-link:after { clear: both; } } .contentFilterHolder:not(.selected) .news .highlight:first-of-type .news-image { border-radius: 20px 20px; } .contentFilterHolder:not(.selected) .news .highlight:first-of-type .news-image .mask { border-radius: 20px 20px; } .contentFilterHolder:not(.selected) .news .more-news { padding: 0 15px; } .contentFilterHolder:not(.selected) .news .more-news .background { background-color: #fff; margin-bottom: 30px; padding: 40px 0 40px 40px; } .contentFilterHolder:not(.selected) .news .more-news .background h2, .contentFilterHolder:not(.selected) .news .more-news .background .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news .more-news .background a.content-filter-activator { color: #002663; font-family: "Bree Serif"; font-size: 26px; font-weight: 400; line-height: 34px; margin-bottom: 20px; } .contentFilterHolder:not(.selected) .news .more-news .background ul { position: relative; display: inline-block; width: 100%; margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .contentFilterHolder:not(.selected) .news .more-news .background ul li { width: calc(100% - 30px); list-style-type: none; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .contentFilterHolder:not(.selected) .news .more-news .background ul li a { position: relative; display: inline-block; width: 100%; color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .contentFilterHolder:not(.selected) .news .more-news .background ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .contentFilterHolder.selected .title { margin-bottom: 10px !important; } .contentFilterHolder.selected .selectedNewsSettings .item { position: relative; display: inline-block; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 3px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; margin-right: 5px; } /*DOUBLE CALL TO ACTION*/ .doubleCallToAction { margin-bottom: 80px; } .doubleCallToAction .flexcontainer { margin: 0 auto; background-image: url("/files/templates/designs/kwpn/images/call-to-action-background.svg"); background-color: #e3f0fd; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; align-items: center; justify-content: space-around; position: relative; } .doubleCallToAction .left_panel, .doubleCallToAction .right_panel { padding: 5px; min-width: 220px; min-height: 100px; flex: 50%; flex-grow: 1; flex-wrap: wrap; color: white; position: relative; } .doubleCallToAction .left_panel ul, .doubleCallToAction .right_panel ul { padding: 0; } .doubleCallToAction .left_panel li, .doubleCallToAction .right_panel li { list-style-type: none; } .doubleCallToAction .left_panel li:before, .doubleCallToAction .right_panel li:before { font-family: 'FontAwesome'; content: '\f00c'; color: #0c74d5; font-size: 12px; min-width: 20px; line-height: 28px; padding-right: 10px; } .doubleCallToAction .left_panel a, .doubleCallToAction .right_panel a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .doubleCallToAction .left_content, .doubleCallToAction .right_content { padding-left: 10%; padding-right: 10%; /*Set the margin to fit the height of the cta buttons*/ margin-top: 50px; } .doubleCallToAction .left_content h2, .doubleCallToAction .left_content .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .doubleCallToAction .left_content a.content-filter-activator { font-family: "Bree Serif"; font-size: 26px; font-weight: 400; line-height: 34px; } .doubleCallToAction .right_content { color: #fff; } .doubleCallToAction .right_content li { color: #fff; } .doubleCallToAction .right_content h2, .doubleCallToAction .right_content .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .doubleCallToAction .right_content a.content-filter-activator { color: #fff; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; } .doubleCallToAction .highlight { /*flex: 1 0 50%;*/ top: 10px; position: absolute; margin-right: 30px; margin-top: 15px; max-width: 150px; height: auto; background-image: linear-gradient(to right, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 20px 0; color: #002663 !important; font-weight: bold; font-size: 12px; padding: 15px; line-height: 18px; } .doubleCallToAction #highlight_l { right: 50%; } .doubleCallToAction #highlight_r { right: 0; color: #fff; } .doubleCallToAction .call-to-action { padding: 0 5% 10% 0; } .doubleCallToAction .call-to-action .btn-primary { width: auto; height: 50px; background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); border-radius: 20px 20px 0; padding: 10px 15px; color: #fff !important; border-width: 0; font-family: "Bree Serif"; font-size: 18px; line-height: 26px; } .doubleCallToAction .call-to-action .btn-primary i { color: #fff !important; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } .doubleCallToAction .call-to-action .btn-primary:hover { background-image: linear-gradient(to top, #002663 0%, #3a9af4 100%); } @media screen and (max-width: 720px) { #membershipwrapper .container { padding-left: 0; padding-right: 0; } .doubleCallToAction .flexcontainer { background-image: none; border-radius: 0; } .doubleCallToAction .flexcontainer .right_panel { background-color: #002663; } .doubleCallToAction .flexcontainer #highlight_r { background-color: #002663; } .doubleCallToAction .flexcontainer #highlight_l { right: auto; } .doubleCallToAction .flexcontainer .highlight { position: relative; margin-right: 15px; margin-bottom: 30px; } .doubleCallToAction .flexcontainer .left_content, .doubleCallToAction .flexcontainer .right_content { padding-left: 15px; padding-right: 15px; margin-top: 25px; } .doubleCallToAction .flexcontainer .btn-primary { width: 100%; } .doubleCallToAction .flexcontainer h2, .doubleCallToAction .flexcontainer .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .doubleCallToAction .flexcontainer a.content-filter-activator { clear: both; } } /*FOOTER LOGOS*/ .logo-publisher { min-height: 100px; margin-bottom: 80px; background-color: transparent; } .logo-publisher .partner-logos { height: 100px; /*display: table-cell;*/ vertical-align: middle; } .logo-publisher .partner-logos .partnerLogo { float: left; margin-bottom: 15px; margin-right: 25px; } .logo-publisher .partner-logos .partnerLogo img { max-height: 100px; } .logo-publisher .partner-logos .partnerLogo:last-child { margin-right: 0; } /*CONTACT PERSONS*/ .contactperson-publisher { margin-top: 20px; margin-bottom: 40px; } .contactperson-publisher .contactperson-tile-container { display: flex !important; flex-flow: row; flex-direction: row; flex-wrap: wrap; } .contactperson-publisher .contactperson-tile-container a { text-decoration: none; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile { width: 270px; padding: 15px; border-radius: 20px; border: 2px solid #fff; margin-bottom: 20px; background-color: #fff; padding-bottom: 10px; margin-right: 15px; background: none; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div { width: 100%; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.photo { margin-top: 5px; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.photo img { max-width: 140px; max-height: 140px; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.function { margin-top: 25px; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.name { margin-top: 10px; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 38px; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.email, .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.email a, .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.telephone, .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.telephone a { margin-top: 5px; color: #002663; font-size: 12px; font-size: 16px; font-weight: 400; line-height: 32px; text-decoration: none; } .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.email i.fa, .contactperson-publisher .contactperson-tile-container a .contactperson-tile div.telephone i.fa { color: #0c74d5; font-size: 12px; font-weight: 400; line-height: 32px; margin-right: 10px; } .contactperson-publisher .contactperson-tile-container a:hover .contactperson-tile { border: 2px solid #e3f0fd; background: #fff; background: -moz-linear-gradient(top, #fff 52%, #e3f0fd 85%); background: -webkit-linear-gradient(top, #fff 52%, #e3f0fd 85%); background: linear-gradient(to bottom, #fff 52%, #e3f0fd 85%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8f0fc',GradientType=0 ); } /*DOWNLOAD ITEMS*/ .download-publicator { margin-bottom: 40px; } .download-publicator .download-row { width: 100%; background-color: #fff; border-bottom: 2px solid #e3f0fd; padding: 10px 0; } .download-publicator .download-row .clock { position: relative; display: block; padding-top: 10px; } .download-publicator .download-row .clock i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; } .download-publicator .download-row .date { position: relative; display: block; float: left; clear: both; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; padding-top: 10px; } .download-publicator .download-row .title { position: relative; display: block; float: left; clear: both; font-family: "Bree Serif"; color: #002663; font-size: 24px; font-weight: 400; line-height: 32px; } .download-publicator .download-row .note { position: relative; padding: 5px 10px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; margin-left: 10px; white-space: nowrap; } .download-publicator .download-row .download-items { /*tooltips*/ } .download-publicator .download-row .download-items .tooltip.top .tooltip-inner { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); min-width: 100px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; } .download-publicator .download-row .download-items .tooltip.top .tooltip-arrow { border-top-color: #3a9af4; } .download-publicator .download-row .download-items a { margin-left: 20px; } .download-publicator .download-row .download-items a .download-item { display: inline-block; width: 50px; height: 50px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 15px; font-size: 20px; font-weight: 400; line-height: 20px; } .download-publicator .download-row .download-items a .download-item i.fa { color: #fff; } .download-publicator .download-row .download-items a:first-of-type { margin-left: 0; } .download-publicator .download-row .download-items a:hover .download-item { background-image: none; } .download-publicator .download-row:first-of-type { border-top: 2px solid #e3f0fd; } .download-publicator .download-row.mod-1 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 52%, #fff 100%); } /*ADVERT*/ .advert { margin-bottom: 40px; text-align: center; } .advert .advert-container { width: 100%; } .advert .advert-container img { max-width: 100%; border-radius: 0 !important; object-fit: contain; } /*PHOTO ALBUM*/ .photo-album .photo-album-previews-container { margin-bottom: 20px; } .photo-album .photo-album-previews-container div { margin-bottom: 30px; } .photo-album .photo-album-previews-container div a .photo { width: 100%; border-radius: 20px; background-repeat: no-repeat; background-position-x: center; background-position-y: center !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin: 0; } .photo-album .photo-album-previews-container div a .caption { width: 100%; padding-top: 10px; margin: 0; } /*CONTENTBLOCK*/ .content-publicator .break-grid { margin-bottom: 0 !important; } .content-publicator .break-grid .break-grid-background { margin-bottom: 0 !important; } .content-publicator .break-grid .break-grid-background .in-grid { padding-bottom: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .content-publicator span.subtitle { text-transform: uppercase; font-size: 12px; font-weight: 700; } .content-publicator img.Top { max-width: 100%; margin-bottom: 20px; border-radius: 20px; } .content-publicator img.Right { max-width: 100%; margin-left: 20px; margin-bottom: 20px; border-radius: 20px; } .content-publicator img.Bottom { max-width: 100%; margin-top: 20px; border-radius: 20px; } .content-publicator img.Left { max-width: 100%; margin-right: 20px; margin-bottom: 20px; border-radius: 20px; } .content-publicator.bottom-margin { margin-bottom: 40px !important; } /* PAGES -------------------------------------------------------------------------------------------------------*/ /* WEBSHOP */ .webshop .webshopProduct { padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #d0e7fc; } .webshop .webshopProduct img { max-width: 100%; } .webshop .webshopProduct h2, .webshop .webshopProduct .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .webshop .webshopProduct a.content-filter-activator { margin-top: 0; } .webshop .webshopProduct .productPrice { height: 18px; font-size: 12px; font-weight: 700; line-height: 18px; color: #f77c00; margin-bottom: 10px; } .webshop .webshopProduct .productPrice .memberProductPrice { height: 18px; font-size: 12px; font-weight: 700; line-height: 18px; color: #0c74d5; } .webshop .webshopProduct .productDescription { position: relative; display: inline-block; margin-bottom: 20px; } /*DASHBOARD*/ .dashboard h1 { margin-bottom: 40px; color: #002663; font-family: "Bree Serif"; font-size: 40px; font-weight: 400; line-height: 48px; } .dashboard span.username { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 3px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; display: inline-block; margin-bottom: 20px; } .dashboard .dashboard-container { background-color: #fff; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 38, 99, 0.2); margin-bottom: 30px; padding-bottom: 20px; } .dashboard .dashboard-container h1, .dashboard .dashboard-container h2, .dashboard .dashboard-container .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .dashboard .dashboard-container a.content-filter-activator, .dashboard .dashboard-container h3, .dashboard .dashboard-container h4, .dashboard .dashboard-container h5 { padding: 40px 20px 20px 30px; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .dashboard .dashboard-container .animal-item { width: 100%; background-color: #fff; margin-left: 0; border-bottom: 2px solid #e3f0fd; padding-left: 15px; } .dashboard .dashboard-container .animal-item .gender { position: relative; display: block; padding: 5px 0; } .dashboard .dashboard-container .animal-item .gender i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; } .dashboard .dashboard-container .animal-item .name { position: relative; display: block; float: left; clear: both; padding: 10px 0 0 0; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .dashboard .dashboard-container .animal-item .parents { position: relative; display: block; float: left; clear: both; padding: 0 0 10px 0; color: #002663; font-size: 12px; } .dashboard .dashboard-container .animal-item .parents abbr { font-size: 12px; font-weight: 400; line-height: 18px; } .dashboard .dashboard-container .animal-item.mod-1 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } .dashboard .dashboard-container .animal-item:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 52%, #fff 100%); } .dashboard .dashboard-container .animal-item:first-of-type { border-top: 2px solid #e3f0fd; } .dashboard .dashboard-container .my-data { width: 100%; margin-left: 0; padding: 0 15px; margin-bottom: 15px; } .dashboard .dashboard-container .my-data i.fa { color: #0c74d5; font-size: 12px; font-weight: 400; line-height: 12px; } .dashboard .dashboard-container .my-data span { position: relative; display: block; float: left; clear: both; padding: 8px 0 0 0; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .dashboard .dashboard-container a.more { min-width: 50px; position: relative; display: block; margin: 0 20px 20px 20px; } .dashboard .dashboard-container a.more span { display: inline-block; float: left; white-space: nowrap; background-color: #002663; border-radius: 0 0 0 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; width: calc(100% - 50px); } .dashboard .dashboard-container a.more i { display: inline-block; float: left; background-color: #0c74d5; color: #fff; font-size: 12px; font-weight: 400; border-radius: 0 20px 0 0; line-height: 12px; padding: 20px 20px; width: 50px; height: 50px; background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); } .dashboard .dashboard-container a.more:hover i { background-image: none; } .dashboard .link-list { width: 100%; background-color: #fff; position: relative; display: inline-block; float: left; clear: both; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 38, 99, 0.2); margin-bottom: 30px; padding-bottom: 20px; } .dashboard .link-list h1, .dashboard .link-list h2, .dashboard .link-list .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .dashboard .link-list a.content-filter-activator, .dashboard .link-list h3, .dashboard .link-list h4, .dashboard .link-list h5 { padding: 40px 20px 20px 30px; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .dashboard .link-list ul { margin: 0 0 0 15px; padding: 0; display: inline-block; position: relative; clear: both; } .dashboard .link-list ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 45px; line-height: 28px; margin-bottom: 12px; } .dashboard .link-list ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .dashboard .link-list ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } .dashboard .link-list a.link-list-button { min-width: 50px; position: relative; display: block; margin: 0 20px 20px 20px; } .dashboard .link-list a.link-list-button span { display: inline-block; float: left; white-space: nowrap; background-color: #002663; border-radius: 0 0 0 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; width: calc(100% - 50px); } .dashboard .link-list a.link-list-button i { display: inline-block; float: left; background-color: #0c74d5; color: #fff; font-size: 12px; font-weight: 400; border-radius: 0 20px 0 0; line-height: 12px; padding: 20px 20px; width: 50px; height: 50px; background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); } .dashboard .link-list a.link-list-button:hover i { background-image: none; } /*SEARCH RESULT*/ .seach-result { /*h2 span { margin-left: 20px; }*/ } .seach-result span.resultCount { position: absolute; display: block; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 3px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; top: -30px; text-transform: uppercase; } .seach-result .search-sort { font-size: 10pt; width: 100%; padding: 4px 2px; margin-top: 15px; margin-bottom: 30px; } @media screen and (min-width: 1024px) { .seach-result .search-sort { float: right; width: auto; margin-top: -35px; margin-bottom: 0; } } .seach-result .search-sort option { font-size: 10pt; } .seach-result .search-result { background-color: #fff; border-bottom: 2px solid #e3f0fd; padding: 10px 0; } .seach-result .search-result a.search-result-link { text-decoration: none; } .seach-result .search-result a.search-result-link .date { color: #0c74d5; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .seach-result .search-result a.search-result-link .date i.fa { color: #0c74d5; margin-right: 15px; } .seach-result .search-result a.search-result-link strong { font-size: inherit; color: #f77c00; } .seach-result .search-result a.search-result-link h3 { color: #002663; font-family: Verdana; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; margin: 10px 0; } .seach-result .search-result.mod-1 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); border-bottom: 2px solid #e3f0fd; } .seach-result .search-result:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } /*EVENT LIST / NEWS LIST*/ .event-list h1, .news-list h1 { margin-bottom: 20px; margin-bottom: 65px; } .event-list .news-highlight, .news-list .news-highlight { height: 450px; position: relative; display: inline-block; margin-bottom: 40px; padding: 0 10px; border-radius: 20px; text-align: center; } .event-list .news-highlight .news-highlight-image, .news-list .news-highlight .news-highlight-image { position: relative; display: inline-block; width: 100%; height: 100%; background-repeat: no-repeat; background-position-x: center; background-position-y: top !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; border-radius: 20px; } .event-list .news-highlight .news-highlight-image .news-highlight-mask, .news-list .news-highlight .news-highlight-image .news-highlight-mask { position: relative; display: block; width: 100%; height: 100%; background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#99000000',GradientType=0 ); border-radius: 20px; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner { display: table; width: 100%; height: 100%; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content { position: relative; display: table-cell; width: 100%; height: 100%; padding: 40px; vertical-align: middle; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .note, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .note { position: absolute; top: 22px; right: 30px; padding: 5px 10px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .highlight, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .highlight { position: absolute; top: 10px; left: 30px; padding: 10px 20px; background-image: linear-gradient(to right, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 20px 0; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .date, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .date { position: relative; display: inline-block; width: 100%; float: left; clear: both; color: #e3f0fd; font-size: 12px; font-weight: 700; line-height: 18px; margin-bottom: 15px; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .title, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .title { position: relative; display: inline-block; width: 100%; float: left; clear: both; color: #fff; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; margin-bottom: 15px; } .event-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .shortdescription, .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .shortdescription { position: relative; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; width: 100%; float: left; clear: both; color: #e3f0fd; font-size: 16px; font-weight: 400; line-height: 28px; } .event-list .news-highlight .news-highlight-image .news-highlight-mask:hover, .news-list .news-highlight .news-highlight-image .news-highlight-mask:hover { background: none; filter: none; } .event-list .event-list-filter .checkbox input, .event-list .news-list-filter .checkbox input, .news-list .event-list-filter .checkbox input, .news-list .news-list-filter .checkbox input { position: relative; display: inline-block; margin-right: 15px; } .event-list .event-list-output .event-list-row, .event-list .event-list-output .news-list-row, .event-list .news-list-output .event-list-row, .event-list .news-list-output .news-list-row, .news-list .event-list-output .event-list-row, .news-list .event-list-output .news-list-row, .news-list .news-list-output .event-list-row, .news-list .news-list-output .news-list-row { width: 100%; min-height: 100px; background-color: #fff; padding: 22px 0; border-bottom: 2px solid #e3f0fd; } .event-list .event-list-output .event-list-row h2, .event-list .event-list-output .event-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .event-list .event-list-output .event-list-row a.content-filter-activator, .event-list .event-list-output .news-list-row h2, .event-list .event-list-output .news-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .event-list .event-list-output .news-list-row a.content-filter-activator, .event-list .news-list-output .event-list-row h2, .event-list .news-list-output .event-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .event-list .news-list-output .event-list-row a.content-filter-activator, .event-list .news-list-output .news-list-row h2, .event-list .news-list-output .news-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .event-list .news-list-output .news-list-row a.content-filter-activator, .news-list .event-list-output .event-list-row h2, .news-list .event-list-output .event-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-list .event-list-output .event-list-row a.content-filter-activator, .news-list .event-list-output .news-list-row h2, .news-list .event-list-output .news-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-list .event-list-output .news-list-row a.content-filter-activator, .news-list .news-list-output .event-list-row h2, .news-list .news-list-output .event-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-list .news-list-output .event-list-row a.content-filter-activator, .news-list .news-list-output .news-list-row h2, .news-list .news-list-output .news-list-row .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-list .news-list-output .news-list-row a.content-filter-activator { color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; margin-top: 10px; } .event-list .event-list-output .event-list-row i, .event-list .event-list-output .news-list-row i, .event-list .news-list-output .event-list-row i, .event-list .news-list-output .news-list-row i, .news-list .event-list-output .event-list-row i, .news-list .event-list-output .news-list-row i, .news-list .news-list-output .event-list-row i, .news-list .news-list-output .news-list-row i { color: #0c74d5; position: absolute; margin-top: 2px; } .event-list .event-list-output .event-list-row .date-time, .event-list .event-list-output .news-list-row .date-time, .event-list .news-list-output .event-list-row .date-time, .event-list .news-list-output .news-list-row .date-time, .news-list .event-list-output .event-list-row .date-time, .news-list .event-list-output .news-list-row .date-time, .news-list .news-list-output .event-list-row .date-time, .news-list .news-list-output .news-list-row .date-time { font-size: 12px; font-weight: 700; line-height: 18px; } .event-list .event-list-output .event-list-row .date-time .date, .event-list .event-list-output .news-list-row .date-time .date, .event-list .news-list-output .event-list-row .date-time .date, .event-list .news-list-output .news-list-row .date-time .date, .news-list .event-list-output .event-list-row .date-time .date, .news-list .event-list-output .news-list-row .date-time .date, .news-list .news-list-output .event-list-row .date-time .date, .news-list .news-list-output .news-list-row .date-time .date { font-size: 12px; font-weight: 700; line-height: 18px; margin-right: 15px; } .event-list .event-list-output .event-list-row .note, .event-list .event-list-output .news-list-row .note, .event-list .news-list-output .event-list-row .note, .event-list .news-list-output .news-list-row .note, .news-list .event-list-output .event-list-row .note, .news-list .event-list-output .news-list-row .note, .news-list .news-list-output .event-list-row .note, .news-list .news-list-output .news-list-row .note { display: inline-block; padding: 2px 10px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-transform: uppercase; margin: 10px 0; } .event-list .event-list-output .event-list-row .highlight, .event-list .event-list-output .news-list-row .highlight, .event-list .news-list-output .event-list-row .highlight, .event-list .news-list-output .news-list-row .highlight, .news-list .event-list-output .event-list-row .highlight, .news-list .event-list-output .news-list-row .highlight, .news-list .news-list-output .event-list-row .highlight, .news-list .news-list-output .news-list-row .highlight { width: 124px; padding: 10px 20px; background-image: linear-gradient(to right, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 20px 0; font-size: 12px; font-weight: 700; line-height: 18px; float: right; text-transform: uppercase; white-space: nowrap; } .event-list .event-list-output .event-list-row .regionlabel, .event-list .event-list-output .news-list-row .regionlabel, .event-list .news-list-output .event-list-row .regionlabel, .event-list .news-list-output .news-list-row .regionlabel, .news-list .event-list-output .event-list-row .regionlabel, .news-list .event-list-output .news-list-row .regionlabel, .news-list .news-list-output .event-list-row .regionlabel, .news-list .news-list-output .news-list-row .regionlabel { display: inline-block; padding: 2px 10px; background-image: linear-gradient(to left, #f77c00 0%, #ffa245 100%); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-transform: uppercase; margin: 10px 0; } .event-list .event-list-output .event-list-row.mod-1, .event-list .event-list-output .news-list-row.mod-1, .event-list .news-list-output .event-list-row.mod-1, .event-list .news-list-output .news-list-row.mod-1, .news-list .event-list-output .event-list-row.mod-1, .news-list .event-list-output .news-list-row.mod-1, .news-list .news-list-output .event-list-row.mod-1, .news-list .news-list-output .news-list-row.mod-1 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } .event-list .event-list-output .event-list-row:hover, .event-list .event-list-output .news-list-row:hover, .event-list .news-list-output .event-list-row:hover, .event-list .news-list-output .news-list-row:hover, .news-list .event-list-output .event-list-row:hover, .news-list .event-list-output .news-list-row:hover, .news-list .news-list-output .event-list-row:hover, .news-list .news-list-output .news-list-row:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .event-list .news-list-output .news-list-row .note, .news-list .news-list-output .news-list-row .note { position: relative; display: inline-block; width: auto; /*float: right;*/ margin-left: 15px; } .event-list .news-list-output .news-list-row .highlight, .news-list .news-list-output .news-list-row .highlight { position: relative; display: inline-block; width: auto; float: left; margin-left: 15px; } /*EVENT DETAIL*/ .event-detail .note { position: relative; display: inline-block; padding: 2px 10px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-transform: uppercase; } .event-detail .background-head-xs .page-header .notification { background-color: #d0e7fc; border-radius: 10px; margin: 15px 0; padding: 20px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; } .event-detail .background-head-xs .page-header .note { background-color: #d0e7fc; border-radius: 10px; margin: 15px 0; padding: 5px 20px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; position: relative; top: -17px; width: auto; margin-left: 15px; } .event-detail .background-head-xs .page-header .highlight { background-color: #d0e7fc; border-radius: 10px; margin: 15px 0 0 0; padding: 5px 20px; background-image: linear-gradient(to right, #ffa245 0%, #f77c00 100%); border-radius: 10px; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .event-detail .background-head-xs .regionlabel { display: inline-block; padding: 2px 10px; background-image: linear-gradient(to left, #f77c00 0%, #ffa245 100%); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-transform: uppercase; margin: 10px 0; } .event-detail .event-detail-aside ul li.contact-name:before { content: '\f007' !important; font-size: 16px; } .event-detail .event-detail-aside ul li.contact-phone:before { content: '\f095' !important; font-size: 16px; } .event-detail .event-detail-aside ul li.contact-email:before { content: '\f112' !important; font-size: 16px; } .event-detail .event-detail-aside ul li.contact-website:before { content: '\f044' !important; font-size: 16px; } .event-detail .event-detail-aside ul li.contact-facebook:before { content: '\f09a' !important; font-size: 16px; } .event-detail .event-detail-output a { color: #f77c00; } .event-detail .event-detail-output a.backlink { min-width: 50px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 12px 40px 12px 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; text-decoration: none; margin-top: 40px; position: relative; display: inline-block; } .event-detail .event-detail-output a.backlink i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } .event-detail .event-detail-output a.backlink:hover { background-image: none; } .event-detail .event-detail-output img { max-width: 100%; border-radius: 20px; } .event-detail .event-detail-output ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .event-detail .event-detail-output ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .event-detail .event-detail-output ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .event-detail .event-detail-output ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } .event-detail .event-detail-output .event-info { margin-bottom: 40px; } .event-detail .event-detail-output .event-info i.fa { color: #0c74d5; } .event-detail .event-detail-output .description { margin-bottom: 40px; } .event-detail .event-detail-output .well.notification { margin-bottom: 40px; background-color: #d0e7fc; border-radius: 10px; border: none; color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px; } .event-detail .event-detail-output .geolocation { position: relative; } .event-detail .event-detail-output .geolocation .location.well { position: absolute; background-color: #fff; border-radius: 20px; left: 40px; top: 40px; padding: 40px; } .event-detail .event-detail-output .geolocation .location.well h3 { margin-top: 0; } .event-detail .event-detail-output .geolocation a.navigation-link { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; } .event-detail .event-detail-output .geolocation a.navigation-link i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 5px; left: 0; top: 3px; } .event-detail .event-detail-output .geolocation a.navigation-link:hover { border-bottom: 4px solid #f77c00; } /*Change password*/ #change-password .changepassword-selectdiv, .change-password .changepassword-selectdiv { margin: 0px 0px 20px 0px; } #change-password .changePasswordMessageRow, .change-password .changePasswordMessageRow { display: none; } #change-password .fa-chevron-right, .change-password .fa-chevron-right { width: 9px; height: 12px; font-family: FontAwesome; font-size: 12px; text-align: center; line-height: 12px; color: #FFFFFF; } #change-password .aside-menu-item-selected, .change-password .aside-menu-item-selected { background: linear-gradient(270deg, #0C74D5 0%, #3A9AF4 100%); border-radius: 10px; } #change-password span.username, .change-password span.username { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 3px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; display: inline-block; margin-bottom: 20px; } #change-password ul, .change-password ul { margin: 20px 0 0 15px; padding: 0; } #change-password ul li, .change-password ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 15px; line-height: 28px; margin-bottom: 12px; } #change-password ul li a, .change-password ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } #change-password ul li:before, .change-password ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } #change-password label, .change-password label { width: 155px; font-family: Verdana; font-size: 12px; font-weight: bold; line-height: 18px; color: #002663; margin: 10px 0px 0px 0px; } #change-password #input-label, #change-password .input-label, .change-password #input-label, .change-password .input-label { width: 167px; height: 18px; font-family: Verdana; font-size: 11px; font-weight: bold; line-height: 18px; color: #F77C00; display: none; } #change-password checkbox-label, .change-password checkbox-label { width: 155px; height: 72px; font-family: Verdana; font-size: 12px; font-weight: bold; line-height: 18px; color: #002663; } #change-password .submit-button, .change-password .submit-button { color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none; border: 0px; } #change-password .backlink, .change-password .backlink { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; display: inline-block; } #change-password .fa-chevron-right, .change-password .fa-chevron-right { width: 9px; height: 12px; font-family: FontAwesome; font-size: 12px; text-align: center; line-height: 12px; color: #FFFFFF; } #change-password .fa-asterisk, .change-password .fa-asterisk { color: #f77c00; font-size: 8px; vertical-align: text-top; padding-left: 3px; } #change-password .fa, .change-password .fa { /*width: 24px; height: 24px; background: linear-gradient(180deg, #FFA245 0%, #F77C00 100%); border-radius: 0 10px 0 10px;*/ } #change-password input[type=email], #change-password input[type=tel], #change-password input[type=text], #change-password input[type=password], .change-password input[type=email], .change-password input[type=tel], .change-password input[type=text], .change-password input[type=password] { width: 270px; height: 40px; background-color: #FFFFFF; border: 2px solid #E3F0FD; border-radius: 10px; margin: 0px 0px 20px 0px; } #change-password input, #change-password select, #change-password textarea, .change-password input, .change-password select, .change-password textarea { color: #002663; text-align: left; font-size: 14px; font-style: normal; font-family: Verdana; font-weight: normal; } #change-password input[type=text].disabled, #change-password input[type=password].disabled, .change-password input[type=text].disabled, .change-password input[type=password].disabled { background-color: #F5F9FD; } #change-password .normal, .change-password .normal { position: relative; top: -2px; } /*Terminate Membership*/ #terminate-membership .terminateMembershipMessageRow { display: none; } #terminate-membership .TerminateMembershipOtherReasonRow, #terminate-membership #TerminateMembershipOtherReasonRow { display: none; } #terminate-membership .submit-button { color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none; border: 0px; } #terminate-membership .backlink { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; display: inline-block; } #terminate-membership .fa-chevron-right { width: 9px; height: 12px; font-family: FontAwesome; font-size: 12px; text-align: center; line-height: 12px; color: #FFFFFF; } #terminate-membership .fa-asterisk { color: #f77c00; font-size: 8px; vertical-align: text-top; padding-left: 3px; } #terminate-membership .fa { width: 24px; height: 24px; border-radius: 0 10px 0 10px; } #terminate-membership input[type=email], #terminate-membership input[type=tel], #terminate-membership input[type=text], #terminate-membership input[type=password], #terminate-membership select { width: 270px; height: 40px; background-color: #FFFFFF; border: 2px solid #E3F0FD; border-radius: 10px; margin: 0px 0px 20px 0px; } #terminate-membership input, #terminate-membership select, #terminate-membership textarea { color: #002663; text-align: left; font-size: 14px; font-style: normal; font-family: Verdana; font-weight: normal; } #terminate-membership input[type=text].disabled, #terminate-membership input[type=password].disabled { background-color: #F5F9FD; } #terminate-membership .normal { position: relative; top: -2px; font-weight: normal; text-transform: initial; font-size: 14px; } #terminate-membership #input-label, #terminate-membership .input-label { /*width: 167px;*/ height: 18px; font-family: Verdana; font-size: 11px; font-weight: bold; line-height: 18px; color: #f77c00; display: none; } #terminate-membership span.username { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 3px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; display: inline-block; margin-bottom: 20px; } #terminate-membership .input-group { line-height: 36px; margin-bottom: 30px; } #terminate-membership .input-group label { margin-left: 20px; } #terminate-membership .inline-block { display: table; } #terminate-membership .inline-block .customCheckbox { position: relative; top: 10px; } /*Market place*/ .marketplace .image-preview { margin-top: 25px; margin-bottom: 25px; height: 350px; } .marketplace .image-preview .image-preview-rotate { margin: 15px auto; float: right; cursor: pointer; } @media screen and (min-width: 992px) { .marketplace .image-preview .image-preview-rotate { line-height: 35px !important; font-size: 18px !important; width: 35px !important; height: 35px !important; padding-top: 0 !important; } } #marketplace .marketplace-indicator, .marketplace-page .marketplace-indicator { display: inline-block; padding: 6px 20px; min-width: 100px; width: auto; height: 30px; background: linear-gradient(90deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 20px 0; font-family: Verdana; font-size: 12px; font-weight: 700; line-height: 18px; color: #002663; text-transform: uppercase; white-space: nowrap; } #marketplace #selector-holder input[type="radio"], .marketplace-page #selector-holder input[type="radio"] { margin-right: 10px; } #marketplace #selector-holder label, .marketplace-page #selector-holder label { font-weight: 400; } #marketplace #selector-holder button, .marketplace-page #selector-holder button { color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; background-color: #f77c00; border: 0; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none; } #marketplace #selector-holder button i.fa, .marketplace-page #selector-holder button i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } #marketplace #selector-holder button:disabled, .marketplace-page #selector-holder button:disabled { background-color: silver; background-image: none; } #marketplace #selector-holder button:hover, .marketplace-page #selector-holder button:hover { background-image: none; } #marketplace #selector-holder .marketplaceLoginNotification, .marketplace-page #selector-holder .marketplaceLoginNotification { font-size: 10pt; color: #0c74d5; font-style: italic; } #marketplace-list .select-container, .marketplace-topx .select-container { margin-top: 20px; margin-bottom: 40px; } #marketplace-list .select-container button, .marketplace-topx .select-container button { border-radius: 10px; background-color: #fff; color: #002663; border: 1px solid #d0e7fc; padding: 15px; width: 100%; margin-top: 5px; margin-bottom: 5px; } #marketplace-list .select-container button:hover, .marketplace-topx .select-container button:hover { background: #d0e7fc; color: #002663; border: 1px solid #d0e7fc; } #marketplace-list .select-container button.active, #marketplace-list .select-container button.active:hover, .marketplace-topx .select-container button.active, .marketplace-topx .select-container button.active:hover { background: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); color: #fff; border: 1px solid #ffa245; } @media screen and (min-width: 768px) { #marketplace-list .select-container button, .marketplace-topx .select-container button { max-width: 200px; } } #marketplace-list .filter-container, .marketplace-topx .filter-container { background-color: #f5fafe; margin-bottom: 40px; padding: 20px; border-radius: 20px; } #marketplace-list .filter-container #resultcounter, .marketplace-topx .filter-container #resultcounter { margin-left: 10px; padding: 2px 10px; background: linear-gradient(270deg, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; } #marketplace-list .filter-container .form-control, .marketplace-topx .filter-container .form-control { margin-bottom: 20px; } #marketplace-list .filter-container .btn, #marketplace-list .filter-container .btn-sm, .marketplace-topx .filter-container .btn, .marketplace-topx .filter-container .btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; } #marketplace-list .filter-container ul.dropdown-menu, .marketplace-topx .filter-container ul.dropdown-menu { margin-left: 15px; } #marketplace-list .filter-container ul.dropdown-menu a input, .marketplace-topx .filter-container ul.dropdown-menu a input { margin-right: 10px; } #marketplace-list .result-container .advert .photo, .marketplace-topx .result-container .advert .photo { position: relative; background-color: #002663; height: 150px; overflow: hidden; border-radius: 10px 10px 0 0; background-size: cover; } #marketplace-list .result-container .advert .photo .topadd, .marketplace-topx .result-container .advert .photo .topadd { position: absolute; top: 10px; right: 10px; padding: 2px 10px; background: linear-gradient(270deg, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; } #marketplace-list .result-container .advert .photo .daysremaining, #marketplace-list .result-container .advert .photo .datesince, .marketplace-topx .result-container .advert .photo .daysremaining, .marketplace-topx .result-container .advert .photo .datesince { position: absolute; bottom: 0; left: 0; padding: 0px 10px; background-color: #f5fafe; color: #002663; font-size: 10px; border-radius: 0 10px 0 0; border-left: 1px solid #e3f0fd; } #marketplace-list .result-container .advert .photo .views, .marketplace-topx .result-container .advert .photo .views { position: absolute; bottom: 0; right: 0; padding: 0px 10px; background-color: #f5fafe; color: #002663; font-size: 10px; border-radius: 10px 0 0 0; } #marketplace-list .result-container .advert .photo .views i.fa, .marketplace-topx .result-container .advert .photo .views i.fa { color: #002663; font-size: 10px; } #marketplace-list .result-container .advert .specs, .marketplace-topx .result-container .advert .specs { padding-top: 20px; height: 130px; border-width: 0 1px 1px 1px; border-style: solid; border-color: #e3f0fd; background-color: #f5fafe; border-radius: 0 0 10px 10px; } #marketplace-list .result-container .advert .specs .name, .marketplace-topx .result-container .advert .specs .name { text-transform: uppercase; font-size: 12px; font-weight: 700; line-height: 100%; height: 40px; padding-top: 5px; } #marketplace-list .result-container .advert .specs .pedigree, .marketplace-topx .result-container .advert .specs .pedigree { text-transform: uppercase; font-size: 12px; font-weight: 400; line-height: 100%; height: 24px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #marketplace-list .result-container .advert .specs .price, .marketplace-topx .result-container .advert .specs .price { text-transform: uppercase; font-size: 12px; font-weight: 700; line-height: 100%; height: 30px; color: #f77c00; margin-top: 10px; } #marketplace-list .result-container .advert .specs .title, .marketplace-topx .result-container .advert .specs .title { font-size: 12px; font-weight: 400; line-height: 18px; height: 60px; padding-top: 5px; margin: 0 15px; } #marketplace-list .result-container .advert .specs .location, .marketplace-topx .result-container .advert .specs .location { text-transform: uppercase; font-size: 12px; font-weight: 700; line-height: 100%; height: 30px; color: #f77c00; margin: 0 15px; } #marketplace-list .result-container .advert.topadvert .photo .views, #marketplace-list .result-container .advert.topadvert .photo .daysremaining, #marketplace-list .result-container .advert.topadvert .photo .datesince, #marketplace-list .result-container .advert:hover .photo .views, #marketplace-list .result-container .advert:hover .photo .daysremaining, #marketplace-list .result-container .advert:hover .photo .datesince, .marketplace-topx .result-container .advert.topadvert .photo .views, .marketplace-topx .result-container .advert.topadvert .photo .daysremaining, .marketplace-topx .result-container .advert.topadvert .photo .datesince, .marketplace-topx .result-container .advert:hover .photo .views, .marketplace-topx .result-container .advert:hover .photo .daysremaining, .marketplace-topx .result-container .advert:hover .photo .datesince { background-color: #e3f0fd; } #marketplace-list .result-container .advert.topadvert .specs, #marketplace-list .result-container .advert:hover .specs, .marketplace-topx .result-container .advert.topadvert .specs, .marketplace-topx .result-container .advert:hover .specs { background-color: #e3f0fd; } #marketplace-sell .views, #marketplace-sell .publication, #marketplace-search .views, #marketplace-search .publication { position: relative; display: inline-block; margin-right: 20px; padding: 0 5px; background-color: #d0e7fc; color: #002663; font-size: 10px !important; font-weight: 700; border-radius: 10px; top: -5px; } #marketplace-sell .views i.fa, #marketplace-sell .publication i.fa, #marketplace-search .views i.fa, #marketplace-search .publication i.fa { color: #002663; font-size: 10px; margin-right: 6px; } #marketplace-sell .publication, #marketplace-search .publication { text-transform: uppercase; } #marketplace-sell .subtitle, #marketplace-search .subtitle { text-transform: uppercase; font-weight: 700; font-size: 12px; line-height: 18px; color: #002663; } #marketplace-sell .subtitle i.fa, #marketplace-search .subtitle i.fa { margin-right: 10px; font-weight: 700; font-size: 12px; color: #0c74d5; } #marketplace-sell li.icon-name:before, #marketplace-search li.icon-name:before { font-family: 'FontAwesome'; content: '\f007'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; } #marketplace-sell li.icon-phone:before, #marketplace-search li.icon-phone:before { font-family: 'FontAwesome'; content: '\f095'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; } #marketplace-sell li.icon-money:before, #marketplace-search li.icon-money:before { font-family: 'FontAwesome'; content: '\f0d6'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; } #marketplace-sell li.icon-email:before, #marketplace-search li.icon-email:before { font-family: 'FontAwesome'; content: '\f003'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; } #marketplace-sell li.icon-region:before, #marketplace-search li.icon-region:before { font-family: 'FontAwesome'; content: '\f124'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; } #marketplace-sell .photo img, #marketplace-search .photo img { max-width: 100%; border-radius: 20px; margin-bottom: 40px; } #marketplace-sell .video .embed-responsive, #marketplace-search .video .embed-responsive { max-width: 100%; border-radius: 20px; margin-bottom: 40px; } #marketplace-sell .thumbs, #marketplace-search .thumbs { width: 100%; height: 85px; overflow-x: auto; overflow-y: hidden; margin-bottom: 40px; } #marketplace-sell .thumbs .thumbWrapper, #marketplace-search .thumbs .thumbWrapper { position: relative; width: 750px; } #marketplace-sell .thumbs .thumbWrapper a .thumb, #marketplace-search .thumbs .thumbWrapper a .thumb { position: relative; display: inline-block; float: left; width: 80px; height: 60px; margin: 0 5px; } #marketplace-sell .thumbs .thumbWrapper a .thumb img, #marketplace-search .thumbs .thumbWrapper a .thumb img { max-width: 100%; border-radius: 5px; } #marketplace-sell .horse-data, #marketplace-search .horse-data { margin-bottom: 40px; } #marketplace-sell .wrong-language-flag, #marketplace-search .wrong-language-flag { width: 21px; height: 15px; } #marketplace-sell .advert-description, #marketplace-search .advert-description { margin-bottom: 40px; } #marketplace-sell #description-translation, #marketplace-search #description-translation { font-style: italic; color: #0c74d5; } #marketplace-sell .pedigree, #marketplace-search .pedigree { margin-bottom: 40px; } #marketplace-sell .actions a, #marketplace-search .actions a { margin-right: 20px; } #marketplace-edit .thumb { position: relative; display: inline-block; } #marketplace-edit .thumb a.photo-delete-button { position: absolute; right: 10px; top: 10px; background-color: #f77c00; padding: 0 5px; border-radius: 20px; cursor: pointer; } #marketplace-edit .thumb a.photo-delete-button i.fa { color: #fff; } #marketplace-edit .thumb img { max-width: 270px; } #marketplace-edit .prolongation-text { display: inline-block; font-size: 10px; line-height: 10px; } /*Manage ACCOUNT*/ #manage-account .manageProfileMessageRow { display: none; } #manage-account .form-group { margin-top: 20px; } #manage-account .aside-menu-item-selected { background: linear-gradient(270deg, #0C74D5 0%, #3A9AF4 100%); border-radius: 10px; } #manage-account span.username { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 3px 10px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; display: inline-block; margin-bottom: 20px; } #manage-account li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } #manage-account label { width: 230px; font-family: Verdana; font-size: 12px; font-weight: bold; line-height: 18px; color: #002663; margin: 10px 0px 0px 0px; text-transform: uppercase; padding-left: 0; } #manage-account checkbox-label { width: 155px; height: 72px; font-family: Verdana; font-size: 12px; font-weight: bold; line-height: 18px; color: #002663; } #manage-account .submit-button { color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none; border: 0px; } #manage-account .backlink { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; display: inline-block; } #manage-account .fa-chevron-right { width: 9px; height: 12px; font-family: FontAwesome; font-size: 12px; text-align: center; line-height: 12px; color: #FFFFFF; } #manage-account .fa-asterisk { color: #f77c00; font-size: 8px; vertical-align: text-top; padding-left: 3px; } #manage-account .fa { width: 24px; height: 24px; border-radius: 0 10px 0 10px; } #manage-account input[type=email], #manage-account input[type=tel], #manage-account input[type=text], #manage-account input[type=password], #manage-account select { width: 270px; height: 40px; background-color: #FFFFFF; border: 2px solid #E3F0FD; border-radius: 10px; margin: 0px 0px 20px 0px; } #manage-account textarea { width: 270px; border: 2px solid #E3F0FD; border-radius: 10px; margin: 0px 0px 20px 0px; } #manage-account input, #manage-account select, #manage-account textarea { color: #002663; text-align: left; font-size: 14px; font-style: normal; font-family: Verdana; font-weight: normal; } #manage-account input[type=text].disabled, #manage-account input[type=password].disabled { background-color: #F5F9FD; } #manage-account .normal { position: relative; top: -2px; font-weight: normal; text-transform: initial; font-size: 14px; } #manage-account #input-label, #manage-account .input-label { width: 167px; height: 18px; font-family: Verdana; font-size: 11px; font-weight: bold; line-height: 18px; color: #F77C00; display: none; } #manage-account .input-group { line-height: 36px; margin-bottom: 30px; } #manage-account .input-group label { margin-left: 20px; } #manage-account .inline-block { display: table; } #manage-account .inline-block .customCheckbox { position: relative; top: 10px; } #manage-account .customCheckbox { height: 20px; width: 20px; outline: none; } #manage-account .customCheckbox[type="checkbox"]:before { position: relative; display: block; content: ""; background: #FFF; width: 20px; height: 20px; border: 2px solid #D0E7FC; border-radius: 2px; } #manage-account .customCheckbox[type="checkbox"]:after { position: relative; top: -20px; left: 4px; width: 20px; height: 20px; } #manage-account .customCheckbox[type="checkbox"]:checked:after { font-family: FontAwesome; content: "\f00c"; color: #0C74D5; font-size: 12px; } #manage-account .customCheckbox[type="checkbox"]:disabled:after { -webkit-filter: opacity(0.4); } #manage-account .customCheckbox[type="checkbox"]:not(:disabled):checked:hover:after { font-family: FontAwesome; content: "\f00c"; color: #0C74D5; font-size: 12px; } #manage-account .customCheckbox[type="checkbox"]:not(:disabled):hover:before { border-color: #d0e7fc; } #manage-account #ManageAccountForm_MemberOf:disabled { box-shadow: none; } #manage-account .changePasswordErrorMessage span { color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; padding: 2px 10px; white-space: nowrap; } #manage-account .checkbox-explanation { font-size: 8pt; display: block; } .manage-account a.back-link, .change-password a.back-link { margin-right: 40px; } /*NEWS DETAIL*/ #news-detail .news-content { margin-bottom: 40px; /*padding-top: 0;*/ padding-bottom: 0; } #news-detail .news-content .background-head-xs { margin: 0; padding: 0; } #news-detail .news-content .background-head-xs .page-header { padding: 0; margin: 0; } #news-detail .news-content .background-head-xs .page-header .date, #news-detail .news-content .background-head-xs .page-header .region { padding-right: 15px; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } #news-detail .news-content .background-head-xs .page-header .date i.fa, #news-detail .news-content .background-head-xs .page-header .region i.fa { color: #0c74d5; margin-right: 10px; font-size: 18px; font-weight: 400; line-height: 0; } #news-detail .news-content .background-head-xs .page-header .notification { background-color: #d0e7fc; border-radius: 0; margin: 0; padding: 20px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; } #news-detail .news-content .background-head-xs .page-header .note { background-color: #d0e7fc; border-radius: 10px; margin: 15px 0 0 0; padding: 5px 20px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; } #news-detail .news-content .background-head-xs .page-header .highlight { background-color: #d0e7fc; border-radius: 10px; margin: 15px 0 0 0; padding: 5px 20px; background-image: linear-gradient(to right, #ffa245 0%, #f77c00 100%); border-radius: 10px; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } #news-detail .news-content .background-head-xs .page-header .regionlabel { display: inline-block; padding: 5px 20px; background-image: linear-gradient(to left, #f77c00 0%, #ffa245 100%); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-transform: uppercase; margin: 10px 0; } #news-detail .news-content .background-head-xs .page-header .hidden-md .note { margin: 0; border-radius: 0; padding: 20px 20px; } #news-detail .news-content .background-head-xs .page-header .hidden-md .highlight { margin: 0; border-radius: 0; padding: 20px 20px; } #news-detail .news-content .background-head-xs .page-header .hidden-xs .note, #news-detail .news-content .background-head-xs .page-header .hidden-xs .highlight { display: inline-block; } #news-detail .news-content .background-head-xs .page-header .hidden-xs .highlight { float: right; border-radius: 10px 10px 10px 0; } #news-detail .news-content .background-head-xs .page-header .news-image { border-radius: 10px 10px 0 0; margin-top: 10px; margin-bottom: 0; padding: 0; border-radius: 10px 10px 0 0; } #news-detail .news-content .background-head-xs .page-header .news-image > img { width: 100%; border-radius: 10px 10px 0 0; } #news-detail .news-content .background-head-aside-xs > :last-child .page-header > .row > :last-child > .news-image > img { border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } #news-detail .news-content a.backlink { min-width: 50px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 12px 40px 12px 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; text-decoration: none; position: relative; display: inline-block; } #news-detail .news-content a.backlink i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } #news-detail .news-content a.backlink:hover { background-image: none; } #news-detail .news-content .news-detail-output { padding-left: 0; } #news-detail .news-content .news-detail-output .notification { background-color: #d0e7fc; border-radius: 10px; margin-bottom: 40px; padding: 20px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; } #news-detail .news-content .news-detail-output .news-image { border-radius: 10px 10px 0 0; height: 400px; background-repeat: no-repeat; background-position-x: center; background-position-y: top !important; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-bottom: 20px; padding: 0; border-radius: 10px; } #news-detail .news-content .news-detail-output .news-par { margin-bottom: 40px; } #news-detail .news-content .news-detail-output .news-par a { color: #f77c00; } #news-detail .news-content .news-detail-output .news-par img { height: auto !important; max-width: 100%; border-radius: 20px; } #news-detail .news-content .news-detail-output .news-par ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } #news-detail .news-content .news-detail-output .news-par ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } #news-detail .news-content .news-detail-output .news-par ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } #news-detail .news-content .news-detail-output .news-par ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } #news-detail .news-content .news-detail-aside .row { background-color: #fff; box-shadow: 0 2px 0 #e3f0fd; padding: 10px 40px; } #news-detail .news-content .news-detail-aside .row .gender { position: relative; display: block; padding: 5px 0; } #news-detail .news-content .news-detail-aside .row .gender i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; } #news-detail .news-content .news-detail-aside .row .name, #news-detail .news-content .news-detail-aside .row .date-time { position: relative; display: block; float: left; clear: both; padding: 10px 0 0 0; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } #news-detail .news-content .news-detail-aside .row .parents, #news-detail .news-content .news-detail-aside .row .title { position: relative; display: block; float: left; clear: both; padding: 0 0 10px 0; color: #002663; font-size: 12px; } #news-detail .news-content .news-detail-aside .row .parents abbr, #news-detail .news-content .news-detail-aside .row .title abbr { font-size: 12px; font-weight: 400; line-height: 18px; } #news-detail .news-content .news-detail-aside .row.mod-1 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } #news-detail .news-content .news-detail-aside .row:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #news-detail .news-content .news-detail-aside .row.header { background-color: transparent; padding: 0 40px; } #news-detail #related-news-wrapper .in-grid.news-content { margin-bottom: 30px; } #news-detail #related-news-wrapper .block .image { position: relative; height: 190px; border-radius: 15px 15px 0 0; background-repeat: no-repeat; background-color: #002663; background-size: cover; background-position: center; } #news-detail #related-news-wrapper .block .image .date { position: absolute; bottom: 0; left: -1px; padding: 10px 15px; background-color: #fff; color: #002663; font-size: 10px; border-radius: 0 20px 0 0; border-left: 1px solid #e3f0fd; line-height: 18px; } #news-detail #related-news-wrapper .block .image .date i.fa { font-size: 15px; color: #0c74d5; line-height: 18px; margin-right: 10px; } #news-detail #related-news-wrapper .block .bottom { background: linear-gradient(90deg, #FFFFFF 0%, #F5FAFE 51.03%, #FFFFFF 100%); box-shadow: 0 1px 2px 0 rgba(0, 38, 99, 0.2); border-radius: 0 0 15px 15px; height: 165px; } #news-detail #related-news-wrapper .block .bottom .text { padding: 20px 20px 15px 20px; line-height: 28px; position: relative; } #news-detail #related-news-wrapper .block .bottom .text div { font-family: "Bree Serif"; font-size: 20px; } #news-detail #related-news-wrapper .block .bottom .subtext { padding: 0 20px; line-height: 28px; position: relative; } #news-detail #related-news-wrapper .block .bottom .text .truncate-overflow, #news-detail #related-news-wrapper .block .bottom .subtext .truncate-overflow { position: relative; max-height: calc(28px * 3); overflow: hidden; padding-right: 15px; /* space for ellipsis */ } #news-detail #related-news-wrapper .block .bottom .text .truncate-overflow::before, #news-detail #related-news-wrapper .block .bottom .subtext .truncate-overflow::before { position: absolute; content: "..."; inset-block-end: 0; inset-inline-end: 0; } #news-detail #related-news-wrapper .block .bottom .text .truncate-overflow::after, #news-detail #related-news-wrapper .block .bottom .subtext .truncate-overflow::after { content: ""; position: absolute; inset-inline-end: 0; width: 15px; height: 28px; background: white; } #news-detail #related-news-wrapper .block:hover { text-decoration: none; } #news-detail #related-news-wrapper .block:hover .bottom { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } #news-detail #related-news-wrapper .carousel-control .glyphicon-chevron-left, #news-detail #related-news-wrapper .carousel-control .glyphicon-chevron-right { top: 95px; } /*GENERAL LOGIN*/ .general-login .background { background-color: #fff; padding: 15px; border-radius: 20px; } .general-login .background .login-form .member-number-group, .general-login .background .login-form .password-group { width: 100%; } .general-login .background .login-form .member-number-group span, .general-login .background .login-form .password-group span { background-color: transparent; padding-left: 0; border: none; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 38px; width: 140px; text-align: left; } .general-login .background .login-form .member-number-group input[type=text], .general-login .background .login-form .member-number-group input[type=password], .general-login .background .login-form .password-group input[type=text], .general-login .background .login-form .password-group input[type=password] { width: 100%; height: 40px; background-color: #fff; border: 2px solid #e3f0fd; border-radius: 10px; float: right; } .general-login .background .login-form .loginErrorMessage span, .general-login .background .login-form .passwordResetErrorMessage span { color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; padding: 2px 10px; white-space: nowrap; } .general-login .background .login-form button { border-radius: 20px 20px 0; background: linear-gradient(#ffa245, #f77c00); color: #fff; border: none; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 10px 20px; float: right; margin-top: 40px; } .general-login .background .login-form button i.fa { color: #fff !important; font-size: 12px !important; font-weight: 400 !important; line-height: 12px; padding-left: 10px; } .general-login .membership-info > div { width: 80%; margin: 0 auto; } .general-login .membership-info > div h3 { font-size: 24px; line-height: 32px; font-family: "Bree Serif"; padding-top: 0; margin-top: 0; margin-bottom: 10px; } .general-login .membership-info > div ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .general-login .membership-info > div ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .general-login .membership-info > div ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .general-login .membership-info > div ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .general-login .membership-info > div a.membership-link { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; } .general-login .membership-info > div a.membership-link i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 6px; left: 0; top: 3px; } .general-login .membership-info > div a.membership-link:hover { border-bottom: 4px solid #f77c00; } .general-login .loginnotification { background-color: #d0e7fc; border-radius: 10px; padding: 15px; margin-bottom: 15px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; } /* INBREED CALCULATION */ .inbreed-calculation-selections { background-color: #f5fafe; border-radius: 20px; padding: 40px; } .inbreedcalculation_print { background-color: red; } #result-container { margin-top: 40px; } #result-container #list-stallions th { cursor: pointer; white-space: nowrap; } #result-container #list-stallions th abbr[title] { border-bottom: none; } #result-container #list-stallions th abbr { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; padding: 10px 20px 10px 10px; cursor: pointer; } #result-container #list-stallions th.sorted, #result-container #list-stallions th.sorted span { color: #f77c00; } #result-container #list-stallions th.sorted abbr, #result-container #list-stallions th.sorted span abbr { color: #f77c00; } #result-container #list-stallions th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } #result-container #list-stallions tr { box-shadow: 0 2px 0 0 #e3f0fd; } #result-container #list-stallions tr td { font-size: 14px; } #result-container #list-stallions tr td.no-click { cursor: default; } #result-container #list-stallions tr td.no-click .toggler { position: relative; display: inline-block; width: 18px; height: 18px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; cursor: pointer; top: -5px; } #result-container #list-stallions tr td.no-click .toggler i.fa { color: #fff; font-size: 10px; font-weight: 400; line-height: 12px; position: relative; display: block; top: 3px; left: 5px; } #result-container #list-stallions tr td.no-click .toggler:hover { background-image: none; } #result-container #list-stallions tr.inbreeding-content { display: none; } #result-container #list-stallions tr.inbreeding-content td.pedigree { position: relative; display: block; background-color: blue; } #result-container #list-stallions tr.inbreeding-content td.pedigree .pedigree_stallion { position: relative; display: block; background-color: lime; } #result-container #list-stallions tr.inbreeding-content td.pedigree .pedigree_mare { position: relative; display: block; background-color: aqua; } #extra-info-container { margin-top: 40px; } #FormInbreedCalculation #result-container #list-stallions tr td { font-size: 12px; } /*HORSE PUBLICATOR*/ .horse-publicator { margin-bottom: 80px; } .horse-publicator h2, .horse-publicator .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .horse-publicator a.content-filter-activator { margin-bottom: 30px; position: relative; display: block; } .horse-publicator .horse-row { width: 100%; background-color: #fff; margin-left: 0; border-bottom: 2px solid #e3f0fd; } .horse-publicator .horse-row .gender { position: relative; display: block; padding-top: 10px; } .horse-publicator .horse-row .gender i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; } .horse-publicator .horse-row .name { position: relative; display: block; float: left; clear: both; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; padding-top: 10px; } .horse-publicator .horse-row .parents { position: relative; display: block; float: left; clear: both; padding: 0 0 10px 0; color: #002663; font-size: 12px; } .horse-publicator .horse-row .parents abbr { font-size: 12px; font-weight: 400; line-height: 18px; } .horse-publicator .horse-row .horse-row-content { position: relative; display: none; float: left; clear: both; margin-bottom: 20px; width: 100%; } .horse-publicator .horse-row .horse-row-content .row .label, .horse-publicator .horse-row .horse-row-content .row .value { color: #002663; } .horse-publicator .horse-row .horse-row-content .row .label { padding-left: 0; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .horse-publicator .horse-row .horse-row-content .row a { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; border-bottom: 4px solid transparent; margin-top: 20px; display: inline-block; clear: both; white-space: nowrap; } .horse-publicator .horse-row .horse-row-content .row a i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 5px; left: 0; top: 3px; } .horse-publicator .horse-row .horse-row-content .row a:hover { border-bottom: 4px solid #f77c00; } .horse-publicator .horse-row .toggler { position: relative; display: block; margin-top: 10px; width: 24px; height: 24px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; cursor: pointer; } .horse-publicator .horse-row .toggler i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; position: relative; display: block; top: 6px; } .horse-publicator .horse-row .toggler:hover { background-image: none; } .horse-publicator .horse-row.mod-1 { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 52%, #fff 100%); } .horse-publicator .horse-row:first-of-type { border-top: 2px solid #e3f0fd; } /*YOUTUBE*/ .youtube-embedd { margin-bottom: 40px; } /*NEWS/EVENT PUBLISHER*/ .news-publisher, .events-publisher { margin-bottom: 80px; } .news-publisher h2, .news-publisher .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-publisher a.content-filter-activator, .events-publisher h2, .events-publisher .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .events-publisher a.content-filter-activator { margin-bottom: 30px; position: relative; display: block; } .news-publisher .news-row, .news-publisher .event-row, .events-publisher .news-row, .events-publisher .event-row { width: 100%; background-color: #fff; margin-left: 0; border-bottom: 2px solid #e3f0fd; } .news-publisher .news-row .clock, .news-publisher .event-row .clock, .events-publisher .news-row .clock, .events-publisher .event-row .clock { position: relative; display: block; padding-top: 10px; } .news-publisher .news-row .clock i.fa, .news-publisher .event-row .clock i.fa, .events-publisher .news-row .clock i.fa, .events-publisher .event-row .clock i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; } .news-publisher .news-row .date, .news-publisher .event-row .date, .events-publisher .news-row .date, .events-publisher .event-row .date { position: relative; display: block; float: left; clear: both; color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; padding-top: 10px; } .news-publisher .news-row .title, .news-publisher .event-row .title, .events-publisher .news-row .title, .events-publisher .event-row .title { position: relative; display: block; float: left; clear: both; font-family: "Bree Serif"; color: #002663; font-size: 24px; font-weight: 400; line-height: 32px; padding-bottom: 10px; } .news-publisher .news-row .intro, .news-publisher .event-row .intro, .events-publisher .news-row .intro, .events-publisher .event-row .intro { position: relative; float: left; clear: both; margin-bottom: 20px; width: 100%; } .news-publisher .news-row.mod-1, .news-publisher .event-row.mod-1, .events-publisher .news-row.mod-1, .events-publisher .event-row.mod-1 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 52%, #fff 100%); } .news-publisher .news-row:first-of-type, .news-publisher .event-row:first-of-type, .events-publisher .news-row:first-of-type, .events-publisher .event-row:first-of-type { border-top: 2px solid #e3f0fd; } .news-publisher .news-row:hover, .news-publisher .event-row:hover, .events-publisher .news-row:hover, .events-publisher .event-row:hover { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 52%, #fff 100%) !important; } /*HORSE PAGE*/ .horse-page .subtitle { margin-bottom: 40px; } .horse-page .subtitle .gender, .horse-page .subtitle .pedigree { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .horse-page .subtitle .gender abbr, .horse-page .subtitle .pedigree abbr { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .horse-page .subtitle .gender i.fa, .horse-page .subtitle .pedigree i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; margin-right: 5px; } .horse-page .header-image { position: relative; margin-bottom: 40px; } .horse-page .header-image img { width: 100%; border-radius: 20px; box-shadow: 0 1px 2px rgba(0, 38, 99, 0.2); } .horse-page .introText { position: relative; margin-bottom: 40px; } .horse-page .details { position: relative; margin-bottom: 40px; } .horse-page .details h2, .horse-page .details .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .horse-page .details a.content-filter-activator { margin-bottom: 20px; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .horse-page .details .row { margin-bottom: 10px; } .horse-page .details .row .label, .horse-page .details .row .value { color: #002663; } .horse-page .details .row .label { padding-left: 0; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .horse-page .details .row a { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; border-bottom: 4px solid transparent; margin-top: 20px; display: inline-block; clear: both; white-space: nowrap; } .horse-page .details .row a i.fa-chevron-right { position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 5px; left: 0; top: 3px; } .horse-page .details .row a:hover { border-bottom: 4px solid #f77c00; } .horse-page #pagecontent a, .horse-page #pagecontent-container a, .horse-page #pagecontent-container-AbovePedigree a, .horse-page #pagecontent-container-BelowPedigree a { color: #f77c00; } .horse-page #pagecontent img, .horse-page #pagecontent-container img, .horse-page #pagecontent-container-AbovePedigree img, .horse-page #pagecontent-container-BelowPedigree img { max-width: 100%; border-radius: 20px; } .horse-page #pagecontent ul, .horse-page #pagecontent-container ul, .horse-page #pagecontent-container-AbovePedigree ul, .horse-page #pagecontent-container-BelowPedigree ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .horse-page #pagecontent ul li, .horse-page #pagecontent-container ul li, .horse-page #pagecontent-container-AbovePedigree ul li, .horse-page #pagecontent-container-BelowPedigree ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .horse-page #pagecontent ul li a, .horse-page #pagecontent-container ul li a, .horse-page #pagecontent-container-AbovePedigree ul li a, .horse-page #pagecontent-container-BelowPedigree ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .horse-page #pagecontent ul li:before, .horse-page #pagecontent-container ul li:before, .horse-page #pagecontent-container-AbovePedigree ul li:before, .horse-page #pagecontent-container-BelowPedigree ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } .horse-page #pagecontent td img, .horse-page #pagecontent-container td img, .horse-page #pagecontent-container-AbovePedigree td img, .horse-page #pagecontent-container-BelowPedigree td img { margin-bottom: 10px; } .horse-page .aside { background-color: #f5fafe; background-image: linear-gradient(to left, #fff 0%, #f5fafe 100%); padding: 40px; } .horse-page .aside h1, .horse-page .aside h2, .horse-page .aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .horse-page .aside a.content-filter-activator, .horse-page .aside h3 { color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .horse-page .aside ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .horse-page .aside ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .horse-page .aside ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .horse-page .aside ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .horse-page .aside .link-list { margin: 0 -15px 40px -15px; } /*HORSE DATABASE*/ .horse-database .gender, .horse-database .pedigree { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .horse-database .gender abbr, .horse-database .pedigree abbr { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } .horse-database .gender i.fa, .horse-database .pedigree i.fa { margin-right: 10px; font-weight: 700; font-size: 12px; color: #0c74d5; } .horse-database span.deceased img { margin-left: 8px; } .horse-database #horse-detail-item-stud-photo img { max-width: 100%; border-radius: 20px; margin-bottom: 40px; } .horse-database a.go-back { margin-top: 10px; } @media print { .horse-database a.go-back { display: none; } } .horse-database a.backlink { min-width: 50px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 12px 40px 12px 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; text-decoration: none; position: relative; display: inline-block; margin: 20px 0; } @media print { .horse-database a.backlink { display: none; } } .horse-database a.backlink i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } .horse-database a.backlink:hover { background-image: none; } .horse-database .print-disclaimer { display: none; } .horse-database .btn-settings-gp { background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); } .horse-database .btn-settings-gp i.fa { color: #fff; } @media only screen and (max-width: 600px) { .horse-database .embed-responsive { padding-bottom: 56.25vw !important; } } @media print { .horse-database span.value, .horse-database span.leftValue, .horse-database span.rightValue { color: #002663; padding-left: 0; font-size: 12px; font-weight: 400; line-height: 16px; } .horse-database span.leftValue b, .horse-database span.rightValue b { font-size: 12px; font-weight: 700; line-height: 16px; } .horse-database h1 { font-size: 26.66667px; line-height: 22.66667px; } .horse-database h2, .horse-database .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .horse-database a.content-filter-activator { font-size: 22.66667px; line-height: 18.66667px; } .horse-database h3 { font-size: 14.66667px; line-height: 12px; } .horse-database .print-disclaimer { display: block; } .horse-database .print-disclaimer * { font-size: 8px; line-height: 12px; } .horse-database #horse-detail-become-member { display: none; } } #refreshcontainer i.fa { position: relative; display: inline-block; float: left; margin-right: 15px; font-size: 28px; margin-top: 14px; } #refreshcontainer .reloading-text { position: relative; display: inline-block; float: left; } /*MY HORSES*/ .my-account .background { padding: 15px; } /*MY HORSES*/ .my-horses, #breeder-horses, #breeder-products, #breeder-horsesforsale, #breeder-horsenews, .genomebreedingvaluetest { /*tooltips*/ } .my-horses #refresh-list-link, #breeder-horses #refresh-list-link, #breeder-products #refresh-list-link, #breeder-horsesforsale #refresh-list-link, #breeder-horsenews #refresh-list-link, .genomebreedingvaluetest #refresh-list-link { text-decoration: none; color: #0c74d5; } .my-horses #refresh-list-link i.fa, #breeder-horses #refresh-list-link i.fa, #breeder-products #refresh-list-link i.fa, #breeder-horsesforsale #refresh-list-link i.fa, #breeder-horsenews #refresh-list-link i.fa, .genomebreedingvaluetest #refresh-list-link i.fa { color: #0c74d5; } .my-horses #refresh-list-link abbr, #breeder-horses #refresh-list-link abbr, #breeder-products #refresh-list-link abbr, #breeder-horsesforsale #refresh-list-link abbr, #breeder-horsenews #refresh-list-link abbr, .genomebreedingvaluetest #refresh-list-link abbr { border-bottom: none; } .my-horses #refresh-list-link abbr[title], #breeder-horses #refresh-list-link abbr[title], #breeder-products #refresh-list-link abbr[title], #breeder-horsesforsale #refresh-list-link abbr[title], #breeder-horsenews #refresh-list-link abbr[title], .genomebreedingvaluetest #refresh-list-link abbr[title] { color: #0c74d5; cursor: pointer; border-bottom: none; } .my-horses #refresh-list-link:hover, #breeder-horses #refresh-list-link:hover, #breeder-products #refresh-list-link:hover, #breeder-horsesforsale #refresh-list-link:hover, #breeder-horsenews #refresh-list-link:hover, .genomebreedingvaluetest #refresh-list-link:hover { text-decoration: none; color: #0c74d5; } @media (min-width: 992px) { .my-horses #refresh-list-link, #breeder-horses #refresh-list-link, #breeder-products #refresh-list-link, #breeder-horsesforsale #refresh-list-link, #breeder-horsenews #refresh-list-link, .genomebreedingvaluetest #refresh-list-link { float: right; } } .my-horses #horseListCounter, .my-horses #breeder-horses-counter, .my-horses #breeder-products-counter, .my-horses #breeder-horsesforsale-counter, .my-horses #breeder-horsenews-counter, #breeder-horses #horseListCounter, #breeder-horses #breeder-horses-counter, #breeder-horses #breeder-products-counter, #breeder-horses #breeder-horsesforsale-counter, #breeder-horses #breeder-horsenews-counter, #breeder-products #horseListCounter, #breeder-products #breeder-horses-counter, #breeder-products #breeder-products-counter, #breeder-products #breeder-horsesforsale-counter, #breeder-products #breeder-horsenews-counter, #breeder-horsesforsale #horseListCounter, #breeder-horsesforsale #breeder-horses-counter, #breeder-horsesforsale #breeder-products-counter, #breeder-horsesforsale #breeder-horsesforsale-counter, #breeder-horsesforsale #breeder-horsenews-counter, #breeder-horsenews #horseListCounter, #breeder-horsenews #breeder-horses-counter, #breeder-horsenews #breeder-products-counter, #breeder-horsenews #breeder-horsesforsale-counter, #breeder-horsenews #breeder-horsenews-counter, .genomebreedingvaluetest #horseListCounter, .genomebreedingvaluetest #breeder-horses-counter, .genomebreedingvaluetest #breeder-products-counter, .genomebreedingvaluetest #breeder-horsesforsale-counter, .genomebreedingvaluetest #breeder-horsenews-counter { color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .my-horses #horsesTable caption, .my-horses #breeder-horses-table caption, .my-horses #breeder-products-table caption, #breeder-horses #horsesTable caption, #breeder-horses #breeder-horses-table caption, #breeder-horses #breeder-products-table caption, #breeder-products #horsesTable caption, #breeder-products #breeder-horses-table caption, #breeder-products #breeder-products-table caption, #breeder-horsesforsale #horsesTable caption, #breeder-horsesforsale #breeder-horses-table caption, #breeder-horsesforsale #breeder-products-table caption, #breeder-horsenews #horsesTable caption, #breeder-horsenews #breeder-horses-table caption, #breeder-horsenews #breeder-products-table caption, .genomebreedingvaluetest #horsesTable caption, .genomebreedingvaluetest #breeder-horses-table caption, .genomebreedingvaluetest #breeder-products-table caption { padding-left: 10px; } .my-horses #horsesTable th, .my-horses #breeder-horses-table th, .my-horses #breeder-products-table th, #breeder-horses #horsesTable th, #breeder-horses #breeder-horses-table th, #breeder-horses #breeder-products-table th, #breeder-products #horsesTable th, #breeder-products #breeder-horses-table th, #breeder-products #breeder-products-table th, #breeder-horsesforsale #horsesTable th, #breeder-horsesforsale #breeder-horses-table th, #breeder-horsesforsale #breeder-products-table th, #breeder-horsenews #horsesTable th, #breeder-horsenews #breeder-horses-table th, #breeder-horsenews #breeder-products-table th, .genomebreedingvaluetest #horsesTable th, .genomebreedingvaluetest #breeder-horses-table th, .genomebreedingvaluetest #breeder-products-table th { cursor: pointer; white-space: nowrap; } .my-horses #horsesTable th.sorted, .my-horses #horsesTable th.sorted span, .my-horses #breeder-horses-table th.sorted, .my-horses #breeder-horses-table th.sorted span, .my-horses #breeder-products-table th.sorted, .my-horses #breeder-products-table th.sorted span, #breeder-horses #horsesTable th.sorted, #breeder-horses #horsesTable th.sorted span, #breeder-horses #breeder-horses-table th.sorted, #breeder-horses #breeder-horses-table th.sorted span, #breeder-horses #breeder-products-table th.sorted, #breeder-horses #breeder-products-table th.sorted span, #breeder-products #horsesTable th.sorted, #breeder-products #horsesTable th.sorted span, #breeder-products #breeder-horses-table th.sorted, #breeder-products #breeder-horses-table th.sorted span, #breeder-products #breeder-products-table th.sorted, #breeder-products #breeder-products-table th.sorted span, #breeder-horsesforsale #horsesTable th.sorted, #breeder-horsesforsale #horsesTable th.sorted span, #breeder-horsesforsale #breeder-horses-table th.sorted, #breeder-horsesforsale #breeder-horses-table th.sorted span, #breeder-horsesforsale #breeder-products-table th.sorted, #breeder-horsesforsale #breeder-products-table th.sorted span, #breeder-horsenews #horsesTable th.sorted, #breeder-horsenews #horsesTable th.sorted span, #breeder-horsenews #breeder-horses-table th.sorted, #breeder-horsenews #breeder-horses-table th.sorted span, #breeder-horsenews #breeder-products-table th.sorted, #breeder-horsenews #breeder-products-table th.sorted span, .genomebreedingvaluetest #horsesTable th.sorted, .genomebreedingvaluetest #horsesTable th.sorted span, .genomebreedingvaluetest #breeder-horses-table th.sorted, .genomebreedingvaluetest #breeder-horses-table th.sorted span, .genomebreedingvaluetest #breeder-products-table th.sorted, .genomebreedingvaluetest #breeder-products-table th.sorted span { color: #f77c00; } .my-horses #horsesTable th i.fa, .my-horses #breeder-horses-table th i.fa, .my-horses #breeder-products-table th i.fa, #breeder-horses #horsesTable th i.fa, #breeder-horses #breeder-horses-table th i.fa, #breeder-horses #breeder-products-table th i.fa, #breeder-products #horsesTable th i.fa, #breeder-products #breeder-horses-table th i.fa, #breeder-products #breeder-products-table th i.fa, #breeder-horsesforsale #horsesTable th i.fa, #breeder-horsesforsale #breeder-horses-table th i.fa, #breeder-horsesforsale #breeder-products-table th i.fa, #breeder-horsenews #horsesTable th i.fa, #breeder-horsenews #breeder-horses-table th i.fa, #breeder-horsenews #breeder-products-table th i.fa, .genomebreedingvaluetest #horsesTable th i.fa, .genomebreedingvaluetest #breeder-horses-table th i.fa, .genomebreedingvaluetest #breeder-products-table th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } .my-horses #horsesTable td .btn-sold, .my-horses #horsesTable td .btn-settings, .my-horses #breeder-horses-table td .btn-sold, .my-horses #breeder-horses-table td .btn-settings, .my-horses #breeder-products-table td .btn-sold, .my-horses #breeder-products-table td .btn-settings, #breeder-horses #horsesTable td .btn-sold, #breeder-horses #horsesTable td .btn-settings, #breeder-horses #breeder-horses-table td .btn-sold, #breeder-horses #breeder-horses-table td .btn-settings, #breeder-horses #breeder-products-table td .btn-sold, #breeder-horses #breeder-products-table td .btn-settings, #breeder-products #horsesTable td .btn-sold, #breeder-products #horsesTable td .btn-settings, #breeder-products #breeder-horses-table td .btn-sold, #breeder-products #breeder-horses-table td .btn-settings, #breeder-products #breeder-products-table td .btn-sold, #breeder-products #breeder-products-table td .btn-settings, #breeder-horsesforsale #horsesTable td .btn-sold, #breeder-horsesforsale #horsesTable td .btn-settings, #breeder-horsesforsale #breeder-horses-table td .btn-sold, #breeder-horsesforsale #breeder-horses-table td .btn-settings, #breeder-horsesforsale #breeder-products-table td .btn-sold, #breeder-horsesforsale #breeder-products-table td .btn-settings, #breeder-horsenews #horsesTable td .btn-sold, #breeder-horsenews #horsesTable td .btn-settings, #breeder-horsenews #breeder-horses-table td .btn-sold, #breeder-horsenews #breeder-horses-table td .btn-settings, #breeder-horsenews #breeder-products-table td .btn-sold, #breeder-horsenews #breeder-products-table td .btn-settings, .genomebreedingvaluetest #horsesTable td .btn-sold, .genomebreedingvaluetest #horsesTable td .btn-settings, .genomebreedingvaluetest #breeder-horses-table td .btn-sold, .genomebreedingvaluetest #breeder-horses-table td .btn-settings, .genomebreedingvaluetest #breeder-products-table td .btn-sold, .genomebreedingvaluetest #breeder-products-table td .btn-settings { padding: 0; margin: 0; width: 24px; height: 24px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); color: #fff; border-radius: 0 10px; text-align: center; position: relative; } .my-horses #horsesTable td .btn-sold i.fa, .my-horses #horsesTable td .btn-settings i.fa, .my-horses #breeder-horses-table td .btn-sold i.fa, .my-horses #breeder-horses-table td .btn-settings i.fa, .my-horses #breeder-products-table td .btn-sold i.fa, .my-horses #breeder-products-table td .btn-settings i.fa, #breeder-horses #horsesTable td .btn-sold i.fa, #breeder-horses #horsesTable td .btn-settings i.fa, #breeder-horses #breeder-horses-table td .btn-sold i.fa, #breeder-horses #breeder-horses-table td .btn-settings i.fa, #breeder-horses #breeder-products-table td .btn-sold i.fa, #breeder-horses #breeder-products-table td .btn-settings i.fa, #breeder-products #horsesTable td .btn-sold i.fa, #breeder-products #horsesTable td .btn-settings i.fa, #breeder-products #breeder-horses-table td .btn-sold i.fa, #breeder-products #breeder-horses-table td .btn-settings i.fa, #breeder-products #breeder-products-table td .btn-sold i.fa, #breeder-products #breeder-products-table td .btn-settings i.fa, #breeder-horsesforsale #horsesTable td .btn-sold i.fa, #breeder-horsesforsale #horsesTable td .btn-settings i.fa, #breeder-horsesforsale #breeder-horses-table td .btn-sold i.fa, #breeder-horsesforsale #breeder-horses-table td .btn-settings i.fa, #breeder-horsesforsale #breeder-products-table td .btn-sold i.fa, #breeder-horsesforsale #breeder-products-table td .btn-settings i.fa, #breeder-horsenews #horsesTable td .btn-sold i.fa, #breeder-horsenews #horsesTable td .btn-settings i.fa, #breeder-horsenews #breeder-horses-table td .btn-sold i.fa, #breeder-horsenews #breeder-horses-table td .btn-settings i.fa, #breeder-horsenews #breeder-products-table td .btn-sold i.fa, #breeder-horsenews #breeder-products-table td .btn-settings i.fa, .genomebreedingvaluetest #horsesTable td .btn-sold i.fa, .genomebreedingvaluetest #horsesTable td .btn-settings i.fa, .genomebreedingvaluetest #breeder-horses-table td .btn-sold i.fa, .genomebreedingvaluetest #breeder-horses-table td .btn-settings i.fa, .genomebreedingvaluetest #breeder-products-table td .btn-sold i.fa, .genomebreedingvaluetest #breeder-products-table td .btn-settings i.fa { font-size: 12px; font-weight: 400; color: #fff; position: absolute; left: 5px; top: 2px; } .my-horses #horsesTable td .btn-sold:hover, .my-horses #breeder-horses-table td .btn-sold:hover, .my-horses #breeder-products-table td .btn-sold:hover, #breeder-horses #horsesTable td .btn-sold:hover, #breeder-horses #breeder-horses-table td .btn-sold:hover, #breeder-horses #breeder-products-table td .btn-sold:hover, #breeder-products #horsesTable td .btn-sold:hover, #breeder-products #breeder-horses-table td .btn-sold:hover, #breeder-products #breeder-products-table td .btn-sold:hover, #breeder-horsesforsale #horsesTable td .btn-sold:hover, #breeder-horsesforsale #breeder-horses-table td .btn-sold:hover, #breeder-horsesforsale #breeder-products-table td .btn-sold:hover, #breeder-horsenews #horsesTable td .btn-sold:hover, #breeder-horsenews #breeder-horses-table td .btn-sold:hover, #breeder-horsenews #breeder-products-table td .btn-sold:hover, .genomebreedingvaluetest #horsesTable td .btn-sold:hover, .genomebreedingvaluetest #breeder-horses-table td .btn-sold:hover, .genomebreedingvaluetest #breeder-products-table td .btn-sold:hover { background-image: none; } .my-horses .background, #breeder-horses .background, #breeder-products .background, #breeder-horsesforsale .background, #breeder-horsenews .background, .genomebreedingvaluetest .background { background-color: #fff; padding: 15px; border-radius: 10px; } .my-horses .background .filter-row, #breeder-horses .background .filter-row, #breeder-products .background .filter-row, #breeder-horsesforsale .background .filter-row, #breeder-horsenews .background .filter-row, .genomebreedingvaluetest .background .filter-row { margin: 40px 0; } .my-horses .background .filter-row #tooManyResults, .my-horses .background .filter-row #breeder-horses-too-many-results, .my-horses .background .filter-row #breeder-products-too-many-results, #breeder-horses .background .filter-row #tooManyResults, #breeder-horses .background .filter-row #breeder-horses-too-many-results, #breeder-horses .background .filter-row #breeder-products-too-many-results, #breeder-products .background .filter-row #tooManyResults, #breeder-products .background .filter-row #breeder-horses-too-many-results, #breeder-products .background .filter-row #breeder-products-too-many-results, #breeder-horsesforsale .background .filter-row #tooManyResults, #breeder-horsesforsale .background .filter-row #breeder-horses-too-many-results, #breeder-horsesforsale .background .filter-row #breeder-products-too-many-results, #breeder-horsenews .background .filter-row #tooManyResults, #breeder-horsenews .background .filter-row #breeder-horses-too-many-results, #breeder-horsenews .background .filter-row #breeder-products-too-many-results, .genomebreedingvaluetest .background .filter-row #tooManyResults, .genomebreedingvaluetest .background .filter-row #breeder-horses-too-many-results, .genomebreedingvaluetest .background .filter-row #breeder-products-too-many-results { background-color: #d0e7fc; border-radius: 10px; padding: 15px; margin-bottom: 15px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; display: block; } .my-horses .background .filter-row #tooManyResults label, .my-horses .background .filter-row #breeder-horses-too-many-results label, .my-horses .background .filter-row #breeder-products-too-many-results label, #breeder-horses .background .filter-row #tooManyResults label, #breeder-horses .background .filter-row #breeder-horses-too-many-results label, #breeder-horses .background .filter-row #breeder-products-too-many-results label, #breeder-products .background .filter-row #tooManyResults label, #breeder-products .background .filter-row #breeder-horses-too-many-results label, #breeder-products .background .filter-row #breeder-products-too-many-results label, #breeder-horsesforsale .background .filter-row #tooManyResults label, #breeder-horsesforsale .background .filter-row #breeder-horses-too-many-results label, #breeder-horsesforsale .background .filter-row #breeder-products-too-many-results label, #breeder-horsenews .background .filter-row #tooManyResults label, #breeder-horsenews .background .filter-row #breeder-horses-too-many-results label, #breeder-horsenews .background .filter-row #breeder-products-too-many-results label, .genomebreedingvaluetest .background .filter-row #tooManyResults label, .genomebreedingvaluetest .background .filter-row #breeder-horses-too-many-results label, .genomebreedingvaluetest .background .filter-row #breeder-products-too-many-results label { font-weight: normal; font-size: small; } .my-horses .background .filter-row #tooManyResults label i, .my-horses .background .filter-row #breeder-horses-too-many-results label i, .my-horses .background .filter-row #breeder-products-too-many-results label i, #breeder-horses .background .filter-row #tooManyResults label i, #breeder-horses .background .filter-row #breeder-horses-too-many-results label i, #breeder-horses .background .filter-row #breeder-products-too-many-results label i, #breeder-products .background .filter-row #tooManyResults label i, #breeder-products .background .filter-row #breeder-horses-too-many-results label i, #breeder-products .background .filter-row #breeder-products-too-many-results label i, #breeder-horsesforsale .background .filter-row #tooManyResults label i, #breeder-horsesforsale .background .filter-row #breeder-horses-too-many-results label i, #breeder-horsesforsale .background .filter-row #breeder-products-too-many-results label i, #breeder-horsenews .background .filter-row #tooManyResults label i, #breeder-horsenews .background .filter-row #breeder-horses-too-many-results label i, #breeder-horsenews .background .filter-row #breeder-products-too-many-results label i, .genomebreedingvaluetest .background .filter-row #tooManyResults label i, .genomebreedingvaluetest .background .filter-row #breeder-horses-too-many-results label i, .genomebreedingvaluetest .background .filter-row #breeder-products-too-many-results label i { font-size: smaller; } .my-horses .background .filter-row .input-group, #breeder-horses .background .filter-row .input-group, #breeder-products .background .filter-row .input-group, #breeder-horsesforsale .background .filter-row .input-group, #breeder-horsenews .background .filter-row .input-group, .genomebreedingvaluetest .background .filter-row .input-group { width: 100%; } .my-horses .background .filter-row .input-group input[type=text], #breeder-horses .background .filter-row .input-group input[type=text], #breeder-products .background .filter-row .input-group input[type=text], #breeder-horsesforsale .background .filter-row .input-group input[type=text], #breeder-horsenews .background .filter-row .input-group input[type=text], .genomebreedingvaluetest .background .filter-row .input-group input[type=text] { background-color: #fff; border: 2px solid #e3f0fd; border-radius: 10px 0 0 10px; height: 40px; color: #002663; } .my-horses .background .filter-row .input-group .input-group-addon, #breeder-horses .background .filter-row .input-group .input-group-addon, #breeder-products .background .filter-row .input-group .input-group-addon, #breeder-horsesforsale .background .filter-row .input-group .input-group-addon, #breeder-horsenews .background .filter-row .input-group .input-group-addon, .genomebreedingvaluetest .background .filter-row .input-group .input-group-addon { background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); border-radius: 0 10px 10px 0; border-width: 0; cursor: pointer; width: 40px; height: 40px; } .my-horses .background .filter-row .input-group .input-group-addon i, #breeder-horses .background .filter-row .input-group .input-group-addon i, #breeder-products .background .filter-row .input-group .input-group-addon i, #breeder-horsesforsale .background .filter-row .input-group .input-group-addon i, #breeder-horsenews .background .filter-row .input-group .input-group-addon i, .genomebreedingvaluetest .background .filter-row .input-group .input-group-addon i { color: #fff; } .my-horses .background .filter-row .input-group .input-group-addon:hover, #breeder-horses .background .filter-row .input-group .input-group-addon:hover, #breeder-products .background .filter-row .input-group .input-group-addon:hover, #breeder-horsesforsale .background .filter-row .input-group .input-group-addon:hover, #breeder-horsenews .background .filter-row .input-group .input-group-addon:hover, .genomebreedingvaluetest .background .filter-row .input-group .input-group-addon:hover { background-image: linear-gradient(to top, #002663 0%, #3a9af4 100%); } .my-horses .background .filter-row .input-group input[type=checkbox], #breeder-horses .background .filter-row .input-group input[type=checkbox], #breeder-products .background .filter-row .input-group input[type=checkbox], #breeder-horsesforsale .background .filter-row .input-group input[type=checkbox], #breeder-horsenews .background .filter-row .input-group input[type=checkbox], .genomebreedingvaluetest .background .filter-row .input-group input[type=checkbox] { width: 20px; } .my-horses .background .filter-row .input-group label, #breeder-horses .background .filter-row .input-group label, #breeder-products .background .filter-row .input-group label, #breeder-horsesforsale .background .filter-row .input-group label, #breeder-horsenews .background .filter-row .input-group label, .genomebreedingvaluetest .background .filter-row .input-group label { font-weight: 400; margin-top: 5px; margin-left: 5px; } .my-horses .tooltip.top .tooltip-inner, #breeder-horses .tooltip.top .tooltip-inner, #breeder-products .tooltip.top .tooltip-inner, #breeder-horsesforsale .tooltip.top .tooltip-inner, #breeder-horsenews .tooltip.top .tooltip-inner, .genomebreedingvaluetest .tooltip.top .tooltip-inner { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); min-width: 100px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; } .my-horses .tooltip.top .tooltip-arrow, #breeder-horses .tooltip.top .tooltip-arrow, #breeder-products .tooltip.top .tooltip-arrow, #breeder-horsesforsale .tooltip.top .tooltip-arrow, #breeder-horsenews .tooltip.top .tooltip-arrow, .genomebreedingvaluetest .tooltip.top .tooltip-arrow { border-top-color: #3a9af4; } .horse-search { /*tooltips*/ } .horse-search #DatabaseSearchForm { position: relative; display: block; padding-bottom: 10px; margin-bottom: 40px; border-bottom: 2px solid #e3f0fd; } .horse-search #DatabaseSearchForm .breedingValueSearchLoginNotification { font-size: 10pt; color: #0c74d5; font-style: italic; } .horse-search .breedingValueResearchButtonContainer { position: relative; display: inline-block; max-width: 270px; } .horse-search .breedingValueResearchButtonContainer button { color: white; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; border: 0; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none; } .horse-search .breedingValueResearchButtonContainer button i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } .horse-search .breedingValueResearchButtonContainer button:hover { background-image: none; } .horse-search #list-breeding-values label { margin-top: 0; } .horse-search #list-breeding-values label span.minmax { font-size: 8pt; color: #0c74d5; line-height: normal; } .horse-search #list-breeding-values .selectdiv { display: inline-block; margin-right: 10px; } .horse-search #list-breeding-values .selectdiv select { width: 100px; } .horse-search #list-breeding-values input[type=number] { width: 160px; } .horse-search #list-breeding-values .toggler { position: relative; display: inline-block; width: 18px; height: 18px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; cursor: pointer; top: -5px; } .horse-search #list-breeding-values .toggler i.fa { color: #fff; font-size: 10px; font-weight: 400; line-height: 12px; position: relative; display: block; top: 3px; left: 5px; } .horse-search #list-breeding-values .toggler:hover { background-image: none; } .horse-search .tooltip.top .tooltip-inner { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); min-width: 100px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; } .horse-search .tooltip.top .tooltip-arrow { border-top-color: #3a9af4; } .horse-search #horse-search-results h1 span { font-family: "Bree Serif"; font-size: 40px; line-height: 48px; } .horse-search #horse-search-results #search-result-count { padding: 5px 10px; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-transform: uppercase; white-space: nowrap; display: inline-block; } .horse-search #horse-search-results #horsesTable th { cursor: pointer; white-space: nowrap; } .horse-search #horse-search-results #horsesTable th.sorted, .horse-search #horse-search-results #horsesTable th.sorted span { color: #f77c00; } .horse-search #horse-search-results #horsesTable th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } .horse-search #horse-search-results #tooManyResults, .horse-search #horse-search-results #noResults, .horse-search #horse-search-results #refine { background-color: #d0e7fc; border-radius: 10px; padding: 15px; margin-bottom: 15px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; display: block; } .horse-search #horse-search-results #result-filter { padding: 20px 40px; margin-bottom: 15px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; display: block; background-color: #f5fafe; border-radius: 20px; } .horse-search #horse-search-results #result-filter .control-label { font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; color: #002663; text-transform: none; } .horse-search #horse-search-results #result-filter #refresh-list-link { text-decoration: none; color: #0c74d5; } .horse-search #horse-search-results #result-filter #refresh-list-link i.fa { color: #0c74d5; } .horse-search #horse-search-results #result-filter #refresh-list-link abbr { border-bottom: none; } .horse-search #horse-search-results #result-filter #refresh-list-link abbr[title] { color: #0c74d5; cursor: pointer; border-bottom: none; } .horse-search #horse-search-results #result-filter #refresh-list-link:hover { text-decoration: none; color: #0c74d5; } @media (min-width: 992px) { .horse-search #horse-search-results #result-filter #refresh-list-link { float: right; margin-top: 50px; } } #my-breedings #breedingsTable, #my-current-breedings #breedingsTable { margin-top: 20px; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } #my-breedings #breedingsTable tr.mod-1, #my-current-breedings #breedingsTable tr.mod-1 { background: #fff; } #my-breedings #breedingsTable th, #my-current-breedings #breedingsTable th { cursor: pointer; white-space: nowrap; } #my-breedings #breedingsTable th.sorted, #my-breedings #breedingsTable th.sorted span, #my-current-breedings #breedingsTable th.sorted, #my-current-breedings #breedingsTable th.sorted span { color: #f77c00; } #my-breedings #breedingsTable th i.fa, #my-current-breedings #breedingsTable th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } #my-breedings #breedingsTable .toggler, #my-current-breedings #breedingsTable .toggler { position: relative; display: block; width: 24px; height: 24px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; cursor: pointer; text-align: center; } #my-breedings #breedingsTable .toggler i.fa, #my-current-breedings #breedingsTable .toggler i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; position: relative; display: block; top: 6px; } #my-breedings #breedingsTable .toggler:hover, #my-current-breedings #breedingsTable .toggler:hover { background-image: none; } #my-breedings #breedingsTable .breeding-content, #my-current-breedings #breedingsTable .breeding-content { display: none; } #my-breedings #breedingsTable .breeding-content .breeding-summary, #my-current-breedings #breedingsTable .breeding-content .breeding-summary { background-color: #e3f0fd; border-radius: 20px; padding: 10px; } #my-breedings #breedingsTable .breeding-content .breeding-summary table, #my-current-breedings #breedingsTable .breeding-content .breeding-summary table { background-color: transparent; } #my-breedings #breedingsTable .breeding-content .breeding-summary table tr, #my-current-breedings #breedingsTable .breeding-content .breeding-summary table tr { background-image: none; background-color: transparent; } #myInvoices #invoicesTable, #myInvoices #openInvoicesTable { margin-top: 20px; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } #myInvoices #invoicesTable tr.mod-1, #myInvoices #openInvoicesTable tr.mod-1 { background: #fff; } #myInvoices #invoicesTable th, #myInvoices #openInvoicesTable th { cursor: pointer; white-space: nowrap; } #myInvoices #invoicesTable th.sorted, #myInvoices #invoicesTable th.sorted span, #myInvoices #openInvoicesTable th.sorted, #myInvoices #openInvoicesTable th.sorted span { color: #f77c00; } #myInvoices #invoicesTable th i.fa, #myInvoices #openInvoicesTable th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } #myInvoices #invoicesTable i.fa-cloud-download, #myInvoices #invoicesTable i.fa-warning, #myInvoices #openInvoicesTable i.fa-cloud-download, #myInvoices #openInvoicesTable i.fa-warning { color: #f77c00; } #myInvoices #invoicesTable .toggler, #myInvoices #openInvoicesTable .toggler { position: relative; display: block; width: 24px; height: 24px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; cursor: pointer; text-align: center; } #myInvoices #invoicesTable .toggler i.fa, #myInvoices #openInvoicesTable .toggler i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; position: relative; display: block; top: 6px; } #myInvoices #invoicesTable .toggler:hover, #myInvoices #openInvoicesTable .toggler:hover { background-image: none; } #myInvoices #invoicesTable .invoice-content, #myInvoices #openInvoicesTable .invoice-content { display: none; } #myInvoices #invoicesTable .invoice-content .invoice-summary, #myInvoices #openInvoicesTable .invoice-content .invoice-summary { background-color: #e3f0fd; border-radius: 20px; padding: 10px; margin-bottom: 8px; } .my-inspections a#MyEventsRefresh i.fa { margin-left: 5px; color: #f77c00; } .my-inspections th { cursor: pointer; white-space: nowrap; } .my-inspections th abbr[title] { border-bottom: none; } .my-inspections th abbr { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; padding: 10px 20px 10px 10px; cursor: pointer; } .my-inspections th.sorted, .my-inspections th.sorted span { color: #f77c00; } .my-inspections th.sorted abbr, .my-inspections th.sorted span abbr { color: #f77c00; } .my-inspections th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } .my-inspections .btn-unregister { padding: 0; margin: 0; width: 24px; height: 24px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); color: #fff; border-radius: 0 10px; text-align: center; position: relative; } .my-inspections .btn-unregister i.fa { font-size: 12px; font-weight: 400; color: #fff; position: absolute; left: 5px; top: 2px; } .my-inspections .btn-unregister:hover { background-image: none; } /* PAGE WITH HEADER AND ASIDE CONTENT */ .page-with-header-and-aside #pagecontent .container, .sideMenu #pagecontent .container { width: auto; } .page-with-header-and-aside #pagecontent a, .sideMenu #pagecontent a { color: #f77c00; } .page-with-header-and-aside #pagecontent img, .sideMenu #pagecontent img { max-width: 100%; border-radius: 20px; } .page-with-header-and-aside #pagecontent ul, .sideMenu #pagecontent ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .page-with-header-and-aside #pagecontent ul li, .sideMenu #pagecontent ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .page-with-header-and-aside #pagecontent ul li a, .sideMenu #pagecontent ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .page-with-header-and-aside #pagecontent ul li:before, .sideMenu #pagecontent ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } .page-with-header-and-aside #pagecontent td img, .sideMenu #pagecontent td img { margin-bottom: 10px; } .page-with-header-and-aside .aside .background, .sideMenu .aside .background { padding: 20px 20px 5px 20px; margin-bottom: 20px; } .page-with-header-and-aside .aside .background h1, .page-with-header-and-aside .aside .background h2, .page-with-header-and-aside .aside .background .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .page-with-header-and-aside .aside .background a.content-filter-activator, .page-with-header-and-aside .aside .background h3, .sideMenu .aside .background h1, .sideMenu .aside .background h2, .sideMenu .aside .background .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .sideMenu .aside .background a.content-filter-activator, .sideMenu .aside .background h3 { color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .page-with-header-and-aside .aside .background ul, .sideMenu .aside .background ul { margin: 0; padding: 0; display: inline-block; position: relative; clear: both; } .page-with-header-and-aside .aside .background ul li, .sideMenu .aside .background ul li { list-style-type: none; display: inline-block; float: left; clear: left; margin-left: 30px; line-height: 28px; margin-bottom: 12px; } .page-with-header-and-aside .aside .background ul li a, .sideMenu .aside .background ul li a { color: #002663; font-family: Verdana; font-size: 16px; font-weight: 400; line-height: 28px !important; } .page-with-header-and-aside .aside .background ul li:before, .sideMenu .aside .background ul li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 0; } .page-with-header-and-aside .aside .background .link-list, .sideMenu .aside .background .link-list { margin: 0 -15px 40px -15px; } .page-with-header-and-aside .aside .background #asidecontent, .sideMenu .aside .background #asidecontent { padding: 0; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-header, .sideMenu .aside .background #asidecontent .subnavigation-header { margin: 0 15px 15px 15px; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-header a, .sideMenu .aside .background #asidecontent .subnavigation-header a { display: inline-block; width: 100%; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; text-decoration: none; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-header a i.fa, .sideMenu .aside .background #asidecontent .subnavigation-header a i.fa { color: #f77c00; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist, .sideMenu .aside .background #asidecontent .subnavigation-linklist { margin: 0 0 15px 0; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul { width: 100%; margin: 0; padding: 0; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul li, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul li { margin: 0; padding: 5px 10px 5px 45px; width: 100%; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul li a, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul li a { display: inline-block; width: 100%; cursor: pointer; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul li.active, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul li.active { background-color: #0c74d5; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 10px; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul li.active a, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul li.active a { color: #fff; text-decoration: none; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul li:before, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul li:before { content: '\f053'; margin-left: 15px; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-linklist ul li.active:before, .sideMenu .aside .background #asidecontent .subnavigation-linklist ul li.active:before { color: #fff; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-text, .sideMenu .aside .background #asidecontent .subnavigation-text { margin: 0 15px 15px 15px; } .page-with-header-and-aside .aside.hasHeader .background, .sideMenu .aside.hasHeader .background { border-radius: 20px; } /*CONTACT PERSON DETAIL*/ .contact-person-detail .page-header .photo { display: inline-block; float: left; margin-right: 40px; } .contact-person-detail .page-header .photo img { max-width: 140px; max-height: 140px; } .contact-person-detail .page-header .function { display: inline-block; background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); border-radius: 100px; padding: 6px 20px; color: #fff; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; margin: 15px 0; } .contact-person-detail .contact-info li:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; min-width: 20px; display: inline-block; float: left; clear: left; line-height: 28px; position: absolute; left: 15px; } .contact-person-detail .contact-info li.phone:before { content: '\f095' !important; color: #0c74d5 !important; font-size: 16px !important; } .contact-person-detail .contact-info li.mobile-phone:before { content: '\f10b' !important; color: #0c74d5 !important; font-size: 16px !important; } .contact-person-detail .contact-info li.email:before { content: '\f0e0' !important; color: #0c74d5 !important; font-size: 16px !important; } .contact-person-detail .contact-info li.address:before { content: '\f124' !important; color: #0c74d5 !important; font-size: 16px !important; } .contact-person-detail .contact-info li.website:before { content: '\f08e' !important; color: #0c74d5 !important; font-size: 16px !important; } .contact-person-detail .contact-info li.facebook:before { content: '\f09a' !important; color: #0c74d5 !important; /*color: #324e97 !important;*/ font-size: 16px !important; } .contact-person-detail .page-content a.backlink { min-width: 50px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 12px 40px 12px 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; text-decoration: none; margin-top: 40px; position: relative; display: inline-block; } .contact-person-detail .page-content a.backlink i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } .contact-person-detail .page-content a.backlink:hover { background-image: none; } .genetic-profile-table { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); border: 0; padding: 0; margin: 0; width: 600px; } .genetic-profile-table colgroup .description { width: 250px; } .genetic-profile-table colgroup .percentage { width: 50px; } .genetic-profile-table colgroup .minimum { width: 50px; } .genetic-profile-table colgroup .value { width: 10px; } .genetic-profile-table colgroup .maximum { width: 50px; } .genetic-profile-table .index { background: #fff; } .genetic-profile-table .index th, .genetic-profile-table .index td { padding: 0; margin: 0; } .genetic-profile-table .index th.stars { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ transform: rotate(90deg); text-align: center; } .genetic-profile-table .index th.value { width: 10px; } .genetic-profile-table .index th.average { text-align: center; } .genetic-profile-table .table-caption { background: #fff; } .genetic-profile-table .table-caption th, .genetic-profile-table .table-caption td { padding: 10px 5px; margin: 0; } .genetic-profile-table .spacer { background: #fff; } .genetic-profile-table .table-row { background: #fff; } .genetic-profile-table .table-row td { padding: 0 5px; margin: 0; font-size: 10pt; } .genetic-profile-table .table-row .minimum { border-width: 0 2px 0 0; border-color: #0c74d5; border-style: solid; } .genetic-profile-table .table-row .value { border-width: 0 0 0 2px; border-color: #e3f0fd; border-style: solid; text-align: center; padding: 0; width: 10px; } .genetic-profile-table .table-row .value:first-child { border: none; } .genetic-profile-table .table-row .maximum { border-width: 0 0 0 2px; border-color: #0c74d5; border-style: solid; } .genetic-profile-table .table-row .fill { background-color: #0c74d5; color: #fff; } @media print { .genetic-profile-table .table-row .fill { border-bottom-color: grey; border-bottom-style: solid; border-bottom-width: 4px; } .genetic-profile-table .table-row td { font-size: 8pt; padding: 0 2px; } } .genetic-profile-table .table-row.mod-0 { background-color: #fff; } .genetic-profile-table .table-row.mod-1 { background-color: transparent; } .genetic-profile-table .table-row:hover { background-color: #e3f0fd; } @media print { .genetic-profile-table { width: 400px; } } #horse-detail-item-achievements #inspectionstable, #horse-detail-item-achievements #abilitytesttable { margin-top: 20px; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } #horse-detail-item-achievements #inspectionstable tr.tableheader, #horse-detail-item-achievements #inspectionstable tr.mod-0, #horse-detail-item-achievements #abilitytesttable tr.tableheader, #horse-detail-item-achievements #abilitytesttable tr.mod-0 { background: #fff; } #horse-detail-item-achievements #inspectionstable th, #horse-detail-item-achievements #abilitytesttable th { cursor: pointer; white-space: nowrap; } #horse-detail-item-achievements #inspectionstable th.sorted, #horse-detail-item-achievements #inspectionstable th.sorted span, #horse-detail-item-achievements #abilitytesttable th.sorted, #horse-detail-item-achievements #abilitytesttable th.sorted span { color: #f77c00; } #horse-detail-item-achievements #inspectionstable th i.fa, #horse-detail-item-achievements #abilitytesttable th i.fa { font-size: 13px; color: #f77c00; margin-left: 10px; } #horse-detail-item-achievements #inspectionstable .toggler, #horse-detail-item-achievements #abilitytesttable .toggler { position: relative; display: block; width: 24px; height: 24px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; cursor: pointer; text-align: center; } #horse-detail-item-achievements #inspectionstable .toggler i.fa, #horse-detail-item-achievements #abilitytesttable .toggler i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; position: relative; display: block; top: 6px; } #horse-detail-item-achievements #inspectionstable .toggler:hover, #horse-detail-item-achievements #abilitytesttable .toggler:hover { background-image: none; } #horse-detail-item-achievements #inspectionstable .ability-details, #horse-detail-item-achievements #inspectionstable .inspection-details, #horse-detail-item-achievements #abilitytesttable .ability-details, #horse-detail-item-achievements #abilitytesttable .inspection-details { display: none; } #horse-detail-item-achievements #inspectionstable .ability-details .ability-summary, #horse-detail-item-achievements #inspectionstable .ability-details .inspection-summary, #horse-detail-item-achievements #inspectionstable .inspection-details .ability-summary, #horse-detail-item-achievements #inspectionstable .inspection-details .inspection-summary, #horse-detail-item-achievements #abilitytesttable .ability-details .ability-summary, #horse-detail-item-achievements #abilitytesttable .ability-details .inspection-summary, #horse-detail-item-achievements #abilitytesttable .inspection-details .ability-summary, #horse-detail-item-achievements #abilitytesttable .inspection-details .inspection-summary { background-color: #e3f0fd; border-radius: 20px; padding: 10px; } #horse-detail-item-achievements #inspectionstable .ability-details .ability-summary table, #horse-detail-item-achievements #inspectionstable .ability-details .inspection-summary table, #horse-detail-item-achievements #inspectionstable .inspection-details .ability-summary table, #horse-detail-item-achievements #inspectionstable .inspection-details .inspection-summary table, #horse-detail-item-achievements #abilitytesttable .ability-details .ability-summary table, #horse-detail-item-achievements #abilitytesttable .ability-details .inspection-summary table, #horse-detail-item-achievements #abilitytesttable .inspection-details .ability-summary table, #horse-detail-item-achievements #abilitytesttable .inspection-details .inspection-summary table { background-color: transparent; } #horse-detail-item-achievements #inspectionstable .ability-details .ability-summary table tr, #horse-detail-item-achievements #inspectionstable .ability-details .inspection-summary table tr, #horse-detail-item-achievements #inspectionstable .inspection-details .ability-summary table tr, #horse-detail-item-achievements #inspectionstable .inspection-details .inspection-summary table tr, #horse-detail-item-achievements #abilitytesttable .ability-details .ability-summary table tr, #horse-detail-item-achievements #abilitytesttable .ability-details .inspection-summary table tr, #horse-detail-item-achievements #abilitytesttable .inspection-details .ability-summary table tr, #horse-detail-item-achievements #abilitytesttable .inspection-details .inspection-summary table tr { background-image: none; background-color: transparent; } #horse-detail-become-member .info-wrapper { margin-top: 80px; margin-bottom: 40px; background-color: #e3f0fd; text-align: center; padding: 40px; border-radius: 10px; } #horse-detail-become-member .info-wrapper h3 { font-family: "Bree Serif"; font-size: 24px; text-align: center; line-height: 32px; color: #002663; } #horse-detail-become-member .info-wrapper p { font-family: Verdana; font-size: 16px; text-align: center; line-height: 28px; color: #002663; } #horse-detail-aside-become-member { margin: 20px 0; } #horse-detail-aside-become-member .info-wrapper { background-color: #e3f0fd; text-align: center; padding: 20px; border-radius: 10px; } #horse-detail-aside-become-member .info-wrapper h3 { font-family: "Bree Serif"; font-size: 24px; text-align: center; line-height: 32px; color: #002663; } #horse-detail-aside-become-member .info-wrapper p { font-family: Verdana; font-size: 16px; text-align: center; line-height: 28px; color: #002663; } /* GENERAL STYLES -------------------------------------------------------------------------------------------------------*/ .no-gutter > [class*='col-'] { padding-right: 0; padding-left: 0; } .no-padding { padding: 0; } .break-grid { margin-left: -15px; margin-right: -15px; padding-left: 15px; padding-right: 15px; } .break-grid .break-grid-background { background-color: #fff; border-radius: 20px; padding: 20px; } .break-grid .in-grid { margin: 0; } h1, h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, h3, h4, h5, h6 { font-family: "Bree Serif"; padding-top: 0; margin-top: 0; } h1 { font-size: 40px; line-height: 48px; } @media print { h1 { font-size: 36px; } } h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { font-size: 34px; line-height: 42px; } @media print { h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { font-size: 30px; } } h3 { font-size: 20px; line-height: 32px; } @media screen and (min-width: 480px) { h3 { font-size: 24px; } } @media print { h3 { font-size: 24px; } } small, .small { font-size: 10px; line-height: 10px; } small i, .small i { font-size: 10px; line-height: 10px; } .nowrap { white-space: nowrap; } .content-container { margin-bottom: 80px !important; } .ellipsis { text-overflow: ellipsis; /* Required for text-overflow to do anything */ overflow: hidden; white-space: normal; } @media screen and (min-width: 1224px) { .ellipsis { white-space: nowrap; } } .scrollHidden { display: none; } .capitalize { text-transform: capitalize; } span.label { color: #002663; padding-left: 0; font-size: 12px; font-weight: 700; line-height: 38px; text-transform: uppercase; } @media print { span.label { border: 0; line-height: normal; } } span.value, span.leftValue, span.rightValue { color: #002663; padding-left: 0; font-size: 16px; font-weight: 400; line-height: 28px; } span.leftValue b, span.rightValue b { font-size: 12px; font-weight: 700; line-height: 38px; } strong, .bold { font-weight: 700; } strong a { font-weight: 700; } .oldowner { text-decoration: line-through; color: #0c74d5 !important; } .newOwner { clear: both; } .SearchNewOwnerResultItem, .SearchCoRegisteredResultItem { font-size: 10px; line-height: 15px; width: 100%; display: inline-block; float: left; margin: 0; padding: 4px; border-top: 2px solid #e3f0fd; background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); text-decoration: none; } .SearchNewOwnerResultItem b, .SearchCoRegisteredResultItem b { font-size: 12px; line-height: 15px; } .SearchNewOwnerResultItem.mod-1, .SearchCoRegisteredResultItem.mod-1 { background-color: #fff; background-image: none; } .SearchNewOwnerResultItem:hover, .SearchCoRegisteredResultItem:hover { cursor: pointer; background-color: #e3f0fd; background-image: none; text-decoration: none; } .SearchNewOwnerResultItem.me, .SearchCoRegisteredResultItem.me { color: #f77c00; cursor: default; } .SearchNewOwnerResultItem.me b, .SearchCoRegisteredResultItem.me b { font-size: 12px; line-height: 15px; color: #f77c00; } .SearchNewOwnerResultItem.me:hover, .SearchCoRegisteredResultItem.me:hover { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); background-color: none; } .coregisterred { position: relative; display: block; clear: both; width: 240px; margin-bottom: 10px; } .coregisterred span { font-size: 10pt; margin-right: 10px; line-height: normal; } .coregisterred i.fa { float: right; color: #f77c00; margin-top: 7px; } .scroll-outer { width: 100%; overflow-x: auto; } table { background-color: #fff; } table tr { /*display:flex;*/ } table tr th { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; padding: 10px 20px 10px 10px; } table tr th span { color: #002663; font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; } table tr td { text-align: left; vertical-align: top; padding: 10px 20px 10px 10px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; } table tr td i.fa { color: #0c74d5; font-size: 18px; font-weight: 400; line-height: 18px; } @media print { table tr td { padding: 7px 14px 7px 7px; } table tr td, table tr td * { font-size: 12px; line-height: 20px; } table tr td i.fa { font-size: 12px; line-height: 18px; } } table tr.mod-0 { border-bottom: 2px solid #e3f0fd; } table tr.mod-1 { border-bottom: 2px solid #e3f0fd; } table tr.clickable:hover { cursor: pointer; background-color: #e3f0fd; } #horsesTable, .horsesTable { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); } #horsesTable caption, .horsesTable caption { padding-left: 10px; } #horsesTable tr:nth-child(even), .horsesTable tr:nth-child(even) { background: #fff; } #horsesTable tr.clickable:hover, .horsesTable tr.clickable:hover { cursor: pointer; background-color: #e3f0fd; } .fa-death { background-image: url(/files/templates/designs/kwpn/images/deceased-icon.png); background-repeat: no-repeat; display: inline-block; width: 13px; height: 18px; margin-left: 4px; } .fa-approved-stud { background-image: url(/files/templates/designs/kwpn/images/wapen.svg); background-repeat: no-repeat; display: inline-block; width: 15px; height: 27px; margin-left: 4px; position: relative; top: 5px; background-size: contain; } .infotable .row { background-color: #fff; border-bottom: 2px solid #e3f0fd; padding: 4px 0; } .infotable .row.mod-0 { background-image: linear-gradient(to right, #fff 0%, #f5fafe 51%, #fff 100%); border-bottom: 2px solid #e3f0fd; } .infotable .breeder-link, .infotable .registered-link { cursor: pointer; } .infotable .breeder-link:before, .infotable .registered-link:before { font-family: 'FontAwesome'; content: '\f054'; color: #0c74d5; font-size: 12px; position: relative; left: -10px; } .infotable .breeder-link:hover, .infotable .registered-link:hover { color: #f77c00; } @media print { .infotable { page-break-inside: avoid; } .infotable .row { border: 0; padding: 0; } .infotable .row.mod-0 { background: none; border: 0; } } .socialmediashare { position: relative; display: inline-block; } a.orange_arrow_link, button.orange_arrow_link { position: relative; color: #f77c00; font-family: "Bree Serif"; font-size: 20px; font-weight: 400; line-height: 28px; text-decoration: none; padding-bottom: 6px; padding-left: 34px; width: auto; border-bottom: 4px solid transparent; display: inline-block; } a.orange_arrow_link.mobile, button.orange_arrow_link.mobile { float: left; margin-top: 20px; } @media screen and (min-width: 768px) { a.orange_arrow_link.mobile, button.orange_arrow_link.mobile { margin-top: 0; float: right; } } button.orange_arrow_link { border: 0; background-color: transparent; } a.orange_arrow_link:before, button.orange_arrow_link:before { font-family: 'FontAwesome'; content: '\f054'; position: absolute; text-align: center; color: #fff; width: 24px; height: 24px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 12px; line-height: 12px; padding-top: 5px; left: 0; top: 3px; } a.orange_arrow_link.remove:before { font-family: 'FontAwesome'; content: '\f00d'; } a.orange_arrow_link.edit:before { font-family: 'FontAwesome'; content: '\f044'; } a.orange_arrow_link.arrowleft:before { font-family: 'FontAwesome'; content: '\f053'; } a.orange_arrow_link:hover { border-bottom: 4px solid #f77c00; } a.orange_arrow_link_download_row { position: relative; float: left; margin-left: 15px; color: #f77c00; font-family: "Bree Serif"; font-size: 16px; font-weight: 400; line-height: 28px; text-decoration: none; padding-left: 25px; width: auto; border-bottom: 2px solid transparent; display: inline-block; } a.orange_arrow_link_download_row.mobile { float: left; margin-top: 20px; } @media screen and (min-width: 768px) { a.orange_arrow_link_download_row.mobile { margin-top: 0; float: right; } } a.orange_arrow_link_download_row:before { font-family: 'FontAwesome'; content: '\f054'; position: absolute; text-align: center; color: #fff; width: 16px; height: 17px; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 0 10px; font-size: 6px; line-height: 8px; padding-top: 5px; left: 0; top: 5px; } a.orange_arrow_link_download_row.remove:before { font-family: 'FontAwesome'; content: '\f00d'; } a.orange_arrow_link_download_row.edit:before { font-family: 'FontAwesome'; content: '\f044'; } a.orange_arrow_link_download_row:hover { border-bottom: 2px solid #f77c00; } a.orange_balloon_link { color: white; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; background-color: #f77c00; background-image: linear-gradient(180deg, #ffa245 0%, #f77c00 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none; } a.orange_balloon_link i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } a.orange_balloon_link:hover { background-image: none; } a.blue_balloon_link, input.blue_balloon_link { border: none; color: white; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; background-color: #0c74d5; background-image: linear-gradient(0deg, #0c74d5 0%, #3a9af4 100%); border-radius: 20px 20px 0; padding: 10px 20px; text-decoration: none !important; } a.blue_balloon_link i.fa, input.blue_balloon_link i.fa { color: #fff; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 12px; } a.blue_balloon_link:hover, input.blue_balloon_link:hover { background-image: none; } .modal .modal-header { font-weight: 700; text-transform: uppercase; } .modal .modal-header a.close-model { float: right; text-transform: none; font-weight: 400; } .modal .modal-body .horseInfo { color: #f77c00; text-transform: uppercase; } .modal .modal-body.legend-body table { border: 0; padding: 5px; } .modal .modal-body.legend-body table tr td, .modal .modal-body.legend-body table tr th { text-align: left; vertical-align: top; color: #002663; font-size: 12px; line-height: 18px; padding: 5px; } .modal .modal-body.legend-body table tr td a, .modal .modal-body.legend-body table tr th a { color: #f77c00; } .modal .modal-body.legend-body table tr td img, .modal .modal-body.legend-body table tr th img { max-width: 100%; border: 0; } .modal .modal-body.legend-body table tr th { font-weight: 700; text-transform: uppercase; } .modal .modal-footer .modal-ok { margin-left: 10px; } body.modal-open { overflow: visible; } /*tooltips*/ .tooltip.top .tooltip-inner { background-image: linear-gradient(to left, #0c74d5 0%, #3a9af4 100%); min-width: 100px; text-transform: uppercase; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; } .tooltip.top .tooltip-arrow { border-top-color: #3a9af4; } .responsive-video { position: relative; padding-bottom: 56.25%; padding-top: 60px; overflow: hidden; } .responsive-video iframe, .responsive-video object, .responsive-video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* VIEWPORT SPECIFIC -------------------------------------------------------------------------------------------------------*/ .viewporttest { background-color: red; } @media (min-width: 768px) { .viewporttest { background-color: yellow; } #pagewrapper { margin: 0 auto -140px; /* Negative indent = footerwrapper height */ padding: 0 0 140px; /* Pad bottom = footerwrapper height */ } /*TOPBANNER*/ #top-banner { padding: 0; } #top-banner .top-banner-image-l { height: 600px; } #top-banner .top-banner-image-m { height: 400px; } #top-banner .top-banner-image-s { height: 300px; } /*.doubleCallToAction { margin-left: 0; margin-right: 0; background-image: none; }*/ /*LOGOS*/ #footerlogos #partner-logos .partnerLogo, #footerlogos #sponsor-logos .partnerLogo { display: inline-block; margin-right: 15px; margin-bottom: 0; } #footerlogos #partner-logos .partnerLogo img, #footerlogos #sponsor-logos .partnerLogo img { max-width: 80px; max-height: 100px; } #footerlogos #partner-logos .partnerLogo:last-child, #footerlogos #sponsor-logos .partnerLogo:last-child { margin-right: 0; } /*FOOTER*/ #footerwrapper { height: 140px; padding: 0; } #footerwrapper ul { margin-top: 20px; } #footerwrapper ul li { float: none; clear: none; } /*GENERAL STYLES*/ } @media (min-width: 992px) { .viewporttest { background-color: lime; } /*BODY*/ body { background-image: url(/files/templates/designs/kwpn/images/kwpn-background-md-fixed.svg); background-repeat: no-repeat; background-position: top left; } /*TOPBANNER*/ #top-banner > div > div.row { position: relative; } #top-banner .top-banner-image { height: 550px; border-radius: 20px; } #top-banner .top-banner-image-l { height: 550px; } #top-banner .top-banner-image-m { height: 400px; } #top-banner .top-banner-image-s { height: 300px; } #top-banner .top-banner-content { display: inline-block; position: absolute; background-color: #fff; min-width: 100px; width: auto; max-width: 35%; top: 50px; left: 80px; border-radius: 20px 20px 0 20px; } #top-banner .top-banner-content .well { display: inline-block; margin: 10px 0 15px 0; border: none; box-shadow: none; -webkit-box-shadow: none; border-radius: 0; } /*NAVIGATION*/ .header_content .navigation_header ul li { padding-right: 15px; } /*THREE PARAGRAPHS LINKS*/ .three-paragraph-links-wrapper .three-paragraph-links-paragraph { z-index: 8; top: -100px; margin-bottom: -50px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background { border-radius: 20px; min-height: 365px; padding: 40px 20px 30px 20px; background-color: #fff; box-shadow: 0 1px 2px rgba(0, 38, 99, 0.2); } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-header { padding: 0; margin: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-header h3 { padding: 0; margin: 0 0 10px 0; color: #002663; font-family: "Bree Serif"; font-size: 24px; font-weight: 400; line-height: 32px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content { display: block; margin: 0; padding: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content ul { padding: 0; margin: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content ul li { padding: 0; margin: 10px 0 0 20px; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content ul li a { padding: 0; margin: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content ul li:before { padding: 0; margin: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content.active { display: block; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background .three-paragraph-links-content.notactive { display: block; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph:first-of-type, .three-paragraph-links-wrapper .three-paragraph-links-paragraph:first-of-type { padding-left: 0; } .three-paragraph-links-wrapper .three-paragraph-links-paragraph:last-of-type, .three-paragraph-links-wrapper .three-paragraph-links-paragraph:last-of-type { padding-right: 0; } /*EVENT DETAIL*/ .event-detail .note { position: absolute; display: block; top: 40px; } /*HOME NEWS & EVENTS */ .news-events { padding-top: 0; background-color: transparent; } .news-events .news-events-news .highlight .news-image { height: 300px; border-radius: 20px; margin-bottom: 15px; } .news-events .news-events-news .highlight .news-image .mask { border-radius: 20px; } .news-events .news-events-news .highlight .news-image a.more-link span { color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; } .news-events .news-events-news .highlight .news-image a.more-link i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; margin-left: 10px; } .news-events .news-events-news .highlight:first-of-type .news-image { border-radius: 20px; } .news-events .news-events-news .highlight:first-of-type .news-image .mask { border-radius: 20px; } .news-events .news-events-news .more-news .background { border-radius: 20px; } .news-events .events { background-color: transparent; box-shadow: none; } .news-events .events .background { background-color: #fff; border-radius: 20px; } .news-events .events .background h2, .news-events .events .background .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .news-events .events .background a.content-filter-activator { margin-top: 0; margin-bottom: 15px; padding-top: 40px; } .news-events .events .background .row { margin: 0; } .news-events .events .background .more-container { padding-top: 50px; height: 120px; } .news-events .events.eventTopMargin { margin-top: -315px; } /*CONTENT FILTERED NEWS */ .contentFilteredNews { padding-top: 0; background-color: transparent; width: 100%; } .contentFilteredNews .news .highlight .news-image { height: 300px; border-radius: 20px; margin-bottom: 15px; } .contentFilteredNews .news .highlight .news-image .mask { border-radius: 20px; } .contentFilteredNews .news .highlight .news-image a.more-link span { color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; } .contentFilteredNews .news .highlight .news-image a.more-link i.fa { color: #fff; font-size: 12px; font-weight: 400; line-height: 12px; margin-left: 10px; } .contentFilteredNews .news .highlight:first-of-type .news-image { border-radius: 20px; } .contentFilteredNews .news .highlight:first-of-type .news-image .mask { border-radius: 20px; } .contentFilteredNews .news .more-news .background { border-radius: 20px; } /*FOOTER LINKS*/ #footerlinks #goto-navigation .newsletter-subscription { margin-bottom: 0; } #footerlinks #goto-navigation a.more { min-width: 50px; position: relative; display: block; margin: 0 20px 20px 0; } #footerlinks #goto-navigation a.more span { display: inline-block; float: left; white-space: nowrap; background-color: #002663; border-radius: 0 0 0 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; width: calc(100% - 50px); } #footerlinks #goto-navigation a.more i { display: inline-block; float: left; background-color: #0c74d5; color: #fff; font-size: 12px; font-weight: 400; border-radius: 0 20px 0 0; line-height: 12px; padding: 20px 20px; width: 50px; height: 50px; background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); } #footerlinks #goto-navigation a.more:hover i { background-image: none; } /*LOGOS*/ #footerlogos #partner-logos .partnerLogo, #footerlogos #sponsor-logos .partnerLogo { display: inline-block; margin-right: 25px; } #footerlogos #partner-logos .partnerLogo img, #footerlogos #sponsor-logos .partnerLogo img { max-width: 100px; max-height: 100px; } #footerlogos #partner-logos .partnerLogo:last-child, #footerlogos #sponsor-logos .partnerLogo:last-child { margin-right: 0; } /*FOOTER*/ /*HORSE PAGE*/ .horse-page .subtitle .gender i.fa, .horse-page .subtitle .pedigree i.fa { margin-right: 20px; } .horse-page .aside { border-radius: 20px 0 0 20px; } /*NEWS LIST*/ .news-list .news-highlight { margin-bottom: 40px; padding: 0 10px; border-radius: 20px; } .news-list .news-highlight .news-highlight-image { border-radius: 20px; } .news-list .news-highlight .news-highlight-image .news-highlight-mask { border-radius: 20px; } .news-list .news-highlight .news-highlight-image .news-highlight-mask .news-highlight-content-valigner .news-highlight-content .highlight { top: 22px; } .news-list .news-list-output .news-list-row .note { float: none; } .news-list .news-list-output .news-list-row .highlight { position: absolute; display: inline-block; right: 20px; width: auto; } .news-list .news-list-output .news-list-row .regionlabel { display: inline-block; padding: 2px 10px; background-image: linear-gradient(to left, #f77c00 0%, #ffa245 100%); border-radius: 10px; font-size: 10px; font-weight: 700; line-height: 16px; color: #fff; text-transform: uppercase; margin: 10px 0 10px 15px; } /*CONTENT + ASIDE PAGE LAYOUT*/ .page-content-aside .background-head-aside-xs:not(.selected) { margin: 0 !important; } .page-content-aside .background-head-aside-xs { padding: 0; } .page-content-aside .background-head-aside-xs .background-head-xs { display: block; margin: 0; padding: 0; border-radius: 0; } .page-content-aside .background-head-aside-xs .background-head-xs .page-header { margin: 0; padding: 0; display: block; border-bottom: none; } .page-content-aside .background-head-aside-xs .background-aside-xs { position: relative; display: block; margin: 0; padding: 0; width: auto; border-radius: 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside { background-color: #f5fafe; background-image: linear-gradient(to left, #fff 0%, #f5fafe 100%); padding: 40px 10px 40px 40px; border-radius: 20px 0 0 20px; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator { display: inline-block; margin: 40px 0 0 0; margin-bottom: 10px; padding: 0; cursor: default; border: 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2 span, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator span { font-size: 24px; line-height: 32px; padding: 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2:after, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator:after, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator:after { content: ''; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2.active:after, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.active.content-filter-activator:after, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.active.content-filter-activator:after { content: ''; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside h2:first-of-type, .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator:first-of-type, .contentFilterHolder:not(.selected) .title h2 .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator:first-of-type { margin-top: 0; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.notactive { display: block; } .page-content-aside .background-head-aside-xs .background-aside-xs .page-aside .aside-content.active { display: block; } /* CONTENT FILTER */ .content-filter { margin-top: 40px; width: 800px; } .content-filter .content-filter-category { float: left; margin-top: 0; margin-right: 40px; } .content-filter .content-filter-category:last-of-type { margin-right: 0; } /*NEWS DETAIL*/ #news-detail .background-head-aside-xs .background-head-xs { padding: 0; } #news-detail .background-head-aside-xs .background-head-xs .page-header { margin: 0; } #news-detail .background-head-aside-xs .background-head-xs .page-header h1 { margin-top: 15px; } #news-detail .background-head-aside-xs .background-aside-xs .page-aside { padding: 40px 0 40px 0; } #news-detail .background-head-aside-xs .background-aside-xs .page-aside h2, #news-detail .background-head-aside-xs .background-aside-xs .page-aside .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 #news-detail .background-head-aside-xs .background-aside-xs .page-aside a.content-filter-activator { margin-left: 50px; } #news-detail .background-head-aside-xs .background-aside-xs .page-aside .mod-0 { margin-left: 0; margin-right: 0; } #news-detail .background-head-aside-xs .background-aside-xs .page-aside .mod-1 { margin-left: 0; margin-right: 0; } /*DASHBOARD*/ .dashboard span.username { top: -40px; } /*LOGIN*/ .general-login .background { background-color: transparent; padding: 0; border-radius: 0; } /*MY HORSES*/ .my-horses .background, .breeder-horses .background, .breeder-products .background { background-color: #fff; padding: 15px; border-radius: 10px; } /*PAGE WITH HEADER AND ASIDE*/ .page-with-header-and-aside .aside, .sideMenu .aside { display: inline-block; padding: 40px 20px; } .page-with-header-and-aside .aside .background #asidecontent, .sideMenu .aside .background #asidecontent { padding: 0; } .page-with-header-and-aside .aside .background #asidecontent .subnavigation-content.hidden, .sideMenu .aside .background #asidecontent .subnavigation-content.hidden { display: block !important; } .page-with-header-and-aside .aside.hasHeader, .sideMenu .aside.hasHeader { /*.background.stuck { position: fixed; top: 0; width: 260px; }*/ } .page-with-header-and-aside .aside.hasHeader .background, .sideMenu .aside.hasHeader .background { background-color: #f5fafe; background-image: linear-gradient(to left, #fff 0%, #f5fafe 100%); top: -145px; min-height: 500px; border-radius: 20px; position: relative; } /*GENERAL STYLES*/ .break-grid { margin: 0 -25px; } .break-grid > .row { padding-left: 15px; padding-right: 15px; } .break-grid .break-grid-background { border-radius: 20px; margin-bottom: 30px; background-color: #fff; } .break-grid .break-grid-background.gradient { background-image: linear-gradient(to right, #fff 0%, #e3f0fd 51%, #fff 100%); } .break-grid .in-grid { margin: 0 10px; padding-right: 15px; padding-left: 15px; padding-bottom: 80px; } .break-grid .in-grid.hasHeader { padding-top: 20px; } } @media (min-width: 1200px) { .viewporttest { background-color: orange; } /*BODY*/ body { background-image: url(/files/templates/designs/kwpn/images/kwpn-background-lg.svg); background-repeat: no-repeat; background-position: top center; } body.homepage { background-image: url(/files/templates/designs/kwpn/images/kwpn-background-home-lg.svg); } /*TOPBANNER*/ #top-banner .top-banner-image, #top-banner .top-banner-image-l { height: 600px; } #top-banner .top-banner-image-m { height: 400px; } #top-banner .top-banner-image-s { height: 300px; } /*THREE PARAGRAPHS LINKS*/ .three-paragraph-links-wrapper .three-paragraph-links-paragraph .three-paragraph-links-paragraph-background { padding: 40px 20px 30px 40px; } /*LOGOS*/ #footerlogos #partner-logos .partnerLogo, #footerlogos #sponsor-logos .partnerLogo { display: inline-block; margin-right: 38px; } #footerlogos #partner-logos .partnerLogo img, #footerlogos #sponsor-logos .partnerLogo img { max-width: 120px; max-height: 100px; } #footerlogos #partner-logos .partnerLogo:last-child, #footerlogos #sponsor-logos .partnerLogo:last-child { margin-right: 0; } /*FOOTER*/ #footerwrapper ul { margin-top: 20px; } #footerwrapper ul li { float: none; clear: none; } /*PAGE WITH HEADER AND ASIDE*/ .page-with-header-and-aside .aside.hasHeader .background, .sideMenu .aside.hasHeader .background { top: -145px; min-height: 500px; border-radius: 20px; position: relative; } /*GENERAL STYLES*/ .break-grid, .break-grid-extra { margin: 0 -50px; } .break-grid .in-grid, .break-grid-extra .in-grid { margin: 0 35px; padding-right: 15px; padding-left: 15px; } } @media (min-width: 1900px) { /*GENERAL STYLES*/ .break-grid { margin: 0 -80px; } .break-grid .in-grid { margin: 0 65px; } .break-grid-extra { margin: 0 -150px 0 -36px; } } @media print { .break-grid { margin: 0px !important; } .break-grid .in-grid { margin: 0px; padding-right: 0px; padding-left: 0px; } .break-grid-background { padding: 0px !important; } .aside-page { display: none; left: 0px; width: 0px; } } /* PAGE OVERLAY */ .overlay { width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: fixed; z-index: 999; display: none; top: 0; } .fix-overlay-show { position: relative; z-index: 1000; } .fix-overlay-hide { position: relative; z-index: 0; } /* CUSTOM BUTTON */ .custom-btn { margin: 20px 0; background-color: rgba(255, 255, 255, 0.1); background: linear-gradient(0deg, #0C74D5 0%, #3A9AF4 100%); border-radius: 20px 20px 0 20px; display: inline-block; font-family: "Bree Serif"; font-size: 18px; border: none; padding: 11px 0 11px 20px; } .custom-btn .fa-chevron-right { font-size: 12px; margin: 0 20px; color: white; } /* MEMBERSHIP */ .membership { margin-top: 50px; margin-bottom: 50px; background-image: url(/files/templates/designs/kwpn/images/call-to-action-background.svg); background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; } .membership .highlight { background: linear-gradient(90deg, #FFA245 0%, #F77C00 100%); border-radius: 20px 20px 20px 0; color: #002663 !important; font-weight: bold; font-family: Verdana; font-size: 12px; padding: 11px 20px; width: 40%; line-height: normal; float: right; position: relative; top: -15px; } .membership .leftContent .leftHolder { padding-top: 20px; padding-bottom: 0; } @media screen and (min-width: 991px) { .membership .leftContent .leftHolder { padding-top: 50px; padding-bottom: 50px; position: relative; margin: auto; width: 60%; } } .membership .leftContent .leftHolder .highlight { top: -15px; } @media screen and (min-width: 991px) { .membership .rightContent .rightHolder { position: relative; top: 100px; margin: auto; width: 60%; } } .membership .rightContent li::before { color: #0C74D5; } .membership .rightContent * { color: white; } .membership .memberholder { display: flex; } .membership ul { padding: 0; list-style: none; } .membership li { padding-left: 1.4em; margin-left: 1.4em; position: relative; } .membership li:before { content: "\f00c"; font-family: FontAwesome; position: absolute; left: -1.4em; } @media screen and (max-width: 991px) { .membership { background-image: none; border-radius: 0; } .membership .row.row { display: block !important; } .membership .leftContent { padding: 30px 10% 60px 10%; background: #e3f0fd; } .membership .leftContent:after { content: " "; width: 100%; height: 60px; position: absolute; left: 0; display: inline-block; bottom: 0px; border-bottom: 200px solid #002663; border-left: 1500px solid transparent; } .membership .rightContent { padding: 30px 10% 60px 10%; background: #002663; } } /* Arrow left in button */ i.fa-chevron-left { margin-right: 10px; } /* Page logo */ @media screen and (max-width: 991px) { .logo { height: 34px; } } /* sub text for login */ .loginSubContent { font-size: 16px; font-family: Verdana; font-weight: normal; color: #002663; } .page-header { border-bottom: none !important; } @media screen and (max-width: 495px) { .page-header { margin: 0; white-space: nowrap; } } /* Form Register Horse*/ div.warning { background-color: #d0e7fc; border-radius: 10px; padding: 15px; margin-bottom: 15px; color: #002663; font-size: 16px; font-weight: 400; line-height: 28px; display: block; } .icon-weapon { height: 40px; vertical-align: unset; } .eventResultLink { padding-left: 0; } .eventResultLink a { float: left; } @media screen and (min-width: 992px) { .eventResultLink a { float: right; } } .eventListHeader { margin-bottom: 20px; } .eventListHeader > span { height: 20px; } .eventListHeader > span a { color: #f77c00; } .eventListHeader > span h2, .eventListHeader > span .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .eventListHeader > span a.content-filter-activator { font-size: 20px; white-space: nowrap; } @media screen and (min-width: 992px) { .eventListHeader { margin-bottom: 0; } .eventListHeader > span { height: auto; } .eventListHeader > span h2, .eventListHeader > span .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 .eventListHeader > span a.content-filter-activator { font-size: 30px; } .eventListHeader > span h2 i, .eventListHeader > span .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator i, .contentFilterHolder:not(.selected) .title h2 .eventListHeader > span a.content-filter-activator i { color: #f77c00; font-size: 18px; } } #footerlinks #goto-navigation a.more { min-width: 50px; position: relative; display: block; margin: 0 20px 20px 0; } #footerlinks #goto-navigation a.more span { display: inline-block; float: left; white-space: nowrap; background-color: #002663; border-radius: 0 0 0 20px; color: #fff; font-family: "Bree Serif"; font-size: 18px; font-weight: 400; line-height: 26px; padding: 12px 20px; width: calc(100% - 50px); } #footerlinks #goto-navigation a.more i { display: inline-block; float: left; background-color: #0c74d5; color: #fff; font-size: 12px; font-weight: 400; border-radius: 0 20px 0 0; line-height: 12px; padding: 20px 20px; width: 50px; height: 50px; background-image: linear-gradient(to top, #0c74d5 0%, #3a9af4 100%); } .fix-box-shadow { box-shadow: 0 1px 2px rgba(0, 38, 99, 0.2); } @media (max-width: 768px) { .content-container { margin-bottom: 0 !important; } #news-detail .news-content { margin-bottom: 0; } #news-detail .news-content .background-head-xs .page-header .notification { white-space: normal; font-size: 14px; } .socialmediashare { text-align: center; padding: 20px 0 15px; width: 100%; } .socialmediashare > div { display: inline-block; } } @media (max-width: 992px) { #news-detail .news-content .news-detail-output { padding-left: 15px; } } .region-news-container .col-xs-12.title { height: auto !important; } @media (max-width: 992px) { .region-news-container .col-xs-12.title h2, .region-news-container .contentFilterHolder:not(.selected) .col-xs-12.title h2 a.content-filter-activator, .contentFilterHolder:not(.selected) .region-news-container .col-xs-12.title h2 a.content-filter-activator { font-size: 32px !important; } } .fix-regional-news { width: 100% !important; } @media (max-width: 992px) { .fix-regional-news { margin-top: 0 !important; } .fix-regional-news .mask { border-bottom-left-radius: 0px !important; border-bottom-right-radius: 0px !important; } } @media (min-width: 992px) { .news-events { padding-left: 0; padding-right: 0; } .news-events .news-events-news .highlight .news-image { margin-bottom: 30px; } .contentFilterHolder:not(.selected) .news .highlight:first-of-type .fix-regional-news.news-image { width: 100%; margin-top: 0; } .contentFilterHolder:not(.selected) .news .highlight:first-of-type .fix-regional-news .news-image-content { display: flex !important; flex-direction: column; justify-content: center; } .contentFilterHolder:not(.selected) .news .highlight:first-of-type .fix-regional-news .news-image-content .more-link { width: 166px; margin: 30px auto 0; } .contentFilterHolder:not(.selected) .news .more-news ul li > a { white-space: nowrap; } .contentFilterHolder:not(.selected) .news .highlight:first-of-type.no-padding-left, .contentFilterHolder:not(.selected) .news .more-news.no-padding-left { padding-left: 0; } .contentFilterHolder:not(.selected) .news .highlight:first-of-type.no-padding-right, .contentFilterHolder:not(.selected) .news .more-news.no-padding-right { padding-right: 0; } .contentFilterHolder:not(.selected) .news .more-news .background { padding: 30px; } } .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { color: #f77c00; cursor: pointer; text-decoration: none; line-height: 28px; } @media screen and (max-width: 992px) { .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { border-bottom: 2px #f77c00 dotted; } } @media screen and (min-width: 992px) { .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { border-bottom: 2px solid transparent; } } .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator:hover { border-bottom: 2px #f77c00 dotted; } @media (max-width: 478px) { .contentFilterHolder:not(.selected) { display: block !important; padding: 0; } .contentFilterHolder:not(.selected) .title { height: auto; } .contentFilterHolder:not(.selected) .title h2, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator { margin-top: 0; white-space: normal; } .contentFilterHolder:not(.selected) .title h2 > a.content-filter-activator, .contentFilterHolder:not(.selected) .title h2 a.content-filter-activator > a.content-filter-activator { font-size: 7.1vw; } } @media (min-width: 768px) { .news-events .news-events-news .highlight .news-image:first-of-type, .news-events .news-events-news .highlight .news-image:first-of-type .mask { height: 300px; } } @media (max-width: 768px) { .news-events .news-events-news .highlight .news-image:first-of-type, .news-events .news-events-news .highlight .news-image:first-of-type .mask { -webkit-border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -webkit-border-bottom-left-radius: 0; -moz-border-bottom-left-radius: 0; border-bottom-left-radius: 0; } } #horse-detail-item-general-info .registered-link { cursor: pointer; } #horse-detail-item-general-info .registered-link:hover { color: #f77c00; } @media print { #horse-detail-item-general-info { page-break-inside: avoid; } } #Kwpn_Form_BecomeMember_DateOfBirth { display: block; } .play-button { box-sizing: border-box; position: relative; display: block; transform: translate(-50%, -50%) scale(var(--ggs, 4)); width: 22px; height: 22px; position: absolute; top: 50%; left: 50%; color: white; border-radius: 50%; border: 2px solid; padding: 11px; } .play-button::before { content: ""; display: block; box-sizing: border-box; position: absolute; width: 0; height: 10px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 6px solid; top: 6px; left: 9px; } .no-padding-left { padding-left: 0; } .no-border { border: none; } #vueFormRegisterHorse input[type=radio] + label, #vueFormRegisterHorse input[type=checkbox] + label { margin-left: 5px; margin-right: 10px; }