styles.css

/* ! normalize.css v1.0.0 | MIT License | git.io/normalize */

/* ==========================================================================
HTML5 display definitions
========================================================================== */

.logoclass {
    max-width: 100px;
    /* float:left  */
}

:root {
    --amt: 10%;
    --neg: -10%;
}

.layerb {
    position: absolute;
    width: 40%;
    left: 30%;
    opacity: 0.95;
}

#blueb {
    z-index: -1;
    top: 25%;
    animation: slide1 10s ease-in-out infinite alternate;
}

#orangeb {
    z-index: -2;
    top: 40%;
    animation: slide2 10s ease-in-out infinite alternate;
}

#greyb {
    z-index: -3;
    top: 55%;
    animation: slide3 10s ease-in-out infinite alternate;
}

@keyframes slide2 {
    to {
        transform: translate(var(--neg), var(--amt));
    }
}

@keyframes slide1 {
    to {
        transform: translate(var(--amt), var(--neg));
    }
}

@keyframes slide3 {
    to {
        transform: translate(var(--amt), var(--amt));
    }
}

.img-fluid {
    animation: hover 2s ease-in-out alternate infinite;
}

@keyframes hover {
    to {
        transform: translateY(2%);
    }
}

/* * Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3. */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
    display: block;
}

/* * Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3. */

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/* * Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices. */

audio:not([controls]) {
    display: none;
    height: 0;
}

/* * Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3, * and Safari 4.
* Known issue:no IE 6 support. */

[hidden] {
    display: none;
}

/* ==========================================================================
Base
========================================================================== */

/* * 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
*    `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
*    user zoom. */

html {
    font-size: 100%;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    -ms-text-size-adjust: 100%;
    /* 2 */
}

html, html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
}

/* * Addresses `font-family` inconsistency between `textarea` and other form
* elements. */

html, button, input, select, textarea {
    font-family: 'Roboto Pro', sans-serif;
}

/* * Addresses margins handled incorrectly in IE 6/7. */

body {
    margin: 0;
    font-family: 'Roboto Pro', sans-serif;
}

/* ==========================================================================
Links
========================================================================== */

/* * Addresses `outline` inconsistency between Chrome and other browsers. */

a:focus {
    outline: thin dotted;
}

/* * Improves readability when focused and also mouse hovered in all browsers. */

a:active, a:hover {
    outline: 0;
}

/*--- MAJOR BOXES */

#professionalEvents, #professionalEvents h1 {
    background-color: #8591c7 !important;
    color: white !important;
}

#projects, #projects h1 {
    background-color: #444E7D;
    color: white;
}

.embed-podcast-ltr-1omp7zq, .embed-podcast-ltr-1d9rbc8 {
    background-color: #0A1341 !important;
}

/*--- IMAGES */

.img-tiny {
    margin-top: 10px;
    float: right;
    /* width:60%; */
}

.card-img-top {
    /* width:100%; */
    /* height:190px; */
    height: 55%;
    object-fit: cover;
}

.imgRw {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
}

/* Create four equal columns that sits next to each other */

.imgColumnRw {
    flex: 25%;
    /* margin: 50px 0px; */
    max-width: 25%;
    padding: 4px 34px;
}

.imgColumnRw img {
    margin-top: 8px;
    vertical-align: middle;
    width: 100%;
}

/* Responsive layout - makes a two imgColumnRw-layout instead of four imgColumnRws */

@media screen and (max-width: 800px) {
    .imgColumnRw {
        flex: 50%;
        max-width: 50%;
    }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */

@media screen and (max-width: 600px) {
    .col-4, .col-5 {
        min-width: 80%;
        /* float:left; */
        text-align: center;
    }
    .imgRw {
        margin: 0;
        padding: 0;
    }
    .imgColumnRw {
        min-width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }
    .col-4 img, .col-5 img, .buttoning {
        /* max-width:80%; */
        /* margin:0 auto; */
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .column {
        flex: 100%;
        max-width: 100%;
    }
    #consultingText {
        font-family: 'Poppins', sans-serif;
        letter-spacing: 0em;
        font-size: 1.8em !important;
        width: 100%;
        padding: 10px;
        /* position: absolute; */
        z-index: 10 !important;
    }
    .layera {
        position: absolute;
        width: 40%;
        left: 30%;
    }
    .layerb {
        position: absolute;
        width: 30%;
        right: 35%;
    }
    #bluea {
        z-index: 3;
        animation: none !important;
    }
    #orangea {
        z-index: 2;
        top: 20%;
        animation: hover 5.1s ease-in-out infinite alternate;
    }
    #greya {
        z-index: 1;
        top: 40%;
        animation: hover 4.9s ease-in-out infinite alternate;
    }
    @keyframes hover {
        to {
            transform: translateY(2%);
        }
    }
    #blueb {
        z-index: 3;
        animation: slide1 5s ease-in-out infinite alternate;
    }
    #orangeb {
        z-index: 2;
        top: 20%;
        animation: slide2 5s ease-in-out infinite alternate;
    }
    #greyb {
        z-index: 1;
        top: 40%;
        animation: slide3 5s ease-in-out infinite alternate;
    }
    @keyframes slide2 {
        to {
            transform: translate(var(--neg), var(--amt));
            opacity: 0.3;
        }
    }
    @keyframes slide1 {
        to {
            transform: translate(var(--amt), var(--neg));
            opacity: 0.3;
        }
    }
    @keyframes slide3 {
        to {
            transform: translate(var(--amt), var(--amt));
            opacity: 0.3;
        }
    }
}

