* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', 'Arial', sans-serif;
    color: #212121;
    scroll-behavior: smooth;
    cursor: default;
}

h1 {
    font-family: 'Roboto Condensed', 'Arial', sans-serif;
    text-transform: uppercase;
}

a {
    cursor: pointer;
}

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

/* HEADER */
header {
    z-index: 100;
    height: 24px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(102, 202, 242, 0.8);
    font-family: 'Roboto Condensed', 'Arial', sans-serif;
    font-size: 14px;
    font-style: oblique;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

header span {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-top: 4px;
  animation: fade 12s infinite;
  opacity: 0;
}

header span:nth-child(1) {
  animation-delay: 0s;
}
header span:nth-child(2) {
  animation-delay: 4s;
}
header span:nth-child(3) {
  animation-delay: 8s;
}

@keyframes fade {
  0%   { opacity: 0; }
  5%   { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0; }
  100% { opacity: 0; }
}
/* HEADER */

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

/* SECTION WELCOME */
section.welcome {
    height: 100vh;
    position: relative;
    background-image: linear-gradient(#66caf2, #333333);
    text-align: center;
}

section.welcome div.text {
    position: absolute;
}

section.welcome div.text h1 {
    font-size: 26px;
    padding-top: 30px;
}

section.welcome div.text h2 {
    padding-top: 8px;
    font-size: 18px;
}

section.welcome div.text p {
    font-size: 14px;
}

section.welcome img {
    height: 41vh;
    position: absolute;
    bottom: 21%;
    left: 50%;
    transform: translateX(-50%);
}

section.welcome div.buttons {
    position: absolute;
    bottom: 5px;
}

button {
    height: 33px;
    width: 40vw;
    margin: 10px;
    background: linear-gradient(135deg, #009bde, #76c9ea);
    border-radius: 7px;
    border: none;
    font-size: 12px;
    text-transform: uppercase;
    text-align: center;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 1.5px;
    transition: 0.5s;
}

@media (min-width: 360px) and (orientation: portrait) {
    header {
        font-size: 16px;
    }

    section.welcome div.text h1 {
        font-size: 30px;
        padding-top: 33px;
    }
    
    section.welcome div.text h2 {
        font-size: 20px;
    }

    section.welcome div.text p {
        font-size: 15px;
    }

    section.welcome img {
        height: 43vh;
    }

    section.welcome div.buttons button {
        height: 41px;
        font-size: 15px;
    }
}

@media (min-width: 375px) and (orientation: portrait) {
    section.welcome div.text h1 {
        font-size: 32px;
        padding-top: 36px;
    }
}

@media (min-width: 390px) and (orientation: portrait) {
    header {
        height: 26px;
        font-size: 18px;
    }

    section.welcome div.text h1 {
        font-size: 35px;
    }

    section.welcome div.text h2 {
        font-size: 23px;
        padding-top: 12px;
    }

    section.welcome div.text p {
        font-size: 17px;
    }

    section.welcome img {
        height: 45vh;
    }

    section.welcome div.buttons button {
        height: 48px;
        font-size: 18px;
    }
}

@media (min-width: 430px) and (orientation: portrait) {
    header {
        height: 29px;
        font-size: 21px;
    }

    section.welcome div.text h1 {
        font-size: 37px;
    }

    section.welcome div.text h2 {
        font-size: 25px;
        padding-top: 14px;
    }

    section.welcome div.text p {
        font-size: 19px;
    }

    section.welcome img {
        height: 45vh;
    }

    section.welcome div.buttons button {
        height: 52px;
        font-size: 20px;
    }
}

@media (max-width: 360px) and (min-height: 800px) and (orientation: portrait) {
    header {
        height: 27px;
        font-size: 16px;
    }

    section.welcome div.text h1 {
        font-size: 37px;
        padding-top: 40px;
    }

    section.welcome div.text h2 {
        font-size: 25px;
        padding-top: 14px;
    }

    section.welcome div.text p {
        font-size: 20px;
        padding-top: 5px;
    }

    section.welcome img {
        height: 38vh;
    }

    section.welcome div.buttons button {
        height: 52px;
        font-size: 20px;
    }
}

@media (min-width: 625px) and (orientation: portrait) {
    header {
        height: 30px;
        font-size: 22px;
    }

    section.welcome div.text h1 {
        font-size: 58px;
        padding-top: 44px;
    }

    section.welcome div.text h2 {
        font-size: 38px;
        padding-top: 16px;
    }

    section.welcome div.text p {
        font-size: 26px;
        padding-top: 9px;
    }

    section.welcome img {
        height: 44vh;
    }

    section.welcome div.buttons button {
        height: 58px;
        font-size: 28px;
    }
}

@media (min-width: 1024px) and (orientation: portrait) {
    header {
        height: 40px;
        font-size: 28px;
    }

    section.welcome div.text h1 {
        font-size: 90px;
        padding-top: 52px;
    }

    section.welcome div.text h2 {
        font-size: 45px;
        padding-top: 16px;
    }

    section.welcome div.text p {
        font-size: 32px;
        padding-top: 9px;
    }

    section.welcome img {
        height: 40vh;
        bottom: 220px;
    }

    section.welcome div.buttons button {
        height: 65px;
        font-size: 32px;
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    header {
        height: 22px;
        font-size: 15px;
    }

    section.welcome div.text {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    section.welcome div.text h1 {
        font-size: 25px;
        padding-top: 35px;
    }

    section.welcome div.text h2 {
        font-size: 16px;
        padding-top: 5px;
    }

    section.welcome div.text p {
        font-size: 13px;
    }

    section.welcome img {
        height: 40vh;
        bottom: 90px;
    }

    section.welcome div.buttons button {
        height: 20px;
        font-size: 13px;
    }
}

@media (max-height: 320px) and (orientation: landscape) {
    section.welcome div.text h1 {
        padding-top: 30px;
    }

    section.welcome img {
        bottom: 78px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    header {
        height: 32px;
        font-size: 22px;
    }

    section.welcome div.text {
        left: 40px;
        top: 78px;
        width: 50vw;
    }

    section.welcome div.text h1 {
        font-size: 50px;
        padding-top: 35px;
    }

    section.welcome div.text h2 {
        font-size: 38px;
        padding-top: 12px;
    }

    section.welcome div.text p {
        font-size: 22px;
        padding-top: 12px;
    }

    section.welcome img {
        height: 53vh;
        top: 85px;
        transform: translateX(15%);
    }

    section.welcome div.buttons {
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
    }

    section.welcome div.buttons button {
        height: 50px;
        width: 20vw;
        font-size: 24px;
        margin-bottom: 48px;
    }

    section.welcome div.buttons button:hover {
        height: 58px;
        font-size: 28px;
        cursor: pointer;
    }
}

@media (min-width: 1366px) {
    header {
        height: 48px;
        font-size: 32px;
    }

    section.welcome div.text h1 {
        font-size: 65px;
    }

    section.welcome div.text h2 {
        font-size: 48px;
    }

    section.welcome div.text p {
        font-size: 28px;
    }

    section.welcome img {
        height: 53vh;
        top: 90px;
    }

    section.welcome div.buttons button {
        height: 70px;
        width: 20vw;
        font-size: 32px;
        margin-bottom: 55px;
    }

    section.welcome div.buttons button:hover {
        height: 80px;
        font-size: 38px;
    }
}

@media (min-width: 1440px) {
    section.welcome div.text h1 {
        font-size: 80px;
    }

    section.welcome div.text h2 {
        font-size: 48px;
    }

    section.welcome div.text p {
        font-size: 28px;
    }

    section.welcome img {
        height: 60vh;
        top: 105px;
        transform: translateX(34%);
    }
}

@media (min-width: 1982px) {
    section.welcome div.text h1 {
        font-size: 100px;
    }
}
/* SECTION WELCOME */

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

/* SECTION ABOUT */
section.about, section.lessons, section.offer, section.contact {
    position: relative;
    background-image: linear-gradient(#48afd8, #66caf2);
    text-align: center;
    font-size: 100px;
}

section>h1 {
    padding: 3px 0;
    font-size: 0.24em;
    background-color: rgba(255, 255, 255, 0.65);
}

section.about p {
    padding: 6px 21px;
}

section.about p.fst {
    font-size: 0.16em;
    font-weight: 500;
}

section.about p.sec {
    font-size: 0.15em;
}

section.about div.args {
    padding: 6px 40px;
    font-size: 0.145em;
}

section.about div.args p {
    padding: 6px 0;
    font-weight: 500;
    text-align: left;
}

section.about img {
    max-width: 90vw;
    height: 65vh;
    border-radius: 12px;
    font-size: 0.15em;
}

@media (min-width: 360px) and (orientation: portrait) {
    section>h1 {
        font-size: 0.28em;
    }

    section.about p.fst {
        font-size: 0.18em;
    }

    section.about p.sec {
        font-size: 0.17em;
    }

    section.about div.args {
        padding: 6px 45px;
        font-size: 0.16em;
    }

    section.about img {
        height: 67.5vh;
    }
}

@media (min-width: 375px) and (orientation: portrait) {
    section.about div.args {
        padding: 6px 55px;
    }
}

@media (min-height: 740px) and (orientation: portrait) {
    section.about img {
        height: 55vh;
    }
}

@media (min-height: 880px) and (orientation: portrait) {
    section.about p.fst {
        font-size: 0.21em;
    }

    section.about p.sec {
        font-size: 0.19em;
    }

    section.about div.args {
        padding: 6px 30px;
        font-size: 0.17em;
    }
}

@media (min-width: 410px) and (orientation: portrait) {
    section>h1 {
        font-size: 0.3em;
    }

    section.about p.fst {
        font-size: 0.19em;
    }

    section.about p.sec {
        font-size: 0.18em;
    }

    section.about div.args {
        padding: 6px 67px;
        font-size: 0.16em;
    }
}

@media (min-width: 430px) and (orientation: portrait) {
    section.about div.args {
        padding: 6px 69px;
        font-size: 0.17em;
    }
}

@media (orientation: landscape) {
    section>h1 {
        font-size: 0.22em;
    }

    section.about p.fst {
        font-size: 0.16em;
    }

    section.about p.sec {
        font-size: 0.15em;
    }

    section.about div.args {
        padding: 15px 50px;
        font-size: 0.15em;
    }

    section.about div.args p {
        padding-bottom: 10px;
    }

    section.about div.args p:last-child {
        padding-bottom: 55px;
    }

    section.about img {
        height: 60vh;
        position: absolute;
        bottom: 10px;
        right: 57px;
    }
}

@media (min-width: 640px) and (orientation: landscape) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 90px;
    }

    section.about div.args {
        padding: 20px 70px;
    }

    section.about div.args p {
        padding-bottom: 10px;
    }

    section.about div.args p:last-child {
        padding-bottom: 75px;
    }

    section.about img {
        height: 220px;
        position: absolute;
        bottom: 8px;
        right: 82px;
    }
}

@media (min-width: 730px) and (orientation: landscape) {
    section.about div.args {
        padding: 20px 110px;
    }

    section.about img {
        right: 120px;
    }
}

@media (min-width: 810px) and (orientation: landscape) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 100px;
    }

    section.about div.args {
        padding: 20px 140px;
    }

    section.about img {
        right: 200px;
    }
}

@media (min-width: 900px) and (orientation: landscape) {
    section.about div.args {
        padding: 20px 180px;
    }

    section.about img {
        right: 240px;
    }
}

@media (min-width: 600px) and (orientation: portrait) {
    section.about div.args {
        margin-left: 150px;
    }
}

@media (min-width: 760px) and (orientation: portrait) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 110px;
    }

    section.about div.args {
        margin-left: 170px;
    }
}

@media (min-width: 850px) and (orientation: portrait) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 130px;
    }

    section.about div.args {
        margin-left: 250px;
    }
}

