/* ------------------------------ FONTS ------------------------------ */

/* roboto-regular - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v18-latin-ext-regular.woff2') format('woff2'),
       url('../fonts/roboto-v18-latin-ext-regular.woff') format('woff');
}

/* roboto-italic - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  font-display: fallback;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v18-latin-ext-italic.woff2') format('woff2'),
       url('../fonts/roboto-v18-latin-ext-italic.woff') format('woff');
}

/* roboto-700 - latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: fallback;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v18-latin-ext-700.woff2') format('woff2'),
       url('../fonts/roboto-v18-latin-ext-700.woff') format('woff');
}

/* ------------------------------ GENERAL ------------------------------ */
*,
*:before,
*:after
{
    box-sizing: border-box;
}

html
{
    font-size: 62.5%;
    line-height: normal; /* fix normalize.css */

    position: relative;

    min-height: 100%;
}

body
{
    font-family: 'Roboto', sans-serif;
    font-size: 1.8rem;

    text-align: left;

    color: #222;
    background-color: #fff;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol
{
    margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-weight: 700;
}

h1
{
    font-size: 3.8rem;
}

h2
{
    font-size: 3rem;
}

h3
{
    font-size: 2.2rem;
}

h4
{
    font-size: 1.8rem;

    margin-bottom: 15px;
}

p
{
    line-height: 3rem;
}

strong
{
    font-weight: 700;
}

ul,
ol
{
    padding: 0;

    list-style-type: none;

    counter-reset: counter;
}

blockquote
{
    font-size: 2.4rem;
    font-style: italic;
    line-height: 3.8rem;

    position: relative;

    max-width: 700px;
    margin: 0 auto 15px auto;
    padding: 40px 60px;

    background: rgba(0, 0, 0, .1);
}

blockquote:before,
blockquote:after
{
    font-size: 7rem;
    font-style: normal;
    line-height: 58px;

    position: absolute;

    display: inline-block;

    color: rgba(0, 0, 0, .3);
}

blockquote:before
{
    top: 27px;
    left: 26px;

    content: '\201C';
}

blockquote:after
{
    right: 26px;
    bottom: -16px;

    content: '\201D';
}

hr
{
    display: none;
}

a
{
    transition: .5s;
    text-decoration: none;

    color: #00f;
}

a:hover
{
    text-decoration: none;

    color: #222;
}

::selection
{
    color: #fff;
    background: #f00;
}

::selection
{
    color: #fff;
    background: #f00;
}

.hidden
{
    display: none;
}

.container
{
    position: relative;

    max-width: 1400px;
    height: inherit;
    margin: 0 auto;
}

.row
{
    font-size: 0;
}

.row > *
{
    font-size: 1.8rem; /* font-size same as general on body */

    display: inline-block;

    vertical-align: top;
}

.col-left
{
    width: 50%;
    padding-right: 15px;
}

.col-right
{
    width: 50%;
    padding-left: 15px;
}

.clearfix:before,
.clearfix:after
{
    display: table;

    content: '';
}

.clearfix:after
{
    clear: both;
}

iframe
{
    border: 0;
}

@media (max-width: 1460px)
{
    .container
    {
        padding: 0 30px;
    }
}

@media (max-width: 960px)
{
    .col-left,
    .col-right
    {
        width: 100%;
        padding: 0;
    }

    .col-left
    {
        margin-bottom: 15px;
    }
}

@media (max-width: 760px)
{
    body,
    .row > *
    {
        font-size: 1.6rem;
    }

    h1
    {
        font-size: 3.2rem;
    }

    h2
    {
        font-size: 2.6rem;
    }

    h3
    {
        font-size: 2rem;
    }

    h4
    {
        font-size: 1.6rem;
    }

    p
    {
        line-height: 2.2rem;
    }

    blockquote
    {
        font-size: 2rem;
        line-height: 3rem;

        padding: 40px 25px;
    }

    blockquote:before,
    blockquote:after
    {
        font-size: 6rem;
        line-height: 50px;
    }

    blockquote:before
    {
        top: 17px;
        left: 22px;
    }

    blockquote:after
    {
        right: 24px;
    }

    .container
    {
        padding: 0 15px;
    }
}

/* --- TABLES --- */
.table-wrapper
{
    overflow-y: auto;

    width: 100%;
}

.table-wrapper::-webkit-scrollbar
{
    width: 14px;
    height: 14px;

    -webkit-appearance: none;
}

.table-wrapper::-webkit-scrollbar-thumb
{
    border: 3px solid #fff;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .3);
}

table
{
    width: 100%;
    min-width: 560px;
    margin-bottom: 15px;

    border-collapse: collapse;
}

table td,
table th
{
    padding: 10px 7px;

    text-align: center;

    border: 1px solid rgba(0, 0, 0, .2);
}

table th
{
    color: #fff;
    background: rgba(0, 0, 0, .6);
}

table th:first-child,
table th:nth-child(2),
table td:first-child,
table td:nth-child(2)
{
    text-align: left;
}

table td:first-child
{
    white-space: nowrap;
}

table td:last-child
{
    white-space: nowrap;

    color: #f00;
}

/* --- FORMS --- */
form
{
    margin-bottom: 15px;
}

.col-form-left
{
    width: 50%;
    padding-right: 15px;
}

.col-form-right
{
    width: 50%;
    padding-left: 15px;
}

.form-field
{
    position: relative;
}

label
{
    position: relative;

    display: inline-block;

    padding-bottom: 5px;

    cursor: pointer;
}

label span
{
    color: #f00;
}

input[type='text'],
input[type='email'],
input[type='url'],
input[type='password'],
input[type='tel'],
input[type='number'],
input[type='search'],
textarea,
select
{
    font-family: 'Roboto', sans-serif; /* fix normalize.css */
    font-size: 1.8rem; /* fix normalize.css */
    line-height: 40px;

    display: block;

    width: 100%;
    height: 40px;
    margin: 0 0 15px 0;
    padding: 0 10px;

    transition: .3s;

    border: 1px solid rgba(0, 0, 0, .2);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
}

textarea
{
    line-height: normal;

    height: 300px;
    padding: 5px 10px;
}

input[type='text']:focus,
input[type='email']:focus,
input[type='url']:focus,
input[type='password']:focus,
input[type='tel']:focus,
input[type='number']:focus,
input[type='search']:focus,
textarea:focus,
select:focus
{
    border-color: rgba(0, 0, 255, 1);
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 0 8px rgba(0, 0, 255, 1);
}

select
{
       -moz-appearance: none;
    -webkit-appearance: none;
}

select::-ms-expand
{
    display: none;
}

.form-select .select-arrow
{
    position: absolute;
    top: 50%;
    right: 10px;

    display: block;

    width: 0;
    height: 0;

    transition: .5s;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);

    border-width: 10px 5px 0 5px;
    border-style: solid;
    border-color: #000 transparent transparent transparent;
}

