/*!
 * Stylesheet
 * Copyright 2013-2020 Reinder de Vries / LearnAppMaking.com
 *
 * Background tile CC BY-SA 3.0: https://www.toptal.com/designers/subtlepatterns/
 */

/**
 * FONTS
 */

/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Regular'), local('Lato-Regular'), url('../fonts/lato-v14-latin-regular.woff2') format('woff2'), url('../fonts/lato-v14-latin-regular.woff') format('woff');
}

/* lato-italic - latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Lato Italic'), local('Lato-Italic'), url('../fonts/lato-v14-latin-italic.woff2') format('woff2'), url('../fonts/lato-v14-latin-italic.woff') format('woff');
}

/* lato-700 - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Lato Bold'), local('Lato-Bold'), url('../fonts/lato-v14-latin-700.woff2') format('woff2'), url('../fonts/lato-v14-latin-700.woff') format('woff');
}

/** END OF FONTS **/

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: 'Lato', sans-serif;
    font-weight: normal;
    padding: 0;
    margin: 0;
    color: #333;
    background: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

input {
    font-family: 'Lato', sans-serif;
}

/** TODO: redefine style for focus */
:focus {
    outline: 0;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 1.6em;
    color: #222;
    margin: 10px 0;
    font-weight: bold;
    text-rendering: optimizeLegibility;
}

h1 {
    font-size: 38px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 30px;
}

h4 {
    font-size: 24px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 14px;
}

p, li {
    font-size: 18px;
    line-height: 1.6em;
}

p {
    margin: 0 0 20px 0;
}

ol {
    list-style: decimal outside none;
}

ul {
    list-style: disc outside none;
}

ol, ul {
    margin: 0 0 20px 35px;
}

li {
    padding: 3px 0 3px 10px;
}

section {
    padding: 20px;
}

hr {
    border: 0;
    border-top: 1px solid #ccc;
}

blockquote {
    padding: 10px 10px 10px 25px;
    margin: 0 0 20px;
    border-left: 5px solid rgba(0, 220, 152, 0.7);
}

blockquote p {
    font-size: 22px;
    line-height: 1.7em;
    color: #333;
    margin: 0 !important;
}

abbr[title] {
    cursor: help;
    text-decoration: none;
    border-bottom: 1px dotted #333;
}

a[data-featherlight] {
    border-bottom: none !important;
}

body.error404 .section-regular {
    min-height: calc(100vh - 411px);
}

#page-content a:not(.button),
.section-regular a,
#quiz a {
    color: #0088cc;
    border-bottom: 1px solid #0088cc;
    text-decoration: none;
}

#page-content a:hover:not(.button),
#page-content a:focus:not(.button),
.section-regular a:hover:not(.button),
.section-regular a:focus:not(.button),
#quiz a:hover:not(.button),
#quiz a:focus:not(.button) {
    color: #005580;
    border-bottom: 1px solid #005580;
    text-decoration: none;
}

.centered {
    text-align: center !important;
}

img {
    color: transparent;
}

img.lazy {
    background-color: #ededed;
}

/**
 * Alerts
 */

.alert {
    position: relative;
    padding: 20px 25px;
    border-radius: 2px;
    margin-bottom: 15px;
    color: #444;
    font-size: 18px;
    background-color: #f7f7f7;
    line-height: 1.6 !important;

}

.alert.success {
    background-color: #DEF1DA;
}

.alert.info {
    background-color: #FAFCD9;
}

.alert.error {
    background-color: #FCD9D9;
}

.alert p:last-of-type {
    margin-bottom: 0 !important;
}

/**
 * Header and navigation
 */

#header {
    padding: 15px 0;
    border-bottom: 5px solid #ecedef;
    color: white;
    background-color: #00dc98;
}

#header .span5, #header .span7 {
    margin: 0;
}

#main, #main li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#main:before,
#main:after {
    display: table;
    line-height: 0;
    content: "";
}

#main:after {
    clear: both;
}

#main li {
    float: left;
}

#main a {
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 12px 10px 12px;
    margin: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    color: white;
    font-size: 16px;
    font-weight: bold;
    line-height: normal;
}

#main a:hover,
#main a:focus {
    border-bottom-color: rgba(255, 255, 255, 0.6);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

#main .current-menu-item a {
    border-bottom-color: rgba(255, 255, 255, 0.75);
    border-bottom-style: solid;
    border-bottom-width: 1px;
}

#main li:last-child a {
    border-radius: 6px;
    background: white;
    margin-left: 15px;
    padding-left: 18px;
    padding-right: 18px;
    text-align: center;
    color: #00dc98;
}

/**
 * Mobile Menu
 */

#mobile-menu {
    display: none;
    height: 32px;
}

#mobile-menu .home {
    float: left;
}

#mobile-menu .menu {
    float: right;
}

#mobile-menu .menu a {
    display: block;
    width: 32px;
    height: 32px;
    background-image: url('../img/sprites.svg#menu-icon');
    background-size: 32px 32px;
    background-repeat: no-repeat;
}

/**
 * Tables
 */

table {
    background: white;
    margin-bottom: 20px;
}

table tr:nth-child(even) {
    background: #fafafa;
}

table td {
    padding: 7px 12px;
}

table th {
    padding: 10px 12px;
    background-color: rgba(0, 220, 152, 5%);
    border-bottom: 3px solid rgba(0, 220, 152, 75%);
    text-align: left;
}

table.clear,
table.clear th,
table.clear tr:nth-child(odd) {
    background: white;
    border: none;
}

