/*
Theme Name: Achtung.ee
Author: Ragnar Kullamäe
Version: 1.0.0
License: GNU General Public License
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: achtung.ee
*/

/*=====================
    1.0 - RESET
=======================*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
strong{font-weight:bold;}

/*==========================
    2.0 - GENERIC STYLES
============================*/

    html { font-size: 62.5%; }  /* =10px */

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    html,body{width:100%; height:100%; margin:0;}

    body {
        font-family: 'Merriweather Sans', sans-serif;
        font-size: 1.6rem;
    }

    a:link, a:active, a:visited {
        color:#000;
        text-decoration: none
    }

    p, td, a{
        line-height:1.5;
        font-family: 'Merriweather Sans', sans-serif;
    }

    input, textarea{
        font-family: "Oswald", sans-serif;
        font-weight: 600;
        font-size: 2rem;
    }

    h1, h2, h3, h4, h5, h6,
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        font-family: "Oswald", sans-serif;
        line-height: 1.5;
    }

    h1 {
        font-size: 2.8rem;
        text-transform: uppercase;
        font-weight: 600;
    }

    h2,
    h2 a{
        font-weight: 600;
        font-size: 2.2rem;
        text-transform: uppercase;
    }

    h3 {
        font-weight: 600;
        font-size: 2.8rem;
        text-transform: uppercase;
    }

    .feedback{
        padding-top: 4rem;
    }

    .feedback__container {
        display: flex;
        flex-wrap: wrap;
    }

    .feedback h3.feedback__title{
        font-size: 3rem;
        padding-bottom: 2rem;
    }
    .feedback__container__content{
        width: 50%;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    .feedback__container__content__item{
        margin-right: 2rem;
    }

    .feedback__container__content{

    }

    .feedback__container__item blockquote{
    }


    blockquote {
        border-left: 1rem solid #000;
        background: #ededed;
        padding: 2rem;
        position: relative;
        margin-bottom: 2rem;
        margin-right: 2rem;
        width: 100%;
    }

    blockquote:before {
        color: #000;
        content: "“";
        margin-bottom: 2rem;
        font-size: 8rem;
        font-weight: bold;
        position: absolute;
        left: 2rem;
        top: 2rem;
    }

    blockquote p.quote-content {
        padding-left: 7rem;
        padding-bottom: 0;
    }

    blockquote p.quote-author {
        display: block;
        position: relative;
        font-family: "Oswald", sans-serif;
        font-weight: 600;
        padding: 0;
        text-align: right;
        padding-top: 1rem;
        text-transform: uppercase;
    }

     blockquote p.quote-author:before{
         content : "\f068";
         font-family: "FontAwesome";
         font-size: 1.2rem;
         padding-right: 2rem;

     }

     iframe{
         width: 100%;
         min-height: 20rem;
     }

    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000;
    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #000;
    opacity:  1;
    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #000;
    opacity:  1;
    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #000;
    }

    .homepage-link{
        white-space: nowrap;
    }

/*=============================
    3.0 - GENERIC CLASSES
===============================*/
    .bg-cover {
        background-size: cover;
        background-position: 50% 50%;
    }

    .flex{ display: flex; }

    .entry-title{
        padding: 2rem 0 2rem;
    }

/*=============================
    4.0 - SITE SECTIONS
===============================*/

#logo {
    margin-top: 41px;
}

#logo img {
    height: 80px;
}

#wrapper{
    width: 1366px;
    margin: 0 auto;
    background: #fff;
    padding: 0 2rem;
}

.header{
    background-color: #fff;
    padding-top: 1rem;

}


.landing-header{
    display: flex;
    justify-content: space-between;
    padding: 4rem 0;
    align-items: center;
}

.landing-title{
    padding-right: 4rem;
}

.content .container{
    display: flex;
    margin-top: 4rem;
}


.content article{
    width: 70%;
    padding-right: 4rem;
}

article.type-page a{
    text-decoration: none;
}

.content article img{
    max-width: 100%;
}

