/*
Theme Name: Toja
Version: 1.01
Author: Jason
Template: twentytwenty
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
}

.article-inner p:first-child, .serviceContent p:first-child {
    padding-top: 0;
}

.article-inner p:last-child, .serviceContent p:last-child {
    padding-bottom: 0;
}

.article-inner p, .serviceContent p {
    padding-top: 10px;
    padding-bottom: 10px;
}

.article-inner ul, .serviceContent ul {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 40px;
}

html, body {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin: 0;
    padding: 0;
    background-color: #333;
    color: #333;
}
body {
    width: 100%;
    overflow-x: hidden;
}
p {
    line-height: 1.3rem
}

footer {
    box-shadow: 0px -5px 10px #333;
    background-color: #fff;
    padding: 20px;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
}

a {
    color: #333;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

#menuBar {
    display: flex;
    padding: 20px;
    background-color: #fff;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 2002;
    box-shadow: 0px 5px 10px #333;
}

nav {
    margin-left: auto;
    background-color: #fff;
    display: flex;
    align-items: center;
    margin-right: 60px;
    color: #4998bb;
}

nav ul {
    margin: 0px;
    padding: 0px;
}

nav ul li  {
    display:inline;
    font-weight:bold;
    margin: 5px;
    font-size: 1.25em;
    color: #4998bb;
}
nav ul li a {
    color: #4998bb;
    text-display: none;
}

nav ul li a:hover {
    text-display: underline;
}

section {
    width: 100vw;
    min-height:calc(100vh - 180px);
    transition: all 0.5s;
    justify-content: center;
    align-items: center;
    display: flex;
}

section .section-inner {
    /*width: 100%;
    max-width: 900px;
    */
    width:80%;
}

section article .article-inner {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 0 10px 0 10px;
    box-shadow: 5px 5px 10px #333;
    transform-origin: center;
    transition: transform 0.1s, box-shadow 0.5s;
}

.expander {
    display: block;
    width: 50px;
    height: 50px;
    margin: 15px auto;
    text-indent: 100%;
    overflow: hidden;
    cursor: pointer;

    transition: transform 0.5s;
}

.expander-up {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMTEyRkVFNTA1QkYxMUU2OEY3OUY1NEQyMjdFMDlEQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMTEyRkVFNjA1QkYxMUU2OEY3OUY1NEQyMjdFMDlEQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYxMTJGRUUzMDVCRjExRTY4Rjc5RjU0RDIyN0UwOURBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYxMTJGRUU0MDVCRjExRTY4Rjc5RjU0RDIyN0UwOURBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bEZ26wAAAuZJREFUeNrkmj1oFEEYhicnh3JJoaiF4KmNJvGvihYnXEgRsLAQK+FCqoB2AcH2rMUqhQpCQOWuEhOEKAkKEYOikEJBNGih+MehRRTuVCyyvl94F9Zwe3c7O5vdWV94irvdmXm/m5+bb3a7HMdRhtQHhsAA2Af2gh7QzesNUAdvwRuwCObBkonGu0IG0g9GQQnkNev4BCrgJnit7UQC0aAAZh3zmmXdgT0FLZAHU070mmJbkQQyBhrO+qnBNo0FkgMVJz5V6KGlz3aTfQuYAQUVr56AE2BZZ9WSIB6BgyoZegmKfsFkfArl2BNJCULRywy9dRzItQQMp2Yq0FtHgYzxDy6pKtFjyzmS55Yhp5Ktn9wSffTrkQkLgnDn8IRfj8j4e6zs0jEuzf/0SFnZp/LaHpFd7Ctlp/bLrtntkVFlr0a9PSKzf6elgUg+k5dA+kIlNMlQf4bpqe0ayjDHDqo74DxYMWjmBzjNnD6oBmQvvxAwP/gMepgHHAffDeQcS6CXdR4CKwHLL0jBmkbDl0GWDffSiK7ugs2saxt4qFFHTQrXNQ3Mg600IEbuadRxEWxgHYfBe00vdRVySLzjUFA0dKnDcr9AyZOqngrxg65KGRjfYuCkx9QI+N1mjh3hvbL8XzCR2Kuwv4RHZRqTOo+CL03ueQp28J5ucNtQ23Xdye6nWzSoaPiZ59oNsJHX9oAXBtut6Sy/7fQc7KbhTeA6OOcZeoPgm+E2V5ffyQjOor6CYpPzp7PgTwTtTWZ4Km5a28EDcIafs+AqyUbQ3uJ6bBqvgANgMMpNo7uN/xDisUDckhRkl5tYVS3e+VZTmerKHJmzMIg5d36n8jhIvpi2KIhpN4hUH5nKhXELemPcG0SzHnFVSfCJvCy3I+1O472HxPdV8p6RyJwY5tDqKBBRKh69KRYoeleGmHvCN4h2gbjBDMe8hanSw3LLu/6nFwZS9wpHol+qSc1rTmED8SrWF8/+CjAAbjkm8qNi9FkAAAAASUVORK5CYII=) 0 0 no-repeat;
    transform: rotate(180deg);
}

