/**
 * Load stuff from CDNs
 */

@import url(//fonts.googleapis.com/css?family=Roboto);
@import url(//fonts.googleapis.com/css?family=Oswald);
@import url(//cdn.materialdesignicons.com/1.8.36/css/materialdesignicons.min.css);

/**
 * Universal styling
 */

body {
    margin: 0; padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #E6E6E6;
    overflow-x: hidden;
}

* {
    box-sizing: border-box;
}

/**
 * Element styling
 */

h2 {
    margin: 0; padding: 0;
    margin-bottom: 6px;
    font-family: 'Oswald', sans-serif;
    font-size: 36px;
    font-weight: normal;
}

p {
    margin: 0; padding: 10px 0;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: #2196F3;
    transition: color 0.6s;
}

a:hover {
    color: #00BCD4;
}

/**
 * Header styling
 */

header {
    padding: 0;
    width: 100%;
    display: block;
    background-color: #000;
    color: #FFFFFF;
}

navbar {
    position: relative; display: block;
    width: 100%; height: 100%;
    box-shadow: 0 0 12px -3px #000000;
}

.navbar-logo {
    height: 100%;
    padding: 0 12px;
    position: relative;
    font-size: 0;
}

.navbar-logo img {
    max-width: 100%; max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

.navbar-links > ul {
    margin: 0; padding: 0;
    display: flex;
    flex-direction: row;
    list-style-type: none;
}

.navbar-links > ul > li {
    margin: 0; padding: 0;
    position: relative; display: flex;
    flex: 1;
    text-align: center;
}

.navbar-links > ul > li > a {
    width: 100%; height: 100%;
    display: block;
    padding: 15px;
    color: #DADADA;
    background-color: #000000;
    transition: color 0.6s, background-color 0.6s, opacity 1.2s;
    white-space: nowrap;
}

.navbar-links > ul > li > a:hover {
    color: #FFFFFF;
    background-color: #3C4C52;
}

.navbar-links > ul > li.navbar-active a {
    background-color: #495D64;
}

.navbar-links > ul > li.navbar-active a:hover {
    background-color: #3C4C52;
}

.navbar-links > ul > li > div {
    width: 100%;
    position: absolute; display: block;
    bottom: 0; left: 0;
    transform: translateY(100%);
    z-index: 80;
}

.navbar-links > ul > li > div > div {
    max-height: 0;
    display: block;
    transition: max-height 0.6s;
    overflow-y: hidden;
}

@media (min-width: 769px) {

    .navbar-links > ul > li > div > div {
        cursor: pointer;
    }

    .navbar-links > ul > li:hover > div > div {
        max-height: 48px;
    }

}

@media (max-width: 768px) {

    .navbar-links > ul > li.navbar-expanded > div > div {
        max-height: 48px;
    }

}

.navbar-links > ul > li > div > div > a {
    padding: 8px;
    display: block;
    background-color: #212121 !important;
    color: rgba(255, 255, 255, 0.87);
    transition: background-color 0.4s;
}

.navbar-links > ul > li > div > div > a:hover {
    background-color: #37474F !important;
}

.navbar-expand {
    width: 48px; height: 48px;
    position: absolute;
    top: 50%;
    transform: translate(10%, -50%);
    font-size: 36px;
    color: #FFFFFF;
    z-index: 20;
}

.navbar-expand:hover {
    color: #FFFFFF;
}

.navbar-expand i {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 36px;
}

@media (max-width: 768px) {
    
    .navbar-links > ul {
        flex-direction: column;
    }
    
    .navbar-links > ul > li {
        max-height: 0;
        transition: max-height 1.2s;
    }
    
    .navbar-links > ul a {
        opacity: 0;
    }
    
    .navbar-links.navbar-expanded > ul > li {
        max-height: 56px;
    }
    
    .navbar-links.navbar-expanded > ul a {
        opacity: 1;
    }
    
}

/**
 * Content styling
 */

main {
    display: block;
    margin: 48px 0;
}

/**
 * Footer styling
 */

footer {
    padding: 12px 0;
    width: 100%;
    display: block;
    background-color: #D9D9D9;
    box-shadow: inset 0 18px 8px -18px #949494;
}

/**
 * Column layout styling
 */

.row {
    margin: 0; padding: 0;
    display: block;
    font-size: 0;
}

.row > * {
    font-size: initial;
}

@media (min-width: 769px) {

    .row > div.elem-1, .row > div.elem-2, .row > div.elem-3, .row > div.elem-4, .row > div.elem-5, .row > div.elem-6,
    .row > div.elem-7, .row > div.elem-8, .row > div.elem-9, .row > div.elem-10, .row > div.elem-11, .row > div.elem-12 {
        margin: 0; padding: 0;
        display: inline-block;
        vertical-align: top;
    }

    .row > div.elem-1 { width: 8.33333%; }
    .row > div.elem-2 { width: 16.66667%; }
    .row > div.elem-3 { width: 25%; }
    .row > div.elem-4 { width: 33.33333%; }
    .row > div.elem-5 { width: 41.66667%; }
    .row > div.elem-6 { width: 50%; }
    .row > div.elem-7 { width: 58.33333%; }
    .row > div.elem-8 { width: 66.66667%; }
    .row > div.elem-9 { width: 75%; }
    .row > div.elem-10 { width: 83.33333%; }
    .row > div.elem-11 { width: 91.66667%; }
    .row > div.elem-12 { width: 100%; }
    
}

@media (max-width: 768px) {
    
    .row > div.elem-1, .row > div.elem-2, .row > div.elem-3, .row > div.elem-4, .row > div.elem-5, .row > div.elem-6,
    .row > div.elem-7, .row > div.elem-8, .row > div.elem-9, .row > div.elem-10, .row > div.elem-11, .row > div.elem-12 {
        display: block;
        width: 100%;
    }
    
    .row.no-stack > div.elem-1, .row.no-stack > div.elem-2, .row.no-stack > div.elem-3, .row.no-stack > div.elem-4,
    .row.no-stack > div.elem-5, .row.no-stack > div.elem-6, .row.no-stack > div.elem-7, .row.no-stack > div.elem-8,
    .row.no-stack > div.elem-9, .row.no-stack > div.elem-10, .row.no-stack > div.elem-11, .row.no-stack > div.elem-12 {
        margin: 0; padding: 0;
        display: inline-block;
        vertical-align: top;
    }
    
    .row.no-stack > div.elem-1 { width: 8.33333%; }
    .row.no-stack > div.elem-2 { width: 16.66667%; }
    .row.no-stack > div.elem-3 { width: 25%; }
    .row.no-stack > div.elem-4 { width: 33.33333%; }
    .row.no-stack > div.elem-5 { width: 41.66667%; }
    .row.no-stack > div.elem-6 { width: 50%; }
    .row.no-stack > div.elem-7 { width: 58.33333%; }
    .row.no-stack > div.elem-8 { width: 66.66667%; }
    .row.no-stack > div.elem-9 { width: 75%; }
    .row.no-stack > div.elem-10 { width: 83.33333%; }
    .row.no-stack > div.elem-11 { width: 91.66667%; }
    .row.no-stack > div.elem-12 { width: 100%; }
    
}

/**
 * Columnated card styling
 */

@media (min-width: 769px) {

    .card-parent {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .card-col {
        flex: 1;
    }
    
}

.card {
    padding: 16px;
    display: block;
}

@media (max-width: 768px) {
    
    .card-parent {
        display: block;
    }
    
    .card-col {
        display: none;
    }
    
    .card-col:first-child {
        display: block;
    }
    
}

/**
 * Typography classes
 */

 .text-left { text-align: left; }
 .text-right { text-align: right; }
 .text-center { text-align: center; }
 .text-just { text-align: justify; text-justify: inter-word; }

 .text-light { color: rgba(255, 255, 255, 1); }
 small.text-light { color: rgba(255, 255, 255, 0.7); }
 .disabled.text-light { color: rgba(255, 255, 255, 0.5); }
 .text-dark { color: rgba(0, 0, 0, 0.87); }
 small.text-dark { color: rgba(0, 0, 0, 0.54); }
 .disabled.text-dark { color: rgba(0, 0, 0, 0.38); }

@media (min-width: 769px) {
    
    .d-text-left { text-align: left; }
    .d-text-right { text-align: right; }
    .d-text-center { text-align: center; }
    .d-text-just { text-align: justify; text-justify: inter-word; }
    
}

@media (max-width: 768px) {
    
    .m-text-left { text-align: left; }
    .m-text-right { text-align: right; }
    .m-text-center { text-align: center; }
    .m-text-just { text-align: justify; text-justify: inter-word; }
    
}

/**
 * Convenience classes
 */

.colour-red { background-color: #F44336; }
.colour-pink { background-color: #E91E63; }
.colour-purple { background-color: #9C27B0; }
.colour-deep-purple { background-color: #673AB7; }
.colour-indigo { background-color: #3F51B5; }
.colour-blue { background-color: #2196F3; }
.colour-light-blue { background-color: #03A9F4; }
.colour-cyan { background-color: #00BCD4; }
.colour-teal { background-color: #009688; }
.colour-green { background-color: #4CAF50; }
.colour-light-green { background-color: #8BC34A; }
.colour-lime { background-color: #CDDC39; }
.colour-yellow { background-color: #FFEB3B; }
.colour-amber { background-color: #FFC107; }
.colour-orange { background-color: #FF9800; }
.colour-deep-orange { background-color: #FF5722; }
.colour-brown { background-color: #795548; }
.colour-grey { background-color: #9E9E9E; }
.colour-blue-grey { background-color: #607D8B; }
.colour-black { background-color: #000000; }
.colour-white { background-color: #FFFFFF; }

.pos-abs { position: absolute; }
.pos-rel { position: relative; }
.pos-fixo { position: fixed; }

.mar-in { padding: 0 2%; }
.mar-out { padding: 0 4%; }
.mar-page { padding: 0 5%; }

.pad-vert { padding: 36px 0 }
.pad-hor { padding: 0 32px }

.vert-center {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.inline-center {
    display: inline-block;
    vertical-align: middle;
}
.inline-center-helper {
    width: 0; height: 100%;
    display: inline-block;
    vertical-align: middle;
}

@media (min-width: 769px) {
    
    .d-mar-in { padding: 0 2%; }
    .d-mar-out { padding: 0 4%; }
    .d-mar-page { padding: 0 5%; }
    .d-pad-vert { padding: 36px 0 }
    .d-pad-hor { padding: 0 32px }
    .d-hide { display: none !important; }
    
}

@media (max-width: 768px) {
    
    .m-mar-in { padding: 0 2%; }
    .m-mar-out { padding: 0 4%; }
    .m-mar-page { padding: 0 5%; }
    .m-pad-vert { padding: 36px 0 }
    .m-pad-hor { padding: 0 32px }
    .m-hide { display: none !important; }
    
}

.circle-elem i {
    color: #bf5656;
    transition: .25s;
}

.circle-elem i:hover {
    color: #bf565679;
}