/* colors */
.black {color:#0D000C;}
.grey {color:#666666;}
.white {color:#ffffff;}
.purple {color:#AF42AE;}
.blue {color:#5299D3;}
.teal {color:#1B998B;}
.green {color:#87D68D;}
.red {color:#FD4A5B;}
.orange {color:#FF7F51;}
.yellow {color:#FFFD82;}
.pink {color:#FFBEFE;}

/* fonts */
h1, h2, h3 {
    font-family: 'Lora', serif;
    font-weight:700;
    line-height:1.5; 
    color: #0D000C; 
    margin:0;
    padding:0;
}
h1 { 
    font-size:40px; 
    text-align:center;
    margin:50px 0;
}
h2 { 
    font-size:30px;
    margin:0 0 60px 0;
 }
h3 { 
    font-size:30px;
    font-family: 'Ubuntu', sans-serif;
    margin: 0 0 50px 0;
}

p, .section-pink a { 
    font-size:24px;
    line-height:2;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 300;
    color: #0D000C; 
    margin-bottom:50px;
}
p.warning {
    font-size:18px;
    width:100%;
    padding:20px;
    margin:0;
}
p.warning img {
    width:40px;
    height: auto;
    padding-right:10px;
}
ul {
    list-style: square outside none;
    color:#AF42AE;
}
.section-pink a { 
    text-decoration: underline;
}
.section-pink a:hover { 
    text-decoration: none;
}
.section-pink li {
    margin-bottom:30px;
}
img {
    width: 100%;
    height: auto;
}
.figure-caption {
    font-size:20px;
    line-height:1.5;
    margin-top:20px;
}
/* buttons */
.mybtn {
    background-color: #ffffff;
    border:3px solid #0D000C;
    color:#0D000C;
    display:inline-block;
    text-align: center;
    font-family: 'Lora', serif;
    font-weight: 500;
    font-size:30px;
    padding:15px 25px;
    margin:0 auto;
}

.mybtn, .section-pink a, .thumbnail a{
    transition: 0.5s;
}

.mybtn-purple {
    box-shadow: 5px 5px 0px 0px rgba(175,66,174,1);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(175,66,174,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(175,66,174,1);
}

.mybtn-teal {
    box-shadow: 5px 5px 0px 0px rgba(27,153,139,1);
    -webkit-box-shadow: 5px 5px 0px 0px rgba(27,153,139,1);
    -moz-box-shadow: 5px 5px 0px 0px rgba(27,153,139,1);
}

.mybtn:hover {
    text-decoration:none;
    color: #ffffff;
}

.mybtn-purple:hover {
    background-color:#AF42AE;
}

.mybtn-teal:hover {
    background-color:#1B998B;
}

/* spacing */ 
.sm-pad-tb {
    padding:20px 0;
}
.margin-t-lg {margin-top:50px}
.margin-b-lg {margin-bottom:50px}
.margin-tb-lg {margin:50px 0;}
.margin-t-xs {margin-top:20px;}
.margin-b-xs {margin-bottom:20px;}
.no-marg {margin:0;}
.padding-t-xs {padding-top:20px}
.padding-t-s {padding-top:30px}
.padding-t-lg {padding-top:50px}
.padding-b-lg {padding-bottom:50px}
.padding-tb-lg {padding:70px 0}
.padding-tb-s {padding:30px 0;}
.padding-t-mob-xs {padding-top:20px;}
.padding-lr-s {padding:0 50px;}


/* header */

#title {
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 50px;
    color: #0D000C;
    text-decoration: none;
    transition: 0.2s;
}
.navbar {
    padding:20px 0;
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(13, 0, 12, 1);
    text-decoration: none;
    transition: 0.2s;
    font-size:20px; 
    line-height:30px;
    border-bottom:2px solid #111111;
    width:100%;
    margin-left:0;
    padding:20px;
}
.navbar-light .navbar-nav .nav-link:hover {
    color:#ffffff;
    background: #AF42AE;
    border-bottom:2px solid #ffffff;
}

/* containers */
.main-container {
    width: 100%;
    padding:0;
    margin:0;
    position: relative;
    overflow:hidden;
}
#work-examples h3 {
    font-size:26px;
    margin-bottom:30px;
    padding:30px;
    background: #f7ecf7;
}

.section-pink {
    background-color:#ecd1ec;
}
.thumbnail a:hover {
    opacity: 0.5;
}
.work-item img, .work-item h3 {
    transition: 0.5s;
}
.work-item:hover {
    text-decoration:none;
}
.work-item:hover h3 {
    color: #fff;
    background:#AF42AE !important;
}
.work-item:hover img {
    opacity: 0.5;
    transition: 0.5s;
}
.bg-litmus-grey {
    background: #262524;
    padding:10px;
}

/* shapes */
.headshot {
    position:relative;
    width: 300px;
    height: 300px;
    margin:0 auto;
}
.circle-yellow {
    width: 100px;
    height: 100px;
    background: #FFFD82;
    border-radius: 50%;
    position: absolute;
}
.circle-yellow-outline {
    width: 100px;
    height: 100px;
    border: 2px solid #0D000C;
    border-radius: 50%;
    position: absolute;
}
.circle-red {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background-color:#FD4A5B;
    position:absolute;
    top:10px;
    right:-120px;
}
.circle-yellow-outline {
    width: 100px;
    height: 100px;
    border: 2px dotted #0D000C;
    border-radius: 50%;
    position: absolute;
}
.circle-red-outline {
    width: 195px;
    height: 195px;
    border-radius: 50%;
    border:2px solid #0D000C;
    position:absolute;
    top:15px;
    right:-135px;
}
#circle-a {
    top:150px;
    right:-280px;
}
#circle-a-outline {
    top:150px;
    right:-270px;
}
#circle-b {
    top:160px;
    left:-50px;
}
#circle-b-outline {
    top:155px;
    left:-60px;
}



/* case study pages */
.case-study h1 {
    margin:100px 0 30px;
}
.case-study p {
    margin:0 auto;
    margin-bottom:80px;
    font-weight:bold;
    font-size:32px;
    line-height:2;
    max-width:800px;
}
.case-study .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left:48%;
}
.case-study .circle-outline {
    width: 100px;
    height: 100px;
    border: 1px solid #0D000C;
    border-radius: 50%;
    position: absolute;
    left:49%;
}
.case-study .circle-small {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    left:40%;
}
.case-study .circle-outline-small {
    width: 50px;
    height: 50px;
    border: 1px solid #0D000C;
    border-radius: 50%;
    position: absolute;
    left:41%;
    top:1px;
}
.bg-orange {
    background: #FF7F51;
}
.bg-teal {
    background: #1B998B;
}
.bg-yellow {
    background: #FFFD82;
}
.appliances {
    padding:30px 0;
}
.appliance {
    max-height:150px;
    max-width:150px;
    padding:20px 10px;
    filter: drop-shadow(0px 0px 4px rgba(46, 46, 46, 0.3));
}
.rc-hero-left, .litmus-hero-left, .litmus-weekly-left {
    padding:30px 30px 0; 
    text-align: center;
}
.rc-hero-left {
    background:#DE57AE; 
}
.litmus-hero-left {
    background: #EB7166;
}
.litmus-weekly-left {
    background: #F6DE8D;
}
.rc-hero-right, .litmus-hero-right, .litmus-weekly-right {
    padding:30px 0 0 30px; 
    text-align: left;
}
.rc-hero-right {
    background:#4F90BF; 
}
.litmus-hero-right {
    background: #0379C4;
}
.litmus-weekly-right {
    background: #B4CEE2;
}
.lw-logo {
    padding:50px;
}
.lw-logo-seasonal {
    padding:20px;
    height:250px;
}
.lw-icon {
    padding:30px;
}
.lw-logo img {
    max-width: 250px;
    height:auto;
}
.lw-logo-seasonal img {
    max-width: 400px;
    height:auto;
}

/* footer */
#footer nav {
    margin:60px 0 30px;
    height:50px;
}

#footer nav a {
    margin:0 20px;
    color:#0D000C;
    display:inline-block;
    transition: 0.2s;
}

#footer nav a:hover {
    padding-bottom:10px;
    border-bottom:3px solid #AF42AE;
    text-decoration: none;
}
#footer p.copyright {
    color:#666666;
    font-size: 16px;
    margin:0;
    padding:0;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #010101;
    }
    h1, h2, h3, p, #title {
        color:#f7f7f7;
    }
    p.warning {
        color:#010101;
    }
    .navbar-light .navbar-nav .nav-link {
        color:#007bff;
    }
    .navbar-light .navbar-nav .nav-link:hover {
        color:#007bff !important;
    }
    #work-examples h3 {
        color: #f7f7f7;
        background:#121212 !important;
    }
    .section-pink {
        background-color:#121212;
    }
    .section-pink a, #footer nav a {
        color:#007bff;
    }

    #footer nav a:hover, .navbar-light .navbar-nav .nav-link:hover {
        border-bottom:3px solid #f7f7f7 !important;
    }

}

@media (min-width: 992px) {
    h1 { 
        font-size:60px; 
        text-align:center;
        margin:60px 0;
    }
    h2 { 
        font-size:40px;
        margin:0 0 60px 0;
     }
     #work-examples h3 {
        font-size:36px;
    }
    .margin-t-lg {margin-top:100px}
    .margin-b-lg {margin-bottom:100px}
    .margin-tb-lg {margin:100px 0;}
    .padding-t-s {padding-top:50px}
    .padding-t-lg {padding-top:100px}
    .padding-b-lg {padding-bottom:100px}
 
    ul.navbar-nav {
        position:absolute;
        right:0;
    }
    .nav-item {
        margin:20px;
    }
    .navbar-light .navbar-nav .nav-link {
        background:none;
        padding:0;
        height:40px;
        text-align:center;
        border-bottom:none;
    }
    .navbar-light .navbar-nav .nav-link:hover {
        padding-bottom:10px;
        border-bottom:3px solid #AF42AE;
        background:none;
        color:#0D000C;
    }
    .padding-t-mob-xs {padding-top:0;}

    .rc-hero-left, .litmus-hero-left, .litmus-weekly-left {
        text-align:right;
    }
    .lw-icon {
        padding:50px;
    }
}