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

/* ubuntu-regular - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/ubuntu-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
       url('/fonts/ubuntu-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ubuntu-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ubuntu-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ubuntu-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ubuntu-v15-latin-regular.svg#Ubuntu') format('svg'); /* Legacy iOS */
  font-display: swap;
}

/* ubuntu-500 - latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/ubuntu-v15-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'),
       url('/fonts/ubuntu-v15-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ubuntu-v15-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ubuntu-v15-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ubuntu-v15-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ubuntu-v15-latin-500.svg#Ubuntu') format('svg'); /* Legacy iOS */
  font-display: swap;
}


/*
 * Custom override css
 *
 * This css file is loaded at the last position.
 * Use it to make tweaks to the provided themes css files
 * without the need to create a complete custom theme
 *
 */
 
 
/*
 * ************************************************
 *  Common (basic styles e.g. links, headings, ...)
 * ************************************************
 */
 
body {
  font-size: 100%;
  /* font-family: 'Didact Gothic', sans-serif; */
  font-family: 'Quicksand', sans-serif;
  /* font-weight: 200; */
  background-color: white;
  /* color: #304d5e; */
  color: #223642;
  margin: 0 0 10em 0;
  /* line-height: 1.5em; */
}

@media screen and (max-width: 1023px) {
  body {
    font-size: 95%;
  }
}

@media screen and (max-width: 900px) {
  body {
    font-size: 90%;
  }
}

/* CKEditor4 */
body.cke_editable {
  font-size: 110%;  
}

body.cke_editable img {
  /* max-width: none; */
  height: auto !important;
}

/*
:target::before {
    content: '';
    display: block;
    height:      250px;
    margin-top: -250px;
}
*/



b, strong {
  font-weight: 600;
  /* font-weight: bold; */
}

p {
  line-height: 1.4em;
  margin-top: 0;
  margin-bottom: 1em;
}

a, a:visited {
  color: #f04141;
}

a.link_external {
  background: none;
  padding: 0;
}

h1,h2,h3,h4 {
  /* color: #223642; */
  color: #1988a7;
  font-weight: 500;
  font-family: 'Ubuntu', sans-serif;
}

h1,h2 {
  font-size: 2.3em;
  text-transform: uppercase;
}

.vertical_block_container h1,
.vertical_block_container h2 {
  text-align: center;
}

h3 {
  color: #1988a7;
}

img {
  max-width: 100%;
}

.vertical_block li {
  margin-bottom: .4em;
  /* font-size: 1.1em; */
}

.ghostbutton {
  display: inline-block;
  border-width: 2px;
  border-style: solid;
  border-color: #304d5e;
  padding: 8px 32px;
  background-color: #304d5e;
  text-transform: uppercase;
  font-size: 1.4em;
  color: white !important;
  border-radius: 0; /* iOS */
  text-decoration: none;
  transition: .2s;
  cursor: pointer;
  /*
  display: flex;
  justify-content: space-around;
  text-align: center;
  align-content: center;
  */
}

.ghostbutton_slim {
  display: inline-block;
  border-width: 2px;
  border-style: solid;
  border-color: white;
  padding: 2px 32px 1px 32px;
  background-color: white;
  text-transform: uppercase;
  font-size: 1.35em;  
  border-color: #0e273b;
  color: #0e273b !important;
  border-radius: 0; /* iOS */
  
}


.button-big {
  min-height: 2.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
}


.ghostbutton:hover,
.ghostbutton_slim:hover {
  background-color: white;
  border-color: white !important;
  color: #304d5e !important;
  opacity: 1;
  transition: .2s;
  text-decoration: none;
}

.button-red {
  border-color: #ee403f;
  background-color: #ee403f;
}

.button-red:hover {
  border-color: #ee403f !important;
  background-color: white !important;
  color: #ee403f !important;
}

.button-cyan {
  border-color: #1988a7;
  background-color: #1988a7;
}

.button-cyan:hover {
  border-color: #1988a7 !important;
  color: #1988a7 !important;
}

.button-white {
  border-color: white;
  background-color: white;
  color: #223642 !important;
}

.button-white:hover {
  border-color: white !important;
  color: white !important;
  color: #223642 !important;
  opacity: .8;
}

/*
.button_container {
  max-width: 100vw;
  overflow: hidden;
}
*/

.center {
  text-align: center;
}

/* Touchhover tooltip */

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted blue;
}

.tooltip .tooltiptext {
  visibility: hidden;
  /*width: 400px; */
  width: 320px;
  margin-left: -160px;
  background-color: #333844;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: .7em;
  position: absolute;
  z-index: 10;
  bottom: 125%;
  left: 50%;
  
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover {
  cursor: help;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

@media screen and (max-width: 1023px) {
  
  .tooltip .tooltiptext {
    margin-left: 0;
    max-width: 200px;
    left: 0%;
  }
    
  .tooltip .tooltiptext::after {
    display: none;
  }
    
}



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

  table {
    overflow-x: auto;
    overflow-y: visible; 
    display: block;
  }
  
} 
 
@media screen and (max-width: 900px) { 
 h1, h2 {
    font-size: 1.8em;
  }
  
 li {
   margin-left: 1em;
 }
 
 p {
  line-height: 1.25em;
 }
 
} 
 
 
/*
 * ************************************************
 *  Layout
 * ************************************************
 */
 
/* #page {
  max-width: 1500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}  */

#header_fixed_compensator {
  /* margin-top: 105px; */
  /* overflow: hidden; */
  background-color: #1b8aa8;
  height: 106px;
}

.cms_page_homepage #header_fixed_compensator {
  /* margin-top: 0; */
}

/* do not show inline editing switch on small displays */
@media screen and (max-width: 1060px) {
  #ull_cms_switch {
    display: none;
  }
  
  .vertical_block {
    padding-left: 3%;
    padding-right: 3%;
  }
}



/* cookie popup */

#cookiepopup {
  padding: .3em .3em;
  /* background-color: #f0ede5; */
  background-color: #f2f1f0;
  /* color: white; */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  font-size: .9em;
  text-align: center;
  border-top: 1px solid #ddd;
  z-index: 1000;
}

#cookiepopup a,
#cookiepopup a:visited {
  color: #223642;
  font-weight: bold;
}

#cookiepopupCloser {
  position: absolute;
  top: calc(50% - 15px);
  right: 2em;
  font-size: 20.5px;
  cursor: pointer;
}

#cookiepopupCloser:hover {
  opacity: .75;
}

@media screen and (max-width: 1023px) { 
  #cookiepopup {
    padding-right: 2em;
    width: auto;
    margin: 0 auto;
  }
  
  #cookiepopupCloser {
    right: .7em; 
  }
  
}


/*
 * ************************************************
 *  Header
 * ************************************************
 */

/* HEADER CONTACT */

#header_contact_container {
  background-color: #1b8aa8;
  min-height: 30px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1000;
}

#header_contact {
  max-width: 1280px;
  margin: 0 auto;
  text-align: right;
  white-space: nowrap;
}

#header_contact > a, #header_contact > a:visited {
  color: white;
  display: inline-block;
  background-position: 0% 70%;
  padding: .4em 0 .3em 1.5em;
  background-repeat: no-repeat;
  background-size: 18px;
  margin-left: 2em;
  line-height: 1em;
  font-size: .95em;
}

#header_contact a.phone {
  background-size: 16px;
  padding-left: 1.3em;
}

#header_contact .menu_button {
  display: none;
}
 
 
 /* HEADER NAVIGATION */

.header_container {
  position: fixed;
  top: 30px;
  z-index: 1000;
  width: 100vw;
  background: white;
  /* position: relative; */
  border-bottom: 3px solid #1988a7;
}

header {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;  
  height: 75px; 
}

header .logo {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  font-size: 0;
} 

header .logo:hover {
  opacity: .8;
}

header .logo img {
  margin-top: 7px;
  height: 64px;
  width: auto;
} 

header .logo_cloudbox {
  position: absolute;
  top: 26px;
  left: 72px;
  overflow: hidden;
} 

