:root {
  --textcol: #232323;
  --menucol: #2b59b1;
  --menutext: #fff;
  --menutextsel: #0d6efd;
  --linkcol: #5f8ace;
  --middlewidth: 960px;
  --bodymiddlewidth: 960px;
  --bannerwidth: 310px;
  --bannerheight: 200px;
  --navforecolor: #000000;
  --navbackcolor: #DDDDDD;
  --navhighcolor: #5f8ace;
  --headinghover: #5f8ace;
  /* server boxes 330x480,40 */

  /* #606060 visited links or quotes */

}

/* ANIMATIONS */

.category .arrow h2 {

}

img.arrow {
  height: 24px;
  width: 24px;
  position: relative;
  margin-top: 12px;
  background-image: url("../img/arrows.svg");
  background-repeat: no-repeat;
}

.content a.arrow {
  height: 24px;
  width: 24px;
	position: relative;
	text-decoration: none;
  color: var(--textcol);
  cursor: pointer;
}

.content a.arrow:hover {
  color: #03045E;
  fill: #03045E;
  transition: color 0.15s ease, fill 0.15s ease;
}

.content a.arrow:hover > img.arrow {
  transform: scale(1.2);
  transition: transform 0.15s ease;
}

img.arrow {
  transform: rotate(0);
  transition: transform 0.15s ease;
}

img.arrow.opened {
  transform: rotate(90deg);
  transition: transform 0.15s ease;
}

.content a.arrow:hover > img.arrow.opened {
  transform: rotate(90deg) scale(1.2);
  transition: transform 0.15s ease;
}

/*
a.arrow::before {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 2px;
	bottom: 0px;
	left: 0px;
	background-color: rgba(0,0,0,1.00);
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

a.arrow:hover {

}

a.arrow:hover::before {
	transform: scaleX(1);
}

a.arrow:active {
}

a.arrow:visited {
}
*/

/* FONTS */
@font-face {
	font-family: "Trebuchet MS";
  src: url("../webfonts/instrument_sans.otf") format("opentype");
  src: url("../webfonts/instrument_sans.woff") format("woff");
  src: url("../webfonts/instrument_sans.woff2") format("woff2");
}

@font-face {
	font-family: "Trebuchet MS Italics";
  src: url("../webfonts/instrument_sans_it.otf") format("opentype");
  src: url("../webfonts/instrument_sans_it.woff") format("woff");
  src: url("../webfonts/instrument_sans_it.woff2") format("woff2");
}

h1 {
	font-family: "Trebuchet MS", "Arial", sans-serif;
	font-size: 36px;
  margin: 16px 0px;
}

h2 {
	font-family: "Trebuchet MS", "Arial", sans-serif;
	font-size: 24px;
}

h3 {
	font-family: "Trebuchet MS", "Arial", sans-serif;
	font-size: 18px;
}

h4 {
	font-family: "Trebuchet MS", "Arial", sans-serif;
	font-size: 16px;
}

p {
	font-family: "Trebuchet MS", "Arial", sans-serif;
	font-size: 16px;
  margin: 8px 0px;
}

body {
  margin: 0;
  font-family: "Trebuchet MS", "Arial", sans-serif;
}

nav {
  overflow: hidden;
  background-color: var(--navbackcolor);
  width: 100%;
}

nav .navbox {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--middlewidth);
}

nav a:any-link, nav span.sep {
  color: var(--textcol);
  position: relative;
  background-color: inherit;
  float: left;
  display: block;
  text-align: center;
  padding: 0px 0px;
  margin: 10px 10px;
  text-decoration: none;
  font-size: 20px;
  text-transform: uppercase;
}

nav a::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  bottom: 0px;
  left: 0px;
  background-color: var(--navforecolor);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

nav a:hover::before {
  transform: scaleX(1);
  background-color: var(--headinghover);
}

nav a:hover {
  color: var(--headinghover);
  transform: scaleX(1);
}

nav a.active {
  color: var(--menucol);
  fill: var(--menucol);
  background-color: var(--menutext);
}

/* Hide the link that should open and close the topnav on small screens */
#menu-hamburger {
  display: none;
}

/* When the screen is less than 250 pixels wide, also hide home button */
@media screen and (max-width: 250px) {
  nav a { display: none; }
}

