* {margin: 0px; padding: 0px; border: 0px;}
html, body {
  overflow-x: hidden;
}

body{
	min-height: 100%;
	background-color: #fff;
	/*background-image: radial-gradient(#ced6e4 10%, #ffffff 45%);*/
	font: normal 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color: #121212;
}

/*======================= Layout ========================*/
#contentfloatholder {
	width:980px;
	margin: 0 auto;
	padding:10px;
	border:0px;
}

#contentfloatholder:after {
 /* this is for NN6 to clear floats */
    content: "."; 
    display: block; 
	height: 0px;
    clear: both; 
    visibility: hidden;
}

#content {
	width: 90%;
	margin: auto;
	max-width: 980px;
	height: 100%;
}
	.content_left {
	float:left;
	width:auto;
	padding:44px 44px 12px 12px;
	}
	.content_right {
	width:auto;
	padding-top: 44px;
	}	 
	.content_center {
	text-align:center;
	padding:0 44px;

	}

#header {
background:url("images/header.jpg") no-repeat scroll center top transparent;
display:inline-block;
margin: 0 auto;
width: 100%;
min-width: 390px;
}

.header-wrapper {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
	margin: 0 12px;
}

	#header div.contacts {
	color:#646464;
	float:right;
	font: normal 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-transform:lowercase;
	text-align: right;
	display:right;
	width:auto;
	padding:0;	
}
	
	#header div.logo {
	font: 18px, Verdana, Arial, Helvetica, sans-serif #cccccc;
	float:left;
	width:auto;
	padding-top:8px;
}
	
.center { text-align:center;}

#footer {
background:url("images/footer.jpg") no-repeat scroll center top transparent;
display:block;
height:57px;
min-height:57px;
color:#121212;
font-size:10px;
text-align:center;
padding-top:55px;
}

#header, #footer {
clear: both; 
}

.spacer { clear:both;}
.float_left {float:left; }
.float_right {float:right; }


div.hr {
	height: 1px;
	background: #ffffff url(images/dash.gif) repeat-x scroll left;
}
	div.hr hr {display: none;}

#button a { background-image:url(images/button_free_download.gif);}
#button a:hover{ background-image:url(images/button_free_download_over.gif);}

/*===============text styles======================*/

h1{
font-size:14px;
font: 600 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
color:#FF6600;
text-transform:uppercase;
padding:8px 0;
}


h2{
text-align:left;
font: 600 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
color:#121212;
margin: 12px 0;
	
}

p {
text-align:left;
margin-bottom: 12px;
}
							

#footer a {
font-size:11px;
color:#4c9adc;
font-weight:normal;
}
	#footer a:hover{color:#666666;}

a{
	font: normal 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	color:#FF6600;
} 
	a:hover{color:#666666;}

.text_white{
	font: normal 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #ffffff;
	font-weight:bold;
}

.text_small{
	font-size: 9px;
	color:#333333;
	text-align:center;
}

/*======================= MENU ========================*/

#menu {
  display: block;
}

#menu ul{
margin:0 auto;
padding:0px;
text-transform: uppercase;
color: #333333;
display: flex;
overflow-x: 44px;
justify-content: center;
align-items: center;
}

#menu ul li{
float:left;
margin:0px;
padding: 0;
list-style:none;
width:175px;
text-align:center;
}

#menu a {
font: normal 100%/1.5 Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
text-transform: uppercase;
display: block;
color: #333333;
margin:0px;
background-repeat:no-repeat;
background-position:center;
width:175px;
padding:125px 0 0 0px;
}

#menu #print a { background:url(images/icon_print.gif) no-repeat 23px 0; width:160px;}
#menu #print a:hover {background:url(images/icon_print.gif) no-repeat -108px 0;}

#menu #web a { background:url(images/icon_web.gif) no-repeat 18px 0; width:150px;}
#menu #web a:hover, #menu #web a:active { background:url(images/icon_web.gif) no-repeat -113px 0;}

#menu #ui a, #menu #ui a:link { background:url(images/icon_ui.gif) no-repeat 24px 0; width:160px;}
#menu #ui a:hover, #menu #ui a:active { background:url(images/icon_ui.gif) no-repeat -111px 0;}

