/*
Theme Name: SYNECTIVE MainTheme
Theme URI: https://www.synective.de
Author: the Synective Systemhaus GmbH & Co. KG
Author URI: https://www.synective.de
Description: Base Theme
Requires at least: 5.8.3 
Requires PHP: 7 / 8
Version: 0.1
*/


:root {
    --clr-primary: #781231;
    --clr-secondary: #781231;
    --clr-gray: #eee;
    --text-gray: #555;
	--text-white: #fff;
}

@font-face {
  font-family: 'Fira Sans';
  src: url(fonts/FiraSans-Light.ttf);
}

* { box-sizing: border-box;  }
body, html, h1, h2, h3, h4, h5 { margin: 0; padding: 0; font-size: 20px; font-family: 'Fira Sans', sans-serif; letter-spacing: 1px; }
b, strong {  }
h1 { color: var(--clr-primary); font-size: 1.8rem; text-align: left; padding-bottom: 0.5rem; text-transform: uppercase;  }
h2 { color: var(--clr-primary); font-size: 1.4rem; text-align: left; padding-bottom: 0.5rem; text-transform: uppercase;  }
h3 { color: var(--clr-secondary); font-size: 1.2rem; text-align: left; text-transform: uppercase; font-weight: 100; }
a { color: var(--clr-primary); text-decoration: none;  }
a:hover,.current-lang { font-weight: bold; }

h1, h2, h3, h4, h5, h6 {
    overflow-wrap: normal;
}