table.clear td {
    border: none;
    padding: 15px 5px;
    background: white;
}

/*
 * Code & Highlight
*/

pre, code {
    font-family: Menlo, Consolas, Monaco, "Courier New", monospace, serif;
    font-size: 14px;
    color: #111;
}

code {
    display: inline;
    padding: 4px 6px;
    background: #f9f9f9;
    border-radius: 5px;
    border: none;
    white-space: nowrap;
}

pre {
    display: block;
    line-height: 21px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    background: white;
    border: 10px solid #f5f5f5;
    padding: 10px;
    margin: 0 0 20px 0;
}

pre code {
    display: block;
    padding: 0;
    white-space: pre-wrap;
    background-color: white;
    border: 0;
}

li > pre {
    margin-top: 0 !important;
}

.hljs-comment,
.hljs-quote {
    color: #006a00;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal {
    color: #aa0d91;
}

.hljs-name {
    color: #008;
}

.hljs-variable,
.hljs-template-variable {
    color: #660;
}

.hljs-string {
    color: #c41a16;
}

.hljs-regexp,
.hljs-link {
    color: #080;
}

.hljs-title,
.hljs-tag,
.hljs-symbol,
.hljs-bullet,
.hljs-number,
.hljs-meta {
    color: #6943a4;
}

.hljs-section,
.hljs-class .hljs-title,
.hljs-type,
.hljs-attr,
.hljs-built_in,
.hljs-builtin-name,
.hljs-params {
    color: #6943a4;
}

.hljs-attribute,
.hljs-subst {
    color: #000;
}

.hljs-formula {
    background-color: #eee;
    font-style: italic;
}

.hljs-addition {
    background-color: #baeeba;
}

.hljs-deletion {
    background-color: #ffc8bd;
}

.hljs-selector-id,
.hljs-selector-class {
    color: #9b703f;
}

.hljs-doctag,
.hljs-strong {
    font-weight: bold;
}

.hljs-emphasis {
    font-style: italic;
}

.hljs-ellipsis,
.hljs-format {
    border-radius: 10px;
    padding: 0 5px;
}

.hljs-ellipsis {
    border: 1px solid #eee;
    color: #aaa;
    user-select: none;
}

.hljs-format {
    padding: 1px 5px;
    border: 1px solid rgb(150, 193, 227);
    background: rgb(214, 231, 244);
    color: #333;
}

/** Styling for [menu] shortcode */
span.menu {
    display: inline-block;
    padding: 1px 6px;
    margin: -1px 5px;
    background-color: #f7f7f7;
    font-size: 17px;
    border: 1px solid #eee;
    border-radius: 3px;
}

kbd {
    display: inline-block;
    padding: 0.1em 0.6em;
    margin: 0 0.1em;
    border: 1px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
    line-height: 1.5;
    white-space: nowrap;
    text-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    background-color: #f7f7f7;
}

section .title {
    display: inline-block;
    margin: 15px 0 25px;
    padding: 0 60px;
    text-transform: uppercase;
    background: white;
}

section .span-title {
    text-align: center;
    margin: 0 30px 30px 30px;
    padding: 0;
}

section hr.title-line {
    display: block;
    width: 80%;
    margin: -55px auto 40px;
    border: none;
    border-top: 5px solid #bbb;
}

section.spacer {
    padding: 0;
    height: 10px;
}

section.top-line {
    border-top: 2px solid #efefef;
}

section.spacer-light {
    height: 50px;
    background: #ecedef;
}

/**
 * Page Content and Blog
 */

#page-content {
    padding: 20px;
}

#page-content p > iframe {
    max-width: 100%;
}

#blog-post img {
    border: 1px solid #ccc;
}

#blog-post img.featured {
    border: none;
    margin-bottom: 10px;
}

#blog-post h1 {
    margin: 0 0 20px 0;
    line-height: 1.5em;
}

#blog-post h2 {
    margin: 50px 0 20px 0;
    line-height: normal;
}

#blog-post h3,
#blog-post h4 {
    margin: 30px 0 10px 0;
}

/**
 * Blog side
 */

#blog-side {
    float: right;
    box-sizing: border-box;
    padding: 0 10px 10px 25px;
    border-left: 1px solid #eee;
}

#blog-side ul,
#blog-side li {
    list-style: none;
    margin: 0;
    padding: 0;
}

#blog-side li {
    margin: 5px 0;
}

#blog-side h2 {
    font-size: 22px;
    color: #333;
    margin: 20px 0 5px 0;
}

#blog-side a {
    font-size: 18px;
    line-height: 1.6em;
    font-weight: normal;
}

#blog-author {
    float: left;
    box-sizing: border-box;
    margin: 30px 0 30px 0;
    padding: 30px 0 0 0;
    border-top: 1px solid #eee;
}

#blog-author h3 {
    margin: -5px 0 10px 0;
    line-height: normal;
    overflow: hidden;
}

#blog-author img {
    float: left;
    margin: 0 30px 0 0;
    border-radius: 100px;
    width: 175px;
    height: 175px;
    border: none;
    background: #ededed;
}

#blog-author p {
    overflow: hidden;
    margin: 0;
}

/**
 * Search form
 */

.search-form {
    margin: 20px 0 20px 0;
    padding: 20px 0 20px 0;
    border-top: 1px solid #eee;
}

.search-form label {
    display: none;
}

.search-form input {
    margin: 0;
}

.search-form #search {
    width: 67%;
    height: 33px !important;
}

