@CHARSET "UTF-8";

:root {
  --backgroundColor: #f8f9fa;
  --backgroundColorTrans: #f8f9faaa;
  --fontColorBright: #ffffff;
  --fontColorDark: ##124d7e;
  --fontColorCaption: #000000;
  --accentColorBlue: #124d7e;
  --accentColorYellow: #ffdd00;
  --accentColorGreen: #18a871;
  --boxcolorAlpha: #000000aa;
  /*--darkblue: #10394F;*/
  --standardFont: 'Roboto Condensed', sans-serif;
  --standardFontSize: 22px;
  --headFont: 'Roboto Condensed', sans-serif;
}


/* roboto-condensed-regular - latin */
@font-face {
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../styleFolder/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../styleFolder/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../styleFolder/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../styleFolder/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../styleFolder/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../styleFolder/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


html {
    scroll-behavior: smooth;
	scrollbar-width: none;
}
h1, h2, h3, h4, h5{
	font-family: var(--headFont);
	color: var(--fontColor)
}
head{
	font-family: var(--standardFont);
}

.jumbotron{
	background-color: var(--accentColorBlue);
	color: var(--white);
	font-size: 35px;
}
.pagewide{
	 height: 40px;
	 background-color: var(--accentColorBlue);
	 color: var(--fontColorBright);
}
.navbar {
    top: 40px !important;
    background-color: var(--accentColorBlue);
	color: var(--accentColorBlue);
	margin-bottom: 20px;
	font-size: 32px !important;
} 

.nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

.nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
}
hr{
	 border-top: 2px solid var(--logoHead)
}

body {
  	background-color: var(--backgroundColor);
	background-attachment: fixed;
	background-repeat: repeat-y;
	background-position: 50% 10%;
	background-size: cover;
	background-image:url('../images/Aluminium.png');
	/*background-blend-mode: hard-light;*/
	font-family: var(--standardFont);
	font-size: var(--standardFontSize);
}

p {
	font-size: var(--standardFontSize);
	font-family: var(--standardFont);
}



footer{
	font-family: var(--headFont);
	font-size: 20px !important;
	color: var(--white);

}
footer a:hover{
	color: var(--accentColorGreen) !important;
}


a{
	font-family: var(--headFont) !important;
	color: var(--accentColorBlue) !important;
	text-decoration: none !important;
}

.pagewide a{
	color: white !important;
}
.offcanvas-header {
	box-shadow: 0 6px 4px -4px rgba(0,0,0,.5) !important;
}

a:hover{
	color: var(--accentColorGreen) !important;
}
.navbar a:hover{
	color: var(--accentColorGreen) !important;
}
.navbar .btn-primary{
	background-color: var(--accentColorBlue) !important;
	border: none !important;
	font-size: 25px;
}
.navbar .btn-primary:hover{
	background-color:var(--accentColorGreen) !important;
	color: white !important;
}
 .btn-primary{
	background-color: var(--accentColorBlue) !important;
	border: none !important;
	font-size: 25px;
}
 .btn-primary:hover{
	background-color:var(--accentColorGreen) !important;
	color: white !important;
}

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

.content {
	position: relative;
  	max-width:100%;
	min-height: 50vh;
 	margin: auto;

	/*box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);*/
	color: var(--white);
}
.subcontent {
  	max-width:80%;
  	color: var(--accentColorBlue);
}

.contentBox{
	/*box-shadow: 0px -6px 4px -4px rgba(0,0,0,.5), 0 6px 4px -4px rgba(0,0,0,.5);*/
	background-color: var(--backgroundColorTrans);
	 border-radius: 25px;
}
.contentBox ul {
	font-size: var(--standardFontSize);
	font-family: var(--standardFont);
}
a.disabled {
    pointer-events: none;
    color: #ccc;
}

/*#companyTopImageid{
	position: relative;
	background-image: url("../images/slider/1.png");
	background-attachment: scroll;
	background-size: contain;
	background-position: center 20%;
	background-repeat: no-repeat;
	margin-top: 150px;
	min-height: 40vh;
	box-shadow:0px 6px 4px -4px rgba(0,0,0,.5);
}*/
#companyTopImageid{
	position: relative;
	background-image: url("../images/slider/1.png");
	background-attachment: scroll;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: 180px;
	min-height: 50vh;
	box-shadow:0px 6px 4px -4px rgba(0,0,0,.5);
}
#indexTopImageid{
	margin-top: 200px;
	position: relative;
	min-height: 50vh;
}
#topSpacerid{
	position: relative;
	min-height: 145px;
}
a.anchor {
    display: block;
    position: relative;
    top: -240px;
    visibility: hidden;
}

.kuepperCarouselClass{
	height:100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}