.form-select select:focus + .select-arrow
{
    -webkit-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
}

::-webkit-input-placeholder
{
    color: #ddd;
}

::-moz-placeholder
{
    color: #ddd;
}

:-ms-input-placeholder
{
    color: #ddd;
}

.form-checkbox input[type='checkbox']
{
    display: none;
}

.form-checkbox label
{
    padding-left: 30px;
}

.form-checkbox label:before
{
    position: absolute;
    top: 1px;
    left: 0;

    width: 18px;
    height: 18px;

    content: '';

    border: 2px solid #3f3f3f;
}

.form-checkbox label:after
{
    position: absolute;
    top: 5px;
    left: 4px;

    width: 10px;
    height: 10px;

    content: '';
    transition: .5s;

    opacity: 0;
    background: #3f3f3f;
}

.form-checkbox input[type='checkbox']:checked + label:after
{
    opacity: 1;
}

.form-radio .form-field
{
    margin-bottom: 5px;
}

.form-radio input[type='radio']
{
    display: none;
}

.form-radio label
{
    padding-left: 26px;
}

.form-radio label:before
{
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 0;

    display: block;

    width: 17px;
    height: 17px;

    content: '';

    border: 1px solid #000;
    border-radius: 50%;
}

.form-radio label:after
{
    position: absolute;
    z-index: 1;
    top: 7px;
    left: 5px;

    display: block;

    width: 7px;
    height: 7px;

    content: '';
    transition: .5s;

    border-radius: 50%;
    background: transparent;
}