.search-form .button {
    position: relative;
    float: right;
    padding: 10px 15px;
    margin: 0;
    background: #eee;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-bottom: 4px solid rgba(0, 0, 0, .3);
    box-shadow: 0 1px 0 1px rgba(0, 0, 0, .1) !important;
    color: #555;
    font-size: 13px;
    text-transform: uppercase;
    line-height: 1.3;
    outline: 0;
    cursor: pointer;
    transition: none;
    -webkit-appearance: button;
}

/**
 * Sidebar Newsletter Signup
 */

#blog-side #gform_wrapper_18 {
    margin: 0;
    padding-bottom: 28px;
    border-bottom: 1px solid #eee;
}

#gform_18 {
    margin: 0;
}

#gform_18 .gform_description,
#gform_confirmation_wrapper_18 .gform_confirmation_message {
    display: inline-block;
    width: 85%;
    line-height: 1.6em;
    font-size: 18px;
}

#gform_18 .validation_error {
    display: none;
}

#gform_18 label {
    display: none;
}

#gform_18 .gform_validation_container {
    display: none;
}

#gform_18 .validation_message {
    color: rgb(255, 107, 77);
    margin: -10px 0 10px 0;
}

#gform_18 .gform_heading {

}

#gform_18 .gform_body li {
    margin: 0;
}

#gform_18 .gform_footer {

}

#gform_18 input[type="text"] {
    height: 33px !important;
    width: 85%;
    margin: 15px 0;
}

#gform_18 input[type="submit"] {
    margin: 0;
    padding: 8px 30px 11px 30px;
}





/**
 * Blog Overview list
 */

#latest {
    display: block;
    margin: 0;
    list-style: none;
}

#latest li {
    float: left;
    margin: 0 0 25px 0;
    padding: 0 0 25px 0;
    border-bottom: 1px solid #eee;
}

#latest a {
    font-size: 22px;
    line-height: 2em;
    font-weight: bold;
}

#latest img {
    float: left;
    width: 200px;
    height: 104px;
    margin: 8px 20px 0 0;
    color: transparent;
}

#latest p {
    overflow: hidden;
    margin: 0;
}

.meta {
    font-size: 18px;
    display: block;
    margin: 10px 0;
    padding: 3px 12px;
    border-left: 3px solid #00dc98;
}

#latest .meta {
    clear: both;
    margin: 5px 0 5px 0;
}

#latest .meta a {
    font-size: inherit;
    font-weight: normal;
}

#blog-post .meta {
    margin: 10px 0;
}

/**
 * Front page
 */

#front {
    height: 640px;
    box-sizing: border-box;
    padding: 0;
    background-color: #dedede;
    background-image: url('../img/brushed-gray-bg.jpg');
    background-size: 282px 282px;
}

#front .photo {
    margin: 0;
    height: 640px;
}

#front .avatar {
    display: none;
}

#front .optin {
    float: right;
    position: relative;
    margin: 0;
    height: 640px;
}

#front .optin .optin-container {
    position: relative;
    top: 50%;
    padding: 10px;
    transform: translateY(-50%);
    box-sizing: border-box;
}

#front .reinder-photo {
    position: relative;
    width: 100%;
    height: 100%;
}

#front .reinder-photo img {
    position: absolute;
    bottom: 0;
    right: 30px;
    height: 610px;
}

#front .reinder-photo span {
    position: absolute;
    bottom: 0;
    right: 20px;
    font-size: 16px;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 4px solid #00DC98;
    line-height: 1.5em;
}

#front h1 {
    font-weight: bold;
    color: #222;
    line-height: 1.4em;
    margin: 0 0 0 -2px;
}

#front p {
    float: left;
    margin: 15px 0;
    font-size: 22px;
}

#front a.button {
    margin: 10px 20px 10px 0;
}

#front a.button:last-of-type {
    margin-right: 0;
}

.ribbon {
    position: absolute;
    top: -20px;
    right: -62px;
    color: white;
    line-height: normal;
    padding: 3px 30px 3px 30px;
    background: #964DFF;
    text-transform: uppercase;
    transform: rotate(45deg);
    transform-origin: 0 0;
    font-weight: bold;
}

.ribbon-yellow { background: #FFB84D !important; }
.ribbon-orange { background: rgb(255, 107, 77) !important; }
.ribbon-blue { background: #08c !important; }
.ribbon-green { background: rgb(46, 161, 84) !important; }

/**
 * Testimonials
 */

#testimonials {
    padding: 20px 20px 0 20px;
}

#testimonials .span6 {
    margin: 0 10px 60px 10px;
}

#testimonials p {
    overflow: hidden;
    padding: 0 10px 0 30px;
    margin: 0;
}

#testimonials span {
    display: block;
    margin-top: 10px;
}

#testimonials .span12:not(.span-title) {
    margin: 0;
}

#testimonials .t-sprite {
    float: left;
    width: 100px;
    height: 100px;
    border-radius: 50px;
    background-image: url('../img/t-sprite.jpg');
    background-size: 400px 400px;
}

.t-peter {
    background-position: -0px -0px;
}

.t-dave {
    background-position: -100px -0px;
}

.t-cosmin {
    background-position: -200px -0px;
}

.t-anselme {
    background-position: -300px -0px;
}

.t-aiemaan {
    background-position: -400px -100px;
}

.t-vish {
    background-position: -500px -100px;
}

.t-eddie {
    background-position: -600px -100px;
}

.t-nadja {
    background-position: -700px -100px;
}

.t-priyank {
    background-position: -800px -200px;
}

.t-door {
    background-position: -900px -200px;
}

.t-rasmus {
    background-position: -1000px -200px;
}