header .logo_cloudbox img {
  height: 22px;
  width: auto; 
} 

header .logo_cloudbox:hover {
  transition: .2s;
  opacity: .8;
}

header .logo_ull_at {
  position: absolute;
  top: 20px;
  right: 0;
  overflow: hidden;
  font-size: 0;
  transition: .5s;
} 

header .logo_ull_at:hover {
  transition: .2s;
  opacity: .8;
}

header .logo_ull_at img {
  height: 40px;
}


header .navigation_desktop {
  position: absolute;
  top: 10px;
  left: 0;
  width: 100%;
  text-align: center;
}

header nav {
  display: inline-block;
}

header nav ul {
  list-style-type: none;
  margin: 16px 0 0 0;
  padding: 0;
  text-align: center;
  font-weight: 500;
  font-family: 'Ubuntu', sans-serif;
}

header nav ul li {
  display: inline-block;
  margin: 0;
  padding: 0 1em;
}

header nav ul li a, 
header nav ul li a:visited {
  text-transform: uppercase;
  display: block;
  /* color: #1988a7; */
  color: #223642;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.3em;
}

header nav ul li a:hover {
  color: #1988a7;
  opacity: 1;
  transition: .3s;
  text-decoration: none;
}

header .menu_button {
  display: none;
} 


/* HERO */

.hero_container {
  position: relative;
  background: #98d6e2;
  /*background-image: url('/images/header-us-optimized2.jpg'); */
  background-repeat: no-repeat;
  background-size: auto 107.5%;
  background-size: auto 700px;
  background-position: bottom center;
  /* box-shadow: inset 0px 300px 100px -130px rgba(27,65,84,0.4); */
  box-shadow: inset 0px 300px 100px -130px rgba(27,138,168,0.95);
  margin-bottom: 0;
  border-bottom: none;
}

.hero_container .hero {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  /* height: 82vh; */
  /* max-height: 650px; */
  /* min-height: 640px; */
  height: 620px;
  /* overflow-x: hidden; */
  /* overflow-y: visible; */
}

.hero_top {
  height: 130px;
  position: relative;
}

#hero_box_container {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
}

#hero_box {
    display: inline-block;
    color: white;
}

#hero_box h2 {
    font-size: 2em;
    margin: 0 0 .2em 0;
    line-height: 1.15em;
    color: white;
}

#hero_box p {
    font-size: 1.4em;
    margin: 0;
}


.hero .be_happy_or_return {
  position: absolute;
  top: 20px;
  right: 0;
  width: 160px;
}

/* HERO CAPTIONS */


.hero .caption_container {
  /* border: 2px pink dashed; */
  position: absolute;
  height: 380px;
  width: 100%;
  bottom: 0;
  display: block;
}

.hero .captions {
  position: relative;
  /* border: 1px solid yellow; */
  height: 190px;
}

.hero .caption,
.hero .caption:visited {
  display: block;
  background-color: rgba(255,255,255,.9);
  padding: 1em 1em;
  color: #223642;
  width: 280px;
  text-align: center;
  font-weight: 500;
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.1em;
  /* text-transform: uppercase; */
  position: absolute;
  border: 2px #223642 solid;
  white-space: nowrap;
}

.hero #caption1 {
  top: 0;
  left: 0;
}

.hero #caption2 {
  top: 0;
  right: 0;
}

.hero #caption3 {
  bottom: 0;
  left: 0;
}

.hero #caption4 {
  bottom: 0;
  right: 0;
}

.hero #hero_action,
.hero #hero_action:visited {
  display: block;
  width: 400px;
  padding: 24px 16px;
  border: 2px solid white;
  background-color: #ee403f;
  color: white;
  text-transform: uppercase;
  font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  position: absolute;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 50% 84%;
  bottom: -45px;
  left: calc((100% - 400px - 32px)/2);
  z-index: 10;
}

.hero #hero_action:hover {
  border: 2px solid #ee403f;
  background-color: white;
  color: #ee403f;
  opacity: 1;
}



/* iPad */
@media screen and (max-width: 1279px) {
  
  #header_contact {
    margin-right: 1em;
  }
  
  #header_fixed_compensator {
    height: 96px;
  }  
  
  header {
    margin: 0 1em;
    height: 66px;
  }
  
  header .logo img {
    height: 56px;
  }
  
  header .logo_cloudbox {
    top: 26px;
    left: 64px;
  }    
  
  header .logo_cloudbox img {
    height: 19px;
  }
  

  
  header .logo_ull_at {
    top: 17px;
  }  
  
  header .logo_ull_at img {
    height: 36px;
  }
  
  header .navigation_desktop {
    top: 8px;
  }      
  
  header nav ul li {
    padding: 0 .6em;
  }  
  
  header nav ul li a, 
  header nav ul li a:visited {
    font-size: 1.2em;
  }  
  
  .hero_container {
    box-shadow: inset 0px 270px 100px -130px rgba(27,138,168,0.95);
    background-size: auto 600px;
  }
  
  .hero_container .hero {
    height: 500px;
  }
  
  .hero_top {
    height: 110px;
  } 
  
  #hero_box h2 {
    font-size: 1.9em;
  }
  
  .hero .be_happy_or_return {
    position: absolute;
    top: 20px;
    right: 0;
    width: 150px;
  }  
  
  .hero .caption_container {
    position: absolute;
    height: 320px;
  }    
  
  .hero .captions {
    margin: 0 1em;
    height: 150px;
  }
  
  .hero .caption, .hero .caption:visited {
    padding: 1.2em .5em;
    width: 260px;
    font-size: 1em;
  }
  
  .hero #hero_action, 
  .hero #hero_action:visited {
    width: 340px;
    padding: 16px 16px;
    left: calc((100% - 340px - 32px)/2);
  }
      
  
}

@media screen and (max-width: 1023px) {
  
  #header_contact_container {
    min-height: 24px;
  }  
  
  #header_contact {
    text-align: left;
    margin-left: 1em;
  }  
  
  #header_contact > a, #header_contact > a:visited {
    margin-left: 0;
    margin-right: 2em;
    padding: .4em 0 .3em 23px;
    font-size: .9em;
  }  
  
  #header_contact .menu_button {
    float: right;
    width: 16px;
    margin-top: 4px;
  }
  
  
  
  .header_container {
    position: relative;
    top: 24px;
    z-index: 0;
  }    
  
  header {
    margin: 0 1em;
    height: 60px;
  }
  
  header .logo img {
    height: 48px;
  }
  
  header .logo_cloudbox img {
    height: 18px;
  }
  
  header .logo_cloudbox {
    top: 21px;
    left: 52px;
  }  
  
  header .logo_ull_at {
    display: none;
  }  
  
  header .navigation_desktop {
    display: none;
  }    
  
  header .menu_button {
    display: block;
    position: absolute;
    width: 24px;
    height: auto;
    bottom: inherit;
    top: 22px;
    right: 0;
  }
  
  #header_fixed_compensator {
    height: 24px;
  }        
  
  .hero_container {
    box-shadow: inset 0px 210px 100px -130px rgba(27,138,168,0.95);
    /* background-size: auto calc(100vh * 1.25); */
    /* background-size: auto calc(75vh * 1.7); */
    background-size: auto 160%;
    background-position: 51% 91%;
  }
  
  .hero_container .hero {
    /* height: calc(100vh - 200px); */
    min-height: 430px;
    height: 75vh;
    max-height: 550px;
  }
  
  .hero_top {
    height: 70px;
  } 
  
  #hero_box {
    width: 240px;
  }
  
  #hero_box h2 {
    display: none;
  }
  
  .hero .be_happy_or_return {
    display: none;
  }  
  
  .hero .caption_container {
    position: absolute;
    /* height: 235px; */
    height: calc( 40vh );
    min-height: 225px;
  }    
  
  .hero .captions {
    margin: 0 auto;
    height: 150px;
    max-width: 280px;
    text-align: center;
  }
  
  .hero .caption, .hero .caption:visited {
    padding: .3em .5em;
    margin-bottom: .4em;
    border-width: 2px;
    width: auto;
    display: inline-block;
    position: relative;
    background-color: rgba(255,255,255,1);
    font-size: 1.05em;
  }    
  
  .hero #caption3 {
    width: 156px;
  }
  
  .hero #hero_action, .hero #hero_action:visited {
    width: 280px;
    font-size: 1.25em;
    padding: 12px 12px;
    left: calc((100% - 280px - 24px) / 2);
    bottom: -25px;
  }
    
}


