@charset "UTF-8";
/*
Theme Name: PAO theme
Theme URI: n/a
Author: YBOP
Author URI: https://youngbirdsofparadise.com/
Description: PAO custom theme!
Version: 2.1.0
Text Domain: pao-theme
*/

/*
	Table of content
    1. GENERAL
        1.1 Headings
        1.2 Text
        1.3 Lists
            1.3.1 Checklist
            1.3.2 Pluslist
        1.4 Initials
        1.5 Buttons
        1.6 Colors
        1.7 Link wrapper
        1.8 Label
    2. HEADER
        2.1 Top
        2.2 Main
            2.2.1 Logo wrapper
            2.2.2 Menu wrapper
                2.2.2.1 Nav menu
                    2.2.2.1.1 Second level
                    2.2.2.1.2 Third level
                2.2.2.2 Search
                2.2.2.3 Btn
                2.2.2.4 Hamburger
        2.3 Notification
        2.4 Bottom
    3. MAIN
    4. MODALS
    5. FOOTER
        5.1 Top
            5.1.1 Socials wrapper
            5.1.2 CTA wrapper
        5.2 Main
        5.3 Bottom
            5.3.1 Menu wrapper
            5.3.2 Logos wrapper
    RESIZE
*/

/* 1. GENERAL */
:root {
    --grid-size-lg: 124rem;
    --grid-size-sm: 82rem;
    --grid-padding: 2rem;
    --color-blue: #C0E5E3;
    --color-yellow: #F2BE5C;
    --color-lightyellow: #fbebce;
    --color-darkyellow: #D9AB53;
    --color-black: #111111;
    --color-lightgrey: #f0f0f0;
}

* {
	box-sizing: border-box;
}

*:focus {
    outline: 0;
}

html, body {
	margin: 0;
}

html {
	font-size: 62.5%;
}

body {
    font-family: 'Lato', sans-serif;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.7;
    overflow-x: hidden;
}

/* 1.1 Headings */
h1,
h2,
h3,
h4,
h5 {    
    font-family: 'Sarabun', sans-serif;
    font-weight: 700;
    margin: 0;
}

h1,
h2,
h3 {
    margin-bottom: 2rem;
}

h1, 
h2 {
    font-size: 4.2rem;
    line-height: 1.1;
}

h3 {
    font-size: 3rem;
    line-height: 1.2;
}

h4,
h5 {
    margin-bottom: 1rem;
    line-height: 1.3;
}

h4 {
    font-size: 2.6rem;
}

h5 {
    font-size: 1.8rem;
}

/* 1.2 Text */
p {
	margin: 0 0 3rem;
}

p:empty {
    display: none;
}

p:last-child {
    margin: 0;
}

a {
    color: var(--color-black);
    text-decoration: underline;
    transition: .3s;
}

.underline {
    text-decoration: underline;
}

/* 1.3 Lists */
ul,
ol {
    margin: 0 0 3rem;
    padding-left: 2rem;
}

ul.menu li.bold {
    font-weight: 700;
}

/* 1.3.1 Checklist */
ul.checklist {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul.checklist li {
    position: relative;
    padding-left: 3.5rem;
}

ul.checklist li:not(:last-child) {
    margin-bottom: 1rem;
}

ul.checklist li::before {
    content: "";
    position: absolute;
    top: .3rem;
    left: 0;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background-color: var(--color-black);
    background-image: url(assets/images/icon-check-white.svg);
    background-size: .1.3rem 9rem;
    background-repeat: no-repeat;
    background-position: 60% 50%;
}

/* 1.3.2 Pluslist */
ul.pluslist {
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 5rem;
}

ul.pluslist li {
    position: relative;
    padding-left: 4.7rem;
    font-size: 2.2rem;
    font-style: italic;
    line-height: 1.4;
}

ul.pluslist li:not(:last-child) {
    margin-bottom: 2rem;
}

ul.pluslist li::before {
    content: "";
    position: absolute;
    top: -.2rem;
    left: 0;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--color-yellow);
    background-image: url(assets/images/icon-plus-black.svg);
    background-repeat: no-repeat;
    background-position: center;
}