.content aside{
    width: 30%;
    background: #ededed;
    padding-bottom: 2rem;
}

.header .container{
    width: 100%;
}

    .container{width:100%; margin:0 auto;}

.subpage article .header {
    display: flex;
    justify-content: space-between;
    padding: 0 0 2rem;
}

.subpage h1{
    font-size: 3rem;
}

.subpage h2{
    padding: 0 0 2rem;
    font-size: 2.5rem;
}

.subpage h3{
    padding: 0 0 2rem;
    font-size: 2.5rem;
}

.subpage p {
    padding: 0 0 2rem;
}

.subpage a{
    text-decoration: underline;
}

.search-page h2 {
    font-size: 3rem;
    padding: 2rem 0;
}
.search-page p{
    padding: 0 0 3rem;
}

.search-page .header{
    padding-top: 2rem;
}


/*=============================
    5.0 - SITE COMPONENTS
===============================*/

    /*=============================
        5.1 - MAIN SERVICES BLOCK
    ===============================*/

    .mainservices {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .mainservices__service-wrapper {
        width: 100%;
        height: 40rem;
        width: calc(100% * (1/3) - 2rem);
        margin: 0 0 3rem;
    }
    .mainservices__service-wrapper:last-child {
        margin-right: 0;
    }

    .mainservices__service {
        height: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
    }

    .mainservices__service__readmore,
    .mainservices__service__title {
        width: 100%;
        color: #fff;
        background: rgba(0,0,0,0.6);
        padding: 2rem;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 2.2rem;
        text-align: center;
        display: flex;
        align-items: center;
        transition: all .3s ease-in-out;
        position: relative;
    }

    .mainservices__service__readmore a,
    .mainservices__service__title a {
        color: #fff;
        width: 100%;
        text-align: center;
        position: relative
    }

    .mainservices__service__readmore a{
        top: 100%;
    }

    .mainservices__service__readmore a{
        font-family: "Oswald", sans-serif;
    }

    .mainservices__service__readmore:hover a{
        text-decoration: underline;
    }

    .mainservices__service__text {
        height: 100%;
        background: rgba(0,0,0, .8);
        color: #fff;
        font-size: 1.8rem;
        padding: 4rem;
        transition: all .3s ease-in-out;
    }

    .mainservices__service .mainservices__service__readmore,
    .mainservices__service .mainservices__service__text  {
        opacity: 0;
    }

    .mainservices__service:hover .mainservices__service__readmore,
    .mainservices__service:hover .mainservices__service__text  {
        opacity: 1;
    }

    .mainservices__service:hover .mainservices__service__title,
    .mainservices__service:hover .mainservices__service__readmore{
        background: rgba(0,0,0, 1);
    }

    .mainservices__service:hover .mainservices__service__readmore a{
        top: 0;
    }

    /*=============================
        5.2 - REASON LIST
    ===============================*/

    .reasonlist {

    }
    .reasonlist__title {
    }
    .reasonlist_container {
        padding: 0 0 2rem;
    }
    .reasonlist_container__item {
        padding: 0 0 2.5rem 5rem;
        position: relative;

    }
    .reasonlist_container__item p{
        font-size: 1.6rem;
    }
    .reasonlist_container__item:before{
        position: absolute;
        font-size: 3rem;
        left: 0;
        top: 0;
    }

    /*=============================
        5.3 - SUBSERVICE BLOCKS
    ===============================*/

    .subservices {

    }
    .subservices__service {
        display: flex;
        padding: 0 0 2rem;
    }
    .subservices_service__image {
        width: 15rem;
        height: 10rem;
        margin-right: 2rem;
        cursor: pointer;
        border: 1px solid #000;
    }
    .subservices_service__content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 2;
        width: 100%;
    }
        h4.subservices__service__content__title a {
            font-family: 'Merriweather Sans', sans-serif;
        }

        .subservices__service__content__readmore {
            display: flex;
            justify-content: flex-end;
        }
        .subservices__service__content__readmore a {
            font-weight: 200;
            font-family: "Oswald", sans-serif;
            text-transform: uppercase;
        }

    /*=============================
        5.4 - NEWS LIST
    ===============================*/

    .newslist__item {
        display: flex;
        padding: 0 0 2rem;

    }

    .category .category-news {
        display: flex;
        flex-wrap: wrap;
    }
    .category .newslist__item {
        display: flex;
        width: 50%;
        padding: 0 4rem 4rem 0;
    }

    .newslist__item__image {
        width: 15rem;
        height: 10rem;
        margin-right: 2rem;
        cursor: pointer;
        border: 1px solid #000;
    }
    .newslist__item__content{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-grow: 2;
        width: 100%;
    }
        h4.newslist__item__content__title a {
            font-family: 'Merriweather Sans', sans-serif;
        }

        .newslist__item__content__readmore {
            display: flex;
            justify-content: flex-end;
        }
        .newslist__item__content__readmore a {
            font-weight: 200;
            font-family: "Oswald", sans-serif;
            text-transform: uppercase;
        }

    /*=============================
        5.5 - GENERAL SECTION BLOCKS
    ===============================*/

    .sectionblocks{
        display: flex;
        justify-content: space-between;
        padding: 0 0 4rem;
    }
    .sectionblocks.bottom-section{
        padding-bottom: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
    .sectionblocks__item {
        position: relative;
        width: 100%;
        margin-right: 4rem;
    }

    .bottom-section .sectionblocks__item {
        width: calc(33.33% - 3rem);
    }

    .bottom-section .sectionblocks__item:nth-child(3n + 3) {
        margin-right: 0;
    }

    .bottom-section .sectionblocks__item:nth-child(n + 4) {
        margin-top: 30px;
    }

    .bottom-section .image__item {
        background-size: cover;
        width: 100%;
        background-color: #ededed;
        background-position: 50%;
    }

    .side__item .image__item{
        background-size: cover;
        background-color: #ededed;
        background-position: 50%;
    }

    .paypal{
        position: absolute;
        bottom: -1rem;
        left: 50%;
        transform: translateX(-50%);
    }

    .sectionblocks__item__container__title {
        padding: 0 0 2rem;
        margin-bottom: 3rem;
        border-bottom: 6px solid #000
    }

    .sectionblocks__item:last-child {
        margin-right: 0;
    }
    .sectionblocks__item__container {

    }

    .footer-text-section {
        margin-top: 30px;
    }

/*=============================
    5.6 - NAVIGATIONS
===============================*/

.navigation{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    font-family: "Oswald", sans-serif;
    padding-top: 1rem;
}

.navigation__languages{
    list-style: none;
}
    .navigation__languages li {
        display: inline-block;
    }

        .lang-item:before{
            content: "/";
            margin-left: 1rem;
            font-weight: 200;
        }

        .lang-item:first-child:before{
            display: none;
        }

       .lang-item a {
            color: #000;
            font-weight: 200;
            margin: 0 0 0 1.2rem;
            text-transform: uppercase;
            font-family: "Oswald", sans-serif;
        }

        .lang-item.current-lang a {
            font-weight: 600;
        }

.menu{
    display: flex;
    padding-top: 2rem;
}
    .navigation__menu a {
        width: 100%;
        text-transform: uppercase;
        font-size: 1.7rem;
        font-weight: 600;
        padding: 1rem 0;
        margin: 0 0 0 2rem;
        transition: all .3s ease-in-out;
        border-bottom: 0px solid #fff;
        font-family: "Oswald", sans-serif;
    }
    .navigation__menu a:hover {
        border-bottom: 6px solid #555;
     }
    .current-menu-item a {
        border-bottom: 6px solid #000;
    }

    .navigation__menu .menu-item:first-child a{
        margin: 0;
    }

    div.mobile__menu {
        display: none;
    }

    .footer .navigation{
        align-items: flex-start;
        flex-direction: row;
        justify-content: space-between;
    }

    .navigation__top {
        display: flex;
        align-items: center;
    }

    .navigation__top .social {
        display: flex;
        align-items: center;
    }

    .navigation__top .instagram-logo img,
    .navigation__top .tripadvisor-logo img,
    .navigation__top .fb-logo img {
        height: 35px;
        margin-right: 15px;
    }

    .navigation__top .tripadvisor-logo img {
        height: 40px;
    }
/*=============================
    5.7 - SLIDESHOW
===============================*/

.slideshow{
    padding-top: 1rem;
}

/*=============================
    5.8 - SEARCH
===============================*/
.search{
    display: flex;
}
.search__input {
    height: 3.8rem;
    border: none;
    border-bottom: 6px solid #000;
    line-height: 2.8rem;
}
.search__button {
    height: 3.8rem;
    width: 3.8rem;
    border: none;
    border: none;
    background: #000;
    line-height: 2.8rem;
    cursor: pointer;
    color: #fff;
    font-size: 1.8rem;
}

/*=============================
    SIDEBAR
===============================*/

.side__item{
    padding-bottom: 2rem;
    padding: 4rem;
    padding-bottom: 0;
}

.side__item .form-label {
    font-size: 1.5rem;
    padding-bottom: 2rem;
}
.side__item .form-label strong{
    padding-bottom: 1rem;
    display: inline-block;
}

.side__item .small-label{
    font-size: 1.2rem;
    line-height: 1;
    padding-bottom: 1rem;
}

.fb-logo{
    max-width: 50%;
}
.fb-logo img{
    max-width: 100%
}

.hp-wrap, .ninja-forms-required-items {
    display: none;
}

.field-wrap, #ninja_forms_required_items{
    margin-bottom: 0;
}