p, ul, li { font-weight: 100; letter-spacing: 0.1rem; line-height: 130%; color: var(--text-gray); }
ul { margin-left: 1rem; padding-left: 0; }
img { max-width: 100%; height: auto; }
.las, .lab { font-size: 1.4rem; }
.contenticon { display: block; font-size: 12rem; margin: 0 auto; width: 100%; text-align: left; color: #777; }
.flexer { display: flex; flex-flow: row wrap; justify-content: space-between; gap: 1rem; }



input, textarea { width: 100%; padding: 0.5rem 1rem; display: block; background: #efefef; border: none; font-size: 1.1rem; }
textarea { height: 6rem;font-family: 'Archivo', sans-serif;font-size: 1.1rem; }
input[type="submit"] { width: 25%; margin-top: 2rem; cursor: pointer; background: linear-gradient(-45deg, var(--clr-primary), var(--clr-secondary)); background-size: 200% 100%; color: #fff; border-radius: 6px; transition: all ease-in-out 0.5s; }
input[type="checkbox"] { width: 20px; display: inline;  }
input[type="submit"]:hover { background: linear-gradient(-45deg, var(--clr-primary), var(--clr-secondary));background-size: 100% 100%;}
.wpcf7-list-item { margin: 0; }

.top-header { position: fixed; top: 0; left: 0; width: 100%; color: #fff; font-size: 0.8rem; font-weight: 900; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; padding: 0.3rem 1rem; text-transform: uppercase; transition: all ease-in-out 0.5s; }
.top-header a { color: inherit }
.top-header a:hover { font-weight: inherit }
.top-header.thvisible { background: #333; box-shadow: 0 0 10px rgba(0,0,0,0.3); color: var(--text-white); }
.top-header .logo { height: 2rem; }
.top-header.thvisible .logo { filter: none; }
.top-header .las { position: relative; top: 0.2rem; margin-left: 0rem; }
.top-header .navtrigger { transform: scale(1.5); position: relative; transform-origin: right center; top: -0.3rem; z-index: 9999; }
.top-header .navtrigger:hover { cursor: pointer; }
.top-header .navtrigger.open { color: var(--clr-primary); z-index:9999; }

.nav-container { position: fixed; top: 0rem; left: 0; height: 100vh; width: 20%; margin-left: 100%; transition: all ease-in-out 0.5s; z-index: 9999; background: #fff; color: var(--text-gray); font-weight: 100; }
.nav-container.show { margin-left: 80%; box-shadow: 0 10px 10px rgba(0,0,0,0.3); }
.nav-container nav { padding-top: 0.5rem;  }
.nav-container nav ul { padding: 0; margin: 0; margin-left: 1rem; }
.nav-container nav ul ul { margin: 0; padding: 0 1rem; font-size: 0.8rem; }
.nav-container nav li { display: block; width: 100%; line-height: 2rem; }
.nav-container nav li a { color: #111; }
.nav-container nav li a:hover { color: var(--clr-primary); }
.nav_close { color: var(--clr-primary); margin-top: 2rem; text-align: right; padding-right: 1rem;  }
.nav_close i { font-size: 2rem;} 
.top-header .flexer a { margin-left: 2rem; margin-top: 0.25rem; }

.menu-holder { display: flex; flex-flow: row nowrap; align-items: center; }
.language-switcher-header { list-style: none; display: flex; flex-flow: row nowrap; align-items: center; gap: 0.6rem; margin-right: 2rem;}
.language-switcher-header li { color: #fff;  }
.thvisible .language-switcher-header li { color: var(--text-gray); }

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}
header { overflow: hidden; position: relative; height: 100vh; width: 100%;z-index: 3000; margin-bottom: 0; }
header { 
	background-image: 
		
		url('/wp-content/themes/synective/img/datacenter_black_01.jpg');
		
		
	background-size: 
		cover,
		100%;
	background-repeat: 
		no-repeat;
	background-position:
		bottom;
	
	background-blend-mode:
		normal,
		normal;
	
	
	
	
	}

.languages { margin-top: 1rem !important;  }
.languages li { display: inline !important; margin-right: 1rem;  }
#rememberlink { position: fixed; bottom: 8rem; right: 0; width: 15%; min-width: 200px; background: var(--clr-primary); color: #fff; z-index: 5000; padding: 1rem; padding-right: 1.5rem; line-height: 1.6rem; transform: rotate(0deg) translateX(1rem); box-shadow: 0 0 20px rgba(0,0,0,0.5); border-top-left-radius: 2rem; border-bottom-left-radius: 2rem; }
#rememberlink a { text-transform: uppercase; display: block; font-size: 1.4rem; }
#rememberlink a:hover { font-weight: 900; }



@keyframes slogan {
    0% { opacity:0; }
    100% { opacity: 1; }
}

.hero { opacity: 0; animation: slogan 3s 0.3s forwards; color: #fff; text-align: center;margin-top: 16rem; text-shadow: 0 0 10px rgba(0,0,0,0.7); padding: 0 20%;  }
.hero h1 {  margin:0; padding:0; letter-spacing: 0rem; font-weight: 700; width: 100%; font-size: 3rem; color: inherit; }
.hero h2 { margin:0; padding:0; letter-spacing: 0.25rem; color: inherit; width: 100%; text-align: center; }
.hero .logo { height: 6rem;  }
.slogan { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; }
.capa { display:inline-block; text-transform:uppercase;  }
.capa::first-letter {  font-size: 5rem; font-weight: 800; }
.span-spacer { margin: 2rem; }
.nowrap { white-space:nowrap; }

@keyframes slide-from-right {
    0% { opacity: 0; transform: translateX(300px) }
    100% { opacity: 1; transform: translateX(0) }
}
@keyframes slide-from-left {
    0% { opacity: 0; transform: translateX(-300px) }
    100% { opacity: 1; transform: translateX(0) }
}
@keyframes slide-from-bottom {
    0% { opacity: 0; transform: translateY(-300px) }
    100% { opacity: 1; transform: translateY(0) }
}
.slide-from-right { transform: translateX(300px); opacity: 0; }
.slide-from-left { transform: translateX(-300px); opacity: 0; }
.slide-from-bottom { transform: translateY(-300px); opacity: 0; }
.slide-from-right.start {opacity: 0; transform: translateX(0); animation: slide-from-right 0.6s 0s forwards;}
.slide-from-left.start {opacity: 0; transform: translateX(0); animation: slide-from-left 0.6s 0s forwards;}
.slide-from-bottom.start {opacity: 0; transform: translateY(0); animation: slide-from-bottom 0.6s 0.2s forwards;}


section { margin: 0; width: 100%; padding: 4rem 20%; overflow: hidden;  }




.threeblocks div { width: 200px; text-align: center; color: var(--text-gray) }
.twoblocks div { width: 40%; }
.twoblocks div:nth-child(1) { text-align: left;}
.twoblocks div:nth-child(2) { text-align: right;}


.input-group { width: 100% !important; margin-top: 0.5rem; text-align: left; }


.count { display: block; width: 100%; font-size: 6rem;  font-weight: 900; color: var(--clr-secondary); text-align: center; }
.count a { color: var(--clr-secondary); }
.count a:hover { color: inherit; font-weight: inherit; }
.topic-icon { color: var(--clr-secondary); font-size: 2.5rem; width: 100%; position: relative; top: 1.4rem; text-align: right; }

footer { width: 100%; min-height: 30vh; background: #333; color: #fff; padding: 2rem 20%; font-size: 0.8rem; font-weight: 100; color: #fff; }
footer p { color: #fff; }
footer ul { list-style: none; color: #fff; }
footer ul li { padding: 0.5rem; text-align: right; color: #fff !important; }
footer ul li a:hover { color: #fff; }
footer .lab { padding: 0rem; }
footer a { color: inherit; }

#totop { display:none; position: fixed; z-index: 9999; bottom: 2rem; right: 2rem; color: #fff; text-shadow: 0 0 30px rgba(255,255,255,0.2); transition: all ease-in-out 0.3s; cursor: pointer; background: var(--clr-primary); border-radius: 50%; padding: 0.25rem; }
#totop .las { font-size: 2.6rem; }

#totop:hover { box-shadow: 0 0 20px rgba(255,255,255,0.2); transform: scale(0.95); } 

.wp-block-group { margin: 0; width: 100%; padding: 3rem 20%; overflow: hidden; background: #efefef;   }
.wp-block-group:nth-child(2n+1) { background: #fff; }
.spacersmall { padding: 2rem 0; }

.wp-block-columns { gap: 4rem; margin: 0; }
.counter .wp-block-columns { gap:1rem; }

.columngap3 { gap: 2rem }
.columngap2 { gap: 7rem }
.wp-block-button__link {
	text-align: left;
	width: 100%;
    margin-top: 2rem;
    cursor: pointer;
    background: linear-gradient(-45deg, var(--clr-primary), var(--clr-secondary));
    background-size: 200% 100%;
    color: #fff;
    border-radius: 6px;
    transition: all ease-in-out 0.5s;
}
.wp-block-button__link:hover {
	background: linear-gradient(-45deg, var(--clr-primary), var(--clr-secondary));
    background-size: 100% 100%;
}
figcaption { font-size: 0.7rem; color: var(--text-gray); font-weight: 100;}
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption { background: rgba(255,255,255,.8); color: #111; width: 100%; padding-top: 4px; }

.fbx-count { color: #fff !important; padding-top: 10px; }

.wp-block-table { margin-top: 2rem;   }
.wp-block-table th { background: var(--clr-secondary); color: #fff; padding: 0.5rem 3rem; }
.wp-block-table td { padding: 0 0.4rem; background: var(--clr-gray); color: var(--text-gray); line-height: 2rem; width: 25%; }
/*.wp-block-table td:hover { background: var(--clr-secondary); color: #fff; line-height: 2rem; }*/

.category-header { margin: 0; padding-bottom: 0;   }
.blog {}

.blog p { margin: 0; display: inline; }
.blog .date { font-size: 0.6rem; line-height: 1rem; }
.blog .date .las, .blog .date .lar { font-size: 1rem; position: relative; top: 0.15rem; }
.blog a {}
.blog h3 {  margin: 1rem 0; }
.blog h3 a { font-weight: inherit; color: var(--clr-secondary); }


#searchform { margin-top: 3rem; margin-bottom: 1rem; padding: 0 1rem; width: 100%; display: flex; flex-flow: row nowrap; justify-content: space-between; }
.search-field { width:80%; height: 40px !important; line-height: 40px; font-weight: 100 !important; font-size: 0.9rem; }
.search-button {  top: 0; margin:0 !important; background: none !important; color: var(--text-gray); border: none; text-align: center; line-height: 40px; cursor: pointer; }
.search-result { list-style: none; margin: 1rem 0;; padding: 0; }
.search-result ul { list-style: none; }







@media(max-width: 1440px) { 
	section { padding: 0; margin: 4rem auto !important; }
    section img { display: block; width: 60vw; height: auto; margin: 1rem auto;  }
	.wp-block-group { margin: 0; width: 100%; padding: 4rem 2%; overflow: hidden;  }
	.nav-container.show { margin-left: 0; width: 100%; overflow-y: scroll; }
	
	.hero h1 { font-size: 1rem; }
	.hero h2 { font-size: 1rem; }
	.span-spacer { margin: 0.5rem; }
	#rememberlink { display: none !important }
	.slide-from-right { transform: translateX(0px); opacity: 1; }
	.slide-from-left { transform: translateX(0px); opacity: 1; }
	.slide-from-bottom { transform: translateY(0px); opacity: 1; }
	.slide-from-right.start {opacity: 1; transform: translateX(0); animation: none;}
	.slide-from-left.start {opacity: 1; transform: translateX(0); animation: none;}
	.slide-from-bottom.start {opacity: 1; transform: translateY(0); animation: none;}
	footer { width: 100%; min-height: 30vh; background: #333; color: #fff; padding: 2rem 4%; font-size: 0.8rem; font-weight: 100; color: #fff; }
	.slogan { font-size: 2rem; }
	h2 { font-size: 1.1rem  }
	h3 { font-size: 1rem; }
}

@media(max-width: 1120px) { 
	section { padding: 0; margin: 4rem auto !important; }
    section img { display: block; width: 60vw; height: auto; margin: 1rem auto;  }
	.wp-block-group { margin: 0; width: 100%; padding: 4rem 1%; overflow: hidden;  }
	.nav-container.show { margin-left: 0; width: 100% }
	.hideonmobile { display: none; }
	h2 { font-size: 1.1rem  }
	h3 { font-size: 1rem; }
}

@media (orientation: landscape) and (max-width: 1080px) {
	body { font-size: 16px; }
	h2 { font-size: 1.1rem  }
	h3 { font-size: 1rem; }
	.hideonmobile { display: none; }
	.wp-block-columns { gap: 0rem; margin: 0 auto !important; width: 100%; gap: 0rem;
		flex-wrap: nowrap;
		display: flex;
		align-content: flex-start;
		flex-direction: column;
	
	} 
	.wp-block-group { width: 90%; margin: 0 auto; }
	.reverse-columns { flex-direction: column-reverse; width: 90%; margin: 0 auto; }
	.wp-block-column { width: 100%; display: block; flex-basis: 100% !important; }
	.wp-block-image img { max-width: 50%; }
	.top-header { padding: 0.3rem 1rem; }
	.counter .wp-block-columns { width: 50%; margin: 0 auto; gap: 0rem; }
	.wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column:not(:first-child) {
		margin: 0; 
	}
	.alignright { float: none !important; }
	
	.size-medium { width: 100% !important; }
	
}

@media(orientation: portrait) {
	body { font-size: 20px; }
	#rememberlink { display: none !important }
	h2 { font-size: 1.1rem  }
	h3 { font-size: 1rem; }

    .top-header { font-size: 0.7rem; }
    .top-header .las { margin-left: 0.25rem; }
    .hero { padding: 0 5%; }
	.hero .logo { height: auto; }
	.slogan { width: 100%; font-size: 1.6rem; }	
	
	
    
    .flexer { display: block; margin: 0 auto; gap: 4rem; }

    .top-header .flexer { display: flex; gap: 4rem; gap: 0.5rem; margin: 0; }
    .flexer div { display: block; margin: 0 auto; width: 95%; }
    .threeblocks { max-width: 60vw; }
    .twoblocks div:last-child { margin-top: 1rem; }

    .topic-icon { text-align: center; margin-left: 4rem; }

    section { padding: 0; margin: 4rem auto !important; font-size: 2rem; }
    section img { display: block; width: 60vw; height: auto; margin: 1rem auto;  }
	.wp-block-group { margin: 0; width: 100%; padding: 4rem 10%; overflow: hidden;  }
	.wp-block-group img { display: block; width: 100vw; height: auto; margin: 1rem auto;  }
	.wp-block-column { width: 100%; }
	.wp-block-columns { gap: 1rem; margin: 0; }
	.columngap3 { gap: 1rem }
	.columngap2 { gap: 1rem }
    .slide-from-right { animation: none; opacity: 1; transform: translateX(0) translateY(0); }
    .slide-from-left { animation: none; opacity: 1; transform: translateX(0) translateY(0); }
    .slide-from-bottom { animation: none; opacity: 1; transform: translateX(0) translateY(0); }
    .slide { animation: none; opacity: 1; transform: translateX(0) translateY(0); }
    .slide-from-right.start {opacity: 1; transform: translateX(0); animation: none }
    .slide-from-left.start {opacity: 1; transform: translateX(0); animation: none }
    .slide-from-bottom.start {opacity: 1; transform: translateY(0); animation: none}
    input { width: 100% !important; margin: .5rem 0; }

    footer { display: block; }
    footer div { display: block; text-align: center; }
    footer ul { margin: 0; padding: 0; }
    footer ul li { text-align: center; padding: .5rem; margin: 0; }
	
	.wp-block-table { margin-top: 2rem; display: block; width: 100%; overflow-x: scroll;  }
	.wp-block-table th { white-space: nowrap; }
	.wp-block-table th { white-space: nowrap;padding: 0.5rem 1rem; }
	.wp-block-table td { white-space: nowrap;padding: 0.5rem 1rem; }

	.top-header { box-shadow: 0 0 10px rgba(0,0,0,0.3); color: var(--text-white); padding: 1rem 1rem; }
	
	.language-switcher-header li { color: var(--text-gray);  }
	#rememberlink { display: none !important }
	
	.language-switcher-header { font-size: 1rem; }
	.top-header { font-size: 0.5rem; }
	
	.top-header .flexer a { margin: 0; }
	.hideonmobile { display: none; }
	
	.reverse-columns { flex-direction: column-reverse; }
	#totop { bottom: 1.5rem; right: 1.5rem; }
	#searchform { margin-top: 0.5rem; margin-bottom: 100rem; }
}