/*
Theme Name: Turu-uuringute AS
Theme URI: https://turu-uuringute.eu/
Description: Turu-uuringute AS
Author: Rando Rooberg | Pampel / tõnis Ormisson kuddelMuddel OÜ
Author URI: https://www.pampel.ee
Version: 1.0
License: Turu-uuringute AS | Kasutamiseks ainult Turu-uuringute AS domeenil
*/

:root {
    /* @see CVI */
    --red-dark: rgb(120,10,40);
    --blue-dark: rgb(20,45,80);
    --gray-dark: rgb(70,70,70);
    --yellow-dark: rgb(230,110,0);

    --red-main: rgb(160,30,40);
    --blue-main: rgb(5,80,120);
    --gray-main: rgb(115,115,115);
    --yellow-main: rgb(240,150,0);

    --red-light-1: rgb(220,40,60);
    --blue-light-1: rgb(55,171,200);
    --gray-light-1: rgb(160,160,160);
    --yellow-light-1: rgb(240,170,0);

    --red-light-2: rgb(240,110,120);
    --blue-light-2: rgb(135, 200,225);
    --gray-light-2: rgb(190,190,190);
    --yellow-light-2: rgb(255,200,10);

    --red-light-3: rgb(240,150,130);
    --blue-light-3: rgb(190, 238,255);
    --gray-light-3: rgb(220,220,220);
    --yellow-light-3: rgb(250,230,0);

    --gray-light-4: rgb(245,245,245);

    --main-text: #000;
    --light-text: #fff;

}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--light-text);
    line-height: 1.5;
    color: var(--gray-dark);
}

img {
    max-width: 100% !important;
    height: auto;
}

label {
    font-weight: bold
}

img.alignright {
    float: right;
    margin: 0 0 1em 1em
}

img.alignleft {
    float: left;
    margin: 0 1em 1em 0
}

img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

a img.alignright {
    float: right;
    margin: 0 0 1em 1em
}

a img.alignleft {
    float: left;
    margin: 0 1em 1em 0
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto
}

.alignright {
    float: right;
    margin: 25px 0 25px 1em !important;
    max-width: 100%;
}

.alignleft {
    float: left;
    margin: 25px 1em 25px 0 !important;
    max-width: 100%;
}

.aligncenter {
    display: block !important;
    margin: 25px auto !important;
    max-width: 100%;
}

a .alignright {
    float: right;
    margin: 25px 0 25px 1em !important;
    max-width: 100%;
}

a .alignleft {
    float: left;
    margin: 25px 1em 25px 0 !important;
    max-width: 100%;
}

a .aligncenter {
    display: block !important;
    margin: 25px auto !important;
    max-width: 100%;
}

.wp-caption-text {
    font-size: 11px;
    text-align: right;
}

.table_wrapp {
    overflow: auto;
}

table, td, th {
    border: none;
    text-align: left;
}

table {
    border-collapse: collapse;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--gray-light-4);
}

th, td {
    padding: 15px !important;
}

iframe {
    width: 100% !important;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

figure {
    margin: 0 !important;
}

input, select, textarea {
    width: 100%;
    padding: 17px;
    color: var(--main-text);
    border: 1px solid var(--gray-light-1);
    box-sizing: border-box;
    margin-bottom: 10px !important;
}

input[type=submit] {
    width:auto;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--red-main);
    border: 2px solid var(--red-main);
    border-radius: 5px;
    padding: 10px 18px;
    color: var(--light-text);
    text-align: center;
    display: inline-block;
    transition-duration: 0.5s;
}


textarea {
    height: 175px;
}

input[type="checkbox"] {
    width: 30px;
    margin-left: -20px;
    margin-right: -10px;
}

input:focus, select:focus, textarea:focus, option:focus {
    outline: none !important;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--gray-light-1);
    opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--gray-light-1);
}

::-ms-input-placeholder { /* Microsoft Edge */
    color: var(--gray-light-1);
}

.wpcf7-form {
    display: block !important;
    margin: 0 !important;
}

div.wpcf7-mail-sent-ng, div.wpcf7-aborted, div.wpcf7-mail-sent-ok {
    margin-top: 25px !important;
    float: left;
    width: 100%;
}

.screen-reader-response ul li {
    display: none;
}

.wpcf7-validation-errors {
    display: none;
}

.screen-reader-response {
    display: none;
}