.page form textarea, .page form input,
.social form textarea, .social form input,
.side__item form textarea, .side__item form input{
    padding: 1rem;
    resize: none;
    border:1px solid #000;
    background: transparent;
    width: 100%;
    max-height: 10rem
}

.page .submit-wrap,
.social .submit-wrap,
.side__item .submit-wrap {
    background-color: #000;
    margin-bottom: 0;
}

.page .submit-wrap input,
.social .submit-wrap input,
.side__item .submit-wrap input{
    color: #fff;
    cursor: pointer;
    text-transform: uppercase;
}

.field-wrap, #ninja_forms_required_items{
    margin-bottom: 20px;
}

.ninja-forms-field-error {
    padding: 2rem 0 0;
}

.contact__form{
    background: #ccc;
    padding-bottom: 4rem;
}

article.page .ninja-forms-cont{
    width: 50%;
    padding-bottom: 4rem;
}

/*=============================
   SOCIAL
===============================*/

    .socialblock__container{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;

        justify-content: space-around;
        padding-top: 1rem;
    }

    .TA_rated{
        position: relative;
        top: -10px;
    }

    .social__item{
        display: flex;
        justify-content: space-around;
        align-items: flex-start;
    }

/*=============================
    GALLERY
===============================*/

a.gallery-image {
    display: inline-block;
    margin: 0 5px 10px;
    line-height: 0;
    border: 1px solid #000;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

a.gallery-image:hover{
    opacity: .8;
}

/*=============================

===============================*/

body{background: #fff;}

#content{
    margin: 0 auto;
}

#footer {
    width:100%;
    border-top:6px solid #000;
    padding:2rem 0;
    margin: 4rem auto 0;
    display: flex;
}

    #footer .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }
        .footer__item {
            padding-left: 4rem;
        }
            .footer__item p,
            .footer__item a{
                font-family: "Oswald", sans-serif;
                font-weight: 400;
                text-transform: uppercase;
                font-size: 1.4rem;
            }
        .footer__item:first-child {
            padding: 0;
        }