.expander-down {
    background: transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGMTEyRkVFNTA1QkYxMUU2OEY3OUY1NEQyMjdFMDlEQSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGMTEyRkVFNjA1QkYxMUU2OEY3OUY1NEQyMjdFMDlEQSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkYxMTJGRUUzMDVCRjExRTY4Rjc5RjU0RDIyN0UwOURBIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkYxMTJGRUU0MDVCRjExRTY4Rjc5RjU0RDIyN0UwOURBIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+bEZ26wAAAuZJREFUeNrkmj1oFEEYhicnh3JJoaiF4KmNJvGvihYnXEgRsLAQK+FCqoB2AcH2rMUqhQpCQOWuEhOEKAkKEYOikEJBNGih+MehRRTuVCyyvl94F9Zwe3c7O5vdWV94irvdmXm/m5+bb3a7HMdRhtQHhsAA2Af2gh7QzesNUAdvwRuwCObBkonGu0IG0g9GQQnkNev4BCrgJnit7UQC0aAAZh3zmmXdgT0FLZAHU070mmJbkQQyBhrO+qnBNo0FkgMVJz5V6KGlz3aTfQuYAQUVr56AE2BZZ9WSIB6BgyoZegmKfsFkfArl2BNJCULRywy9dRzItQQMp2Yq0FtHgYzxDy6pKtFjyzmS55Yhp5Ktn9wSffTrkQkLgnDn8IRfj8j4e6zs0jEuzf/0SFnZp/LaHpFd7Ctlp/bLrtntkVFlr0a9PSKzf6elgUg+k5dA+kIlNMlQf4bpqe0ayjDHDqo74DxYMWjmBzjNnD6oBmQvvxAwP/gMepgHHAffDeQcS6CXdR4CKwHLL0jBmkbDl0GWDffSiK7ugs2saxt4qFFHTQrXNQ3Mg600IEbuadRxEWxgHYfBe00vdRVySLzjUFA0dKnDcr9AyZOqngrxg65KGRjfYuCkx9QI+N1mjh3hvbL8XzCR2Kuwv4RHZRqTOo+CL03ueQp28J5ucNtQ23Xdye6nWzSoaPiZ59oNsJHX9oAXBtut6Sy/7fQc7KbhTeA6OOcZeoPgm+E2V5ffyQjOor6CYpPzp7PgTwTtTWZ4Km5a28EDcIafs+AqyUbQ3uJ6bBqvgANgMMpNo7uN/xDisUDckhRkl5tYVS3e+VZTmerKHJmzMIg5d36n8jhIvpi2KIhpN4hUH5nKhXELemPcG0SzHnFVSfCJvCy3I+1O472HxPdV8p6RyJwY5tDqKBBRKh69KRYoeleGmHvCN4h2gbjBDMe8hanSw3LLu/6nFwZS9wpHol+qSc1rTmED8SrWF8/+CjAAbjkm8qNi9FkAAAAASUVORK5CYII=) 0 0 no-repeat;

}

.navigator {
    position: fixed;
    /*top: 10%;*/
    top: 200px;
    right: 40px;
    /*height: 80%;*/
    height: 700px;
    width: 1px;
    background-color: #333;
    z-index: 9999
}