form.invalid input.wpcf7-not-valid, select.wpcf7-not-valid, textarea.wpcf7-not-valid {
    border: 1px solid red !important;
    padding: 25px !important;
    font-size: 25px !important;
}

div.wpcf7-validation-errors {
    display: none !important;
}

.wpcf7-not-valid-tip {
    display: none !important;
}

.button {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--red-main);
    border: 2px solid var(--red-main);
    border-radius: 5px;
    padding: 10px 18px;
    color: var(--light-text);
    text-align: center;
    display: inline-block;
    transition-duration: 0.5s;
}

#top-row, #bottom-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#top-row .row-item, #bottom-row .row-item {
    width: 32%;
    margin-left: 2%;
}

#top-row .row-item:first-of-type, #bottom-row .row-item:first-of-type {
    margin-left: 0;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--gray-dark);
    line-height: 1;
    margin: 0 0 0.5em 0;
}

h1 {
    font-size: 75px;
    letter-spacing: 3px;
    margin: 0 0 35px 0;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 25px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 13px;
}

a {
    color: var(--main-text);
    text-decoration: none;
    font-weight: inherit;
    -webkit-transition: 0.5s ease;
    transition: 0.5s ease;
}

a:hover {
    color: inherit;
    text-decoration: none;
}

.container {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
}

#header {
    display: flex;
    width: 100%;
    position: relative;
    justify-content: center;
    padding: 20px 0;
    background-color: var(--blue-dark);
}

#header a {
    color: var(--light-text);
    text-transform: uppercase;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;

    position: relative;

}


#header .container {
    overflow: hidden;
}

#logo a {
    float: left;
    margin-top: 3px;
}

@media (min-width: 1100px) {
    #navigation {
        float: right;
    }

    #navigation ul {
        margin: 0;
    }

    #navigation ul li {
        display: inline-block;
        margin: 0 15px;
    }

    #navigation ul li a {
        -webkit-transition-duration: 0.2s;
        transition-duration: 0.2s;
    }
}

#social {
    margin-left: auto;
}

#social img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}

#hero {
    width: 100%;
    min-height: 95.7%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

#hero .container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    position: relative;
}

#img-logo {
    width: 100%;
    position: absolute;
    top: 45px;
    left: 15px;
}

#img-logo img {
    width: 175px;
    height: 225px;
}

#hero-content-box {
    width: 100%;
    text-align: center;
    color: var(--light-text);
}

#hero-content-box h1, #hero-content-box h2, #hero-content-box h3, #hero-content-box h4 {
    color: var(--light-text) !important;
}

#page-heading {
    width: 100%;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red-light-2) !important;
}

#page-heading .container {
    padding: 30px 10px;
}

#page-heading h1 {
    color: var(--light-text);
    font-size: 60px;
    margin: 0;
    word-break: break-word;
}

.background-filter::after {
    background-color: rgba(0,0,0,0.4) !important;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    content: "";
    display: block;
    position: absolute;
    width: 100%; height: 100%;
    top: 0;
}

.background-filter {
    position: relative;
}

/* Use for content that is no filter */
.u-no-filter {
    position: relative;
    z-index: 1;
}


#page {
    width: 100%;
    margin: 35px 0;
    display: flex;
    justify-content: center;
}

#second-content-box {
    width: 100%;
    align-items: center;
    padding: 100px 0;
    background-color: var(--blue-light-1);
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 15px;
    color: var(--light-text);
}

#second-content-box h1, #second-content-box h2, #second-content-box h3, #second-content-box h4 {
    color: var(--light-text) !important;
}

#third-content-box {
    width: 100%;
    padding: 100px 0;
    background-color: var(--gray-light-4);
    color: var(--gray-dark);
    align-items: center;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 15px;
}

#as-us-box {
    width: 100%;
    min-height: 50%;
    display: flex;
    padding: 100px 0;
    font-size: 15px;
    justify-content: center;
    align-items: center;
    color: var(--light-text);
    text-align: center;
}

#as-us-box h1, #as-us-box h2, #as-us-box h3, #as-us-box h4 {
    color: var(--light-text) !important;
}

#as-us-box form {
    margin-top: 50px !important;
}

#as-us-box .card {
    color: var(--gray-dark);
}

#fourth-content-box {
    margin: -25px 0;
}

#fifth-content-box {
    width: 100%;
    padding: 0;
    align-items: center;
    display: flex;
    justify-content: center;
}

#news-box {
    width: 100%;
    align-items: center;
    padding: 3em 0;
    background-color: var(--blue-main);
    display: flex;
    justify-content: center;
    font-size: 15px;
    color: var(--light-text);
}

