@import "components/accordion_2.css";
@import "components/feature_1.css";
@import "components/tabs_1.css";
@import "components/tiles.css";
@import "components/organisms/blog_grid_1.css";
@import "components/organisms/blog_single_1.css";
@import "components/podcast_card_1.css";
@import "components/popups.css";

/*popup*/
.colony_popup {
    background: var(--charcoal);
    border: 2px solid var(--orange);
    border-radius: 10px;
}
.colony_popup .title {
    color: var(--orange);
    line-height: 1.2rem;
}
.colony_popup .title span {
    color: var(--white);
    font-size: 0.9rem;
}
.colony_popup .message {
    color: var(--white);
    line-height: 1.3rem;
    font-size: 0.9rem;
    opacity: 0.8;
}
.colony_popup .colony_popup_close {
    color: var(--white);
}

/* general ------------------------- */
.about-avatar {
    max-width: 300px;
    height: 300px;
    object-fit: cover;
    width: 100%;
    padding: 0;
    margin-left: auto;
    display: block;
    margin-right: auto;
    border-radius: 50%;
}
.dot {
    height: 35px;
    width: 35px;
    border-radius: 50%;
    border: 2px solid var(--grey-dark);
}
.dot-filled {
    background: var(--grey-dark);
}
.section-header {
    font-family: var(--kallisto);
    font-size: 1.94rem;
    font-weight: 600;
    margin-bottom: var(--space-med);
}
.section-header.grid-3 {
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--space-med);
}
.section-header .grid-item-b {
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-1 {
    border-bottom: 2px solid var(--green);
    transition: 0.3s;
}
.btn-1:hover {
    border-bottom: 2px solid var(--blue);
}
@media only screen and (max-width: 800px) {
    h1 {
        font-size: 1.75rem;
    }
    h2 {
        font-size: 1.4rem;
    }
    .section-header {
        font-size: 1.65rem;
    }
    .section-header.grid-3 {
        column-gap: var(--space-sml);
    }
    input, textarea, .btn-2 {
        border-radius: 5px;
    }
}
@media only screen and (max-width: 600px) {
    .dot {
        height: 30px;
        width: 30px;
    }
    .about-avatar {
        max-width: 200px;
        height: 200px;
    }
}

/* preloader -----------------------------*/
.preloader {
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: var(--grey);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.preloader .logo {
    font-family: var(--kallisto);
	font-size: 1.25rem;
	letter-spacing: 0.20em;
    animation: loader 2.5s linear infinite;
}
.preloader .logo span {
    color: var(--teal);
}
@keyframes loader {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@media only screen and (max-width: 501px) {
    .preloader img {
        height: 75px;
    }
}

/* header ------------------------- */
:root {
    --nav-height: 74px;
}
.nav-padding{
    height: var(--nav-height);
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--grey-dark);
    height: var(--nav-height);
    z-index: 99;
}
header .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo-img {
    height: 50px;
    width: auto;
    margin-right: var(--space-xsml);
}
header .logo {
    color: var(--green);
    font-family: var(--kallisto);
    font-size: 1.11rem;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
header .logo span {
    color: var(--white);
    padding-left: 6px;
}
header .logo:hover {
    color: var(--blue);
}
header .links a {
    color: var(--white);
    font-family: var(--roboto);
    font-weight: 300;
    text-decoration: none;
    transition: 0.3s;
}
header .links a:hover {
    color: var(--green);
}
header .links a:not(:last-child):after  {
    content: '|';
    margin-left: var(--space-sml);
    margin-right: var(--space-sml);
    color: var(--white);
}
header .menu-open i {
    padding-top: 5px;
    font-size: 2.25rem;
    color: var(--white);
}
@media only screen and (max-width: 950px) {
    header .hide {
        display: block;
    }
    header .links {
        display: none;
    }
}
@media only screen and (max-width: 600px) {
    .logo-img {
        height: 40px;
    }
    header .logo span {
        padding-left: 5px;
    }
}

/* footer ------------------------- */
footer {
    padding: var(--space-lrg) 0;
    background: var(--grey-dark);
    text-align: center;
}
footer .links a, footer .branding a {
    color: var(--white);
    font-family: var(--roboto);
    font-weight: 300;
    text-decoration: none;
    transition: 0.3s;
}
footer .links a:hover, footer .branding a:hover {
    color: var(--green);
}
footer .links a:not(:last-child):after  {
    content: '|';
    margin-left: var(--space-sml);
    margin-right: var(--space-sml);
    color: var(--white);
}
footer .copyright {
    font-family: var(--kallisto);
    font-weight: 400;
    line-height: 1.8em;
    font-size: 0.9rem;
    color: var(--white);
    margin-top: var(--space-sml);
}
footer .copyright span {
    color: var(--green);
}
footer .policies a {
    font-family: var(--roboto);
    font-weight: 300;
    font-size: 0.9rem;
    color: var(--white);
    transition: 0.3s;
    text-decoration: none;
}
footer .policies a:hover {
    color: var(--green);
}
@media only screen and (max-width: 600px) {
    .copyright .hide {
        display: block;
    }
    .copyright {
        margin-top: 0;
    }
    footer .links a:not(:last-child):after  {
        content: initial;
        margin-left: initial;
        margin-right: initial;
        color: var(--white);
    }
    footer .links {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    footer .links a:last-of-type {
        margin-bottom: var(--space-med);
    }
}

/* home hero ------------------------- */
.hero {
    padding-top: 50%;
    width: 100%;
    background: url(/assets/img/home/hero.jpg) no-repeat 50% 0%;
    background-size: cover;
    position: relative;
}
.hero .fade {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 300px;
    width: 100%;
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
}
@media only screen and (max-width: 800px) {
    .hero {
        padding-top: 75%;
    }
    .hero .fade {
        height: 200px;
    }
}

/* home intro ------------------------- */
.intro {
    padding-top: var(--space-med);
}
.assets-grid {
    font-family: var(--kallisto);
    font-weight: 500;
    font-size: 1.11rem;
}
.assets-grid .dot {
    margin: auto;
    margin-bottom: var(--space-xsml);
}
@media only screen and (max-width: 1100px) {
    .assets-grid.grid-4 {
        grid-template-columns: 1fr 1fr;
    }
    .assets-grid .grid-item-d {
        order: 3;
    }
    .assets-grid .grid-item-c {
        order: 4;
    }
}
@media only screen and (max-width: 600px) {
    .intro h1 br {
        display: none;
    }
    .assets-grid {
        font-size: 1rem;
    }
}
@media only screen and (max-width: 501px) {
    .intro {
        padding-top: 0;
    }
}

/* home solutions ------------------------- */
.solutions {
    margin-top: var(--space-xlrg);
}
@media only screen and (max-width: 800px) {
    .solutions .desktop {
        display: none;
    }
    .solutions .hide {
         display: block;
    }
}

/* home about ------------------------- */
.about {
    margin-top: var(--space-xlrg);
}
.about .grid-2 {
    column-gap: var(--space-med);
}

/* home work ------------------------- */
.work {
    margin-top: var(--space-xlrg);
}
.work-grid.grid-3 {
    gap: var(--space-med);
}
.work-grid .grid-item {
    background: var(--teal);
    padding-bottom: calc(var(--space-med)* 1.25);
    border-radius: 20px;
    color: var(--white);
    text-align: center;
    text-decoration: none;
    position: relative;
    margin-bottom: 30px;
    display: block;
}
.work-grid i {
    font-size: 2.5rem;
    margin-bottom: var(--space-xsml);
}
.work-grid .meta {
    padding-left: var(--space-sml);
    padding-right: var(--space-sml);
}
.work-grid .img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-top: 56.25%;
    background: black;
}
.work-grid .line {
    margin-top: var(--space-sml);
    margin-bottom: var(--space-sml);
    border-top: 2px solid var(--blue);
}
.work-grid .type {
    font-family: var(--kallisto);
    font-size: 1.25rem;
    font-weight: 500;
}
.work-grid .cta {
    background: var(--green);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translate(-50%, 0);
    transition: 0.5s;
}
.work-grid .cta:hover {
    background: var(--blue);
}
.work-grid .cta i {
    font-size: 2rem;
    margin-bottom: 0;
}
@media only screen and (max-width: 1100px) {
    .work-grid.grid-3 {
        gap: var(--space-med);
    }
}

/* work carousel ------------------------- */
.work-carousel .slick-list {
	padding: 0 10% 0 0 !important;
}
.work-carousel .grid-item.slick-slide {
    margin-right: var(--space-sml);
    height: 501px;
}
.work-carousel-wrp .prev {
    position: absolute;
    top: 42%;
    left: 0;
    transform: translate(0, -50%);
    background: rgba(0,0,0,0.75);
    color: white;
    font-size: 1.5rem;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
}
.work-carousel-wrp .next {
    position: absolute;
    top: 42%;
    right: 0;
    transform: translate(0, -50%);
    background: rgba(0,0,0,0.75);
    color: white;
    font-size: 1.5rem;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: pointer;
}
@media only screen and (max-width: 800px) {
    .work-carousel .grid-item.slick-slide {
        height: 555px;
    }
}
@media only screen and (max-width: 600px) {
    .work-carousel .grid-item.slick-slide {
        height: 490px;
    }
}
@media only screen and (max-width: 501px) {
    .work-carousel .grid-item.slick-slide {
        margin-right: var(--space-xsml);
        margin-left: var(--space-xsml);
        height: 455px;
    }
    .work-carousel .slick-list {
        padding: 0 0 0 0 !important;
    }
}

/* home digital media ------------------------- */
.digital-media.grid-2 {
    gap: var(--space-med);
}
.digital-media .grid-item {
    margin-top: var(--space-med);
    border-radius: 20px;
    background: var(--grey);
    padding: var(--space-med) var(--space-lrg);
    text-align: center;
    transition: 0.5s;
}
.digital-media .grid-item img {
    height: 100px;
    width: 100px;
    margin-bottom: var(--space-sml);
}
.digital-media .type {
    text-transform: uppercase;
}
.digital-media .title {
    margin: auto;
    max-width: 400px;
    font-family: var(--kallisto);
    font-weight: 600;
    font-size: 1.66rem;
    margin-top: var(--space-xsml);
    border-top: 2px solid var(--green);
    padding-top: var(--space-xsml);
}
.digital-media .desc {
    margin: auto;
    max-width: 400px;
    margin-top: var(--space-med);
}
.digital-media .cta {
    margin-top: var(--space-sml);
}
.digital-media button {
    width: 100%;
    max-width: 400px;
}
@media only screen and (max-width: 1100px) {
    .digital-media.grid-2 {
        gap: var(--space-med);
    }
}
@media only screen and (max-width: 900px) {
    .digital-media.grid-2 {
        grid-template-columns: 1fr;
    }
    .digital-media .grid-item-b {
        margin-top: 0;
    }
}
@media only screen and (max-width: 501px) {
    .digital-media .grid-item {
        padding: var(--space-med);
    }
}

/* podcast ------------------------- */
.podcast {
    margin-top: var(--space-med);
}

/* articles ------------------------- */
.colony_blog_grid_1 .title {
    font-family: var(--kallisto);
    font-size: 1.3rem;
    line-height: 1.5em;
}
.colony_blog_single_1 .summary {
    font-weight: 700;
    font-size: 1.2rem;
}
.colony_blog_single_1 .article strong {
    font-weight: 700;
}
.colony_blog_single_1 .article em {
    font-style: italic;
}
.colony_blog_single_1 blockquote {
    margin-top: var(--space-med);
    margin-bottom: var(--space-med);
    padding: var(--space-med) 0;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
}
.colony_blog_single_1 .article blockquote h3 {
    font-family: var(--kallisto);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.5em;
    margin-top: 0;
}
.colony_blog_single_1 .article blockquote p {
    font-style: italic;
    margin-bottom: 0;
}

/* portfolio ------------------------- */
.portfolio {
    margin-top: var(--space-lrg);
}
@media only screen and (max-width: 501px) {
    .portfolio {
        margin-top: var(--space-med);
    }
}

/* contact ------------------------- */
.contact .hero {
    background: url(/assets/img/contact/contact.png) no-repeat 61% 100%;
    background-size: cover;
    padding-top: 30%;
    margin-bottom: var(--space-med);
}
.contact-grid i {
    font-size: 2.25rem;
}
.contact-grid .grid-item {
    text-decoration: none;
    transition: 0.3s;
}
.contact-grid .grid-item:hover {
    color: var(--green);
}
.form-grid .grid-item-a {
    grid-area: form-a;
}
.form-grid .grid-item-b {
    grid-area: form-b;
}
.form-grid .grid-item-c {
    grid-area: form-c;
}
.form-grid .grid-item-d {
    grid-area: form-d;
}
.form-grid .grid-item-e {
    grid-area: form-e;
}
.form-grid {
    margin-top: var(--space-med);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sml);
    font-size: 0.9rem;
    grid-template-areas: 'form-a form-b' 'form-c form-d' 'form-e form-e';
}
.contact-form .cta {
    text-align: center;
    margin-top: var(--space-sml);
}
.contact-form button {
    min-width: 400px;
}
@media only screen and (max-width: 800px) {
    .contact .hero {
        padding-top: 56.25%;
    }
    .contact-grid.grid-2 {
        row-gap: var(--space-med);
    }
    .form-grid {
        grid-template-columns: 1fr;
        grid-template-areas: 'form-a' 'form-b' 'form-c' 'form-d' 'form-e';
    }
}
@media only screen and (max-width: 501px) {
    .contact-form button {
        min-width: initial;
        width: 100%;
    }
}

/* clockwork CIO ------------------------- */
.clockwork {
    color: var(--white);
    font-family: var(--nunitoSans);
}
.clockwork-hero {
    padding: var(--space-lrg) 0;
}
.clockwork-hero .cogs {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.clockwork-hero .colony_feature {
    z-index: 2;
}
.clockwork-hero .colony_feature .grid-2 {
    grid-template-columns: 400px 1fr;
    column-gap: var(--space-lrg);
}
.clockwork-hero h1 {
    font-family: var(--nunitoSans);
    font-weight: 900;
    font-size: 4.25rem;
    line-height: 1.1em;
}
.clockwork-hero .logo {
    width: 400px;
    height: auto;
}
.clockwork-hero .subtitle {
    margin-top: var(--space-sml);
    text-transform: uppercase;
    font-size: 1.5rem;
}
.cta.spotify {
    padding-top: var(--space-med);
    display: flex;
    gap: var(--space-sml);
}
.cta.spotify.mt-0 {
    padding-top: 0;
}
.cta.spotify a {
    background: var(--black);
    display: flex;
    gap: var(--space-xsml);
    align-items: center;
    justify-content: flex-start;
    padding: var(--space-xsml) calc(var(--space-xsml) * 1.5);
    text-decoration: none;
    color: var(--white);
    border-radius: 15px;
    transform: scale(1);
    transition: 0.3s;
}
.cta.spotify a:hover {
    transform: scale(1.05);
}
.cta.spotify img {
    height: 50px;
    width: auto;
}
.clockwork .colony_tabs_1 .content_wrp {
    border: none;
    background: var(--orange);
}
.clockwork .colony_tabs_1 .tab {
    border: none;
    background: var(--charcoal);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: var(--space-sml);
}
.clockwork .colony_tabs_1 .tab.active {
    background: var(--orange);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.clockwork .colony_tabs_1 .tab_content {
    padding: var(--space-med);
    padding-top: var(--space-lrg);
    padding-bottom: var(--space-xlrg);
}
.clockwork .colony_tabs_1 .tab_content .title {
    font-size: 2rem;
    font-weight: 700;
}
.clockwork .colony_tabs_1 .tab_content p {
    font-size: 1.25rem;
}
.colony_podcast_card_1 {
    background: var(--orangeFaded);
    border: 5px solid var(--white);
    border-radius: 20px;
    color: var(--black);
}
.colony_podcast_card_1 .head {
    padding: var(--space-sml);
}
.colony_podcast_card_1 .head img {
    border-radius: 10px;
}
.colony_podcast_card_1 .episode {
    background: var(--orange);
    color: var(--white);
    font-weight: 700;
    padding: 5px 20px;
    border-radius: 100px;
}
.colony_podcast_card_1 .date {
    font-weight: 700;
}
.colony_podcast_card_1 .play-btn {
    background: var(--black);
    color: var(--white);
    font-weight: 700;
    padding: 5px 20px;
    border-radius: 100px;
}

.spotify-episode {
    padding: var(--space-sml);
    background: var(--orangeDark);
    border-radius: 20px;
}
.spotify-link {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--charcoal);
    color: var(--white);
    text-decoration: none;
}
.spotify-episode .meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
@media only screen and (max-width: 1100px) {
    .clockwork-hero .colony_feature .grid-2 {
        grid-template-columns: 300px 1fr;
        column-gap: var(--space-med);
    }
    .clockwork-hero .logo {
        width: 300px;
        height: auto;
    }
}
@media only screen and (max-width: 1000px) {
    .clockwork .colony_tabs_1 .tabs {
        grid-template-columns: repeat(3, 1fr);
    }
    .clockwork .colony_tabs_1 .tab_content {
        padding: var(--space-sml);
        padding-top: var(--space-med);
        padding-bottom: var(--space-xlrg);
    }
}
@media only screen and (max-width: 950px) {
    .clockwork-hero .colony_feature .grid-2 {
        grid-template-columns: 250px 1fr;
        column-gap: var(--space-med);
    }
    .clockwork-hero h1 {
        font-size: 3.5rem;
    }
    .cta {
        flex-direction: column;
        gap: var(--space-xsml);
    }
}
@media only screen and (max-width: 700px) {
    .clockwork-hero {
        padding-top: var(--space-med);
    }
    .clockwork-hero .colony_feature .grid-2 {
        grid-template-columns: 1fr;
    }
    .clockwork-hero .colony_feature .feature img {
        width: 75%;
        height: auto;
    }
    .cta {
        flex-direction: row;
    }
}
@media only screen and (max-width: 501px) {
    .clockwork-hero .colony_feature .grid-2 {
        grid-template-columns: 1fr;
    }
    .clockwork-hero .colony_feature .feature img {
        width: 75%;
        height: auto;
    }
    .clockwork-hero .logo {
        width: 250px;
        height: auto;
    }
    .clockwork-hero h1 {
        font-size: 2.75rem;
    }
    .clockwork-hero .subtitle {
        font-size: 1.25rem;
    }
    .clockwork-hero .btn-podcast {
        width: 100%;
    }
    .cta {
        flex-direction: column;
    }
    .clockwork .colony_tabs_1 .tabs {
        grid-template-columns: repeat(2, 1fr);
    }
    .podcast .container {
        padding-left: 5px;
        padding-right: 5px;
    }
    .clockwork .colony_tabs_1 .tab_content {
        padding-left: calc(var(--container-padding) - 5px);
        padding-right: calc(var(--container-padding) - 5px);
    }
}