@media (min-width: 1024px) and (orientation: landscape) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 130px;
    }

    section.about p {
        padding-left: 60px;
        padding-right: 60px;
    }

    section.about div.args p:last-child {
        padding-bottom: 105px;
    }

    section.about img {
        height: 277px;
        right: 240px;
    }
}

@media (min-width: 1110px) and (orientation: landscape) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 134px;
    }

    section.about p {
        padding-left: 70px;
        padding-right: 70px;
    }

    section.about div.args p:last-child {
        padding-bottom: 125px;
    }

    section.about img {
        height: 300px;
        right: 265px;
    }
}

@media (min-width: 1280px) and (orientation: landscape) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 160px;
    }

    section.about p {
        padding-left: 90px;
        padding-right: 90px;
    }

    section.about div.args {
        padding-left: 285px;
    }

    section.about div.args p:last-child {
        padding-bottom: 160px;
    }

    section.about img {
        height: 350px;
        right: 285px;
    }
}

@media (min-width: 1440px) and (orientation: landscape) {
    section.about, section.lessons, section.offer, section.contact {
        font-size: 180px;
    }

    section.about p {
        padding-left: 180px;
        padding-right: 180px;
    }

    section.about div.args {
        padding-top: 80px;
        padding-left: 250px;
    }

    section.about div.args p {
        padding-top: 24px;
    }

    section.about div.args p:last-child {
        padding-bottom: 170px;
    }

    section.about img {
        height: 500px;
        right: 250px;
    }
}