#back-consulting:hover {
    cursor: pointer;
}

.hrLine {
    float: left;
    width: 12%;
    height: 13px;
    background-color: #0db3c9
}

.hrLine2 {
    float: left;
    width: 12%;
    height: 13px;
    background-color: #fd9013;
}

.hrrLine {
    float: left;
    width: 12%;
    height: 8px;
    background-color: #0db3c9
}

.hrrLine2 {
    float: left;
    width: 12%;
    height: 8px;
    background-color: #fd9013;
}

.imgBig {
    margin-top: 100px;
    max-width: 100%;
}

.credit {
    color: rgb(94, 94, 94);
}

/* --- FONT */

/* * Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5, * and Chrome. */

h1 {
    font-size: 2em;
    margin: 0.67em 0;
    color: #353535;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

.bigNumber, .bigNumberContent {
    font-size: 5em;
    font-weight: 700;
    color: #0db3c9;
}

/* * Addresses styling not present in IE 7/8/9, Safari 5, and Chrome. */

abbr[title] {
    border-bottom: 1px dotted;
}

/* * Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome. */

b, strong {
    font-weight: bold;
}

blockquote {
    margin: 1em 40px;
}

/* * Addresses styling not present in Safari 5 and Chrome. */

dfn {
    font-style: italic;
}

/* * Addresses styling not present in IE 6/7/8/9. */

mark {
    background: #ff0;
    color: #000;
}

/* * Addresses margins set differently in IE 6/7. */

p, pre {
    margin: 1em 0;
}

/* * Corrects font family set oddly in IE 6, Safari 4/5, and Chrome. */

code, kbd, pre, samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/* * Improves readability of pre-formatted text in all browsers. */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* * Addresses CSS quotes not supported in IE 6/7. */

q {
    quotes: none;
}

/* * Addresses `quotes` property not supported in Safari 4. */

q:before, q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/* * Prevents `sub` and `sup` affecting `line-height` in all browsers. */

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

/* ==========================================================================
Lists
========================================================================== */

/* * Addresses margins set differently in IE 6/7. */

dl, menu, ol, ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

/* * Addresses paddings set differently in IE 6/7. */

menu, ol, ul {
    padding: 0 0 0 40px;
}

.logoConsulting {
    float: left;
    max-width: 50px;
    margin-left: 10px;
    margin-top: 5px;
    transition: transform .3s ease-in-out;
}

.logoConsulting:hover {
    transform: rotate(-180deg);
}

/* * Corrects list images handled incorrectly in IE 7. */

nav ul, nav ol {
    list-style: none;
    list-style-image: none;
}

#nav-toggle {
    display: none;
}

.responsive-bar {
    display: none;
}

.dark, .dark a {
    background-color: #313131 !important;
    color: white !important;
}

.dark a:hover {
    color: #0db3c9;
}

.navv {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    text-align: right;
    box-sizing: border-box;
    background-color: white;
    z-index: 10;
    font-family: 'Roboto Pro', sans-serif;
}

.navv>ul {
    width: 80%;
    margin: 0 auto;
    padding: 0;
    float: right;
}

.navv>ul>li {
    list-style: none;
    display: inline-block;
}

.navv>ul>li>a:hover {
    color: #ffaa17;
}

.navv>ul>li>a {
    color: #262626;
    text-decoration: none;
    text-transform: uppercase;
    /*for capitalisation of letters */
    line-height: 60px;
    padding: 5px 20px;
    transition: 0.5s;
}

@media (max-width: 990px) {
    .responsive-bar {
        display: none;
    }
    #nav-toggle {
        display: block;
    }
    .navv {
        padding: 0;
    }
    .navv {
        display: none;
        height: 60px;
        padding: 0;
    }
    .navv ul {
        position: absolute;
        width: 100%;
        top: 60px;
        left: 0;
        background: green;
        float: none;
        /*    display: none;*/
    }
    .navv ul.active {
        display: block;
    }
    .navv ul li {
        width: 100%;
        /*      display:block;*/
    }
    .navv ul li a {
        display: block;
        padding: 0;
        width: 100%;
        text-align: center;
        line-height: 30px !important;
        color: blue;
    }
    .navv>ul {
        width: 100%;
        display: none;
    }
    .navv>ul>li {
        display: block;
        text-align: center;
    }
    .active {
        display: block;
    }
}

/* ==========================================================================
Embedded content
========================================================================== */

/* * 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7. */

img {
    border: 0;
    /* 1 */
    -ms-interpolation-mode: bicubic;
    /* 2 */
}

/* * Corrects overflow displayed oddly in IE 9. */

svg:not(:root) {
    overflow: hidden;
}