/* 1.4 Initials */
section {
    padding: 0 var(--grid-padding);
}

figure {
	margin: 0;
	padding: 0;
}

.row-fw,
.row-lg,
.row-sm {
    width: 100%;
    margin: 0 auto;
}

.row-lg {
    max-width: var(--grid-size-lg);
}

.row-sm {
    max-width: var(--grid-size-sm);
}

.pt-lg {
    padding-top: 9rem;
}

.pt-md {
    padding-top: 6rem;
}

.pt-sm {
    padding-top: 2rem;
}

.pt-none {
    padding-top: 0;
}

.pb-lg {
    padding-bottom: 9rem;
}

.pb-md {
    padding-bottom: 6rem;
}

.pb-sm {
    padding-bottom: 2rem;
}

.pb-none {
    padding-bottom: 0;
}

.mt-lg {
    margin-top: 9rem;
}

.mt-md {
    margin-top: 6rem;
}

.mt-sm {
    margin-top: 2rem;
}

.mt-none {
    margin-top: 0;
}

.mb-lg {
    margin-bottom: 9rem;
}

.mb-md {
    margin-bottom: 6rem;
}

.mb-sm {
    margin-bottom: 2rem;
}

.mb-none {
    margin-bottom: 0;
}

/* 1.5 Buttons */
.btn {
    height: 4.4rem;
    padding: 1rem 3rem;
    border-radius: 5rem;
    background-color: var(--color-yellow);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-black);
    text-decoration: none;
    text-align: center;
}

.btn.grey {
    background-color: var(--color-lightgrey);
}

.btn.outline {
    background-color: inherit;
    border: .1rem solid var(--color-black);
}

.btn:hover {
    background-color: var(--color-darkyellow);
}

.btn.grey:hover {
    background-color: #ccc;
}

.btn.outline:hover {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

/* 1.6 Colors */
.bg-color-grey {
    background-color: var(--color-lightgrey);
}

.bg-color-blue {
    background-color: var(--color-blue);
}

.bg-color-yellow {
    background-color: var(--color-yellow);
}

.bg-color-white {
    border: .1rem solid var(--color-yellow);
}

.bg-color-gradient {
    background: #D9D19E;
    background: linear-gradient(15deg, rgba(217, 209, 158, 1) 0%, rgba(192, 229, 227, 1) 18%);
}

/* 1.7 Link wrapper */
.link-wrapper {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    text-decoration: none;
}

.link-wrapper .title {
    flex: 1 1 auto;
    font-size: 1.6rem;
    line-height: 1.3;
    color: var(--color-black);
}

.link-wrapper:hover .title {
    text-decoration: underline;
}

.link-wrapper .arrow {
    flex: 0 0 4rem;
    position: relative;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-yellow);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
}

.link-wrapper:hover .arrow {
    background-color: var(--color-darkyellow);
}

.link-wrapper .arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/images/icon-arrow-black.svg);
    background-position: center;
    background-repeat: no-repeat;
    transition: .3s;
}

/* 1.8 Label */
.label {
    display: inline-block;
    padding: .6rem 1.5rem .8rem;
    border-radius: 5rem;
    font-size: 1.6rem;
    line-height: 1;
}

.label i {
    margin-right: .5rem;
}

/* 2. HEADER */
header {
    position: relative;
    display: inline; /* Fix for child not wanting to sticky */
}

/* 2.1 Top */
header .top {
    background-color: var(--color-blue);
}

header .top ul.menu {
    list-style-type: none;
    min-height: 4rem;
    margin: 0;
    padding: .5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 2rem;
}

header .top ul.menu a {
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-black);
    text-decoration: none;
}

header .top ul.menu a:hover {
    text-decoration: underline;
}