.grid {
    /*
    display: flex;

    flex-direction: row;
    flex-wrap: wrap;
    */

    display: flex;
    flex-wrap: wrap;
    /*width: 300px;*/
    justify-content: center;
}

.grid >h1 {
    display: none;
}

.service-link {
    cursor: pointer;
}

section .grid article {
    width: 300px;
}

section .grid .article-inner header {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    opacity: 0.75;
}

section .grid .article-inner {
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px;
}

.scroll-point {position: absolute; right: 20px; font-size: 1rem; white-space: nowrap; color: #333; line-height: 1; cursor: pointer;}
.scroll-point::after {position: absolute; width: 20px; height: 20px; border-radius: 10px; background-color: #333; left: calc(100% + 10px); content: '';}
.scroll-active {width: 20px; height: 20px; border-radius: 10px; background: #ffa800; box-shadow: 2px 2px 40px 20px #ffa800; position: absolute; left: -10px;/* transition: 0.1s top*/}
.scroll-active {
    background: #333;
    box-shadow: 2px 2px 40px 10px #333;
}

.scroll-point-active:after {
    background: #333;
    box-shadow: 2px 2px 40px 10px #333;

}


.sections {}

section article {padding: 20px; perspective: 1000px}


/* section article .article-inner:hover {box-shadow: 5px 5px 40px 20px #ffa800} */
section article.motion .article-inner {/*transition: all 0.08s;*/}
section article header {}
section .related {padding: 10px; background-color: rgba(0, 0, 0, 0.8); border-radius: 5px; position: absolute; left: calc(100% - 50px); top: calc(100% - 50px); box-shadow: 5px 5px 10px #333; opacity: 0; transition: 0.5s all; width: 250px;}
section.active .related {opacity: 1;}


.service-area p {

}

.service-area ul {
    margin-left: 40px;
}

.box-overlay:hover {
    background-color: rgba(0,46,61,0.29) !important;
}

.box-overlay {
    cursor: pointer;
}

#menu-header >li >a {
    color: #4998bb;
    text-decoration: none;
}

#menu-header >li >a:hover {
    text-decoration: underline;
}

input {
    border: 1px solid #333;
}

input[type=submit] {
    background-color: rgb(183,32,37);
    text-decoration: none;
    display: inline-block;
    margin: 10px 0;
    padding: 10px 20px;
    font-weight: 300;
    font-size: 140%;
    color: white;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #333333;
}

section .grid .article-inner header {
    margin: 10px;
}

#wprmenu_bar .bar_logo {
    height: 140px;
    margin-left: 20px;


    height: 110px;
    margin-left: 20px;
    margin-top: 10px;
}

#wprmenu_bar .menu_title a {
    top: -50px;
}

section .grid .contact-box {
    width: 400px;
}

section .grid .contact-box >div {
    background-size: 400px 400px;
    height: 400px;
}
section .grid .contact-box >div >div {
    width: 400px;
    height: 400px;
}

#wprmenu_menu_ul {
    text-align: center;
}

#mg-wprm-wrap {
    /*display: flex;
    justify-content: center;
    align-items: center; */
    /*padding-top: 100px;*/
}

.wprm_after_menu_content {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.wprm_after_menu_content >div> a {
    padding: 10px;
}

.wprm_after_menu_content >hr {
    border: 1px solid #4998bb;
}

@media only screen and (max-width: 1060px) {
    .navigator {
        display: none;
    }

    .article-inner-h1 {
        text-align: center;
        padding-bottom: 15px;
    }

    section .section-inner {
        width: 100%;
    }

    .mobile-column {
        flex-direction: column;
        align-items: center;
    }

    .mobile-column >article {
        width: 90% !important;
    }
}

@media only screen and (max-width: 1000px) {
    .section-side-img {
        display: none;
    }
}
@media only screen and (max-width: 702px) {
    footer >div {
        flex-direction: column;
    }

    footer >div >div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center;
    }
}


@media only screen and (max-width: 430px) {
    section .grid .contact-box {
        width: 300px
    }

    section .grid .contact-box >div {
        background-size: 300px 300px;
        height: 300px;
    }

    section .grid .contact-box >div >div {
        width: 300px;
        height: 300px;
    }
}