/* vietnamese */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v12/SrnYXNrTwEoJaJ2__qJvZIDGDUGfDkXyfkzVDelzfFk.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v12/sy_KBtYyuEWt-sd7KQuPfoDGDUGfDkXyfkzVDelzfFk.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Cabin';
  font-style: normal;
  font-weight: 400;
  src: local('Cabin'), local('Cabin-Regular'), url(https://fonts.gstatic.com/s/cabin/v12/4VMQLG5UaE3m5rr_emmAqaCWcynf_cDxXwCLxiixG1c.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTYjoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(https://fonts.gstatic.com/s/opensans/v15/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/u-WUoqrET9fUeobQW7jkRYX0hVgzZQUfRDuZrPvH3D8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNSojoYw3YTyktCCer_ilOlhE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v15/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

html,body{
	width:100%;
	height:100%;
	margin:0;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	font-weight:300;
	box-sizing:border-box;
	font-weight:400;
	overflow-x:hidden;
	background-color:#FAF8FB;
}
textarea, input{
	/*border:1px solid #CDCDCD;*/
	font-family: inherit;
   	font-size: inherit;
	outline:none;
	background-color:inherit;
}
textarea.outlined:focus, input.outlined:focus{

	border:1px solid #9056C5;
}

div{margin:0;padding:0;box-sizing:border-box;}

h1{
    font-family: 'Cabin', sans-serif;
    font-weight:600;
    font-size:37px;
    margin:0;
    position:relative;
    color:var(--dark-text);
    word-wrap:normal;
}





/* Shared */
body {
	--main-purple: #997CB1;
	--main-purple-light:#AE8DC9;
	--main-purple-hover:#9779B0;
	--dark-text: #895FAC;
  -webkit-font-smoothing: antialiased;
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
}

/* Targets safari on iOS */
@supports (-webkit-overflow-scrolling: touch) {
  -webkit-font-smoothing: none;
}

.homepage{
    background-image: linear-gradient(to left top, #D4CCDD 0%, white 100%);
}


/* ========== PH Banner ========= */
.ph_banner{
  background:#af5a5a;
  color:white;
  display:flex;
  align-items:center;
  justify-content: center;
  flex-direction: row;
  width:100%;
  height:40px;
  font-size:13px;
  font-weight:400;
  /*animation-name:topbar_fade; */
  animation-delay:4s;
  animation-duration:2s;
  animation-timing-function: cubic-bezier(0.25,1,.25,1); 
  animation-fill-mode: forwards;
  /*opacity:0;*/
  position:relative;
  overflow:hidden;
  color:white;
  text-decoration: none;
  /*height:0;*/
}

.ph_banner a{
  /*font-size:14px;*/
  /*font-weight:400;*/
  /*vertical-align: middle;*/
  color:white;
  text-decoration: none;
  margin-left:20px;
  font-weight:600;
}

.hey{
  /*font-size:16px;*/
  /*font-weight:600;*/
  margin-right:20px;
}

.ph_banner .button{
  background-color:white;
  color:purple;
  height:30px;
  display:flex;
  align-items:center;
  justify-content: center;
  color:var(--dark-text);
  margin-left:25px;
}

.ph_banner .close{
  position: absolute;
  right:20px;
  top:0;
  height:70px;
  width:70px;
  display:flex;
  align-items:center;
  justify-content: center;
}



.section{
    width:100%;
    padding:10px 0px;
    display:flex;
    justify-content:center;
}

.section.intro{
    flex-direction:column;
    padding-top:50px;
    align-items:center;
    box-shadow: 0 3px 60px 0 rgba(0,0,0,0);
    z-index:2;
    position: relative; 
    overflow:hidden;
    animation-name:introsection_boxshadow; 
    animation-delay:4s;
    animation-duration:2s;
    animation-timing-function: cubic-bezier(0.25,1,.25,1); 
    animation-fill-mode: forwards;
}

@keyframes introsection_boxshadow {
  from {  box-shadow: 0 3px 60px 0 rgba(0,0,0,0);}
  to { box-shadow: 0 3px 60px 0 rgba(0,0,0,0.08);}
}

.homepage .section.intro{
    background-color:none;
}

.centering{
    max-width:1200px;
    width:100%;
}

.intro .centering{
    background-size: 100%;
    background-repeat: no-repeat;
    background-position:0px 50px;
    position:relative;
    /*height:600px;*/
    padding:0 50px;
}

/* ===========    Topbar    =========== */

#home_topbar{
    box-sizing:border-box;
    /*padding:0 30px;*/
    width:100%;
    margin: 0 auto;
    position:sticky;
} 

.homepage #home_topbar{
    animation-name:topbar_fade; 
    animation-delay:4s;
    animation-duration:2s;
    animation-timing-function: cubic-bezier(0.25,1,.25,1); 
    animation-fill-mode: forwards;
    opacity:0;
}

@keyframes topbar_fade {
  from {  transform: translateY(-5px); opacity:0;}
  to { transform: translateY(0px); opacity:1;}
}

#home_logo{
    float:left;
}

#topbar_links{
    float:right;
    text-align: right;
}

.topbar_link{
    margin-left:20px;
    font-weight:600;
    text-transform: uppercase;
    text-decoration: none;
    font-size:14px;
    white-space:nowrap;
    cursor:pointer;
    padding:5px 10px;
    color:var(--main-purple);
}

.topbar_link:hover{
    background-color:rgba(0,0,0,0.03);
}

.topbar_link:visited{
    background-color:rgba(0,0,0,0);
    font-size:53px;
}


/* ===========    CTA    =========== */



#cta{
	width:472px;
	text-align:left;
	margin-top:100px;
  display:inline-block;
}

#cta h1{
    transform:translateY(40px);
    animation-name:cta_slide; 
    animation-delay:3.5s;
    animation-duration:2s;
    animation-timing-function: cubic-bezier(0.25,1,.25,1); 
    animation-fill-mode: forwards;
}

@keyframes cta_slide{
	0% { transform:translateY(40px); }
	100% { transform:translateY(0px); }
}

#cta .subheader{
    font-size:16px;
    color:#796F82;
    font-weight:400;
    position: relative;
    word-wrap:normal;
    opacity:0;
    line-height:35px;
    animation-name:topbar_fade; 
    animation-delay:4s;
    animation-duration:2s;
    animation-timing-function: cubic-bezier(0.25,1,.25,1); 
    animation-fill-mode: forwards;
}

.home_signup{
    width:150px;
    font-weight: 400;
    font-family: 'Cabin', 'Open Sans', Helvetica, Arial, sans-serif;
    margin-top:30px;
    margin-bottom:50px;
    opacity:0;

    animation-name:topbar_fade; 
    animation-delay:4s;
    animation-duration:2s;
    animation-timing-function: cubic-bezier(0.25,1,.25,1); 
    animation-fill-mode: forwards;
} 


.button{
    font-size:14px;
    font-family:inherit;
    padding:15px 20px;
    display:block;
    position: relative;
    cursor:pointer;
    border-radius: 3px;
    box-shadow: 0px 4px 7px 0px rgba(0,0,0,0.17);
    -webkit-transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 300ms cubic-bezier(0.23, 1, 0.32, 1);
    text-decoration: none;
    outline:none;
    border:none;
    text-align: center;
    background-color:var(--dark-text);
    color:white;
    font-family: 'Cabin', 'OpenSans', Helvetica, Arial, sans-serif;
    font-weight:400;
}

.button:hover{
    box-shadow:0px 6px 30px 0px rgba(0,0,0,0.12);
}


/* ===========    Sample cards    =========== */



#intro{
    position:relative;
    display:flex;
    margin-bottom:100px;
}

#intro_floaty{
	perspective:200px;
  display: inline-flex;
  width: calc(100% - 455px);
  align-items: center;
  justify-content: center;
}

#intro_rotate_container{
	transform:rotateX(5deg) rotateY(-5deg);
}

#sample_card_container{
	width:500px;
	height:200px;
	display:flex;
	align-items:center;
	justify-content:center;
    align-items: center;
    background-color:rgba(255,255,255,0.5);
    border-radius:3px;
    perspective: 300px;
	box-shadow: 20px 20px 130px 0 rgba(153,124,177,0.16);
}

.sample_card{    
	height:120px;
	min-width:80px;
	width:80px;
	margin:5px;
	text-align: center;
	transform:rotateX(-30deg)
	transform-style: preserve-3d;
	transform-origin:50% 100%;
	position:relative;
	animation-timing-function: cubic-bezier(0.25,1,.25,1);
	animation-duration:3s;
	animation-delay:1s;
	animation-iteration-count:1;
	animation-direction:alternate; 
	animation-fill-mode: forwards; 
}

.sample_card:hover{
  transform:translateZ(100px);
}

