@charset "UTF-8";


@font-face {font-family: Montserrat;  src: url('../fonts/montserrat/Montserrat-Thin.ttf');  font-weight:	200;}
@font-face {font-family: Montserrat;  src: url('../fonts/montserrat/Montserrat-Regular.ttf');font-weight:	normal;}
@font-face {font-family: Montserrat;  src: url('../fonts/montserrat/Montserrat-Light.ttf');  font-weight:	300;}
@font-face {font-family: Montserrat;  src: url('../fonts/montserrat/Montserrat-Bold.ttf');  font-weight:	bold;}

 
audio  {border:1px solid #dddddd; border-radius:10px; width:-webkit-fill-available; background: #f1f3f4; width:calc( 100% - 4px); }

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000; /* Optional: adds a black background while loading */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



body {margin:0; box-sizing: border-box; padding:0; font-family: Montserrat,  Arial, sans-serif; font-size:22px; color:#1d1d1f; line-height: 1.5em; font-weight: 300;}

h1 {font-size: 3em; margin: 0; text-align:center; line-height: 1.5em;}    
h2 {font-size: 1.5em; margin: 0; text-align:center;  font-weight:bold; line-height: 1.5em; color: inherit;}   
h3 {font-size: 1.25em;  margin: 0.5em 0 0.5em 0; text-align:center;}
h4 {font-size: 1.1em;  margin:1em 0 0.5em 0; text-align:center;}
h3 a.link {color: inherit; font-weight: inherit;}

ul		{margin: 0; padding: 0; float: left;}
ul li 	{list-style: none outside none;}

pre {margin: 0; line-height: 1.4em;}

.main-menu {float:right;}
.odilon-logo {float:left;}

.image-banner-container {background: url(../images/brushstroke-blue.jpg) no-repeat 0 0 scroll; background-size: cover; float:left; width:100%;}

.centered {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block;}
.centered-x {position: absolute;   left: 50%; transform: translateX(-50%); display: block;}
.screenshot {height: 40vh; float:left; width:100%; background: #eeeeee;}
.main-canvas {float:left; width:100%; min-height: calc( 100vh - 150px);}

.group-list {padding: 1em 3em;}
.list-item {padding: 0.2em 0;}

.quote {font-size: 0.9em; font-style: italic;}

/**- ---------------------------------------------------------------------------------- - */
.info-pill {width:50%; padding:0 1em; float:left;     min-height: 790px;}
.info-pill-payload {float:left; width:100%; padding: 1em 0em; float:left; border-radius: 0px;  min-height: 450px; overflow:auto;}
.left-pill {border:1px solid #dddddd; border-right:none;}
.right-pill {border:1px solid #dddddd;}




.info-pill h3 {margin:0;}
.info-pill .image-container {width:100%; height: 500px; float:left; overflow: hidden; position: relative; border-radius:0px;}


.info-pill .longb {height: 38em;}
.info-pill .longb .image-container {height:400px;}

.info-pill .longb_extra {height: 1200px;}


/**- ---------------------------------------------------------------------------------- - */

.code {padding:0; line-height:1.5em; float:left; width:100%;  border-radius:4px; font-size:0.82em;}

.code  .hljs-tag .hljs-name,
.code  .hljs-name {color: #9f3d92;}

	

nav, div {box-sizing: border-box;}
p {font-size:1em; text-align: center; margin: 0.5em auto  2em auto;}


.section {float:left; width:100%;}
.section-internal-container {max-width: 1600px; margin: auto; float:none; }
.section-content {padding: 2.5em 4em; min-height: 5vh; float:left; width:100%; max-width: inherit;}

 
a.link {color: #0c6490; text-decoration:none; font-weight: 300;}
						

.light {background: white; color: #1d1d1f;}
.dark {background: #f4f5f6; color:#1d1d1f;}


.toolbar  {font-size: 13px; color:white; background: #1d1d1f; font-weight: 300; width:100%; float:left; padding: 0px 30px;  line-height: 1.65em;}
.toolbar-item { float:left; display:inline;  text-transform:uppercase; padding:25px 8px;}

.button-toolbar-item a,
.toolbar-item a {text-decoration:none; color: inherit; }
.button-toolbar-item { float:left; display:inline;  text-transform:uppercase; padding:18px 0 18px 10px;}
.button-toolbar-item  .btn  {padding:10px 30px; line-height:1em; font-size:0.88em; color:white;}


.btn-primary {background: #0c6490; padding: 5px 40px; border:none; font-size:1em; font-family: inherit; border-radius: 6px; color:white;}
.footer {width:100%; float:left; padding: 20px 30px; background: #f6f7f8;}

/**- ---------------------------------------------------------------------------------- - 
padding: 4em 18% 2em 20%;
  
*/


.main-banner-container 		{float:none; width:100%; max-width: 1600px; margin:auto;  padding:12em 10% 13em 10%;}
.main-banner-container-logo {float: none;    width: 100%;   margin: auto;     padding:9em 10% 10em 10%; }

  
.banner {float:left; width:100%; background:#1d1d1f;}
.banner .canvas-container {width:100%; float:left; height: 40vh; min-height: 560px; border-radius: 6px; display:block; background: white; margin-top: 0px;}
.banner .image-container {width:100%; float:left; padding:	0px; margin:0 0 0 0;  display:block; height:100%; position:relative;}
.banner .text-container {width:100%; float:left; position:relative; height: 100%; position:relative; margin:0 0 0 0;  padding: 1em 3em 0 3em;}
.banner .text-container .text {width:100%; min-width: 900px;}
							
							 
							
.banner  h2.main-banner {font-size: 1.7em;    line-height: 1.3em;    font-weight: 300;    letter-spacing: -0.005em;	text-transform:none;       -webkit-text-fill-color: transparent;	background-image: linear-gradient(160deg,white, white, 
white, white);	text-align: center;     top: 0%;	-webkit-background-clip: text;    background-clip: text;    box-decoration-break: clone;}


.brushstroke-blue   {width:100%; content:url("../images/brushstroke-blue.jpg");}
.brushstroke-gray   {width:100%; content:url("../images/brushstroke-gray.jpg");}
.brushstroke-green  {width:100%; content:url("../images/brushstroke-green.jpg");}
.brushstroke-orange {width:100%; content:url("../images/brushstroke-orange.jpg");}
.brushstroke-red    {width:100%; content:url("../images/brushstroke-red.jpg");}
.brushstroke-wc1    {width:100%; content:url("../images/wc-1.jpg");}
.brushstroke-wc2    {width:100%; content:url("../images/wc-2.jpg");}


.brushstroke-watercolor   {width:100%; content:url("../images/brushstroke-watercolor-2.jpg");}
.brushstroke-watercolor-blue   {width:100%; content:url("../images/brushstroke-watercolor-3.jpg");}
.brushstroke-watercolor-square   {width:100%; content:url("../images/brushstroke-watercolor-square.jpg");}



.dropbtn {
  background-color: white;
  color: white;
  padding: 10px;
  margin:0 0 0 -5px; 
  border: none;
  cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 220px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 10px 20px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: black; color:white;}

/* 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 */
.dropdown:hover .dropbtn {
  background-color: white;
  color: white;
}










/**- ---------------------------------------------------------------------------------- - 
.dropbtn {
  background-color: inherit;
  border: none;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none; 
  min-width: 380px; 
  position: absolute;
  
  text-transform:none;
  
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  background: white;
}

.dropdown-content a {
  padding: 20px 30px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f4f4f4;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: inherit; cursor: pointer;}

*/

.burger:hover {background: white; color: white;}

.burger {
    content: "";
    position: absolute;
    left: 0;
    display: block;
    width: 1em;
    top: 0;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px white,1px 16px 1px 1px     white,1px 22px 1px 1px white;
    box-shadow: 0 10px 0 1px white,0 16px 0 1px white,0 22px 0 1px white;
}