/** NB. this website tries to support old browsers, like IE9+ **/
/** --gold: D69927, --red: 8A363C **/
:root {
    --gold: #D69927;
    --red: #8A363C;
    --rose: #f0E3E0;
}

/** setup box sizing **/
* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  }

/** setup general body and html styles **/
body, html { margin: 0; padding: 0; background-color: #F2F2F2; overflow-x: hidden; }
.container { position: absolute; top: 0; left:50%; }

* { font-family: Arial, Verdana, Tahoma, sans-serif; }
p, ul, li { line-height: 1.6; font-weight: 100; font-size: 0.9rem; }

.content { position: relative; width: 100vw; margin-left: -50vw; background-color: white; min-height: 100vh; }
@media (min-width: 860px) {
    .content { width: 860px; margin-left: -430px; }
}

.header { height: 132px;  width: 100%; min-width: 200px  }
.header .logo { float: left;  margin: 20px 0 0 24px;   }
.header .lantern { float: right; margin-right: 14px;  }

@media (min-width: 600px) {
    .header .logo { margin: 20px 0 0 54px; }
    .header .lantern { margin-right: 24px; }
}

h3 { line-height: 2.0rem; font-size: 1.8rem; font-weight: 400; }

nav { text-align: right;  border-bottom: 14px solid var(--gold); }
nav a { border-top: 1px solid var(--gold); text-decoration: none; color: black; padding: 10px 14px 10px 10px; font-weight: bold; display: block; }
nav a:hover { color: var(--red); }

@media (min-width: 400px) {
    nav { padding: 0 40px 4px 0; }
    nav a { display: inline-block; border-top: none; padding: 0 14px 4px 0; }
}

.title { height: 425px; background: var(--red) url(../images/almond-tree.jpg) right; }
.title h1 { float: right; font-weight: 200; line-height: 4rem; margin: 0; padding: 40px; text-align: right; font-size: 3.5rem; display: inline; color: white; max-width: 400px; }
.title div { clear: both; }
.title h2 { float: right; font-weight: 200; line-height: 2rem; margin: 0; padding: 40px; text-align: right; font-size: 1.5rem; display: inline; color: white; max-width: 400px; }

.info {
    display: block;
}

.left, .right {
    display: block; vertical-align: top; width:100%;
    font-size: 16px;
    background-repeat: no-repeat;
    background-size: 1px 100%;
    background-image: none;
}

.left { background-position: right top; padding: 40px 40px 0 40px; }
.right { background-position: left top; padding: 20px 0 40px 40px; }

.left h2 {
    color: var(--red);
    font-weight: 700; line-height: 3.0rem; margin: 0;  font-size: 2.5rem;
}

.how > img { margin-right:20px; float:right;  }
.how h2 { margin:100px 0 0 0; color: var(--red); padding-right: 20px; font-weight: 400; line-height: 3.0rem; font-size: 2.5rem; }
.how h3 { color: var(--gold); font-weight: 400; padding-right: 10px; line-height: 2.0rem; font-size: 1.8rem; margin-top: 10px; }

.how .icons { display: block; width: 100%; }
.how .icons div { display: block; vertical-align: bottom; width: 50% }
.how .playstore { text-align: right;}
.how .app-logo img { width: 100%; max-width: 100px; }
.how .playstore img { width: 100%; max-width: 120px; margin: 20px 0 20px 0; }

@media (min-width: 300px) {
    .how .icons { display: table; }
    .how .icons div { display: table-cell; }
    .how .playstore img { margin: 0 40px 5px -20px; }
}

@media (min-width: 400px) {
    .how .app-logo img { max-width: 110px; }
    .how .playstore img { max-width: 130px; }
}

@media (min-width: 700px) {
    .how .app-logo img { max-width: 120px; }
    .how .playstore img { max-width: 140px; }
}

@media (min-width: 800px) {
    .how .app-logo img { max-width: 140px; }
    .how .playstore img { max-width: 140px; }
}

@media (min-width: 600px) {
    .info { display: table; }
    .left, .right {
        display: table-cell; vertical-align: top; width:50%;
        background-image: linear-gradient(to bottom, white 0px, white 40px, var(--gold) 40px, var(--gold) calc(100% - 40px), white calc(100% - 40px));
    }
    .left { padding-bottom: 40px; }
    .right { padding-bottom: 40px; }
}

.courses { height: 574px; background: var(--red) url(../images/stationery.jpg) right; }

.who-are-we {
    padding-left: 60px;
}

.what-we-offer {
    padding-top: 40px;
    padding-right: 60px;
}

.what-we-offer h3, .who-are-we h3 {
    color: var(--gold);
}

.about-us h2, .our-goals h2 {
    color: var(--red);
    font-weight: 700; line-height: 3.0rem; margin: 0;  font-size: 2.5rem;
    width: 100%;
    padding: 40px 40px 20px 40px;
}

.mission {
    padding-left: 40px;
}

.mission h3 {
    color: var(--gold);
    margin: 20px 0 10px 0;
    padding-left: 20px;
}

.mission p {
    padding: 0 40px;
}

.shields {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    padding: 40px;
}

.shields .shield {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
    justify-content: start;
    display: flex;
    align-items: center;
    flex-direction: column;

    @media (min-width: 600px) { width: 25%; flex: 0 0 25%; }
}

.shields .shield img, .shields .shield p {
    width: calc(100% - 40px);
    text-align: center;
    margin: 0;
}

.shields .shield p { padding-bottom: 40px; }

.shields .shield h3 {
    width: calc(100% - 40px);
    background-color: var(--rose);
    border: 2px solid var(--red);
    text-align: center;
    color: var(--red);
    font-weight: 400;
    padding: 10px;
    margin: 20px 0 40px 0;
    border-radius: 25px;
    font-size: 1.2rem;
    line-height: 1.5rem;
}


.education-is-the-key {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 484px;
    background: var(--red) url(../images/education-is-the-key.jpg) center;
}

.education-is-the-key h2 {
    color: white;
    font-size: 3.25rem;
    font-weight: 200;
}

.useful-information {
    display: flex;
}

.useful-information div.info {
    padding: 40px;

    h2 {
        color: var(--red);
        font-weight: 400; line-height: 3.0rem; margin: 0;  font-size: 2rem;
        width: 100%;
    }

    h4 {
        font-weight: 700;
        color: var(--red);
        margin-bottom: -10px;
        font-size: 1.0rem;
    }
}

.useful-information div {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
}

.useful-information div.app {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    img { width: 100%;}
}

footer {
    border-top: 14px solid var(--gold);
    background-color: var(--red);
    min-height: 200px;
}