.card_contents_anm{ 
    border-radius:3px;
    background-color:white;
  	box-shadow: 0 30px 90px 0 rgba(153,124,177,0.20);
    height:100%;
    width:100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.card_header_anm{
  height:10%;
  background-color:var(--main-purple);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

@-moz-document url-prefix() {
    #container_anm{
        animation-name:none;
        transform: scale(0.3) translateY(0); 
    }
    .sample_card { transform:translateX(0) translateY(0) translateZ(0) rotateX(0deg) !important; opacity:1 !important; animation-name:none !important; }
    .homepage #home_topbar, #cta .home_signup, #cta .subheader, #cta .card_icons, #cta h1{
        opacity:1 !important;
        animation-name:none !important;
    }

    #cta h1{
      transform:none;
    }
}

#card1{animation-name:card1_move; animation-delay:1s; transform: translateX(-650px) translateY(0px) translateZ(0px); opacity:0;}
#card2{animation-name:card2_move; animation-delay:1.25s; transform: translateX(-400px) translateY(-400px) translateZ(200px); opacity:0;}
#card3{animation-name:card3_move; animation-delay:1.5s; transform: translateX(0px) translateY(-400px) translateZ(200px); opacity:0;}
#card4{animation-name:card4_move; animation-delay:1.75s; transform: translateX(400px) translateY(-400px) translateZ(200px); opacity:0;}
#card5{animation-name:card5_move; animation-delay:2s; transform: translateX(650px) translateY(0px) translateZ(0px); opacity:0;}
@keyframes card1_move {
  from {  transform: translateX(-650px) translateY(00px) translateZ(00px) rotateX(-30deg); opacity:0;}
  to { transform: translateY(0px) translateY(0px) translateZ(10px) rotateX(  0deg ); opacity:1;}
}

@keyframes card2_move {
  from  { transform: translateX(-400px) translateY(-400px) translateZ(200px) rotateX(-30deg); opacity:0;}
  to {transform: translateY(0px) translateY(0px) translateZ(10px) rotateX(  0deg ); opacity:1;}
}

@keyframes card3_move {
  from { transform: translateX(0px) translateY(-400px) translateZ(200px) rotateX(-30deg); opacity:0;}
  to { transform: translateY(0px) translateY(0px) translateZ(10px) rotateX(  0deg ); opacity:1;}
}

@keyframes card4_move {
  from {  transform: translateX(400px) translateY(-400px) translateZ(200px) rotateX(-30deg); opacity:0;}
  to { transform: translateY(0px) translateY(0px) translateZ(10px) rotateX(  0deg ); opacity:1;}
}

@keyframes card5_move {
  from  { transform: translateX(650px) translateY(0px) translateZ(0px) rotateX(-30deg); opacity:0;}
  to {transform: translateY(0px) translateY(0px) translateZ(10px) rotateX(  0deg ); opacity:1;}
}

.card_graphic{
    width:100%;
    margin:0 auto;
}


.logo_overlay{
    position:absolute;
    z-index:2;
    bottom:0px;
    right:0px;
    transform:scale(0.25);
    transform-origin:100% 100%;
}

/*  ======= Lazy load ============ */


#lazyload_padding{
	height:2000px;
	width:100%;
	position:relative;
}

#homepage_lazyload{
    opacity:0;
    transition:1000ms opacity;
    transition-delay:500ms;
	height:2000px;
}

#homepage_lower{
	display:none;
	opacity:0;
}



/* ========= big picture =========== */

.section.big_picture{
	background-image: linear-gradient(to left top, #C8CBE3 0%, #FFFFFF 100%);
	height:900px;
	padding:150px 0;
}

.big_picture h1{
	color:#5F61B3;
  font-size:35px;
}

.big_picture .centering{
	display:flex;
	align-items:center;
}

.video_container_wrapper{
	flex:1 1 auto;
  padding-right:3%;
  padding-left: 20px;
}

.floating_rect_wrapper{
	width:100%;
}

.blue_floating_rect{
	/*background: #EEEEF6;*/
	box-shadow: 10px 10px 40px 0 rgba(129,130,212,0.20);
}

.blue_floating_rect.video{
	width:100%;
	/*padding-bottom:66%;*/
}

.blue_floating_rect.video video{
	width:100%;
}

.side_text{
	width:360px;
	min-width:360px;
  padding-right:20px;
}

.side_text p{
	font-size: 16px;
	color: #4A4A4A;
	line-height: 35px;
	text-shadow: 0 2px 30px rgba(255,255,255,0.5);
	margin:30px 0;
}

.side_text a{
  color:#A95050;
  text-decoration: none;
}


/* ========= Card types ====== */

.section.cards_menu {
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 0;
    text-align: center;
    padding-top:125px;
	background-image: linear-gradient(to left top, #BAD9D0 0%, #FFFFFF 100%);
}

.cards_menu h1{
	color:#129054;
}

.section.cards_menu .centering{
    margin-bottom:20px;
}


#card_descriptions_outer_container{
    margin-top:30px;
}

#card_list_container{
    margin-top: 10px;
    margin-bottom: 30px;
    margin: 0px auto;
    padding: 0 20px;
    white-space: nowrap;
    height: 100px;
    justify-content: left;
    padding-top:30px;
}

#card_list{
    position: relative;
    display:inline-block;
}

.card_list_responsive_break{
  display:none;
}

.card_list_label{
	position:absolute;
	top:-30px;
	color:#129054;
	font-size:14px;
	font-weight:600;
}

.card_list_label.embed_label{
	left:231px;
}

.cardtype_tab{
    display:inline-flex;
    margin-right:15px;
    align-items:center;
    justify-content:center;
    white-space: nowrap;
    width:43px;
    height:43px;
    background: #FFFFFF;
    border: 1px solid #C5E5D6;
    box-shadow: 0 2px 10px 0 rgba(197,229,214,0.33);
    cursor:pointer;
    transition: all 300ms;
    border-radius:100px;
}

.in_view .cardtype_tab{
    animation-name:cardtype_tab_emphasis;
    animation-duration:0.4s;
}


#text_tab{          animation-delay:1s; }
#list_tab{          animation-delay:1.1s; }
#image_tab{         animation-delay:1.2s; }
#googledocs_tab{    animation-delay:1.3s; }
#sketch_tab{        animation-delay:1.4s; }
#invision_tab{      animation-delay:1.5s; }
#figma_tab{         animation-delay:1.6s; }
#marvel_tab{        animation-delay:1.7s; }
#adobexd_tab{       animation-delay:1.8s; }
#atomic_tab{        animation-delay:1.9s; }
#airtable_tab{      animation-delay:2s; }

@keyframes cardtype_tab_emphasis {
  0% {  transform: translateY(0);}
  50% { transform:translateY(15px); }
  100% {  transform: translateY(0);}
}

.text #text_tab, 
.list #list_tab,
.image #image_tab,
.googledocs #googledocs_tab,
.sketch #sketch_tab,
.invision #invision_tab,
.marvel #marvel_tab,
.adobexd #adobexd_tab,
.figma #figma_tab,
.atomic #atomic_tab,
.airtable #airtable_tab{
    transform:translateY(5px);
    /*box-shadow: 0px 5px 20px 0 rgba(216,188,241,0.43);*/
}

.cardtype_tab .text {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat 0 -1px;
    width: 20px;
    height: 22px;
    background-size: 341px 25px;
}

.cardtype_tab .list {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -30px -3px;
    width: 21px;
    height: 20px;
    background-size: 341px 25px;
}

.cardtype_tab .image {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -60px -1px;
    width: 21px;
    height: 22px;
    background-size: 341px 25px;
}

.cardtype_tab .googledocs {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -158px -1px;
    width: 26px;
    height: 23px;
    background-size: 341px 25px;
}

.cardtype_tab .sketch {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -124px -2px;
    width: 23px;
    height: 23px;
    background-size: 341px 25px;
}

.cardtype_tab .invision {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -256px -1px;
    width: 22px;
    height: 23px;
    background-size: 341px 25px;
}

.cardtype_tab .figma {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -318px -1px;
    width: 23px;
    height: 22px;
    background-size: 341px 25px;
}

.cardtype_tab .marvel {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -90px -1px;
    width: 23px;
    height: 23px;
    background-size: 341px 25px;
}

.cardtype_tab .adobexd {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -193px 0;
    width: 23px;
    height: 23px;
    background-size: 341px 25px;
}

.cardtype_tab .atomic {
    background: url(../icons/CardIcons/coloricons-compressor.png) no-repeat -225px -2px;
    width: 22px;
    height: 21px;
    background-size: 341px 25px;
}

.cardtype_tab .airtable {
    background: url('../icons/CardIcons/coloricons-compressor.png') no-repeat -287px -2px;
    width: 23px;
    height: 19px;
    background-size: 341px 25px;
}