/* admin menu */

.admin_menu {
  padding: 0 1em 0 1em;
  margin: 0 0 0 0;
  overflow: hidden;
  font-size: .8em;
  padding-bottom: 5px;
}

.admin_menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: top;
}

.admin_menu > ul > li {
  display: inline-block;
  text-transform: uppercase;
  font-weight: bold;
  margin: 0 2.5em 0 0;
  padding: 0;
}

.admin_menu li li {
  display: list-item;
  text-transform: none;
  font-weight: normal;
  margin: 0 0 0em 0em;
}


@media screen and (max-width: 1023px) {
  .admin_menu {
    font-size: .9em;
    padding-top: .5em;
  }
  .admin_menu ul,
  .admin_menu>ul>li {
    display: inline-block;    
  }
  .admin_menu>ul>li>ul {
    margin-bottom: .5em
  }
  .admin_menu li li {
    margin-bottom: 6px;    
  }    
}


/*
 * ************************************************
 *  Sidebar
 * ************************************************
 */
 
 
/*
 * ************************************************
 *  Content
 * ************************************************
 */

main {
  /* padding: 7%; */
  max-width: 1600px;
  margin: 0 auto;
}

/* main .cms_page_homepage */
.cms_page_homepage main  {
  max-width: inherit;
}


/* slim header for everything except ullCms/show */

body:not(.ull_cms_show) main {
  padding: 0 24px;
}

/*
main h1 {
  text-transform: uppercase;
  text-align: center;
}

main a, main a:visited {
  font-weight: bold;
  text-decoration: none;
}
*/

/* a {
  color: #961635;
} */

a:hover {
  opacity: .8;
  text-decoration: none;
} 


.ull_cms_content img {
  max-width: 100%;
  height: auto !important;
}


.vertical_block_container {
  /* overflow: hidden; */
  position: relative;
}

.vertical_block {
  /* overflow: hidden; */
  position: relative;
  max-width: 1024px;
  margin: 0 auto;  
}

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

  body:not(.ull_cms_show) main {
    padding: 0 3vw;
  }
}


/* YOUTUBE */

.youtube-fake {
  border: 5px solid #333;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 480px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.youtube-fake:hover {
   opacity: .8;
   cursor: pointer;
}

.youtube-play-button {
  display: inline-block;
  width: 128px;
  height: auto;
}



/* PAGE SCROLL ARROW */

#scroll_cue {
  position: absolute;
  bottom: -80px;
  width: 100%;
  z-index: 100;
  text-align: center;
  /* display: none; */
}

.scroll_cue_circle {
  /*
  width: 60px;
  height: 60px;
  border-radius: 30px;
  margin: 0 auto;
  
  background-color: rgba(27,65,84,.8);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .5s;
  
  animation: scrollcue 2s infinite;
  */
}

@keyframes scrollcue {
  from { background-color: rgba(27,65,84,.8); }
  to { background-color: rgba(27,138,168,.8); }
}

.scroll_cue_circle:hover {
  background-color: rgba(240,65,65,.8);
}

#scroll_cue img {
  width: 32px;
  height: auto;
  transition: .5s;
}

@media screen and (max-width: 1023px) {
  
  #scroll_cue {
    position: absolute;
    bottom: -46px;
  }  
  
  .scroll_cue_circle {
    /* width: 40px;
    height: 40px;
    border-radius: 20px; */  
  }
  
  #scroll_cue img {
    /* width: 24px; */
  }  
}




/* TOP THREE */
.topthree_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3em 0 4em 0;
}

.topthree_container > div {
  width: 28%;
  color: white;
  font-size: 1.2em;
  font-weight: bold;
  min-height: 8rem;
  border-bottom-left-radius: 45px;
  box-shadow: 10px 10px 25px -11px rgba(37,142,171,0.46);
  box-shadow: 5px 5px 25px -11px rgba(37,142,171,0.46);
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;
  text-align: center;
  flex-wrap: wrap;
  padding: 1em .5em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.topthree_container > div > * {
  flex-grow: 1;
}

.topthree_container > div > h3 {
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.8em;
  margin: 0 0 .1em 0;
}

.topthree_container > div > p {
  margin: 0;
  /* margin-bottom: 3rem; */
}


.topthree_container > div:nth-of-type(1) {
  background-color: #1b8aa8;
}
.topthree_container > div:nth-of-type(2) {
  background-color: #72b2c4;
}
.topthree_container > div:nth-of-type(3) {
  background-color: #f04141;
}


#welcome {
  padding: 7em 0 6em 0;
}





/* QUOTES */
.quote_container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4em;
}

.quote_container > *:first-child {
  margin-right: 3em;
}

.quote_text {
  flex-grow: 2;
  font-style: italic;
  font-size: 1.2em;
  text-align: center;
}

.quote_text strong {
  font-style: italic;
  /* font-weight: bold; */
  font-size: 1.1em;
}

.quote_text .quoter {
  text-align: right;
  font-size: 1rem;
  font-style: normal;
  margin: -.5rem 0 0 0;
}


.quote_image {
  flex-grow: 1;
  min-width: 27%;
  min-height: 20rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.quote_marks {
  font-size: 6em;
  display: block;
  text-align: center;
  line-height: .8em;
  /* margin-bottom: -3rem; */
  max-height: 2rem;
  overflow: hidden;
}

.quote_mark_left {
  margin-bottom: 1rem; 
}


@media screen and (max-width: 1023px) {
  
  #welcome {
    padding: 4em 0 3em 0;
  }  
  
  .quote_container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
    justify-content: center;
  } 
  
  .quote_container > *:first-child {
    margin-right: 0;
  }  
  
  .quote_image {
    margin: 0 0 2em 0;
    min-height: inherit;
    max-width: 15rem;
    max-height: 15rem;
    width: 15rem;
    height: 15rem;
    
  }
  
  .quote_text .quoter {
    margin-bottom: 1em;
  }
}




/* INTRO */

#intro {
  margin-bottom: 3em;
}

#intro img {
  width: 100%;
  margin-bottom: 4em;
}


/* USP */

#usp {
  background-color: #1b9ec0;
  padding: 7em 0 5em 0;
}

#usp .vertical_block {
  max-width: 750px; 
}

#usp ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#usp li {
  margin: 0 0 2.5em 0;
  padding: 0 0 0 75px;
  color: white;
  /* background-image: url("/images/checkbox.png"); */
  background-repeat: no-repeat;
  background-size: 48px;
  background-position: left center;
}

#usp li h3 {
  color: white;
  margin: 0 0 .2em 0;
  font-size: 1.7em;
}

#usp li p {
  margin: 0;
  font-size: 1.2em;
  line-height: 1.2em;
}

#usp a,
#usp a:visited {
  color: white;
  border-bottom: 1px dotted white;
}


@media screen and (max-width: 1023px) {
  
  #usp {
    padding: 4em 0 3em 0;
  }
  
  #usp li {
    margin: 0 0 2em 3vw;
    padding: 0 0 0 50px;
    background-size: 32px;
    background-position: left center;
  }  
   
  #usp li h3 {
    font-size: 1.5em;
  }
}


/* QUESTION */

#question {
  margin: 6em 0 7em 0;
}

@media screen and (max-width: 1023px) {
  
  #question {
    margin: 4em 0 3em 0;
  }  
  
  #question .quote_container {
    flex-wrap: wrap-reverse;
    flex-direction: column;
  } 
  

}



/* ONLY YOU */
#onlyyou {
  padding: 7em 0 7em 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;  
  background-color: #031b23;
}

#onlyyou h2 {
  color: white;
  margin: 0 0 1em 0;
}