.t-kevin {
    background-position: -1100px -200px;
}

.t-ann {
    background-position: -1200px -300px;
}

.t-shani {
    background-position: -1300px -300px;
}

.t-chris {
    background-position: -1400px -300px;
}

.t-ailin {
    background-position: -1500px -300px;
}

@media (-webkit-min-device-pixel-ratio: 2) {
    #testimonials .t-sprite {
        background-image: url('../img/t-sprite@2x.jpg');
    }
}

/**
 * Course Author
 */

#course-author {
    background-color: #00dc98;
    background-size: cover;
    background-position: left center;
    padding: 50px 0;
    color: white;
}

#course-author .span6 {
    float: right;
    padding-left: 10px;
    padding-right: 10px;
}

#course-author p {
    font-size: 20px;
}

#course-author h3 {
    color: white;
    margin-top: 0;
}

#course-author img {
    background: transparent;
}

/**
 * Pagination
 */

.pagination {
    float: left;
    clear: both;
    width: 100%;
    font-size: 18px;
    margin-bottom: 10px;
}

.pagination .next {
    text-align: right;
}

.pagination .prev {
    text-align: left;
}

/**
 * Footer
 */

#footer {
    background: #00dc98;
    color: white;
}

#footer .footer-column {
    float: left;
    margin: 10px;
    padding: 10px;
    box-sizing: border-box;
}

#footer p,
#footer a,
#footer .copyright {
    font-size: 18px;
}

#footer a {
    color: white;
    border: none;
    padding-bottom: 1px;
}

#footer a:hover, #footer a:focus {
    border-bottom: 1px solid rgba(255, 255, 255, 0.75);
}

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

#footer h6 {
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.75);
    font-size: 19px;
    font-weight: bold;
    color: white;
}

#footer .copyright {
    margin-left: 20px;
}

#footer .menu-small {
    display: block;
}

#footer .menu-small li {
    float: left;
    line-height: normal;
    margin: 0 10px;
}

/**
 * CTA Shortcode
 **/

.ctabox {
    margin: 25px 0 25px 0;
    overflow: auto;
    border-radius: 5px;
}

.ctabox .top,
.ctabox .bottom {
    float: left;
    width: 100%;
}

.ctabox .top {
    background: #141E39;
}

.ctabox .bottom {
    padding: 8px;
    box-sizing: border-box;
    background: #0B122B;
    text-align: center;
}

.ctabox .image,
.ctabox .text {
    box-sizing: border-box;
}

.ctabox .image {
    float: left;
    padding: 25px;
}

.ctabox .text {
    overflow: hidden;
    padding: 20px 15px 20px 0;
}

.ctabox h4,
.ctabox h5 {
    line-height: normal;
    margin: 0;
}

.ctabox h4 {
    font-size: 40px;
    color: white;
    margin: 0 0 5px 0 !important;
}

.ctabox h5 {
    color: #ccc;
    font-size: 28px;
}

.ctabox p {
    margin: 15px 0 0 0 !important;
    padding: 0 20px 0 0;
    overflow: hidden;
    color: #ccc;
    font-size: 20px !important;
}

.ctabox .image img {
    display: block;
    margin: 0 auto;
    background: none;
    border: none !important;
}

/**
 * Hero Form Box (Basics + On Page Optin)
 */

#hero-form {
    float: right;
    position: relative;
    padding: 20px 25px;
    background: #141E39;
    overflow: visible !important;
    box-sizing: border-box;
    border-radius: 5px;
}

#hero-form:before {
    position: absolute;
    display: block;
    content: '';
    background-image: url('../img/sprites.svg#lp-arrow');

    width: 120px;
    height: 70px;
    left: -140px;
    bottom: 0;
}

#hero-form.green:before {
    filter: hue-rotate(100deg);
}

#hero-form.blue:before {
    filter: hue-rotate(200deg);
}

#hero-form .ribbon-container {
    position: absolute;
    overflow: hidden;
    top: 0;
    right: 0;
    width: 90px;
    height: 90px;
}

#hero-form .ribbon {
    font-size: 18px;
}

#hero-form p {
    color: white;
    text-align: center;
    font-size: 22px;
    padding: 0 20px;
    margin: 0;
}

#hero-form ul, #hero-form li {
    list-style: none;
    padding: 0;
    margin: 0;
}

#hero-form p span {
    border-bottom: 2px solid #ddd;
}

#hero-form input[type="text"] {
    width: 100%;
    height: 40px;
    margin: 0 0 12px 0;
    padding: 5px;
    box-sizing: border-box;
    background: white;
    border: 1px solid #aaa;
    outline: none;
    text-indent: 5px;
    color: #222;
}

#hero-form input[type="text"]::placeholder,
#hero-form .gf_placeholder {
    color: #555;
    opacity: 1;
}

#hero-form select {
    width: 100%;
    height: 40px;
    margin: 0 0 12px 0;
    box-sizing: border-box;
    background: white;
    border: 1px solid #aaa;
    outline: none;
    color: #222;
}

#hero-form input[type=submit] {
    margin: 12px 10px 12px 10px;
    color: white;
    font-size: 22px;
    -webkit-appearance: button;
}

#hero-form .privacy {
    color: #ccc;
    font-size: 12px;
}

#hero-form .privacy,
#hero-form .privacy a,
#hero-form .privacy a:hover {
    color: #ccc;
    border-color: #ccc;
}

/**
 * On-page optin
 */

