:root {
    --primary-color: #f99918;
    --primary-color-hover: #ec8b0b;
    /* --secondary-color: #0e64e6; */
    --secondary-color: #1366e3;    
    --secondary-color-hover: #044ebd;
    --tertiary-color: #fd7d78;
    --faded-text: rgba(0,0,0,0.6);
    --drop-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.1);
    --drop-shadow-secondary: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
    --fonts: 'IBM Plex Sans', sans-serif;
}

body { font-family: var(--fonts); letter-spacing: 0.015em; padding: 0px; margin: 0px; font-size: 16px; background: #eee; font-weight: 400; overflow-y: scroll; padding-top: 80px; } 
body, html { width: 100%; height: 100%; }
* { box-sizing: border-box; }

nav { position: absolute; top: 0px; left: 0px; width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; box-shadow: 0px 0px 5px rgba(0,0,0,0.05);}
nav ul { list-style-type: none; display: flex; flex-direction: row; }
nav ul li a:link,nav ul li a:visited { color: rgba(0,0,0,0.6); text-decoration: none; margin-left: 20px; padding: 8px 0px; font-size: 1.0em; font-weight: 500; border-radius: 5px; /*transition: 0.5s ease color;*/ position: relative; }
body:not(.show-menu) nav ul li a:before,.draw-underline:before { content: ""; position: absolute; bottom: 0px; border-radius: 100px; opacity: 0; left: 50%; width: 0%; height: 3px; background: var(--primary-color); transition: 0.5s ease all; }
body:not(.show-menu) nav ul li a:not(.no-hover):hover:before,.draw-underline:hover:before { width: calc(100% + 4px); left: -2px; opacity: 1; }
body:not(.show-menu) nav ul li a:hover { color: rgba(0,0,0,1); transition: 0.5s ease all; }

nav { background: #fff; height: 80px; }
nav img { height: 40px !important; }
nav .logo, nav .logo > a { display: block; height: 40px; }
nav .logo { margin-top: 5px; }

nav ul li a#login-btn { color: rgba(0,0,0,0.5); border-color: rgba(0,0,0,0.5); }

#menu { display: none; color: #333; font-size: 2.0em; margin-top: 5px; cursor: pointer; padding: 20px; position: absolute; right: 0px; top: 0px; }
#menu:hover { color: #000; }
/* nav ul li a:hover { background: #fff; color: #333;  } */
#login-btn-wrapper { margin-left: 8px; padding-left: 0px; }
#login-btn {  border: 2px solid #fff; color: #fff; padding: 6px 13px; margin-left: 10px;}
#login-btn:hover { background: #fff; color: #000; }
#get-started-btn { color: #fff !important; margin-left: 20px; display: inline; font-weight: bold; padding-left: 15px; padding-right: 15px; }
.classic-btn,.classic-btn:visited { background: var(--primary-color); border: 2px solid var(--primary-color); color: #fff; padding: 6px 13px; text-decoration: none; border-radius: 5px; display: inline-block;  font-weight: normal; position: relative; }
.classic-btn:hover { background: var(--primary-color-hover); border-color: var(--primary-color-hover);  }
.classic-btn.larger { font-size: 1.1em; padding: 8px 17px; }

.light-button,.standard-button { display: inline-block; border: 2px solid rgba(255,255,255,0.7); color: #fff; text-decoration: none; width: 100%; padding: 8px 8px; text-align: center; font-weight: bold; border-radius: 5px; }

.classic-btn.alternate { background: transparent; color: #000; border-color: transparent; font-weight: normal; }
.classic-btn.alternate:hover { color: #333; }
.after:after { content: "\f105"; margin-left: 5px; font-family: "Font Awesome 5 Free"; font-weight: bold; }
.logo {  }
.logo img { height: 70px; }

header { display: flex; min-height: calc(100%); width: 100%; justify-content: center; align-items: center; }
header.header-1 { background: url("../img/banner.jpg") #333; background-size: cover; background-position: center; color: #fff;  }
.right-side { margin-left: 25%; display: flex; justify-content: center; align-items: center; flex-direction: column;  }
.bold { font-weight: bold;  }
.normal { font-weight: normal; }
.italics { font-style: italic; }
.center { text-align: center; }
.full-width { width: 100%; }
.underline { border-bottom: 4px solid var(--primary-color); }
.underline-normal { text-decoration: underline;}
.header-image { margin-bottom: 20px; }
.header-title { font-size: 3.5em; }
.header-description { font-size: 2.0em; }
.header-subdescription { font-size: 1.2em; }
.highlight { padding: 5px 8px; background: var(--primary-color); font-weight: bold; border-radius: 5px; display: inline-block; }
.highlight-3 { background: var(--primary-color); }
.highlight-2 { background: var(--secondary-color); }
.highlight-1 { background: var(--tertiary-color); }
.cta { font-size: 1.4em !important; font-weight: bold; }

.header-top { margin-top: 30px; }

.box-wrapper { display: flex; flex-direction: column; margin-top: 20px; }
.box-wrapper .box {  margin-top: 5px; }
.box-wrapper .box span {  display: flex; width: 100%; padding: 8px 15px; align-items: center; justify-content: center; font-size: 1.1em; font-weight: bold; text-transform: uppercase; border-radius: 5px; }

.box-wrapper .box:nth-child(3) { background: var(--primary-color);   }
.box-wrapper .box:nth-child(2) { background: var(--secondary-color);   }
.box-wrapper .box:nth-child(1) { background: var(--tertiary-color);   }

.lesson-list { list-style: none; margin: 0px; padding: 0px; margin-left: 0px; }
.lesson-list li { text-transform: lowercase; }
.lesson-list li::first-letter { text-transform: uppercase; }
.lesson-list > li { font-weight: 400; color: var(--faded-text); margin-bottom: 7px; position: relative; padding-left: 20px; }
.lesson-list > li:after {  position: absolute ;display: block; top: 0px; left: 0px; content: "\f441"; font-family: "Font Awesome 5 Free"; font-weight: bold; color: var(--secondary-color); padding-right: 10px; } 

.content-section { display: flex; width: 100%; padding: 80px 0px; justify-content: center; }
.content-section.alternate { background: #f7f7f7; }
.content-section.tertiary { background: #fff; }
.content-section.less-padding { padding: 60px 40px; padding-bottom: 0px !important; }
.content-section.less-padding.padding-bottom { padding-bottom: 60px !important; }
.content-section.less-padding .panels { margin-top: 0px; }
.extra-padding { padding: 140px 0px; }
.content-title,.content-subtitle { width: 100%; text-align: center; }
.content-title { font-weight: bold; font-size: 2.4em; }
.content-title-small { font-weight: bold; font-size: 1.7em; }
.content-subtitle {font-size: 1.2em; font-style: italic; font-weight: 400; color: var(--faded-text); }
.content-wrapper { display: block; width: 1200px; text-align: left; }
.content-wrapper.center { text-align: center; }
.space-between { display: flex; justify-content: space-between; flex-direction: row; }
.baseline { align-items: baseline; }

.content-section.dark { background: url("../img/chess_pieces.jpg") #333; background-size: 100%; background-position: center; background-attachment: fixed; color: #fff; }
.content-section.dark .content-subtitle { color: rgba(255,255,255,0.7); }

#chess-tournament-video { display: inline-block; width: 800px; height: 450px; background: url("../img/primary_chess.jpg"); background-size: 100%; }

.panels { display: flex; flex-direction: row; align-items: center; margin-top: 50px; }
.panels > div:nth-child(2) { padding-left: 40px; }
.panels .panels-icon img { height: 350px; }
.panels .panels-icon { }
.panel-beginner .selector-title { color: var(--tertiary-color); font-size: 2.0em; }
.panel-beginner .selector-subtitle { color: rgba(0,0,0,0.5); }
.panel-beginner .standard-button { background: var(--tertiary-color); border: 0px; display: inline-block; width: auto; padding: 10px 30px; }
.panel-beginner ul li:after {  color: var(--tertiary-color); }

.panel-intermediate .selector-title { color: var(--secondary-color); font-size: 2.0em; }
.panel-intermediate .selector-subtitle { color: rgba(0,0,0,0.5); }
.panel-intermediate .standard-button { background: var(--secondary-color); border: 0px; display: inline-block; width: auto; padding: 10px 30px; }
.panel-intermediate ul li:after {  color: var(--secondary-color); }

.panel-advanced .selector-title { color: var(--primary-color); font-size: 2.0em; }
.panel-advanced .selector-subtitle { color: rgba(0,0,0,0.5); }
.panel-advanced .standard-button { background: var(--primary-color); border: 0px; display: inline-block; width: auto; padding: 10px 30px; }
.panel-advanced ul li:after {  color: var(--primary-color); }

.panels-icon + .lesson-content { margin-left: 40px; }
.lesson-content + .panels-icon  { margin-left: 40px; }
.panels-lessons .lesson-content { padding: 40px; background: #fff; border-radius: 10px; box-shadow: 0px 0px 20px rgba(0,0,0,0.05); position: relative; }
.panels-lessons .lesson-content:after {  }

.triangle-with-shadow { width: 100px; height: 100px; position: relative; overflow: hidden; box-shadow: 0 6px 10px -17px rgba(0, 0, 0, 0.05); }
.triangle-with-shadow:after { content: ""; position: absolute; width: 50px; height: 50px; background: #fff; transform: rotate(45deg); top: 75px; left: 25px; box-shadow: -1px -1px 10px -2px rgba(0, 0, 0, 0.05); }
.triangle-with-shadow:hover, .triangle-with-shadow:hover:after { box-shadow: none; }

.testimonial { display: flex; flex-direction: column; text-align: center; padding: 20px; background: #fff; margin-top: 20px; border-radius: 10px; box-shadow: var(--drop-shadow-secondary); }
.testimonial-image img { width: 100px; border-radius: 150px; }
.testimonial-name { font-size: 1.2em; font-weight: bold; }
.testimonial-text { font-size: 1.0em; font-style: italic; }

.lesson-content .triangle-with-shadow  { position: absolute; right: -100px; top: 30px; transform: rotate(90deg); }
.panels-icon + .lesson-content .triangle-with-shadow { position: absolute; right: auto; left: -100px; transform: rotate(-90deg); }
.standard-img { border: 10px solid #fff;  }
.teaching-image { width: 467px; }
.teaching-image img { width: 100%; display: block;  }
.teaching-image,.teaching-image img { border-radius: 50px;  box-shadow: var(--drop-shadow); border-top-left-radius: 0px; border-bottom-right-radius: 0px;  }
.quote { font-size: 1.8em; font-style: italic; display: inline-block; color: var(--secondary-color); font-weight: normal; }
p { font-weight: 400; font-size: 1.1em; color: var(--faded-text); }
p + .quote { margin-top: 20px; }
.checklist { display: flex; justify-content: row; flex-wrap: wrap; list-style: none; padding: 0px; margin: 0px; }
.checklist > li { width: 33%; font-weight: 400; color: var(--faded-text); margin-bottom: 10px; }
.checklist > li:before { content: "\f441"; font-family: "Font Awesome 5 Free"; font-weight: bold; color: var(--secondary-color); padding-right: 10px; } 
/* .checklist > li:nth-child(3n+1):before { content: "\f43f"; }
.checklist > li:nth-child(3n+2):before { content: "\f441"; }
.checklist > li:nth-child(3n):before { content: "\f447"; } */

.checklist.alternate > li { width: 100%; color: #fff; }
.checklist.alternate > li:before { color: #fff; content: "" !important; font-family: ""; margin: 0px; padding: 0px; }
.checklist.alternate i { width: 30px; text-align: center; }

.skill-selector { display: flex; flex-direction: row; justify-content: space-between; }
.skill-selector > div { width: 31%; padding: 40px; border-radius: 10px; color: #fff; }
.skill-selector:not(.price-selector) > div:nth-child(3) { background: var(--primary-color); }
.skill-selector:not(.price-selector) > div:nth-child(2) { background: var(--secondary-color); }
.skill-selector:not(.price-selector) > div:nth-child(1) { background: var(--tertiary-color); }

/* .price-selector .selector-title { font-weight: bold; }
.price-selector > div { box-shadow: 0px 0px 20px rgba(0,0,0,0.05); }
.price-selector > div:nth-child(1) { background: #fff; color: rgba(0,0,0,0.8); }
.price-selector > div:nth-child(2) .selector-title { color: rgba(255,255,255,0.7); }
.price-selector > div:nth-child(3) .selector-title { color: rgba(255,255,255,0.8); }
.price-selector > div:nth-child(1) a {  color: rgba(0,0,0,0.8);}
.price-selector > div:nth-child(2) { background: #3b3b3b;  }
.price-selector > div:nth-child(3) { background: var(--primary-color); color: #fff;  }
.price-selector > div a { border: 0px; padding: 12px; }
.price-selector > div:nth-child(1) a { background: #333; color: #fff; }
.price-selector > div:nth-child(1) .price-list { border-color: rgba(0,0,0,0.1); }
.price-selector > div:nth-child(2) .price-list { border-color: rgba(255,255,255,0.1); }
.price-selector > div:nth-child(3) .price-list { border-color: rgba(255,255,255,0.2); }
.price-selector > div:nth-child(2) a { background: #fff; color: #000;  }
.price-selector > div:nth-child(3) a { background: #ffe8d1; color: #000; } */

.price-selector > div { color: #000; background: #eee;  box-shadow: 0px 0px 20px rgba(0,0,0,0.05); display: flex; justify-content: center; align-items: center; flex-direction: column; }
.price-selector .selector-title { font-weight: bold; margin-top: 20px; }
.price-selector { justify-content: center; }
.price-selector > div:nth-child(1) .selector-title { color: var(--primary-color); }
.price-selector > div:nth-child(2) .selector-title { color: var(--tertiary-color); }
.price-selector > div:nth-child(3) .selector-title { color: var(--secondary-color); }
.price-selector .selector-subtitle { color: rgba(0,0,0,0.7); font-weight: 400; }
.price-selector > div:nth-child(1) { background: #fffcf4; border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.price-selector > div:nth-child(2) { background: #fff; z-index: 2; border-radius: 0px; }
.price-selector > div:nth-child(3) { background: #f4fbff; border-top-left-radius: 0px; border-bottom-left-radius: 0px;  }
.price-selector > div { color: rgba(0,0,0,0.7); }
.price-selector > div a { padding: 10px 0px; }
.price-selector > div:nth-child(1) a { background: var(--primary-color); border-color: var(--primary-color); color: #fff;  }
.price-selector > div:nth-child(2) a { background: var(--tertiary-color); border-color: var(--tertiary-color); color: #fff;  }
.price-selector > div:nth-child(3) a { background: var(--secondary-color); border-color: var(--secondary-color); color: #fff;  }


.price-selector img { width: 150px; }

.price-list { border-top: 1px solid rgba(0,0,0,0.1); list-style-type: none; margin: 0px; padding: 0px; margin-top: 40px; padding-top: 40px;  }
.price-list i { width: 25px; margin-right: 3px; }
.price-list li { margin-bottom: 8px; text-align: center; }

.selector-title { font-size: 1.8em; font-weight: normal; }
.selector-subtitle { font-size: 1.2em; font-weight: normal; }

.margin-top-small { margin-top: 10px; }
.margin-top-medium { margin-top: 20px; }
.margin-top { margin-top: 50px; }
.margin-top-extra { margin-top: 80px; }

footer { background: var(--secondary-color); color: #fff; }
footer .content-subtitle { display: inline-block; color: rgba(255,255,255,0.8); max-width: 800px;  }
footer .content-subtitle { }
.footer-line { width: 100%; border-top: 2px solid rgba(255,255,255,0.1); }
.footer-text { color: rgba(255,255,255,0.5); }

.two-image-wrapper { display:flex; width: 100%; min-height: 680px; position: relative; } 
.two-image-wrapper img:nth-child(1) { position: absolute; right: 35%; width: 50%; transform: translateX(50%); z-index: 1; }
.two-image-wrapper img:nth-child(2) { position: absolute; left: 35%; width: 50%; top: 100px; transform: translateX(-50%); z-index: 0;  }
.two-image-wrapper > * { border-radius: 5px; }
.profile-text-wrapper { width: 40%; background: #ffedd6; padding: 40px; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; top: 300px;  }
.profile-text-wrapper h3,.profile-text-wrapper h2 { padding: 0px; margin: 0px;  margin-bottom: 15px; }
.profile-text-wrapper h3 { text-transform: uppercase; font-weight: 400; }
.profile-text-wrapper h2 {  }
.profile-text-wrapper p { line-height: 1.65; }

.text-image-wrapper { display: flex; padding: 0px 100px; flex-wrap: wrap; align-items: start; }
.text-image-wrapper > * { width: 50%; border-radius: 5px; }
.text-image-wrapper > .text-image-content { background: #fff; padding: 40px; margin-top: 60px; }
.text-image-wrapper > img {  }
.text-image-content ul { padding: 0px; margin: 0px; list-style-type: none; }
.text-image-content li { line-height: 1.65; letter-spacing: 0.02; margin-bottom: 10px; color: rgba(0,0,0,0.7);  }
.text-image-content li:before { content: "\f5a2"; font-family: "Font Awesome 5 Free"; font-weight: bold; color: var(--primary-color); margin-right: 5px; }
.text-image-wrapper { margin-bottom: 100px; }
.text-image-wrapper h3.light { text-transform: uppercase; font-weight: 400; }
.content-wrapper .text-image-wrapper:last-child { margin-bottom: 0px; }

.panel-splitter { display: flex; min-height: 100%; position: relative; }
.panel-image.chess-pieces { background: url("../img/zoom.jpg"); background-size: cover; background-position: center; }
.panel-image { width: 60%; }
.panel-content { width: 40%; padding: 40px; display: flex; justify-content: center; align-items: center; }

.form-wrapper { width: 100%; padding: 40px; background: #fff; border-radius: 10px; }
.form-wrapper h2 { padding: 0px; margin: 0px; }
form input,form select { width: 100%; padding: 15px; font-size: 1.1em; margin-bottom: 20px; border-radius: 5px; border: 1px solid #ddd; font-weight: bold; }
form input[type="submit"] { background: var(--secondary-color); color: #fff; margin-bottom: 0px; cursor: pointer; border: 0px; }
form input[type="submit"]:hover,form input[type="submit"]:focus { border: 0px; background: var(--secondary-color-hover); }
.form-wrapper select { font-weight: normal; }
.form-wrapper input:focus,.form-wrapper input:hover { border: 1px solid var(--primary-color); }
.form-wrapper input::placeholder { font-weight: normal; color: rgba(0,0,0,0.4); }

.quote-text { color: #fff; font-size: 1.3em; position: relative; position: absolute; left: 40px; top: 100px; max-width: 500px; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); }
.quote-text:before { content: "\f10d"; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 2.0em; position: absolute; top: -50px; }
.quote-text:after { content: "\f10e"; font-family: "Font Awesome 5 Free"; font-weight: bold; font-size: 0.5em; vertical-align: top; margin-left: 5px; }
.quote-author { position: absolute; text-transform: uppercase; font-size: 0.7em; margin-top: 10px; }

.text-center,.content-wrapper.text-center { text-align: center; }

.spacer { display: flex; width: 100%; border-top: 1px solid rgba(0,0,0,0.1); margin-top: 20px; margin-bottom: 35px !important; height: 0px; }

.attention-box-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; flex-direction: row; }
.attention-box form { display: block; width: 100%; }
.attention-box { align-self: baseline; box-shadow: var(--drop-shadow-secondary); border-radius: 5px; width: 48%; padding: 50px; background: #fff; display: inline-flex; justify-content: center; align-items: center;  flex-direction: column;}
.attention-box-wrapper > div:nth-child(1) { width: 30%; }
.attention-box-wrapper > div:nth-child(2) { width: 68%; }
.attention-box h1 { margin-bottom: 0px; padding-bottom: 0px; }
.attention-box div { width: 100%; margin-bottom: 0px; }
.attention-box input,.attention-box textarea { padding: 15px; font-size: 1.1em; font-family: var(--fonts); border: 1px solid rgba(0,0,0,0.15); width: 100%; margin-bottom: 10px; }
.attention-box input::placeholder,.attention-box textarea::placeholder { font-weight: normal; color: rgba(0,0,0,0.4); }
.attention-box input:focus,.attention-box textarea:focus { border-color: var(--primary-color); font-weight: bold; }
.attention-box input[type="submit"] { }
.attention-box p { padding: 0px; margin: 0px; margin-bottom: 20px; margin-top: 5px; }
.attention-box img { width: 100px; }

#address { position: fixed; right: 9999999px; }

/* Mobile CSS */
@media (max-width: 1400px) {	
    .content-section { width: 100%; padding-right: 40px; padding-left: 40px; }
    .content-wrapper { width: 100%; }
    nav { padding: 0px 20px; }

}

@media (max-width: 1200px) {	
    .checklist li { width: 50%; }    
    .youtube-wrapper > iframe { width: 100%; }
    .teaching-image { width: 300px; height: auto; background: transparent; }

}

@media (max-width: 800px) {	
    .checklist li { width: 100%; }
    .skill-selector { flex-direction: column; }
    .skill-selector > div { width: 100%; margin-top: 10px; }    
    .right-side { width: 100%; margin: 0px; padding: 20px; text-align: center !important; }
    .header-title { font-size: 2.5em; }
    header.header-1 { min-height: auto; padding: 200px 0px; background-position: 30%; }
    
    nav { }
    nav ul { display: none; }
    nav #menu { display: block; font-size: 1.5em; }
    nav .logo { margin-top: 0px; }
    .panels { flex-direction: column; }
    .panels > div { width: 100%; }
    .panels > div:first-child { margin-bottom: 50px; }
    .panels:not(.panels-lessons) > div:last-child { margin: 0px; padding: 0px; }    
    .panels.panels-lessons > div { margin: 0px; margin-bottom: 20px; }
    .panels .panels-icon { order: 1; text-align: center; }
    .panels .lesson-content { order: 2; }

    .teaching-image { width: 100%; height: auto; background: transparent; }
    .teaching-image img { display: block; width: 100%; }
    .footer-text > div { flex-direction: column; align-items: center; }
    .footer-text .logo { margin-bottom: 10px; }

    nav { position: fixed; z-index: 10; }
    body nav ul { display: none; position: fixed; left: 0px; top: 80px; height: calc(100% - 80px); width: 100%; background: #eee; z-index: 10; margin: 0px; padding: 20px; overflow-y: auto; padding-bottom: 100px; }    
    body.show-menu nav ul { display: block; }
    body nav ul li { width: 100%; display: flex; align-items: center; justify-content: flex-start; }
    body nav ul li a:link { display: flex !important; height: 100%; width: 100%; align-items: center; justify-content: flex-start; margin: 0px !important; padding: 15px 20px !important; color: #333 !important; border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 1.2em; font-weight: 400; border-radius: 0px; }
    body nav ul li a:link:not(#get-started-btn):hover { background: rgba(0,0,0,0.05); }
    body nav ul li:first-child { margin-top: 0px; }

    .triangle-with-shadow { display: none; }

    .two-image-wrapper { min-height: 0px; display: flex; flex-direction: column; } 
    .two-image-wrapper > * { position: relative !important; margin-bottom: 20px; top: 0px; }
    .profile-text-wrapper { width: 100%; margin-bottom: 0px; }
    .two-image-wrapper > img:nth-child(1) { width: 100%; transform: translateX(0); right: 0px;}
    .two-image-wrapper > img:nth-child(2) { display: none; }
    .content-section { }

    .text-image-wrapper { padding: 0px; display: flex; flex-direction: column; }
    .text-image-wrapper > * { width: 100% !important;  }
    .text-image-wrapper > img { order: 1; margin: 0px; margin-bottom: 20px; }
    .text-image-wrapper > div { order: 2; margin: 0px !important; }

    .price-selector > div { border-radius: 10px !important; }

    .panel-splitter .panel-image { display: none; }
    .panel-splitter .panel-content { width: 100%; }

    .panels .panels-icon img { height: auto; width: 100%; max-width: 300px;}

    .attention-box { width: 100% !important; }
    .attention-box-wrapper > div:nth-child(1) { margin-bottom: 20px; }
}


@media (max-width: 800px) {	

}