.carousselCaption
{
  position: absolute;
  bottom: 30%;
  bottom:0vh; 
  right: 0;
  background-image: linear-gradient(125deg, #00000000 25% , #f8f9fa88 35%, #f8f9faaa);
}
.carousel-item{
	height:50vh;
}

.navbar-brand img{
	max-width: 200px;
}


.invalid-feedback
{
	color: red !important;
}

input[type="number"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}
.text-justify {
  text-align: justify !important;
}
.antispam { display:none;}


.custom-file-button input[type=file] {
  margin-left: -2px !important;
  border-radius: 0px 5px 5px 0px !important;
}

.custom-file-button input[type=file]::-webkit-file-upload-button {
  display: none;
}

.custom-file-button input[type=file]::file-selector-button {
  display: none;
}

.custom-file-button:hover label {
  background-color: #dde0e3;
  cursor: pointer;
}
.custom-checkbox .custom-control-input:checked~.custom-control-label::before{
  background-color:var(--accentColorBlue) !important;
}
.brightLink:hover{
	color: var(--accentColorBlue) !important;
}

.card{
	opacity: 0.7;
	transition: opacity 400ms;
	background-attachment: scroll;
	background-size: cover;
	background-position: center;
	border-radius: 0px !important;
	border: 0px !important;
}
.card:hover{
	opacity: 1;
}

.reference-card{
	opacity: 0.8;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.coop-card{
	opacity: 0.8;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	min-width: 20vw;
}
.card-body{
	background-color: #000000aa;
}
.cardSpacer{
	min-height: 155px;
}
.cardSpacerCert{
	min-height: 40vh;
}

.cardCaption{
	color: white !important;
	transition: opacity 400ms;
	opacity:0;
}
.refCardBox:hover .cardCaption{
	opacity:1;
}


.carousel-caption{
 	 color:var(--accentColorBlue) !important;
}

#customerCarousel{
	height:12vh;
	min-height: 230px;
}
#newsCarousel{
	height:12vh;
	min-height: 600px;
}

.responsiveContainer {
  position: relative;
  padding-bottom: 52vh;
  height: 0;
  overflow: hidden;
}
.responsiveContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 50vh;
}
td{
	color: var(--accentColorBlue) !important;
}

.collapsibleFAQ {
  background-color: var(--accentColorBlue);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: var(--standardFontSize);
  font-family: var(--standardFont);
}

.collapsibleFAQ:hover {
  background-color: var(--accentColorGreen);
}
.collapsibleFAQ.active {
  background-color: var(--accentColorGreen);
}
.collapsibleServices {
  background-color: var(--accentColorBlue);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: var(--standardFontSize);
  font-family: var(--standardFont);
}

.collapsibleServices:hover {
  background-color: var(--accentColorGreen);
}
.collapsibleServices.active {
  background-color: var(--accentColorGreen);
}

.contentFAQ {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  font-size: var(--standardFontSize);
  font-family: var(--standardFont);
}
.contentServicesInfo {
  padding: 0 18px;
  overflow: hidden;
  font-size: var(--standardFontSize);
  font-family: var(--standardFont);
}
.contentServices {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
  font-size: var(--standardFontSize);
  font-family: var(--standardFont);
}
.contentServices table i, .contentServicesInfo table i, .contentFAQ table i{
 color: var(--accentColorGreen);
}

.iconCell{
	width: 1%; white-space: nowrap; vertical-align: top;
}

.newsbox{
	box-shadow: 0 2px 4px 0 rgba(0,0,0,.4);
	min-width: 35vw; 
	max-width: 45vw; 
	flex: 1 1 0px;
}

.newsPicture{
	width: 80%; 
	border-radius: 0px 0px 0 0; 
}
.newsCaption
{
	width:100%;
	position: absolute;
	bottom: 0%;
	background-color: #ffffffaa;
}
/*#######################*/
@media (max-width: 768px) {
	.jumbotron{
		background-color: var(--accentColorBlue);
		font-size: 16px;
	    font-size: 5vw !important;
	}
	body {
		font-family: var(--standardFont);
		font-size: 5vw;
	}
	footer p{
		font-family: var(--standardFont);
		font-size: 32px !important;
	}
	.content {
  		max-width: 100%;
	}
	.subcontent {
	  	max-width:100%;
	}
	p {
		font-size: 3.5vw !important;
	}
	.btn-outline-secondary
	{
		font-size: 4.5vw !important;
	}
	label {
		font-size: 3.5vw !important;
	}
	.invalid-feedback
	{
		color: var(--white) !important;
		font-size: 3.5vw !important;
	}
	p[class^="cc-"]{
		font-size: 16px !important;
	}
	input
	{
	  	height: 50px !important; 
	  	font-size: 3vw !important;
	}
	select
	{
	  	height: 50px !important; 
		font-size: 4vw !important;
	}
	.navbar-custom .dropdown-item {
    	font-size: 10vw !important;
	}
	#headerContentid
	{
	  position: absolute;
	  bottom: 20%;
	}
	#customerCarousel{
		height:20vh;
	}
	#indexTopImageid{
		min-height: 25vh;
	}
	#kuepperCarousel .carousel-item{
		height: 25vh;
	}
	#newsCarousel .carousel-item{
		height: 900px !important;
	}
	#newsCarousel .carousel-inner{
		height: 900px !important;
	}
	.carousselCaption
	{
		position: absolute;
		bottom: 30%;
		bottom:0vh; 
		right: 0;
		background-image: linear-gradient(125deg, #00000000 10% , #ffffff88 20%, #ffffffaa);
	}
	#companyTopImageid{
		background-position: center;
		background-size: contain;
		min-height: 40vh;
		margin-top: 150px;
		min-height: 25vh;
	}
	#indexTopImageid{
		margin-top: 150px;
	}
	table
	{
		font-size: 3vw;
	}
	.collapsibleFAQ , .contentFAQ table, .contentFAQ ul, 
	.collapsibleServices , .contentServices table, .contentServicesInfo table, .contentServices ul{
	  	font-size: 3.5vw;
	}
	.newsbox{
		max-width: 100vw; 
	}
	.card-img-top{
    max-height:100%;
    max-width:100%;
}
}