.cardtype_tab img{
    vertical-align: bottom;
}

#description_separator_bar{
    height:100%;
    width:1px;
    background-color:#9B9B9B;
}

#cardtype_tabpanel{
    position:relative;
    height:530px;
    width:500px;
    text-align: center;
    margin:0 auto;
}

#cardtype_wireframe_container{
    background: #FAF8FB;
    border: 1px solid #C5E5D6;
    box-shadow: 1px 1px 30px 0 rgba(246,235,255,0.37);
    box-shadow: 0 2px 10px 0 rgba(216,188,241,0.33);
    border-radius: 5px;
    height:400px;
    width:500px;
    display:flex;
    flex-direction: column;
    margin:0 auto;
    margin-top:65px;
    visibility: visible;
    opacity: 1;
}

#cardtype_wireframe_header{
    min-height:30px;
    width:100%;
    border-bottom:1px solid #C5E5D6;
    flex:0;
}

#cardtype_wireframe_contents{
    flex:1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}

#cardtype_wireframe_instructions{
    font-size: 18px;
    width:206px;
    color: #129054;
    margin-bottom:50px;
}

#cardtype_instructions_arrow{
    height:55px;
    margin-bottom:30px;
}

.card_description{
    visibility: hidden;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: 300ms all;
}

.card_description *{
    margin-top:auto;
    margin-bottom:auto;
}

.card_description h3{
    font-size:14px;
    text-transform: uppercase;
    color:#129054;
}

.card_description p{
    font-size:12px;
    color:#4A4A4A;
    text-align:center;
    margin-left: auto;
    margin-right: auto;
    margin-top:5px;
    margin-bottom:20px;
}

.card_description video{
    display:block;
    min-height:400px;
    max-height:400px;
    margin:0 auto;
    box-shadow: 1px 1px 50px 0 rgba(102,189,148,0.19);
    border-radius: 4px;
}

.text #text_card_description,
.list #list_card_description, 
.image #image_card_description,
.googledocs #googledocs_card_description,
.sketch #sketch_card_description,
.invision #invision_card_description,
.marvel #marvel_card_description,
.adobexd #adobexd_card_description,
.figma #figma_card_description,
.atomic #atomic_card_description,
.airtable #airtable_card_description{
    visibility:visible;
    opacity:1;
}


.centerline{
    width:1px;
    height:30vh;
    background-color:#CCABEA;
    margin: 30px auto;
}




/* ========= consistency =========== */

.section.consistency{
  background-image: linear-gradient(to left top, #E3C8C8 0%, #FFFFFF 100%);
  height:900px;
  padding:150px 0;
}

.consistency h1{
  color:#CA7C7C;
}

.consistency .centering{
  display:flex;
  align-items:center;
}

.floating_rect_wrapper{
  width:100%;
}

.red_floating_rect{
  background: #EEEEF6;
  box-shadow: 10px 10px 40px 0 rgba(202,124,124,0.20);
}

.red_floating_rect.video{
  width:100%;
  /*padding-bottom:66%;*/
}

.red_floating_rect.video video{
  width:100%;
}

.side_text p{
  font-size: 16px;
  color: #4A4A4A;
  line-height: 40px;
  text-shadow: 0 2px 30px rgba(255,255,255,0.5);
  margin:30px 0;
}




/*  ======  app container ======= */


.section.app_example{
	flex-direction:column;
	align-items:center;
	padding:150px 0 0 0;

}

#purple_app_frame_container{
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	width:calc(100% - 50px);
	max-width:1700px;
	margin:0;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

#purple_app_frame{
	/*height:800px;*/
	width:100%;
	margin:50px auto 0 auto;
	padding-top:55%;
	border-radius:20px;
	position:relative;
	background-color:rgb(0,0,0);
	border:2px solid #D4D4D4;
	box-shadow: 5px 5px 50px 0px rgba(0,0,0,0.33);
	z-index:1;
}

#purple_app_container{
	top:30px;
	bottom:30px;
	right:30px;
	left:30px;
	display:block;
	position:absolute;
	display:flex;
	flex-direction: column;
}


.home_signup.edit_this{
    margin-top:75px;
}



/* ========= Tweets ========= */

#tweets_container{
    display:flex;
    /*margin:0 20px;*/
    margin:20px auto 40px auto;
    height:435px;
    overflow:hidden;
}

.tweet_column{
	/*max-width:calc(50vw - 40px);*/
	max-width:500px;
	min-width:300px;
	width:50%;
	text-align:center;
}

.tweet_column:first-child{
    margin-right:20px;
}

.tweet{
	margin-bottom:20px;
	width:100%
}

/* ========= Lower CTA ========= */


.section.lower_cta{
    padding:20px 0 30px 0;
    background-color:white;
    color:#FAFAFA;
    overflow:hidden;
    height:193px;
    font-family: 'Cabin', 'Open Sans', sans-serif;
    background-image:url("../images/footer-compressor.png");
    background-size: cover;
    background-position: center
}

.lower_cta.homepage{
    padding:120px 0 120px 0;
    background-color:#3C234F;
    height:auto;
    background-image:url("../images/stars-min.png");
    position:relative;
}

.section.lower_cta .centering{

    padding-top:30px;
}

.lower_cta .section_text{
    text-align: center;
    max-width:none;
}

.lower_cta h2{
    font-weight:400;
}

.lower_cta.homepage p{
    font-weight:400;
}

.lower_cta p{
    color:#F6F6F6;
    font-weight:400;
    margin-top:0px;
    margin-bottom:50px;
    font-size:26px;
    color:rgba(255,255,255,0.8);
}

.button.white{
    background-color:#FAFAFA;
    color:var(--dark-text);
}

.lower_cta .dance{
    max-width:530px;
    max-height:218px;
    display:block;
    margin:120px auto 50px auto;
}


.lower_cta .bottom_gradient{
    height:200px;
    width:100%;
    left:0;
    bottom:0;
    position:absolute;
    display:block;
    background-image: linear-gradient(-180deg, rgba(60,35,79,0) 0%, rgba(60,35,79,1) 100%);
    z-index:1;
}



/* ========= Footer ========= */

.section.footer{
    width:100%;
    height:800px;
    text-align: center;
    perspective:300px;
    display:flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
}

.section.footer p{
	margin-top:30px;
	text-shadow: 0 2px 60px white;
}


.bg_card_container{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
	justify-content: center;
	transform:rotateX(10deg);
	position:absolute;
	left:0;
	top:0;
	z-index:-1;
	margin-top:-30px;
}

.bg_wide_card_container{
	min-width:205%;
	position:relative;
  	-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 40%,rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%);
	opacity:0.25;
	display:flex;
	flex-direction:column;
	transform:scale(0.8);
}

.bg_row{
	width:100%;
	text-align: center;
	display:block;
}

.bg_card{
	width:120px;
	height:180px;
	margin:10px;
	background-color:white;
	display:inline-block;
	opacity: 0;
	animation-name:bg-card-animation;
	animation-duration:5s;
	animation-iteration-count: infinite;
	box-shadow: 0 30px 30px 0 rgba(153,124,177,0.27);
	border-radius:3px;
	will-change: opacity;
}

.bg_card_hidden{
	opacity: 0;
	width:120px;
	height:180px;
	margin:10px;
	display:inline-block;
}

@keyframes bg-card-animation {
  0% { opacity: 0;} 
  10% { opacity: 0;} 
  20% { opacity: 1;}
  100% { opacity: 0;} 
}


/* ========= Footer details ========== */

.footer_details{
  display:flex;
  flex-direction: column;
  margin-bottom:100px;
}

.homepage #email{
    margin:0 0 100px 0;
    color:var(--dark-text);
}

.footer_details a{
    color:var(--dark-text);
    text-decoration: none;
}

#email{
    font-weight:400;
    font-size:14px;
    margin:70px 0 100px 0;
    text-align: center;
}

#legal:hover {
    opacity: 1;
    height: auto;
}

#legal {
    transition: 500ms all;
    height: 25px;
    overflow: hidden;
    opacity: 0.5;
    width: 750px;
    margin: 0 auto;
}

#legal p {
    display: block;
    font-weight: 300;
    text-align: left;
    font-size: 12px;
    color: #FAFAFA;
}

.legalnew{
    font-size:12px;
    font-weight:400;
    text-align: center;
}

.legal_text ul{
	font-size:13px;
}

.legal_text h1{
	font-size:18px;
	font-weight:600;
	margin-top:5px;
}

.legal_text h2{
	font-size:14px;
	font-weight:600;
	text-align:left;
}

.legal_text p{
	margin-top:0px;
	margin-bottom:5px;
	font-size:13px;
}










































/* Extra */


