/*
Theme Name: Scoliomachines
Author: Anton M.
Version: 0.1
*/

:root {
	--header-height: 90px;
	--light-gray: #f1f1f1;
	--dark-gray: #999;
	--primary-text: #000000;
	--link: #017477;
	--basic-color: #017477;
	--basic-color-dark: #004a4d;
	--basic-color-contrast: #c55b00;
	--basic-color-contrast-dark: #c58500;
	--footer-text: #909090;
	--footer-background: #111;
	--footer-link: #fff;
}

.mobile-only {display: none}
.desktop-only {display: block}
.tablet-only {display: none}
.mobile-and-tablet {display: none}
.tablet-and-desktop {display: block}
img.bw {filter: grayscale(100%) !important; opacity: 0.7 !important; }
img.grayscale {filter: grayscale(1); }
.left{ float:left;}
.right{ float:right;}
.ucase {text-transform: uppercase;}

div#pagewidth {z-index: 99999; position: fixed; top: 3px; left: 3px; padding: 3px; font-size: 14px; background-color: #ccc; border-radius: 3px; opacity: 0.3; }

* {margin: 0; padding: 0;}
html {height: 100%;}
body { height: 100%; background-color: #fff; font-family: 'Roboto', Arial, sans-serif !important; color: var(--primary-text);}

.page-wrapper {display: flex; flex-direction: column;  height: 100%;}
.content {flex: 1 0 auto; margin-top: var(--header-height); margin-bottom: 40px}
.container {width: 1210px !important; margin: 0 auto !important; position: relative !important; }
.toggle {display: none}

a, a:visited {color: var(--link); text-decoration: none}
a:hover {color: var(--link); text-decoration: underline}

.social-icons { display: inline-block;}
.social-icons a { padding: 10px}
.social-icons  a, .social-iconsa:hover, .social-icons a:visited {text-decoration: none !important;}

/* Image Carousel */

.carousel-container {position: relative; width: 100%; overflow: hidden; margin: 5px 0 15px 0; display: flex; justify-content: space-between; flex-wrap: wrap;}
.carousel-container .carousel-image { max-width: 100%;  width: auto; flex-grow: 1; overflow: hidden;} 
.carousel-container .carousel-image:not(:last-child) {margin-right: 5px} 
.carousel-container .carousel-image img {object-fit: cover; object-position: 50% 50%; width: 100%; height: 100%; transition: all 1.2s; cursor: zoom-in;}
.carousel-container .carousel-image img:hover {width: 120%; height: 120%;  background: rgba(0, 0, 0, 0.4);}

/* Simple Table */

.simple-table {/* max-width: 100%; min-width: 50%; */ border-collapse: collapse}
.simple-table td {padding: 5px 30px 5px 0; border-bottom: 1px #e7e7e7 solid}

/*   Buttons   */

.button-accent, .button-solid, .wpcf7-submit {color: #fff !important; font-size: 18px; padding: 12px 18px;  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.button-accent:hover, .button-solid:hover, .wpcf7-submit:hover {text-decoration: none !important; cursor: pointer !important;}
.button-accent, .wpcf7-submit {background-color: var(--basic-color); color: #fff; border: 0}
.button-accent:hover, .wpcf7-submit:hover {background-color: var(--basic-color-dark); color: #fff !important}

/* Popup-Maker */

.popmake-content h2 {margin-bottom: 20px}

/* Contact Form 7 */

.wpcf7 {width: auto}
.wpcf7-form textarea {width: 100%}
.wpcf7-form textarea {resize: none;}
.wpcf7-form p {margin-bottom: 10px}
.wpcf7-form label {font-size: 16px; color: #555}
.wpcf7-form input, .wpcf7-form textarea {margin-top: 5px; font-size: 20px; font-weight: lighter; width: 100%}
.wpcf7-submit {margin-top: 30px !important }

/* Header */

.header {position: fixed; top: 0; left: 0; right: 0; height: 100px; background-color: var(--basic-color); z-index: 9999;  height: var(--header-height)}
.header { /* -webkit-box-shadow: 0px 0px 45px -8px rgba(0, 0, 0, 0.23); -moz-box-shadow: 0px 0px 45px -8px rgba(0, 0, 0, 0.23); box-shadow: 0px 0px 45px -8px rgba(0, 0, 0, 0.23); */ }
.header a {color: #fff; text-underline-offset: 5px}
.header a:hover {}
.header-container {width: 92%; margin: 0 auto}
.header-inner {color: #fff; width: 100%; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center}
.header-inner > div {flex: 0 0 auto;}
.header .logo { height: inherit; flex-grow: 20}
.logo img {height: 90px;}
.header .phone {padding: 10px; font-size: 20px;}
.header .phone a span {font-weight: 600}
.header .social-icons a {color: #fff;  font-size: 22px;}
.header .contact-us-button {padding: 5px 10px}
.header .toggle-menu-button {font-size:24px; padding: 0 10px;}
.header .button-accent {background-color: var(--basic-color-contrast-dark) !important;}
.header .button-accent:hover {background-color: var(--basic-color-contrast) !important;}
.header .language_select select {font-size: 20px; color: #fff; background-color: var(--basic-color); border: 1px #fff solid; text-transform: uppercase; padding: 3px 5px; margin-left: 20px}

/* Header menu */

.header ul.menu {font-size: 20px;}
.header ul.menu li {list-style-type: none !important;}
.header ul.menu > li a {color: #fff;  font-weight: lighter;}
.header ul.menu a:hover {text-decoration: underline !important;}


.header .desktop-menu-container {margin: 0 25px}
.header .desktop-menu-container ul.menu {display: flex; justify-content: space-between;}
.header .desktop-menu-container ul.menu > li.menu-item-has-children::after {content: '▼'; padding-left: 3px;} 
.header .desktop-menu-container ul.menu > li {display: block; padding: 16px 10px; position: relative;}
.header .desktop-menu-container ul.menu > li > ul.sub-menu {display: none}
.header .desktop-menu-container ul.menu > li > ul.sub-menu li {margin: 10px 0}
.header .desktop-menu-container ul.menu > li:hover > ul.sub-menu {display: block; position: absolute; width:320px; left:-16px; top: 52px; text-align: left; padding: 22px 36px; background-color: var(--basic-color-dark); box-shadow: 5px 5px 5px rgba(0,0,0,0.45);} 

/* Mobile menu */

.mobile-menu-container {padding: 10px 5px; background-color: #eee !important; overflow: hidden}
.mobile-menu-container a {}
.mobile-menu-container ul {list-style-type: none !important;}
.mobile-menu-container ul ul {padding: 5px 5px 0 10px; font-size: 16px}
.mobile-menu-container li {padding: 4px}
/* .mobile-menu-container ul ul > li::before {content: '►'; padding-right: 5px; color: #fff} */
.mobile-menu-container ul ul > li a {}
/* Intro Video */

.intro-video {width:100%; height: 540px;  position: relative; overflow: hidden;  display: flex; justify-content: center; align-items: center;}
.intro-video video {width:100%;  position: absolute;  top:50%;  left:50%;  transform:translate(-50%,-50%); object-fit:cover; z-index: 3}
.intro-video .effects { position: absolute; object-fit: cover; top: 0; left: 0; z-index: 7; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6);}
/* .intro-video .intro-content {color: #fff; width: 1180px; position: absolute; bottom: 0; z-index: 10; padding-bottom: 30px} */
.intro-video .intro-content {color: #fff; width: 1180px; align-content: center; z-index: 10; padding-bottom: 30px}
.intro-video .intro-content h1 {font-size: 44px; font-weight: 600; padding-bottom: 24px;}
/* .intro-video .intro-content h2 {font-size: 24px; font-weight: 400;} */
.intro-video .intro-content h2 {font-size: 48px; font-weight: 400; text-align: center; line-height: 1.8}

/* Content */

.site-content {line-height: 1.55; font-size: 20px; font-weight: lighter;}
.site-content a:hover {text-decoration: none}
.site-content b, .page-content strong {font-weight: 600}
.site-content h1.entry-title {margin: 20px 0; font-size: 36px}
.site-content h1.entry-title i:not(:last-child) {color: #aaa}
.site-content h1.entry-title ~ p, .text > p {margin-bottom: 15px; text-align: justify}
.site-content h3 {padding-bottom: 15px}
.site-content ul {list-style-type: disclosure-closed; padding-left: 20px; }
.site-content ul > li {margin-bottom: 5px}
.site-content ul > li::marker {color: var(--basic-color);}
.site-content p {margin-bottom: 15px}
.site-content p.note, .site-content div.note  {margin: 15px 0; padding: 15px 15px 15px 25px; background-color: var(--light-gray); border-left: 5px var(--basic-color) solid}
.site-content .flexrow {display: flex; flex-direction: row; justify-content: space-between}
.site-content .flexrow div:not(:last-child) {margin-right: 20px}

/* Search form */

.search-submit:hover {cursor: pointer;}
.search-form {position: relative; white-space: nowrap; width:100%;}
.search-form .search-submit {position: absolute; right: 0; bottom: 0}
.footer .search-form {margin: 9px 0; padding: 0; border: 1px #fff solid; }
.footer .search-field {font-size: 15px; padding: 4px; border: 0; width: 100%; color: var(--footer-text); background-color: var(--footer-background);}
.footer .search-submit { border: 1px var(--footer-link) solid !important; font-size: 15px; padding: 3px 6px; background-color: var(--footer-link); color: var(--footer-background); }
.search .search-form {white-space: nowrap; margin: 40px 0; padding: 0; border: 1px var(--dark-blue) solid; display: flex; }
.search .search-field  {font-size: 24px; padding: 6px; border: 0; width: 100%;color: var(--black); flex-grow: 1; display: block;}
.search .search-button { font-size: 24px; display: block;}
.search .search-button:hover {cursor: pointer;}
.search .search-reset { border: 1px #fff solid; !important;background-color: #fff; color: var(--dark-blue);}
.search .search-submit { border: 1px var(--dark-blue) solid; !important; background-color: var(--dark-blue); color: #fff;}

/* Footer */

.footer  {flex: 0 0 auto; color: var(--footer-text); font-size: 14px; background-color: var(--footer-background); border-top: 10px var(--basic-color) solid; padding: 30px 0;}
.footer a, .footer a:visited {color: var(--footer-link); text-decoration: none}
.footer a:hover {text-decoration: none}
.footer .container {display: flex; justify-content: space-between}
img.footer-logo {max-width: 200px;}
.footer-column {}
#footer-column-1 {}
#footer-column-2 {width: 46%}
#footer-column-2 p {margin-bottom: 8px; font-size: 16px; font-weight: lighter}
#footer-column-3 {}
.footer .contacts {text-align: center; width: 100%}
.footer .contacts a {text-align:center; font-size: 20px; font-weight: 600; color: var(--footer-text) !important}
.footer .contacts a:hover {color: var(--footer-link) !important}
.footer-copyright {text-align: center; font-size: 12px; margin: 12px auto -10px auto}
.footer-search {display: flex; justify-content: space-around}