/* ==========================================================================
Figures
========================================================================== */

/* * Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11. */

figure {
    margin: 0;
}

/* ==========================================================================
Forms
========================================================================== */

/* * Corrects margin displayed oddly in IE 6/7. */

form {
    margin: 0;
}

/* * Define consistent border, margin, and padding. */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/* * 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7. */

legend {
    border: 0;
    /* 1 */
    padding: 0;
    white-space: normal;
    /* 2 */
    *margin-left: -7px;
    /* 3 */
}

/* * 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5, *    and Chrome.
* 3. Improves appearance and consistency in all browsers. */

button, input, select, textarea {
    font-size: 100%;
    /* 1 */
    margin: 0;
    /* 2 */
    vertical-align: baseline;
    /* 3 */
    *vertical-align: middle;
    /* 3 */
}

/* * Addresses Firefox 3+ setting `line-height` on `input` using ` !important` in
* the UA stylesheet. */

button, input {
    line-height: normal;
}

/* * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
*    and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
*    `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
*    Known issue:inner spacing remains in IE 6. */

button, html input[type="button"],
/* 1 */

input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
    *overflow: visible;
    /* 4 */
}

/* * Re-set default cursor for disabled elements. */

button[disabled], input[disabled] {
    cursor: default;
}

/* * 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
*    Known issue:excess padding remains in IE 6. */

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
    *height: 13px;
    /* 3 */
    *width: 13px;
    /* 3 */
}

/* * 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
*    (include `-moz` to future-proof). */

input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    /* 2 */
    box-sizing: content-box;
}

/* * Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X. */

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/* * Removes inner padding and border in Firefox 3+. */

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* * 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers. */

textarea {
    overflow: auto;
    /* 1 */
    vertical-align: top;
    /* 2 */
}

/* ==========================================================================
Tables
========================================================================== */

/* * Remove most spacing between table cells. */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
Global Styles
========================================================================== */

a {
    color: #353535;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

a:hover, a:focus {
    color: #ffaa17;
    text-decoration: none;
}

#about p {
    font-size: 1.3em;
    line-height: 1.4em;
}

.aboutBox {
    padding-left: 10%;
    padding-right: 10%;
}

p {
    /* color: #8c9398; */
    word-spacing: 1px;
    line-height: 25px;
    font-size: 1em;
    font-family: 'Roboto', 'Roboto Pro', sans-serif;
}

h1, h1 {
    font-family: 'Montserrat';
}

h2 {
    font-size: 15px;
    color: #353535;
    text-transform: uppercase;
    font-weight: bold;
}

/* h2::after {
    content: " ";
    border: solid 2px #ffaa17;
    display: block;
    width: 35px;
    margin: 25px auto;
} */

#projectsGithub a {
    font-size: 2em;
    text-align: center;
    color: white;
    font-family: 'Roboto', 'Roboto Pro', sans-serif;
}

#projectsGithub a:hover {
    color: orange;
}

.section-padding {
    padding: 90px 0 100px
}

.dark-bg {
    background: #f3f5f8;
}

.light-bg {
    background-color: #fff;
}

.dark-box {
    background: #f3f5f8;
    -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
    -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
}

.light-box {
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
    -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
    padding: 20px 0;
}

.light-box:hover, .light-box:focus {
    -webkit-box-shadow: 0px 3px 0px 0px #ffaa17;
    -moz-box-shadow: 0px 3px 0px 0px #ffaa17;
    box-shadow: 0px 3px 0px 0px #ffaa17;
}

.box-hover {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}

.box-hover:hover, .box-hover:focus {
    transform: translate(0, -15px);
    -webkit-transform: translate(0, -15px);
    -ms-transform: translate(0, -15px);
}

.wrapper {
    height: 650px;
}

.nopadding {
    padding: 0;
}

.inner {
    padding-top: 170px;
}

/* ==========================================================================
Navigation
========================================================================== */

nav {
    background-color: #242830;
    margin-top: -1px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    color: rgba(255, 255, 255, 0.6);
    display: block;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.2);
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    padding-left: 0;
    position: relative;
}

nav ul li:last-child {
    border: none;
}

nav ul li a {
    color: rgba(255, 255, 255, 0.6);
    display: block;
    padding: 20px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    padding-left: 0;
    position: relative;
}

nav ul li a:hover, nav ul li a:focus {
    text-decoration: none;
    color: rgba(255, 255, 255, 1);
}

#nav-toggle {
    position: absolute;
    right: 15px;
    top: 0;
}

#nav-toggle {
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -o-border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #fff;
    position: absolute;
    display: block;
    content: '';
}

#nav-toggle span:before {
    top: -10px;
}

#nav-toggle span:after {
    bottom: -10px;
}

#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: translateY(-10px) rotate(-45deg);
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    top: 10px;
}

.navicon {
    position: relative;
    height: 26px;
}

.indicator {
    position: absolute;
    right: 0 !important;
}

.pull {
    display: none;
}

/* ==========================================================================
CONSULTING
========================================================================== */

#consulting {
    background-color: #303030;
    color: white;
}

