@charset "UTF-8";
/*
[Master Stylesheet]

Project: Moderat
Version: 1.1
Author: Yegor Borisenco <pimmey@pimmey.com>
Author profile: https://themeforest.net/user/pimmey


[Table of contents]

1 Global styles / body, .container, section, canvas, .main, .dark
2 Pace spinner / .pace
3 Table / table
4 Links / a, .dark a
5 Typography improvements / body, input, textarea, select, button, h2
6 Helper classes / .margin-on-medium-and-down, .nobr, .intro
7 Navigation / .navbar-fixed nav, .side-nav, .table-of-contents, .dark
8 Footer / footer
9 Hero / .spiral-buffer
10 Services / .services
11 Projects / .projects
12 Prices / .prices, .faq, .dark
13 About / .team, .philosophy, .dark
14 Journal / .journal-entries, .dark
15 Contact / .contact, .visit-us, .dark
16 Modal / .modal, .modal-close
17 Social links / .social
18 Slider / .slider .indicators .indicator-item
19 Toasts / .toast
20 Choose Demo / .choose-demo


[Color codes]

# Global colors
White:      #fff
Black:      #030301

# Used for social links in modals
Facebook:   #3b5998;
Twitter:    #4099ff;
Dribbble:   #c73b6f;
Github:     #999;
VK:         #2b587a;
Linkedin:   #4075b4;
Googleplus: #c24e40;
Pinterest:  #bd081c;

# Toast backgrounds
Error:      #ff5252
Success:    #00e676


[Typography]

# Check out http://materializecss.com/typography.html for more details
Font:       Roboto
Body:       responsive flow text (http://materializecss.com/typography.html#flow)
h2:         3.56rem/110%
h3:         2.92rem/110%
h4:         2.28rem/110%
h5:         1.64rem/110%
nav:        1rem/1.5
blockquote: 2rem/1.5
*/
/*---------------------------------------------------------------------------------------

1 Global styles

-----------------------------------------------------------------------------------------*/
body {
    color: #fff;
}

    body.dark {
        color: #030301;
    }

.container {
    width: 90%;
    max-width: 1600px;
}

@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 80%;
    }
}

.container.full-width {
    width: 100%;
}

.container.row.narrow-row {
    margin-right: 0;
    margin-left: 0;
}

section {
    padding: 4rem 0;
}

canvas {
    display: block;
}

.main {
    position: relative;
    z-index: 1;
}

.dark .divider {
    background-color: rgba(3, 3, 1, 0.5);
}

/*---------------------------------------------------------------------------------------

2 Pace spinner

-----------------------------------------------------------------------------------------*/
.pace .pace-progress-inner {
    box-shadow: none;
}

@media only screen and (max-width: 992px) {
    .pace .pace-activity {
        right: 50%;
        margin-right: -7px;
    }
}

/*---------------------------------------------------------------------------------------

3 Table

-----------------------------------------------------------------------------------------*/
table.highlight > tbody > tr:hover {
    background-color: rgba(158, 158, 158, 0.25);
}