#onlyyou ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#onlyyou li {
  margin: 0 0 0 0;
  padding: 1em 0 1em 110px;
  color: white;
  /* background-image: url("/images/cloudbox-solo-bullet.png"); */
  background-repeat: no-repeat;
  background-size: 60px;
  background-position: left center;
  font-size: 1.4em;
  font-family: Ubuntu;
}


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

  #onlyyou {
    margin: 0 0 0 0;
    padding: 5em 0 5em 0;
  }
  
  #onlyyou li {
    margin: 0 0 0 3vw;
    padding: 1em 0 1em 70px;
    background-size: 48px;
    background-position: left center;
    font-size: 1.3em;
  }  
    
}



/* THECLOUDBOX */

#thecloudbox {
  background-color: #efede6;
  padding: 4em 0 5em 0;
}

#thecloudbox h2 {
  font-size: 1.7em;
  text-align: left;
}

#thecloudbox .left {
  width: 55%;
  margin-right: 3em;
}


#thecloudbox .right {
  margin-top: 2em;
  width: 45%;
  background-repeat: no-repeat;
  background-size: contain;
}

.left_right_container {
  display: flex;
  justify-content: space-between;
  
}

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

  #thecloudbox {
    padding: 3em 0 3em 0;
  } 
  
  #thecloudbox .left_right_container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  
  #thecloudbox .left {
    width: auto;
    margin-right: 0;
  }
  
  #thecloudbox .right {
    margin-top: 2em;
    width: 100%;
    min-height: 150vw;
    background-position: center;
    max-width: 320px;
  }  
}


/* PITCH */

#pitch {
  margin-bottom: 2em;
}

.box_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
}

.box {
  width: 45%;
  /* background-image: url("/images/background-cloud-lighter2-optimized.png"); */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: stretch;
  margin: 0 auto 0 auto;
  padding: 0 16px 32px 16px;
}


.box_image {
  flex-shrink: 0;
  width: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  margin-right: 32px;
}

.box_content p {
  
}

.box_content h2 {
  font-size: 1.5em;
  text-align: left;
}

.box_content p {
  margin-bottom: .8em;
} 

.box_content p a,
.box_content p a:visited {
  color: #223642;
}

.box_content p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 740px) {
  .box_container {
    display: block;
  }
  
  .box {
    width: auto;
    display: flex;
    align-items: stretch;
    margin: 0 auto 0 auto;
    padding: 24px 12px;
  }
  
  .box_image {
    width: 72px;
    margin-right: 24px;
  }  
  
  .box_content h2 {
    font-size: 1.5em;
    text-align: left;
    margin-top: 0;
  }  
}



/* GET IT */
#getit {
  margin-bottom: 7em;
  padding: 5em 0 5em 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #828a8e;
}

#getit h2 {
  margin: 0 0 1em 0;
  color: black;
}

#getit h3 {
  color: black;
  margin-bottom: .75em;
  font-size: 1.5em;
  text-transform: uppercase;
}

#getit ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

#getit li {
  width: 45%;
  margin: 0 0 0 0;
  padding: 1em 0 1em 0;
  /* font-size: 1.4em;
  font-family: Ubuntu; */
  color: black;
}

#getit .ghostbutton {
  min-height: 2.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.3em;
}

.quadrat {
  border: 2px solid #1b4154;
  padding: .15em .3em;
  margin-right: .5em;
}


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

  #getit {
    padding: 4em 0 3em 0;
  }  
  
  #getit ul {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  #getit li {
    width: auto;
  }
  
  #getit h3 {
    font-size: 1.4em;
    line-height: 1.4em;
  }
  
  #getit .quadrat {
    margin-right: .2em;
}

}



/* PRODUCTS */

#products {
  margin: 5em 0 4em 0;
  position: relative;
}

#products .be_happy_or_return {
  position: absolute;
  width: 200px;
  top: -45px;
  right: 0;
  z-index: 10;
}

#products h3 {
  text-align: center;
  font-size: 1.7em;
  margin: 2em 0 0 0;
  overflow: hidden;
}

#products h3.lines {
  text-align: center;
  margin: 2em 0 .5em 0;
}
#products h3.lines span {
  display: inline-block;
  position: relative;  
}
#products h3.lines span:before,
#products h3.lines span:after {
  content: "";
  position: absolute;
  height: 0;
  border-bottom: 1px solid #1988a7;
  border-top: 1px solid #1988a7;
  top: 50%;
  width: 500px;
}
#products h3.lines span:before {
  right: 100%;
  margin-right: 15px;
}
#products h3.lines span:after {
  left: 100%;
  margin-left: 15px;
}

/*
#products ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}

#products li {
  margin: 0;
  padding: 0;
  position: relative;
  width: 26%;
}

#products li {
  
}
*/

#products table {
  width: 100%;
  border-collapse: collapse;
}

#products table td {
  text-align: center;
  /*padding: .4em .5em 0 .5em;*/
  padding: 0 .5em 0 .5em;
  vertical-align: middle;
  width: 36%;
  height: 36px;
}

#products table td:first-of-type {
  text-align: right;
  width: 28%;
}

#products table td:first-of-type h3 {
  text-align: right;
}

#products table td h3 {
  margin: 1em 0 0 0;
  font-size: 1.5em;
  text-align: center;
}

#products td {
  position: relative;
  vertical-align: middle;
}

#products .images img {
  width: 200px;
  /*height: auto;*/
  object-fit: cover;
  height: 160px;
}

#products td .price{
  background-color: #ee403f;
  color: white;
  position: absolute;
  top: 0;
  right: 0;
  padding: .5em 1em;
  font-weight: bold;
  font-size: 1.1em;
}

#products td h3 {
  /* color: #223642; */
  /* margin: -.5em 0 0 0; */
  /* font-size: 1.5em;
  text-align: center;
  font-weight: bold;
  line-height: 1.1em; */
} 


#products .hw_type td {
  padding-top: 0;
}

#products .hw_type h3 {
  margin: 0;
}


#products .center {
  margin-top: 4em;
}

.checkmark {
  font-size: 2em;
  line-height: 1em;
  /* color: #ee403f; */
  color: #33b7db;
}

.ballot {
  color: silver;
  /* color: #ee403f; */
  font-size: 1.3em;
  line-height: 1em;
}




#products .center p {
  margin-bottom: .5em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: italic;
}

#products .ghostbutton {
   /* max-width: 30em; */
   margin: 1em;
   min-width: 240px;
}




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

  #products {
    margin: 120px 0 3em 0;
  }
  
  #products .be_happy_or_return {
    width: 160px;
    top: -170px;
    right: -15px;
  }      
  
  #products .images img {
    width: 95%;
    max-width: 200px;
    height: auto;
    object-fit: contain;
    height: 130px;
    max-height: 160px;
  }  
  
  #products td .price {
    padding: .3em .5em;
  }  

  #products table td h3 {
    line-height: 1.1em;
    font-size: 1.3em;
  }  
  
  #products table td {
    padding: 0;
    width: 36%;
    height: 36px;
    line-height: 1em;
  }  


  table.products_service {
    overflow-x: unset;
    overflow-y: unset; 
  }

  #products .ghostbutton {
     /* max-width: 30em; */
     margin: .5em;
     min-width: 200px;
  }

}




/* ADVISORY */

#advisory {
  background-color: #333844;
  padding: 4em 0 4em 0; 
}

#advisory #advisory_personal {
  background-color: transparent;
  padding: 0 4em .5em 4em;
}

#advisory #advisory_personal .inner {
  color: white;
  padding: 0 1em;
}
#advisory #advisory_personal a,
#advisory #advisory_personal a:visited {
  color: #54a9cc;
  font-weight: bold;
}

#advisory .vertical_block {
  background-color: #1988a7;
  color: white;
  padding: 3em 4em 1em 4em;
  max-width: 800px;
}

#advisory_general {
  margin: 0 1em;
}

#advisory h3 {
  color: white;
  margin: 0;
  text-align: left;
  font-size: 1.8em; 
  font-weight: bold;
}