#menu #multimedia a, #menu #multimedia a:link { background:url(images/icon_multimedia.gif) no-repeat 23px 0; width:160px;}
#menu #multimedia a:hover, #menu #multimedia a:active { background:url(images/icon_multimedia.gif) no-repeat -110px 0;}

#menu #corp a, #menu #corp a:link { background:url(images/icon_corp.gif) no-repeat 23px 0; width:160px;}
#menu #corp a:hover, #menu #corp a:active { background:url(images/icon_corp.gif) no-repeat -110px 0;}

#menu li {position:relative;}

/* ================= BURGER ================= */
#header {
  position: relative;
}

#burger {
  display: none;
  width: 44px;
  height: 32px;
  background: rgba(255,255,255,0.9);
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  z-index: 3000;
  position: absolute;
  top: 12px;
  right: 44px;
}

#burger span {
  display: block;
  height: 3px;
  background: #333;
  margin-bottom: 6px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#burger span:last-child {
  margin-bottom: 0;
}

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

  #contentfloatholder {
    width: 100%;
    min-width: 0;   /* critical */
    padding: 10px;
  }

  #menu ul {
    width: auto;
    margin: 0;
  }

  #footer {
    width: 100%;
  }
}
/* ================= Tablet + Mobile ================= */

@media screen and (max-width: 767px) {
	
  #burger {
    display: block;
  }
	
 /* Hide desktop menu */
  #menu {
    display: none;
    position: absolute;
    background: #fff;
    border: 1px solid #ddd;
    z-index: 2000;
	width: auto;
  }
	#header div.contacts {display:none;}
	

  /* Overlay menu */
  #menu.open {
    /*display:inline-block;
    position: absolute;*/
	display:block;
	position:fixed;
    top: 64px;           /* below header content */
    right: 24px;
	border-radius: 12px;
    background-color: rgb(255, 255, 255, 0.95); 
    box-shadow: rgba(0, 0, 0, 0.05) 0px 8px 20px 0px;
	width: auto;
    z-index: 1500;
  }
 
  #menu ul {
    margin: 0;
    padding: 0;
	display:flex;
	flex-flow: column;
	justify-content: center;
  	align-items: center;
  }
  /* Vertical list */
  #menu ul li {
    float: none;
    width: auto;
	white-space: nowrap;   /* prevent wrapping */
    border-bottom: 1px solid #eee;
  }
	 
  #menu ul li:last-child {
    border-bottom: none;
  }

  #menu a {
	width: auto;
    padding: 16px 44px;       /* comfortable tap target */
	background-position: 16px center; /* icons visible */
    background-size: 32px auto;
    background: none !important;  /* removes icon images */
    font-size: 14px;
	text-transform: uppercase;
  }
	
  #menu a:hover {
    background-color: #f2f2f2;
  }
}


@media screen and (max-width: 479px) {
  #menu {
    flex-direction: column;
  }
}


/*======================= SCROLL SLIDER ========================*/

.container {
	width: 100%;
	max-width: 900px;
	margin-left:auto;
	margin-right:auto;
}

.section {
	-webkit-text-fill-color: inherit; 
	background-clip: border-box;
	min-height: auto;
	margin-left: auto;
	margin-right: auto;
	padding: 30px;
}

.team-slider {
	outline-offset: 0px;
	border: 0 solid #000;
	outline: 0 #333;
	padding: 44px;
	position: relative;
	
}
.centered-heading {
	text-align: center;
	border: 1px #000;

}
.centered-subheading { 
	text-align: center;
	max-width: 530px;
	margin-left: auto;
	margin-right: auto;
}
.team-slider-wrapper {
	background-color: transparent;
	height: auto;
	margin-top: 44px;
}
.team-slide-wrapper {
	width: flex-basis;
	margin-right: 5%;
}

@media screen and (max-width: 980px) {
  .team-slide-wrapper {
    width: 47%;
    margin-right: 6%;
  }
}