.homepage h2{
    font-size: 20px;
    font-weight: 400;
    color: #6728A0;
    font-family: 'Cabin', 'Open Sans', sans-serif;
    text-align: center;
}


.about_intro .topbar_link{
    color:var(--main-purple);
}






.card_icons{
    background-color:rgba(0,0,0,0.1);
    background-blend-mode: multiply;
    border-radius:50px;
    opacity:0;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin-bottom:15px auto;
    margin-top:-240px;

    animation-name:topbar_fade; 
    animation-delay:4s;
    animation-duration:2s;
    animation-timing-function: cubic-bezier(0.25,1,.25,1); 
    animation-fill-mode: forwards;
}




/* ========= Benefits Slide ========= */

.section.three_benefits{
    display:flex;
    flex-direction:row;
    align-items: center;
    justify-content: center;
    padding:0;
    padding-bottom:150px;
    color: #4A4A4A;
}
    
.benefit{
    width:300px;
    margin:0 20px;
    text-align: center;

}

.benefit_v_rule{
    width:1px;
    height:120px;
    background-color:rgba(0,0,0,0.05);
    margin:0 10px;
}

.benefit_emoji{
    font-size:80px;
}

.benefit_title{
    font-size: 20px;
    font-weight:600;
    margin:10px 0;
}


.benefit_description{
    text-align: left;
    font-size: 18px;
    width:250px;
    height:125px;
    margin:10px auto;
    line-height: 30px;
    color:#7D7D7D;
}




/* ======== Quotes ======== */

.section.quotes{
    display:flex;
    flex-direction: column;
    align-items:center;
    padding:100px 0 75px 0;
    color: #2B2B2B;
}

.quotes.belowapp{
    padding:100px 0 0px 0;
}

.quotes_end_container{
    display:flex;
    align-items:center;
}

.quotes_end_divider{
    height:1px;
    width:200px;
    margin:0 auto;
    background-color:#C4C4C4;
}

.quote_text{
    font-size: 22px;
    font-family:'OpenSans', sans-serif;
    font-weight:300;
    line-height: 35px;
    font-style: italic;
    max-width:500px;
    text-align: center;
}

.quote_lower{
    margin-top:30px;
    display:flex;
    align-items:center;
    justify-content: center;
}

.quote_attribution{
    margin-left:20px;
    display:inline-block;
}

.quote_name{
    font-size: 14px;
    line-height: 16px;
}

.quote_job{
    font-size: 12px;
    line-height: 16px;
}

.quote_avatar{
    width:35px;
    height:35px;
    border-radius:100%;
    display:inline-block;
}




/* ======= explanation ======= */





/* ========= board graphic ========= */

#board_graphic_frame{
    width:630px;
    height:368px;
    margin:40px auto;
    border-radius:20px;
    padding:15px;
    background-color:rgb(0,0,0);
    border:2px solid #D4D4D4;
    box-shadow: 5px 5px 50px 0px rgba(0,0,0,0.33);
}

#board_graphic_screen{
    background-color: #E5E5E5;
    overflow: hidden;
    height:100%;
    width:100%;
    display:flex;
    align-items: flex-end;
}

#board_graphic{
    min-width:1966px;
    max-width:1966px;
    width:1966px;
    margin-left:15px;
    transition:all 500ms;
    transform: translateX(0) scale(0.5);
    transform-origin:00% 50%;
    animation-name:board_graphic;
    animation-iteration-count: infinite;
    animation-duration:8s;
}


@keyframes board_graphic {
  0% {  transform: translateX(0) translateY(-10px) scale(0.3);}
  20% { transform:translateX(-88px) translateY(-10px) scale(0.3); }
  40% { transform:translateX(-1440px) translateY(0) scale(1); }
  80% { transform:translateX(0px) translateY(0) scale(1); }
  100% {  transform: translateX(0) translateY(-10px) scale(0.3);}
}





/* ========= Pricing ========= */

.section.pricing{
    background:#EAE7EC;
    padding:70px 0;
}

.pricing .centering{
    max-width:1200px;
}

.pricing h2{
    font-size:24px;
}

.pricing p{
    font-size:16px;
    max-width:500px;
    margin:0 auto;
    margin-bottom:40px;
}

.pricing_chart{
    margin:50px auto;
    max-width:90vw;
}

.pricing .button{
    margin:0 auto;
    margin-top:50px;
}




















/* ==============      apppppp        ============ */




#navbar{
	width:50px;
	height:100%;
	display: flex;
	flex-direction:column;
	box-sizing:border-box;
	background-color: #462A5C;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.40);
	z-index:100;
	position:absolute;
	transition:width 300ms;
	left:0;
	overflow:hidden;
}

#navbar:hover{
	width:225px;
}

#navbar:hover #logo{
	margin-left:8px;
}

#navbar:hover .navbar_phase_bar{
	opacity:0;
}

#navbar:hover .navbar_phase_title_container{
	opacity:1;
}



/* ======= Logo ========== */

.navbar_item.logo_block{
	justify-content:flex-start;
	height:40px;
	width:60px;
	margin:10px 0;
	padding:0;
	cursor:pointer;
	overflow:visible;
	position:relative;
}

#logo_container{
	width:225px;
	height:100%;
	white-space: nowrap;
	display:flex;
	transition:background 300ms;
}

#logo_container:hover{
	background-color:rgba(255,255,255,0.1);
}

#logo{
	font-weight:700;
	font-size: 20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3023ae+0,c86dd7+100 */
	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#D2CFEF), color-stop(100%,#EED1F3)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(-45deg,  #D2CFEF 0%,#EED1F3 100%); /* Chrome10+,Safari5.1+ */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
	color:#B966D3;
	display:inline-flex;
	transition:margin-left 300ms;
	height:100%;
	padding:0 7px;
}

#back_text{
	font-size:13px;
	padding:15px 10px;
	width:175px;
	display:inline-flex;
	align-items:center;
	transition:opacity 300ms;
}

	

#project_title_container{
	position:absolute;
	left:60px;
	height:100%;
	width:175px;
	display:flex;
	padding-right:10px;
	background-color:#4A4A4A;
	transition:opacity 300ms;
}

#logo_container:hover + #project_title_container{
	opacity:0;
}



/* ======== cards ========= */


#navbar_cards_scroll_container{
	flex: 1;
	-webkit-box-flex: 1;
	position:relative;
	overflow:hidden;
	display:grid;
	display: -ms-grid;
}

#navbar_cards_container{
	overflow-y:scroll;
	width:100%;
	flex:1;
	padding-bottom:50px;
}

#navbar_cards_container::-webkit-scrollbar{
	display:none;
}
.navbar_card_container{
	height:36px;
	color:#F6F6F6;
	font-size:12px;
	font-weight:400;
	cursor:pointer;
	text-align: left;
	display:flex;
	align-items:center;
	width:100%;
}

.navbar_card_container:hover{
	background-color:rgba(1,1,1,0.1);
}

.navbar_card_icon_container{
	display:none;
}

.navbar_card_icon{
	margin-left:17px;
	flex-shrink:0;
	transition:margin-left 300ms;
}

.navbar_card_icon_container > .navbar_card_icon{
	display:block;
	margin-left:0;
}
.navbar_card_title_container.phase{
	display:inline-flex;
}

.navbar_card_title_container{
	width:200px;
	height:100%;
	margin-left:5px;
	flex-shrink: 0;
	display:inline-flex;
	opacity: 0;
	visibility: hidden;
	align-items:center;
	transition:all 250ms;
}
.navbar_card_icon_container:hover + .navbar_card_title_container{
	visibility: visible;
	opacity: 1;
	text-align: left;
}
.unpinned .navbar_card_title_container{
	display:none !important;
}
.navbar_card_title{
	width:150px;
	/*min-width: 150px;*/
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-left:20px;
	flex-shrink: 0;
}

.navbar_card_title_container > .navbar_card_title{
	display:block;
	width:auto;
	max-width:100%;
	padding:8px;
	background-color:#5d5d5d;
	border-radius:3px;
	/*margin:auto;*/
	flex-shrink:auto;
	margin-left:0;
}
.navbar_phase_container{
	height:40px;
	font-weight:400;
	color:#9b87ac;
	font-size:12px;
	text-transform: uppercase;
	display:flex;
	align-items:center;
	justify-content:flex-start;
	position:relative;
}

.navbar_phase_bar{
	width:24px;
	height:1px;
	background-color:#785991;
	display:inline-block;
	margin:0;
	margin-left:12px;
	transition:opacity 300ms;
}
.navbar_phase_title_container{
	width:150px;
	display:inline-block;
	overflow:hidden;
	position:absolute;
	left:15px;
	top:20px;
	opacity:0;
	transition:opacity 300ms;
}