#advisory .subline {
  font-size: 1.1em;
  font-weight: bold;
  margin-bottom: 3em;
}

#advices {
  /* min-height: 300px; */
}

.advice {
  margin: 0 1em;
} 

#advices .question_num {
  font-size: 1.6em; 
  font-weight: bold; 
  font-family: 'Ubuntu', sans-serif;
  margin-bottom: 1em;
}

#advices .question {
  font-size: 1.6em; 
  font-weight: bold; 
  font-family: 'Ubuntu', sans-serif;
  margin-bottom: 1em;
}

#advices fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

#advices fieldset span.block {
  display: flex;
  margin-bottom: 1em;
  background-color: white;
  color: #223642;
  font-size: 1.1em;
  font-weight: bold;
  padding: 1em 2em;
  cursor: pointer;
}

#advices input,
#advices label {
  cursor: pointer;
}


#advices fieldset span:hover {
  /* background-color: white; */
  opacity: 0.9;
}

#advices fieldset span.selected {
  background-color: #bee2ed;
}

#advices fieldset label {
  /* margin-left: 1em; */
  font-weight: normal;
  /* font-family: 'Ubuntu', sans-serif; */
  display: flex;
}

#advices fieldset input {
  margin-right: 1em;
}

#advices .slick-arrow img {
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: -25px;
}

#advices .slick-arrow img:hover {
  opacity: .6;
}

#advices .slick-next img {
  left: inherit;
  right: -25px;
} 

#advices .slick-arrow.slick-disabled {
  display: none !important;
}

#advices button {
  margin-top: 3em;
  float: right;
  margin-right: 0;
  cursor: pointer;
}

#advices .ull_user_form dfn {
  display: none;
}

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

  #advisory {
      padding: 0;
  }  
  
  #advisory #advisory_personal {
    padding: .5em;
  }
  
  #advisory #advisory_personal .inner {
    color: white;
    padding: 0 3vw;
  }    
  
  #advisory .vertical_block {
    padding: 3vw;
    max-width: 800px;
  }  
  
  #advisory_general {
      margin: 0;
  }
  
  #advisory h3 {
    font-size: 1.4em;
  }
  
  #advisory .subline {
    font-size: 1em; 
    margin-bottom: 1em;     
  }
  
  .advice {
    margin: 0;
  }  
  
  #advices .question_num {
    font-size: 1.4em;
  } 
  
  #advices fieldset span.block {
    font-size: 1em;
    font-weight: bold;
    padding: .5em;
    margin-bottom: .5em;
  }   
  
  #advices fieldset input {
    margin-right: .5em;
  }  
  
  #advices .slick-arrow img {
    height: 28px;
    position: absolute;
    top: inherit;
    bottom: 0;
    left: 0;
  }  
  
  #advices .slick-next img {
    left: inherit;
    right: 0px;
  }  
}



/* USER FORM */
.ull_user_form table.edit_table {
  background: none;
  border: none;
}
 
.ull_user_form table.edit_table tr {
  background: none;
  border: none;
}

.ull_user_form table.edit_table td {
  background: none;
  border: none;
  padding: .5em 0;
}

.ull_user_form table.edit_table label {
  font-weight: bold;
  font-size: 1.1em;
}

.ull_user_form .additional_fields label a {
  font-weight: bold;
  color: white;
  border-bottom: 1px dotted white;
}

.ull_user_form .additional_fields label a:hover {
  text-decoration: none;
  border-bottom: 1px solid white;
}

.ull_user_form table.edit_table input,
.ull_user_form table.edit_table select,
.ull_user_form table.edit_table textarea {
  border: 0;
  height: 32px;
  width: 100%;
  background-color: white;
}

.ull_user_form table.edit_table textarea {
  height: 64px;
}


.ull_user_form table.edit_table input {
  padding: 0 .5em;
  width: calc(100% - 1em); /* adjust for padding */ 
}

.ull_user_form .form_error_global {
  background-color: white;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 1rem;
  border: 2px solid red;
}

.ull_user_form td.form_error {
  vertical-align: middle;
}

.ull_user_form .error_list {
  margin-left: .6em;
}

.ull_user_form .error_list li {
  background-color: white;
  border-radius: 6px;
  padding: 1px 8px;
  font-size: 1rem;
  border: 2px solid red;
}

.ull_user_form .flash {
  background-color: #efede6;
  color: #223642;
}


/* CUSTOMERS */

#customers {
  background-color: #efede6;
/*   background-image: url("/images/customer_background.png"); */
  padding: 4em 0 5em 0;
}

/*
#customers .vertical_block {
  max-width: 1600px;
}
*/

#customers h2 {
  margin-top: 0;
  margin-bottom: 1.2em;
}

#customer_slider {
  padding: 0 20px;
}

.customer {
  padding: 1em;
  /* max-width: 300px; */
}

#customers .image {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin: 0 auto 1em auto;
  max-width: 300px;
}

.customer-text p {
  font-style: italic;
  font-size: 1.2em;
  line-height: 1.3em !important;
  text-align: center;
}

.customer-who {
  text-align: right;
}

.customer_overlay {
/*  position: absolute;
  top: 0;
  left: 0; */
}


#customers .slick-arrow img {
  height: 40px;
  position: absolute;
  top: calc(50% - 20px);
  left: 0;
}

#customers .slick-arrow img:hover {
  opacity: .6;
}

#customers .slick-next img {
  left: inherit;
  right: 0;
} 



/* INTRODUCTION */

#introduction {
  margin-bottom: 3rem;
}

#introduction img {
  width: 100%;
  height: auto;
}


/* Flexslider */

#intro-slider {
  margin-top: 1em;
}

.flexslider {
  position: relative;
  overflow: hidden;
}

.flexslider ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.flexslider ul li {
  margin: 0;
  padding: 0;
}

.fullwidthslider ul.slides li {
  background-color: rgb(235,232,229);
  color: white;
}

.fullwidthslider .slide_container {
  position: relative;
  width: 100%;   /* desired width */  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.fullwidthslider .slide_container:before {
  content: "";
  display: block;
  padding-top: 50%;  /* ratio of 2.33 */
}

/* .fullwidthslider .slide_content_container {
  position:  absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
} */

.fullwidthslider .slide_content {
  position:  absolute;
  top: 1.3em;
  left: 1.3em;
  max-width: 40%;
  padding: 1em;
  background-color: rgba(255,255,255,.85);
  color: #223642;
  /* text-align: center; */  
}

.fullwidthslider h3 {
  font-size: 1.6em;
  margin-top: 0;
  margin-bottom: .5em;
  color: #223642;
}

.fullwidthslider p {
}

.intro-testimonial-plusag .slide_container {
  background-size: 110%;
  background-position: 60% 20%;  /* show more of right and top part */
}

.intro-testimonial-plusag .slide_content {
  left: inherit;
  right: 1.3em;
}

.intro-testimonial-robotfriends .slide_container {
  background-size: 115%;
  background-position: 0 50%;
}

.intro-testimonial-brixx .slide_container {
  background-size: 115%;
  background-position: 100% 40%;  /* show more of right and top part */
}

.intro-testimonial-brixx .slide_content {
  left: inherit;
  right: 1.3em;
}


/* prev / next */

.fullwidthslider ul li,
.fullwidthslider ol li {
  list-style-type: none;
}

.fullwidthslider .flex-direction-nav a {
  cursor: pointer;
  display: block;
  height: 50px;
  margin: -25px 0 0 0; /* height / 2 for vertical centering */
  overflow: hidden;
  position: absolute;
  top: 66%;
  width: 25px;
  z-index: 10;
  color:rgba(255,255,255,0);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.fullwidthslider .flex-direction-nav .flex-prev {
  left: 1.3em;
  background-image: url("/images/arrow-white-left.png");
}

.fullwidthslider .flex-direction-nav .flex-next {
  right: 1.3em;
  background-image: url("/images/arrow-white-right.png");
}

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

  .fullwidthslider .slide_container:before {
    content: "";
    display: block;
    padding-top: 60%;  /* ratio of 2.33 */
  }
  
  .fullwidthslider .slide_container {
    background-position: 0% 0% !important;
  }    
  
  
  .fullwidthslider .slide_content {
    padding: 3% 3%;
    padding-bottom: 2em;
    max-width: none;
    background-color: #f0ede5;
    
    position: relative;
    /* top: inherit; */
    left: inherit;
    right: inherit;
    bottom: inherit;
  }
  
  .fullwidthslider h2 {
    font-size: 2rem;
    line-height: 1em;
    margin: .7em 0 .2em 0;
  }
  
  .fullwidthslider p {
    font-size: 1rem;
    line-height: 1.3rem;
    margin: 0 0 1em 0;
  }
  
  .fullwidthslider .flex-direction-nav a {
    height: 26px;
    margin: -13px 0 0;
    top: 50%;
    width: 26px;
  }
  
  .fullwidthslider .flex-direction-nav .flex-prev {
    left: 15px;
  }
  
  .fullwidthslider .flex-direction-nav .flex-next {
    right: 15px;
  }  
}




.text-image-full-width img {
  width: 100%;
  height: auto;
}



/* OFFSITEBOX */
#offsitebox {
  background-image: url('/images/background-waves.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding: 18em 0 8em 0;
  color: white;
}

#offsitebox h2 {
  text-align: center;
}