@media screen and (max-width: 479px) {
  .team-slide-wrapper {
    width: 100%;
    margin-right: 0%;
  }
}
.team-block {
	color: #4b2222;
	text-align: left;
	background-color: #ffffff;
	background-image: linear-gradient(rgba(255, 255, 255, 0) 55%, rgb(206, 214, 228));
	border: 5px #000;
	border-radius: 0;
	height: 100%; 
	margin-left: auto; 
	margin-right: auto; 
	display: block;
}
.team-member-image-two { 
	height: auto; 
	margin-left: 0; 
	padding-top: 0; 
	padding-left: 0;
}
.team-block-info { 
	flex-direction: column; 
	align-items: flex-start; 
	padding-left: 12px; 
	padding-right: 12px; 
	display: flex;
	height: auto;
}
.team-member-name-two { 
	margin-bottom: 12px;
}
.team-member-text {
	margin-bottom: 24px;
}
.text-link-arrow {
	color: #1a1b1f; 
	justify-content: flex-start;
	align-items: center; 
	font-size: 14px; 
	line-height: 20px; 
	text-decoration: none;
	display: flex;
}
.text-link-arrow:hover { 
	color: #2b75ca;
}
.arrow-embed {
	margin-left: 2px; 
	display: flex;
}
.team-slider-arrow {
	display: none;
}
.team-slider-nav { 
	margin-top: 24px; 
	font-size: 10px; 
	position: static;
	bottom: -60px;
}
.mask {
	text-overflow: clip;
}
.image {
	text-align: left;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	position: static;
}

/* ================= TEAM SLIDER ================= */


/* Horizontal track */
.team-slider-track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 24px;
}

/* Hide scrollbar */
.team-slider-track::-webkit-scrollbar {
  display: none;
}
.team-slider-track {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Slide */
.team-slide {
  flex: 0 0 calc(33.333% - 22px);
  scroll-snap-align: start;
}

/* Tablet */
@media (max-width: 980px) {
  .team-slide {
    flex: 0 0 calc(50% - 16px);
  }
}

/* Mobile */
@media (max-width: 479px) {
  .team-slide {
    flex: 0 0 100%;
  }
}

/* Card */
.team-block {
  background-image: linear-gradient(
    rgba(255,255,255,0) 55%, rgb(206,214,228)
  );
  display: flex;
  flex-direction: column;
}

/* Image */
.team-member-image-two {
  width: 100%;
  height: auto;
  display: block;
}

/* Content */
.team-block-info {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* Link */
.text-link-arrow {
  margin-top: auto;
  display: inline-flex;
  gap: 6px;
  text-decoration: none;
  color: #1a1b1f;
}
.text-link-arrow:hover {
  color: #2b75ca;
}

.team-slider {
	position: relative;
	padding-top: 24px;
	padding-right: 24px;
	padding-left: 24px;
	padding-bottom: 24px;
}


/* ================= CONTROLS ================= */
/* Arrows */
.team-slider-controls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  pointer-events: none;
}

.slider-arrow {
  pointer-events: all;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #d0d7e3;
  color: rgb(255, 255, 255, 0.75);
  font-size: 28px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.slider-arrow:hover {
  opacity: 1;
  transform: translateY(-50%) scale(1.05);
}

.slider-arrow.prev {
	left: -18px;
}
.slider-arrow.next {
	right: -18px;
}

/* ================= DOTS ================= */

.team-slider-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
}

.team-slider-dot {
  width: 10px;
  height: 10px;
  cursor: pointer;
  position: relative;
}

.team-slider-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: #d0d7e3; /* inactive */
  transition: transform 0.25s ease, background-color 0.25s ease;
}

.team-slider-dot.active::before {
  background-color: #acb8c1;
  transform: scale(1.4);
}

/* kill button chrome everywhere */
.team-slider-dot {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
}

/* ================= ACTIVE SLIDE SCALE ================= */

.team-slide {
  transition: transform 0.35s ease, opacity 0.35s ease;
  opacity: 1;
}

/* Desktop: 3 cards per view */
.team-slide {
  flex: 0 0 calc(33.333% - 22px);
}

/* Tablet: 2 cards per view */
@media screen and (max-width: 991px) {
  .team-slide {
    flex: 0 0 calc(50% - 16px);
  }
}

/* Mobile: 1 card per view */
@media screen and (max-width: 479px) {
  .team-slide {
    flex: 0 0 100%;
  }
}

.team-slide.active {
  transform: scale(1);
  opacity: 1;
}