header .top ul.menu li.phone i {
    margin-right: .5rem;
}

/* 2.2 Main */
header .main {
    position: relative;
}

body:not(.single-cursus) header .main {
    position: sticky;
    position: -webkit-sticky;
    z-index: 10;
    top: 0;
    background-color: white;
}

header.scrolled .main {
    border-bottom: .1rem solid #eee;
}

header .main .container {    
    display: flex;
}

/* 2.2.1 Logo wrapper */
header .logo-wrapper {
    flex: 0 0 18.5rem;
    padding: .9rem 0;
    transition: .2s;
}

body:not(.single-cursus) header.scrolled header .logo-wrapper {
    flex: 0 0 16.3rem;
}

header .logo-wrapper a {
    display: flex;
}

header .logo-wrapper img {
    width: auto;
    height: 8.4rem;
    transition: .2s;
}

body:not(.single-cursus) header.scrolled .logo-wrapper img {
    height: 7.4rem;
}

/* 2.2.2 Menu wrapper */
header .menu-wrapper {
    flex: 1 1 auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

/* 2.2.2.1 Nav menu */
header .menu-header-main-container {
    height: 100%;
}

header .main ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

header .main ul a {
    color: var(--color-black);
    text-decoration: none;
}

header .main ul a:hover {
    text-decoration: underline;
}

header .main ul.menu {    
    height: 100%;    
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2rem;
}

header .main ul.menu > li.menu-item-has-children {
    height: 100%;
}

header .main ul.menu > li > a {
    height: 100%;
    display: flex;
    align-items: center;
    font-family: 'Sarabun', sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

header .main ul.menu > li.menu-item-has-children > a {
    position: relative;
    padding-right: 2rem;
}

header .main ul.menu > li.menu-item-has-children > a::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: .942rem;
    height: .5rem;
    background-image: url(assets/images/icon-angle-down-black.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* 2.2.2.1.1 Second level */
header .main ul.menu > li.menu-item-has-children > ul {
    position: absolute;
    z-index: 2;
    top: 10.2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--grid-size-lg);
    list-style-type: none;
    margin: 0;
    padding: 5rem 0;
    display: none;
    grid-template-columns: repeat( 4, 1fr );
    grid-auto-flow: dense;
    grid-gap: 3rem;
}

header.scrolled .main ul.menu > li.menu-item-has-children > ul {
    top: 9.2rem;
}

header .main ul.menu > li.menu-item-has-children:hover > ul {
    /* display: grid; */
}

header .main ul.menu > li.menu-item-has-children > ul::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc( 100vw + .2rem );
    height: 100%;
    background-color: var(--color-lightgrey);
    box-shadow: 3rem 3rem 3rem rgba(0,0,0,.25);
}

header .main ul.sub-menu li {
    position: relative;
    z-index: 1;
}

header .main ul.menu > li > ul > li.col-1 {
    grid-column: 1;
}

header .main ul.menu > li > ul > li.col-2 {
    grid-column: 2;
}

header .main ul.menu > li > ul > li.col-3 {
    grid-column: 3;
}

header .main ul.menu > li > ul > li.col-4 {
    grid-column: 4;
}

header .main ul.sub-menu a {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    line-height: 1.3;
}

header .main ul.sub-menu li.header > a {        
    font-family: 'Sarabun', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;    
}

header .main ul.sub-menu li.list-item {
    position: relative;
    padding-left: 2rem;
}

header .main ul.sub-menu li.list-item::before {
    content: '•';
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-yellow);
}

/* 2.2.2.1.2 Third level */
header .main ul.sub-menu > li > ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* 2.2.2.2 Search */
header .search i {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: var(--color-black);
    cursor: pointer;
    transition: .3s;
}

header .search i:hover {
    background-color: var(--color-black);
    color: white;
}

/* 2.2.2.3 Btn */