.navbar_phase{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width:150px;
	cursor:default;
}
.card_titles_arrow{
	cursor:pointer;
	position:absolute;
	z-index:2;
	height:50px;
	width:100%;
	display:flex;
	align-items:center;
	pointer-events:none;
}
.card_titles_arrow#top{
	top:0px;
	padding-top:10px;
	display:flex;
	justify-content:center;
	align-items:flex-start;
	background: linear-gradient(to bottom,  rgba(70,42,92,1) 0%,rgba(70,42,92,0) 100%);
}
.card_titles_arrow#bottom{
	bottom:0px;
	padding-bottom:10px;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	background: linear-gradient(to bottom,  rgba(70,42,92,0) 0%,rgba(70,42,92,1) 100%);
}


/* ======= actions ==========*/

.navbar_item{
	width:225px;
	margin:0;
	padding:10 0px;
	color:#F6F6F6;
	font-weight:400;
	font-size:12px;
	position:relative;
	display:flex;
	align-items:center;
}
.pinned .navbar_item{
	width:50px;
}

.navbar_item_icon_wrapper{
	width:50px;
	text-align: center;
	transition:margin-left 300ms;
	display:inline-block;
	position:relative;
}

.navbar_item.clickable:hover{
	cursor:pointer;
	background-color:rgba(0,0,0,0.1);
}

.navbar_item_label{
	width:150px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
	display:inline-block;
}

#navbar_actions_container{
	width:100%;
	overflow-y:visible;
	transition:width 300ms;
}

.navbar_actions{
	padding:10px 0;
	background-color:#462A5C;
	box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.46);
	z-index:2;
}

.share_container{
	height:45px;
	padding:10px 0;
}





/* ====== START Zoom ======== */

#zoom{
	position:relative;
}

#zoomIn, #zoomOut{
	margin:0;
	cursor:pointer;
}

#zoom_popover{
	position:absolute;
	display:block;
	bottom:0;
	left:0;
	z-index:3;
	width:43px;
	height:164px;
	background: #ae8dc9;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.50);
	border-radius: 100px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	margin-left:-5px;
}

/* ====== END Zoom ======== */
/* ====== START User Badge ======== */

.user_badge_container{
	position:relative;
}

.user_badge_container .badge_profile_photo{
	width:35px;
	height:35px;
	border-radius:32px;
	border:2px solid #F6F6F6;
	background-size:cover;
	display:inline-block;
}

/* ====== END User Badge ========= */



#purple_app_frame_container h2{
	margin:0;
    font-size: 20px;
    font-weight: 400;
    color: #4A4A4A;
	text-align: left;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    /*margin-top: 50px*/
}

#purple_app_frame_container p{ 
	font-size:13px;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}


#purple_app_frame *::-webkit-scrollbar {
    width: 0.3em;
    height: 0.5em;
    background-color: transparent;
}

#purple_app_frame *::-webkit-scrollbar-thumb {
    background: #A98DC1;
    border-radius:20px;
    height:5px;
}

#dashboard_wrapper{
	display:flex;
	flex-direction:row-reverse;
	width:100%;
	position:relative;
	flex:1;
}

#main{
	flex:1;
	display:flex;
	white-space: nowrap;
	position:relative;
	width:100%;
}

/* =========== dashboard ========== */

#main_overlay{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background-color:rgba(0,0,0,0.3);
	z-index:9;
	display:none;
	-webkit-transform:translate3d(0,0,0);
}

#outboard{
	padding-right:2.5%;
	padding-left:50px;
	padding-top:20px;
	padding-bottom:10px;
	position:absolute;
	top:0%;
	left:0%;
	width:100%;
	height:100%;
	max-height:100%;
	overflow-x:scroll;
	overflow-y:hidden;
	background-color:#e5e5e5;
	display:flex;
	flex-wrap:nowrap;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(-45deg, #ffffff 0%, #dcd3e6 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(-45deg, #ffffff 0%,#dcd3e6 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(135deg, #ffffff 0%,#e7e2ed 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e7e2ed',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#board{
	transform-origin: center left;
	margin:auto;
    transition: 500ms ease-out;
    flex-direction:row;
    justify-content: space-between;
    color:#4A4A4A;
    font-size:15px;
    height:100%;
    position:relative;
    padding-right:300px;
	transform-origin: 0% 70%;
	will-change:transform;
	transform: matrix(0.3333, 0, 0, 0.3333, 0, 0);
}

#project_title{
	position:absolute;
	top:-600px;
	left: 305px;
	font-size:80px;
	font-weight:400;
	color:#997CB1;
}

#centered_error{
	margin:auto;
}

/* ========== START FAB ========== */

.fabs{
	position:absolute;
	right:0px;
	bottom:0px;
	margin-right:15px;
	z-index:10;
	width:50px;
	display:flex;
	flex-direction:column;
}

.fab_container{
	margin:0 auto;
	background:transparent;
	white-space: nowrap;
	font-size:12px;
	display:block;
}

.fab_container > *{
	margin-bottom:18px;
}

.FAB{
	display:flex;
	background-color:#7D5D97;
	box-shadow: 0px 5px 20px 0px rgba(137,96,171,0.5);
	align-items:center;
	justify-content:center;
	flex-direction:column;
	color:#F6F6F6;
	cursor:pointer;
	border-radius:100px;
	width:50px;
	height:50px;
	min-height:50px;
	font-size:30px;
}


.FAB:hover{
	background:#6F4D8B;
}


.small_fab{
	width:35px;
	min-height:35px;
	height:35px;
	background:#4A4A4A;
}

.fab_container:hover .fab_tooltip{
	visibility:visible;
	opacity:1;
}

.fab_tooltip{
	visibility: hidden;
    opacity: 0;
    padding: 8px;
    background-color: #5d5d5d;
    border-radius: 3px;
    position: absolute;
    right: 60px;
    color: #fafafa;
    top: 8px;
    white-space: pre;
    transition: opacity .3s;
}

.zoom_icon_container{
	width:100%;
	height:50%;
	display:block;
	margin:0;
	border:none;
	outline:none;
	background:none;
	cursor:pointer;
	padding:0;
	position: relative;
}

.zoom_icon_container:first-child img{
	margin-top:5px;
	border-top-left-radius:100%;
	border-top-right-radius:100%;
}


.zoom_icon_container:last-child img{
	margin-bottom:5px;
	border-bottom-left-radius:100%;
	border-bottom-right-radius:100%;
}

.zoom_icon_container:first-child:hover{
	background-color:#3B3B3B;
	border-top-left-radius:100%;
	border-top-right-radius:100%;
}

.zoom_icon_container:last-child:hover{
	background-color:#3B3B3B;
	border-bottom-left-radius:100%;
	border-bottom-right-radius:100%;
}

.zoom_tooltip{
	visibility:hidden;
	opacity:0;
	padding:8px;
	background-color:#5d5d5d;
	border-radius:3px;
	position:absolute;
	right:50px;
	color:#FAFAFA;
	top:3px;
	white-space: pre;
	transition:opacity 300ms;
}

.zoom_icon_container:hover .zoom_tooltip{
	visibility:visible;
	opacity:1;
}

.kb_shortcut{
	color:#D4D4D4;
}

/* ========== END FAB ========== */

/* ====== START card framework ======== */

.phase_container{
	color:#997CB1;
	font-size:25px;
	white-space:normal;
	display:inline-flex;
	vertical-align: top;
	box-sizing:border-box;
	height:100%;
	position:relative;
	overflow-y:visible;
	overflow-x:visible;
	flex-direction:column;
	align-items:flex-end;
	margin-right:20px;
	position:relative;
}

.phase{
	margin-top:2px;
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
	background-color:inherit;
	border:1px solid rgba(0,0,0,0);
	display:block;
	width:300px;
	text-align: right;
	text-transform: uppercase;
	font-weight:400;
	text-overflow: wrap;
}

.phase_zoomout{
	font-size: 60px;
    white-space: nowrap;
    text-transform: uppercase;
    font-weight:400;
    position:absolute;
    left: 315px;
    top: -300px;
}

.main_card{
	background: white;
	box-shadow: 50px 50px 100px -20px rgba(222, 214, 229,1);
    margin: 0 25px 0 0;
	color:#4A4A4A;
	white-space:normal;
	display:inline-flex;
	vertical-align: top;
	box-sizing:border-box;
	height:100%;
	position:relative;
	overflow-x:visible;
	flex-direction:column;
	align-items:flex-start;
	border-radius:3px;
	position:relative;
}

.main_card::before {
  z-index: -1;
  position: absolute;
  top: 0px;
  left: 100%;
  width: 100px;
  height: 100%;
  content: '';
  background:radial-gradient(farthest-side at top left, rgba(222, 214, 229,.7), transparent);
  transform: skewY(70deg);
  transform-origin: 0 0;
}