/*---------------------------------------------------------------------------------------

4 Links

-----------------------------------------------------------------------------------------*/
a {
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

    a:hover {
        border-bottom-color: #fff;
    }

    a img {
        vertical-align: top;
        border: 0;
    }

.dark a {
    color: #030301;
    border-bottom-color: rgba(3, 3, 1, 0.5);
}

    .dark a:hover {
        border-bottom-color: #030301;
    }

/*---------------------------------------------------------------------------------------

5 Typography improvements

-----------------------------------------------------------------------------------------*/
body,
input,
textarea,
select,
button {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
    -moz-font-feature-settings: 'liga', 'kern';
}

h2 {
    font-weight: 200;
    text-transform: uppercase;
}

/*---------------------------------------------------------------------------------------

6 Helper classes

-----------------------------------------------------------------------------------------*/
@media only screen and (max-width: 992px) {
    .margin-on-medium-and-down {
        margin-bottom: 2rem;
    }
}

.nobr {
    white-space: nowrap;
}

.intro-1 {
    text-transform: uppercase;
    font-size: 1.3rem;
}

.intro {
    margin-top: 2rem;
}

.center {
    text-align: center;
}

.font-300 {
    font-weight: 300;
}



@media only screen and (max-width: 800px) {
    h2.whatdowedo_fr {
        font-size: 3.0rem;
    }
}

img.logo {
    display: block;
}



/*---------------------------------------------------------------------------------------

7 Navigation

-----------------------------------------------------------------------------------------*/
.navbar-fixed nav {
    background-color: transparent;
    box-shadow: none;
}

    .navbar-fixed nav ul a {
        display: inline;
        padding: 0;
        border-bottom: 2px solid rgba(255, 255, 255, 0.5);
    }

        .navbar-fixed nav ul a:hover {
            background: transparent;
            border-bottom-color: #fff;
        }

    .navbar-fixed nav .brand {
        font-size: 1.5rem;
        font-weight: 800;
        letter-spacing: 4px;
        text-transform: uppercase;
        border: 0;
    }

    .navbar-fixed nav ul:not(.side-nav) li:not(:first-of-type) {
        margin-left: 1.5rem;
    }

    .navbar-fixed nav .side-nav {
        background: #030301;
    }

        .navbar-fixed nav .side-nav a {
            display: block;
            height: 64px;
            padding-left: 2rem;
            line-height: 64px;
            color: #fff;
        }

    .navbar-fixed nav .table-of-contents li {
        padding: 0;
    }

    .navbar-fixed nav .table-of-contents a {
        font-weight: 400;
        color: #fff;
    }

        .navbar-fixed nav .table-of-contents a.active, .navbar-fixed nav .table-of-contents a:hover {
            padding: 0;
            font-weight: 400;
        }

        .navbar-fixed nav .table-of-contents a:hover {
            border-bottom: 2px solid #fff;
            border-left: 0;
        }

        .navbar-fixed nav .table-of-contents a.active {
            border: 0;
        }

.dark nav .table-of-contents a {
    color: #030301;
}

    .dark nav .table-of-contents a:hover {
        border-bottom-color: #030301;
    }

.dark .navbar-fixed nav ul a {
    border-bottom-color: rgba(3, 3, 1, 0.5);
}

/*---------------------------------------------------------------------------------------

8 Footer

-----------------------------------------------------------------------------------------*/
footer {
    padding: 5rem 0;
}

@media only screen and (max-width: 600px) {
    footer {
        padding: 3.5rem 0;
    }
}

@media only screen and (max-width: 600px) {
    footer {
        padding: 2.5rem 0;
        text-align: center;
    }
}

footer .row {
    margin-bottom: 0;
}

/*---------------------------------------------------------------------------------------

9 Hero

-----------------------------------------------------------------------------------------*/
.spiral-buffer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
}

/*---------------------------------------------------------------------------------------

10 Services

-----------------------------------------------------------------------------------------*/
.services i {
    display: block;
    margin: 2rem 0 1rem;
    font-size: 3rem;
}

@media only screen and (max-width: 600px) {
    .services .service-items {
        text-align: center;
    }
}

/*---------------------------------------------------------------------------------------

11 Projects

-----------------------------------------------------------------------------------------*/
.projects .project-list .row {
    margin-bottom: 2rem;
    border-bottom: 1px solid #fff;
}

/*---------------------------------------------------------------------------------------

12 Prices

-----------------------------------------------------------------------------------------*/
.prices .info {
    display: inline-block;
    padding: 0 1rem;
    cursor: help;
    opacity: .5;
}

    .prices .info:hover {
        opacity: 1;
    }

.prices h5 {
    margin-bottom: 1em;
}

.prices .divider {
    margin: 1.5rem 0;
}

@media only screen and (max-width: 600px) {
    .prices .price-box {
        text-align: center;
    }

    .prices .info {
        position: absolute;
    }
}

.faq .collapsible {
    border: 0;
    box-shadow: none;
}

.faq .collapsible-header {
    min-height: 5rem;
    padding: 0;
    line-height: 5rem;
    background: transparent;
}

.faq .collapsible-body p {
    padding: 2rem 0;
}

.dark .collapsible-header,
.dark .collapsible-body {
    border-bottom-color: rgba(3, 3, 1, 0.5);
}

