@charset "utf-8";

/**
2 Theme Name: itn
3 Theme URL: https://www.itn-ol.de
6 Author URL: https://www.itn-ol.de
7 **/


/* oswald-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/oswald-v53-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* oswald-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/oswald-v53-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



#accordions-165 .ui-state-active {
    background: transparent !important;}



/* Formular*/
 
.feld1 {

    width: 94%;
    height: 15px;
    border: 0px solid #a8a7d1;
    border-radius: 90px;
    background-color: #fff;
	padding:3%;
  font-family: 'Oswald';
 	color:#282759;
	font-size:1em;
}

.feld1::placeholder, .feld2::placeholder  { color:#a4a3a3;}

.feld2 {

    width: 94%;
    height: 150px;
    border: 0px solid #a8a7d1;
     border-radius: 30px;
    background-color: #fff;
    color: #001B33;
	padding:3%;
  font-family: 'Oswald';
	font-size:1em;

}


.wpcf7-submit  {
	 margin-top:20px; letter-spacing:.1em; font-size:.7em; background-color:#5f626a;  color:#fff; text-decoration: none; border: solid 0px #cccccc; padding:20px 60px 20px 60px; border-radius:60px;-moz-radius:60px;	-webkit-border-radius:60px; 
	cursor: pointer; font-size: 20px; font-weight: 700;	font-family: neo-sans, sans-serif;
}	

.wpcf7 .wpcf7-submit:disabled {
    cursor: not-allowed; background-color: #B2B2B2;}


.text_formular {font-size:.8em;}

     input.feld1::placeholder {
      color: #969696;
      opacity: 1;
      }


     input.feld2::placeholder {
      color: #969696;
      opacity: 1;
      }
textarea.feld2::placeholder {
      color: #969696;
      opacity: 1;
      }


/* liste */

ul li {list-style-type: square; }
ul li::marker { color:#5f626a;}


/* button */

 a { color:#5f626a; transition: 0.2s; text-decoration: none;  }
 a:hover { color: #5f6211;  transition: 0.2s;  }    




 a.button_1 { color: #5f626a; transition: 0.2s; text-decoration: none; border-radius: 20px; padding: 10px 20px; background-color: transparent; border: 2px solid #5f626a !important;display: inline;}
 a.button_1:hover { color: #fff; background-color: #5f626a; transition: 0.2s;   } 


/* Container */

html {
  font-family: 'Oswald';
    font-style: normal;
	height:100%;
  	margin:0;
  	padding:0;
    overflow-x: hidden;
}


body {
   font-family: 'Oswald';
    font-style: normal;
    font-size: 22px;
	line-height:130%;
    font-weight: 400px;
    color: #5f626a;
	overflow-x: hidden;
    background-color: #fff;
 	margin:0;
 	padding:0;
	
}



/* Formatierungen*/

hr {color#5f626a; margin-top:20px; margin-bottom:0px; width:100%;}

sub,
sup {
 	position:relative;
 	font-size:75%;
 	line-height:0;
 	vertical-align:baseline;
}
sub { bottom:-.25em;}
sup { top:-.5em;}

img { border-style:none; max-width: 100%; height: auto; }
svg { overflow:hidden;}

header, nav, section, footer {display: block;}


/* Überschriften*/

h1,
h2,
h3,
h4,
h5,
h6 {
 	margin-top:0;
 	margin-bottom:.5rem;
}

 h1 {
  font-family: 'Oswald';
color: #5f626a;
font-size: clamp(27px, 3vw, 32px);
font-style: normal;
line-height: 115%; 
 }

 h2 {
  font-family: 'Oswald';
color: #5f626a;
font-size: clamp(27px, 3vw, 50px);
    font-weight: 500;
line-height: 115%; 
 }


 h3 {
  font-family: 'Oswald';
color: #5f626a;
font-size: clamp(25px, 3vw, 40px);
    font-weight: 500;
line-height: 115%; 
 }

 h4 {
  font-family: 'Oswald';
color: #fff;
font-size: clamp(27px, 3vw, 50px);
    font-weight: 500;
line-height: 115%;
     padding: 0;
     margin: 0;
 }

/* content */



section {
  display: flex;
  align-items: center;
  justify-content: center;
 }

section.black {	background-color:#000000;}
section.white {	background-color:#fff;}
section.grau {	background-color:#F5F5F5;}
section.verlauf_1 { background-image: url('img/verlauf_1.png');
 background-size: 100% 100%;
}
section.verlauf_2 { background-image: url('img/verlauf_2.png');
 background-size: 100% 100%;
}

section.slider_grau {background: linear-gradient(116deg, #1d07a0 40%, #2609dc 100.43%); color: #fff;}




section.slider { 
  display: flex;
  align-items: center;
  justify-content: center;
}

section.slider p {padding: 0; margin: 0;}
section.slider img {width: 100%; height: auto;}



div#paragraph_content {
	display: grid; 
    grid-template-columns: repeat(12, 1fr); 
	grid-template-rows: auto; 
    grid-column-gap: 24px;
    grid-row-gap: 0px;
	width:calc(100% - 80px);
	max-width:1440px;
	padding-right:40px;
	padding-left:40px;
	}

div#paragraph_content.button {
    border-radius: 34px;
background: linear-gradient(97deg, rgba(41, 38, 89, 0.10) 35.01%, rgba(255, 124, 124, 0.10) 92.1%);
 padding: 40px 0 40px 0;

}


section > div#paragraph_content.distance_1 {padding: 80px 0 80px 0;}
section > div#paragraph_content.distance_2 {padding: 0px 0 0px 0;}
section > div#paragraph_content.distance_3 {padding: 80px 0 120px 0;}
section > div#paragraph_content.distance_4 {padding: 80px 0 80px 0;}

 


/*Site - article */  


article#full {
display: grid; 
grid-column: 1 / 13;  
align-content: center; 
 }

article#full.block_1to5 {grid-column: 1 / 5; }
article#full.block_1to6 {grid-column: 1 / 6; }
article#full.block_1to10 {grid-column: 1 / 10; }
article#full.block_1to12 {grid-column: 1 / 12; }

article#full.block_1to13 {grid-column: 1 / 13; }

article#full.block_2to7 {grid-column: 2 / 7; }
article#full.block_2to10 {grid-column: 2 / 10; }

article#full.block_3to12 {grid-column: 3 / 12; }
article#full.block_3to13 {grid-column: 3 / 13; }

article#full.block_4to13 {grid-column: 4 / 13; }


article#full.block_5to11 {grid-column: 5 / 11; }

article#full.block_6to13 {grid-column: 5 / 13; }


article#full.block_8to13 {grid-column: 8 / 13; }

.dist_1 {padding: 0px 0px 40px 0;}



 /*Site - content_block */  


div#leistungen_1 {
        grid-column: 1 / 13;  
	display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    	width:calc(100% - 60px);
	grid-template-rows: auto; 
     align-items: center;
    padding: 60px 30px 60px 30px;
        background-color: rgba(240, 240, 240, .5);
	}

div#leistungen_2 {
    grid-column: 1 / 13;  
	display: grid; 
    	width:calc(100% - 60px);
    grid-template-columns: repeat(12, 1fr); 
	grid-template-rows: auto; 
    align-items: center;
    padding: 60px 30px 60px 30px;
    background-color: rgba(220, 220, 220, 0.5);
	}


div#parallax {
display: grid; 
    grid-template-columns: repeat(12, 1fr); 
	grid-template-rows: auto; 
    grid-column-gap: 24px;
grid-column: 1 / 13;  
align-content: center; 
 background-image: url('img/parallax.png');
 background-attachment: fixed;
background-size: 600px;
background-repeat: no-repeat;
background-position: left 70% top 300px;
padding: 0px 0 0px 0;
  }





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




@media only screen and (max-width: 800px) {
    
    body {  font-size: 16px; }  
    
    #accordions-165 .accordions-head-title {  font-size: 18px !important;}
    
    div#paragraph_content {
	width:calc(100% - 40px);
	padding-right:20px;
	padding-left:20px;
    }
  
    #accordions-165 .accordion-content { font-size: 16px;}

    
    div#parallax {  background-size: 60%; background-position: left 50% top 200px; padding: 100px 0 50px 0;}

    
  article#full.block_1to6.video {grid-column: 1 / 10; }  
    article#full.block_1to12 {grid-column: 1 / 13; }  
article#full.block_2to10 {grid-column: 1 / 10; }
    
 article#full.block_3to12 {grid-column: 3 / 13;}
    
  article#full.block_4to13 {grid-column: 2 / 13;}
    
article#full.block_5to11 {grid-column: 1 / 13; }   
    
   article#full.block_8to13.video {grid-column: 4 / 13; }    


section > div#paragraph_content.distance_1 {padding: 40px 0 40px 0;}
section > div#paragraph_content.distance_2 {padding: 0px 0 0px 0;}
section > div#paragraph_content.distance_3 {padding: 40px 0 60px 0;}
section > div#paragraph_content.distance_4 {padding: 40px 0 40px 0;}
    
    

}


@media only screen and (max-width: 600px) {
 
   article#full.block_1to6.video {grid-column: 1 / 13; }   
    
      article#full.block_4to13 {grid-column: 1 / 13;}
    
       article#full.block_8to13.video {grid-column: 1 / 13; }  
}