#hero-form.on-page {
    display: none;
    position: fixed;
    /*bottom: 0;*/
    bottom: calc(-100%);
    right: 0;
    margin: 0;
    border-radius: 0;
    border-top-left-radius: 5px;
    font-size: 18px;
    z-index: 9999;
}

#hero-form.on-page:before {
    display: none;
}

#hero-form .close {
    color: #ddd;
}

#hero-form.on-page p {
    font-size: 16px;
}

#hero-form.on-page p strong {
    font-size: 21px;
}

#hero-form.on-page .privacy {
    font-size: 12px;
}

#hero-form.on-page .privacy a,
#hero-form.on-page .privacy a:hover {
    border-bottom: 1px solid #ccc;
}

#hero-form.on-page .button {
    margin: 10px 0;
    width: 100%;
    font-size: 18px;
    padding: 8px 15px 11px 15px;
    border-radius: 5px;
    text-transform: uppercase;
}

#hero-form.on-page input[type="text"] {
    margin: 0;
}

#hero-form.on-page form {
    margin-top: 15px;
}

/**
 * Hero Form: Gravity Forms
 */

#hero-form form {
    margin: 20px 0 0 0;
    padding: 0;
    max-width: 100%;
}

#hero-form .gfield {
    max-width: 100%;
}

#hero-form .gform_hidden,
#hero-form .gform_validation_container {
    display: none;
}

#hero-form .gfield_label {
    display: none;
}

#hero-form .gform_footer {
    text-align: center;
}

#hero-form .validation_error,
.validation_message {
    width: 100%;
    margin: 10px 0;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    color: white;
    font-style: italic;
}

#hero-form .validation_message {
    margin: 0;
}

#hero-form .gfield_error {
    border: 2px solid rgb(255, 107, 77);
    padding: 10px !important;
    margin-bottom: 10px !important;
}

#hero-form .gfield_error select {
    margin-top: 10px;
}

/** Not in Use */

#hero-form .gfield_checkbox {
    margin: 0 !important;
    margin-bottom: 15px !important;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
}

#hero-form .gfield_checkbox label {
    color: #555;
    font-size: 16px;
}

#hero-form .gfield_checkbox label a {
    color: #08c;
    border-color: #08c;
}

#hero-form .gfield_checkbox input {
    margin: 0 10px;
}

#hero-form .gfield_checkbox label a:hover,
#hero-form .gfield_checkbox label a:active,
#hero-form .gfield_checkbox label a:focus {
    text-decoration: none;
    color: #005580;
    border-bottom: 1px solid #005580;
}

/**
 * Buttons
 */

a.button,
input[type=submit],
input[type=button] {
    position: relative;
    display: inline-block;
    padding: 12px 30px 15px 30px;
    margin: 10px;
    border: 0;
    outline: 0;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4em;
    text-decoration: none;
}

input[type=submit],
input[type=button] {
    -webkit-appearance: button;
}


a.button:not(.clear):hover {

}

.button:not(.clear) {
    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.5);
}

.button.clear {
    border-width: 3px;
    border-style: solid;
    background: rgba(0, 0, 0, 0.1);
    padding: 10px 20px 10px 20px;
}

.button.blue,
input[type=submit] {
    color: #ffffff;
    background: #0088cc;
}

.button.white {
    color: white;
}

.button.black {
    color: #424242;
    border-color: #424242;
}

.button.clear.blue {
    background: rgba(255, 255, 255, 0.375);
    border-color: #0088cc;
    color: #0088cc;
}

.button.green {
    background: rgb(46, 161, 84);
    color: white;
}

.button.orange {
    background: rgb(255, 107, 77);
    color: white;
}

.button .loading {
    width: 23px;
    height: 23px;
    background-image: url('../img/loading.svg');
    background-size: 32px 32px;
    background-position: center;
}

/***
 * Centered Column Page Template
 */

.column-page,
.showcase-page {
    min-height: calc(100vh - 179px);
}

#page-content.column-page p:first-of-type {
    font-weight: bold;
    font-size: 26px;
}

.column-page img {
    text-align: center;
    background: transparent;
}

.column-page .span8,
.showcase-page .span8 {
    margin: 0 auto;
    float: none;
}

.column-page .info,
.column-page .alert {
    padding: 30px;
    margin-top: 40px;
    background: white;
    box-sizing: border-box;
    text-align: left;
    border: 5px solid #ededed;
    font-size: 18px;
}

/**
 * Showcase
 */

#showcases {
    padding: 50px 20px;
}

#showcases p {
    font-size: 20px;
}

#showcases .divider .line {
    margin: 40px auto;
    width: 30%;
    height: 2px;
    background: #ecedef;
}

#showcases .headline {
    display: inline-block;
    font-size: 35px;
    margin: 0 0 25px 0;
    line-height: 1.4em;
    border-bottom: 3px solid rgb(0, 220, 152);
}

h1.showcase {
    display: block;
    line-height: 1.4em;
    margin: 0 0 15px 0;
    font-weight: normal;
}

h1.showcase span {
    padding-bottom: 3px;
    border-bottom: 3px solid rgb(0, 220, 152);
}

h1.showcase span:nth-child(2) {
    font-weight: bold;
}

.showcase-page p strong:first-of-type {
    font-size: 20px;
    line-height: 1.6em;
}

.showcase-page .span8 > p:nth-of-type(1) {
    float: right;
    width: 45%;
    margin: 7px 0 20px 20px;
}

/**
 * Reinder Widget
 */

#reinder-widget {
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid #eee;
}

#reinder-widget .hello {
    width: 100%;
    min-height: 75px;
    color: #111;
    margin-bottom: 20px;
}

