@font-face {
    font-family: Merriweather;
    src: url('/fonts/Merriweather-Light.ttf');
}

@font-face {
    font-family: MavenPro;
      src:url('/fonts/MavenProRegular.otf'),
          url('/fonts/MavenProRegular.woff');
}

body {
  font-family: Mavenpro;
  color: #071013;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
  max-width: 1000px;
  padding: 10px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #6dbb40;
    margin: 1em 0;
    padding: 0;
}

/* NAV */

nav > ul {
    display:flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0px;
    padding: 0px;
    font-family: Merriweather;
}

nav input#menu_toggle[type=checkbox] {
   display: none;
}

nav a {
  color: #fff;  
  text-decoration: none;
  display:block;
}

nav > ul > li,
nav > ul > label {
  color: #fff;
  list-style: none;
  flex-grow: 1;
  text-align: center;
  margin: 1px;
  padding: 1px;
  padding-right: 8px;
  background: #6dbb40;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-bottom-right-radius: 10px;
  border-color: #266984;
  font-weight: bold;
}

nav > ul > li.selected {
  background: #266984;
}

nav label#hamburger {
  display:none;
  list-style: none;
  user-select: none;
  flex-grow: 0;
  text-align: center;
  margin: 1px;
  padding: 0px;
  padding-top: -1;
  padding-left: 20px;
  padding-right: 20px;
  background: #6dbb40;
  border: 2px solid;
  border-radius: 10px;
  border-color: #266984;
  font-weight: bold;
  color: #fff;  
}

@media (max-width: 200px) {

  nav label#hamburger {
    display: inline;
  }

  nav input#menu_toggle[type=checkbox] ~ * {
    display:none;
  }

  nav input#menu_toggle[type=checkbox]:checked ~ li, 
  nav input#menu_toggle[type=checkbox]:checked ~ label
  {
    display:inline;
  }  

  header img {
    padding-left: 4px;
  }
}

nav ul ul {
  display:none;
  flex-direction: row;
  left:auto;
  right:auto;
  margin-top: 5px;  
  flex-wrap: wrap;
  opacity:0;
  transition:opacity 0.2s linear, visibility 0.2s linear;      
}

nav input[type=checkbox] {
   display: none;
}

nav input#help_menu[type=checkbox]:checked ~ ul.help {
  display:flex;
  opacity:1;
} 

nav input[type=checkbox]:checked + label {
  background: #266984;
} 

nav input#language_chooser[type=checkbox]:checked ~ ul.language_bar_chooser {
  display:flex;
  opacity:1;
} 

nav > ul ul li {
  list-style: none;
  flex-grow: 1;
  text-align: center;
  margin: 1px;
  padding: 1px;
  padding-right: 8px;
  background: #f57e1c;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-bottom-right-radius: 10px;
  border-color: #266984;
  font-weight: bold;  
}
/* End NAV */



main {
  display: flex;
  flex-wrap: wrap;
}

main > section {
  flex-grow: 2;
  flex-basis: 400px;
  padding: 20px;
}

main > aside {
  flex-grow: 1;
  flex-basis: 100px;
  background-color: #266984;  
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  border-radius: 10px;
}

h1 {
  font-family: MavenPro, sans-serif;
  font-size: 24px;
  text-align: center;
  padding:0px;
  margin:0px;
}

h2 {
  font-family: Merriweather;
  font-size: 18px;
}

figure.mainexample {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  display: block;
}

.downloadbutton {
  background: #f57e1c;
  display: block;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  max-width: 240px;
  padding: 5px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-bottom-right-radius: 10px;
  border-color: #266984;
}

.downloadbutton a {
  color: #fff;
  font-weight: bold;
  font-size: 140%;
  text-decoration: none;  
}

footer {
  background: #266984;
  color: #fff;
  display: block;
  text-align: center;
  font: Merriweather;
  font-size: 80%;
  border-radius: 10px;
}

blockquote {
  padding: 6px;
  margin: 6px;
  font-family: Merriweather;
  font-size: 80%;
  color: #fff;
}

blockquote:before {
  color: #fff;
  content: '"';
  font-size: 3em;
  line-height: 0.1em;
  margin-right: 0.1em;
  vertical-align: -0.3em;
}

blockquote p {
  display:inline;
}

blockquote span {
  display: block;
  font-style: italic;
}

aside ul {
  padding: 0px;
  margin: 0px;  
}

aside > h1 {
  padding: 10px;
  margin: 10px;
  margin-bottom: 1px;
  padding-bottom: 1px;
  font-family: Merriweather;
  font-size: 100%;
  color: #fff;
}

