@font-face {
    font-family: 'Vodka Sans';
    src:
        url('../../../fonts/VodkaSans-Regular.ttf') format('truetype'),
        url('../../../fonts/VodkaSans-Regular.otf') format("opentype"),
        url('../../../fonts/VodkaSans-Regular.woff') format('woff'),
        url('../../../fonts/VodkaSans-Regular.woff2') format('woff2'),
        url('../../../fonts/VodkaSans-Regular.svg#trueNorth') format('svg')
}

.ap-img-wrapper { position: relative; margin-top: 1em }
.ap-img-wrapper .img-selectors { position: absolute; top: 0; left: 0; width: 100%; height: 100% }
.ap-img-wrapper .img-selectors label { width: 33.3333%; height: 100% }
.ap-img-wrapper .img-selectors label:hover { cursor: pointer }
.ap-img-wrapper .ap-img { width: 100% }
.ap-selector li { display: inline-block; width: 32% }
.ap-selector li input[type="radio"],
.ap-selector li input[type="checkbox"] { display: none }
.ap-selector li input[type="radio"]:checked + .radiobtn::before,
.ap-selector li input[type="checkbox"]:checked + .checkbtn::before { background-color: #A5D7D6 }
.ap-selector li label { cursor: pointer }
.ap-selector li .radiobtn,
.ap-selector li .checkbtn { display: block; position: relative; margin: 0 auto; border: 3px solid #919EF2; border-radius: 100%; height: 40px; width: 40px }
.ap-selector li .radiobtn:hover,
.ap-selector li .checkbtn:hover { background-color: #f7f7f7 }
.ap-selector li .radiobtn::before,
.ap-selector li .checkbtn::before { position: absolute; display: block; content: ''; border-radius: 100%; height: 22px; width: 22px; top: 6px; left: 6px; margin: auto }
.ap-selector li .radiotitle { text-align: center; width: 100%; padding: 0.5em 0 }
.product-essential > .title h3 { text-align: center }
.additional-product { padding: 1.5em 1em 2.5em; background-color: #B9E9F0 }
.agenda-checkbox .additional-product { border: 1px solid #afafaf }
.additional-product .title { position: relative }
.additional-product .title > span { display: block; text-align: center }
.additional-product .title > span::before { content: ''; position: absolute; border-bottom: 2px solid #ffffff; width: 100%; margin-top: 19px; left: 0 }
.additional-product h3 { padding: 8px 0; text-transform: uppercase; text-align: center; font-weight: bold; background-color: #B9E9F0; display: inline-block; position: relative; padding: 8px 20px }
.additional-product .gallery { position: relative }
.additional-product .btn-addtocart { width: 100%; background-color: #FBF1B6; color: #636363; font-weight: bold }
.additional-product .btn-addtocart:hover { background-color: #FBF1B6; opacity: 0.8 }
.additional-product .additional-product-container { display: none }
.additional-product .additional-product-container.active { display: block }
.product-view .product-essential .add-to-box { border-bottom: none }
.product-view .additional-product .add-to-box { margin-bottom: 0 }
.product-view .additional-product .description { border-bottom: 2px dotted #ffffff; padding-bottom: 10px }

.tab-header .tab-header-item { display: inline-block; margin-right: -7px; padding: 0.8em 1.5em; border: 1px solid #d9d9d9; border-bottom: 1px solid transparent; background-color: #d6f9fe; border-top-left-radius: 20px; border-top-right-radius: 20px; cursor: pointer; vertical-align: bottom }
.tab-header .tab-header-item.active { position: relative; border: 1px solid #afafaf; background-color: #B9E9F0 }
.tab-header .tab-header-item:not(.active):hover { background-color: #e9fcff; -webkit-transition: background-color 0.2s linear; -ms-transition: background-color 0.2s linear; transition: background-color 0.2s linear }
.tab-header .tab-header-item.active::after { content: ''; position: absolute; left: 0; bottom: -3px; width: 100%; border-bottom: 4px solid #B9E9F0 }

.product-view.not-saleable .product-image { position: relative }
.product-view.not-saleable .product-image:before {
    content: '';
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    z-index: 2;
    background-size: 100% 100%;
}
.product-view.not-saleable .product-img-box .product-image:before { width: 120px; height: 120px; }
.product-view.es.not-saleable .product-img-box .product-image:before { background-image: url(../../../../default/images/mrwonderful_agendalandingpage/2018/agenda/topo-oos-120-es.png) }
.product-view.fr.not-saleable .product-img-box .product-image:before { background-image: url(../../../../default/images/mrwonderful_agendalandingpage/2018/agenda/topo-oos-120-fr.png) }
.product-view.it.not-saleable .product-img-box .product-image:before { background-image: url(../../../../default/images/mrwonderful_agendalandingpage/2018/agenda/topo-oos-120-it.png) }
.product-view.pt.not-saleable .product-img-box .product-image:before { background-image: url(../../../../default/images/mrwonderful_agendalandingpage/2018/agenda/topo-oos-120-pt.png) }

/* Responsive */
@media only screen and (min-width: 771px) {
    .additional-product .gallery,
    .additional-product .description-container { float:left; width: 50% }
    .additional-product .gallery { width: 40%; }
    .additional-product .description-container { padding-left: 6.1%; width: 45% }
    .additional-product { padding: 1.5em 4em }
}

@media only screen and (max-width: 770px) {
    .additional-product .product-title { display: none }
    .additional-product .price-box { text-align: center }
    .additional-product .btn-line { margin-top: 15px }
    .product-view .product-img-box .additional-product .description { border: none }
    .product-view.not-saleable .product-img-box .product-image:before { width: 100px; height: 100px; }
    .tab-header .tab-header-item { width: 33%; padding: 0.8em }
    .tab-header .tab-header-item span { position: relative; display: block; white-space: nowrap; overflow: hidden }
    .tab-header .tab-header-item span::after { content: ''; width: 15px; height: 100%; position: absolute; top: 0; right: 0; background-image: -webkit-linear-gradient(to right, rgba(214,249,254,0), #d6f9fe); background-image: -moz-linear-gradient(to right, rgba(214,249,254,0), #d6f9fe); background-image: -ms-linear-gradient(to right, rgba(214,249,254,0), #d6f9fe); background-image: -o-linear-gradient(to right, rgba(214,249,254,0), #d6f9fe); background-image: linear-gradient(to right, rgba(214,249,254,0), #d6f9fe) }
    .tab-header .tab-header-item:hover span::after { background-image: -webkit-linear-gradient(to right, rgba(233,252,255,0), #e9fcff); background-image: -moz-linear-gradient(to right, rgba(233,252,255,0), #e9fcff); background-image: -ms-linear-gradient(to right, rgba(233,252,255,0), #e9fcff); background-image: -o-linear-gradient(to right, rgba(233,252,255,0), #e9fcff); background-image: linear-gradient(to right, rgba(233,252,255,0), #e9fcff); -webkit-transition: background-color 0.2s linear; -ms-transition: background-color 0.2s linear; transition: background-color 0.2s linear }
    .tab-header .tab-header-item.active span::after { background-image: -webkit-linear-gradient(to right, rgba(185,233,240,0), #B9E9F0); background-image: -moz-linear-gradient(to right, rgba(185,233,240,0), #B9E9F0); background-image: -ms-linear-gradient(to right, rgba(185,233,240,0), #B9E9F0); background-image: -o-linear-gradient(to right, rgba(185,233,240,0), #B9E9F0); background-image: linear-gradient(to right, rgba(185,233,240,0), #B9E9F0) }
}

.product-view .agenda-related-container.extra, .extra-related {background-color: #FAF8D9}
.agenda-related-container.extra .swiper-button-prev, .agenda-related-container.extra .swiper-button-next { top: 58%; }
.extra-related {max-width: 250px;}
.related-extra-title {background-color: #fecbff; border-radius: 25px; height: 45px; position: absolute; z-index: 0; top: 6%; width: 100%; max-width: 520px; left: 0; right: 0; margin-left: auto; margin-right: auto;}
.related-extra-container h2 span { background-color: #fecbff; border-radius: 25px; padding: 5px 20px 2px 20px; }
.related-extra-container h2 {text-shadow: 2px 2px #79377a; text-transform: none; font-family: 'Vodka Sans'; color: #ae72af; font-size: 40px; position: relative; line-height: 40px; padding: 10px;}
.agenda-related-container.extra {height: 100%; position: unset; padding-top: 15px;}
.add-extra-button {font-size: 20px; background-color: #BC89BD; display: inline-block; padding: 5px; padding-right: 25px; padding-left: 25px; border: 0px; color: #fcf8f8; line-height: 20px; border-radius: 20px; font-family: 'Vodka Sans'; text-shadow: 1px 1px #945795; }
.extra-related .extra-name {display: block; margin-top: 10px; line-height: 19px; color: #919090; font-weight: 600; font-size: 15px; }
.extra-related {margin: 15px; margin-right: 1%; margin-left: 1%; text-align: center; width: 17%; display: inline-block; vertical-align: top;}
.extra-related img {width: 100%;}
.agenda-related-box {background-color: #FAF8D9; margin-top: 20px;}
.related-extra-container {position: relative; text-align: center; margin-bottom: -45px;}
.agenda-related-wrapper.extra {text-align: center; padding-top: 10px;}
.extra-related .price-box span.price {font-size: 15px; color: #545454;}

@media only screen and (max-width: 960px) {
    .page .extra-related {width: 25%;}
    .page .extra-related .extra-name {font-size: 14px;}
}

@media only screen and (max-width: 800px) {
    .related-extra-container h2 span { background-color: transparent; }
    .related-extra-container h2 { background-color: #fecbff; border-radius: 30px; }
}

@media only screen and (max-width: 500px) {
    .page .extra-related {width: 42%; margin-left: 2%; margin-right: 2%;}
    .page .extra-related img {width: 70%; margin: 0 auto;}
    .page .extra-related .extra-name {line-height: 10px; font-size: 9px; text-transform: uppercase;}
    .page .extra-related .price-box {margin: 0; margin-bottom: 5px;}
    .page .extra-related .add-extra-button {padding: 3px; padding-right: 20px; padding-left: 20px;}
    .page .related-extra-container { margin-bottom: -50px; }
    .page .agenda-related-wrapper.extra {padding-top: 30px; }
    .page .extra-related .price-box span.price {font-size: 13px;}
    .page .related-extra-container h2 { font-size: 25px; font-weight: 600; letter-spacing: 0; text-shadow: 1px 1px #79377a; padding: 0; }
}

@media only screen and (max-width: 420px) {
    .page .related-extra-title span { font-size: 35px; }
}

.product-title-agenda-design { 
    text-align: center;
    background: #f1a9817a;
    background: radial-gradient(circle farthest-corner at center center, #ffd4bb57 0%, #df65207a 92%);
    background: -webkit-radial-gradient(circle farthest-corner at center center, #ffd4bb57 0%, #df65207a 92%);
    background: -moz-radial-gradient(circle farthest-corner at center center, #ffd4bb57 0%, #df65207a 92%);
    border-radius: 40px;
    margin-bottom: 20px;
}

.product-title-agenda-design span {font-family: 'Vodka Sans'; font-size: 35px; color: #ed9360; text-shadow: 2px 2px #af521e}
.page .product-view .sharing-container { float: none; margin: 0 auto; }

.agenda-custom-kit-banner { text-align: center; width: 100%; }
.agenda-custom-kit-banner .banner-image { display: inline-block; width: 150px; height: 150px; }
.agenda-custom-kit-banner .banner-content { height: 150px; display: inline-block; }
.agenda-custom-kit-banner .banner-content-movil { display: none; height: 130px; }

@media only screen and (max-width: 1080px) {
    .agenda-custom-kit-banner .banner-image { width: 100px; height: 100px; }
    .agenda-custom-kit-banner .banner-content { height: 100px; }
}

@media only screen and (max-width: 780px) {
    .agenda-custom-kit-banner .banner-image { width: 130px; height: 130px; }
    .agenda-custom-kit-banner .banner-content { display: none; }
    .agenda-custom-kit-banner .banner-content-movil { display: inline-block; }
}

@media only screen and (max-width: 650px) {
    .agenda-custom-kit-banner .banner-image { width: 100px; height: 100px; }
    .agenda-custom-kit-banner .banner-content-movil { height: 100px; }
}

@media only screen and (max-width: 450px) {
    .agenda-custom-kit-banner .banner-image { width: 75px; height: 75px; }
    .agenda-custom-kit-banner .banner-content-movil { height: 75px; }
}