@media screen and (max-width: 865px) {
  /* When the screen is less than this many pixels wide, hide all links. Show the link that contains should open and close the topnav (.icon) */
  nav .navbox a, nav span.sep { display: none; }
  #menu-hamburger {
    float: right;
    display: block;
  }

  /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
  nav.responsive {position: relative;}
  nav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  nav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  nav.responsive .dropdown {float: none;}
  nav.responsive .dropdown-content {position: relative;}
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover {
  color: var(--menutext);
  background-color: var(--menucol);
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a:any-link {
  color: #fff;
  background-color: var(--menucol);
  float: none;
  display: block;
  padding: 12px 16px;
  text-decoration: none;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
  color: var(--menucol);
  background-color: var(--menutext);
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.adropdown:hover {
  color: var(--menucol);
  background-color: var(--menutext);
}

.container {
  position: relative;
  margin-top: -10px;
  padding-left: 10px;
  padding-right: 10px;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--bodymiddlewidth);
  color: var(--textcol);
  line-height: 1.6;

/*text larger borders
blue checkboxes instead of bullets
more line spacing
lighter grey text
center-justify */



}

.heading {
  /*margin-top: 1em;
  margin-bottom: 1em;*/
}

.introduce {
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
}

.content {
  margin-top: 1em;
  margin-bottom: 1em;
}

.content a:any-link
{
  text-decoration: none;
  color: var(--linkcol);
}

ul.circlelist, ul.circlelist li {
}

#menu-colocation {

}

#menu-telephone,#menu-email {
  float: right; 
  display: inline-block;
  box-sizing: border-box;
}

#menu-login {
  float: right;
}

#menu-hamburger {
  float: right;
  padding-top: 9px;
  padding-bottom: 9px;
}

.error_text { color: red !important; }
.error_inputbox { border-color: red !important; background-color: lightcoral !important; background-image: none !important; }

header {
  color: var(--menutext);
  fill: var(--menutext);
  background-color: var(--menucol);
  overflow: hidden;
  width: 100%;
  padding: 0px;
}

.header_gap {
  background: linear-gradient(rgba(68,68,68,1.00), rgba(68,68,68,0.00));
  height: 10px;
  z-index: 2;
}

.headings {
  max-width: var(--middlewidth);
  margin-left: auto;
  margin-right: auto;
  line-height: 1px; /* Minimize it here or icons have padding below */
}

.headings a:any-link {
  color: var(--menutext);
  fill: var(--menutext);
  background-color: inherit;
  float: left;
  display: block;
  text-align: center;
  padding: 3px 16px;
  text-decoration: none;
  font-size: 17px;
  padding: 13px 13px;
}

.headings a:hover {
  color: var(--menucol);
  fill: var(--menucol);
  background-color: var(--menutext);
}

#menu-index img {
  filter: invert(100%) sepia(1%) saturate(7500%) hue-rotate(294deg) brightness(109%) contrast(100%);
}

#menu-index:hover {
  background-color: var(--menutext);
}

#menu-index:hover > img {
  filter: brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(1204%) hue-rotate(202deg) brightness(96%) contrast(87%);
}

outerbannerbox {
  width: 100%;
  height: 260px;
  overflow: hidden;
  display: block;
  background-color: var(--menucol);
}

bannerbox {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  max-width: var(--middlewidth);
  text-align: center;
  height: 260px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 45px;
}

/* banner banner 330height: img 300hx600w, gap: 70px, cutoff: 350px, translate animation (mask?) */

bannerbox > a > banner {
  position: relative;
  atransition: left 0.3s linear, right 0.3s linear;

  color: black;
  display: none;
  width: var(--bannerwidth);
  height: var(--bannerheight);
  cursor: pointer;
  background-color: white;
}

banner a:any-link {
  text-decoration: none;
  color: var(--textcol);
}

#leftarrow {
  position: absolute;
  left: 15px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(7500%) hue-rotate(294deg) brightness(109%) contrast(100%);
  width: 32px;
  height: 24px;
  top: calc((var(--bannerheight)/2) - 12px);
  cursor: pointer;
  z-index: 1;
}

#rightarrow {
  position: absolute;
  right: 15px;
  filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(7500%) hue-rotate(294deg) brightness(109%) contrast(100%);
  width: 32px;
  height: 24px;
  top: calc((var(--bannerheight)/2) - 12px);
  cursor: pointer;
  z-index: 1;
}

#leftarrow:hover,#rightarrow:hover {
  transform: scale(1.15);
  transition: transform 0.15s ease;
}