/*=============================
    MEDIA QUERIES
===============================*/

@media screen and (max-width : 1370px){

    html {

    }

    #wrapper{
        width: 98%;
        padding: 0 1%;
    }

    #content, .header .container, #footer {
        width: 100%;
    }

    #footer{
        padding: 2rem 0;
    }

    .container, .header{
        width: 100%;
    }
}

@media screen and (max-width : 1300px){
    .navigation__menu a {
        font-size: 1.5rem;
        margin: 0 0.8rem;
    }
}


@media screen and (max-width : 1162px){

   #logo img{
       max-width:100%;
   }

   .navigation{
       padding-top: 0;
   }

   .navigation__languages{
       padding-bottom: 1rem;
   }

   #menu-achtung-ee{
       padding-top: 0;
   }

   .navigation__menu a{
       font-size: 1.6rem;
   }

}

@media screen and (max-width : 1162px){

   #logo img{
       max-width:100%;
   }

   .navigation{
       padding-top: 0;
   }

   .navigation__languages{
       padding-bottom: 1rem;
   }

   #menu-achtung-ee{
       padding-top: 0;
   }

   .navigation__menu a{
       font-size: 1.6rem;
   }

}

@media screen and (max-width : 1162px){

    .navigation__top {
        width: 100%;
    }

    .navigation__top .social {
        width: 100%;
    }

    .navigation__menu {
        margin-top: 40px;
    }

    .menu-item {
        margin: 0 0.6rem;
    }

    .menu-item a {
        margin: 0!important;
        text-align: center;
    }

    #wrapper {
        width: 96%;
        padding: 0 2%;
    }

    .paypal{
        position: relative;
    }

    #content, .header .container, #footer{
        width: 100%;
    }

    .header .container{
        flex-direction: column;
        justify-content: center;
        align-content: center;
    }
        #logo{
            text-align: center;
        }

        .navigation__menu,
        .navigation__languages {
            width: 100%;
            text-align: center;
        }

        .menu{
            justify-content: center;
            padding: 2rem 0 4rem;
        }

    .search {
        display: none;
     }

}