.imgBig2 {
    margin-top: -100px;
    width: 50%;
    z-index: 1 !important;
}

#consultingText {
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0em;
    font-size: 4.8em;
    width: 100%;
    padding: 10px;
    /* position: absolute; */
    z-index: 10 !important;
}

.hr-text {
    line-height: 1em;
    position: relative;
    outline: 0;
    /* font-size:3em; */
    border: 0;
    color: white !important;
    /* background-color:none; */
    text-align: center;
    height: 3em;
    opacity: 1;
}

.hr-text:before {
    content: "";
    background: #c5c5c5;
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
}

.hr-text:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 2em;
    padding: 0 0.5em;
    line-height: 1.5em;
    color: white !important;
    background-color: #303030;
}

.companyImagesBox {
    background-color: #383838;
    border-radius: 15px;
}

#contactUsWork {
    background-color: #1F1F1F !important;
}

#contactUsWork .hr-text:after {
    background-color: #1F1F1F !important;
}

.gray {
    color: rgb(82, 82, 82);
}

.blueBox {
    width: 100%;
    height: 210px;
    border-radius: 15px;
    /* background-color:#2d4f8f; */
}

.greyBox {
    width: 100%;
    padding: 20px;
    /* padding: 20% 0; */
    /* height:300px; */
    border-radius: 15px;
    background-color: rgb(63, 63, 63);
}

#ourWork p {
    color: grey;
}

/* ==========================================================================
inception
========================================================================== */

.inception {
    /* background: url('../img/header1.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover; */
    height: 100vh;
}

.darkIncept {
    color: white !important;
}

.inception h1 {
    font-size: 5em;
    letter-spacing: 12px;
    color: black;
    margin: 10px;
    font-weight: 700;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
}

.inception h1 span {
    color: #a1a9b0;
    display: inline-block;
}

.inception p {
    letter-spacing: 1px;
    color: black;
    font-size: 18px;
    font-size: 1.4em;
    font-family: 'Roboto', "Helvetica Neue", Helvetica, sans-serif;
}

.learn-more-btn {
    background: #45b2b5;
    padding: 5px 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    -webkit-box-shadow: 0px 3px 0px 0px #247578;
    -moz-box-shadow: 0px 3px 0px 0px #247578;
    box-shadow: 0px 3px 0px 0px #247578;
    margin-top: 10px;
    /*    margin-top:70px;*/
    /*    margin: 20px 0 20px;*/
    font-weight: bold;
}

.learn-more-btn:hover, .learn-more-btn:focus {
    background: #35999c;
    color: #fff;
}

/* ==========================================================================
FAQ
========================================================================== */

#accordion .card {
    width: 100%;
    /*  background-color: #a0d2d9;*/
    box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0);
    padding: 0px;
    margin: 0px;
}

#accordion div {
    margin: 0px;
    padding: 0px;
}

#accordion .card-header {
    margin: 0px;
}

#accordion .card-body {
    margin-left: 15%;
    margin-right: 15%;
    width: 70%;
    background-color: #a0d2d9;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.collapsed {
    color: black;
}

.collapsed:hover {
    text-decoration: none;
}

#accordion a {
    color: #0db3c9;
}

/* ==========================================================================
Events
========================================================================== */

.upcomingEvent {
    height: 270px;
    background-color: aliceblue;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 10px;
}

.upcomingEvent img {
    float: right;
    max-width: 150px;
}

.upcomingEvent h1 {
    font-size: 20px;
    margin: 0px;
    padding: 0px;
    text-align: left;
}

.upcomingEvent h3 {
    font-size: 22px;
    margin: 5px;
    padding: 0px;
    text-align: left;
}

.upcomingEvent a {
    margin: 0px;
    padding: 0px;
}

.upcomingEvent p {
    font-size: 14px;
    margin: 0px !important;
    padding: 0px;
    color: dimgrey;
}

.upcomingEvent .upcomingEventName {
    margin: 10px;
    font-size: 20px;
    padding: 0px;
    color: black;
    font-weight: 700;
}

.events {
    background: #fff;
}

.events p {
    margin: 50px 0 0;
}

h1.arrow {
    font-size: 15px;
    /*    text-transform: uppercase;*/
    color: #353535;
    letter-spacing: 1px;
    /*    background: url('../img/h1-bg.png') no-repeat center bottom;*/
    /*    padding-bottom: 30px;*/
    font-weight: bold;
    /*    color: #ffaa17;*/
    font-size: 2em;
}

#workshops, #workshops h1 {
    background-color: #192666;
    color: white;
}

#datahacks, #datahacks h1 {
    background-color: #0A1341;
    color: white;
}

.modal-title {
    font-size: 22px;
    font-weight: 700;
}

.modalImg {
    float: left;
    max-width: 200px;
}

.date_new {
    float: right;
    margin-right: 0px;
    margin-left: 5px;
    background-color: #59c6c9;
    color: #fff;
    padding: 1em;
}

.date_new span {
    display: block;
    text-align: center;
}

.date_new .day {
    font-weight: 800;
    font-size: 22px;
    /*  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);*/
}