#offsitebox h3 {
  margin: 2em 0 .5em 0;
}

#offsitebox h2,
#offsitebox h3 {
  color: white;
}

#offsitebox p {
  margin: 0 0 .5em 0;
}

/* #offsitebox img {
  width: 720px;
  height: auto;
}
 */
#offsitebox ul {
  max-width: 720px;
  margin: 0 auto;
  list-style-type: none;
  padding: 0;
}

#offsitebox ul li {
  padding: 0;
  margin: 0;
}


/* BENEFITS */


#benefits {
  margin: 4em 0 4em 0;
}

#benefits h2 {
  margin-bottom: .5em;
}

#benefits p {
  color: black;
}


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

  #benefits {
    margin: 4em 0 3em 0;
  }  
  
  #benefits .box_image {
    width: 48px;
    margin-right: 2em;
  }
  
}


/* CONFIGURATOR */


#configurator {
  margin: 6em 0 7em 0;
}


#configurator .vertical_block > p {
  padding: 0 1em; 
}


ul#configurator_basics {
  list-style-type: none;
}

ul#configurator_basics li {
  background-image: url("/images/checkmark-blue.png");
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 2em;
  background-size: 24px;
}

#configurator label {
  display: inline-block;
  font-family: Ubuntu;
  font-weight: bold;
}

#configurator .configurator_cloudbox_select label {
  display: block; 
}

#configurator ul {
  list-style-type: none;
  display: inline-block;
}

#configurator ul.radio_list li {
  display: inline;
}    

#configurator section {
  position: relative;
  /* min-height: 150px; */
  padding: 1em;  
  overflow: hidden;
  margin-bottom: 1em;
  /* border-bottom-left-radius: 45px; */
  /* box-shadow: 10px 10px 25px -11px rgba(37,142,171,0.46); */
  /* box-shadow: 5px 5px 25px -11px rgba(37,142,171,0.46); */
}

#configurator section:nth-child(2n) {
  position: relative;
  background-color: #efede6;
  /* border: 1px solid #dfeff2; */
}

#configurator section:nth-child(2n+1) {
  position: relative;
  background-color: #efede6; /* brightness -5 */
  /* border: 1px solid #b4d6e0; */
}

#configurator section#configurator_total {
  background-color: #e03c3b;
  min-height: inherit;
  color: white;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  /* padding-left: 3em; */
  margin-bottom: 0;
  /* border-top: 1em solid white; */
  /* border-top: 1em solid white; */
  box-shadow: inherit;
  /* width: 100%; */
}

.configurator_total_right {
/*   font-family: 'Ubuntu', sans-serif;
  font-weight: bold; */
  float: right;
}

.configurator_smallprint {
  font-family: 'Didact Gothic', sans-serif;
  font-weight: normal;
  font-size: .8em;
  text-align: right;
}

.configurator_price {
  background-color: #ee403f;
  color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: .5em 1em;
}


#configurator ul.configurator_cloudbox_select {
  display: flex;
  margin: 0;
  padding: 0;
  background-color: white;
  border-radius: 12px;
  padding: 1em;
  justify-content: space-around;
}

.configurator_cloudbox_select li {
  margin-right: 3em;
  padding: 0;
}

.configurator_cloudbox_select li .image {
  opacity: .3;
}

.configurator_cloudbox_select li.checked .image {
  opacity: 1;
}

.configurator_cloudbox_select .content {
  width: 240px;
}

.configurator_cloudbox_select .image {
  width: 240px;
  height: 240px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  position: relative;  
}

.configurator_cloudbox_select .image_badge {
  width: 100px;
  height: 100px;
  background-color: #ee403f;
  color: white;
  font-weight: bold;
  border-radius: 50px;
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: rotate(-20deg);
  font-size: .9em;
}

/* .configurator_cloudbox_select li.configurator_cloudbox_profplus .image {
  background-image: url("/images/product_hp_micro_gen10plus.jpg");
}

.configurator_cloudbox_select li.configurator_cloudbox_professional .image {
  background-image: url("/images/product_hp_micro_gen10.jpg");
}

.configurator_cloudbox_select li.configurator_cloudbox_mini .image {
  background-image: url("/images/product_msi_cubi.jpg");
} */

.configurator_cloudbox_select .caption {
  text-align: center;
}


.configurator_info {
  display: flex;
}

.configurator_info ul {
  margin: 0;
  margin-right: 2em;
}

.configurator_info ul li {
  margin-bottom: 0;  
  font-weight: bold;
}

.configurator_info_details a {
  background-color: #1988a7;
  border-color: #1988a7;
  color: white;
  padding: .2em .8em;
  text-decoration: none;
}

.configurator_info_details a:hover {
  background-color: white; 
  border-color: #1988a7;
  color: #1988a7;
}

.configurator_info_specs {
  margin-left: 2em;
  font-style: italic;
  font-weight: normal;
  display: none;
}

.configurator_explanation {
  margin: .5em 0;
}

.configurator_image {
  float: right;
  width: 160px;
  border-radius: 12px;
}

.configurator_image img {
  border-radius: 12px;
}

ul.error_list li {
  color: #ee403f;
  font-weight: bold;
}

#configurator section#configurator_service {
  margin-bottom: 3em;
}

#configurator_commissioning {
  vertical-align: top;
}

#configurator_commissioning ul.radio_list {
  margin-top: 0;
}

#configurator_commissioning ul.radio_list li {
  display: block;
}

#configurator_commissioning label {
  vertical-align: top;
}

@media screen and (max-width: 1023px) {
  
  #configurator {
    margin: 4em 0 3em 0;
  }  
  
  #configurator h3 {
    margin-left: .3em;
  }    
  
  #configurator .vertical_block {
    padding: 0;
  }
  
  #configurator section ul {
    margin: 0;
    padding: 0;
  }
  
  #configurator section ul li{
    margin: 0;
    padding: 0;
  }  
  
  #configurator ul.configurator_cloudbox_select {
    /* display: block; */
    flex-wrap: wrap;
  }

  .configurator_cloudbox_select li .image {
    width: 100%;
    height: 180px;
  }
  
  
  #configurator #configurator_commissioning ul.radio_list li {
    display: block;
  }
  
  .configurator_info {
    display: block;
    position: relative;
  }
  
  #configurator .configurator_info label {
    display: block;
  }
  
  .configurator_info_details{
    /* margin-left: 2.8em; */
    margin-top: .5em;
    margin-left: 0;
/*     position: absolute;
    top: 0;
    right: 0; */
  }
  
  .configurator_total_right {
    float: none;
  }
}


#topfaqs {
  margin: 0 0 6em 0;
}

#topfaqs .vertical_block {
  max-width: 920px;
}

#topfaqs .button_container {
  margin-top: 2.5em;
}