.form-radio input[type='radio']:checked + label:after
{
    background: #4caf50;
}

button,
input[type='submit']
{
    font-family: 'Roboto', sans-serif; /* fix normalize.css */
    font-size: 2rem; /* fix normalize.css */
    line-height: normal; /* fix normalize.css */

    padding: 0;

    cursor: pointer;
    transition: .5s;

    border: none;
    background: none;
}

button:hover,
input[type='submit']:hover
{
    text-decoration: underline;
}

button:focus,
input[type='submit']:focus
{
    outline: none;
}

input[type='submit']
{
    display: inline-block;

    margin: 15px 0 0 0;
    padding: 10px 30px;

    color: #fff;
    border: none;
    background: #3f3f3f;
}

input[type='submit']:hover
{
    text-decoration: none;

    background: #00f;
}

.form-note
{
    font-size: 16px;

    margin-bottom: 15px;
    padding: 15px;

    color: #fff;
}

.form-success
{
    background: #4caf50;
}

.form-error
{
    background: #f44336;
}

.form-warning
{
    background: #ff9800;
}

@media (max-width: 960px)
{
    textarea
    {
        height: 200px;
    }
}

@media (max-width: 460px)
{
    .col-form-left,
    .col-form-right
    {
        width: 100%;
        padding: 0;
    }

    textarea
    {
        height: 150px;
    }
}

/* ------------------------------ HEADER ------------------------------ */
header
{
    padding-top: 60px;
}

.languages
{
    position: absolute;
    top: -30px;
    right: 0;
}

.languages li
{
    display: inline-block;

    vertical-align: top;
}

.languages a
{
    color: #222;
}

.languages a:hover
{
    color: #00f;
}

.languages .current-menu-item a
{
    color: #f00;
}

.languages li:before
{
    content: '/';
}

.languages li:first-child:before
{
    display: none;
}

@media (max-width: 1460px)
{
    .languages
    {
        right: 30px;
    }
}

@media (max-width: 760px)
{
    header
    {
        padding-top: 45px;
    }

    .languages
    {
        top: -30px;
        right: 15px;
    }
}

/* ------------------------------ CONTENT ------------------------------ */
main ul li
{
    position: relative;

    padding: 2px 0 2px 17px;
}

main ul li:before
{
    position: absolute;
    top: 10px;
    left: 0;

    display: block;

    width: 5px;
    height: 5px;

    content: '';

    border-radius: 50%;
    background: #222;
}

main ol li
{
    padding: 2px 0;
}

main ol li:before
{
    font-weight: 700;

    display: inline-block;

    margin-right: 3px;

    content: counters(counter, '.') '. ';
    counter-increment: counter;
    vertical-align: top;
}

main ol ol li
{
    padding-left: 19px;
}

main ol ol li:before
{
    content: counters(counter, '.') ' ';
}

section
{
    margin-bottom: 30px;
    padding-bottom: 30px;

    border-bottom: 1px dashed rgba(0, 0, 0, .3);
}

/* --- STANDARDS --- */
section:not(.headings) h3
{
    text-decoration: underline;

    text-decoration-skip: ink;
}

section > h2:first-child
{
    text-decoration: none;
    text-transform: uppercase;

    color: #f00;
}

.colors .row
{
    margin: 15px 0;
}

.colors .row > *
{
    vertical-align: middle;
}

.colors .box
{
    width: 50px;
    height: 50px;
    margin-right: 20px;
}

.color-black .box
{
    background: #222;
}

.color-blue .box
{
    background: #00f;
}

.color-red .box
{
    background: #f00;
}

.fonts span
{
    font-size: 3rem;

    display: block;

    margin-bottom: 15px;
}

.fonts .regular
{
    font-weight: 400;
}

.fonts .regular-italic
{
    font-weight: 400;
    font-style: italic;
}

.fonts .bold
{
    font-weight: 700;
}

.letter-space
{
    letter-spacing: 2px;
}

@media (max-width: 760px)
{
    .fonts span
    {
        font-size: 2.4rem;
    }
}

/* ------------------------------ FOOTER ------------------------------ */
footer
{
    padding-top: 60px;
    padding-bottom: 60px;
}

@media (max-width: 760px)
{
    header
    {
        padding-bottom: 30px;
    }
}