body { text-align: center; } .content, .wide, .narrow, .half, .prejoin, .postjoin, .mship, .mode { float: left; display: inline-block; text-align: center; position: relative; } .content { width: 100%; max-width: 1300px;} .wide { width: 100%; } .narrow { width: 80%; margin: 0% 10% 0% 10%; } .prejoin { width: 550px; float: none;} .postjoin { width: 550px; float: none; height: 100%; max-width: 100%; } .half { width: 50%; } .max { width: 100%; max-width: 1100px;} .over { width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; display: block; position: absolute; } .over .in { width: 100%; top: 50%; transform: translateY(-50%); position: relative; display: inline-block;} .mtop { margin-top: 50px;} .mtop2 { margin-top: 25px;} .mbtm { margin-bottom: 50px;} .mbtm2 { margin-bottom: 25px;} @media all and (max-width: 800px) { .half { width: 100%;}} @media all and (max-width: 1000px) { .narrow { width: 96%; margin-left: 2%; margin-right: 2%; }} @media all and ( min-width: 1300px) { .content { float: none !important; }} .mship input[type="radio"], .mode input[type="radio"] { display: none !important} .bg { position: fixed; height: 100%; width: 50%;background-size: auto 100%;} .bg.one { left: 0; top: 0; bottom: 0; background-repeat: no-repeat;} .bg.two { right: 0; top: 0; bottom: 0; background-repeat: no-repeat;background-position: right} @media all and (max-width: 870px){ .bg { display: none; } } .language-switch { float: right; display: inline-block; position: absolute; background-color: rgba(255,255,255,0.8);padding: 7px 4px 7px 4px; color: #000; top: 15px; right: 10px; border-radius: 3px; font: normal 12px/12px regular-open, Arial, sans-serif; letter-spacing: -0.5px; width: 90px; height: 30px; overflow: hidden; z-index: 100; border: 2px solid #eee;} .language-switch a { float: left; display: inline-block; width: 100%; padding: 5px 0px 5px 17px;text-align: left; color: #000; position: relative;} .language-switch .title { margin-bottom: 10px; text-align: center !important; text-transform: capitalize;} .language-switch:hover { height: auto; background-color: rgba(255,255,255,1)} .language-switch a:hover { text-decoration: underline; } .language-switch a::before { content: ''; left: 0; bottom: 5px; width: 13px; height: 10px; position: absolute; float: left; display: inline-block;background-size: 100% 100% !important; border-radius: 2px;} .language-switch #deutsch::before { background: url(../../common/icons/flag-de.svg) no-repeat; } .language-switch #espanol::before { background: url(../../common/icons/flag-es.svg) no-repeat; } .language-switch #english::before { background: url(../../common/icons/flag-en.svg) no-repeat; } .language-switch #frencais::before { background: url(../../common/icons/flag-fr.svg) no-repeat; } .language-switch #nederlands::before { background: url(../../common/icons/flag-nl.svg) no-repeat; } .language-switch #portugues::before { background: url(../../common/icons/flag-pt.svg) no-repeat; } .prejoin .bigt { font: normal 20px/25px regular-open, Arial, sans-serif; letter-spacing: -0.5px } .prejoin .medt { font: normal 15px/15px regular-open, Arial, sans-serif; letter-spacing: -0.5px } .prejoin .smallt { font: normal 10px/10px regular-open, Arial, sans-serif; letter-spacing: -0.5px } .prejoin .title { font: normal 18px/18px regular-open, Arial, sans-serif; letter-spacing: -0.5px; padding: 20px; } @media all and (max-width: 400px){ .plan .title { text-align: left; padding-left: 10px;} } .mship { border: 4px solid; width: 98%; padding: 15px; margin: 5px 1% 5px 1%; border-radius: 5px;} .mship .wide { padding-left: 30px; } .mship .left { display: inline-block; float: left; position: relative; } .mship .right { display: inline-block; float: right; position: relative; } .mship .best { position: absolute; display: inline-block;right: 100px; background: #fa5a49;background: -webkit-linear-gradient(left, #f64649 0%, #fa5a49 50%, #ff6f49 100%);background: linear-gradient(to right, #f64649 0%, #fa5a49 50%, #ff6f49 100%);padding: 10px 15px; border-radius: 3px;position: absolute; color: #fff;} .mship .name, .mship .terms, .mship .price { display: block; text-align: right; clear: both; color: #222;} .mship .price * { float: left; } .mship .price .smallt { padding-top: 11px;} .mship .price .smallt:first-child { padding-top: 10px; padding-right: 2px; color: #ababab } .mship .name, .mship .terms { float: left; } .mship .terms { color: #ababab; } .mship .price { float: right; } .mship .per { display: block; text-align: right; float: right; clear: both; color: #222;} .mship .radio { background-color: #d1d1d1; position: absolute;float: left;left: 10px;height: 20px;width: 20px;top: 22.5px; border-radius: 3px;} .mship .radio::after { left: 2px;bottom: 3px;width: 20px;height: 20px; position: absolute;float: left;display: inline-block;background-size: contain;} .mship.sel .radio { background-color: #21bc1e;} .mship.sel .radio::after { content: ''; background: url(../../common/icons/check.svg) no-repeat; } .mship.dimmed { background-color: #fff; } .mship.dimmed span, .mship.dimmed var { color: #C4C4C4; } .mship.dimmed .best { background-color: #C4C4C4; color: #fff;} @media all and (max-width: 700px){ .mship .best { right: 100px; padding: 5px 10px; }} @media all and (max-width: 600px){ .mship .best { right: 80px; width: 105px; }} @media all and (max-width: 550px){ .mship .best { font: normal 10px/10px regular-open, Arial, sans-serif; left: 0px;bottom: -25px; padding: 7px 10px; } .mship { padding: 10px } .mship .wide { padding: 0px; } .mship .name {font: normal 15px/15px regular-open, Arial, sans-serif !important;} .mship .name, .mship .terms, .mship .left { width: 100%; text-align: center;} .mship .right { width: unset; text-align: center; margin-top: 10px; float: none;} .mship .price { float: none; display: inline-block; clear: none; } .mship .price span { position: relative; font: normal 15px/15px regular-open, Arial, sans-serif !important; padding-top: 0px !important} .mship .per { display: inline-block;position: relative; clear: none; float: right; padding-top: 4px; padding-left: 2px;} } .mode { border: 4px solid; width: 48%; padding:15px;margin: 5px 1% ;border-radius: 5px; position: relative;} .mode#paygarden { width: 98% !important; } .mode span { display: block; text-align: left; float: left; clear: both; color: #222; padding-left: 22px} .mode .radio { background-color: #d1d1d1; position: absolute;float: left;left: 10px;height: 15px;width: 15px;top: 14px; border-radius: 3px;} .mode .radio::after { left: 1px;width: 20px;height: 20px; position: absolute;float: left;display: inline-block;background-size: 14px !important;} .mode.slctd .radio { background-color: #21bc1e;} .mode.slctd .radio::after { content: ''; background: url(../../common/icons/check.svg) no-repeat; } .mode > .wide::after {display: inline-block; content: '';width: 70px;;height: 15px;right: 0;bottom: 0;display: inline-block;content: '';float: right;} #credit_card > .wide::after { background: url(../../common/icons/credit.svg) no-repeat right;background-size: auto 100%;} #direct_debit > .wide::after { background: url(../../common/icons/direct.svg) no-repeat right;background-size: auto 100%;} #paypal > .wide::after { background: url(../../common/icons/paypal.svg) no-repeat right;background-size: auto 100%;} #ideal > .wide::after { background: url(../../common/icons/ideal.svg ) no-repeat right;background-size: auto 100%; } #paygarden > .wide::after { background: url(../../common/icons/paygarden.svg) no-repeat right;background-size: auto 100%; } #sofort > .wide::after { background: url(../../common/icons/sofort.svg) no-repeat right;background-size: auto 100%; } #klarna > .wide::after { background: url(../../common/icons/klarna.png) no-repeat right;background-size: auto 100%; } .user-info input { color: #000; padding: 12px 30px 12px 30px; border-radius: 3px; border: 3px solid;} .user-info .form_input { float: left; display: inline-block; text-align: center; position: relative; padding: 5px; position: relative;} .user-info .form_input img { position: absolute; left: 11px; top: 16px; float: left; display: inline-block; width: 20px; opacity: 0.4} .user-info .username, .user-info .password { width: 50%;} .user-info .email { width: 100%;} .user-info input:focus ~ img{ opacity: 1 } .pay_garden p { display: inline-block; } .tac { margin-top: 10px; margin-bottom: 10px;font: normal 12px/12px regular-open, Arial;} .tac a { color: #fff; text-decoration: underline; cursor: pointer; text-transform: capitalize;} #termsAndCond { width: unset; display: inline-block; float: none; } .overlay.garden { background-color: rgba(0,0,0,0); } .footer {text-align:center;font: normal 14px/12px regular-open, Arial; padding-top: 40px; padding-bottom: 20px;} .footer span { padding: 5px; font: normal 12px/12px regular-open, Arial, sans-serif; color: #C2C2C2;} .footer a { color: #fff; text-decoration: underline; } .light .footer span { color: #333; } .light .footer a { color: #000; } .light #paygarden-redirect p, .light #paygarden-redirect span { color: #333; } .joinbutton { float: left; display: inline-block; width: 70% !important; margin-left: 15%; margin-right: 15%; background-color: #21bc1e !important;font: normal 18px/18px regular-open, Arial; cursor: pointer; color: #fff !important; text-transform: capitalize; border: none !important; padding: 12px 30px 12px 30px; border-radius: 3px;margin-top: 10px; margin-bottom: 20px;} .joinbutton:hover { background-color: #00ab14 !important} .pop { width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; display: block; position: fixed; z-index: 10000000; background-color: rgba(0,0,0,0.85);} .pop .in { width: 100%; top: 0; position: relative; background: #fa5a49;background: -webkit-linear-gradient(left, #f64649 0%, #fa5a49 50%, #ff6f49 100%);background: linear-gradient(to right, #f64649 0%, #fa5a49 50%, #ff6f49 100%); display: inline-block ; overflow: hidden; padding:15px 10px;} .pop .in * { font: 400 14px/14px regular-open, Arial, sans-serif; display: inline-block; color: #fff;} .pop .wide { padding: 0px 40px; } .pop .in p { float: right;display: inline-block; text-transform: capitalize; cursor: pointer;} .pop .in p:hover { text-decoration: underline; } .pop .exit.error { position: absolute; right: 10px; background: url(../../common/icons/exit.svg) no-repeat right;background-size: auto 100%; width: 20px; height: 20px; display: inline-block; cursor: pointer;transform: translateY(-50%);top: 50%;} .pop .exit:hover { opacity: 0.8; cursor: pointer;} @media all and (max-width: 1080px) { .prejoin {width: 80%;margin: 0% 10% 0% 10%;}} @media all and (max-width: 800px) { .prejoin {width: 90%;margin: 0% 5% 0% 5%;}} @media all and (max-width: 650px) { .prejoin {width: 98%;margin: 0% 1% 0% 1%;} .pay_garden p { display: none; }} @media all and (max-width: 550px) { .mode {width: 98% !important; } } #paygarden-redirect span { font: 400 14px/14px regular-open, Arial, sans-serif; padding: 5px; color: #d1d1d1 } #paygarden-redirect .redirect{ font: 400 14px/14px regular-open, Arial, sans-serif; padding: 5px; color: #d1d1d1; margin-top: 10px; margin-bottom: 20px} .benefits { margin-bottom: 40px; } .benefits .wide img { padding: 10px; } .benefits span { padding: 3px; text-align: left;} .benefits .medt::after {display: inline-block; content: '';width: 14px;;height: 14px;right: 0;bottom: 0;display: inline-block;content: '';float: left;background: url(../../common/icons/check-box-white.svg) no-repeat right;background-size: auto 100%; margin-right: 5px;} .benefits .medt { font: normal 13px/13px regular-open, Arial, sans-serif;} .benefits .half { padding: 0px 10px 0px 10px } .light .benefits .medt::after {background: url(../../common/icons/check-box-black.svg) no-repeat right;background-size: auto 100%;} @media all and (max-width: 800px) { .benefits .wide .half { width: 50% !important } .benefits .wide img { padding: 5px } .benefits .half { padding: 0px 5px 0px 5px } .benefits span { text-align: center; } .benefits .medt::after {display: none;} } .mship:hover, .mship *:hover, .mode:hover, .mode *:hover { cursor: pointer; } .mode:active, .mship:active { background-color: #e5e5e5 } .mship, .mode, .user-info input { border-color: #eee; background-color: #f8f8f8;} .light .mship, .light .mode, .light .user-info input { border-color: #c5c5c5; background-color: #f8f8f8;} .mship.sel, .mode.slctd { background-color: #b3ffbc;} .mship.sel, .mship:hover, .mode.slctd, .mode:hover, .user-info input:focus { border-color: #21bc1e; } .user-info input:focus { background-color: #fff;} .prejoin .title, .tac, .benefits span { color: #d1d1d1;} .light .prejoin .title, .light .tac, .light .tac a, .light .benefits span { color: #333;} .tube .bg { opacity: 0.3 } .tube .language-switch { right: 1.2%; } .tube .content { max-width: 1300px!important; height: unset !important; min-height: unset !important;} .tube .prejoin { float: left !important; display: inline-block; width: 38%; margin-left: 1%; margin-right: 1%} .tube .video { display: inline-block; width: 58%; float: left; margin-left: 1%; margin-right: 1%;} .tube .generic-header img { float: left ; display: inline-block; position: absolute; width: 200px; z-index: 100; top: 10px; left: 1.2%; } .tube .heading .title { font: 300 45px/50px semi-open, Arial, sans-serif; text-align: center; color: #fff; margin-bottom: 5px;} .tube .heading .subtitle { font: 300 30px/30px regular-open, Arial, sans-serif; text-align: center;color: #fff; } .tube .meta .title { font: 300 35px/40px semi-open, Arial, sans-serif; text-align: left; color: #fff; float: left; padding-left: 1%; margin-bottom: 5px;} .tube .meta .subtitle { font: 300 18px/18px regular-open, Arial, sans-serif; text-align: left; color: #fff; float: left; padding-left: 1%;} .tube .content .rmp-poster-img:hover { cursor: pointer; opacity: 0.9 } .tube .video #rmpPlayer { border-radius: 3px; overflow: hidden;} .tube .video #rmpPlayer .rmp-time-elapsed, .tube .video #rmpPlayer .rmp-duration { display: none; } .tube .video #rmpPlayer .rmp-volume {left: 10% !important} .tube .benefits .bigt { font: normal 20px/25px regular-open, Arial, sans-serif; letter-spacing: -0.5px; } .tube .benefits .wide img:first-child { padding-left: 0px !important } .tube .benefits .wide img:last-child { padding-right: 0px !important } .tube .video .over { background-color: rgba(0,0,0,0.4); } .tube .video .over .title { font: 300 45px/45px semi-open, Arial, sans-serif; color: #fff; margin-bottom: 15px; letter-spacing: -1px; cursor: default;} .tube .video .over .subtitle span { display: inline-block; font: 300 20px/20px semi-open, Arial, sans-serif; color: #fff; cursor: default;} .tube span.rmp-i { display: none !important; } .tube .best { right: 50px; } .tube .video .below { display: none !important; } @media all and (max-width: 1250px) { .tube .video { width: 52%; } .tube .prejoin { width: 44%; } .tube .meta .title { font: 300 25px/30px semi-open, Arial, sans-serif;} .tube .meta .subtitle { font: 300 14px/14px regular-open, Arial, sans-serif;} } @media all and (max-width: 1080px) { .tube .video .over .title { font: 300 30px/30px semi-open, Arial, sans-serif;} .tube .video .over .subtitle span { font: 300 16px/16px regular-open, Arial, sans-serif;} .tube .meta .title { font: 300 20px/25px semi-open, Arial, sans-serif;} .tube .meta .subtitle { font: 300 14px/16px regular-open, Arial, sans-serif;} .tube .video { width: 48%; } .tube .prejoin { width: 48%; } } @media all and (max-width: 1000px) { .tube .best { font: normal 10px/10px regular-open, Arial, sans-serif; left: 0px;bottom: -25px; padding: 7px 10px; width: 105px;} } @media all and (max-width: 910px) { .tube .generic-header { display: none; } .tube .video { width: 80%; margin-left: 10%; margin-right: 10%;} .tube .prejoin { width: 80%; margin-left: 10%; margin-right: 10%; } .tube .video .right { display: none !important; } .tube .video .below { display: inline-block !important; } .tube .heading .title { font: 300 30px/35px semi-open, Arial, sans-serif;} .tube .heading .subtitle { font: 300 18px/20px regular-open, Arial, sans-serif;} .tube .meta .title { font: 300 25px/30px semi-open, Arial, sans-serif;} .tube .meta .subtitle { font: 300 14px/14px regular-open, Arial, sans-serif;} .tube .video .over .title { font: 300 40px/45px semi-open, Arial, sans-serif;} .tube .video .over .subtitle span { font: 300 20px/20px regular-open, Arial, sans-serif;} } @media all and (max-width: 700px){ .tube .video { width: 98%; margin-left: 1%; margin-right: 1%;} .tube .prejoin { width: 98%; margin-left: 1%; margin-right: 1%;} } @media all and (min-width: 600px) { .tube .benefits .half { width: 50% !important }} @media all and (max-width: 600px) { .tube .benefits { display: none; }} @media all and (max-width: 520px){ .tube .video #rmpPlayer .rmp-volume {left: 15% !important} .tube .video .over .title { font: 300 30px/30px semi-open, Arial, sans-serif;} .tube .video .over .subtitle span { font: 300 16px/16px regular-open, Arial, sans-serif;} .tube .meta { display: none;} .tube #mobile-title { display: inline-block !important; text-align: center; } } @media all and (max-width: 400px){ .tube .video .over .title { font: 18px/20px semi-open, Arial, sans-serif;} .tube .video .over .subtitle span { font: 300 12px/14px regular-open, Arial, sans-serif;} .tube .heading .title { font: 300 20px/25px semi-open, Arial, sans-serif;} .tube .heading .subtitle { font: 300 14px/16px regular-open, Arial, sans-serif;} } .postjoin { margin-top: 250px; margin-bottom: 300px;} .postjoin .message { border: 4px solid; width: 98%; padding: 15px; margin: 5px 1% 5px 1%; border-radius: 5px; border-color: #eee; background-color: #f8f8f8;} .postjoin .button { float: left; display: inline-block; width: 70% !important; margin-left: 15%; margin-right: 15%; ;font: normal 18px/18px regular-open, Arial; cursor: pointer; color: #fff !important; text-transform: capitalize; border: none !important; padding: 12px 30px 12px 30px; border-radius: 3px;margin-top: 10px; margin-bottom: 20px;} .postjoin .approved .button { background-color: #21bc1e !important } .postjoin .approved .button:hover { background-color: #00ab14 !important } .postjoin .denied .button { background-color: #fa5a49 !important } .postjoin .denied .button:hover { background-color: #e75546 !important } .postjoin .title { font: 300 20px/25px semi-open, Arial, sans-serif; text-align: center; padding-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.1) } .postjoin .subtitle { font: 300 14px/16px regular-open, Arial, sans-serif; text-align: center; padding-top: 10px; } .tube.snap .content { max-width: 1150px!important; height: unset !important; min-height: unset !important; } .tube.snap .prejoin { width: 48%; } .tube.snap .video { width: 48%; } .tube.snap .snap-title { font: 300 25px/30px semi-open, Arial, sans-serif; text-align: left; color: #dbd000; margin: 7px 0px} .tube.snap .ben { color: #f1f1f1;font: 300 16px/18px regular-open, Arial, sans-serif; text-align: left; margin: 3px 0px} .tube.snap .ben::before {display: inline-block; content: '';width: 16px;height: 16px;right: 0;bottom: 0;display: inline-block;content: '';float: left;background: url(../../common/icons/check-box-white.svg) no-repeat right;background-size: auto 100%; margin-right: 5px; opacity: 0.5;} @media all and ( min-width: 1150px) { .tube.snap .content { float: none !important; }} @media all and (max-width: 910px) { .tube.snap .video, .tube.snap .prejoin { width: 90%; margin-left: 5%; margin-right: 5%;} } @media all and (max-width: 500px) { .tube.snap .ben { font: 300 12px/14px regular-open, Arial, sans-serif;} .tube.snap .video, .tube.snap .prejoin { width: 98%; margin-left: 1%; margin-right: 1%;} }