/*--------------------------------------------------*\

	Grid modifications

\*--------------------------------------------------*/

.container {

    max-width: 100%;

}





/*--------------------------------------------------*\

	Global

\*--------------------------------------------------*/

body {

    margin: 0;

    font-family: var(--font-family);

    font-size: var(--font-size);

    font-weight: var(--font-weight);

    line-height: var(--line-height);

    color: var(--color-text);

}

#jtg-957.modula-gallery .modula-item > a, #jtg-957.modula-gallery .modula-item, #jtg-957.modula-gallery .modula-item-content > a {
    cursor: auto !important;
}



img {

    display: block;

    max-width: 100%;

    height: auto;

}



h1, h2, h3, h4, h5, h6 {

    margin: 30px 0 10px;

}



h1 {

    font-size: 36px;

    line-height: 46px;

}



h2 {

    font-size: 28px;

    line-height: 38px;

}



h3 {

    font-size: 24px;

    line-height: 34px;

}



h4 {

    font-size: 20px;

    line-height: 30px;

}



p {

    margin: 0 0 20px;

}



a,

a:link,

a:active,

a:visited {

    color: var(--color-link);

    text-decoration: none;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



a:hover {

    color: var(--color-link-hover);

}



a.btn {

    display: inline-block;

    padding: 6px 12px;

    border-radius: var(--border-radius);

    color: var(--color-button-text);

    background-color: var(--color-secondary);

    font-weight: var(--font-weight-medium);

}



a.btn:hover {

    background-color: var(--color-secondary-accent);

}



a.btn i {

    margin-left: 5px;

    font-size: 15px;

}



input,

textarea,

select {

    width: 100%;

    margin: 10px 0 1rem;

    padding: 10px 20px;

    box-sizing: border-box;

    border: 1px solid var(--border-color);

    font-family: var(--font-family);

    font-size: var(--font-size);

    line-height: var(--line-height);

    color: var(--color-text);

    outline: 0;
    
    -webkit-appearance: none;

}



input[type="checkbox"] {

    width: auto;

    margin-right: 5px;

}



input[type="submit"] {

    width: auto;

    margin: 0;

    padding: 10px 20px;

    border-radius: var(--border-radius);

    color: var(--color-button-text);

    background-color: var(--color-secondary);

    font-weight: var(--font-weight-medium);

    border: none;

    cursor: pointer;

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



input[type="submit"]:hover {

    background-color: var(--color-secondary-accent);

}



.slick-slider {

    margin: 0 25px;

    padding: 0 20px;

}



.slick-prev:before,

.slick-next:before {

    font-size: 28px;

    opacity: 1;

    color: var(--color-primary);

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.slick-prev:hover:before,

.slick-next:hover:before {

    color: var(--color-primary-accent);

}





/*--------------------------------------------------*\

	WordPress core block modifications

\*--------------------------------------------------*/

.has-small-font-size,

.has-normal-font-size,

.has-regular-font-size,

.has-medium-font-size {

    line-height: var(--line-height);

}



.has-large-font-size,

.has-huge-font-size,

.has-larger-font-size {

    line-height: 140%;

}



figcaption {

    margin-top: 10px;

    text-align: center;

    font-weight: var(--font-weight-thin);

}



.blocks-gallery-grid .blocks-gallery-image figcaption,

.blocks-gallery-grid .blocks-gallery-item figcaption,

.wp-block-gallery .blocks-gallery-image figcaption,

.wp-block-gallery .blocks-gallery-item figcaption {

    font-size: var(--font-size);

    font-weight: var(--font-weight);

}



blockquote {

    margin: 20px 0 20px 20px;

    padding: 5px 0 5px 15px;

    border-left: 5px solid var(--color-primary);

}



blockquote p {

    margin-bottom: 5px;

    font-size: var(--font-size-large);

    font-style: italic;

}



blockquote cite {

    font-weight: var(--font-weight-thin);

}



.wp-block-pullquote {

    margin: 0 0 20px 0;

    padding: 10px;

}



.wp-block-pullquote blockquote {

    border: none;

}



.wp-block-code,

.wp-block-preformatted {

    padding: 15px 20px;

    background-color: var(--color-background);

}



.wp-block-table {

    margin: 30px 0 20px;

}



.wp-block-table th,

.wp-block-table td {

    padding: 5px 10px;

    border: 1px solid var(--border-color);

    text-align: left;

}



.wp-block-table tfoot td {

    font-weight: var(--font-weight-bold);

}



.wp-block-table.is-style-stripes {

    border: none;

}



.wp-block-verse {

    max-width: 600px;

    margin: 20px auto;

    padding: 30px;

    box-sizing: border-box;

    font-style: italic;

    font-weight: var(--font-weight-thin);

    line-height: 34px;

    text-align: center;

}



.wp-block-image {

    margin: 20px 0;

}



.wp-block-image .alignleft {

    margin: 7px 25px 15px 0;

}



.wp-block-image .alignright {

    margin: 7px 0 15px 25px;

}



.wp-block-cover {

    margin: 20px 0;

    padding: 50px;

}



.wp-block-gallery {

    margin: 30px 0 15px;

}



.wp-block-file .wp-block-file__button {

    background-color: var(--color-primary);

    border-radius: var(--border-radius);

}



.wp-block-media-text {

    margin: 20px 0;

}



.wp-block-media-text .wp-block-media-text__content {

    line-height: normal;

}



.wp-block-video {

    margin: 20px 0;

}



.wp-block-buttons {

    margin: 20px 0;

}



.wp-block-buttons .wp-block-button {

    margin: 0;

}



.wp-block-buttons .wp-block-button__link {

    padding: 12px 30px;

    min-width: 250px;

    background-color: var(--color-secondary);

    color: var(--color-white);

    font-size: var(--font-size-small);

    border-radius: var( --border-radius);

    font-weight: var( --font-weight-medium);

}



.wp-block-buttons .wp-block-button__link:hover {

    background: #000;
    background: -webkit-linear-gradient(left, #000, #000);
    background: -moz-linear-gradient(left, #000, #000);
    background: -ms-linear-gradient(left, #000, #000);
    background: -o-linear-gradient(left, #000, #000);
    background: linear-gradient(to right, #000, #000);

}



.wp-block-buttons .is-style-outline .wp-block-button__link {

    padding: 8px 18px;

    border-color: var(--color-primary);

}



.wp-block-buttons .is-style-outline .wp-block-button__link:hover {

    background-color: var(--color-primary);

    color: var(--color-white);

}



.wp-block-separator {

    margin-top: 20px;

    margin-bottom: 20px;

    border-color: var(--border-color);

}



.wp-block-separator.is-style-default {

    max-width: 200px;

}



.wp-block-separator.is-style-dots:before {

    color: var(--border-color);

}



.wp-block-categories {

    margin: 20px 0;

}



.wp-block-spacer {

    margin: 20px 0;

}



.wp-block-group {

    margin: 20px 0;

}



.wp-block-group.has-background {

    padding: 20px 40px;

}



ol.wp-block-latest-comments {

    margin: 20px 0;

    padding: 0;

}



ul.wp-block-latest-posts__list {

    margin: 0;

}



ul.wp-block-latest-posts__list li {

    padding: 20px 0;

}



ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image.alignleft {

    float: left;

}



ul.wp-block-latest-posts__list li .wp-block-latest-posts__featured-image.alignright {

    float: right;

}



ul.wp-block-latest-posts__list li > a {

    display: block;

    margin-top: 10px;

    font-size: 22px;

    font-weight: 700;

}





/*--------------------------------------------------*\

	WordPress core widget modifications

\*--------------------------------------------------*/

.widget_search form.wp-block-search__button-inside .wp-block-search__inside-wrapper {

    padding: 10px;

    box-sizing: border-box;

}



.widget_search form input {

    margin-top: 0;

}





/*--------------------------------------------------*\

	Header

\*--------------------------------------------------*/

.top-header {

    padding-top: 5px;

    padding-bottom: 5px;

    font-size: var(--font-size-small);

    font-weight: var(--font-weight-thin);

    color: var(--color-white);

    background-color: var(--color-primary);

}



.top-header a {

    color: var(--color-white);

}



.top-header a:hover {

    color: var(--color-text);

}



.top-header .col-sm {

    flex-basis: auto;

}



.top-header .left,

.top-header .right {

    display: flex;

    flex-wrap: wrap;

}



.top-header .right {

    justify-content: flex-end;

}



.top-header .left div,

.top-header .right div {

    white-space: nowrap;

}



.top-header .left div:not(:last-child) {

    margin-right: 30px;

}



.top-header .right div:not(:first-child) {

    margin-left: 30px;

}



.top-header .left i,

.top-header .right i {

    margin-right: 5px;

    font-size: 12px;

}



.top-header .menu {

    display: flex;

    flex-wrap: wrap;

    margin: 0;

    padding: 0;

    list-style: none;

}



.top-header .left .menu li:not(:first-child) {

    margin-left: 30px;

}



.top-header .right .menu li:not(:last-child) {

    margin-right: 30px;

}



header {

    padding-top: 5px;

    padding-bottom: 5px;

    /*background-color: var(--color-white);*/

    box-shadow: 0 4px 10px -2px rgb(0 0 0 / 5%);

    position: absolute;

    width: -webkit-fill-available;
    
    background-color: transparent;

}



header.sticky {

    position: fixed !important;

    width: 100%;

    top: 0;

    box-sizing: border-box;

    z-index: 1;

    background-color: white !important;

}



.admin-bar header.sticky {

    top: 32px;

}



header .logo {

    max-width: 220px;

    align-self: center;

    font-size: 24px;

    font-weight: var(--font-weight-bold);

}



header .logo a {

    display: block;

}



header .navigation {

    display: flex;

    justify-content: flex-end;

    white-space: nowrap;

    align-items: center;

}



header .navigation .menu ul {

    display: flex;

    flex-wrap: wrap;

    margin: 0;

    padding: 0;

    justify-content: flex-end;

    list-style: none;

    font-size: 1rem;

}



header .navigation .menu a {

    display: block;

    padding: 20px 20px;

    color: var(--color-text);

    font-weight: var(--font-weight-medium);

}



header .navigation .menu a:hover {

    color: var(--color-primary);

}



header .navigation .menu.visible a {

    color: var(--color-white);

}



header .navigation .menu.visible a:hover {

    color: var(--color-text);

}



header .navigation .menu li:last-child a {

    padding-right: 0;

}



header .navigation .menu.visible li:last-child a {

    padding-right: 15px;

}



header .navigation .menu .sub-menu {

    display: none;

    position: absolute;

    margin-top: -10px;

    padding: 10px 20px;

    background-color: var(--color-white);

    box-shadow: rgb(0 0 0 / 5%) 0px 4px 10px -2px;

    z-index: 1;

}



header .navigation .menu .sub-menu a {

    padding: 5px;

}



header .navigation .menu.visible {

    display: block;

    position: fixed;

    top: 91px;

    right: 0;

    width: 100%;

    height: 100%;

    color: var(--color-white);

    /*background-color: var(--color-primary);*/

    background: var(--color-primary);
    background: -webkit-linear-gradient(left, var(--color-primary), var(--color-primary-accent));
    background: -moz-linear-gradient(left, var(--color-primary),var(--color-primary-accent));
    background: -ms-linear-gradient(left, var(--color-primary),var(--color-primary-accent));
    background: -o-linear-gradient(left, var(--color-primary),var(--color-primary-accent));
    background: linear-gradient(to right, var(--color-primary),var(--color-primary-accent));
}



header .navigation .menu.visible ul {

    display: block;

    padding: 30px 58px;

    text-align: right;

}



header .navigation .menu.visible > ul li:last-child {

    border: none;

}



header .navigation .menu.visible ul li {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    border-bottom: 1px dashed rgb(255 255 255 / 50%);

}





header .navigation .menu.visible ul li a:hover {

    color: var(--color-text);

}



header .navigation .menu.visible .sub-menu li:last-child {

    border: none;

}



header .navigation .menu ul li .open-submenu {

    display: none;

    padding-left: 0;

}



header .navigation .menu.visible ul li .open-submenu i {

    font-size: 14px;

}



header .navigation .menu.visible ul li .sub-menu {

    width: 100%;

    position: unset;

    background: none;

}



header .navigation .menu.visible ul .sub-menu {

    display: none;

    margin: 0;

    padding: 0;

    border-top: 1px dashed rgb(255 255 255 / 50%);

    border-bottom: none;

    box-shadow: none;

}



header .navigation .menu.visible .sub-menu a {

    padding: 10px 42px 10px 15px;

}



header .call-to-action {

    margin-left: 55px;

}



header .navigation-mobile {

    margin-left: 30px;

}



header .navigation-mobile {

    display: none;

    cursor: pointer;

}



header .navigation-mobile i {

    display: block;

    font-size: 34px;

    line-height: 30px;

    color: #fff;

}



header .navigation-mobile i.fa-times {

    margin-left: 6px;

}


/*--------------------------------------------------*\

	Header - Blog

\*--------------------------------------------------*/

.header-blog {

    position: relative !important;

}


.blog-slider {

    background-image: url('http://rollingpiano.webcontrole.nl/wp-content/themes/eyectemplate/assets/images/Achtergrond-rollingpiano.jpg');

}


/*--------------------------------------------------*\

	Main

\*--------------------------------------------------*/

.wrapper.sticky {

    padding-top: 95px;

}



.wrapper.hidden {

    display: none;

}



.wrapper .main {

    padding-top: 50px;

    padding-bottom: 75px;

}





/*--------------------------------------------------*\

	Page

\*--------------------------------------------------*/

.page-image {

    margin-bottom: 25px;

}





/*--------------------------------------------------*\

	Sidebar

\*--------------------------------------------------*/

.page-sidebar.left {

    padding-right: 40px;

}



.page-sidebar.right {

    padding-left: 40px;

}





/*--------------------------------------------------*\

	Slider

\*--------------------------------------------------*/

.slider {

    height: 800px;

    overflow: hidden;

}



.slider.small,

.slider.small .slide,

.slider.small .slide .container {

    height: 250px;

}



.slider.alignment-center .slide .content {

    margin: 0 auto;

    text-align: center;

}



.slider.alignment-right .slide .content {

    margin-left: 40%;

    text-align: right;

}



.slider .slide {

    height: 800px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.slider .slide .container {

    display: flex;

    height: 800px;

}



.slider .slide .content {

    width: 100%;

    max-width: 60%;

    align-self: center;

    color: var(--color-white);

}



.slider.container .slide .content {

    padding: 40px;

    box-sizing: border-box;

}



.slider .slide .content .title {

    margin-top: -10px;

    font-size: 72px;

    line-height: 72px;

    font-weight: var(--font-weight-bold);

    text-shadow: 1px 1px 3px rgb(0 0 0 / 50%);

}



.slider .slide .content .text {

    margin-top: 10px;

    font-size: 20px;

    line-height: 34px;

    text-shadow: 1px 1px 3px rgb(0 0 0 / 50%);

}



.slider .slide .content .button {

    margin-top: 30px;

}



.slider .slide .content .button a {

    padding: 12px 25px;

}



.slider.slick-slider {

    margin: 0 auto;

    padding: 0;

}



.slider.container.slick-slider {

    margin-top: 50px;

}



.slider.slick-slider .slick-dots {

    bottom: 15px;

}



.slider.slick-slider .slick-dots li button:before {

    font-size: 14px;

    color: var(--color-white);

    text-shadow: 0 0 10px var(--color-black);

}



.slider.slick-slider .slick-prev,

.slider.slick-slider .slick-next {

    width: 30px;

    height: 30px;

    z-index: 1;

}



.slider.slick-slider .slick-prev:before,

.slider.slick-slider .slick-next:before {

    opacity: .75;

    color: var(--color-white);

}



.slider.slick-slider .slick-prev:hover:before,

.slider.slick-slider .slick-next:hover:before {

    opacity: 1;

}



.slider.slick-slider .slick-prev {

    left: 15px;

}



.slider.slick-slider .slick-next {

    right: 15px;

}





/*--------------------------------------------------*\

	News

\*--------------------------------------------------*/

/* News: overview */

.news .item {

    display: flex;

    margin-top: 50px;

}



.news .item:first-child {

    margin-top: 30px;

}



.news .item .image {

    flex: 0 0 300px;

    margin-right: 25px;

}



.news .item.sticky .image {

    margin-right: 0;

}



.news .item .image a {

    display: block;

}



.news .item .content {

    flex: 1 1 auto;

    padding: 12px 0 15px;

}



.news .item.sticky .content {

    padding: 12px 25px 15px;

    background-color: var(--color-primary);

    color: var(--color-white);

}



.news .item .content h3,

.news .item .content p {

    margin: 0;

}



.news .item .content p a {

    font-weight: var(--font-weight-medium);

}



.news .item.sticky .content a {

    color: var(--color-white);

}



.news .item.sticky .content a:hover {

    color: var(--color-text);

}



.news .item .content .meta {

    display: block;

    margin-bottom: 10px;

    font-size: var(--font-size-small);

}



/* News: single item */

.single .title {

    margin-bottom: 0;

    font-weight: 800;

}



.single .meta {

    display: block;

    margin-bottom: 20px;

    font-size: var(--font-size-small);

    color: #9a9a9a;

}



/* News: comments */

.comments {

    margin-top: 50px;

    padding-top: 10px;

    border-top: 1px solid var(--border-color);

}



.comments .comment-list {

    margin: 0;

    padding: 10px 0 0;

    list-style: none;

}



.comments .comment-list .comment-body {

    margin-bottom: 30px;

}



.comments .comment-list .comment-author {

    padding-top: 8px;

}



.comments .comment-list .comment-author img {

    float: left;

    margin: -8px 15px 0 0;

}



.comments .comment-list .comment-author .fn {

    font-weight: var(--font-weight-medium);

}



.comments .comment-list .comment-meta {

    font-size: var(--font-size-small);

    margin-bottom: 20px;

}



.comments .comment-list .comment-body p {

    padding-top: 10px;

    border-top: 1px solid var(--border-color);

}



.comments .comment-list .children {

    padding-left: 15px;

    list-style: none;

    border-left: 5px solid var(--border-color);

}



.comments .comment-form-cookies-consent label {

    display: inline;

}



.comments .comment-form-author-and-email {

    display: flex;

}



.comments .comment-form-author-and-email .comment-form-author {

    flex: 1 1 50%;

    padding-right: 20px;

    box-sizing: border-box;

}



.comments .comment-form-author-and-email .comment-form-email {

    flex: 1 1 50%;

    padding-left: 20px;

    box-sizing: border-box;

}



.comments .no-comments {

    font-weight: var(--font-weight-medium);

}





/*--------------------------------------------------*\

	Search & Archive

\*--------------------------------------------------*/

.search-form {

    display: flex;

}



.search-form .search-field {

    margin: 0 20px 0 0;

}



.search .item,

.archive .item {

    display: flex;

    margin-top: 50px;

}



.search .item:first-child,

.archive .item:first-child {

    margin-top: 30px;

}



.search .item .image,

.archive .item .image {

    flex: 0 0 300px;

    margin-right: 25px;

}



.search .item.sticky .image,

.archive .item.sticky .image {

    margin-right: 0;

}



.search .item .image a,

.archive .item .image a {

    display: block;

}



.search .item .content,

.archive .item .content {

    flex: 1 1 auto;

    padding: 12px 0 15px;

}



.search .item.sticky .content,

.archive .item.sticky .content {

    padding: 12px 25px 15px;

    background-color: var(--color-primary);

    color: var(--color-white);

}



.search .item .content h3,

.search .item .content p,

.archive .item .content h3,

.archive .item .content p {

    margin: 0;

}



.search .item .content p a,

.archive .item .content p a {

    font-weight: var(--font-weight-medium);

}



.search .item.sticky .content a,

.archive .item.sticky .content a {

    color: var(--color-white);

}



.search .item.sticky .content a:hover,

.archive .item.sticky .content a:hover {

    color: var(--color-text);

}



.search .item .content .meta,

.archive .item .content .meta {

    display: block;

    margin-bottom: 10px;

    font-size: var(--font-size-small);

}





/*--------------------------------------------------*\

	Projects

\*--------------------------------------------------*/

/* Project: single */

.single-project .project-intro {

    font-weight: var(--font-weight-medium);

}



.single-project .project-activities {

    margin-top: 40px;

    margin-bottom: 40px;

}



.single-project .project-activities h3 {

    margin: 0;

}



.single-project .project-activities ul {

    margin: 10px 0 0;

    padding: 0 20px;

    list-style: square;

}



.single-project .project-activities .col-sm-6 {

    align-self: center;

}



.single-project .project-call-to-action {

    display: flex;

    margin: 30px 0;

    padding: 20px 30px;

    background-color: var(--color-primary);

    color: var(--color-white);

    justify-content: space-between;

}



.single-project .project-call-to-action .content,

.single-project .project-call-to-action .button {

    align-self: center;

}



.single-project .project-call-to-action .content .title {

    font-size: 28px;

    font-weight: 500;

    line-height: 34px;

}



.single-project .project-call-to-action .content .text {

    margin-top: 10px;

    line-height: 26px;

}



.single-project .project-call-to-action .button {

    padding-left: 30px;

}



.single-project .project-call-to-action .button .btn {

    background-color: var(--color-white);

    color: var(--color-button-text);

    white-space: nowrap;

}



.single-project .project-call-to-action .button .btn:hover {

    background-color: var(--color-text);

    color: var(--color-button-text-light);

}



.single-project .project-gallery .images .image {

    padding-top: 10px;

    padding-bottom: 10px;

}



.single-project .project-gallery .images .image a {

    display: block;

    position: relative;

    width: 100%;

    height: 100%;

}



.single-project .project-gallery .images .image .overlay {

    position: absolute;

    width: 100%;

    height: 100%;

    background-color: rgb(0 0 0 / 0%);

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.single-project .project-gallery .images .image a:hover .overlay {

    background-color: rgb(0 0 0 / 50%);

}



.single-project .project-gallery .images .image i {

    margin: 10px 0 0 10px;

    font-size: 28px;

    color: var(--color-white);

    opacity: 0.8;

    text-shadow: 0 0 5px rgb(0 0 0 / 50%);

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.single-project .project-gallery .images .image a:hover i {

    opacity: 1;

}



.single-project .project-gallery .images .image img {

    width: 100%;

    height: 100%;

}



.single-project .project-client .col-sm-2,

.single-project .project-client .col-sm-10,

.single-project .project-client .logo {

    display: flex;

}



.single-project .project-client .logo img,

.single-project .project-client .details {

    align-self: center;

}



.single-project .project-client .details h4 {

    margin-top: 0;

}



.single-project .project-client .details p:last-child {

    margin-bottom: 0;

}



/* Project: category */

.project-categories {

    margin: 10px -10px;

}



.project-categories .project {

    margin-bottom: 20px;

    padding: 10px;

}



.project-categories .project .image a {

    display: block;

}



.project-categories .project .details h3 {

    margin: 20px 0 0;

    font-size: 20px;

    line-height: 28px;

}



.project-categories .project .details .meta {

    display: block;

    margin-bottom: 10px;

    font-size: var(--font-size-small);

    font-weight: var(--font-weight-thin);

}



.project-categories .project .details .view-project i {

    margin-left: 5px;

    font-size: 14px;

}





/*--------------------------------------------------*\

	Services

\*--------------------------------------------------*/

/* Service: single */

.single-service .service-description {

    margin-top: 10px;

}



.single-service .service-call-to-action {

    display: flex;

    margin: 30px 0;

    padding: 20px 30px;

    background-color: var(--color-primary);

    color: var(--color-white);

    justify-content: space-between;

}



.single-service .service-call-to-action .content,

.single-service .service-call-to-action .button {

    align-self: center;

}



.single-service .service-call-to-action .content .title {

    font-size: 28px;

    font-weight: 500;

    line-height: 34px;

}



.single-service .service-call-to-action .content .text {

    margin-top: 10px;

    line-height: 26px;

}



.single-service .service-call-to-action .button {

    padding-left: 30px;

}



.single-service .service-call-to-action .button .btn {

    background-color: var(--color-white);

    color: var(--color-button-text);

    white-space: nowrap;

}



.single-service .service-call-to-action .button .btn:hover {

    background-color: var(--color-text);

    color: var(--color-button-text-light);

}





/*--------------------------------------------------*\

	Chat buttons

\*--------------------------------------------------*/

.chat-buttons {

    position: fixed;

    bottom: 25px;

    display: flex;

    flex-direction: column-reverse;

    max-width: 50px;

    height: 55px;

    overflow: hidden;

    padding: 5px;

    -webkit-transition: height .5s;

    -moz-transition: height .5s;

    -ms-transition: height .5s;

    -o-transition: height .5s;

    transition: height .5s;

}



.chat-buttons:hover {

    height: 315px;

}



.chat-buttons.left {

    left: 30px;

}



.chat-buttons.right {

    right: 30px;

}



.chat-buttons a {

    display: flex;

    margin-top: 15px;

    min-width: 50px;

    min-height: 50px;

    width: 50px;

    height: 50px;

    background-color: var(--color-primary);

    border-radius: 50%;

    justify-content: center;

    align-items: center;

    text-align: center;

    box-shadow: 0 0 6px 0px rgb(0 0 0 / 30%);

}



.chat-buttons a i {

    font-size: 32px;

    color: var(--color-white);

}



.chat-buttons a.open-chat-buttons {

    background-color: var(--color-secondary);

}



.chat-buttons a.open-chat-buttons i {

    font-size: 25px;

}



.chat-buttons a:hover {

    background-color: var(--color-green);

}





/*--------------------------------------------------*\

	Popups

\*--------------------------------------------------*/

.popups {

    display: none;

}



.popup-overlay {

    display: flex;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    left: 0;

    padding: 30px;

    box-sizing: border-box;

    background-color: rgb(0 0 0 / 85%);

    justify-content: center;

    align-items: center;

    z-index: 99999;

}



.popup {

    display: flex;

    width: 100%;

    position: relative;

    background-color: var(--color-black);

    color: var(--color-white);

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

}



.popup.small {

    max-width: 622px;

    height: 350px;

}



.popup.medium {

    max-width: 854px;

    height: 480px;

}



.popup.large {

    max-width: 1156px;

    height: 650px;

}



.popup.center {

    text-align: center;

    justify-content: center;

}



.popup.right {

    text-align: right;

    justify-content: end;

}



.popup-close {

    position: absolute;

    top: -12px;

    right: -12px;

    width: 35px;

    height: 35px;

    background-color: var(--color-white);

    border-radius: 50%;

    color: var(--color-text);

    text-align: center;

    cursor: pointer;

    z-index: 1;

    box-shadow: 0 0 10px 3px rgb(0 0 0 / 50%);

    -webkit-transition: all .3s;

    -moz-transition: all .3s;

    -ms-transition: all .3s;

    -o-transition: all .3s;

    transition: all .3s;

}



.popup-close i {

    font-size: 18px;

    vertical-align: -6px;

}



.popup-close:hover {

    background-color: var(--color-text);

    color: var(--color-white);

}



.popup > a {

    display: flex;

    color: inherit;

}



.popup .content {

    max-width: 60%;

    padding: 40px 50px 50px;

    box-sizing: border-box;

    align-self: center;

}



.popup.small .content {

    padding: 30px 40px 40px;

}



.popup .title {

    font-size: 52px;

    font-weight: 700;

    line-height: 115%;

    text-shadow: 0 0 5px rgb(0 0 0 / 50%);

}



.popup.small .title {

    font-size: 32px;

    line-height: 120%;

}



.popup.large .title {

    font-size: 72px;

}



.popup .text {

    margin-top: 10px;

    font-size: 24px;

    line-height: 140%;

    text-shadow: 0 0 5px rgb(0 0 0 / 50%);

}



.popup.small .text {

    font-size: 18px;

}



.popup.large .text {

    margin-top: 20px;

    font-size: 32px;

}



.popup .button {

    margin-top: 30px;

}



.popup.large .button {

    margin-top: 40px;

}



.popup .button .btn {

    padding: 8px 15px;

    color: var(--color-button-text);

    background-color: var(--color-white);

}



.popup.small .button .btn {

    padding: 6px 14px;

    font-size: 14px;

}



.popup.large .button .btn {

    padding: 12px 20px;

    font-size: 22px;

    font-weight: 700;

}



.popup.small .button .btn i {

    font-size: 13px;

}



.popup.large .button .btn i {

    font-size: 18px;

}



.popup .button .btn:hover {

    color: var(--color-white);

    background-color: var(--color-black);

}



.popup .video { 

    padding-bottom: 56.25%;

    overflow: hidden;

    max-width: 100%;

    height: auto;

} 



.popup .video iframe,

.popup .video object,

.popup .video embed { 

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}





/*--------------------------------------------------*\

	Footer

\*--------------------------------------------------*/

footer .content {

    background-color: var(--color-background);

}



footer .content .wp-block-columns {

    margin: 10px 0 20px;

}



footer .copyright {

    padding-top: 5px;

    padding-bottom: 5px;

    font-size: var(--font-size-small);

    font-weight: var(--font-weight-thin);

    color: var(--color-white);

    background-color: var(--color-primary);

}



footer .copyright a {

    color: var(--color-white);

}



footer .copyright a:hover {

    color: var(--color-text);

}



footer .copyright .developer {

    text-align: right;

}





/*--------------------------------------------------*\

	Themes

    -----------

    Custom themes must not use these specific

    theme styles but the style settings above.

\*--------------------------------------------------*/





/*** Default ***/



/* Global */

.eyec-default h1, .eyec-default h2, .eyec-default h3, .eyec-default h4, .eyec-default h5, .eyec-default h6 {

    color: var(--color-black);

}





/*** Style 1 ***/



/* Global */

.eyec-style1 h1, .eyec-style1 h2, .eyec-style1 h3, .eyec-style1 h4, .eyec-style1 h5, .eyec-style1 h6 {

    color: var(--color-black);

}



/* Footer */

.eyec-style1 footer h1, .eyec-style1 footer h2, .eyec-style1 footer h3, .eyec-style1 footer h4, .eyec-style1 footer h5, .eyec-style1 footer h6 {

    color: var(--color-white);

}



.eyec-style1 footer .content {

    color: var(--color-white);

    background-color: var(--color-text);

}



.eyec-style1 footer .copyright {

    background-color: var(--color-black);

}





/*--------------------------------------------------*\

	Responsive

\*--------------------------------------------------*/

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

    /* Header */

    header .navigation .menu a {

        padding: 10px 15px;

    }



    header .navigation .menu .sub-menu {

        padding: 10px;

    }



    header .call-to-action {

        margin-left: 30px;

    }



    /* News */

    .news .item .image {

        flex-basis: 250px;

    }



    .news .item .content {

        padding: 0;

    }

}



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

    /* Header */

    header .navigation .menu {

        display: none;

    }



    header .navigation-mobile {

        display: block;

    }



    header .navigation .menu.visible ul {

        padding: 10px 18px;

    }



    header .navigation .menu.visible ul li .open-submenu {

        display: block;

    }



    /* Sidebar */

    .page-sidebar {

        margin-top: 20px;

        border-top: 1px solid var(--border-color);

    }



    .page-sidebar.left {

        padding-right: .5rem;

        order: 2;

    }

    

    .page-sidebar.right {

        padding-left: .5rem;

    }



    /* Slider */

    .slider .slide .content {

        max-width: 100%;

    }



    .slider.alignment-right .slide .content {

        margin-left: 0;

    }



    /* Popups */

    .popup .content {

        max-width: 80%;

    }

}



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

    /* Header */

    .top-header .col-sm {

        flex-basis: 100%;

        justify-content: center;

    }



    .top-header .left div,

    .top-header .right div {

        margin-left: 15px !important;

        margin-right: 15px !important;

    }



    header .call-to-action {

        display: none;

    }
    

    header img {
        max-width: 60%;
    }



    /* Main */

    .wrapper .main {

        padding-top: 25px;

        padding-bottom: 50px;

    }



    /* Slider */

    .slider,

    .slider .slide,

    .slider .slide .container {

        height: 350px;

    }



    .slider.small,

    .slider.small .slide,

    .slider.small .slide .container {

        height: 150px;

    }



    .slider.container .slide .content {

        padding: 0;

    }

    

    .slider .slide .content .title {

        font-size: 28px;

        line-height: 34px;

    }



    .slider .slide .content .text {

        font-size: 16px;

        line-height: 26px;

        font-weight: 300;

    }



    /* News */

    .news .item {

        flex-wrap: wrap;

    }



    .news .item .image {

        flex: 1 1 100%;

        margin-right: 0;

    }



    .news .item .content {

        flex: 1 1 100%;

        padding: 15px 0 0;

    }



    /* Projects */

    .single-project .project-activities .col-sm-6:last-child {

        margin-top: 40px;

    }



    .single-project .project-call-to-action {

        flex-wrap: wrap;

    }



    .single-project .project-call-to-action .content {

        flex: 1 1 100%;

    }

    

    .single-project .project-call-to-action .button {

        flex: 1 1 100%;

        margin: 30px 0 5px;

        padding-left: 0;

    }



    /* Popups */

    .popup.medium {

        height: 400px;

    }



    .popup.large {

        height: 500px;

    }



    .popup .content {

        max-width: 100%;

    }



    .popup.medium .title {

        font-size: 42px;

    }



    .popup.large .title {

        font-size: 48px;

    }



    .popup.medium .text {

        font-size: 20px;

    }



    .popup.large .text {

        font-size: 24px;

    }



    .popup.large .button .btn {

        padding: 10px 16px;

        font-size: 18px;

    }



    .popup.large .button .btn i {

        font-size: 16px;

    }



    /* Footer */

    footer .copyright .company,

    footer .copyright .developer {

        text-align: center;

    }

}

/*--------------------------------------------------*\

	Single post

\*--------------------------------------------------*/

.single #menu-list li a, .page-template-default #menu-list li a{
    color: #000;
}

.single p {
    color: #9a9a9a;
}

.single footer p {
    color: #fff;
}

.single header .navigation-mobile i, .page-template-default header .navigation-mobile i {
    color: var(--red);
}

@media screen and (max-width: 767px) {
    /* Header */
    .single header {
        background-color: #fff;
    }
}