@font-face 
{
  font-family: 'Nimbus';
  src: url('./assets/fonts/nimbus.eot');
  src: url('./assets/fonts/nimbus.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/nimbus.woff') format('woff'),
       url('./assets/fonts/nimbus.ttf') format('truetype'),
       url('./assets/fonts/nimbus.svg#wf') format('svg');
  font-weight: normal;
  font-style: normal;
font-display: swap
}

@font-face 
{
  font-family: 'RobotoLight';
  src: url('./assets/fonts/roboto/roboto-light-webfont.eot');
  src: url('./assets/fonts/roboto/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/roboto/roboto-light-webfont.woff') format('woff'),
       url('./assets/fonts/roboto/roboto-light-webfont.ttf') format('truetype'),
       url('./assets/fonts/roboto/roboto-light-webfont.svg#learning_curve_proregular') format('svg');
  font-weight: normal;
  font-style: normal;
font-display: swap
}

@font-face 
{
  font-family: 'RobotoThin';
  src: url('./assets/fonts/roboto/roboto-thin-webfont.eot');
  src: url('./sassets/fonts/roboto/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/roboto/roboto-thin-webfont.woff') format('woff'),
       url('./assets/fonts/roboto/roboto-thin-webfont.ttf') format('truetype'),
       url('./assets/fonts/roboto/roboto-thin-webfont.svg#learning_curve_proregular') format('svg');
  font-weight: normal;
  font-style: normal;
font-display: swap
}

@font-face 
{
  font-family: 'RobotoBlack';
  src: url('./assets/fonts/roboto/roboto-black-webfont.eot');
  src: url('./assets/fonts/roboto/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/roboto/roboto-black-webfont.woff') format('woff'),
       url('./assets/fonts/roboto/roboto-black-webfont.ttf') format('truetype'),
       url('./assets/fonts/roboto/roboto-black-webfont.svg#learning_curve_proregular') format('svg');
  font-weight: normal;
  font-style: normal;
font-display: swap
}



*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0;padding: 0; font-family: Arial, Helvetica, sans-serif; font-size:16px; }

body { color: #000; }

h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; padding:0px; }

ul[role='list'],
ol[role='list'] { list-style: none;padding: 0;margin: 0; }

a { text-decoration: none;color: inherit; }

h1,h2,h3,h4,h5 { padding:0px; margin: 0px; font-weight: normal; }

input, 
button, 
textarea, 
select { padding:0px; margin: 0px; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; font-size:16px; }

input:focus,
textarea:focus { outline: 0; }

button { cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset { border: none; padding: 0;margin: 0; }
legend { padding: 0; }

ul, li { list-style: none; padding:0px; margin:0px; }

body { background: rgba(16, 16, 16, 0.9); padding-bottom:120px;  }


textarea {
  resize: none;
}

.nav { position:fixed; top:50px; left:50%; transform:translateX(-50%) scale(1.1); display: flex; justify-content: center; width:80%; }
.nav { transition: transform 0.3s ease, padding 0.3s ease; }
.nav > nav { display: block; background: linear-gradient(0deg, rgba(124, 207, 255, 0.9), rgba(99, 198, 255, 0.9)); border-radius: 4px; box-shadow: 0px 0px 8px rgba(0,0,0,0.2);  padding-right: 30px; padding-left:5px; }
.nav > nav ul { position: relative; }
.nav > nav ul::after { content: ""; clear: both; display: table; }
.nav > nav ul li { position:relative; float: left; min-height: 24px; min-width: 32px; }
.nav > nav ul li a { display: block; padding:20px; cursor:pointer; }
.nav > nav ul li:first-child a { display:block; background: url('./assets/buddy.svg') 50% 50% no-repeat; background-size: 68px 68px; min-width: 60px; margin-top:8px; }
.nav > nav ul div { padding-top:20px; position:absolute; top:150%; left:50%;   white-space: nowrap; width: max-content; opacity: 0; visibility: hidden; transition: all .2s; -moz-transition: all .2s; -webkit-transition:all .2s; -o-transition: all .2s; transform:translateX(-50%);   padding:10px 20px 10px 20px;  }
.nav > nav ul div ul { padding:10px 20px 10px 20px; border-radius: 4px; box-shadow: 0px 0px 6px rgba(0,0,0,0.2); background: linear-gradient(0deg, rgba(124, 207, 255, 0.95), rgba(124, 207, 255, 0.95)); }
.nav > nav ul ul li { float:none; padding:0px; }
.nav > nav ul ul li a { padding:10px;  text-transform: none; }
.nav > nav ul ul li:first-child a { background: none; padding:10px; width: auto; height: auto; }
.nav > nav ul li:hover div { display: block; visibility: visible; top:100%; opacity: 1; }
.nav > nav ul li:hover ul > li { display: block; }

.nav > nav ul li.parent { background:url('./assets/arrow.svg') 100% 50% no-repeat; padding-right: 10px;}
.nav > nav ul li a[lang] { width:32px; height: 32px;}
.nav > nav ul li a.en { background:url('./assets/en.svg') 50% 50% no-repeat; }
.nav > nav ul li a.bg { background:url('./assets/bg.svg') 50% 50% no-repeat; }

form { display: block; }
form fieldset { display:block; padding-right: 20px; }
form fieldset h3 { margin-bottom:30px; }
form label { display: block; margin:10px 0px 10px 0px; }
form input[type=text],
form input[type=password],
form textarea { padding:10px; border:1px solid rgb(211, 211, 211); width:calc(100%); }
form textarea { min-height: 100px; }
form input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; border:1px solid rgb(255, 191, 0); }