/* REQUEST OFFER */

#offer {
  margin: 0 0 7em 0;
  /* overflow-x: hidden; */
}

#offer .be_happy_or_return {
  position: absolute;
  width: 200px;
  top: 30px;
  right: -60px;
  z-index: 10;
}

#offer h2 {
  margin-top: 0;
  color: white;
  text-align: left;
}

#offer .edit_table {
  max-width: 800px;
}

#offer .ull_user_form {
  /* text-align: center; */
}

#offer dfn {
  display: none;
}

#offer_form {
  background-color: #1b8aa8;
  padding: 2em 3em;
  color: white;
  /* padding: 2em; */
}

#offer_form p {
  max-width: 640px;
}

#offer_form p a,
#offer_form p a:visited {
  font-weight: bold;
  color: white;
  text-decoration: underline;
}

.ull_user_form  .additional_fields fieldset {
  padding: .5em 0;
  border: 0;
}

.ull_user_form  .additional_fields fieldset input {
  vertical-align: middle;
  margin-right: .5em;
}

#offer_form button {
  margin: 1.5em 0 .5em 0;
  padding: 16px 64px;
  /* float: right; */
}

/*

#offer_form .table_container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#offer_form input[type="submit"] {
  margin-top: 3em;
  flex-basis: 50%;
}
*/

@media screen and (max-width: 1279px) {  
  
  #offer .be_happy_or_return {
    width: 160px;
    top: -110px;
    right: 0;
  } 
}


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

  #offer {
    margin: 140px 0 3em 0;
  }  

  #offer .vertical_block {
    padding: 0;
  }
  
  #offer .be_happy_or_return {
    width: 160px;
    top: -125px;
    right: 0;
  }  
  
  #offer_form {
    padding: 40px 3vw 1em 3vw;
  }
  
  .ull_user_form .edit_table {
    width: auto;
  }    
  
  .ull_user_form .edit_table td.label_column {
      min-width: inherit;
      width: inherit;
      padding-right: .5em;
  }  
  
   #offer_form button {
    padding: 16px 32px;   
   }

}


/* CONTACT */

#contact {
  /* background-image: url('/images/background-waves.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  padding: 5em 0 4em 0;
}

#about-us {
  max-width: 640px;
  margin: 0 auto;
}

#about-us .captions {
  display: flex;
  justify-content: space-around;
  margin-bottom: 2.5em;
}

/* #contact h2,
#contact h3 {
  color: white;
} */

#contact p .ghostbutton {
  width: 300px; 
  margin: 0 32px 0 32px;
  text-align: center;
}

#contact p {
  font-size: 1.1em;
}

#contact p.text {
  margin-bottom: 2em;
}

@media screen and (max-width: 1023px) {
  #contact p .ghostbutton {
    width: 220px; 
    margin: 0;
    margin-bottom: 1em;
  } 
}


/* HELP */

#help_button {
  display: block;
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 80px;
  height: 80px;
  box-shadow: 2px 2px 25px 5px rgba(0,0,0,0.15);
  border-radius: 40px;
  z-index: 10000; /* configurator has z-index 1000 */
}

#help_button:hover {
  box-shadow: 3px 3px 16px 5px rgba(0,0,0,0.25); 
  opacity: 1;
}

#help_popup {
  display: none;
  max-width: 320px;
  background-color: white;
  padding: 2em;
  border: 2px solid #008798;
  border-radius: 20px;
  margin-top: 3em;
  font-size: 1.1em;
  bottom: 110px;
  right: 20px;
  top: inherit !important;
  left: inherit !important;
}

#help_popup h2 {
  font-size: 1.6em;
  margin: 0 0 1.5em 0;
  text-align: center;
}

#help_popup a {
  display: block;
  width: auto;
  margin-bottom: 1em;
  font-size: 1.1em;
}

#help_popup .b-close {
  position: absolute;
  top: 12px;
  right: 12px;
}
#help_popup .b-close:hover {
  opacity: .75;
}
#help_popup .b-close img {
  width: 24px;
  height: auto;
}


@media screen and (max-width: 1023px) {
  #help_button {
    display: none; /* javascript hide @top */
    bottom: 1vw;
    right: 1vw;
    width: 48px;
    height: 48px;
    border-radius: 24px;
  }
  
  #help_popup {
    max-width: 300px;
    padding: 1.5em;
    font-size: 1em;
    bottom: 64px;
    right: 1vw;
  }
  
  #help_popup h2 {
    font-size: 1.4em;
  }
  
  #help_popup a {
    font-size: 1em;
  }
  
  #help_popup .b-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
  }  
}


/*
 * ************************************************
 *  Footer
 * ************************************************
 */
 
footer {
  margin-top: 5rem;
}
 
#navigation_mobile {
  position: relative;
  overflow: hidden;
  padding: 1em 0 3em 0;
  display: none;
} 
 
#menu_close_button {
  display: inherit;
  position: absolute;
  top: 7vw;
  right: 7vw;
  width: 32px;
}
#menu_close_button img {
  width: 100%;
  height: auto;
}
#menu_close_button:hover {
  opacity: .8;
}

#navigation_mobile ul {
  float: none;
  margin: 8px 24px;
}
 
#navigation_mobile ul li {
  display: block;
  margin: 0;
  padding: 0;
    font-size: 1.6em;
  padding: 8px 16px;
}

#navigation_mobile nav#main_menu ul li a,
#navigation_mobile nav#secondary_menu ul li a {
  font-size: 1.6em;
  padding: 8px 16px;
}  
 
footer {
  position: relative;
  overflow: hidden;
  text-align: center;
  
  text-decoration: none;
  font-size: 1em;  
  text-transform: uppercase;
  border-top: 3px solid #1988a7;
  padding-top: 2em;
}  

footer a,
footer a:visited {
  text-decoration: none;
  color: #0e273b;
}

/* #footer_line {
  width: 86%;
  display: inline-block;
  border-top: 1px solid #0e273b;
} */

#logo_footer img {
  width: 168px;
  height: auto;
  margin: 50px 0 50px 0;
}

footer .main_menu {
  font-weight: 500;
  margin-bottom: 35px;
}

#secondary_menu {
  margin-bottom: 35px;
  text-transform: none;
}

#secondary_menu a {
  font-weight: normal;
}

#copyright a {
  font-weight: normal;
  cursor: default;
}

footer ul {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  
}

footer ul li {
  display: inline-block;
  margin: 0;
  padding: 0 16px;
}

footer ul li a, footer ul li a:visited {
  color: #0e273b;
}

footer #sign_up {
  display: none;
}

#social {
  margin: 0 0 2em;
  padding: 0;
  list-style: none;
  text-align: center;
  display: block;
}

#social li {
  margin: 0 1em;
  padding: 0;
  display: inline-block;
  width: 40px;
  height: 40px;
}
#social img {
  border-radius: 10px;
  width: 100%;
  height: auto;
}



@media screen and (max-width: 1023px) {
  
  footer {
    margin-bottom: 10em;
  }
  
  
  footer .main_menu li {
    display: block;
    font-size: 1.4em;
    line-height: 1.8em;
  } 
  
  #navigation_mobile {
    display: block;
  }  
} 
 
/*
 * ************************************************
 *  Modules / Plugins
 * ************************************************
 */
 
/* scroll to top */

.scrolltop {
  width: 45px;
  height: 45px;
  position: fixed;
  bottom: 0;
  left: calc(50% - 45px / 2);
  display: none;
  /* text-indent: -9900px; */
  /* background: url('icon_top.png') no-repeat; */
  background-color: transparent;
}

.scrolltop img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1023px) {
  .scrolltop {
    width: 32px;
    height: 32px;
    position: fixed;
    bottom: 0;
    right: 8px;
  }  
} 



/* FAQ */

details {
  margin-bottom: .5em;
}

summary {
  cursor: pointer;
  font-weight: 500;
  font-family: 'Ubuntu', sans-serif;  
  font-size: 1.2em;
}

.faq_answer {
  margin: .5em 0 1.4em 1em;
}