/*---------------------------------------------------------------------------------------

13 About

-----------------------------------------------------------------------------------------*/
.team [class*='-clip'] {
    -webkit-transition: clip-path 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    -moz-transition: clip-path 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: clip-path 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.team [class*='-clip'] {
    filter: blur(3px);
}

    .team [class*='-clip']:hover {
        filter: none;
    }

.team .triangle-clip {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%);
}

    .team .triangle-clip:hover {
        -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
        clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
    }

.team .rhombus-clip {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

    .team .rhombus-clip:hover {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

.team .x-clip {
    -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}

    .team .x-clip:hover {
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 50%, 0% 100%, 0% 100%, 50% 100%, 100% 100%, 100% 100%, 100% 50%, 100% 0%, 100% 0%, 50% 0%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 50%, 0% 100%, 0% 100%, 50% 100%, 100% 100%, 100% 100%, 100% 50%, 100% 0%, 100% 0%, 50% 0%);
    }

.team .rabbet-clip {
    -webkit-clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
    clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
}

    .team .rabbet-clip:hover {
        -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 100%);
    }

.team .pentagon-clip {
    -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
    clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

    .team .pentagon-clip:hover {
        -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
        clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%);
    }

.team .heptagon-clip {
    -webkit-clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}

    .team .heptagon-clip:hover {
        -webkit-clip-path: polygon(50% 0%, 100% 0%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 0% 0%);
        clip-path: polygon(50% 0%, 100% 0%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, 0% 0%);
    }