.date_new .month {
    text-transform: uppercase;
    font-weight: 700;
}

.date_new .month, .date .year {
    font-size: 10px;
}

.text-card {
    /*    position: relative;*/
    max-width: 300px;
    height: 470px;
    margin: 0px;
    padding: 10px 0px 20px 0px;
    border-radius: 10px;
    font-weight: 300;
    font-style: normal;
    font-size: 1em;
    line-height: 1.5;
    color: #303336;
    background-color: #fff;
    box-shadow: 0 40px 40px -20px rgba(0, 0, 0, 0.27);
}

.text-card .author-section {
    position: relative;
    display: flex;
    height: 40px;
    margin-top: 20px;
}

.text-card p {
    margin: 20px;
}

.text-card .author-avator {
    width: 40px;
    height: 40px;
    border-radius: 40px;
    object-position: center;
    object-fit: cover;
    margin-left: 20px;
}

.text-card .author-name {
    position: relative;
    display: inline-block;
    height: fit-content;
    font-weight: 700;
    font-size: .875em;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #000;
    transition: 250ms;
}

.text-card .author-avator-link {
    margin-right: 20px;
    border-radius: 40px;
}

.text-card .author-name-link {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: fit-content;
}

.text-card p {
    padding: 50px 0;
    line-height: 1.75;
    font-weight: 300;
    color: #7b8591;
}

.text-card button {
    padding: 10px 25px;
    border: 1px solid #ebebeb;
    border-radius: 50px;
    font-weight: 400;
    font-style: normal;
    font-size: .875em;
    line-height: 1.5;
    letter-spacing: 1px;
    color: #303336;
    background-color: #fff;
    cursor: pointer;
    transition: 300ms;
}

.text-card button:hover {
    border: 1px solid #bebebe;
}

@media only screen and (max-width: 425px) {
    .text-card {
        width: 100%;
        height: auto;
    }
}

/* ==========================================================================
Features
========================================================================== */

.features-wrapper, .board-wrapper {
    margin: 70px 0 0;
}

.shadow {
    text-shadow: rgb(55, 181, 161) 1px 1px, rgb(55, 181, 161) 2px 2px, rgb(55, 181, 161) 3px 3px, rgb(55, 181, 161) 4px 4px, rgb(55, 181, 161) 5px 5px, rgb(55, 181, 161) 6px 6px, rgb(55, 181, 161) 7px 7px, rgb(55, 181, 161) 8px 8px, rgb(55, 181, 161) 9px 9px, rgb(55, 181, 161) 10px 10px, rgb(55, 181, 161) 11px 11px, rgb(55, 181, 161) 12px 12px, rgb(55, 182, 162) 13px 13px, rgb(55, 183, 163) 14px 14px, rgb(56, 184, 164) 15px 15px, rgb(56, 185, 165) 16px 16px, rgb(56, 186, 166) 17px 17px, rgb(57, 187, 167) 18px 18px, rgb(57, 188, 168) 19px 19px, rgb(57, 189, 169) 20px 20px, rgb(58, 191, 170) 21px 21px, rgb(58, 192, 171) 22px 22px, rgb(58, 193, 172) 23px 23px, rgb(59, 194, 173) 24px 24px, rgb(59, 195, 174) 25px 25px, rgb(59, 196, 175) 26px 26px, rgb(60, 197, 176) 27px 27px, rgb(60, 198, 177) 28px 28px, rgb(60, 199, 178) 29px 29px, rgb(61, 201, 179) 30px 30px;
}

.icon {
    height: 175px;
    width: 175px;
    line-height: 175px;
    max-width: 100%;
    background: #ffaa17;
    border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: block;
    color: #fff;
    font-size: 55px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin: 0 auto 50px;
}

/* ==========================================================================
aboutImg Section
========================================================================== */

.aboutImg {
    width: 50%;
    /*    background: #f3f5f8;*/
    float: left;
    height: 100%;
    /*
    box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0, 0, 0, 0.1);
*/
    z-index: 1;
}

.fluid-white {
    width: 50%;
    background: #fff;
    float: right;
    height: 100%;
    z-index: 2;
}

.responsive-services {
    position: relative;
}

.explore-button {
    color: #0db3c9;
    font-weight: 700;
}

/* ==========================================================================
Talent Day Form
========================================================================== */

#formSection {
    background: url('../img/blank_bg.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 50px 0;
}

.formBox {
    background-color: white;
    border-radius: 15px;
    width: 40%;
    /* margin: 0 auto; */
}

#talentDay input {
    /* font-size:20px; */
    /* width: 80%; */
    /* padding: 12px 20px; */
    /* margin: 8px 0; */
    /* box-sizing: border-box; */
}

/* ==========================================================================
Swag
========================================================================== */

.swag {
    background: url('../img/blank_bg.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 50px 0;
}

#boardBox {
    background: url('../img/blank_bg.png') center center;
}