#reinder-widget .hello img {
    float: left;
    width: 75px;
    height: 75px;
    border-radius: 100px;
    margin: 0 10px 0 -5px;
}

#reinder-widget .hello p {
    padding-top: 6px;
    overflow: hidden;
}

#reinder-widget > p {
    margin: 10px 0;
}

#reinder-widget ul {
    margin: 10px 0;
}

#reinder-widget li {
    margin: 10px 0;
}

#reinder-widget ul img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

#reinder-widget .gear:before,
#reinder-widget .swift:before,
#reinder-widget .crest:before {
    display: inline-block;
    content: '';
    width: 30px;
    height: 20px;
    vertical-align: middle;
    background-size: 20px 20px;
    background-position: left center;
    background-repeat: no-repeat;
}

#reinder-widget .gear:before { background-image: url('../img/sprites.svg#icon-gear'); }
#reinder-widget .swift:before { background-image: url('../img/sprites.svg#icon-swift'); }
#reinder-widget .crest:before { background-image: url('../img/sprites.svg#icon-crest'); }

/**
 * Carbon Ads
 */

.carbon-container {
    width: 100%;
    height: 100px;
}

#carbonads img {
    float: left;
    margin: 0 5px 0 0;
}

#carbonads a {
    display: block;
    color: #333 !important;
    font-size: 15px;
    line-height: 1.4em;
    border: none !important;
}

#carbonads .carbon-poweredby {
    color: #777 !important;
}

#blog-side .carbon-container {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
}

#blog-post .carbon-container {
    padding: 10px;
    margin-bottom: 20px;
    max-width: 400px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    height: 120px;
}

/**
 * Related Posts
 */

#related {
    position: fixed;
    display: none;
    bottom: 20px;
    left: 20px;
    right: 20px;
    min-width: 350px;
    max-width: 450px;
    padding: 10px;
    background: white;
    color: #333;
    border: 1px solid #eee;
    text-decoration: none;
    z-index: 999;
    border-radius: 2px;
}

#related a,
#related a:hover {
    display: block;
    color: #333;
    text-decoration: none;
}

#related img {
    float: left;
    width: 154px;
    height: 80px;
    margin-right: 10px;
}

#related span {
    text-transform: uppercase;
    margin-bottom: 5px;
    display: block;
    color: #444;
}

#related p {
    font-weight: bold;
    font-size: 18px;
    overflow: hidden;
    line-height: normal;
    max-height: 45px;
    margin: 0;
}

.close {
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 5px;
    right: 5px;
    cursor: pointer;
    color: #888;
    font-size: 22px;
    line-height: 23px;
    text-align: center;
}

.close:hover {
    color: #111;
}

/**
 * Contact Form
 */

#page-content .gform_wrapper {
    margin: 50px 0;
}

#page-content input[type="text"],
#page-content select {
    height: 35px;
}

#page-content input[type="text"] {
    text-indent: 4px;
}

#page-content input[type="submit"] {
    text-shadow: none;
}

/**
 * Sandbox
 */

#sandbox {
    min-height: calc(100vh - 183px);
}

#sandbox .span8 {
    float: none;
    margin: 0 auto;
}

#sandbox .sandbox {
    margin-top: 20px;
}

.sandbox .output textarea {
    font-size: 14px !important;
}

.ace_editor {
    font-size: 14px !important;
}

.sandbox .controls input[type="checkbox"] {
    margin: -2px 3px 0 0;
}

.sandbox .controls label {
    color: #888;
}

/**
 * Breadcrumbs
 */

#breadcrumbs {
    font-size: 14px !important;
    padding: 0;
    margin-bottom: 10px;
}

#breadcrumbs a,
#breadcrumbs a:hover,
#breadcrumbs a:active,
#breadcrumbs a:focus {
    border: none !important;
}

/***
 * RESPONSIVE
 **/

/** iPad Pro 10.5, 9.7, iPad mini 7.9 */
@media (min-width: 768px) and (max-width: 1200px)
{
    .ctabox h4 {
        font-size: 32px;
    }

    .ctabox h5 {
        font-size: 24px;
    }
}

/** iPad */
@media (min-width: 979px) and (max-width: 1024px)
{
    body > .main-container {
        overflow-x: hidden;
    }
}

/* Portrait tablet to landscape and desktop (iPad portrait, iPhone X landscape) */
@media (min-width: 768px) and (max-width: 979px)
{
    .logo {
        max-width: none !important;
        margin-left: 15px;
    }

    .menu li {
        float: none;
        display: inline-block;
    }

    .ctabox h4 {
        font-size: 28px;
    }

    .ctabox h5 {
        font-size: 21px;
    }

    .ctabox .image {
        width: 17%;
    }

    .ctabox .text {
        width: 83%;
    }

    #front .reinder-photo img {
        height: 450px;
    }

    #front .photo,
    #front .optin,
    #front {
        height: 470px;
    }

    #front .reinder-photo span {
        right: -20px;
        line-height: 1.3em;
    }

    #front h1 {
        font-size: 28px;
    }

    #front p {
        font-size: 20px;
    }

    #front .button {
        margin: 10px 10px 10px 0;
    }

    #front .button.full {
        padding: 12px 24px 15px 24px;
    }

    #front .button.clear {
        padding: 10px 15px 10px 15px;
    }

    #latest img {
        width: 150px;
        height: auto;
    }
}

