@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url("https://use.typekit.net/dca4mha.css");

/**
 * 
 * 	@author		George Iancu
 * 	@copyright	Cube Creative Ltd (c) 2021.
 * 	@license	Commercial
 * 
 */

/** RESET / START **/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;padding-top: 158px;}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
table tbody, table tfoot, table thead,table tbody tr:nth-child(even){ background: none; border: none; }
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{vertical-align: top;}
table tbody td, table tbody th{ padding: 0; }
/** RESET / END **/



/* ===============
 * 
 * DOCUMENT SETUP
 * 
 * ===============
 */
*{ outline: none; box-sizing: border-box; }
*:hover{ 
	-webkit-transition: 0.4s color ease-in-out; -ms-transition: 0.4s color ease-in-out; -o-transition: 0.4s color ease-in-out; -moz-transition: 0.4s color ease-in-out; transition: 0.4s color ease-in-out;
	-webkit-transition: 0.4s background ease-in-out; -ms-transition: 0.4s background ease-in-out; -o-transition: 0.4s background ease-in-out; -moz-transition: 0.4s background ease-in-out; transition: 0.4s background ease-in-out;
	-webkit-transition: 0.4s background-color ease-in-out; -ms-transition: 0.4s background-color ease-in-out; -o-transition: 0.4s background-color ease-in-out; -moz-transition: 0.4s background-color ease-in-out; transition: 0.4s background-color ease-in-out;
}
html,body{/* height: 100%; */padding:0px;margin:0px;min-height: 100vh;}
body{font-family: co-headline, sans-serif !important;font-weight: 400;-webkit-font-smoothing: antialiased;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);overflow-x: hidden;min-height: 100vh;}