.hrbig {
    background: url('../img/blank_bg.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 20px 0;
}

.hrsmall {
    width: 100%;
    height: 7px;
    background-color: white;
}

.swag h1 {
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.swag h1 span {
    display: block;
    font-size: 25px;
    margin-top: 20px;
}

.swag a {
    color: white;
}

.swag a:hover {
    color: #f7cb52;
}

.down-arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #58A2B9;
    display: inline-block;
    margin: 10px auto 20px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

.down-arrow-btn:hover, .down-arrow-btn:focus {
    color: #fff;
    background: #387E93;
}

/* ==========================================================================
Portfolio
========================================================================== */

.effects {
    padding-left: 15px;
}

.effects .img {
    position: relative;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.effects .img:nth-child(n) {
    margin-right: 5px;
}

.effects .img:first-child {
    margin-left: -15px;
}

.effects .img:last-child {
    margin-right: 0;
}

.effects .img img {
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
}

.overlay {
    display: block;
    position: absolute;
    z-index: 20;
    padding: 0px 20px 20px 20px;
    background: rgba(100, 194, 158, 0.8);
    overflow: hidden;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
}

a.close-overlay {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 45px;
    height: 45px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 45px;
    text-align: center;
    background-color: #000;
    cursor: pointer;
}

a.close-overlay.hidden {
    display: none;
}

a.expand {
    display: block;
    position: absolute;
    z-index: 100;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 30px;
}

.overlay-effect .img i {
    font-size: 30px;
}

.overlay-effect .overlay {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.overlay-effect .overlay a.expand {
    left: 0;
    right: 0;
    bottom: 47%;
    margin: 0 auto -30px auto;
}

.overlay-effect .img.hover .overlay {
    height: 100%;
    opacity: 1;
}

.img img {
    width: -webkit-calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -moz-transition: opacity 0.35s, -moz-transform 0.35s;
    -o-transition: opacity 0.35s, -o-transform 0.35s;
    -webkit-transform: translate3d(-40px, 0, 0);
    transform: translate3d(-40px, 0, 0);
    -ms-transform: translate3d(-40px, 0, 0);
}

.img:hover img {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(-40px, 0, 0);
}

.designs {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
}

/* ==========================================================================
Subscribe
========================================================================== */

.airplane {
    max-width: 70px;
}

.subscribe {
    /*    background: url('../img/keyboard-bg.jpg') no-repeat center center;*/
    /*
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 120px 0 140px;
*/
    background-color: #08133F;
    /* background-color:#08133F;
    background: rgb(25,25,25);
background: linear-gradient(0deg, rgba(25,25,25,1) 0%, rgba(40,40,40,1) 35%, rgba(40,40,40,1) 100%); */
}

.subscribe h1 {
    color: #fff;
}

.subscribe h2 {
    color: #fff;
    text-transform: none;
    font-size: 1.3em;
    font-weight: 400;
}

.subscribe h1 span {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
    margin-top: 20px;
    letter-spacing: 1px;
}

.subscribe input[type=text] {
    background-color: rgba(255, 255, 255, 0.1);
    border: solid 1px #fff;
    padding: 20px;
    width: 30%;
    color: #fff;
}

.subscribe input[type=submit] {
    background: #59c6c9;
    border: solid 1px #59c6c9;
    padding: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
}

.subscribe input[type=submit]:hover {
    background: #45b2b5;
    border: solid 1px #45b2b5;
    color: #fff;
}

/* ==========================================================================
Event Cards
========================================================================== */

.container-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 10px 0 80px;
}

.card {
    width: 300px;
    margin: 20px;
    background-color: white;
    box-shadow: 0 7px 10px 0 rgba(0, 0, 0, 0.5);
}

.card:hover .card__caption {
    top: 50%;
    transform: translateY(-50%);
}

.card:hover .card__image {
    transform: translateY(-10px);
}

.card:hover .card__thumb::after {
    top: 0;
}

.card:hover .card__snippet {
    margin: 20px 0;
}

.card__thumb {
    position: relative;
    max-height: 400px;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .card__thumb {
        max-height: 470px;
    }
}

.card__thumb::after {
    position: absolute;
    top: 0;
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 80%, rgba(255, 255, 255, 0) 100%);
    transition: .3s;
}

@media (min-width: 1024px) {
    .card__thumb::after {
        top: calc(100% - 140px);
    }
}

.card__image {
    transition: .5s ease-in-out;
    width: 100%;
}

.card__caption {
    position: absolute;
    top: 50%;
    z-index: 1;
    padding: 0 20px;
    color: white;
    transform: translateY(-50%);
    text-align: center;
    transition: .3s;
}

@media (min-width: 1024px) {
    .card__caption {
        top: calc(100% - 120px);
        transform: unset;
    }
}

.card__title {
    display: -webkit-box;
    max-height: 80px;
    overflow: hidden;
    font-family: 'Roboto Pro', serif;
    color: white;
    font-size: 24px;
    line-height: 27px;
    text-shadow: 0px 1px 5px black;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.card__snippet {
    display: -webkit-box;
    max-height: 150px;
    margin: 20px 0;
    overflow: hidden;
    font-family: 'Roboto Pro', sans-serif;
    color: white;
    font-size: 14px;
    line-height: 20px;
    text-overflow: ellipsis;
    transition: .5s ease-in-out;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

@media (min-width: 1024px) {
    .card__snippet {
        margin: 60px 0;
    }
}

.buttoning {
    display: inline-block;
    padding: 7px 13px;
    color: black;
    letter-spacing: 1px;
    background-color: white;
    border-radius: 15px;
    font-family: 'Roboto Pro', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s;
}

#socialEvents .buttoning {
    background-color: white;
    color: #68719B;
}

#socialEvents, #socialEvents h1 {
    background-color: #68739e;
    color: white;
}

#socialEvents .buttoning:hover {
    background-color: #0A1341;
    color: white;
}

.buttoning:hover {
    color: white;
    background-color: #0A1341;
}

.btn-orange {
    color: white;
    /* border: 1px solid white; */
    background-color: #fd9013;
    border-radius: 20px;
    font-family: 'Roboto Pro', sans-serif;
    font-size: 14px;
    text-decoration: none;
    transition: .3s;
}

.btn-orange:hover {
    color: white;
    /* border: 1px solid white; */
    background-color: #59c6c9;
}

.card__button {
    display: inline-block;
    padding: 5px 10px;
    color: black;
    letter-spacing: 1px;
    border: 1px solid black;
    font-family: 'Roboto Pro', sans-serif;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    transition: .3s;
}

.card__button:hover {
    color: white;
    border: 1px solid white;
    background-color: #59c6c9;
}

.card__snippet a {
    color: #59c6c9;
}

.date {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #59c6c9;
    color: #fff;
    padding: 1em;
}

.date span {
    display: block;
    text-align: center;
}

.date .day {
    font-weight: 800;
    font-size: 28px;
    /*  text-shadow: 2px 3px 2px rgba(0, 0, 0, 0.18);*/
}

.date .month {
    text-transform: uppercase;
    font-weight: 700;
}

.date .month, .date .year {
    font-size: 12px;
}

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

.shiny-cta {
    background-color: #212222;
    padding: 70px 0;
}

.shiny-btn {
    display: inline-block;
    padding: 25px 40px;
    color: #fff;
    border: solid 1px #fff;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.shiny-btn:hover, .shiny-btn:focus {
    color: #59c6c9;
    border: solid 1px #59c6c9;
    /*
     color:black;
    background-color:white;
*/
}

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

.boardText h2::after {
    content: "";
    border: 0px;
    display: block;
    width: 0px;
    margin: 0px;
}

.hmtest {
    background-color: purple;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    right: 0;
    background-color: #fff;
    overflow: hidden;
    transition: .5s ease;
}

.containerBoard {
    position: relative;
    color: black;
}

#board h1, h2 {
    color: white;
}