aside li {
  list-style: none;
  border-left: 2px solid;
  border-radius: 10px;
  border-color: #fff; 
  padding: 10px;
  margin: 10px;
  font-family: Merriweather;
  font-size: 80%;
  color: #fff;
}


aside div {
  list-style: none;
  border-left: 2px solid;
  border-radius: 10px;
  border-color: #fff; 
  padding: 10px;
  margin: 10px;
  font-family: Merriweather;
  font-size: 80%;
  color: #fff;
}


.buttons {
  display:flex;
  flex-direction: column;
}

.button {
  flex-wrap: wrap;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #266984;  
  border-radius: 4px;
  margin: 5px;
}

.stripe {
  cursor: pointer;
  color: #fff;
  font-size: 14pt;  
  flex-wrap: wrap;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #4689A4;
  border: 6px;
  padding: 4px;  
  border-radius: 4px;
  margin-left: 8px;
  margin-right: 8px;
}

.paddle {
  cursor: pointer;
  color: #fff;
  font-size: 14pt;  
  flex-wrap: wrap;
  display:flex;
  justify-content: center;
  align-items: center;
  background-color: #f57e1c;
  border: 6px;
  padding: 4px;  
  border-radius: 4px;
  margin-left: 20px;
  margin-right: 8px;
}

.ideal {
  cursor: pointer;
  color: #fff;
  font-size: 14pt;  
  flex-wrap: wrap;
  display:flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  background-color: #f57e1c;
  border: 6px;
  padding: 4px;  
  border-radius: 4px;
  margin-left: 20px;
  margin-right: 8px;
}

.pricetag {
  margin: 5px;
  padding: 0px;
  font-family: "Merriweather";
  font-weight: bold;
  color: #fff;
  font-size: 14pt;
}

.button form {
  font-size: 0pt;
  margin: 5px;
  padding: 0px;
  border: 0px;
}

section a {
  color: #266984;
  font-weight: bold;
  text-decoration: underline;    
}

aside a {
  color: #f57e1c;
  font-weight: bold;
  text-decoration: underline;    
}

section.libraries {
  columns: 1;
  padding: 0px;
}



@media (min-width: 500px) {
section.libraries {
  columns: 2;
}
}

@media (min-width: 750px) {
section.libraries {
  columns: 3;
}
}


section.libraries > div {
  display: inline-block; /* important to wrap notes not content */
  width: 100%; 
  margin: 6px;
  padding: 2px;
  border-left: 2px solid;
  border-radius: 10px;
  border-color: #266984;  
}


section.libraries p {
  font-family: Merriweather;
  font-weight: bold;  
  margin: 2px;
  padding: 2px;
}

section.libraries ul {
  margin: 2px;
  padding: 2px;  
  text-indent: -1em;  
}

section.libraries li {
  padding-left: 1em;
  font-family: Mavenpro;
  list-style: none;
}


section.tutorials > div {
  display: inline-block; /* important to wrap notes not content */
  width: 100%; 
  margin: 6px;
  padding: 2px;
  border-left: 2px solid;
  border-radius: 10px;
  border-color: #266984;  
}


section.tutorials p {
  font-family: Merriweather;
  font-weight: bold;  
  margin: 2px;
  padding: 2px;
}

section.tutorials ul {
  margin: 2px;
  padding: 2px;  
  text-indent: -1em;  
}

section.tutorials li {
  padding-left: 1em;
  font-family: Mavenpro;
  list-style: none;
}



figure.example {
  width: 80%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  display: block;
}

figure img {
  width: 100%;
  border: 2px solid;
  border-radius: 10px;
  border-color: #266984;
}

figure figcaption {
  font-style: italic;
  text-align: center; 
}

div.pictures {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding:0;  
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
  margin-bottom:6px;
}

figure.picture {
  width: 49%;
  height:auto;
  margin:0px;
  margin-bottom:10px;
  padding:0px;
}

figure.singlepicture {
  width: 100%;
  margin:0px;
  margin-bottom:10px;
  padding:0px;
}



form.service {
  display: flex;
  flex-wrap: wrap;
}

form.service > label {
  margin: 5px;
}

form.service > input {
  min-width: 350px;
  margin: 5px;
}


form.service input[type=submit] {
  color: #fff;
  font-weight: bold;
  font-family: MavenPro;
  font-size: 18px;
  background: #f57e1c;
  display: block;
  text-align: center;
  border: 0px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-bottom-right-radius: 10px;
  border-color: #266984;
}


section.udro {
  height:auto;
  display:flex;
  flex-wrap: wrap;  
  margin-bottom:10px;
  padding:10px;
  border: 2px solid;
  border-radius: 10px;
  border-color: #266984;
}