.team .parallelogram-clip {
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

    .team .parallelogram-clip:hover {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }

.team .bevel-clip {
    -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

    .team .bevel-clip:hover {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 0% 0%);
    }

@media only screen and (max-width: 600px) {
    .team .title,
    .team .name {
        text-align: center;
    }
}

.philosophy {
    padding: 5rem 0 4rem;
}

@media only screen and (max-width: 600px) {
    .philosophy {
        padding: 3rem 0 2rem;
    }
}

.philosophy .tabs {
    height: auto;
    background-color: transparent;
}

    .philosophy .tabs .tab {
        height: auto;
        letter-spacing: normal;
        color: #fff;
        text-transform: none;
    }

@media only screen and (max-width: 600px) {
    .philosophy .tabs .tab h5 {
        display: none;
    }
}

@media only screen and (min-width: 993px) {
    .philosophy .tabs .tab .philosophy-number {
        display: none;
    }
}

.philosophy .tabs .tab a {
    color: rgba(255, 255, 255, 0.6);
}

    .philosophy .tabs .tab a.active {
        color: #fff;
    }

.philosophy .tab-contents h5 {
    display: none;
}

@media only screen and (max-width: 600px) {
    .philosophy .tab-contents h5 {
        display: block;
    }
}

.philosophy .indicator {
    height: 3px;
    background-color: #fff;
}

.dark .philosophy .tabs .tab a {
    color: rgba(3, 3, 1, 0.25);
}

    .dark .philosophy .tabs .tab a.active {
        color: #030301;
    }

.dark .philosophy .indicator {
    background-color: #030301;
}

/*---------------------------------------------------------------------------------------

14 Journal

-----------------------------------------------------------------------------------------*/
.journal-entries .journal-entry {
    display: block;
    margin-right: 0;
    margin-bottom: 2rem;
    margin-left: 0;
    border-bottom: 1px solid #fff;
}

    .journal-entries .journal-entry .col:first-of-type {
        padding-right: 1.5rem;
        padding-left: 0;
    }

@media only screen and (max-width: 992px) {
    .journal-entries .journal-entry .col {
        padding-right: 0;
        padding-left: 0;
    }
}

.journal-entries .journal-entry:hover {
    opacity: .75;
}

.dark .journal-entries .journal-entry {
    border-bottom-color: #030301;
}

/*---------------------------------------------------------------------------------------

15 Contact

-----------------------------------------------------------------------------------------*/
.contact .input-field label {
    left: 0;
    color: #fff;
}

.contact input[type=text],
.contact input[type=email],
.contact input[type=email],
.contact textarea.materialize-textarea {
    border-bottom-color: #fff;
}

    .contact .input-field input[type=text]:focus:not([readonly]),
    .contact .input-field input[type=email]:focus,
    .contact .input-field input[type=email]:focus:not([readonly]),
    .contact input[type=email]:focus,
    .contact input[type=email]:focus:not([readonly]),
    .contact textarea.materialize-textarea:focus,
    .contact textarea.materialize-textarea:focus:not([readonly]) {
        border-bottom-color: #fff;
        box-shadow: none;
    }

        .contact .input-field input[type=text]:focus:not([readonly]) + label,
        .contact .input-field input[type=email]:focus + label,
        .contact .input-field input[type=email]:focus:not([readonly]) + label,
        .contact input[type=email]:focus + label,
        .contact input[type=email]:focus:not([readonly]) + label,
        .contact textarea.materialize-textarea:focus + label,
        .contact textarea.materialize-textarea:focus:not([readonly]) + label {
            color: #fff;
        }

    .contact .input-field input[type=text].valid,
    .contact .input-field input[type=email].valid,
    .contact textarea.materialize-textarea.valid {
        border-bottom-color: #fff;
        box-shadow: none;
    }

    .contact .input-field input[type=text].invalid,
    .contact .input-field input[type=email].invalid,
    .contact textarea.materialize-textarea.invalid {
        border-bottom-color: #fff;
        box-shadow: none;
    }

.contact .input-field .prefix.active {
    color: #fff;
}

.visit-us address {
    margin: 1em 0;
    font-style: normal;
}

.dark .contact .input-field label {
    left: 0;
    color: #030301;
}

.dark .contact input[type=text],
.dark .contact input[type=email],
.dark .contact input[type=email],
.dark .contact textarea.materialize-textarea {
    border-bottom-color: #030301;
}

    .dark .contact .input-field input[type=text]:focus:not([readonly]),
    .dark .contact .input-field input[type=email]:focus,
    .dark .contact .input-field input[type=email]:focus:not([readonly]),
    .dark .contact input[type=email]:focus,
    .dark .contact input[type=email]:focus:not([readonly]),
    .dark .contact textarea.materialize-textarea:focus,
    .dark .contact textarea.materialize-textarea:focus:not([readonly]) {
        border-bottom-color: #030301;
        box-shadow: none;
    }

        .dark .contact .input-field input[type=text]:focus:not([readonly]) + label,
        .dark .contact .input-field input[type=email]:focus + label,
        .dark .contact .input-field input[type=email]:focus:not([readonly]) + label,
        .dark .contact input[type=email]:focus + label,
        .dark .contact input[type=email]:focus:not([readonly]) + label,
        .dark .contact textarea.materialize-textarea:focus + label,
        .dark .contact textarea.materialize-textarea:focus:not([readonly]) + label {
            color: #030301;
        }

    .dark .contact .input-field input[type=text].valid,
    .dark .contact .input-field input[type=email].valid,
    .dark .contact textarea.materialize-textarea.valid {
        border-bottom-color: #030301;
        box-shadow: none;
    }

    .dark .contact .input-field input[type=text].invalid,
    .dark .contact .input-field input[type=email].invalid,
    .dark .contact textarea.materialize-textarea.invalid {
        border-bottom-color: #030301;
        box-shadow: none;
    }

.dark .contact .input-field .prefix.active {
    color: #030301;
}

/*---------------------------------------------------------------------------------------

16 Modal

-----------------------------------------------------------------------------------------*/
.modal {
    left: 10%;
}

    .modal.bottom-sheet {
        width: 80%;
        height: 100%;
        max-height: none;
    }

@media only screen and (max-width: 992px) {
    .modal.bottom-sheet {
        left: 7.5%;
        width: 85%;
    }

        .modal.bottom-sheet .modal-content {
            padding-top: 4rem;
        }
}

@media only screen and (max-width: 600px) {
    .modal.bottom-sheet {
        left: 5%;
        width: 90%;
    }

        .modal.bottom-sheet .modal-content {
            padding-top: 4rem;
        }
}

.modal blockquote {
    font-size: 2rem;
    border-left: 0;
}

@media only screen and (max-width: 600px) {
    .modal blockquote {
        font-size: 1.5rem;
        font-weight: 300;
    }
}

.modal .floating-blockquote,
.modal .floating-figure {
    width: 50%;
    padding: 0 2rem;
}

.modal .floating-blockquote {
    font-size: 2rem;
}

@media only screen and (max-width: 600px) {
    .modal .floating-blockquote {
        padding: 0 1rem;
        font-size: 1.5rem;
    }
}

.modal .floating-figure {
    margin: 1em 0;
}

    .modal .floating-figure img {
        display: block;
    }

    .modal .floating-figure figcaption {
        font-style: italic;
    }

.modal .mdash-ul li::before {
    content: '— ';
}

.modal th {
    font-weight: 400;
}

.modal .modal-nav {
    color: #263238;
    border-bottom-color: rgba(38, 50, 56, 0.5);
}

    .modal .modal-nav:hover {
        border-bottom-color: #263238;
    }

.modal.dark-modal .modal-nav {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

    .modal.dark-modal .modal-nav:hover {
        border-bottom-color: #fff;
    }

.modal-close {
    position: absolute;
    top: 0;
    left: 1.5rem;
    z-index: 10000;
    font-size: 3rem;
}

@media only screen and (min-width: 601px) {
    .modal-close::after {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 1rem;
        content: 'esc';
    }
}

/*---------------------------------------------------------------------------------------

17 Social links

-----------------------------------------------------------------------------------------*/
.social a {
    display: inline-block;
}

    .social a.facebook {
        color: #3b5998;
        border-bottom-color: rgba(59, 89, 152, 0.5);
    }

        .social a.facebook:hover {
            border-bottom-color: #3b5998;
        }

    .social a.twitter {
        color: #4099ff;
        border-bottom-color: rgba(64, 153, 255, 0.5);
    }

        .social a.twitter:hover {
            border-bottom-color: #4099ff;
        }

    .social a.dribbble {
        color: #c73b6f;
        border-bottom-color: rgba(199, 59, 111, 0.5);
    }

        .social a.dribbble:hover {
            border-bottom-color: #c73b6f;
        }

    .social a.github {
        color: #999;
        border-bottom-color: rgba(153, 153, 153, 0.5);
    }

        .social a.github:hover {
            border-bottom-color: #999;
        }

    .social a.vk {
        color: #2b587a;
        border-bottom-color: rgba(43, 88, 122, 0.5);
    }

        .social a.vk:hover {
            border-bottom-color: #2b587a;
        }

    .social a.linkedin {
        color: #4075b4;
        border-bottom-color: rgba(64, 117, 180, 0.5);
    }

        .social a.linkedin:hover {
            border-bottom-color: #4075b4;
        }

    .social a.googleplus {
        color: #c24e40;
        border-bottom-color: rgba(194, 78, 64, 0.5);
    }

        .social a.googleplus:hover {
            border-bottom-color: #c24e40;
        }

    .social a.pinterest {
        color: #bd081c;
        border-bottom-color: rgba(189, 8, 28, 0.5);
    }

        .social a.pinterest:hover {
            border-bottom-color: #bd081c;
        }

@media only screen and (max-width: 600px) {
    .social a {
        margin-bottom: 5px;
    }
}

.social a:not(:last-of-type) {
    margin-right: 1rem;
}

/*---------------------------------------------------------------------------------------

18 Slider

-----------------------------------------------------------------------------------------*/
.slider .indicators .indicator-item {
    background-color: rgba(96, 125, 139, 0.5);
}

    .slider .indicators .indicator-item.active {
        background-color: #607d8b;
    }

/*---------------------------------------------------------------------------------------

19 Toasts

-----------------------------------------------------------------------------------------*/
@media only screen and (max-width: 992px) and (min-width: 601px) {
    #toast-container {
        right: 5%;
    }
}

.toast {
    display: none;
    height: auto;
    padding: 20px;
    line-height: 1.75rem;
}

    .toast:first-of-type {
        display: block;
    }

    .toast a {
        display: block;
        color: #fff;
        text-decoration: underline;
    }

    .toast.error {
        background-color: #FF5252;
        color:white;
    }

    .toast.success {
        color: #000000;
        background-color: #00E676;
    }

/*---------------------------------------------------------------------------------------

20 Toasts

-----------------------------------------------------------------------------------------*/
.choose-demo canvas {
    width: 80%;
    margin: 0 auto;
}

.choose-demo h1 {
    margin: 8rem 0;
    text-transform: uppercase;
    letter-spacing: 7px;
}

.choose-demo h4 {
    margin-bottom: 4rem;
    letter-spacing: -1px;
}

.choose-demo a {
    color: #191919;
}


/*Modifications*/

@media only screen and (min-width: 601px) {
    nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
        height: 100px;
        line-height: 100px;
    }
}

