/*********************************/
/*  G E N E R I C   S T Y L E S  */
/*********************************/

*
  {
  margin: 0;
  padding: 0;
  border: 0;
  }

*, *::before, *::after
  {
  box-sizing: border-box;     /* box size = content + padding + border */
  }

.notes
  {
  color: rgb(80,180,40);
  }

.strikethrough
  {
  text-decoration: line-through;
  }



/***************************/
/*  F O N T   S T Y L E S  */
/***************************/


/* TITILLIUM WEB */

@font-face
  {
  font-family: 'titillium_webextralight';
  src: url('../fonts/titillium_web_extralight-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_extralight-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_extralight-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_extralight-webfont.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  }

@font-face
  {
  font-family: 'titillium_webXLtIt';
  src: url('../fonts/titillium_web_extralight_italic-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_extralight_italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_extralight_italic-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_extralight_italic-webfont.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  }

@font-face
  {
  font-family: 'titillium_weblight';
  src: url('../fonts/titillium_web_light-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_light-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_light-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  }

@font-face
  {
  font-family: 'titillium_weblight_italic';
  src: url('../fonts/titillium_web_light_italic-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_light_italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_light_italic-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_light_italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  }

@font-face
  {
  font-family: 'titillium_webregular';
  src: url('../fonts/titillium_web_regular-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_regular-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_regular-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  }

@font-face
  {
  font-family: 'titillium_webitalic';
  src: url('../fonts/titillium_web_italic-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_italic-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_italic-webfont.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  }

@font-face
  {
  font-family: 'titillium_websemibold';
  src: url('../fonts/titillium_web_semibold-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_semibold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_semibold-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_semibold-webfont.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  }

@font-face
  {
  font-family: 'titillium_websemibold_italic';
  src: url('../fonts/titillium_web_semibold_italic-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_semibold_italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_semibold_italic-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_semibold_italic-webfont.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  }

@font-face
  {
  font-family: 'titillium_webbold';
  src: url('../fonts/titillium_web_bold-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_bold-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_bold-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  }

@font-face
  {
  font-family: 'titillium_webbold_italic';
  src: url('../fonts/titillium_web_bold_italic-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_bold_italic-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_bold_italic-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_bold_italic-webfont.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  }

@font-face
  {
  font-family: 'titillium_webblack';
  src: url('../fonts/titillium_web_black-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/titillium_web_black-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/titillium_web_black-webfont.woff2') format('woff2'),
       url('../fonts/titillium_web_black-webfont.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  }


/* POINTERS */

@font-face
  {
  font-family: 'pointers';
  src: url('../fonts/pointers-webfont.eot');     /* only for IE8 or older */
  src: url('../fonts/pointers-webfont.eot?#iefix') format('embedded-opentype'),
       url('../fonts/pointers-webfont.woff2') format('woff2'),
       url('../fonts/pointers-webfont.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  }



/*********************************/
/*  B A S I C   E L E M E N T S  */
/*********************************/

html
  {
  font-size: calc(0.875em + 0.5vw);     /* corresponds to (14px + 0,5% of viewport width) in all major browsers, unless overridden by user settings in browser */
  }

body
  {
  background-color: rgb(254,242,226);
  text-align: left;
  font-family: 'titillium_webregular', Verdana, sans-serif;
  font-size: 1.0rem;
  line-height: 1.75rem;
  font-weight: 400;
  font-style: normal;
  color: rgb(74,104,175);
  }

.clearfix::after    /* clears floats on direct child elements, making them equal height */
  {
  content: ' ';
  display: block;
  clear: both;
  }



/*******************************************/
/*  G E N E R A L   T E X T   S T Y L E S  */
/*******************************************/

h1
  {
  margin: 0rem 0 2.5rem 0;
  padding-bottom: 1rem;
  background-image: url(../images/underline_dotted_dark_red.png);
  background-position: bottom left;
  background-repeat: repeat-x;
  font-family: 'titillium_webblack', Verdana, sans-serif;
  font-size: 1.75rem;
  font-weight: 900;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.25rem;
/*  color: rgb(243,147,20);     /* logo orange */
  color: rgb(179,0,27);     /* dark red */
  }

h2
  {
  margin: 2.5rem 0 1.25rem 0;
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  font-style: normal;
/*  color: rgb(243,147,20);     /* logo orange */
  color: rgb(179,0,27);     /* dark red */
  }

h3
  {
  margin: 2rem 0 1.25rem 0;
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
/*  color: rgb(179,0,27);     /* dark red */
  color: rgb(243,147,20);     /* logo orange */
  }

h4
  {
  margin: 0.25rem 0;
  font-family: 'titillium_websemibold', Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.25rem;
/*  color: rgb(179,0,27);     /* dark red */
  color: rgb(243,147,20);     /* logo orange */
  }

h5      /* only used for language selection */
  {
  font-family: 'titillium_websemibold', Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  font-style: normal;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.25rem;
  color: rgb(179,0,27);     /* dark red */
  display: inline-block;
  padding: 0.25rem 0;
  }

p
  {
  margin: 0 0 1.25rem 0;
  }

p#copyright
  {
  float: left;
  }

p#designer
  {
  float: right;
  }

span.company_name
  {
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  margin-left: 0.125rem;
  margin-right: 0.125rem;
  }

strong
  {
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-weight: 700;
  font-style: normal;
  }



/*****************/
/*  H E A D E R  */
/*****************/

header
  {
  position: relative;     /* for vertical centering of logo*/
  width: 100vw;
  height: 20vw;
  background: url(../images/photo_reindl_booth_5000×907_gradient.jpg) no-repeat scroll top right;
  background-size: auto 20vw;
  }


/* LOGO */

#logo
  {
  width: 30%;
  height: auto;
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  padding: 1rem 1.5rem 0.75rem 1rem;
  border: 1px solid rgb(243,147,20);     /* logo orange */
  background-color: rgba(254,242,226,0.80);
  border-radius: 4px;
  }

#logo img
   {
   width: 100%;
   height: 100%;
   }



/*************************/
/*  N A V I G A T I O N  */
/*************************/

nav#nav_all
  {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgb(254,242,226);     /* necessary for sticky header to prevent main section from shining through */
  padding-bottom: 2rem;     /* necessary for sticky header to provide distance to main section */
  }

nav#nav_main
  {
  border-top: 4px solid rgb(248,200,137);     /* logo orange lighter */
  }

nav#nav_main ul     /* flexbox parent */
  {
  padding: 0;
  display: flex;
  justify-content: space-between;
  list-style-type: none;     /* removes bullets from list items */
  }

@media only screen and (max-width: 767px)     /* vertical stacking of menu items below 767px viewport width */
  {
  nav#nav_main ul
    {
    flex-direction: column;
    }
  }

nav#nav_main li     /* flexbox children */
  {
  flex: 1 1 0;
  }

nav#nav_main a:link, nav#nav_main a:visited
  {
  padding: 0.5rem 0;
  display: block;     /* makes link fill entire li area and entire li area (not just text) clickable */
  border-bottom: 4px solid rgb(248,200,137);     /* logo orange lighter */
  background-color: rgba(255,255,255,0.20);
  text-decoration: none;     /* removes underline and blue or violet color from links */
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  text-transform: lowercase;
  font-variant: small-caps;
  letter-spacing: 0.125rem;
  color: rgb(243,147,20);     /* logo orange */
  }

nav#nav_main a:hover
  {
  border-bottom: 4px solid rgb(248,200,137);     /* logo orange lighter */
  background-color: rgb(243,147,20);     /* logo orange */
  color: rgb(254,242,226);
  transition: all 1s linear;
  }

nav#nav_main a.active, nav#nav_main a.active:visited, nav#nav_main a.active:hover
  {
  border-bottom: 4px solid rgb(248,200,137);     /* logo orange lighter */
  background: url(../images/arrow_up_navigation.gif) 50% 100% no-repeat, url(../images/arrow_down_navigation.gif) 50% 0% no-repeat;
  background-color: rgb(243,147,20);     /* logo orange */
  color: rgb(254,242,226);
  }

nav#nav_main a.hover, nav#nav_main a.focus, nav#nav_main a.active:active
  {
  outline: none;     /* removes dotted outline from focussed links */
  }



/*****************************************/
/*  L A N G U A G E   S E L E C T I O N  */
/*****************************************/

nav#nav_language
  {
  margin: 0.5rem 2rem 0 0;
  text-align: right;
  }

/* BUBBLE IMAGE */

#nav_language h5 img
  {
  padding-right: 0.5rem;
  vertical-align: middle;
  width: 2.75rem;
  height: 2rem;
  }


/* LINKS */

nav#nav_language a
  {
  display: inline-block;
  margin-left: 1rem;
  padding-left: 2rem;
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  font-style: normal;
  }

nav#nav_language a.active_lang
  {
  background: url(../images/checkmark_ticked.svg) left center no-repeat;
  color: rgb(179,0,27);     /* dark red */
  }

nav#nav_language a.inactive_lang
  {
  background: url(../images/checkmark_unticked_dim.svg) left center no-repeat;
  color: rgb(235,100,60);     /* not so dark red */
  }

nav#nav_language a:link, nav#nav_language a:visited
  {
  text-decoration: none;     /* removes underline and blue or violet color from links */
  }

nav#nav_language a.inactive_lang:hover, nav#nav_language a.inactive_lang:focus
  {
  background: url(../images/checkmark_ticked.svg) left center no-repeat;
  color: rgb(179,0,27);     /* dark red */
  transition: all 1s linear;
  }

nav#nav_language a:hover, nav#nav_language a:focus, nav#nav_language a:active, nav#nav_language a:visited
  {
  outline: none;     /* removes dotted outline from focussed or active links */
  }



/******************************************************/
/*   W R A P P E R   A R O U N D   B O D Y   C O P Y  */
/******************************************************/

main
  {
  width: 75vw;
  margin: 3rem auto 4rem auto;
  }

@media only screen and (max-width: 1199px)
  {
  main
    {
    width: 79vw;
    }
  }

@media only screen and (max-width: 1023px)
  {
  main
    {
    width: 83vw;
    }
  }

@media only screen and (max-width: 767px)
  {
  main
    {
    width: 87vw;
    }
  }

@media only screen and (max-width: 479px)
  {
  main
    {
    width: 91vw;
    }
  }



/***************/
/*  L I S T S  */
/***************/


/* STANDARD LIST */

ul.list_standard
  {
  margin: 1.5rem 3rem 2rem 3rem;
  }

ul.list_standard li
  {
  margin-top: 0.375rem;
  list-style-type: square;
  list-style-position: outside;
  line-height: 1.375rem;
  padding-left: 0.25rem;
  }

ul.list_standard_indented
  {
  margin: 1rem 0 1rem 1rem;
  }

ul.list_standard_indented li
  {
  margin-top: 0.375rem;
  list-style-type: square;
  list-style-position: outside;
/*  line-height: 1.25rem; */
  padding-left: 0.25rem;
  }


/* ACCORDION LIST */

ul.list_accordion     /* see ACCORDION section */
  {
  }


/* INLINE LIST CENTERED -- ONLY USED ON START PAGE */

ul.list_inline_centered      /* flexbox parent */
  {
  margin-bottom: 1.25rem;
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-weight: 700;
  font-style: normal;
  display: flex;                    /* for Firefox 28+, Chrome 29+, IE 11+, Opera 12.1+, Safari 9+, Android 4.4+, iOS 9.2+ */
  justify-content: center;          /* for Firefox 28+, Chrome 29+, IE 11+, Opera 12.1+, Safari 9+, Android 4.4+, iOS 9.2+ */
  flex-wrap: wrap;                  /* for Firefox 28+, Chrome 29+, IE 11+, Opera 12.1+, Safari 9+, Android 4.4+, iOS 9.2+ */
  }

ul.list_inline_centered li
  {
  margin-right: 2rem;
  padding-left: 0.5rem;
  list-style-type: square;
  list-style-position: outside;
  }

ul.list_inline_centered li:first-child
  {
  list-style-type: none;
  }


/* DEFINITION LISTS -- ONLY USED ON CONTACT PAGE */

dl
  {
  }

dt
  {
  float: left;
  width: 4.5rem;
  }

dd
  {
  margin-left: 5rem;
  }



/*****************************/
/*  I N L I N E   L I N K S  */
/*****************************/

a.link_inline:link, a.link_inline:visited
  {
  text-decoration: none;     /* removes underline and blue or violet color from links */
  color: rgb(154,172,213);
  border-bottom: 2px dotted rgb(154,172,213);
  }

a.link_inline:hover
  {
  border-bottom: 2px solid rgb(154,172,213);     /* border style is not animatable */
  }

a.link_inline:hover, a.link_inline:focus, a.link_inline:active
  {
  outline: none;     /* removes dotted outline from focussed links */
  }



/*****************/
/*  I M A G E S  */
/*****************/

img.img_right, img.img_left     /* used for photos */
  {
  display: inline-block;
  vertical-align: top;
  transform: translate(0, 0.5rem);
  margin-bottom: 0.5rem;
  border-radius: 4px;          /* for Firefox 4+, Chrome 5+, IE 9+, Opera 11.5+, Safari 5+, Android 2.2+, iOS 4.1+ */
  box-shadow: 6px 6px 6px rgba(154,142,126,0.5);          /* for Firefox 4+, Chrome 10+, IE 9+, Opera 11.5+, Safari 5.1+, Android 4+, iOS 5.1+ */
  }

img.img_right     /* used for photos */
  {
  float: right;
  margin-left: 1rem;
  }

img.img_left     /* used for photos */
  {
  float: left;
  margin-right: 1rem;
  }

img#portrait
  {
  max-width: 12vw;
  height: auto;
  }

img#typing, img#approval, img#clarification, img#research, img#handshake, img#calculation, img#proofreading
  {
  max-width: 25vw;
  height: auto;
  }

img.img_software     /* used for software symbols */
  {
  float: right;
  margin-left: 1rem;
  max-width: 9vw;
  height: auto;
  }



/*****************/
/*  T A B L E S  */
/*****************/


/* STUDY TABLE -- ONLY USED ON PROFILE PAGE */

table#studies
  {
  width: 100%;
  table-layout: fixed;     /* horizontal layout is determined by table and column widths, not cell contents */
  }

table#studies td
  {
  vertical-align: baseline;
  }

table#studies td.period
  {
  width: 6rem;
  }


/* TRAINING TABLE -- ONLY USED ON PROFILE PAGE */

table#trainings
  {
  width: 100%;
  table-layout: fixed;     /* horizontal layout is determined by table and column widths, not cell contents */
  }

table#trainings td
  {
  vertical-align: baseline;
  }

table#trainings td.date
  {
  width: 4rem;
  }



/********************************************************************************/
/*  A C C O R D I O N  --  O N L Y   U S E D   O N   S E R V I C E S   P A G E  */
/********************************************************************************/

section.accordion
  {
  width: 60vw;
  margin: 0 auto 0.5rem auto;
  }


section.accordion input[name='panel']
  {
  display: none;
  }

section.accordion label
  {
  display: block;
  padding: 0.375rem 0;
  text-align: center;
  font-family: 'titillium_webbold', Verdana, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.125rem;
  color: rgb(179,0,27);     /* dark red */
  background-color: rgb(255,235,209);
  background-color: rgb(253,238,216);
  border: 1px solid rgb(243,147,20);     /* logo orange */
  border-radius: 4px 4px 0 0;          /* for Firefox 4+, Chrome 5+, IE 9+, Opera 11.5+, Safari 5+, Android 2.2+, iOS 4.1+ */
  cursor: pointer;
  transition: font-size 0.5s linear;
  }

div.accordion_content
  {
  overflow: hidden;
  width: 60vw;
  margin: 0 auto 0.75rem auto;
  max-height: 0rem;
  padding: 0 3rem;
  background-color: rgba(255,255,255,0.20);
  border: 1px solid rgb(243,147,20);     /* logo orange */
  border-top: 0;
  border-bottom: 0;
  border-radius: 0 0 4px 4px;          /* for Firefox 4+, Chrome 5+, IE 9+, Opera 11.5+, Safari 5+, Android 2.2+, iOS 4.1+ */
  transition: max-height 1s ease-in-out;
  }

section.accordion label::after
  {
  content: 'Ø';     /* down pointer */
  display: inline-block;
  vertical-align: bottom;
  font-family: 'pointers';
  font-weight: 400;
  font-size: 1.125rem;
  font-style: normal;
  }

section.accordion label:hover
  {
  font-size: 1.125rem;
  }

section.accordion input:checked + label
  {
  border-bottom: 0;
  }

section.accordion input:checked + label::after
  {
  content: 'O';     /* up pointer */
  display: inline-block;
  vertical-align: sub;
  font-family: 'pointers';
  font-weight: 400;
  font-size: 1.125rem;
  font-style: normal;
  }

ul.list_accordion
  {
  margin: 1.5rem 0 2rem 0;
  }

ul.list_accordion li
  {
  margin-top: 0.375rem;
  list-style-type: square;
  list-style-position: outside;
  line-height: 1.375rem;
  padding-left: 0.5rem;
  }

input[name='panel']:checked ~ div.accordion_content
  {
  max-height: 50rem;  /* Get this as close to what height you expect */
  border-bottom: 1px solid rgb(243,147,20);     /* logo orange */;
  }



/***********************/
/*  F L E X B O X E S  */
/***********************/


/* SOCIAL NETWORKS FLEXBOX --  ONLY USED ON PROFILE PAGE */

#networks_all     /* flexbox parent */
  {
  display: flex;
  justify-content: center;
  align-items: baseline;
  }

a.network     /* flexbox children */
  {
  flex: 0 0 auto;
  min-width: 8%;
  margin: 1.5rem;
  }

a.network figure
  {
  display: block;
  text-align: center;
  }

img.img_network
  {
  border: 0;     /* removes blue border from image links */
  }


/* CONTACT INFORMATION FLEXBOX --  ONLY USED ON CONTACT PAGE */

section#contact_information     /* flexbox parent */
  {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  line-height: 1.5rem;
  }

div#contact_postal, div#contact_virtual, div#owner_details     /* flexbox children */
  {
  flex: 1 1 auto;
  }

#contact_information p
  {
  margin: 0;
  }



/*******************************/
/*  F O O T E R   S T Y L E S  */
/*******************************/

footer
  {
  background-color: rgb(252,228,196);
  background-color: rgba(248,192,119,0.5);     /* logo orange slightly lighter */
  font-size: 0.875rem;
  color: rgb(179,0,27);     /* dark red */
  }

footer p
  {
  margin-bottom: 0;     /* resets default bottom margin for p */
  padding: 1.25rem 0;
  text-align: center;
  line-height: 1.25rem;
  }

span.vertbar
  {
  margin: 0 0.5rem;
  }