.agrikon-pricing-container {
width: 100%;
max-width: 1170px;
margin: 0px auto;
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-container {
margin: 0px auto;
}
.agrikon-pricing-container.agrikon-full-width {
width: 100%;
max-width: none;
}
}
.agrikon-pricing-switcher {
text-align: center;
}
.agrikon-pricing-switcher .fieldset {
display: inline-block;
position: relative;
padding: 2px;
border-radius: 50em;
border: 1px solid #225b78;
}
.agrikon-pricing-switcher input[type="radio"] {
position: absolute;
opacity: 0;
}
.agrikon-pricing-switcher label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 90px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 14px;
color: #FFFFFF;
margin-bottom: 0;
}
.agrikon-pricing-switcher .agrikon-switch { position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 90px;
background-color: #0c1f28;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
.agrikon-pricing-switcher input[type="radio"]:checked + label + .agrikon-switch,
.agrikon-pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .agrikon-switch { -webkit-transform: translateX(90px);
-moz-transform: translateX(90px);
-ms-transform: translateX(90px);
-o-transform: translateX(90px);
transform: translateX(90px);
}
.no-js .agrikon-pricing-switcher {
display: none;
}
.agrikon-pricing-list {
margin: 32px 0 0;
padding: 0;
}
.agrikon-has-margins .agrikon-pricing-list {
margin-left: -15px;
margin-right: -15px;
}
.agrikon-pricing-list > li {
position: relative;
margin-bottom: 15px;
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-list {
margin: 48px 0 0;
}
.agrikon-pricing-list:after {
content: "";
display: table;
clear: both;
}
.agrikon-pricing-list > li {
width: 33.33333%;
float: left;
}
.agrikon-has-margins .agrikon-pricing-list > li {
width: 33.33333%;
float: left;
padding: 15px;
}
.agrikon-has-margins .agrikon-pricing-list > li:last-of-type {
margin-right: 0;
}
}
.agrikon-pricing-wrapper { position: relative;
}
.touch .agrikon-pricing-wrapper { -webkit-perspective: 2000px;
-moz-perspective: 2000px;
perspective: 2000px;
}
.agrikon-pricing-wrapper.is-switched .is-visible { -webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
-webkit-animation: nt-rotate 0.5s;
-moz-animation: nt-rotate 0.5s;
animation: nt-rotate 0.5s;
}
.agrikon-pricing-wrapper.is-switched .is-hidden { -webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-animation: nt-rotate-inverse 0.5s;
-moz-animation: nt-rotate-inverse 0.5s;
animation: nt-rotate-inverse 0.5s;
opacity: 0;
}
.agrikon-pricing-wrapper.is-switched .is-selected {
opacity: 1;
}
.agrikon-pricing-wrapper.is-switched.reverse-animation .is-visible { -webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
-webkit-animation: nt-rotate-back 0.5s;
-moz-animation: nt-rotate-back 0.5s;
animation: nt-rotate-back 0.5s;
}
.agrikon-pricing-wrapper.is-switched.reverse-animation .is-hidden { -webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
-webkit-animation: nt-rotate-inverse-back 0.5s;
-moz-animation: nt-rotate-inverse-back 0.5s;
animation: nt-rotate-inverse-back 0.5s;
opacity: 0;
}
.agrikon-pricing-wrapper.is-switched.reverse-animation .is-selected {
opacity: 1;
}
.agrikon-pricing-wrapper > li {
background-color: #FFFFFF;
-webkit-backface-visibility: hidden;
backface-visibility: hidden; outline: 1px solid transparent;
}
.agrikon-pricing-wrapper > li::after { content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50px;
pointer-events: none;
background: -webkit-linear-gradient( right , #FFFFFF, rgba(255, 255, 255, 0));
background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
}
.agrikon-pricing-wrapper > li.is-ended::after { display: none;
}
.agrikon-pricing-wrapper .is-visible { position: relative;
z-index: 5;
}
.agrikon-pricing-wrapper .is-hidden { position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.agrikon-pricing-wrapper .is-selected { z-index: 3 !important;
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-wrapper > li::before { content: '';
position: absolute;
z-index: 6;
left: -1px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 50%;
width: 1px;
background-color: #b1d6e8;
}
.agrikon-pricing-wrapper > li::after { display: none;
}
.agrikon-popular .agrikon-pricing-wrapper > li {
box-shadow: inset 0 0 0 3px var(--color-secondary);
}
.agrikon-has-margins .agrikon-pricing-wrapper > li, .agrikon-has-margins .agrikon-popular .agrikon-pricing-wrapper > li {
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.agrikon-secondary-theme .agrikon-pricing-wrapper > li {
background: #3aa0d1;
background: -webkit-linear-gradient( bottom , #3aa0d1, #3ad2d1);
background: linear-gradient(to top, #3aa0d1, #3ad2d1);
}
.agrikon-secondary-theme .agrikon-popular .agrikon-pricing-wrapper > li {
background: var(--color-secondary);
background: -webkit-linear-gradient( bottom , var(--color-secondary), #e99b68);
background: linear-gradient(to top, var(--color-secondary), #e99b68);
box-shadow: none;
}
:nth-of-type(1) > .agrikon-pricing-wrapper > li::before { display: none;
}
.agrikon-has-margins .agrikon-pricing-wrapper > li {
border-radius: 4px 4px 6px 6px;
}
.agrikon-has-margins .agrikon-pricing-wrapper > li::before {
display: none;
}
}
@media only screen and (min-width: 1500px) {
.agrikon-full-width .agrikon-pricing-wrapper > li {
padding: 40px 0;
}
}
.no-js .agrikon-pricing-wrapper .is-hidden {
position: relative;
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
-o-transform: rotateY(0);
transform: rotateY(0);
margin-top: 14px;
}
@media only screen and (min-width: 768px) {
.agrikon-popular .agrikon-pricing-wrapper > li::before { display: none;
}
.agrikon-popular + li .agrikon-pricing-wrapper > li::before { display: none;
}
}
.agrikon-pricing-header {
position: relative;
z-index: 1;
height: 80px;
padding: 14px;
pointer-events: none;
background-color: #3aa0d1;
color: #FFFFFF;
}
.agrikon-pricing-header h2 {
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 3px;
font-weight: 700;
text-transform: uppercase;
}
.agrikon-popular .agrikon-pricing-header {
background-color: var(--color-secondary);
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-header {
height: auto;
padding: 30px 14px 25px;
pointer-events: auto;
text-align: center;
color: var(--color-dark);
background-color: transparent;
}
.agrikon-popular .agrikon-pricing-header {
color: var(--color-secondary);
background-color: transparent;
}
.agrikon-secondary-theme .agrikon-pricing-header {
color: #FFFFFF;
}
}
.agrikon-currency, .agrikon-value {
font-size: 30;
font-weight: 300;
}
.agrikon-duration {
font-weight: 700;
font-size: 13px;
color: #8dc8e4;
text-transform: uppercase;
}
.agrikon-popular .agrikon-duration {
color: #f3b6ab;
}
.agrikon-duration::before {
content: '/';
margin-right: 2px;
}
@media only screen and (min-width: 768px) {
.agrikon-value {
font-size: 70px;
font-weight: 300;
}
.agrikon-currency, .agrikon-duration {
color: rgba(23, 61, 80, 0.4);
}
.agrikon-popular .agrikon-currency, .agrikon-popular .agrikon-duration {
color: var(--color-secondary);
}
.agrikon-secondary-theme .agrikon-currency, .agrikon-secondary-theme .agrikon-duration {
color: #2e80a7;
}
.agrikon-secondary-theme .agrikon-popular .agrikon-currency, .agrikon-secondary-theme .agrikon-popular .agrikon-duration {
color: #ba6453;
}
.agrikon-currency {
display: inline-block;
margin-top: 10px;
vertical-align: top;
font-size: 20px;
font-weight: 700;
}
.agrikon-duration {
font-size: 14px;
}
}
.agrikon-pricing-body {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.is-switched .agrikon-pricing-body { overflow: hidden;
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-body {
overflow-x: visible;
}
}
.agrikon-pricing-features {
width: 600px;
}
.agrikon-pricing-features:after {
content: "";
display: table;
clear: both;
}
.agrikon-pricing-features li {
width: 100px;
float: left;
padding: 16px 14px;
font-size: 14px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.agrikon-pricing-features em {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-features {
width: auto;
}
.agrikon-pricing-features li {
float: none;
width: auto;
padding: 14px;
}
.agrikon-popular .agrikon-pricing-features li {
margin: 0 3px;
}
.agrikon-pricing-features li:nth-of-type(2n+1) {
background-color: rgba(23, 61, 80, 0.06);
}
.agrikon-pricing-features em {
display: inline-block;
margin-bottom: 0;
}
.agrikon-has-margins .agrikon-popular .agrikon-pricing-features li, .agrikon-secondary-theme .agrikon-popular .agrikon-pricing-features li {
margin: 0;
}
.agrikon-secondary-theme .agrikon-pricing-features li {
color: #FFFFFF;
}
.agrikon-secondary-theme .agrikon-pricing-features li:nth-of-type(2n+1) {
background-color: transparent;
}
}
.agrikon-pricing-footer {
position: absolute;
z-index: 1;
top: 0;
left: 0; height: 80px;
width: 100%;
}
.agrikon-pricing-footer::after { content: '';
position: absolute;
right: 14px;
top: 50%;
bottom: auto;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
height: 20px;
width: 20px;
}
@media only screen and (min-width: 768px) {
.agrikon-pricing-footer {
position: relative;
height: auto;
padding: 28px 0;
text-align: center;
}
.agrikon-pricing-footer::after { display: none;
}
.agrikon-has-margins .agrikon-pricing-footer {
padding-bottom: 0;
}
}
.agrikon-select span {
color: #000;
}
@media only screen and (min-width: 768px) {
} @-webkit-keyframes nt-rotate {
0% {
-webkit-transform: perspective(2000px) rotateY(0);
}
70% { -webkit-transform: perspective(2000px) rotateY(200deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(180deg);
}
}
@-moz-keyframes nt-rotate {
0% {
-moz-transform: perspective(2000px) rotateY(0);
}
70% { -moz-transform: perspective(2000px) rotateY(200deg);
}
100% {
-moz-transform: perspective(2000px) rotateY(180deg);
}
}
@keyframes nt-rotate {
0% {
-webkit-transform: perspective(2000px) rotateY(0);
-moz-transform: perspective(2000px) rotateY(0);
-ms-transform: perspective(2000px) rotateY(0);
-o-transform: perspective(2000px) rotateY(0);
transform: perspective(2000px) rotateY(0);
}
70% { -webkit-transform: perspective(2000px) rotateY(200deg);
-moz-transform: perspective(2000px) rotateY(200deg);
-ms-transform: perspective(2000px) rotateY(200deg);
-o-transform: perspective(2000px) rotateY(200deg);
transform: perspective(2000px) rotateY(200deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(180deg);
-moz-transform: perspective(2000px) rotateY(180deg);
-ms-transform: perspective(2000px) rotateY(180deg);
-o-transform: perspective(2000px) rotateY(180deg);
transform: perspective(2000px) rotateY(180deg);
}
}
@-webkit-keyframes nt-rotate-inverse {
0% {
-webkit-transform: perspective(2000px) rotateY(-180deg);
}
70% { -webkit-transform: perspective(2000px) rotateY(20deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(0);
}
}
@-moz-keyframes nt-rotate-inverse {
0% {
-moz-transform: perspective(2000px) rotateY(-180deg);
}
70% { -moz-transform: perspective(2000px) rotateY(20deg);
}
100% {
-moz-transform: perspective(2000px) rotateY(0);
}
}
@keyframes nt-rotate-inverse {
0% {
-webkit-transform: perspective(2000px) rotateY(-180deg);
-moz-transform: perspective(2000px) rotateY(-180deg);
-ms-transform: perspective(2000px) rotateY(-180deg);
-o-transform: perspective(2000px) rotateY(-180deg);
transform: perspective(2000px) rotateY(-180deg);
}
70% { -webkit-transform: perspective(2000px) rotateY(20deg);
-moz-transform: perspective(2000px) rotateY(20deg);
-ms-transform: perspective(2000px) rotateY(20deg);
-o-transform: perspective(2000px) rotateY(20deg);
transform: perspective(2000px) rotateY(20deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(0);
-moz-transform: perspective(2000px) rotateY(0);
-ms-transform: perspective(2000px) rotateY(0);
-o-transform: perspective(2000px) rotateY(0);
transform: perspective(2000px) rotateY(0);
}
}
@-webkit-keyframes nt-rotate-back {
0% {
-webkit-transform: perspective(2000px) rotateY(0);
}
70% { -webkit-transform: perspective(2000px) rotateY(-200deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(-180deg);
}
}
@-moz-keyframes nt-rotate-back {
0% {
-moz-transform: perspective(2000px) rotateY(0);
}
70% { -moz-transform: perspective(2000px) rotateY(-200deg);
}
100% {
-moz-transform: perspective(2000px) rotateY(-180deg);
}
}
@keyframes nt-rotate-back {
0% {
-webkit-transform: perspective(2000px) rotateY(0);
-moz-transform: perspective(2000px) rotateY(0);
-ms-transform: perspective(2000px) rotateY(0);
-o-transform: perspective(2000px) rotateY(0);
transform: perspective(2000px) rotateY(0);
}
70% { -webkit-transform: perspective(2000px) rotateY(-200deg);
-moz-transform: perspective(2000px) rotateY(-200deg);
-ms-transform: perspective(2000px) rotateY(-200deg);
-o-transform: perspective(2000px) rotateY(-200deg);
transform: perspective(2000px) rotateY(-200deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(-180deg);
-moz-transform: perspective(2000px) rotateY(-180deg);
-ms-transform: perspective(2000px) rotateY(-180deg);
-o-transform: perspective(2000px) rotateY(-180deg);
transform: perspective(2000px) rotateY(-180deg);
}
}
@-webkit-keyframes nt-rotate-inverse-back {
0% {
-webkit-transform: perspective(2000px) rotateY(180deg);
}
70% { -webkit-transform: perspective(2000px) rotateY(-20deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(0);
}
}
@-moz-keyframes nt-rotate-inverse-back {
0% {
-moz-transform: perspective(2000px) rotateY(180deg);
}
70% { -moz-transform: perspective(2000px) rotateY(-20deg);
}
100% {
-moz-transform: perspective(2000px) rotateY(0);
}
}
@keyframes nt-rotate-inverse-back {
0% {
-webkit-transform: perspective(2000px) rotateY(180deg);
-moz-transform: perspective(2000px) rotateY(180deg);
-ms-transform: perspective(2000px) rotateY(180deg);
-o-transform: perspective(2000px) rotateY(180deg);
transform: perspective(2000px) rotateY(180deg);
}
70% { -webkit-transform: perspective(2000px) rotateY(-20deg);
-moz-transform: perspective(2000px) rotateY(-20deg);
-ms-transform: perspective(2000px) rotateY(-20deg);
-o-transform: perspective(2000px) rotateY(-20deg);
transform: perspective(2000px) rotateY(-20deg);
}
100% {
-webkit-transform: perspective(2000px) rotateY(0);
-moz-transform: perspective(2000px) rotateY(0);
-ms-transform: perspective(2000px) rotateY(0);
-o-transform: perspective(2000px) rotateY(0);
transform: perspective(2000px) rotateY(0);
}
}
ul.agrikon-pricing-wrapper,
.agrikon-pricing-features{
padding: 0;
}
.agrikon-pricing-list > li,
.agrikon-pricing-wrapper > li {
list-style: none;
}
@media only screen and (min-width: 768px){
.agrikon-pricing-list.col4 > li {
width: 25%;
}
.agrikon-pricing-list.col2 > li {
width: 50%;
}
}