@media (min-width: 1580px) and (orientation: landscape) {
    section.about div.args {
        padding-left: 350px;
    }

    section.about img {
        right: 350px;
    }
}

@media (min-width: 1760px) and (orientation: landscape) {
    section.about div.args {
        padding-left: 450px;
    }

    section.about img {
        right: 450px;
    }
}
/* SECTION ABOUT */

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

/* SECTION LESSONS */
section.lessons {
    background-image: linear-gradient(#66caf2, #48afd8);
}

section.lessons p {
    padding: 10px 17px;
    font-size: 0.15em;
}

section.lessons img {
    display: block;
    margin: 0 auto;
    width: 92%;
    border-radius: 12px;
    font-size: 0.15em;
}

@media (min-width: 360px) and (orientation: portrait) {
    section.lessons p {
        font-size: 0.17em;
    }
}

@media (min-width: 390px) and (orientation: portrait) {
    section.lessons p {
        font-size: 0.18em;
    }
}

@media (min-width: 700px) and (orientation: portrait) {
    section.lessons p {
        padding-left: 22px;
        padding-right: 22px;
        font-size: 0.19em;
    }
}

@media (orientation: landscape) {
    section.lessons img {
        width: 75%;
    }
}

@media (min-width: 800px) and (orientation: landscape) {
    section.lessons p {
        padding-left: 80px;
        padding-right: 80px;
    }
}

@media (min-width: 1024px) {
    section.lessons p {
        padding-left: 85px;
        padding-right: 85px;
    }
}

@media (min-width: 1280px) {
    section.lessons p {
        font-size: 0.16em;
    }
}

@media (min-width: 1440px) {
    section.lessons p {
        padding-left: 140px;
        padding-right: 140px;
    }

    section.lessons img {
        width: 67%;
    }
}

@media (min-width: 1580px) {
    section.lessons p {
        padding-left: 155px;
        padding-right: 155px;
    }
}

@media (min-width: 1709px) {
    section.lessons p {
        padding-left: 185px;
        padding-right: 185px;
    }
}
/* SECTION LESSONS */

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

/* SECTION OFFER */
section.lessons {
    background-image: linear-gradient(#48afd8, #66caf2);
}

table {
    width: 92%;
    font-size: 0.15em;
    margin: 10px auto;
    border-collapse: collapse;
    text-align: center;
    border-radius: 12px;
    overflow: hidden;
    background-color: #96d4ed;
}

table th {
    padding: 5px 0;
    background: #383838;
    color: #f4f9fa;
}

table tbody tr:nth-child(1) {
    border-bottom: 2px solid #383838;
}

table span.old {
    text-decoration: line-through;
    color: #c22121;
}

table span.new {
    font-weight: 500;
}

table tbody tr:first-child td span.new {
    padding-left: 8px;
}

table span.date {
    font-size: 0.8em;
    vertical-align: middle;
}

section.offer p {
    padding: 5px 10px;
    font-size: 0.14em;
    font-weight: 500;
}

section.offer p.sec {
    padding-bottom: 1vh;
    font-size: 0.13em;
    font-weight: 400;
    font-style: italic;
}

@media (min-width: 400px) {
    section.offer p {
        padding: 5px 35px;
    }
}

@media (min-width: 700px) {
    table {
        width: 75%;
    }

    table tbody tr:first-child td span.new {
        padding-left: 11px;
    }
}

@media (min-width: 1280px) {
    table {
        width: 67%;
    }

    table tbody tr:first-child td span.new {
        padding-left: 14px;
    }
}

@media (min-width: 1580px) {
    table {
        width: 62%;
    }

    table tbody tr:first-child td span.new {
        padding-left: 16px;
    }
}
/* SECTION OFFER */

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

/* SECTION CONTACT */
section.contact {
    background-image: linear-gradient(#66caf2, #48afd8);
}

section.contact div.wrapper {
    font-size: 0.15em;
    padding: 7px 25px;
}

.contact input, .contact textarea, .contact button {
    width: 100%;
    max-width: 975px;
    margin: 7px auto;
    padding: 7px;
    font-size: 0.9em;
    border: solid 1px #333333;
    border-radius: 12px;
    outline: none;
    cursor: text;
}

.contact input {
    height: 28px;
}

.contact textarea {
    height: 100px;
    resize: none;
}

.contact button {
    background: linear-gradient(135deg, #96d4ed, #96dcf9);
    border: none;
    border-radius: 7px;
}

.contact div.socials {
    margin-top: 7px;
    font-size: 0.945em;
}

.contact div.socials p {
    margin-bottom: 7px;
    font-style: italic;
}

section.contact div.wrapper #status {
    font-size: 0.9em;
}

@media (min-width: 390px) {
    section.contact div.wrapper {
        padding: 7px 30px;
        font-size: 0.17em;
    }
}

@media (min-width: 533px) {
    .contact div.socials p {
        display: inline-block;
        padding-left: 15px;
    }
}

@media (min-width: 700px) {
    section.contact div.wrapper {
        padding: 7px 75px;
    }
}

@media (min-width: 1024px) {
    .contact input {
        height: 36px;
    }

    .contact textarea {
        height: 120px;
    }

    section.contact div.wrapper {
        padding: 7px 120px;
    }

    .contact button {
        height: 40px;
        transition: 0.5s;
    }

    .contact button:hover {
        cursor: pointer;
        background: linear-gradient(135deg, #4c98e9, #4c87d3);
        color: rgba(240, 240, 240, 0.925);
    }
}

@media (min-width: 1280px) {
    .contact input {
        height: 45px;
    }

    .contact textarea {
        height: 160px;
    }

    section.contact div.wrapper {
        padding: 7px 250px;
    }

    .contact button {
        height: 44px;
    }
}

@media (min-width: 1440px) {
    .contact input {
        height: 48px;
    }

    .contact textarea {
        height: 190px;
    }

    section.contact div.wrapper {
        padding: 7px 320px;
    }
}
/* SECTION CONTACT */

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

/* FOOTER */
footer {
    padding: 6px;
    text-align: center;
    font-family: 'Roboto Condensed', 'Arial', sans-serif;
    letter-spacing: 1px;
    background-color: #212121;
}

footer * {
    color: rgba(255, 255, 255, 0.893);
    font-size: 0.8rem;
}
/* FOOTER */

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