#news-box h1 {
    color: var(--light-text) !important;
    text-align: center;
}

#news-box .button {
    display: block;
    max-width: 425px;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
}


#news-frame {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 35px;
}

.news-left {
    width: 25%;
}

.its-a-news {
    width: 47%;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    overflow: hidden;
    margin-bottom: 2.0em;
}

.its-a-news:nth-child(even) {
    margin-left: auto;
}

.its-a-news h2 {
    color: var(--light-text) !important;
    margin-bottom: 1.5em;
}

.its-a-news p {
    margin-bottom: 1.5em;
}

.its-a-news a {
    color: var(--light-text) !important;
}

.news-list {
    width: 90%;
}

.news-list h2 {
    color: var(--light-text) !important;
    margin-bottom: 45px;
}

.news-list p {
    margin-bottom: 45px;
}

.news-list a {
    color: var(--light-text) !important;
    text-transform: uppercase;
}

.tags {
    text-decoration: none;
    font-size: 11px;
    opacity: .6;
    margin-top: 1.3em;
}

.tags a {
    text-decoration: none;
}

.tags a:hover {
    opacity: 1
}

.page-tags {
    opacity: .6;
    margin-top: 1.3em;
    text-align: right;
    color: white;
}

.page-tags a {
    text-decoration: none;
    color: white;
    opacity: 0.8;
}

.page-tags a:hover {
    opacity: 1
}

.post-date {
    color: white;
    opacity: 0.8;
    font-size: 0.8em;
}

.published {
    width: 125px;
    height: 125px;
    font-size: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: var(--blue-light-1);
    border-radius: 50%;
    padding-left: 30px;
    margin-left: -25px;
}

.published span {
    color: var(--light-text);
    text-transform: uppercase;
    font-weight: bold;
    font-size: 25px;
    margin-bottom: -50px;
}

.news-prev {
    width: 75%;
    margin-left: auto;
}

#footer {
    width: 100%;
    padding: 100px 0;
    font-size: 15px;
    color: var(--gray-main);
    align-items: center;
    display: flex;
    justify-content: center;
    background-color:  var(--gray-light-4);
}

#footer h2 {
    font-size: 30px;
    margin-bottom: 35px;
}

#footer-top {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#top-box-left {
    width: 40%;
}

#top-box-right {
    width: 55%;
    margin-left: auto;
}

.footer-pager {
    width: 100%;
    border-top: 3px solid #D63849;
    margin-top: 50px;
    padding-top: 50px;
}

.footer-block {
    width: 100%;
    padding: 10px
}


#bottom-left {
    width: 30%;
}

#bottom-middle {
    width: 30%;
    margin-left: 5%;
}

#bottom-right {
    width: 30%;
    margin-left: 5%;
    margin-top: 48px;
}

#ultra-bottom-left {
    width: 30%;
    margin-top: 50px;
}

#ultra-bottom-right {
    width: 30%;
    margin-left: 5%;
    margin-top: 98px;
}


@media (max-width: 1180px) {
    .menuicon {
        cursor: pointer;
        position: absolute;
        top: -15px;
        right: 15px;
    }

    #social img {
        position: absolute;
        top: 5px;
        right: 10px;
    }

    .bar1, .bar2, .bar3 {
        width: 30px;
        height: 2px;
        background-color: var(--light-text);
        margin: 8px 0;
    }

    .change .bar1 {
        opacity: 0;
    }

    .change .bar2 {
    }

    .change .bar3 {
        opacity: 0;
    }

    #navigation {
        width: 100%;
        display: none;
        overflow: hidden;
        margin-top: 15px;
    }

    #navigation ul {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #navigation li {
        width: 100%;
    }

    #navigation li a {
        width: 100%;
        display: inline-block;
        text-align: center;
        text-decoration: none;
        color:var(--light-text);
        text-transform: uppercase;
        padding: 10px 0;
    }

    #navigation li a:hover {
        color: var(--light-text);
    }

    #navigation ul li a:hover:after {
        width: 0;
    }
}

@media (max-width: 890px) {
    .its-a-news {
        width: 100%;
    }

    .its-a-news:first-of-type {
        margin-top: 35px;
    }

    .its-a-news:nth-child(even) {
        margin-top: 75px;
        margin-left: 0;
    }
}

#page-heading {
    color: white
}