nav ul {
    text-align: right;
}

    nav ul li {
        display: inline-block;
        float: none;
    }


.nav-wrapper {
    transition: all ease-in-out 0.6s;
}

    .nav-wrapper.opaque-nav {
        background-color: rgba(0,0,0,0.3);
    }

.form-contact label {
    color: white;
}

.form-contact [type="checkbox"]:checked + label:before {
    border-right-color: white;
    border-bottom-color: white;
}

[type="checkbox"] + label:before, [type="checkbox"]:not(.filled-in) + label:after {
    border: 2px solid white;
}

.cwhite {
    color: white;
}

/*hoho*/



@media only screen and (min-width: 993px) {
    .modal-desc {
        font-size: 1.8rem;
    }
}

@media only screen and (max-width: 992px) {
    .modal-desc {
        font-size: 1rem;
    }

    .modal-content h2 {
        font-size: 1.8rem;
        margin-bottom: 0px;
    }

    .input-field {
        margin-top: 0.5rem;
    }
}

.fresh {
    background-color: rgba(44, 181, 221, 0.9);
}

.modal-fresh {
    background-color: rgba(44, 181, 221, 0.97);
}
.modal-formats {
    background-color: rgba(89, 89, 89, 0.97);
}
.txt-formats {
    /*color: #595959 !important;
    text-shadow: -1px -1px 0 #fff100, 1px -1px 0 #fff100, -1px 1px 0 #fff100, 1px 1px 0 #fff100, 0 0 6px #fff100;
    font-family: Montserrat, Verdana, sans-serif;*/
}

