@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;}


/* BANNER  -----------------------  

linear-gradient(110deg,#caca9d,#b7d04a,#606744,#000000)
linear-gradient(110deg,#ff6673,#ff6673,#cc25e4,#7c00ff) #ef67b2
linear-gradient(160deg,#420b32, #bb6796,#7664ad, #dcef86)
background-image: linear-gradient(160deg,#ef67b2, #ef67b2,#9fad64,#dcef86)

*/

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.65em; margin: 0; text-align:center;  font-weight:bold; line-height: 1.5em; color: inherit;}   
h3 {font-size: 1.5em;  margin: 3em 0 1em 0; text-align:center;}
h4 {font-size: 1.25em;  margin:2em 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: 1em auto;}


.section {float:left; width:100%;}
.section-internal-container {max-width: 1600px; margin: auto; float:none; }
.section-content {padding: 2em 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: 14px; color: #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:20px 20px;}

.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 20px;}
.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;}

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


.main-banner-container {float:none; width:100%; max-width: 1600px; margin:auto;  padding:7em 10% 8em 10%;}

.banner {float:left; width:100%;}
.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;}
.banner .text-container .text {width:100%; min-width: 900px;}
							
.banner  h2.main-banner {font-size: 1.8em;    line-height: 1.2em;    font-weight: 800;    letter-spacing: -0.005em;	text-transform:none;       -webkit-text-fill-color: transparent;	background-image: linear-gradient(160deg,#3d1d1f, #1d1d1f,#1d1d1f, #1d1d1f);	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 black,1px 16px 1px 1px     black,1px 22px 1px 1px black;
    box-shadow: 0 10px 0 1px black,0 16px 0 1px black,0 22px 0 1px black;
}