/* WIKI */

/* list */

.module_ull_wiki main {
  max-width: 1024px;
  margin: 0 auto;
}

.module_ull_wiki .color_light_bg {
  background-color: #ebfcff;
}

.module_ull_wiki .color_dark_bg {
  background-color: #1988a7;
}

.module_ull_wiki ul.list_action_buttons {
  background-color: #ebfcff;
  border: 1px solid #dfeff2;
}

.module_ull_wiki .list_table .odd {
    background: #ebfcff;
}

.module_ull_wiki table.list_table tbody tr:hover {
  background-color: rgba(37,142,171,0.3);
}



.module_ull_wiki.not_logged_in ul.list_action_buttons {
  /* min-height: 70px; */
  padding: 1em 3em;
  overflow: hidden;
  margin-bottom: 1em;
  border-bottom-left-radius: 45px;
  box-shadow: 5px 5px 25px -11px rgba(37,142,171,0.46);
  position: relative;
}

.module_ull_wiki.not_logged_in ul.list_action_buttons input[type="text"] {
  font-size: 1.3em;
  width: 320px;
  height: 32px;
  display: inline-block;
  margin-bottom: .5em;
  padding: .2em .5em;
}

.module_ull_wiki.not_logged_in ul.list_action_buttons li:first-child label {
  font-size: 1.3em;
  margin-right: 1em;
  display: inline-block;
  /* height: 2.5em; */
}

/* full text */
.module_ull_wiki.not_logged_in ul.list_action_buttons li:nth-child(2) {
  position: absolute;
  right: 3em;
  font-size: .9em;
  font-weight: normal;
}

.module_ull_wiki.not_logged_in ul.list_action_buttons li:nth-child(2) label {
  font-weight: normal; 
  color: #555;
}

/* submit */
.module_ull_wiki.not_logged_in ul.list_action_buttons li:nth-child(3) input[type="image"] {
  display: inline-block;
  margin-bottom: .8em;
}

/* list table */
.module_ull_wiki.not_logged_in table.list_table {
  width: 100%;
}


.module_ull_wiki.not_logged_in table.list_table thead {
  display: none;
}

.module_ull_wiki.not_logged_in table.list_table .odd {
  background: #ebfcff;
}

.module_ull_wiki.not_logged_in table.list_table td {
  font-size: 1.2em;
  font-weight: bold;
  padding-left: 2.5em;
}

.module_ull_wiki.not_logged_in table.list_table td a,
.module_ull_wiki.not_logged_in table.list_table td a:visited {
  color: #1988a7;
}

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

  .module_ull_wiki.not_logged_in ul.list_action_buttons {
    min-height: 4em;
    padding: .5em 1em;
    border-bottom-left-radius: 25px;
  }
  
  .module_ull_wiki.not_logged_in ul.list_action_buttons li:first-child label {
    font-size: 1.1rem;
    margin-right: .5em;
    display: inline-block;
    /* height: 2.5em; */
  }  
  
  .module_ull_wiki.not_logged_in ul.list_action_buttons input[type="text"] {
    font-size: 1rem;
    width: 50%;
    height: auto;
  }  
  
  /* full text */
  .module_ull_wiki.not_logged_in ul.list_action_buttons li:nth-child(2) {
    left: 5.7em;
    bottom: .2em;
    margin: 0;
  }
  
  .module_ull_wiki.not_logged_in table.list_table td {
    font-size: 1.1em;
    padding-left: 1em;
  }
}


/* wiki show */

.ull_wiki_show_content img {
  max-width: 100%;
  height: auto !important;
}

#ull_wiki_header {
  max-width: inherit;
}

.ull_wiki_main {
  max-width: inherit;
  border: 0;
}

.ull_wiki_main h2 {
  font-size: 1.9rem;
  margin-top: 1.5em;
}

#ull_wiki_footer {
  max-width: inherit;
}

.ull_wiki_cloudbox_hint {
  background-image: url('/images/background-waves.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding: 4em 24px 4em 24px;
  color: white;
}

.ull_wiki_cloudbox_hint h3 {
  color: white;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.8rem;
}

.ull_wiki_cloudbox_flex_container {
  display: flex;
  justify-content: space-between;
}

.ull_wiki_cloudbox_flex_left {
  flex-grow: 2;
}

.ull_wiki_cloudbox_flex_right {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.ull_wiki_cloudbox_flex_right > * {
  flex-basis: 51%;
}

.ull_wiki_cloudbox_flex_right_link {
  text-align: center;
  color: white !important;
  font-size: 1.2em;
  font-weight: bold;
  margin-top: -2em;
}


@media screen and (max-width: 1023px) {
  .ull_wiki_main h2 {
    font-size: 1.5rem;
  }
  .ull_wiki_main h3 {
    font-size: 1.3rem;
  }  
  .ull_wiki_main h4 {
    font-size: 1.1rem;
  }  
  
  .ull_wiki_cloudbox_flex_container {
    flex-wrap: wrap;
  }  
  
  .ull_wiki_cloudbox_flex_right_link {
    margin-top: .6em;
  }
  
  .ull_wiki_cloudbox_flex_right .ghostbutton {
    min-width: 200px;
    text-align: center;
  }    
  
  .ull_wiki_headfoot_float_right {
    float: left;
    margin-left: 0;
  }
  
  .ull_wiki_headfoot_float_left {
    display: none; /* print link makes no sense for mobile */
  }
}


/* wiki edit */

.ull_wiki_edit .edit_table td.label_column {
    min-width: 7em;
    width: 7em;
}

/* table tool */

.action_edit #ull_tabletool_form .edit_action_buttons {
  height: auto;
  padding-bottom: .2em;
}
.edit_action_buttons h3 {
  display: none;
}

.edit_action_buttons_right {
  font-size: 1rem;
}


/* Generator */

.ull_generator_list_headline {
  display: inherit;
}


/* FAQ */

#faq .vertical_block {
  max-width: 920px;
  padding-top: 4em;
}

#faq h3 {
  font-size: 2em;
  text-align: center;
}


/* Product buttons */

.vertical_block_container.button_products {
  margin-bottom: 6em;
}

.vertical_block_container.button_products a {
  padding: 16px 64px;
}
 
/*
 * ************************************************
 *  Printout settings
 * ************************************************
 */
 
/* Printing is optimized for wiki and 2 on 1 page layout */ 
 
@media print {
  
  .no_print {
    display: none !important;
  }
  
  html {
    font-size: 12pt;
  }
  
  body {
    margin: 0;
    font-size: 12pt;
  }
  
  #header_contact_container {
    display: none;
  }
  
  .header_container {
    position: relative;
    top: 0;
    margin-bottom: 3em;
  }
  
  .navigation_desktop {
    display: none;
  }
  
  .menu_button {
    display: none;
  }
  
  #header_fixed_compensator {
    display: none;
  }
  
  #page {
    max-width: none;
  }
  
  #content,
  #canvas {
    margin: 0;
  }
  
  #help_button {
    display: none !important;
  }
  
  main {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  
  /* #header_containtainer {
    margin-
  } */
  
  
  #header_container, footer, .admin_menu, .inline_editing, #ull_cms_switch  {
    display: none;
  }
  
  h1 {
    margin-top: 0;
  }
  
  h1, h2 {
/*     border: 1px solid black;  
    color: #51bf36;
    border-color: #51bf36; */
  }
  
  .ull_wiki_show_commentable {
    display: none;
  }
  
  pre, kbd {
    font-size: 9pt;
  }
  
  .ull_wiki_main {
    border: none;
  }
  
  .ull_wiki_footer_show_full {
    display: none;
  }
  
  #footer {
    display: none;
  }
  
  #breadcrumbs {
    display: none;
  }
  
  #sfWebDebug {
    display: none;
  }
  
  .breadcrumbs_simple {
    display: none;
  }
  
  .ull_wiki_cloudbox_hint {
    display: none;
  }
  
  .ull_wiki_headfoot_float_right {
    padding-top: 0;
  }  
  
  #cookiepopup {
    display: none;
  }
  
  
}