.cool {
    background-color: rgba(177, 230, 74, 0.9);
}

.modal-cool {
    background-color: rgba(177, 230, 74, 0.99);
}

.daily {
    background-color: rgba(228, 37, 106, 0.9);
}

.modal-daily {
    background-color: rgba(228, 37, 106, 0.97);
}

.schedules {
    background-color: rgba(25, 110, 201, 0.9);
}

.modal-schedules {
    background-color: rgba(25, 110, 201, 0.97);
}

.spotter {
    background-color: rgba(255, 0, 0, 0.9);
}

.modal-spotter {
    background-color: rgba(255, 0, 0, 0.97);
}

.modal-playlists {
    background-color: rgba(16,93,148, 0.97);
}



.fp {
    background-color: rgba(219, 162, 243, 0.9);
}

.modal-fp {
    background-color: rgba(219, 162, 243, 0.97);
}

.bloc-v {
    border: none;
    background-color: transparent !important;
    opacity: 0.82;
    text-align: center;
    font-size: 38px;
    font-weight: bold;
    outline: none;
    padding: 4px;
    margin-bottom: 15px;
    position: relative;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

    .bloc-v img {
        display: block;
    }

.bloc-t {
    display: none;
}

.touchevents .bloc-t {
    display: block;
    font-size: 10px !important;
}

.no-touchevents .bloc, .no-touchevents .bloc-v {
    cursor: pointer;
}

.bloc .static, .bloc-v .static {
    z-index: 1;
}


.bloc .cover, .bloc-v .cover {
    position: absolute;
    top: 0px;
    z-index: 3;
    left: 0px;
    right: 0px;
    bottom: 0px;
    outline: none;
}



    .bloc-v .cover:focus, .bloc-v img:focus, .bloc-v:focus, .bloc .cover:focus, .bloc img:focus, .bloc:focus {
        outline: none;
    }



.modal-content {
    /*font-weight: 200;*/
    font-weight: 300;
}

.modal-clip {
    -webkit-clip-path: polygon(0 0, 100% 14%, 100% 82%, 0 100%);
    clip-path: polygon(0 0, 100% 14%, 100% 82%, 0 100%);
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-width: 100%;
}

.bloc, .bloc-v {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}



.exposant {
    position: relative;
    bottom: 1px;
    font-size: .8em;
    line-height: .8em;
    vertical-align: super;
    text-decoration: none;
}



.s5ths,
.m5ths,
.l5ths,
.xl5ths {
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s5ths {
    width: 20%;
}

@media only screen and (min-width: 601px) {
    .row .col.m5ths {
        width: 20%;
    }
}

@media only screen and (min-width: 993px) {
    .row .col.l5ths {
        width: 20%;
    }
}

@media only screen and (min-width: 1201px) {
    .row .col.xl5ths {
        width: 20%;
    }
}

#expertise .service-items a {
    text-decoration: none;
    border-bottom: none;
}


.table-of-contents img {
    vertical-align: middle;
    opacity: 0.9;
}

    .table-of-contents img:hover {
        opacity: 1;
    }

.no-border {
    border-style: none !important;
}

#slide-out {
    text-align: left;
}

    #slide-out li {
        display: block;
    }