form input[type=text]:focus { border:1px solid rgb(255, 191, 0); background: #fff url('./assets/buddy.svg') 100% 50% no-repeat; }

form button { box-shadow: 0px 0px 3px rgba(0,0,0,0.4); text-transform: uppercase; border:none; border-radius: 4px; margin-top:10px; display:block; padding:15px 25px 15px 25px; background: linear-gradient(0deg, rgb(0, 0, 0), rgb(0, 0, 0)); color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; margin-top:30px; }
form button:hover { background: linear-gradient(0deg, rgb(255, 191, 0), rgb(255, 191, 0)); color:#000; }

form input[type=color] { padding:0px; margin:0px; border: none; width:24px; height:24px; cursor:pointer; }

form textarea.train { min-height: 200px; }

.errors { background: rgba(255, 209, 209, 0.95);  }
.errors > div { padding:5px 0px 5px 0px; }
.success { background: #eeffdf; }

table.colors tr td { padding:10px 0px 10px 0px; vertical-align: middle; }
table.colors tr td:first-child { width:25px; }
table.colors tr td:first-child + td { padding-left:10px; }

.errors,
.success { padding:10px 20px 10px 20px;  border-radius: 4px;  margin-bottom:20px; }

.nav.shrink 
{
    transform:translateX(-50%) scale(1);
}


main h1, 
main h2,
main h3 { display: block;  text-align: center; font-weight: normal; }
main h1 { font-family: RobotoBlack, Arial, sans-serif; font-size:90px; padding:50px; text-align: center;  max-width: 80%; margin:0px auto; }
main h2 { font-family: RobotoThin, Arial, sans-serif; font-size:40px;  }
main h3 { font-family: RobotoBlack, Arial, sans-serif; font-size:24px; text-align: left; margin:auto; padding:10px; }

main h1 sup {  font-family: RobotoThin, Arial, sans-serif; font-size:32px; text-transform: lowercase;}

main { display: block; padding:80px 20px 20px 20px; }
main article { display: block; padding:20px; background: rgb(232, 232, 232); color:#000; border-radius: 20px;}

.template { background: rgba(242,242,242); border-radius: 0 0 20px 20px; }

.column { display: flex; }
.column > div { flex: 1; }

.copy { padding:20px; }
.copy p { display: block; padding:10px; color:rgb(83, 83, 83); line-height: 28px; }

.copy.handshake { padding:50px; max-width: 1200px; margin:0px auto; }

pre { display: block; padding:20px; background: rgb(0, 0, 0); color:#0099d5; border-radius: 4px; line-height: 25px; overflow: auto; }


[data-prompt] ul.tabs { display: block; background:none; padding:0px; margin-bottom:20px; }
[data-prompt] ul.tabs::after { content: ""; clear: both; display: table; }
[data-prompt] ul.tabs li { display: block; float: left; }
[data-prompt] ul.tabs li a { display: block; float:left; padding:10px 20px 10px 20px; cursor: pointer; border-bottom:5px solid transparent; }
[data-prompt] ul.tabs li a.active { border-bottom:5px solid #000; }

div.spinner { position:absolute; top:50%; left:50%; margin-left:-12px; visibility:hidden; width: 24px;height: 24px;border: 2px solid transparent;border-top: 2px solid #fff; border-radius: 50%;animation: spin 1s linear infinite; }
div.spinner.spin { visibility: visible;}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media only screen and (max-width: 767px) 
{
   .nav { top:20px; }
   .nav > nav { padding-left:5px;padding-right: 5px; }
   .nav > nav ul li { min-height: 12px; min-width: 12px;}
   .nav > nav ul li a { padding:15px 8px 15px 8px; font-size:14px; margin: 0px; }
   .nav > nav ul li:first-child a { width:32px; height:42px; min-width: 32px; padding:0px; background-size: 42px 42px; margin: 0px; }
   .nav > nav ul li.parent { padding-right: 20px;}


    main h1 { font-size:32px; padding:30px; }
    main h2 { font-size:24px; }

    main h1 sup { font-size:12px; }

    .column { display: block; }
    .column > div { flex: 1; }


}

/* For tablets (max-width: 1023px) */
@media only screen and (max-width: 1023px) 
{
  /* Apply styles for tablets */
}

/* For desktops (min-width: 1024px) */
@media only screen and (min-width: 1024px) 
{
  /* Apply styles for desktops */
}