/* 2.2.2.4 Hamburger */
header .hamburger {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: white;
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

body:not(.single-cursus) header.scrolled .hamburger {
    position: fixed;
    top: 2.6rem;
}

/* 2.3 Notification */
header .notification {
    background-color: var(--color-yellow);
    font-size: 1.5rem;
    line-height: 1.5;
}

header .notification .container {
    padding: 1.375rem 0;
}

/* 2.4 Bottom */
header .bottom {
    background-color: var(--color-lightgrey);
    display: none;
}

header .bottom .container {
    height: 5rem;
    font-size: 1.5rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
}

header .bottom .container a {
    color: var(--color-black);
    text-decoration: none;
}

header .bottom .container a:hover {
    text-decoration: underline;
}

/* 3. MAIN */
/* 4. MODALS */

/* 5. FOOTER */
/* 5.1 Top */
footer .top {
    background-color: var(--color-lightgrey);
}

footer .top .container {
    padding: 4rem 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2rem;
}

footer .top .title {
    margin-bottom: 1rem;
    font-family: 'Sarabun', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.3;
}

/* 5.1.1 Socials wrapper */
footer .top .socials {
    display: flex;
    gap: .5rem;
}

footer .top .socials a {
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: var(--color-black);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: .3s;
}

footer .top .socials a:hover {
    background-color: var(--color-yellow);    
}

footer .top .socials i {
    font-size: 1.7rem;
    color: white;
}

footer .top .socials a:hover i {
    color: var(--color-black);
}

/* 5.1.2 CTA wrapper */
footer .top .cta-wrapper .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

footer .top .cta-wrapper .col:first-child {
    font-size: 1.6rem;
    line-height: 1.5;
}

footer .top .cta-wrapper .col:last-child {
    justify-self: flex-end;
}

/* 5.2 Main */
footer .main {
    background-color: var(--color-blue);
}

footer .main .container {
    padding: 10rem 0;
}

footer .main .container {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 20rem, 1fr ) );
    grid-gap: 4rem;
    font-size: 1.6rem;
    line-height: 2;
}

footer .main .title {
    margin-bottom: 1rem;
    font-family: 'Sarabun', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.3;
}

footer .main ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

footer .main ul.menu a {
    color: var(--color-black);
    text-decoration: none;
}

footer .main ul.menu a:hover {
    text-decoration: underline;
}

/* 5.3 Bottom */
footer .bottom .container {
    padding: 1.5rem 0;
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: center;
}

/* 5.3.1 Menu wrapper */
footer .bottom ul.menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

footer .bottom ul.menu li:not(:last-child)::after {
    content: "\00a0|\00a0";
}

footer .bottom ul.menu a {
    font-size: 1.5rem;
    line-height: 2;
    color: var(--color-black);
    text-decoration: none;
}

footer .bottom ul.menu a:hover {
    text-decoration: underline;
}

/* 5.3.2 Logos wrapper */
footer .bottom .logos-wrapper {
    text-align: right;
}

/* RESIZE */
@media (max-width: 1279px) {
    /* 2. HEADER */
    /* 2.2 Main */
    body:not(.single-cursus) header .main {
        position: relative;
    }

    /* 2.2.1 Logo wrapper */
    header .logo-wrapper {
        flex: 0 0 16.3rem;
    }

    header .logo-wrapper img {
        height: 7.4rem;
    }

    /* 2.2.2 Menu wrapper */    
    header .menu-header-main-container {
        display: none;
    }

    /* 2.2.2.2 Search */
    header .search i {
        display: none;
    }

    /* 2.2.2.3 Btn */
    header .btn {
        display: none;
    }

    /* 2.2.2.4 Hamburger */
    header .hamburger {
        display: flex;
    }
}

