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

/**
 * 
 * 	@author		George Iancu
 * 	@copyright	Cube Creative Ltd (c) 2017.
 * 	@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 }
body{font-family: 'Fira Sans', sans-serif, Helvetica, Arial, sans-serif !important;font-weight: 500;-webkit-font-smoothing: antialiased;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);overflow-x: hidden;}

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

p,
ul,
ul li{font-size:14px;line-height:19px;color: #435363;font-weight:500;} /* 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}


/* ===============
 * 
 * HEADER
 * 
 * ===============
 */
header{position: absolute;top: 0;left: 0;width: 100%;padding: 30px 10px;}
header .logo{ width: 207px; height: 88px; }
header .logo-ecard{ width: 225px; height: 94px; }


/**
 * 	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;}
.reveal p{margin-bottom: 15px; font-size: 14px;}
.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: 800px;background-image: url('../img/login-backdrop.svg');background-position: bottom center;background-size: 100% auto;background-repeat: no-repeat;padding: 70px;padding-top: 200px;}
section#tpl-login h1{font-size: 44px;font-weight: 400;color: white;margin: 0 0 5px 0;}
section#tpl-login p{font-size: 16px;font-weight: normal;color: white;line-height: 24px;}
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: 20px 0;width: 80%;}
section#tpl-login form input{width: 33%;margin-right: 2%;height: 25px;box-shadow: none;border: none;color: #005cb8;font-size: 13px;text-align: center;}
section#tpl-login form input[type="submit"]{margin-right: 0;background-color: #00af9a;cursor: pointer;color: white;}
section#tpl-login form .is-invalid-input:not(:focus){ border: 1px solid red; }
section#tpl-login form ::-webkit-input-placeholder {
  color: #005cb8;
}
section#tpl-login form ::-moz-placeholder {
  color: #005cb8;
}
section#tpl-login form :-ms-input-placeholder {
  color: #005cb8;
}
section#tpl-login form :-moz-placeholder {
  color: #005cb8;
}


/* ===============
 * 
 * TEMPLATE CARDS
 * 
 * ===============
 */
section#tpl-cards{background-color: #005cb8;height: 100%;min-height: 800px;padding: 70px;padding-top: 200px;}
section#tpl-cards h1{font-size: 42px;color: #00a19a;margin: 0 0 50px 0;}
section#tpl-cards > .row > .row{ -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; justify-content: center; } 
section#tpl-cards .ecard{cursor: pointer;margin: 0 20px;}
section#tpl-cards .ecard h2{margin: 10px 0 0 0;padding: 0;color: white;font-size: 26px;}


/* ===============
 * 
 * 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 50px 0;}
section#tpl-step1 *:not(input){color: white;}
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: 50px;display: block !important;}
section#tpl-step1 #invite-member form{margin: 20px auto;width: 50%;min-width: 300px;}
section#tpl-step1 #invite-member form input{box-shadow: none;border: none;}
section#tpl-step1 #invite-member form input[type="submit"]{ padding: 5px 30px;border: none;background-color: #00af9a;cursor: pointer;color: white; }

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


/* ===============
 * 
 * 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: 0;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;line-height: 45px;}
section#tpl-customise h3{font-size: 22px;margin: 0 0 10px 0;}
section#tpl-customise > div.row:first-of-type{display: flex;align-items: center;margin-bottom: 3%;}
section#tpl-customise .heading{font-size: 15px;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: #005CB9;font-size: 14px;font-family: "Fira Sans", Arial; }
section#tpl-customise textarea{ height: 100px; }
section#tpl-customise .ng-invalid-maxlength{background-color: red;color: white;}
section#tpl-customise #dynframe{transform: scale(0);overflow: auto;overflow-x: hidden;height: 685px;animation-name: dynframeshow;animation-duration: 1s;animation-delay: .3s;animation-iteration-count: 1;animation-fill-mode: forwards;}
	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: 79px;font-size: 14px;font-weight: normal;}
section#tpl-customise .button.cancel{ background-color: #415364; }
section#tpl-customise .button.send{  }

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


/**
 * 	VERSIONS SLIDER
 */
#versions{width: 100%;height: 300px;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;}
#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; }
@keyframes niceslide {	
	from { bottom: -100%; opacity: 0; }
	to { bottom: 0px; opacity: 1; }
}



/**
 * 	UPDATE SEIDEBAR
 */
section#profile{position: fixed;top: 0;left: -100%;width: 480px;background: #333333;padding: 30px;height: 100%;display: flex;align-items: center;border-right: 2px solid white;font-size: 14px;color: white;z-index: 9999999;}
section#profile form{width: 100%;}
section#profile h1{font-size: 28px;border-bottom: 1px solid #425363;margin-bottom: 20px;padding-bottom: 10px; color: white;}
section#profile h2{margin-top: 10px;margin-bottom: 15px;font-size: 16px;font-weight: bold; color: white;}
section#profile p{margin-bottom: 15px; font-size: 14px; color: white;}
section#profile input{box-shadow: none;margin: 3px 0;}
section#profile input[type='submit']{padding: 5px 30px;border: none;background-color: #00af9a;cursor: pointer;color: white;margin: 0;height: 30px;}
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;}