.boardDetailTitle {
    color: grey;
    font-size: .8em;
}

.card-text {
    font-size: .9em;
}

.card-body h2 {
    color: black;
    line-height: none;
}

.card-body span {
    line-height: none;
}

.board img {
    margin-bottom: 10px;
}

.containerBoard:hover .overlay {
    height: 100%;
}

.boardText p {
    color: black;
    font-size: 12px;
    /*
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
*/
}

ul.social-buttons {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.social-buttons li {
    display: inline-block;
    margin-right: 10px;
}

ul.social-buttons li:last-child {
    margin-right: 0;
}

.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #242830;
    display: inline-block;
    color: #fff;
    font-size: 17px;
    line-height: 40px;
    text-align: center;
}

.social-btn:hover, .social-btn:focus {
    background: #ffaa17;
    color: #fff;
}

.social {
    margin-top: 25px
}

/* --- IMAGES */

.wrap {
    position: relative;
}

.wrap:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(150, 42, 42, 0.5);
    z-index: 999;
}

.img-move-wrapper {
    /* border:1px solid red; */
    position: relative;
    overflow: hidden;
    /* max-width:1140px; */
    margin: 0 auto;
}

/* Overlap the images on tablets and up */

@media (min-width:769px) {
    .img-move {
        position: absolute;
        width: 68%;
    }
    .img-move-1 {
        left: 0;
    }
    .img-move-2 {
        right: 0;
        bottom: 0;
    }
}

/* ==========================================================================
Contact
========================================================================== */

#contact a, .contactBox a {
    color: black;
    font-weight: 700;
}

.fa-facebook {
    padding: 10px 10px !important;
}

.sm {
    padding: 10px 10px;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    background-color: white;
    color: #212222;
    border-radius: 100%;
    transition: .5s;
    margin-right: 10px;
}

.fa-facebook:hover {
    background-color: #3b5998;
    color: white;
}

.fa-envelope:hover, .fa-youtube:hover {
    background-color: #a21616;
    color: white;
}

.fa-discord:hover {
    background-color: rgb(31, 31, 181);
    color: white;
}

.fa-spotify:hover {
    background-color: rgb(28, 184, 28);
    color: white;
}

.fa-medium-m:hover {
    background-color: gainsboro;
    color: black;
}

.fa-instagram:hover {
    background: linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
    color: white;
}

.up-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #59c6c9;
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;
    line-height: 46px;
    text-align: center;
    position: absolute;
    top: -26px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.up-btn:hover, up-btn:focus {
    color: #fff;
    background: #45b2b5;
}