@media screen and (max-width : 850px){

    .navigation__top {
        flex-direction: column;
        margin-top: 20px;
        width: 100%;
    }

    .bottom-section .sectionblocks__item {
        width: 100%;
        margin-top: 3rem;
    }

    img {
        max-width: 100%;
    }

    .navigation__languages{
        margin-top: 20px;
    }

    .navigation__languages ul li:first-child a {
        margin-left: 0;
    }

    .content .container{
        flex-direction: column;
    }

    .homepage-link{display: none;}

    .content article,
    .content aside {
        width: 100%;
    }

    .content article{
        padding-right: 0;
    }

    #logo{
        text-align: left;
        width: 75%;
    }

    .navigation__menu{
        display: none;
    }

    .navigation__menu-active{
        position: fixed;
        background-color: rgba(0,0,0,.8);
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 8;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .menu {
        flex-direction: column;
    }

    .menu a{
        color: #fff;
        font-size: 2.2rem;
        padding: 1rem 0;
        display: inline-block;
        margin: 0;
        border:none;
    }

    .navigation__menu a:hover {
        border: none;
     }
    .current-menu-item a {
        border:none;
        text-decoration: underline;
    }

    div.mobile__menu{
        display: block;
        width: 5rem;
        height: 5rem;
        background: rgba(0,0,0,.8);
        position: fixed;
        top: 2rem;
        right: 2rem;
        z-index: 10;
        color: #fff;
    }

    .menu-achtung-ee-container{
        overflow: auto;
    }

    .mobile__menu:before{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 2.5rem;
        height: 100%;
    }

    .slideshow {
        display: none;
    }

    .sectionblocks,
    .mainservices {
        flex-direction: column;
    }

    .mainservices__service-wrapper{
        margin: 0 0 2rem 0;
    }

    .feedback__container__content{
        width: 100%;
    }

    .feedback__container__content blockquote{
        margin-right: 0;
    }

    #footer {
        padding: 1rem 0;
    }
        #footer .container{
            flex-direction: column;
            text-align: center;
        }
            .footer__item{
                padding: .5rem 0;
            }

    .mainservices__service-wrapper{
        width: 100%;
    }
}