@media (max-width: 1024px) {
    /* 1. GENERAL */
    /* 1.3 Lists */
    /* 1.3.2 Pluslist */
    ul.pluslist {
        padding: 0 0 0 3rem;
    }

    /* 2. HEADER */
    /* 2.1 Top */
    header .top {
        display: none;
    }

    /* 2.2 Main */
    /* 2.2.2 Menu wrapper */
    /* 2.2.2.4 Hamburger */
    body:not(.single-cursus) header .hamburger {
        position: fixed;
        z-index: 10;
    }

    /* 5. FOOTER */
    /* 5.1 Top */
    /* 5.1.2 CTA wrapper */
    footer .top .cta-wrapper .cols {
        grid-template-columns: 1fr;
    }

    footer .top .cta-wrapper .col:last-child {
        margin-top: 1.5rem;
        justify-self: inherit;
    }

    /* 5.2 Main */
    footer .main .container {
        grid-template-columns: repeat( 2, 1fr );
    }

    /* 5.3 Bottom */
    footer .bottom .container {
        padding: 3rem 0;
        grid-template-columns: 1fr;
    }

    /* 5.3.2 Logos wrapper */
    footer .bottom .logos-wrapper {
        margin-top: 1rem;
        text-align: inherit;
    }
}

@media (max-width: 767px) {
    /* 1. GENERAL */
    :root {
        --grid-padding: 1rem;
    }

    body {
        font-size: 1.6rem;
        line-height: 1.6;
    }

    /* 1.1 Headings */
    h1 {
        font-size: 3.6rem;
    }

    h2 {
        font-size: 3rem;
        line-height: 1.2;
    }

    h3 {
        font-size: 2.6rem;
        line-height: 1.3;
    }

    h4 {
        font-size: 2.2rem;
    }

    /* 1.3 Lists */
    /* 1.3.1 Checklist */
    ul.checklist li::before {
        width: 2rem;
        height: 2rem;
    }

    /* 1.3.2 Pluslist */
    ul.pluslist {
        padding: 0;
    }

    ul.pluslist li {
        padding-left: 3.4rem;
        font-size: 1.8rem;
        line-height: 1.3;
    }

    ul.pluslist li:not(:last-child) {
        margin-bottom: 1rem;
    }

    ul.pluslist li::before {
        top: 0;
        width: 2.4rem;
        height: 2.4rem;
    }

    /* 1.4 Initials */
    .pt-lg {
        padding-top: 6rem;
    }
    
    .pt-md {
        padding-top: 4rem;
    }
    
    .pt-sm {
        padding-top: 1rem;
    }
    
    .pb-lg {
        padding-bottom: 6rem;
    }
    
    .pb-md {
        padding-bottom: 4rem;
    }
    
    .pb-sm {
        padding-bottom: 1rem;
    }
    
    .mt-lg {
        margin-top: 6rem;
    }
    
    .mt-md {
        margin-top: 4rem;
    }
    
    .mt-sm {
        margin-top: 1rem;
    }
    
    .mb-lg {
        margin-bottom: 6rem;
    }
    
    .mb-md {
        margin-bottom: 4rem;
    }
    
    .mb-sm {
        margin-bottom: 1rem;
    }

    /* 1.5 Buttons */
    .btn {
        width: 100%;
        font-size: 1.5rem;
    }

    /* HEADER */
    /* 2.4 Bottom */
    header .bottom .container {
        height: 4.5rem;
        font-size: 1.4rem;
    }

    /* 5. FOOTER */
    /* 5.1 Top */
    footer .top .container {
        padding: 5rem 0;
        grid-template-columns: 1fr;
        grid-gap: 4rem;
        text-align: center;
    }

    footer .top .title {
        font-size: 2.2rem;
    }

    /* 5.1.1 Socials wrapper */
    footer .top .socials {
        justify-content: center;
    }

    /* 5.2 Main */
    footer .main .container {
        padding: 5rem 0;
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* 5.3 Bottom */
    /* 5.3.1 Menu wrapper */
    footer .bottom ul.menu {
        justify-content: center;
    }

    /* 5.3.2 Logos wrapper */
    footer .bottom .logos-wrapper {
        text-align: center;
    }
}

@media (max-width: 499px) {
}

/* ANIMATION */
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}