.main_card::after {
  z-index: -1;
  position: absolute;
  top: 100%;
  left: 0px;
  width: 100%;
  height: 280px;
  content: '';
  background: radial-gradient(farthest-side at top left, rgba(222, 214, 229,0.4), rgba(222, 214, 229,0) 50%);
  transform: skewX(20deg);
  transform-origin: 0 0;
}

.zoomedOut .main_card{
	cursor:zoom-in !important;
}

.zoomedOut .card_title{
	opacity:0;
}

.zoomedOut .phase{
	opacity:0;
}

.zoomedOut .contents{
	overflow-y:hidden;
}

.zoom_header_overflow{
    position: absolute;
    margin-top: -100px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.zoom_header_overflow img{
	vertical-align: middle;
}

.card_title_zoomout{
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 40px;
    font-weight:400;
    display: inline-block;
	vertical-align: middle;
	color:#997CB1;
}


.main_card .contents{
	width:100%;
	flex:1;	
	position:relative;
	overflow-x:hidden;
}

.card_wrapper{
	width:100%;
    display: flex;
    flex-direction: column;
    height:100%;
    position:relative;
}

.card_resize_handle{
	width:25px;
	height:25px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:25px;
	position:absolute;
	right:-12px;
	top:50%;
	background-color:#9053C5;
	cursor:ew-resize;
	z-index:9;
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.20);
}

.card_header{
	width:100%;
	font-weight:400;
	font-size:12px;
	padding:0px;
	background-color:#997CB1;
	color:#F6F6F6;
	vertical-align: middle;
	height:40px;
	display:flex;
	align-items:center;
	flex:0 0 auto;
	border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.card_position_drag_handle{
	margin-right:10px;
	display:flex;
	height:100%;
	padding:0 10px;
	cursor:move;
	align-items:center;
}

.card_position_drag_handle_inner{
	height:13px;
	width:3px;
	display:flex;
	flex-direction:column;
	justify-content:space-between;
}

.card_position_drag_handle:hover{
	background:rgba(0,0,0,0.1);
}

.card_position_drag_handle_inner div{
	width:3px;
	height:3px;
}

.card_header:hover .card_position_drag_handle_inner div{
	background: #CAA3EA;
}

.card_title{
	flex:1;
	padding:3px 5px;
	margin-left:20px;
	margin-right:20px;
	cursor:text;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	border:1px solid rgba(255,255,255,0);
}

input.card_title{
	flex:1;
	padding:3px 5px;
	margin-left:-5px;
	margin-right:20px;
	background:#A669D9;
	font-size:13px;
	font-weight:600;
	color:#F6F6F6;
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
	border:1px solid rgba(255,255,255,0.2);
}

.card_header_owners{
	direction:rtl;
	text-align:left;
	margin-right:10px;
}

.card_header_owners *{
	margin-left:-12px;
}

.card_header_owner{
	width:27px;
	height:27px;
	border-radius:32px;
	border:2px solid #F6F6F6;
	background-size:cover;
	display:inline-block;
	float:right;
}

.card_header_button{
	height:100%;
	padding:0 10px;
	display:inline-flex;
	align-items:center;
	cursor:pointer;
	position:relative;

}

.card_header_button:hover{
	background:rgba(0,0,0,0.1);
}


.main_card .host_icon{
	height:20px;
	vertical-align: middle;
	margin-right:20px;
}

.main_card .card_topbar{
	height:30px;
	width:100%;
	background: #4C4C4C;
	color:#FAFAFA;
	/*font-weight:600;*/
	font-size:12px;
	padding:0 20px;
	flex:0 0 auto;
}

.card_topbar a{
	display:inline-block;
	height:100%;
	display:inline-flex;
	align-items:center;
	font-size:12px;
	padding:0 10px;
	cursor:pointer;
	float:left;
	text-decoration:none;
	color:#FAFAFA;
}

.card_topbar a:hover{
	background-color:rgba(255,255,255,0.1);
}

.main_card img.full{
	width:100%;
} 

/* ====== END card framework ======== */

/* =========== Image Card ============ */

.upload_instructions{
	text-align: center;
	color:#9B9B9B;
}

.upload_instructions button.browse{
	color:#9B9B9B;
}

.upload_instructions:hover button.browse{
	color:#9053C5;
}

.upload_instructions button.browse:hover{
	color:#9B64CA;
}

.empty_state_upload_instructions{
	text-align: center;
	font-size:14px;
}

button.browse{
	font-size:inherit;
	font-family:inherit;
	border:none;
	background:none;
	color:#9053C5;
	cursor:pointer;
	font-weight:600;
}

button.browse:hover{
	color:#9B64CA;
}

.image_container:hover .image_buttons_container{
	opacity:1;
}

.image_container button{
	background:none;
	font-family: inherit;
	font-size:12px;
	border:none;
	color:#F6F6F6;
	cursor:pointer;
	outline:none;
}

.image.unloaded{
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:#BFBFBF;
}

.image_container{
	position:relative;
}

.image_buttons_container{
	width:100%;
	position:absolute;
	left:0px;
	opacity:0;
	-webkit-transition: all 300ms; 
	transition:         all 300ms; 
}

.image_buttons_container.bottom{
	bottom:0px;
	background-image: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}

.image_buttons_container.top{
	top:0px;
	background-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
}

.image_button:hover{
	background:rgba(0,0,0,0.2);
}

.image_button.fullscreen{
	float:right;
	padding:20px 25px;
}

.image_button.fullscreen img{
	vertical-align: middle;
}
.image_button.add_caption{
	float:left;
	padding:20px 25px;
}
.image_button.delete{
	float:right;
	padding:20px 25px;
}

.caption_container{
	padding:20px;
	background-color:#F6F6F6;
}

.image_caption{
	font-family:inherit;
	font-weight:inherit;
	font-size:inherit;
	color:inherit;
	border:1px solid rgba(0,0,0,0);
	padding:10px;
	background:none;
	width:100%;
	display:block;
	box-sizing: padding-box;
	overflow:hidden;
	resize:none;
}

.image_caption:hover{
	background:rgba(0,0,0,0.05);
}

/* ===== fullscreen image mode ===== */

.fullscreen_container{
	width:100%;
	height:100%;
	display:flex;
	position:relative;
	background-color:#4A4A4A;
	overflow:hidden;
}

.fullscreen_image{
	margin:auto;
	max-width:100%;
	max-height:100%;
}

.left_arrow_hover{
	position:absolute;
	left:0;
	top:0;
	height:100%;
	width:30%;
	display:flex;
	align-items:center;
	justify-content:flex-start;
}

.left_arrow_hover:hover .left_arrow{
	margin-left:0;
}

.right_arrow_hover{
	position:absolute;
	right:0;
	top:0;
	height:100%;
	width:20%;
	display:flex;
	align-items:center;
	justify-content:flex-end;
}

.right_arrow_hover:hover .right_arrow{
	margin-right:0;
}

.slideshow_arrow{
	display:flex;
	align-items:center;
	justify-content:center;
	width:35px;
	height:55px;
	background: rgba(255,255,255,0.75);
	cursor:pointer;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.10);
	/* http://easings.net/#easeOutQuint */
	-webkit-transition: all 200ms cubic-bezier(0.23, 1, 0.32, 1); 
	transition:         all 200ms cubic-bezier(0.23, 1, 0.32, 1); 
}

.slideshow_arrow:hover{
	background:rgba(255,255,255,0.85);
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
}