#threedots {
  margin: auto;
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 25px;
}

#threedots > span {
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
  color: var(--navhighcolor);
}

#threedots > span.selecteddot {
  color: white;
}

@starting-style {
  .bannerm {
    aleft: 60px;
  }
}


.bannerl {
  position: absolute;
  display: inline-block;
  left:0px;
  mask-image: linear-gradient(to left, rgba(255,255,255,1.00) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.00) 100%);
  transition: left 0.3s linear, right 0.3s linear;
}

.bannerm {
  position: absolute;
  display: inline-block;
  left: calc((var(--middlewidth)/2) - (var(--bannerwidth)/2));
  transition: left 0.3s linear, right 0.3s linear;
}

.bannerr {
  position: absolute;
  display: inline-block;
  right:0px;
  mask-image: linear-gradient(to right, rgba(255,255,255,1.00) 0%, rgba(255,255,255,0.50) 50%, rgba(255,255,255,0.00) 100%);
  transition: left 0.3s linear, right 0.3s linear;
}

/* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions */


@starting-style {
  .banner_rr_to_r {
    right: calc(0px - var(--bannerwidth));
  }
  .banner_ll_to_l {
    left: calc(0px - var(--bannerwidth));
  }
}

.banner_m_to_r {
  animation: banner_m_to_r 0.3s linear;
} 
@keyframes banner_m_to_r {
  from {
    left: calc((var(--middlewidth)/2) - (var(--bannerwidth)/2));
  }
  to {
    left: calc(var(--bodymiddlewidth) - var(--bannerwidth));
  }
}

.banner_r_to_m {
  animation: banner_r_to_m 0.3s linear;
} 
@keyframes banner_r_to_m {
  from {
    left: calc(var(--bodymiddlewidth) - var(--bannerwidth));
  }
  to {
    left: calc((var(--middlewidth)/2) - (var(--bannerwidth)/2));
  }
}

.banner_r_to_gone {
  position: absolute;
  display: inline-block;
  left: calc(var(--bodymiddlewidth));
  animation: banner_r_to_gone 0.3s linear;
} 
@keyframes banner_r_to_gone {
  from {
    left: calc(var(--bodymiddlewidth) - var(--bannerwidth));
  }
  to {
    left: calc(var(--bodymiddlewidth));
  }
}

footer {
  color: var(--menutext);
  background-color: var(--menucol);
  overflow: hidden;
}

.footer_links {
  display: block;
  text-align: center;
  background-color: var(--navbackcolor);
  padding-top: 14px;
  padding-bottom: 14px;
}

.footer_linkbox {
  background-color: var(--navbackcolor);
}

.footer_links a:any-link {
  color: var(--navforecolor);
  fill: var(--navforecolor);
  background-color: var(--navbackcolor);
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
  font-size: 17px;
}

.footer_links a:hover {
  color: var(--menucol);
  fill: var(--menucol);
  background-color: var(--menutext);
}

.footer_bottom_gap {
  background-color: white;
  height: 5px;
}

.footer_bottom {
  padding-top: 14px;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--middlewidth);
  color: var(--menutext);
  fill: var(--menutext);
  line-height: 27px;
  height: 27px;
  text-align: center;
}

.footer_logo {
  float: left;
}

.footer_phone {
}

.footer_copyright {
  float: right;
}

.acab:any-link .cab {

}

.cab {
  width: 235px;
  padding: 15px;
  margin: 10px;
  border: 1px solid black;
  line-height: 1.2;
  color: var(--textcol);
  cursor: pointer;
}
.cab img { float: left; margin-right:20px; }
.cab .size { font-size: 36px; font-weight: bold; }
.cab .title { font-size: 16px; }
.cab li { font-size:14px; }
.cab .price { display:block;text-align: center; }

.cab:hover {
  transform: scale(1.1);
  transition: transform 0.15s ease;
}

.facility .arrowblock {
  max-height: 0;
  opacity: 0;
  display:none ;
  transition: opacity 0.25s ease-out, max-height 0.25s ease-out;
  overflow: hidden;
  padding-left: 100px;
  padding-right: 100px;
  text-align: justify;
}
.facility .arrowblock.opened {
  opacity: 1;
  display: block;
  max-height: 200px;
  transition: opacity 0.40s ease-in, max-height 0.40s ease-in;
}