/** iPhone X + iPad portrait, and lower (for header menu) */
@media (max-width: 979px)
{
    #header {
        padding: 5px;
    }

    #header .leftside-header {
        display: none;
    }

    #reinder-widget .hello p {
        font-size: 16px;
    }

    #mobile-menu {
        display: block;
    }

    #main {
        display: none;
    }

    #main li {
        float: right;
        clear: both;
    }

    .leftside-header {
        display: inline-block;
        width: 100%;
    }

    #header .span7 {
        width: 100%;
    }

    /*#main {
        display: inline-block;
        float: none;
        width: 100%;
        margin: 0 auto;
        white-space: nowrap;
    }*/

    #main li a {
        padding: 8px;
    }

    #front .optin {
        height: auto;
    }

    #front .optin .optin-container {
        position: relative;
        padding: 15px;
        height: auto;
        top: 0;
        transform: none;
        -webkit-transform: none;
    }

    #course-author {
        padding: 30px 10px;
    }

    #course-author p {
        font-size: 18px;
    }

    .column-page.centered {
        margin-top: 0;
    }

    .column-page h1 {
        font-size: 26px;
    }

    .column-page h2 {
        font-size: 22px;
    }

    .column-page h1:first-of-type {
        margin: 10px 0;
    }

    #page-content.column-page p:first-of-type {
        font-size: 22px;
    }

    .showcase-page img {
        width: 100% !important;
    }

    #testimonials .span6 {
        margin: 0 10px 60px 10px;
    }
}

/* Landscape iPhone 6 to portrait tablet */
@media (max-width: 767px)
{
    #blog-post h1 {
        font-size: 28px;
    }

    #header .menu li {
        margin: 0;
    }

    #page-content {
        padding: 15px;
    }

    section .span-title {
        margin: 0 0 10px 0;
    }

    section .span-title .title-line {
        display: none;
    }

    section .span-title h2 {
        margin: 5px 0;
        padding: 0 20px;
        font-size: 28px;
    }

    section.bundles .pull-right {
        display: none;
    }

    #latest img {
        float: left;
        width: 200px;
        height: auto;
        margin: 8px 15px 0 0;
    }

    .title {
        margin-bottom: 2em;
    }

    #page-content {
        text-align: left;
    }

    #blog-author img {
        width: 100px;
        height: 100px;
    }

    .ctabox {
        margin-left: -15px;
        margin-right: -15px;
    }

    .ctabox .image,
    .ctabox .text {
        padding: 15px;
    }

    .ctabox .image {
        padding-right: 0;
    }

    .ctabox h4 {
        font-size: 32px;
    }

    .ctabox h5 {
        font-size: 24px;
    }

    .ctabox .image img {
        height: 60px;
        width: 60px;
    }

    #course-author .span6 {
        padding: 0 20px;
    }

    #front {
        height: auto;
    }

    #front .photo {
        float: left;
        height: auto;
        margin-top: 20px;
    }

    #front .reinder-photo img {
        position: relative;
        max-height: none;
        width: 80%;
    }

    #front h1 {
        display: block;
    }

    #front .avatar {
        float: right;
        display: inline-block;
        width: 100px;
        height: 100px;
        padding: 5px;
        border-radius: 100px;
        background-image: url('../img/reinder-100@2x.jpg');
        background-size: 100% 100%;
    }

    #front .photo {
        display: none;
    }

    #blog-side {
        border-left: none;
    }

    #testimonials p {
        font-size: 17px;
    }

    #showcases {
        padding-bottom: 30px;
    }

    #showcases .span6 {
        margin-bottom: 30px;
    }

    #showcases .span5 {
        margin-bottom: 30px;
    }

    #footer .footer-column {
        width: 100%;
        margin: 0 0 25px 0;
    }

    #hero-form.on-page {
        border-top-left-radius: 0;
    }
}

@media (max-width: 667px)
{
    #front h1,
    #hero h1 {
        font-size: 32px;
    }

    #latest img {
        width: 150px;
        height: auto;
    }
}

/* Landscape iPhone5 and down */
@media (max-width: 568px)
{

}

/* Landscape phones and down */
@media (max-width: 480px)
{
    body > .main-container {
        overflow-x: hidden; /* strange width bug on iOS/Safari */
    }

    #latest img {
        display: none;
    }

    #blog-side {
        padding: 10px;
        border-left: none;
    }

    .ctabox {
        border-radius: 0;
    }

    .ctabox h4 {
        font-size: 22px;
    }

    .ctabox h5 {
        font-size: 18px;
    }

    .ctabox p {
        font-size: 18px !important;
    }

    #showcases .headline {
        font-size: 27px;
    }

    #testimonials .span6 {
        margin-left: 5px;
    }

    #testimonials p {
        padding-left: 15px;
    }

    #footer .copyright {
        margin: 0;
        text-align: center;
    }

    #footer .menu-small {
        float: none !important;
        text-align: center;
        margin-top: 10px;
    }

    #footer .menu-small li {
        display: inline-block;
        float: none;
        margin: 3px 10px;
    }
}

/* Portrait phones and down */
@media (max-width: 375px)
{
    #front .button {
        margin: 10px 10px 10px 0;
    }

    #front h1 {
        font-size: 24px !important;
    }

    #related {
        left: 10px;
        bottom: 10px;
        right: 10px;
        min-width: 320px;
    }

    #related span {
        font-size: 12px;
        margin: 0;
    }

    #related p {
        font-size: 16px;
        margin-bottom: 5px;
        max-height: 60px;
    }

    h1 {
        font-size: 30px !important;
    }

    h2 {
        font-size: 27px;
    }

    h3 {
        font-size: 24.5px;
    }

    h4 {
        font-size: 17.5px;
    }

    h5 {
        font-size: 14px;
    }

    h6 {
        font-size: 11.9px;
    }

    .leftside-header {
        display: inline-block;
        width: 100%;
        text-align: center;
    }

    #blog-side ul {
        list-style: none;
    }
}