@media (max-width: 720px) {
    h1 {
        font-size: 10.0vw;
    }

    #page-heading h1 {
        font-size: 9.0vw;
        padding: 10px;
    }
}

@media (max-width: 550px) {
    #bottom-left {
        width: 100%;
    }

    #bottom-middle {
        width: 100%;
        margin-top: 25px;
        margin-left: 0;
    }

    #bottom-right {
        width: 100%;
        margin-left: 0;
        margin-top: -15px;
    }

    #ultra-bottom-left {
        width: 100%;
        margin-top: 25px;
    }

    #ultra-bottom-right {
        width: 100%;
        margin-left: 0;
        margin-top: -15px;
    }
}

@media (max-width: 460px) {
    h1 {
        font-size: 9.0vw;
    }

    #hero {
        min-height: auto;
    }

    #hero .container {
        display: block;
    }

    #img-logo {
        width: 100%;
        position: relative;
    }

    #hero-content-box {
        margin-top: 75px;
    }

    .its-a-news h2 {
        font-size: 6.0vw;
    }

    .published {
        font-size: 15px;
        width: 100px;
        height: 100px;
    }

    .published span {
        font-size: 20px;
    }
}

.read-more-button-wrap {
    text-align: right;
    opacity: 0.8;
    text-transform: uppercase;
}

.read-more-button-wrap:hover {
    opacity: 1;
}

.btn{
    width:auto;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--red-main);
    border: 2px solid var(--red-main);
    border-radius: 5px;
    padding: 10px 18px;
    color: var(--light-text);
    text-align: center;
    display: inline-block !important;
    transition-duration: 0.5s;

}



.btn-danger{
    background-color: var(--red-light-1);
    border: 2px solid var(--red-light-1);
    color: var(--light-text);
}
.btn-info{
    background-color: var(--blue-light-1);
    border: 2px solid var(--blue-light-1);
    color: var(--light-text);
}
.btn-warning{
    background-color: var(--yellow-main);
    border: 2px solid var(--yellow-main);
    color: var(--light-text);
}

.btn-default{
    background-color: var(--gray-main);
    border: 2px solid var(--gray-main);
    color: var(--light-text);
}

.btn-primary{
    background-color: var(--red-main);
    border: 2px solid var(--red-main);
    color: var(--light-text);
}

.btn-success{
    background-color: var(--blue-main);
    border: 2px solid var(--blue-main);
    color: var(--light-text);
}

.btn-success:hover {
    background-color: var(--blue-main);
    border-color: var(--blue-main);
}
.btn-warning:hover {
    color: var(--light-text);
    background-color: var(--yellow-main);
    border-color: var(--yellow-main);
}
.btn-primary:hover {
    background-color: var(--red-main);
    border-color: var(--red-main);
}
.btn-info:hover {
    background-color: var(--blue-light-1);
    border-color: var(--blue-light-1);
}
.btn-default:hover {
    color: var(--light-text);
    background-color: var(--gray-main);
    border-color: var(--gray-main);
}

.partner-logo{
    display: inline-block;
    padding: 1em;
}


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

/*	13. Site Pagination
/* -------------------------------------------------------------------------- */

.pagination {
    color: var(--light-text);
}

.pagination .nav-links {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-size: 1.3rem;
    font-weight: 600;
    margin: -1.5rem 0 0 -2.5rem;
    width: calc(100% + 2.5rem);
}

.pagination-separator {
    margin: 5rem 0;
}

.nav-links > * {
    margin: 1.5rem 0 0 2.5rem;
}

.nav-links .placeholder {
    display: none;
    visibility: hidden;
}

.pagination a {
    text-decoration: none;
    color: var(--gray-light-1);

}

.pagination a:focus,
.pagination a:hover {
    text-decoration: underline;
}

.pagination .dots {
    transform: translateY(-0.3em);
    color: #6d6d6d;
}

.nav-short {
    display: none;
}
.pagination .screen-reader-text {
    display: none;
}

em {
    font-weight: normal;
    color: var(--red-main);
    background: none;
    font-style: normal;
}

.contacts-department-title {
    margin-bottom: 1em;
}

.contacts-department {
    padding-left: 1em;
    margin-bottom: 2em;
}

.contacts-row {
    margin-bottom: 1em;
}

.contacts-person {
    padding: 0.2em;
    margin-bottom: 0.5em;
}

.employee-image{
    width:120px;
    height:120px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom: 1.2em;
}

#page .container a {
    color: var(--red-main) !important;
}