.contact-details {
    margin: 70px 0;
}

.contact-details h2 {
    font-size: 20px;
}

.contact-details h2 span {
    display: block;
    color: #ffaa17;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin-top: 15px;
}

.contact-wrap {
    position: relative;
}

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

footer a {
    color: #a1a9b0;
}

footer {
    background-color: #242830;
    padding: 40px 0 30px;
}

footer p {
    color: #fff;
}

ul.legals {
    list-style: none;
    color: #fff;
    line-height: 25px;
}

ul.legals li {
    display: inline-block;
}

ul.legals li::after {
    content: " |";
}

ul.legals li:last-child::after {
    content: "";
}

.legals {
    text-align: left;
}

.credit {
    text-align: right;
}

/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */

#servicesSlider {
    margin-top: 70px;
}

ul.slides li {
    margin-bottom: 20px;
}

/* ==========================================================================
Waypoints
========================================================================== */

.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 {
    visibility: hidden;
}

.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight {
    visibility: visible;
}

.delay-05s {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}

.delay-1s {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.wp3 {
    background: url('../img/aboutActivitySmall.png') no-repeat center center;
    background-position: 20px 10px;
    height: 100%;
}

.post-date {
    border-color: orange;
    border: 3px;
    /*    background-color:orange;*/
    /*
  position: absolute;
  top: 0;
  right: 0;
  background-color: #59c6c9;
  color: #fff;
  padding: 1em;
*/
}

.lin {
    font-size: 10px;
    color: grey;
}

.lin:hover {
    color: grey;
}

/* ==========================================================================
Countdown
========================================================================== */

:root {
    --c1: #8591c7;
    --c2:  #68739e;
    --c3: #444E7D;
    --c4: #192666;
    --c5: #0A1341;
}

.content-sec {
    padding: 2vh 0 4vh;
    font-weight: bold;
    color: white;
    margin-top: 1vh;

}

.lg-wrapper {
    width: 50%;
    margin: auto;
    text-align: center;
}

#countdown-sec {
    background-color: var(--c1);
    font-size: 3vh;
    font-weight: 400;
}

#countdown-sec #countdown-timer {
    font-size: 4vh;
    font-weight: bold;
}

#venue-sec {
    background-color: var(--c2);
    font-size: 3vh;
}

#venue-sec p {
    font-size: 2vh;
}

#venue-sec img {
    border-radius: 5px;
}

#vendor-sec {
    font-size: 3vh;
    background-color: var(--c3);
}

#reg-sec {
    background-color: var(--c4);
    font-size: 3vh;
}

/* ==========================================================================
Calendar
========================================================================== */

#cal-center {
    margin: 10vh auto;
    width: 70%;
    min-height: 35vh;
}

#cal-title {
    font-size: 5vh;
    color: black;
    font-weight: bold;
}

#card-array {
    display: grid;
    grid-template-columns: repeat(3, 32%);
    grid-auto-rows: 1fr;
    gap: 1rem;
    justify-content: space-between;
    width: 100%;
}

.c-card {
    padding: 1% 5% 10%;
    border-radius: 10px;
    text-align: left;
    color: black;
    width: 100%;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    transition: 0.3s;
    position: relative;
    animation: animatebottom 1s;
    animation-fill-mode: both;
}

@keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
}

.c-card:nth-child(1) { animation-delay: 0.25s }
.c-card:nth-child(2) { animation-delay: 0.5s }
.c-card:nth-child(3) { animation-delay: 0.75s }
.c-card:nth-child(4) { animation-delay: 1s }
.c-card:nth-child(5) { animation-delay: 1.25s }
.c-card:nth-child(6) { animation-delay: 1.5s }
.c-card:nth-child(7) { animation-delay: 1.75s }
.c-card:nth-child(8) { animation-delay: 2s }
.c-card:nth-child(9) { animation-delay: 2.25s }

.c-card:hover {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.c-card-date {
    margin: 0.5rem 0;
    font-size: 1.5rem;
}

.c-card-title {
    font-weight: bold;
    color: black;
    font-size: 1.75rem;
    margin: 5% 0 0;
    font-family: "Montserrat";
}

.c-card-desc {
    margin-top: 1%;
}

.c-card-button {
    border: none;
    border-radius: 5px;
    padding: 3% 8%;
    background-color: var(--c5);
    transition: 0.3s;
    color: white;
    position: absolute;
    bottom: 5%;
    right: 2.5%;
}

.c-card-button:hover {
    cursor: pointer;
    background-color: var(--c3);
}

.c-card-button.unclickable {
    opacity: 0.5;
    
}

.c-card-button.unclickable:hover {
    cursor: not-allowed;
    background-color: var(--c5);
}


#loader-event {
    border: 10px solid #f3f3f3;
    border-top: 10px solid var(--c5);
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 1.4s linear infinite;
    margin: auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#noti-message {
    color: black;
    font-size: 2.5vh;
    text-align: center;
    font-family: "Montserrat";
    font-weight: 700;
}