.left_arrow{
	margin-left:-35px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.right_arrow{
	margin-right:-35px;
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.fullscreen_caption_container{
	width:100%;
	position:absolute;
	left:0px;
	padding-top:30px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	bottom:0px;
	text-align: center;
	color:#F6F6F6;
	background-image: linear-gradient(-180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
}
/* ========= End Image Card ========== */

 /*============ List Card ===========*/

.text_container{
	margin:20px;
}

.text_container .unloaded_text_row{
	background-color:#E2E2E2;
	height:18px;
	margin-bottom:10px;
}

.list_container{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
	margin-top:10px;
}

.list_container.empty{
	display:flex;
	align-items:center;
	justify-content:center;
	flex:1;
	height:calc(100% - 50px);
}

.add_item_container{
	text-align:center;
	font-size:13px;
	color:#9B9B9B;
	font-style: italic;
	padding:15px;
	cursor:pointer;
}

.add_item_container:hover .add_item_button{
	background-color:#9053C5;
}
.add_item_container:hover{
	color:#9053C5;
}

.add_item_button{
	width:50px;
	height:50px;
	background-color:#D4D4D4;
	color:white;
	border-radius:50px;
	display:flex;
	justify-content:center;
	align-items:center;
	margin:0 auto 15px auto;
	font-style: normal;
	font-size:20px;
}

.list_item{
    font-size: 12px;
    font-weight: 400;
    padding: 10px;
    margin: 10px 10px 0 10px;
    width: calc(100% - 20px);
    box-sizing: border-box;
    position: relative;
    background: white;
    box-shadow: 1px 1px 15px 0 rgba(0,0,0,.15);
    border-radius: 3px;
}

.list_item_title{
	padding:5px;
	font-size: 12px;
	color: #895FAC;
	font-weight:600;
	width:100%;
}

.list_item_title.unloaded{
	background-color:#E4D9EE;
	height:18px;
	width:74%;
}

textarea.list_item_title{
	resize: none;
	border-bottom:1px dashed #CDCDCD;
	background-color:#FAFAFA;
}

.list_item_text{
	padding:5px;
	font-weight:400;
	color:#4A4A4A;
	box-sizing:border-box;
	word-wrap:break-word;
	width:100%;
}

.list_item_text.unloaded{
	background-color:#E2E2E2;
	height:18px;
}

textarea.list_item_text{
	height:100px;
	margin-top:0px;
	border-top:none;
	resize: none;
	background-color:#FAFAFA;
}

.delete_item{
	font-size:12px;
	font-weight:400;
	color:#9B9B9B;
	margin-top:10px;
	display:inline-block;
}
.delete_item:hover{
	cursor:pointer;
	color:#9053C5;
}

.sortable_placeholder{
	height:80px;
	width:100%;
	background:#ECECEC;
	position:relative;
	margin-top:15px;
}

.add_button{
	width:calc(100% - 40px);
	text-align: center;
	color:#9B9B9B;
	font-style:italic;
	font-size:12px;
	margin:20px 20px 50px 20px;
	padding:5px 0;
	cursor:pointer;
}

.add_button:hover{
	background: rgba(0,0,0,0.04);
}

.scenario_container{
	padding: 37px 37px 37px 37px;
	font-size:18px;
}

/* ========== End list items ====== */

/* ======== Start Embed ======== */

.contents.embed{
	background-color:#4A4A4A;
	color:#D4D4D4;
}

.contents.card_dialog_container{
    display: -webkit-flex;
    display: -ms-flex;
    display: flex;
    align-items:center;
    justify-content:center;
	width:100%;
	height:100%;
}

.embed_error{
	padding:30px;
	text-align: center;
}

.card_dialog_container .dialog{
	width:90%;
	padding:30px 35px;
	background-color:#F6F6F6;
	margin:auto;
	display:flex;
	align-items:center;
	color:#4A4A4A;
	box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.20);
}

.embed_icon{
	/*flex:0;*/
	margin-right:30px;
}

.embed_form{
	flex:1;
}

.card_dialog_container h1{
	font-size:16px;
	font-weight:400;
	color:#4A4A4A;
}

input.embed_url{
	margin:10px 0;
}

.error_text{
	color:#D0021B;
	font-size:12px;
}

.embed_container{
	display:flex;
	flex-direction:column;
	height:100%;
}

.overlay{
	display:none;
	z-index:100;
	cursor:zoom-in;
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
}

.zoomedOut .overlay{
	display:block;
}

.main_card .document{
	width:100%;
	padding:0;
	border:none;
	flex:1;
}


.document .preload_screenshot{
	position:absolute;
	width:100%;
	z-index:0;
}




/* ================== */

.sketch_card_container{
	display:flex;
	background-color:#F2F2F2;
}

.sketch_sidebar{
	width:200px;
	display:flex;
	flex-direction:column;
	flex:0 0 200px;
	overflow:hidden;
	border-right:1px solid #CBCBCB;
	z-index:500;
}

.sketch_tablist{
	height:33px;
	background-color:#D8D8D8;
	overflow:hidden;
	padding:0;
	border-bottom:1px solid #CBCBCB;

}

.sketch_tab{
	color:#4A4A4A;
	font-size:12px;
	font-weight:600;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	height:100%;
	margin:0;
	width:calc((100% - 35px) / 2);
	cursor:pointer;
}

.sketch_tab.selected{
	background-color:#F2F2F2;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.30);
}

.sketch_sidebar_close{
	border-left:1px solid #B8B8B8;
	width:26px;
	height:100%;
	margin:0;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
}

.close_gray{
	display:none;
}

.sketch_sidebar_close:hover .close_gray{
	display:block;
}

.sketch_sidebar_close:hover .close_light_gray{
	display:none;
}

#close_icon{
	fill:red;
}
.sketch_sidebar_close img{
	fill: red;
}

.sketch_tabpanel{
	background-color:#F2F2F2;
	flex:1;
}

.sketch_pages{
	overflow-y:scroll;
}

.sketch_pages_row{
	display:flex;
	align-items:center;
	height:34px;
	width:100%;
	cursor:pointer;
}

.sketch_pages_row *{
	cursor:pointer;
}

.sketch_pages_row.selected{
	background-color:#6D9EE1;
	color:#F6F6F6;
	cursor:default;
}

.sketch_pages_row.selected *{
	cursor:default;
}


.sketch_pages_row_comments{
	display:none;
	margin-right:5px;
	font-size:10px;
	color:white;
}

.sketch_pages_row_comments img{
	width:10px;
}

.sketch_pages_row.selected .sketch_pages_row_comments.white{
	display:block;
}

.sketch_pages_row.selected .sketch_pages_row_comments.purple{
	display:none;
}

.sketch_pages_row .sketch_pages_row_comments.purple{
	color:#9056C5;
	display:block;
}

.sketch_pages_row.selected:hover .sketch_pages_row_comments.purple{
	color:white;
}

.sketch_pages_row:not(.selected):nth-child(even){
	background-color:#EBEBEB;
}

.sketch_pages_row:last-child{
	margin-bottom:100px;
}

.sketch_pages_row_label{
	margin-left:23px;
	font-size:12px;
	font-weight:400;
	flex:1;
	cursor:default;
}

#sketch_canvas_window{
	flex:0 1 auto;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:crosshair;
}

#sketch_canvas_window:active{
	cursor:-webkit-grabbing;
	cursor:-moz-grabbing;
	cursor:grabbing;
}

#sketch_canvas{
	will-change:transform;
	position:relative;
	flex:1;
}

#sketch_canvas img{
	-moz-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	pointer-events: none;
}

.object_container{
	position:absolute;
}

.artboard_header{
	width:100%;
}

.artboard_title{
	float:left;
	margin:0 0 5px 0;
}
/*
.artboard_delete{
	float:right;
	display:none;
}*/

.object_container:hover .artboard_delete{
	display:block;
}

.artboard_image{
	box-shadow: 0 0 6px 0 rgba(0,0,0,0.25);
}


/* ======= sketch card empty state ======= */


.card_dialog_container .sketch_dialog{
	display:block;
	text-align: center;
	width:487px;

}

.sketch_logo{
	margin:20px;
}

.sketch_instructions {
	counter-reset: sketch-instructions-counter;
	text-align: left;
	margin-top:15px;
}

.sketch_instructions dt:before {
	content: counter(sketch-instructions-counter);
	counter-increment: sketch-instructions-counter;
	position: absolute;
	left: 0;
	top: 0;
	font-size:14px;
	font-weight:600;
	background-color:#E9E9E9;
	border-radius:100%;
	width:30px;
	height:24px;
	text-align: center;
	vertical-align: middle;
	padding-top:6px;
}

.sketch_instructions dt{
	position: relative;
    padding: 4px 0 10px 0;
    padding-left:50px;
    vertical-align: middle;
    font-size:12px;
    margin:7px 0;
}

.sketch_instructions a{
	font-weight:600;
	color:#9053C5;
}

.sketch_instructions img{
	vertical-align: middle;
	padding-left:5px;
}

/* ====== sketch comments ====== */

.canvas_comments_container{
	position:relative;
}

.sketch_comment_badge{
	position:absolute;
	border-radius: 50%;
    background-color: #9056C5;
    border: 2px solid #EDC5FA;
    width: 24px;
    height: 24px;
    text-align: center;
    font-size: 10px;
    color: #FAEBFF;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.3);
    cursor:move;
}

.thread_container{
	position: absolute;
    margin-top: -17.5px;
    margin-left: -17.5px;
    z-index: 300;
    font-size:14px;
    cursor: default;
}

.comment_callout{
	width: 350px;
    background-color: #F6F6F6;
    position: absolute;
    color: #fff;
    border-radius: 5px;
    margin: 25px;
    padding: 0;
    min-height: 50px;
    border: none;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.3);
}


.comment_callout::before {
	content: "";
	width: 0px;
	height: 0px;
	border: 0.8em solid transparent;
	position: absolute;
	z-index:1;
	left: -21px;
	top: 15px;
	border-right: 10px solid #F6F6F6;
}