/** iPhone 5, SE, 4 portrait */
@media (max-width: 320px)
{
    #front .button.full {
        padding: 12px 20px 15px 20px;
        margin-right: 10px;
    }

    #front .button.clear {
        padding: 10px 12px 10px 12px;
    }

    #header .logo {
        max-width: 260px;
    }

    #related {
        left: 5px;
        bottom: 5px;
        right: 5px;
        min-width: 280px;
    }

    #related span {
        font-size: 10px;
        margin: 0;
    }

    #related p {
        font-size: 14px;
        margin-bottom: 5px;
        max-height: 50px;
    }
}

/**
 * Swift Sandbox
 */

.sandbox,
.sandbox .container,
.sandbox .controls,
.sandbox .output,
.sandbox .ace_editor {
    float: left;
    width: 100%;
}

.sandbox {
    margin-bottom: 25px;
}

.sandbox .container {
    border: 10px solid #f5f5f5;
    padding: 0.5em;
    box-sizing: border-box;
}

.sandbox .ace_editor {
    height: 200px;
}

.sandbox .editor,
.sandbox .ace_editor,
.sandbox textarea {
    font-family: Menlo, Consolas, Monaco, "Courier New", monospace, serif;
    font-size: 14px;
    line-height: 1.6;
}

.sandbox .controls {
    margin: 15px 0;
}

.sandbox .controls input,
.sandbox .controls label {
    display: inline-block;
}

.sandbox .controls label {
    float: right;
    margin: 0;
}

.sandbox .checker {
    margin-right: 4px;
    height: 32px;
}

.sandbox textarea {
    width: calc(100% + 1px);
    height: 42px;
    max-width: calc(100% + 1px);
    min-height: 42px !important;
    margin: 0;
    padding: .7em;
    cursor: auto;
    white-space: pre;
    overflow: auto;
    font-weight: bold;
    background: white;
    border-radius: 0;
    border: 1px solid #ccc;
    box-shadow: none;
    box-sizing: border-box;
}

.sandbox-big textarea {
    height: 200px;
}

.sandbox input[type="button"] {
    position: relative;
    padding: .6em 1.2em .5em;
    margin: 0;
    background: #eee;

    text-shadow: 0 1px 0 rgba(255,255,255,.2);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.1);
    border-bottom: 4px solid rgba(0,0,0,.3);
    box-shadow:     inset 0 10px 30px rgba(255, 255, 255, .2),
                    inset 0 1px 0 0px rgba(255, 255, 255, .4),
                    0 1px 0 1px rgba(0, 0, 0, .1),
                    inset 0 -1px 0 0 rgba(255, 255, 255, .2);

    color: #666;
    font-size: .8em;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.2;

    outline: 0;
    -webkit-appearance: button;
    cursor: pointer;
    transition: none;
}

.ace_error_marker {
    border-bottom: 1px dashed #FF7F7F;
    position: absolute;
    border-radius: 0;
    box-sizing: border-box;
}

/**
 * Xcode / Swift
 */

.sandbox .ace_gutter {
    background: white;
    color: #a6a6a6;
}

.sandbox .ace_active-line {
    /*background: rgb(232, 242, 255) !important;*/
    background: rgba(0, 111, 255, 0.07) !important;
}

.sandbox .ace_gutter-active-line {
    background-color: rgba(232, 242, 255, 0.4);
    color: #444;
}

.ace_punctuation + .ace_identifier {
    color: #6943a4;
}

.ace_operator.ace_keyword {
    color: #000;
}

@media (max-width: 480px) {
    .ace_editor {
        width: 77%;
    }
}

/*!
 * Featherlight - ultra slim jQuery lightbox
 * Version 1.7.14 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
html.with-featherlight{overflow:hidden}.featherlight{display:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483647;text-align:center;white-space:nowrap;cursor:pointer;background:#333;background:rgba(0,0,0,0)}.featherlight:last-of-type{background:rgba(0,0,0,.8)}.featherlight:before{content:'';display:inline-block;height:100%;vertical-align:middle}.featherlight .featherlight-content{position:relative;text-align:left;vertical-align:middle;display:inline-block;overflow:auto;padding:25px 25px 0;border-bottom:25px solid transparent;margin-left:5%;margin-right:5%;max-height:95%;background:#fff;cursor:auto;white-space:normal}.featherlight .featherlight-inner{display:block}.featherlight link.featherlight-inner,.featherlight script.featherlight-inner,.featherlight style.featherlight-inner{display:none}.featherlight .featherlight-close-icon{position:absolute;z-index:9999;top:0;right:0;line-height:25px;width:25px;cursor:pointer;text-align:center;font-family:Arial,sans-serif;background:#fff;background:rgba(255,255,255,.3);color:#000;border:0;padding:0}.featherlight .featherlight-close-icon::-moz-focus-inner{border:0;padding:0}.featherlight .featherlight-image{width:100%}.featherlight-iframe .featherlight-content{border-bottom:0;padding:0;-webkit-overflow-scrolling:touch}.featherlight iframe{border:0}.featherlight *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}@media only screen and (max-width:1024px){.featherlight .featherlight-content{margin-left:0;margin-right:0;max-height:98%;padding:10px 10px 0;border-bottom:10px solid transparent}}@media print{html.with-featherlight>*>:not(.featherlight){display:none}}