/* left & right project explainers */

.reason {border-radius:12px; padding:20px; font-size:15px;}
.reason-left {background:#480099;}
.reason-right {background:#890978;}

.reason h3 {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size:18px; font-weight:600;
  color:#F8F8F9;
}

.reason ul {margin-top:12px; margin-bottom:4px;}
.reason ul li {color:#F8F8F9;}
.reason ul li:not(:first-child) {margin-top: 10px;}

.project-margin {display:block; height:40px;}

/* random 1-off areas */

.color-block {
  display:inline-block;
  width:80px; height:80px;
  margin-top:30px; margin-right:30px;
  border-radius:10px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.featured {
  font-family: 'Montserrat', 'Arial', sans-serif;
  font-size:13px; font-weight:600;
  color:#A40B8F;
  text-transform:uppercase; letter-spacing:0.6px;
}
.featured span {margin-right:4px;}

/* button groups for switching images */

.btn_group {
  background:#FAFAFA; padding:8px;
  border:1px solid #D0D1D9;
  border-radius:20px 0px 20px 0px;
}

.btn_group button {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size:14px; font-weight:500;
  border-radius:16px 0px 16px 0px;
}

.btn_group button[aria-selected="true"] {
  background:#72768D;
  border:1px solid #72768D;
  color:#FFFFFF;
}

.btn_group button[aria-selected="false"] {
  background:none;
  border:1px solid rgba(0,0,0,0);
  color: #72768D;
}
.btn_group button[aria-selected="false"]:hover {color:#444755;}

/* design images */

.designs img {
  box-shadow: 0 5px 15px rgba(0,0,0,.28);
  border-radius:12px;
}
.designs .hidden-margin {display:none;}
@media only screen and (max-width:960px) {.designs .hidden-margin{display:block; height:20px;}}

/* project overview */

.project-overview ul li:not(:first-child) {margin-top: 10px;}

span.badge {
font-family: 'Montserrat', 'Arial', sans-serif;
font-size:12px; font-weight:500;
padding:0px 10px 5px 0px;
display:inline-block;
}
span.badge i {margin-right:3px;}

span.badge-deliverable i {color:#09C583;}
span.badge-skill i {color:#EF10D2;}
span.badge-tool i {color:#FF8800;}


/* reviews on released products */

.review {
background:#FFFFFF;
box-shadow: 0 2px 15px rgba(0,0,0,.18);
border-radius:16px;
padding:20px;
font-family: 'Montserrat', 'Arial', sans-serif;
font-size:20px; color:#85899C;
}

.review .fa-quote-left {margin-right:6px;}
.review .fa-quote-right {margin-left:6px;}

.review img {opacity:40%; width:80px;}
.review table {margin-bottom:0px;}


/* MAIN EVENT */


.intro .mainevent-left {display:inline-block; width:49%;}
.intro .mainevent-right {display:inline-block; width:50%; text-align:right; vertical-align:top;}
.intro .mainevent-right img {width:auto; height:400px;}

@media only screen and (max-width:1150px) and (min-width:961px) {
  .intro .mainevent-left {width:59%;}
  .intro .mainevent-right {width:40%;}
  .intro .mainevent-right img {width:auto; height:300px;}
}

@media only screen and (max-width:960px) {
  .intro .mainevent-left {width:100%;}
  .intro .mainevent-right {width:100%; text-align:left; margin-top:50px; margin-left:20px; margin-bottom:30px;}
  .intro .mainevent-right img {width:auto; height:300px;}
}

.ME-designs a {
  display:inline-block; width:20%;
  margin:10px 20px 0px 20px;
  background:none;
}
.ME-journeys a, .BYD-compare a {
  display:inline-block; width:45%;
  margin:10px 20px 0px 20px;
}

@media only screen and (max-width:960px) {
  .ME-designs a, .BYD-compare a {width:40%;}
  .ME-journeys a {width:80%;}
}


/* CHUTE-OUT */

.intro .chuteout-left {display:inline-block; width:69%;}
.intro .chuteout-right {display:inline-block; width:30%; text-align:right; vertical-align:top;}

@media only screen and (max-width:840px) {
  .intro .chuteout-left {width:100%;}
  .intro .chuteout-right {width:100%; text-align:left; margin-top:50px; margin-left:20px; margin-bottom:30px;}
}


.CO-designs a {
  display:inline-block; width:20%;
  margin:10px 20px 0px 20px;
  background:none;
}

.CO-designs a img {border-radius:40px;}
@media only screen and (max-width:960px) and (min-width:769px) {.CO-designs a img {border-radius:50px;}}
@media only screen and (max-width:768px) {.CO-designs a img {border-radius:40px;}}
@media only screen and (max-width:960px) {.CO-designs a {width:40%;}}


/* HAPPY HEARTS */

.intro .happyhearts-left {display:inline-block; width:49%;}
.intro .happyhearts-right {display:inline-block; width:50%; text-align:right; vertical-align:top;}
.intro .happyhearts-right img {width:100%;}


@media only screen and (max-width:740px) {
  .intro .happyhearts-left {width:100%;}
  .intro .happyhearts-right {width:100%; text-align:left; margin-top:50px; margin-bottom:30px;}
}

.HH-desktop a {
  display:inline-block; width:45%;
  margin:10px 20px 0px 20px;
}

@media only screen and (max-width:960px) {
  .HH-desktop a {width:80%;}
}

/* CONVO EDITOR */

.intro .convoeditor-left {display:inline-block; width:44%;}
.intro .convoeditor-right {display:inline-block; width:55%; text-align:right; vertical-align:top;}
.intro .convoeditor-right img {width:100%; margin-top:20px;}

@media only screen and (max-width:960px) {
  .intro .convoeditor-left {width:100%;}
  .intro .convoeditor-right {width:100%; text-align:left; margin-top:30px; margin-bottom:30px;}
}

/* FREE TRIAL */

.intro .freetrial-left {display:inline-block; width:50%;}
.intro .freetrial-right {display:inline-block; width:49%; text-align:right; vertical-align:top;}
.intro .freetrial-right img {width:100%; margin-top:20px;}

@media only screen and (max-width:960px) {
  .intro .freetrial-left {width:100%;}
  .intro .freetrial-right {width:100%; text-align:left; margin-top:30px; margin-bottom:30px;}
}