h1{ font-size: 45px; color: #425363; line-height: normal; font-weight: 700; text-transform: none; margin: 0 0 20px 0; padding: 0; font-family: co-headline, sans-serif; }
h2{font-size: 40px;color: white;white-space: normal;text-transform: none;margin: 0 0 20px 0;padding: 0;font-family: co-headline, sans-serif;}
h3{ font-size:35px; color: #425363; line-height: normal; font-weight: 700; text-transform: none; margin: 0 0 20px 0; padding: 0; font-family: co-headline, sans-serif;} /* Area title (left) */
h4{font-size:30px;color: #425363;line-height: normal;font-weight: 700;text-transform: none;margin: 0 0 30px 0;padding: 0;font-family: co-headline, sans-serif;} /* Sub header within copy */
h5{ font-size:25px; color: #425363; line-height: normal; font-weight: 700; text-transform: none; margin: 0 0 20px 0; padding: 0; font-family: co-headline, sans-serif;} /* Smaller option */
h6{ font-size:20px; color: #425363; line-height: normal; font-weight: 700; text-transform: none; margin: 0 0 20px 0; padding: 0; font-family: co-headline, sans-serif;} /* Smaller option same as para*/

p,
ul,
ul li{font-size:13px;line-height: 1.4;font-weight:500; color: inherit; } /* Site wide paragraph style */
b, strong {font-size:14px; line-height:19px; color:#00b6ae; font-weight:700} /* Bold copy - colour change */
a{ color:#00b6ae; text-decoration:none;font-weight:500 } /* Para Link */

blockquote {margin: 0px; padding: 0px; border:none; font-size:16px; line-height:21px; color:#00b6ae; font-weight:300}

#wrapper form ::-webkit-input-placeholder {
    color: #536372;
  }
#wrapper form ::-moz-placeholder {
    color: #536372;
  }
#wrapper form :-ms-input-placeholder {
    color: #536372;
  }
#wrapper form :-moz-placeholder {
    color: #536372;
  }

.container{max-width: 50vw;margin: 0 auto;min-height: calc(100vh - 220px);}


.sysalert{position: fixed;top: 0;left: 0;width: 100%;background: red;color: white;padding: 10px 0;}

.button{background: #006ec1;border-radius: 25px;font-size: 14px;padding-left: 20px;padding-right: 20px;line-height: 0.8;}


/* ===============
 * 
 * HEADER
 * 
 * ===============
 */
header{width: 100%;padding: 25px 30px;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;background: white;height: auto;min-height: 150px;}
header > div{ }
header > div:nth-child(1){ }
header > div:nth-child(2){align-self: flex-start;text-align: center;}
header > div:nth-child(3){ }

header > div:nth-child(2) > div{ display: flex; align-items: center; }
header > div:nth-child(2) > div > svg{margin-top: 10px;display: block;}
header > div:nth-child(2) > div > svg{margin-top: 10px;display: block;}

header > div:nth-child(2) > div > div {display: flex;align-items: flex-end;margin-left: 15px;}
header > div:nth-child(2) > div > div > svg{ float: left; }
header > div:nth-child(2) > div > div a{display: block;color: #005cb9;font-size: 13px;text-align: left;padding: 5px 6px;margin-bottom: 0px;}
header > div:nth-child(2) > div > div a:hover{background-color: #eeeeee;}

header.sticked{position: relative;top: 0;left: 0;width: 100%;z-index: 9999;}


/* ===============
 * 
 * WRAPPER
 * 
 * ===============
 */
 #wrapper{width: 100%;height: 100%;background-image: url("../img/wrapperbg.jpg");background-repeat: repeat;background-position: center center;display: flex;flex-wrap: wrap;flex-direction: column;min-height: 85vh;}
 #wrapper > div:not(#footer-bar, #ccore-admin-bar){ width: 100%; height: 100%;padding-left: 30px;padding-right: 30px;padding-top: 45px;}
 #wrapper.with_footer_bar > div:not(#footer-bar){ height: calc(100% - 125px); }
 #wrapper.full{
}
 #wrapper.full > div:not(#footer-bar){ padding-top: 0; }
 #wrapper.centered_content > div:not(#footer-bar){ padding-top: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
 body.landing #wrapper > div:not(#footer-bar, #ccore-admin-bar){height: calc(100vh - 255px);min-height: 450px;margin-top: 20px;}

 #wrapper p,
 #wrapper ul,
 #wrapper ul li{ color: white; }

 .page-members\/login\/system2  #wrapper {min-height: 100vh;}
 .page-members\/login\/system1  #wrapper {min-height: 100vh;}


 /* ===============
 * 
 * FOOTER BAR
 * 
 * ===============
 */
 #footer-bar{width: 100%;padding: 15px 30px;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;height: 125px;}
.footer-copyright { align-self: baseline; padding-left: 20px;}

  /* ===============
 * 
 * NAVIGATION
 * 
 * ===============
 */
 a.shownav{  }
 a.shownav svg{  }
 a.shownav svg g line{ transition: transform .4s linear; }
 a.shownav svg g line:nth-child(1){ transform: rotate(0); }
 a.shownav svg g line:nth-child(2){ display: block; }
 a.shownav svg g line:nth-child(3){ transform: rotate(0); }
 a.shownav.active svg g line:nth-child(1){ transform: rotate(45deg); }
 a.shownav.active svg g line:nth-child(2){ display: none; }
 a.shownav.active svg g line:nth-child(3){transform: rotate(-45deg) translateX(-18px);}

 #navigation{position: absolute;top: 0;left: 0;width: 100%;min-height: 100%;background-color: white;z-index: 9999;padding-top: 125px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;transform: translateY(-100%);transition: transform .4s linear;}
 #navigation > ul{ }
 #navigation > ul li{margin: 2.5% 0;}
 #navigation > ul li ul{ display: none; }
 #navigation > ul > li > a{color: #8497a2;font-size: 46px;font-weight: 700;text-align: center;display: block;line-height: 1;}
 #navigation.active{ transform: translateX(0); }
.deck-count{ position: absolute; top: 17px; left: 16px;}

 /* ===============
 * 
 * CONTENT HOMEPAGE
 * 
 * ===============
 */
 #content_homepage{display: flex;justify-content: center;max-width: 930px;}
 #content_homepage > a{margin: 0 20px;text-align: center;}
 #content_homepage > a svg{height: 35vh;max-height: 450px;width: auto;min-height: 280px;}
 #content_homepage > a h2{color: white;font-size: 22px;line-height: 1.2;margin: 30px 0 3px 0;}
 #content_homepage > a p{margin: 0;}
 #content_homepage > a:nth-child(1){ }
 #content_homepage > a:nth-child(2){ }
.landing h1 {width: 100%;text-align: center;/* font-size: 54px; */margin: 0 auto;color: white;}

/* ===============
 * 
 * CONTENT DEFAULT TEMPLATE
 * 
 * ===============
 */
.container #content h1{color: #8497a2;letter-spacing: -5px;font-size: 90px;line-height: 96px;margin-bottom: 40px;}
.container #content h2{color: #8497a2;letter-spacing: -5px;}
.container #content h3{color: #8497a2;letter-spacing: -5px;}
.container #content h4{color: #8497a2;letter-spacing: -5px;}
.container #content h5{color: #8497a2;letter-spacing: -5px;}
.container #content p,
.container #content ul li{color: #8497a2;margin: 10px 0 20px 0;font-size: 16px;}
.container #content ul{ list-style-type: initial; margin-left: 20px; }
.container #content ul li{ margin-top: 5px; margin-bottom: 5px; }

.container #content p strong{ color: #8497a2; }








/**
 * 	CUSTOM REVEAL BOXES
 */
.reveal{ font-size: 14px; color: #425363; }
.reveal h1{font-size: 28px;border-bottom: 1px solid #425363;margin-bottom: 20px;padding-bottom: 10px;}
.reveal h2{margin-top: 10px;margin-bottom: 15px;font-size: 16px;font-weight: bold;color: inherit;}
.reveal p{margin-bottom: 15px;font-size: 14px;color: inherit;}
.reveal input{ box-shadow: none; }
.reveal input[type='submit']{padding: 5px 30px;border: none;background-color: #00af9a;cursor: pointer;color: white;}


/* ===============
 * 
 * TEMPLATE LOGIN
 * 
 * ===============
 */
section#tpl-login{/* background-color: #005cb8; */height: 100%;min-height: 90vh;/* background-image: url('../img/login-backdrop.svg'); *//* background-position: bottom center; *//* background-size: 100% auto; *//* background-repeat: no-repeat; */display: flex;align-items: center;justify-content: center;position: relative;z-index: 999;}
section#tpl-login .close-tpl-login{position: absolute;top: 30px;right: 30px;cursor: pointer;}
section#tpl-login > div{ width: 410px; }
section#tpl-login h1{font-size: 103px;color: white;margin: 0 0 5px 0;letter-spacing: -12px;}
section#tpl-login p{font-size: 16px;font-weight: normal;color: white;margin-bottom: 20px;}
section#tpl-login a{font-size: 16px;font-weight: normal;color: white;line-height: 24px; text-decoration: underline;}
section#tpl-login form{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;margin: 25px 0 20px 0;width: 100%;flex-wrap: wrap;width: 350px;}
section#tpl-login form input{background: #fff; width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 30px;border-radius: 10px;padding: 5px 15px;margin-bottom: 8px;}
section#tpl-login form input[type="submit"]{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;width: 33px;height: 33px;border-radius: 33px;padding: 0;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 15px;line-height: 1;}
section#tpl-login form .is-invalid-input:not(:focus){ border: 1px solid #DB0078; }

section#tpl-login a.recover{margin-left: 15px;text-decoration: none;margin-top: 17px;}
section#tpl-login a.register{background-color: #6A418F;text-decoration: none;padding: 12px 22px 12px 22px;display: inline-block;border-radius: 20px;line-height: 1;}
section#tpl-login a.guest{background-color: #006EC1;text-decoration: none;padding: 10px 22px 15px 22px;display: inline-block;border-radius: 20px;line-height: 1;margin-left: 15px;}


/* ===============
 * 
 * TEMPLATE CARDS
 * 
 * ===============
 */
section#tpl-cards{/* background-color: #005cb8; *//* height: 100%; *//* min-height: 800px; *//* padding: 70px; *//* padding-top: 200px; */}
section#tpl-cards h1{font-size: 48px;color: white;margin: 0 0 25px 0;font-weight: 400;}

.ecards-grid{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;justify-content: center;flex-wrap: wrap;margin-left: auto;margin-right: auto;margin-bottom: 30px;} 
.ecard{cursor: pointer;margin: 0;width: 25%;margin-bottom: 20px;margin-top: 20px;}
.ecard svg{width: initial;height: 80px;}
.ecard h2{margin: 10px 0 0 0;padding: 0;color: white;font-size: 23px;}

.ecard-row {display: flex;width: 86%;align-items: center;border-bottom: 2px solid #415364;padding-top: 22px;position: relative;}
.ecard-row:first-child {padding-top: 0px;}
.ecard-row > div:first-child {width: 20%;}
.ecard-row > .ecard {width: 19%;cursor: initial;}
.ecard-row .category-scroll > .ecard {cursor: initial;}
.ecard-row .category-scroll > a.ecard {cursor: pointer;}
.ecard-row > a.ecard {cursor: pointer;}
.ecard-row > .ecard > div {transform: scale(0.8);}
.ecard-row h2{font-size: 26px;color: #415364 !important;}
.ecard-row h3{font-size: 16px;color: white;line-height: 24px;}
.request-ecard { display: flex; justify-content: center;}
.ecard-more-categories {font-size: 18px;margin-left: 15px;margin-bottom: 20px;color: #415364 !important;font-weight: bold;}
.category-scroll {display: flex;overflow: scroll;flex: 1;}
.category-scroll > *:nth-child(1) {order: 7;}
.category-scroll > *:nth-child(2) {order: 6;}
.category-scroll > *:nth-child(3) {order: 5;}
.category-scroll > *:nth-child(4) {order: 4;}
.category-scroll > *:nth-child(5) {order: 3;}
.category-scroll > *:nth-child(6) {order: 2;}
.category-scroll > *:nth-child(7) {order: 1;}
.category-scroll a {min-width: 22%;}
.category-scroll > div {min-width: 23%;}
.category-scroll h3{margin-top: 10px;}
.category-scroll .right-arrow {
    position: absolute;
    right: -26px;
    top: 0px;
    bottom: 0;
    display: flex;
    cursor: pointer;
}
.category-scroll .right-arrow svg {
    max-width: 20px;
    height: auto;
}
.category-scroll .left-arrow  {
    position: absolute;
    left: 187px;
    top: 0px;
    bottom: 0;
    margin: auto;
    display: flex;
    cursor: pointer;
}
.category-scroll .left-arrow svg {
    max-width: 20px;
    height: auto;
}


/* ===============
 * 
 * TEMPLATE STEP 1
 * 
 * ===============
 */
section#tpl-step1{/* background-color: #005cb8; *//* height: 100%; *//* min-height: 800px; *//* padding: 70px; *//* padding-top: 200px; */}
section#tpl-step1 h1{font-size: 42px;color: white;margin: 0 0 30px 0;font-weight: 400;}
section#tpl-step1 *:not(input){color: white;font-weight: normal;}
section#tpl-step1 .autosearch{background-color: #C5EDE9;height: 70px;width: calc(35%);margin: 0 auto;display: flex;align-items: center;justify-content: center;font-size: 39px;font-weight: 300;line-height: 0;overflow: hidden;margin-bottom: 30px;border-radius: 50px;transition: border-radius .5s ease-in-out, opacity .5s ease-in-out;opacity: 0.6;border: none;}
section#tpl-step1 .autosearch:focus{ border-radius: 0; opacity: 1; }
section#tpl-step1 .users{ width: calc(35%); margin: 0 auto; display: block; }
section#tpl-step1 .users li{margin: 10px 0; display: none;}
section#tpl-step1 .users li a{color: white;font-size: 18px;padding: 10px 0;display: block;font-weight: 300;text-align: left; animation-name: usershow;animation-duration: .4s;animation-iteration-count: 1;animation-fill-mode: forwards;}
section#tpl-step1 .users li a:after{content: url('/themes/default/assets/img/list-arrow.png');display: block;float: right;position: relative;top: -5px;}
section#tpl-step1 .users li a:hover{ color: #C5EDE9; }
section#tpl-step1 .users li:hover a:after{ right: -10px; -webkit-transition: 0.4s right ease-in-out; -ms-transition: 0.4s right ease-in-out; -o-transition: 0.4s right ease-in-out; -moz-transition: 0.4s right ease-in-out; transition: 0.4s right ease-in-out; animation-fill-mode: forwards; }

section#tpl-step1 #invite-member{margin-top: 0;display: block;}
section#tpl-step1 #invite-member form{margin: 0 auto;width: 80%;min-width: 300px;display: flex;align-items: center;justify-content: center;margin-top: 1rem;}
section#tpl-step1 #invite-member form input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 30px;border-radius: 10px;padding: 5px 15px;margin-bottom: 0;margin-right: 10px;flex: 1;}
section#tpl-step1 #invite-member form input[type="submit"]{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;width: 33px;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 0;line-height: 1;margin-bottom: 0;padding: 10px;width: 33px;margin-left: auto;margin-right: auto;flex: none;}
section#tpl-step1 #invite-member .switch-to-multiple{margin-right: 0;cursor: pointer;color: white;width: 33px;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 0;line-height: 1;margin-bottom: 0;padding: 10px;width: 180px;margin-left: auto;margin-right: auto;font-size: 12px;margin-left: 10px;}

section#tpl-step1 #invite-members{margin-top: 0;display: none;}
section#tpl-step1 #invite-members form{ margin: 0 auto; width: 50%; min-width: 300px; display: flex;align-items: center;justify-content: center;margin-top: 1rem;}
section#tpl-step1 #invite-members form input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 30px;border-radius: 10px;padding: 5px 15px;margin-bottom: 0;margin-right: 10px;}
section#tpl-step1 #invite-members form input[type="submit"]{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;width: 33px;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 0;line-height: 1;margin-bottom: 0;padding: 10px;width: 50px;margin-left: auto;margin-right: auto;}

.email-error {margin: 10px; color: #c30000 !important; font-size: 18px}

@keyframes usershow {	
	from { margin-left: -50px; visibility: 0; }
	to { margin-left: 0; visibility: 1; }
}

button.add-recipient {
    background-color: #415364;
    text-decoration: none;
    padding: 12px 32px 12px 32px;
    display: inline-block;
    border-radius: 12px;
    line-height: 1;
    color: white;
    margin: 0 0 30px 0;
    cursor: pointer;
    }

/* ===============
 * 
 * TEMPLATE STEP 2
 * 
 * ===============
 */
section#tpl-step2{/* height: 100%; *//* min-height: 800px; *//* padding: 70px; *//* padding-top: 200px; */}
section#tpl-step2 h1{font-size: 42px;color: white;margin: 10px 0 35px 0px;font-weight: 400;line-height: 45px;}
section#tpl-step2 > div.row:first-of-type{/* display: flex; *//* align-items: center; *//* margin-bottom: 5%; */}


/* ===============
 * 
 * TEMPLATE CUSTOMISE
 * 
 * ===============
 */
section#tpl-customise{/* min-height: 100%; *//* padding: 70px; *//* padding-top: 100px; */}
section#tpl-customise h1{font-size: 42px;color: white;margin: 0 0 30px 0;font-weight: 400;}
section#tpl-customise h3{font-size: 22px;margin: 0 0 10px 0;color: white;font-weight: 400;}
section#tpl-customise > div.row:first-of-type{/* display: flex; *//* align-items: center; *//* margin-bottom: 3%; */}
section#tpl-customise p.heading{font-size: 18px;font-weight: 400;margin-bottom: 10px;}
section#tpl-customise textarea,
section#tpl-customise input[type="text"],
section#tpl-customise input[type="email"],
section#tpl-customise input[type="color"]{border: none;background: white;box-shadow: none;color: #8497a2;font-size: 14px;font-family: "Fira Sans", Arial;border-radius: 10px;}
section#tpl-customise textarea{ height: 100px; }
section#tpl-customise textarea::placeholder{ color: #8497a2 }
section#tpl-customise .when_to_send{margin-bottom: 20px;}
section#tpl-customise .when_to_send label{ color: white; display: flex; align-items: center; }
section#tpl-customise .when_to_send label input{ margin: 0 0 0 10px; }

section#tpl-customise .ng-invalid-maxlength{background-color: red;color: white;}
section#tpl-customise #dynframe{transform: scale(0);overflow: auto;overflow-x: hidden;height: 835px;animation-name: dynframeshow;animation-duration: 1s;animation-delay: .3s;animation-iteration-count: 1;animation-fill-mode: forwards;border-radius: 20px;width: 600px;}
	section#tpl-customise #dynframe::-webkit-scrollbar {/* width: .5em; */}
	section#tpl-customise #dynframe::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
 	section#tpl-customise #dynframe::-webkit-scrollbar-thumb {/* background-color: #ffffff; *//* outline: 1px solid #a0a0a0; */}
section#tpl-customise #dynframe table{ border-collapse: initial; padding: 15px; }
section#tpl-customise .button{margin-top: 25px;font-size: 14px;font-weight: normal;}
section#tpl-customise .button.cancel{background-color: #415364;text-decoration: none;padding: 12px 32px 12px 32px;display: inline-block;border-radius: 12px;line-height: 1;}
section#tpl-customise .button.send{ background-color: #eb3397; text-decoration: none; padding: 12px 32px 12px 32px; display: inline-block; border-radius: 12px; line-height: 1; }
section#tpl-customise .card-customisation {padding-left: 25px;}
section#tpl-customise .card-preview {padding-left: 0px;}

#cardsbar{ margin-top: 40px; }
#cardsbar h3{ color: white; font-weight: 400; font-size: 22px; }
#cardsbar .cards-inline{display: flex;width: 100%;margin-top: 15px;flex-wrap: wrap;justify-content: center;gap: 2rem;}
#cardsbar .cards-inline a{/* flex: 1; */text-align: center;filter: grayscale(1);flex-basis: 10%;margin: 0;}
#cardsbar .cards-inline a:hover,
#cardsbar .cards-inline a.active{ filter: initial; }
#cardsbar .cards-inline a svg{width: initial;height: 35px;}
#cardsbar .cards-inline a h2{font-size: 15px;font-weight: 300;}

@keyframes dynframeshow {	
	from { transform: scale(0); }
	to { transform: scale(1); }
}


/**
 * 	VERSIONS SLIDER
 */
#versions{width: 100%;height: 344px;overflow: hidden;position: relative;padding: 0 5%;}
#versions.reduced{height: 155px;}
#versions.fullwidth{ padding: 0; }
#versions .next-version,
#versions .prev-version{position: absolute;z-index: 1000;top: 35%;max-width: 5%;}
#versions .next-version{right: 0;}
#versions .prev-version{left: 0;}
#versions .version{display: none;position: relative;width: calc(100% / 4 - 2%);height: 100%;float: left;text-align: center;background: none;margin: 0 1%;transition: border .5s ease-in-out;animation-name: niceslide;animation-duration: 1s;animation-iteration-count: 1;animation-fill-mode: forwards;background-repeat: no-repeat;background-position: center center;background-size: cover;border-radius: 15px;background-position: center top;filter: grayscale(100%);}
#versions.cloured .version{ filter: initial; }
#versions.fullwidth .version{  }
#versions .version:nth-child(1),
#versions .version:nth-child(2),
#versions .version:nth-child(3),
#versions .version:nth-child(4){ display: block; }
#versions .version.active,
#versions .version:hover{border: 10px solid #eee;filter: initial;}
@keyframes niceslide {	
	from { bottom: -100%; opacity: 0; }
	to { bottom: 0px; opacity: 1; }
}


/**
 * 	PROFILE PAGE
 */
section#profile{ display: flex; flex-wrap: wrap; }
section#profile > div {flex: 1;margin: 0 20px;}

section#profile form{width: 50%;}
section#profile h2{/* margin-top: 10px; */margin-bottom: 15px;font-size: 32px;font-weight: bold;color: #e9edf0;display: flex;align-items: flex-end;margin-bottom: 30px;}
section#profile h2 svg{ margin: 0 10px;}
section#profile p{margin-bottom: 15px; font-size: 14px; color: white;}
section#profile label{ color: #ffffff; font-size: 13px; margin: 0 0 10px 0; }
section#profile input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 33px;border-radius: 10px;padding: 5px 15px;margin-bottom: 0;margin-right: 10px;}
section#profile input[type='submit']{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 10px;line-height: 1;margin-bottom: 0;padding: 10px;width: 150px;}
section#profile .button{padding: 5px 30px;background-color: #206d58;cursor: pointer;color: white;margin: 0 0 3px 0;height: 30px;}
.profile_toggle{position: fixed;top: 205px;left: 0;cursor: pointer;z-index: 99999;}
.profile_toggle svg{width: 80px;height: auto;}

section#profile .mycards-list{max-height: 100vh;overflow: scroll;}
section#profile .mycards-list li{border-bottom: 1px solid white;display: flex;align-items: center;margin-bottom: 15px;padding-bottom: 15px;}
section#profile .mycards-list li > div:nth-child(1){ margin-right: 10px; }
section#profile .mycards-list li > div:nth-child(1) img{max-width: 30px;}

section#profile .mydecks-list{ counter-reset: item; }
section#profile .mydecks-list li{border-bottom: 1px solid white;display: flex;align-items: center;margin-bottom: 15px;padding-bottom: 15px;}
section#profile .mydecks-list li a{ color: inherit; }
section#profile .mydecks-list li:before{display: inline-block;content: counter(item);counter-increment: item;width: 2em;counter-increment: item;width: 40px;height: 40px;border-radius: 40px;display: flex;align-items: center;justify-content: center;color: white;margin-right: 10px;border: 2px solid white;font-size: 20px;}



/**
 * 	SYSTEM 2
 */
 section#tpl-welcome{ height: 100%; display: flex; align-items: center;}
 section#tpl-welcome > div{display: flex;}
 section#tpl-welcome > div h2{ font-size: 22px; line-height: 1.2; font-weight: bold; color: white; margin: 0; }
 section#tpl-welcome > div p{font-size: 16px;font-weight: 500;margin-bottom: 15px;line-height: 1.4;}
 section#tpl-welcome > div li{font-size: 16px;}
 section#tpl-welcome > div > div:nth-child(1){flex: 1;}
 section#tpl-welcome > div > div:nth-child(2){text-align: center;padding-left: 50px;padding-right: 50px;}
 section#tpl-welcome > div > div:nth-child(2) img{max-width: 100%;width: 40vw;min-width: 390px;padding-top: calc(150px - 10vw);}
 section#tpl-welcome > div > div:nth-child(2) a{ color: white; font-weight: bold; }
 section#tpl-welcome > div > div:nth-child(2) a svg{ display: block; margin: 0 auto; margin-bottom: 10px;  }
 section#tpl-welcome > div > div:nth-child(3){flex: 1;}


 section#tpl-decks h1{font-size: 42px;color: white;margin: 0 0 30px 0;font-weight: 400;}
 section#tpl-decks #decks{ }
 section#tpl-decks #decks a.deck{border: 4px solid white;width: 150px;height: 200px;display: inline-flex;align-items: center;justify-content: center;border-radius: 10px;margin-left: 7px;margin-right: 7px;margin-bottom: 15px;}
 section#tpl-decks #decks a.deck.pink{ background-color: #e6007e; }
 section#tpl-decks #decks a.deck.purple{ background-color: #592c82; }
 section#tpl-decks #decks a.deck.orange{ background-color: #f18a00; }
 section#tpl-decks #decks a.deck.liblue{ background-color: #3cb4e5; }
 section#tpl-decks #decks a.deck.cyan{ background-color: #009f98; }
 section#tpl-decks #decks a.deck.blue{ background-color: #5685c4; }

 section#tpl-decks form{margin-top: 50px;display: flex;align-items: center;justify-content: center;}
 section#tpl-decks h2{font-size: 27px;line-height: 1;margin-bottom: 0;}
 section#tpl-decks form input[type="text"]{width: 200px;margin-left: 15px;margin-right: 15px;background: none;border: none;box-shadow: none;border-bottom: 1px solid white;margin-bottom: 0;color: white;}
 section#tpl-decks form input[type="submit"]{background-color: white;cursor: pointer;color: #8497a2;width: 43px;height: 43px;border-radius: 33px;padding: 0;display: flex;align-items: center;justify-content: center;font-weight: 500;margin-top: 0;line-height: 1;border: none;}

 section#tpl-wellcards{position: relative;}
 section#tpl-wellcards h1{font-size: 42px;color: white;margin: 0 0 30px 0;font-weight: 400;}
 section#tpl-wellcards .wellcards-viewport{width: calc(214px * 5);overflow-y: hidden;overflow-x: scroll;}
 section#tpl-wellcards .wellcards-grid{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;justify-content: center;margin-left: auto;margin-right: auto;height: 277px;align-items: center;overflow: scroll;transition: all .2s linear;}
 section#tpl-wellcards .wellcards-grid.open{height: 480px;}
 section#tpl-wellcards .wellcards-grid .wellcard{margin: 0;margin-left: 7px;margin-right: 7px;position: relative;width: 200px;height: 277px; transition: all .2s linear;}
 section#tpl-wellcards .wellcards-grid .wellcard > .front{position: absolute;z-index: 999;width: 100%;transition: all .2s linear;}
 section#tpl-wellcards .wellcards-grid .wellcard > .front:after{content: "";background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='22.32px' height='22.27px' viewBox='0 0 22.32 22.27' style='overflow:visible;enable-background:new 0 0 22.32 22.27;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0-81775100%7Bfill:%23FFFFFF;%7D %3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cg id='x68Coz.tif_1_'%3E%3Cg%3E%3Cpath class='st0-81775100' d='M16.34,17.86c-4.83,3.77-11.13,2.31-14.18-1.63c-3.18-4.11-2.81-9.8,0.91-13.42 c3.62-3.52,9.42-3.75,13.33-0.58c3.99,3.25,5.14,9.43,1.52,14.06c0.75,0.75,1.5,1.49,2.26,2.24c0.59,0.59,1.18,1.18,1.77,1.77 c0.49,0.49,0.51,1.2,0.05,1.65c-0.46,0.45-1.15,0.42-1.63-0.06c-1.27-1.27-2.54-2.53-3.81-3.8 C16.47,18.02,16.41,17.94,16.34,17.86z M2.25,10.01c-0.01,4.29,3.49,7.79,7.77,7.8c4.31,0.01,7.82-3.48,7.83-7.78 c0.01-4.28-3.48-7.79-7.77-7.8C5.75,2.22,2.26,5.69,2.25,10.01z'/%3E%3Cpath class='st0-81775100' d='M8.92,8.88c0-0.39,0-0.75,0-1.11c0-0.72,0-1.44,0-2.17c0-0.66,0.49-1.15,1.12-1.15 c0.65,0,1.12,0.48,1.12,1.15c0,0.99,0,1.98,0,2.97c0,0.09,0,0.19,0,0.32c0.11,0,0.2,0,0.29,0c1.01,0,2.02,0,3.03,0 c0.6,0,1.06,0.41,1.13,0.98c0.07,0.57-0.27,1.07-0.83,1.22c-0.1,0.03-0.21,0.03-0.31,0.03c-1.01,0-2.02,0-3.03,0 c-0.09,0-0.17,0-0.28,0c0,0.23,0,0.43,0,0.64c0,0.89,0,1.77,0,2.66c0,0.66-0.48,1.16-1.11,1.16c-0.63,0-1.12-0.5-1.13-1.16 c-0.01-1,0-2,0-3c0-0.09,0-0.19,0-0.3c-0.45,0-0.88,0-1.3,0c-0.67,0-1.34,0-2.01,0c-0.64,0-1.13-0.47-1.14-1.08 C4.46,9.41,4.94,8.9,5.59,8.9c1.05-0.01,2.09,0,3.14,0C8.78,8.89,8.83,8.89,8.92,8.88z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");width: 22px;height: 22px;bottom: 22px;left: 90px;display: block;right: auto;position: absolute;}
 section#tpl-wellcards .wellcards-grid .wellcard.open > .front:after{ display: none; }
 section#tpl-wellcards .wellcards-grid .wellcard > .front > img{ border: 10px solid white; border-radius: 15px; }
 section#tpl-wellcards .wellcards-grid .wellcard > .back{position: absolute;z-index: 99;width: 100%; transition: all .2s linear;}
 section#tpl-wellcards .wellcards-grid .wellcard > .back > img{border: 10px solid white;border-radius: 15px;}

 section#tpl-wellcards .wellcards-tools{margin-top: 0;display: none;position: relative;}
 section#tpl-wellcards .wellcards-tools > .available-decks{position: absolute;background: white;left: 0;right: 0;width: 200px;z-index: 9999999;margin: 0 auto;padding: 30px 15px 15px 15px;border-radius: 15px;transform: translate(-110px,0px);display: none;bottom: 0;}
 section#tpl-wellcards .wellcards-tools > .available-decks.open{ display: block; }
 section#tpl-wellcards .wellcards-tools > .available-decks ul{list-style-type: decimal;margin-left: 10px;}
 section#tpl-wellcards .wellcards-tools > .available-decks ul li{color: #8497a2;text-align: left;}
 section#tpl-wellcards .wellcards-tools > .available-decks a{ color: inherit; margin: 3px 0; display: block; }
 section#tpl-wellcards .wellcards-tools > .available-decks a.close{position: absolute;top: 5px;right: 5px;z-index: 999;}
 section#tpl-wellcards .wellcards-tools a{margin-left: 10px;margin-right: 10px;position: relative;}

 section#tpl-wellcards .wellcards-tools .new-deck-field{border: none;box-shadow: none;padding: 0;margin: 0;height: auto;color: inherit;text-decoration: none;font-weight: 500;font-size: 13px;line-height: 1.4;}

 section#tpl-wellcards .wellcards-grid .wellcard.open{width: 435px;height: 480px;margin-left: auto;margin-right: auto;transform: translateY(-30%);position: absolute;z-index: 99999;left: 0;right: 0;}
 section#tpl-wellcards .wellcards-grid .wellcard.open > .front{ transform: translateX(-51%); }
 section#tpl-wellcards .wellcards-grid .wellcard.open > .front > img{  }
 section#tpl-wellcards .wellcards-grid .wellcard.open > .back{ transform: translateX(51%); }
 section#tpl-wellcards .wellcards-grid .wellcard.open > .back > img{  }
 .card-back-arrow {display: none;position: absolute;top: 38%;left: 0;right: 960px;margin: auto;transform: rotate(180deg);cursor: pointer;z-index: 999;}
 .card-next-arrow {display: none;position: absolute;top: 38%;left: 960px;right: 0;margin: auto;cursor: pointer;z-index: 999;}

 section#tpl-wellcards .wellcards-grid .wellcard.add_card_effect{ position: fixed;top: 10%;left:0;width: 330px;right: 0;margin: 0 auto;z-index: 999999; animation-name: anim_add_card_effect; animation-duration: .7s; animation-fill-mode: forwards; }
 @keyframes anim_add_card_effect {
    0%   { top: 10%; opacity: 1; }
    20%  { top: 3%; opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

 section#tpl-wellcards .welldecks-grid{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;justify-content: center;margin-left: auto;margin-right: auto;height: 200px;align-items: center;overflow: scroll;}
 section#tpl-wellcards .welldecks-grid .welldeck{margin: 0;margin-left: 5px;margin-right: 5px;position: relative;width: 90px;height: 125px;border: 4px solid white;border-radius: 15px;display: flex;align-items: center;justify-content: center;filter: grayscale(1);}
 section#tpl-wellcards .welldecks-grid .welldeck svg{ height: 15px; width: auto; }

 section#tpl-wellcards .welldecks-grid .welldeck.active,
 section#tpl-wellcards .welldecks-grid .welldeck:hover{ filter: grayscale(0); }


 section#tpl-mydecks{min-height: 65vh;}
 section#tpl-mydecks h1{font-size: 42px;color: white;margin: 0 0 30px 0;font-weight: 400;}
 section#tpl-mydecks .mydecks-list{display: flex;align-items: center;justify-content: center;}
 section#tpl-mydecks .mydecks-list{counter-reset: item;margin-bottom: 30px;}
 section#tpl-mydecks .mydecks-list li{margin: 0 10px;display: flex;align-items: center; opacity: 0.3;}
 section#tpl-mydecks .mydecks-list li.active,
 section#tpl-mydecks .mydecks-list li:hover{ opacity: 1; }
 section#tpl-mydecks .mydecks-list li:before{display: inline-block;content: counter(item);counter-increment: item;width: 2em;counter-increment: item;width: 25px;height: 25px;background: white;border-radius: 25px;display: flex;align-items: center;justify-content: center;color: #8497a2;margin-right: 10px;}
 section#tpl-mydecks .mydecks-list li a{color: inherit;font-size: inherit;}

 section#tpl-mydecks .wellcards-viewport{width: calc(214px * 5);overflow-y: hidden;overflow-x: scroll;margin-bottom: 30px;}
 section#tpl-mydecks .wellcards-grid{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;justify-content: center;margin-left: auto;margin-right: auto;height: 350px;align-items: center;overflow: scroll;transition: all .2s linear;}
 section#tpl-mydecks .wellcards-grid .wellcard{margin: 0;margin-left: 7px;margin-right: 7px;position: relative;width: 200px;height: 277px; transition: all .2s linear;}
 section#tpl-mydecks .wellcards-grid .wellcard > .front{position: absolute;z-index: 999;width: 100%; transition: all .2s linear;}
 section#tpl-mydecks .wellcards-grid .wellcard > .front > img{ }
 section#tpl-mydecks .wellcards-grid .wellcard > .back{position: absolute;z-index: 99;width: 100%; transition: all .2s linear;}
 section#tpl-mydecks .wellcards-grid .wellcard > .back > img{ }

 section#tpl-mydecks .wellcards-grid .wellcard-container > a{margin-top: 10px;display: inline-block;}
 section#tpl-mydecks .wellcards-grid .wellcard-container .close-container{position: absolute;top: 746px;left: 710px;right: 0;display: none;}

 section#tpl-mydecks .wellcards-tools{ margin-top: 0; }
 section#tpl-mydecks .wellcards-tools a{margin-left: 10px;margin-right: 10px;position: relative;}

 section#tpl-mydecks .wellcards-grid .wellcard.open{width: 400px;height: 442px;margin-left: auto;margin-right: auto;transform: translateY(-89%);position: absolute;z-index: 99999;left: 0;right: 0;}
 section#tpl-mydecks .wellcards-grid .wellcard.open > .front{ transform: translateX(-51%); }
 section#tpl-mydecks .wellcards-grid .wellcard.open > .front > img{  }
 section#tpl-mydecks .wellcards-grid .wellcard.open > .back{ transform: translateX(51%); }
 section#tpl-mydecks .wellcards-grid .wellcard.open > .back > img{  }

 footer{min-height: 70px;display: flex;align-items: center;justify-content: center;margin-bottom: 0px;flex-direction: column;}
 footer p{ font-size: 16px;}
 footer a{ color: #592c82;}


 /* User Messages */
 .message-page {}
 .message-page #tpl-message{ margin-bottom: 300px;}
 .message-page #tpl-message p{ font-size: 25px; max-width: 500px; text-align: center; margin: 50px auto;}
 .message-page #tpl-message p a{color: #DB0078;}
 .message-page #footer-bar{ position: absolute; bottom: 0; left: 0;}