.inline-block {
    display: inline-block !important;
}

#slide-out img {
    vertical-align: middle;
}

.relative {
    position: relative;
}

.bloc .gif {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    display: none;
}

.bloc-v .gif {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    display: none;
}


#fixedContent {
    position: fixed;
    overflow: auto;
    top: 104px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

#wechat.modal .modal-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.modal h2 {
    font-weight: 300;
}

.journal-entries .journal-entry:hover {
    opacity: 1;
    cursor: default;
}

#events {
    background-size: cover;
    /* background-image: url(/assets/images/illus/virginia.png);*/
    /*background-attachment:fixed;*/
    background-position: center;
}

.full-width {
    width: 100%;
}

video {
    border: none;
    background-color: transparent;
}

.fresh {
    background-color: #2CB5DD;
}

.fp {
    background-color: #eb8ce6;
}

.daily {
    background-color: #E71272;
}

.cool {
    background-color: #97c950;
}

.schedules {
    background-color: #196ec9;
}

.playlists {
    background-color: #105d94;
}
.bloc-formats {
    background-color: rgba(89, 89, 89,1);
}

.bloc-creators {
    background-color: #141518;
}


.modal-creators {
    background-color: #141518;
   
}

.modal-creators h2 {
    color: white;
}


.bloc-data {
    background-color: #a5acb3;
}

.modal-data {
    background-color: #a5acb3;
}

.modal{
    outline:none !important;
}


.grid {
    margin-left: auto;
    margin-right: auto;
}

    .grid > div {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: white;
        text-align: center;
        font-family: 'roboto';
        font-size: 62px;
        line-height: 1.2;
        font-weight: 100;
        border: 1px solid white;
        transition: all 0.5s ease-in-out;
        padding: 20px;
    }

        .grid > div > div {
            transition: all 0.5s ease-in-out;
        }

            .grid > div > div:hover {
                transform: scale(1.1);
            }

        .grid > div:hover.fresh {
            background-color: #1e95b8;
        }

        .grid > div:hover.fp {
            background-color: #e361dd;
        }

        .grid > div:hover.daily {
            background-color: #b80e5b;
        }

        .grid > div:hover.cool {
            background-color: #7eb036;
        }

        .grid > div:hover.schedules {
            background-color: #13559c;
        }

        .grid > div:hover.playlists {
            background-color: #0b4066;
        }

        .grid > div.big {
            font-size: 64px;
        }

    .grid span {
        font-weight: 400 !important;
    }

@media (max-width: 402px) {
    .grid > div {
        font-size: 52px;
    }

        .grid > div.big {
            font-size: 56px;
        }
}

@media (min-width:673px) and (max-width: 1024px) {
    .grid > div.big {
        font-size: 56px;
    }
    .grid > div {
        font-size: 50px;
    }
}

@media (min-width:1025px) and (max-width: 1300px) {
    .grid > div {
        font-size: 46px;
    }

        .grid > div.big {
            font-size: 47px;
        }
}


.grid > div{
    margin-bottom:10px;
}

.grid{

}


/*@supports(display:gridx) {*/
    .grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-gap: 30px;
        grid-auto-rows: minmax(300px, auto);
    }

    @media (max-width: 672px) {
        .grid {
            grid-template-columns: repeat(1, 1fr);
            grid-auto-rows: auto;
        }
    }

    @media (min-width:673px) and (max-width: 1024px) {
        .grid {
            grid-template-columns: repeat(2, 1fr);
            grid-auto-rows: minmax(300px, auto);
        }
    }
    @media (min-width:1025px) and (max-width: 1300px) {
        .grid {
            grid-auto-rows: minmax(230px, auto);
        }
    }
/*}*/