.comment_text_box{
	width: 100%;
	padding:5px;
	box-sizing:border-box;
	font-size:14px;
	font-weight:400;
	min-height:10px;
	font-family:'Open Sans';
	color:black;
	border:none;
	border-radius:5px;
	resize:none;
    line-height:1;
}

textarea.comment_text_box:focus{
	outline:none;
	border:none;
}
input.comment_text_box:focus{
	outline:none;
	border:none;
}

.comment_text_box::-webkit-input-placeholder {
   font-style: italic;
}
.comment_text_box:-moz-placeholder {
   font-style: italic;  
}
.comment_text_box::-moz-placeholder {
   font-style: italic;  
}
.comment_text_box:-ms-input-placeholder {  
   font-style: italic; 
}

.post_thread_container{
	float:right;
}

.post_comment_hint{
	color:#9B9B9B;
	font-size:10px;
	text-align: center;
}

.post_comment_button{
	font-size: 14px;
	color: #9053C5;
	outline:none;
	border:none;
	background:none;
	cursor:pointer;
	font-family:inherit;
	display:block;
	text-align: center;
}


/* ======== end example app ========= */


























@media only screen and (max-width: 1050px) {
    .homepage h1 {
        font-size:28px;
    }

    #cta{
      width:350px;
    }

    #intro_floaty{
      width: calc(100% - 355px);
    }    
}


@media only screen and (max-width: 930px) {

    #intro{
      flex-direction: column;
      align-items: center;
      margin-bottom:20px;
    }

    #cta{
      width:auto;
      order:2;
      text-align: center;
      margin-top:75px;
    }

    #cta .subheader{
      text-align: justify;
      max-width: 400px;
    }

    #intro_floaty{
      width: 100%;
      order:1;
      margin-top:70px;
    }    

    #sample_card_container{
      width:500px;
      height:200px;
      display:flex;
      align-items:center;
      justify-content:center;
        align-items: center;
        background-color:rgba(255,255,255,0.5);
        border-radius:3px;
        perspective: 300px;
      box-shadow: 20px 20px 130px 0 rgba(153,124,177,0.16);
      margin-left:-5%;
    }

    .homepage h1{
      font-size:35px;
    }

    .big_picture .centering, .consistency .centering{
      flex-direction: column;
    }

    .video_container_wrapper{
      order:2;
      padding: 0 10%;
    }

    .side_text{
      order:1;
      width: 70%;
      min-width: 360px;
    }

    .side_text p{
      margin: 10px 0 30px 0;
    }

    .section.big_picture, .section.consistency{
      padding:70px 0 90px 0;
      height:auto;
    }

    .section.cards_menu {
    padding-top: 70px;
  }

    .consistency .side_text{
      margin-bottom:50px;
    }

    #purple_app_container {
      top: 5vw;
      bottom: 5vw;
      right: 5vw;
      left: 5vw;
    }
}


@media only screen and (max-width: 720px) {
  #topbar_links{
    display:none;
  }
  #card_list_container{
    overflow-x: scroll;
  }
}


@media only screen and (max-width: 540px) {
  .intro .centering{
    padding:0 20px;
  }

  #intro_rotate_container{
      transform: rotateX(5deg) rotateY(-5deg) scale(0.6);
      margin-bottom:-60px;
      margin-top:-60px;
  }

  #cta {
    text-align: left;
  }

  #cta h1 br{
    display:none;
  }

  #cta .subheader{
    line-height:25px;
  }

  .side_text{
    padding:0 20px;
  }

  #cardtype_wireframe_container {
    /*width: calc(100% - 60px);*/
    /*margin: 0 30px;*/
    width:100%;
  }

  #cardtype_tabpanel {
    width: calc(100% - 40px);
    margin: 0 20px;
  }

  .card_description video{
    max-width: 100%;
    box-shadow:none;
    min-height:auto;
  }

  .cards_menu h1 {
    padding: 0 20px;
  }
}
















/* Pricing page */

.pricing #intro{
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.pricing h1{
  text-align: center;
  margin-top:90px;
}

#cycle_toggle{
  border: 1px solid #997CB1;
  color:#997CB1;
  width:180px;
  border-radius:5px;
  overflow:hidden;
  height:36px;
  font-size:12px;
  margin: 40px auto 0px auto;
}

#cycle_toggle .active{
  background-color:#997CB1;
  color:white;
  cursor:default;
}

#cycle_toggle :not(.active){
  cursor:pointer;
}

#cycle_toggle div{
  width:50%;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content: center;
  text-align: center;
}




#pricing_containers{
  margin-top:50px;
  display:flex;
  justify-content:center;
  min-width:700px;
  padding:20px 0;
}

.pricing_container{
  width:230px;
  min-width:230px;
  margin-right:10px;
  background: #FCFCFC;
  box-shadow: 0 1px 10px 0 rgba(153,124,177,0.28);
  border-radius: 6px;
  display:inline-flex;
  flex-direction: column;
  padding:35px 25px;
  height:330px;
}

.pricing_container#organization{
  width:270px;
}


#free{
  width:185px;
  min-width:185px;
}

.pricing_heading{
  flex:1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pricing_details{
  height:174px;

}

.pricing_emojis{
  font-size:30px;
  text-align: center;
  flex:0;
  white-space:nowrap;
  width:100%;
}

.plan_name{
  text-align: center;
  margin-top:13px;
  font-size: 18px;
  font-weight:800;
  color: #666666;
  flex:0;
}

.plan_description{
  margin-top:13px;
  flex:1;
}

.plan_description p{
  font-size:12px;
  text-align: left;
  color:#666666;
  margin:0;
  margin-top:5px;
  text-align: center;
}

.price{
  font-weight:800;
  font-size: 30px;
  color: #895FAC;
  text-align: center;
  margin-bottom:5px;
  margin-top:20px;
}

#free .price{
  margin-bottom:15px;
}

.price_label{
  margin-bottom:15px;
  font-weight:400;
  font-size:14px;
  text-align: center;
}


.pricing_signup{
  width:130px;
  margin:40px auto;
}




.faq_container{
  padding:50px;
  max-width:900px;
  background-color:#FCFCFC;
  column-count:2;
  column-gap: 40px;
  margin:50px;
  color:#655A6E;
  box-shadow: 0 10px 20px 0 rgba(0,0,0,0.07), 0 2px 4px 0 rgba(0,0,0,0.05);
  border-radius: 4px;
}

.faq_chunk{
  margin-bottom:30px;
  -webkit-column-break-inside: avoid;
            page-break-inside: avoid;
                 break-inside: avoid;
}

.faq_chunk p:first-child{
  font-size:18px;
  margin-bottom:10px;
}

.faq_chunk p{
  font-size:14px;
  line-height:25px;
  margin:0;
}



@media only screen and (max-width: 960px) {
  #pricing_containers{
    flex-direction:column;
    align-items: center;
  }

  .pricing_container, #free.pricing_container{
    width:400px;
    min-width:400px;
    flex-direction: row;
    height:210px;
    margin-bottom:30px;
  }

  .pricing_container{
    padding:20px 25px;
  }

  .pricing_details{
    width:150px;
  }
}


@media only screen and (max-width: 700px) {

  .faq_container{
    column-count:1;
    column-gap: 0px;
    margin:20px;
  }
}







/* ========== About page ========= */

.cover{
    width:100%;
    /*height:300px;*/
    margin:40px 0;
    position:relative;
}

.cover_image{
    width:100%;
    z-index:1;
}

.cover_text{
    position:absolute;
    left:50px;
    bottom:30px;
    z-index:2;
    font-size:14px;
    text-align: left;
}

.cover_text_background{
    background-color:black;
    filter:blur(50px);
    -webkit-filter: blur(50px);
    -webkit-transform: translate3d(0, 0, 0);
    left:0;
    right:0;
    top:0;
    bottom:0;
    position:absolute;
    width:100%;
    height:100%;
    z-index:3;

}

.cover_text p{
    margin:6px 0;
    z-index:4;
    position:relative;
    color:#FAFAFA;
}

.cover_text .name{
    font-weight:600;
}


#about_container{
    max-width:600px;
    margin:0 auto 100px auto;
    color:#4A4A4A;
}


.about_text{
    color:#4A4A4A;
    font-size:16px;
    line-height:40px;
    max-width:600px;
    margin:0 auto;
    text-align: left;
    padding:0 20px;
}
#about_container h2{
    text-transform: uppercase;
    text-align: center;
    margin-top:50px;
}

.teammates{
    width:100%;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
}

.teammate{
    display:inline-block;
    font-size:14px;
    margin-bottom:30px;
    flex:1;
    text-align: center;
}

.teammate_photo{
    width:170px;
    height:170px;
    background-color:gray;
    margin-bottom:15px;
}

.email{
  text-align: center;
}