@import url('https://fonts.googleapis.com/css2?family=Mali:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* Normalize css styles across browsers */
@import "styles/normalize.css";

/* Box sizing border-box for all elements */
*,
*::before,
*::after{box-sizing:border-box;}
body {margin:0}
a{text-decoration:none; color:inherit; cursor:pointer;}
button{background-color:transparent; color:inherit; border-width:0; padding:0; cursor:pointer;}
figure{margin:0;}
input::-moz-focus-inner {border:0; padding:0; margin:0;}
ul, ol, dd{margin:0; padding:0}
h1, h2, h3, h4, h5, h6{margin:0; font-size:inherit; font-weight:inherit;}
p {margin:0;}
cite {font-style:normal;}
fieldset{border-width:0; padding:0; margin:0;}

/* GRID SETUPS ------------------------------- */
.grid_element, .grid_list {display:grid; gap:12px}
.one_column_grid, .two_column_grid, .three_column_grid, .four_column_grid, .five_column_grid {grid-template-columns:1fr; grid-auto-rows:120vw}

@media only screen and (min-width:600px) {
  .one_column_grid {grid-auto-rows:500px}
  .two_column_grid, .three_column_grid, .four_column_grid, .five_column_grid {grid-template-columns:repeat(2, 1fr); grid-auto-rows:70vw}
  .two_column_grid > *:nth-child(2n):nth-last-of-type(1), .three_column_grid > *:nth-child(2n):nth-last-of-type(1), .four_column_grid > *:nth-child(2n):nth-last-of-type(1), .five_column_grid > *:nth-child(2n):nth-last-of-type(1) {grid-column: span 1}
  .two_column_grid > *:nth-child(2n-1):nth-last-of-type(1), .three_column_grid > *:nth-child(2n-1):nth-last-of-type(1), .four_column_grid > *:nth-child(2n-1):nth-last-of-type(1), .five_column_grid > *:nth-child(2n-1):nth-last-of-type(1) {grid-column: span 2}
}
@media only screen and (min-width:900px) {
  .three_column_grid, .four_column_grid, .five_column_grid {grid-template-columns:repeat(3, 1fr); grid-auto-rows:50vw}

  .three_column_grid > *:nth-child(3n):nth-last-of-type(1), .four_column_grid > *:nth-child(3n):nth-last-of-type(1), .five_column_grid > *:nth-child(3n):nth-last-of-type(1) {grid-column: span 1}
  .three_column_grid > *:nth-child(3n-1):nth-last-of-type(1), .four_column_grid > *:nth-child(3n-1):nth-last-of-type(1), .five_column_grid > *:nth-child(3n-1):nth-last-of-type(1) {grid-column: span 2}
  .three_column_grid > *:nth-child(3n-2):nth-last-of-type(1), .four_column_grid > *:nth-child(3n-2):nth-last-of-type(1), .five_column_grid > *:nth-child(3n-2):nth-last-of-type(1) {grid-column: span 3}
}
@media only screen and (min-width:1100px) {
  .four_column_grid, .five_column_grid {grid-template-columns:repeat(4, 1fr); grid-auto-rows:40vw}

  .four_column_grid > *:nth-child(4n):nth-last-of-type(1), .five_column_grid > *:nth-child(4n):nth-last-of-type(1) {grid-column: span 1}
  .four_column_grid > *:nth-child(4n-1):nth-last-of-type(1), .five_column_grid > *:nth-child(4n-1):nth-last-of-type(1) {grid-column: span 2}
  .four_column_grid > *:nth-child(4n-2):nth-last-of-type(1), .five_column_grid > *:nth-child(4n-2):nth-last-of-type(1) {grid-column: span 3}
  .four_column_grid > *:nth-child(4n-3):nth-last-of-type(1), .five_column_grid > *:nth-child(4n-3):nth-last-of-type(1) {grid-column: span 4}
}
@media only screen and (min-width:1200px) {
  .five_column_grid {grid-template-columns:repeat(5, 1fr)}
  .two_column_grid, .three_column_grid, .four_column_grid, .five_column_grid {grid-auto-rows:500px}

  .five_column_grid > *:nth-child(5n):nth-last-of-type(1) {grid-column: span 1}
  .five_column_grid > *:nth-child(5n-1):nth-last-of-type(1) {grid-column: span 2}
  .five_column_grid > *:nth-child(5n-2):nth-last-of-type(1) {grid-column: span 3}
  .five_column_grid > *:nth-child(5n-3):nth-last-of-type(1) {grid-column: span 4}
  .five_column_grid > *:nth-child(5n-4):nth-last-of-type(1) {grid-column: span 5}
}
/* GRID SETUPS END ------------------------------- */

/* MAIN CONTAINERS ------------------------------- */
body .bg_image_cont {position:relative; z-index:0; padding-top:48px}
body .bg_image_cont::after {content:""; position:absolute; left:0; top:0; bottom:0; right:0; z-index:-10}
header, main, footer {text-align:center}
#gridContainer, .main_header > div, .main_footer > div {max-width:1000px; margin: 0 auto}
main > section, .default_cont {margin-top:40px}
.main_header > div, .main_footer > div {padding:0 24px}
.main_header > div, .main_header ul, .main_footer > div, .main_footer ul {display:flex; flex-direction:column}
.main_header > div, .main_header ul {align-items:center}

.main_header {position:fixed; top:-25px; z-index:900; width:100%; padding:34px 0 8px; transform: skewY(-0.7deg)}
.header_cont {display:inline-block; padding:6px 26px; margin:0 1.6em -0.5em 1.6em}
.main_footer {width:100%; padding:24px 0; margin-top:72px}
  .main_footer ul {align-items:flex-start}
    .main_footer div div:not(:last-of-type) {padding-right:48px; margin-bottom:36px}
    .main_footer div svg {margin-right:12px}
    .main_footer div a {display:flex; align-items:center; padding:12px}
/* MAIN CONTAINERS END ------------------------------- */

/* BIG BEAUTIFUL IMAGES SECTIONS ------------------------------- */
.default_text_box, .cool_introduction_cont, .grid_element, .grid_list, .form_container, .pop_up_box  {padding:18px; margin:6px}
.default_text, .form_container > div, .pop_up_box {padding:10% 14% 12% 14%}
.default_text {text-align:left}
.cool_introduction {position:relative; overflow:hidden}
.cool_introduction {height:250vw; max-height:1000px}
  .cool_introduction > div {position:inherit; height:50%}
    .cool_introduction > div > img {position:absolute}
      .cool_introduction .intro_first_img_cont img {left:0; top:0}
      .cool_introduction .intro_second_img_cont img {right:0}
    .cool_introduction .intro_text {position:absolute; bottom:0; width:100%}
    .cool_introduction .intro_headline h3 {padding:4px 32px}
    .cool_introduction .intro_tagline p {padding:12px}
.grid_element > div > a, .grid_list > li > a {position:relative; display:flex; overflow:hidden; height:100%}
.end_filler_element {display:flex; flex-direction:column; justify-content:center}

/* ---- big beautiful images */
.cool_introduction > div > img, .grid_element > div > a > img, .grid_list > li > a > img {width:100%; height:100%; object-fit:cover}
/* ---- big beautiful images  end */

/* ---- text & icon content */
.product_info_cont, .product_title {position:absolute; left:0; right:0}
.product_info_cont {position:absolute; left:0; right:0; bottom:0}
.product_title {top:0; padding-bottom:.3em}
.product_title h3 {margin:6px 8px}
.product_info_cont .product_icon {width:80px; margin-bottom:-28px; border-width:6px; border-style:solid}
.product_info_cont > div {padding:26px 12px 14px}
.product_info_cont .call_to_action {padding:12px 0}
/* ---- text & icon content end */

/* BIG BEAUTIFUL IMAGES SECTIONS END ------------------------------- */


/* FORM STYLES ------------------------------- */
  .form_container form, .form_container form > div {display:flex; flex-direction:column; align-items:center}
  .form_container form {margin-top:24px}
  .form_container form label, input, button, .button {font-size:1.2rem; max-width:420px}
    .form_container form label {padding:0 12px; margin-bottom:6px}
    .form_container form input, button, .button {padding:10px 32px; margin-bottom:12px}
    .form_container .input_cont, .form_container form > input, .form_container form > button, .button {margin-bottom:24px}
  .button {display:inline-block}
/* FORM STYLES END ------------------------------- */

/* POP UP STYLES ------------------------------- */
.pop_up_box_cont {visibility:hidden; opacity:0; position:fixed; top:0; bottom:0; left:0; right:0; z-index:9999; background-color:#C5A3BB90; text-align:center}
.pop_up_box {position:absolute; top:50%; transform:translateY(-50%)}
/* POP UP STYLES END ------------------------------- */


/* TYPOGRAPHY ------------------------------- */
html{font-size:10pt}
body, input, button {font-family:"Mali", "Chalkboard", "Comic Sans MS", sans-serif;font-size:1.1rem; font-weight:400; line-height:1.3; color:#000;}

h1, h2, h3, h4, h5, h6 {font-weight:bold}
h1, h2, h3 {font-style:oblique; color:#FFF}
h1 {font-size:2.4rem}
h2 {font-size:1.8rem}
.main_footer h2 {text-align:left; margin-bottom:.3em}
.default_cont h2 {font-size:1.3rem}
h3, .default_cont h3 {font-size:1.2rem}
h4 {font-size:1.2rem}
.intro_text h3, .product_title h3, .end_filler_element h3 {line-height:1.1}
.intro_text h3, .product_title h3 {font-size:2.2rem}
.default_cont h2, .default_cont h3, .default_cont h4, .default_cont h5, .default_cont h6 {color:#8A4877; text-align:center; margin-top:3em; margin-bottom:3em}
.end_filler_element h3 {font-size:1.8rem; padding-bottom:1em; margin-bottom:1em}

.default_cont p, .end_filler_element li, .form_container p {line-height:2}
.default_cont p, .default_cont ul, .end_filler_element p, .end_filler_element ul, .form_container p {margin-bottom:24px}
  .default_cont p:last-of-type, .form_container p:last-of-type {margin-bottom:0}
.default_cont ul, .default_cont ol {padding-left:32px}
.default_cont ul {list-style:none}
.default_cont ul li {display:flex; align-items:start; margin:18px 0}
.owl_bullet_point {width:18px; height:18px; margin:4px 12px 0 0; background-image:url(../site-images/owl-point.png); background-size:100%}
.product_info_cont p {margin-bottom:18px}

ul {list-style:none}
 .default_cont li, .cool_introduction .intro_text li::before, .end_filler_element li {line-height:1.5}

.underline {text-decoration:underline}
/* TYPOGRAPHY END ------------------------------- */


/* VISUAL STYLES ------------------------------- */

/* ---- text colors */
.grid_element .product_info_cont p, .grid_list, .product_info_cont p {color:#000}
/* strongest citrus pink 1/5 */
.product_title h3 {color:#FF5B50}
/* stronger purple 2/5 */
em {color:#8A4877}
.cool_introduction .intro_first_img_cont h3, .cool_introduction .intro_second_img_cont h3 {color:#FFF}

/* ---- bg owl pattern */
body .bg_image_cont::after {background-image:url(../site-images/owl-pattern-white.png); background-size:400px; opacity:0.5}

/* ---- block colors */
.default_cont .default_text_box, .cool_introduction_cont, .cool_introduction .intro_text > div, .grid_element, .grid_list, .product_title, .product_info_cont > div, .pop_up_box {background-color:#FFF}
/* strongest citrus pink 1/5 */
.main_header, .main_footer {background-color:#FF5B50; color:#FFF}
/* mid citrus pink 3/5 */
.end_filler_element .social_icon:hover, .end_filler_element .social_icon:focus {background-color:#FF9D96}
/* lightest citrus pink 5/5 */
.form_container {background-color:#FFDEDC}
/* stronger purple 2/5 */
.header_cont {background-color:#8A4877}
.end_filler_element h3 {color:#8A4877}
/* strongest pink 1/5; Gheralf's signature color */
.cool_introduction .intro_first_img_cont .intro_headline {background:#F1326B}
/* strongest orange 1/5; Vayandil's signature color */
.cool_introduction .intro_second_img_cont .intro_headline {background:#FF7A04}

/* ---- borders */
input, button, .button, .form_container > div, .default_text {border:3px solid}
/* strongest citrus pink #FF5B50 */
input, button, .button {border-color:#FF5B50}
.product_info_cont .product_icon, .form_container > div {border-color:#FFF}
/* lighter purple 4/5 */
.cool_introduction, .grid_list > li:not(:last-child) a {border:1px solid #C5A3BB}
.default_text, .cool_introduction .intro_second_img_cont {border-color:#C5A3BB}
.end_filler_element h3 {border-bottom:3px solid #C5A3BB}

/* ---- rounded corners */
.product_info_cont .call_to_action, form input, button, .button {border-radius:3em}
.cool_introduction_cont, .grid_element, .grid_list, .cool_introduction, .grid_element > div:not(:last-child), .grid_list > li:not(:last-child) a, .default_text_box, .default_text, .form_container, .end_filler_element, .end_filler_element .social_icon, .form_container > div, p a:hover, p a:focus, .main_footer a {border-radius:4px}
.header_cont, .cool_introduction .intro_headline {border-radius:20px}
.product_icon, .circle {border-radius:50%}

/* ---- focus outlines */
/* strongest citrus pink 1/5; white as alternative */
a:focus, .form_container form label:focus, .form_container form input:focus, button:focus  {outline:.4em dashed; outline-color:#FF5B50; z-index:999}
.main_header a:focus, .main_footer a:focus {outline-color:#FFF}
  a:focus {outline-offset:.4em}
  .form_container form label:focus, .form_container form input:focus, button:focus {outline-offset:.2em}

/* ---- fills */
.main_footer svg {fill:#FFF}
.main_footer a:hover svg, .main_footer a:focus svg, .end_filler_element .social_icon:hover svg, .end_filler_element .social_icon:focus svg {fill:#000}
/* strongest citrus pink 1/5 */
.end_filler_element .social_icon {fill:#FF5B50}

/* ---- links and buttons */
/* strongest citrus pink 1/5 */
p a {font-weight:bold; text-decoration-line:underline; text-decoration-color:#FF5B50; border-bottom:1px solid #FF5B50}
.product_info_cont .call_to_action, button, .button, input[type=button], input[type=submit] {background-color:#FF5B50; color:#FFF; font-weight:bold}
/* mid citrus pink 3/5 */
.grid_element > div > a:hover .call_to_action, .grid_list > li > a:hover .call_to_action, .grid_element > div > a:focus .call_to_action, .grid_list > li > a:focus .call_to_action, button:hover, .button:hover, input[type=button]:hover, input[type=submit]:hover, input[type=button]:focus, input[type=submit]:focus, p a:hover, p a:focus, .main_footer a:hover, .main_footer a:focus {background-color:#FF9D96; border-color:#FF9D96; color:#000; text-decoration:none; cursor:pointer}

/* ---- shadows */
.cool_introduction_cont, .cool_introduction .intro_text .intro_headline, .grid_element, .grid_list, .default_text_box, .form_container, .grid_list > li:not(:last-child) a:hover, .grid_list > li:not(:last-child) a:focus, .header_cont {box-shadow:2px 3px 6px #00000070}
.pop_up_box {box-shadow:2px 3px 24px #00000070}

/* ---- skews */
  header > .header_cont, main section:nth-of-type(odd) .header_cont, /* reset skews -> */ main section:nth-of-type(even) .header_cont h2 {transform:skewX(-15deg)}
  main section:nth-of-type(even) .header_cont, /* reset skews -> */ .header_cont h1, main section:nth-of-type(odd) .header_cont h2 {transform:skewX(15deg)}

/* ---- animations & transitions */
.grid_element > div > a:hover, .grid_list > li > a:hover, .grid_element > div > a:focus, .grid_list > li > a:focus{transform:scale(1.02)}
.call_to_action {transform-origin: 30% 70%; transition:50ms ease-in 48ms}
.grid_element > div > a:hover .call_to_action, .grid_list > li > a:hover .call_to_action, .grid_element > div > a:focus .call_to_action, .grid_list > li > a:focus .call_to_action {transform:rotate(-2deg)}

/* VISUAL STYLES END ------------------------------- */

@media only screen and (min-width:460px) {
  html{font-size:11pt}
  .cool_introduction .intro_tagline p {padding:24px 12px}
}

@media only screen and (min-width:600px) {
  .cool_introduction .intro_text .intro_tagline {margin:0 0 12px 0}
  .cool_introduction .intro_tagline {border-radius:20px}
  .cool_introduction .intro_first_img_cont .intro_text {right:-30px}
  .cool_introduction .intro_first_img_cont .intro_headline {margin:0 0 12px 40%; text-align:left}
  .cool_introduction .intro_first_img_cont .intro_tagline p {padding:20px 50px 20px 20px}
  .cool_introduction .intro_second_img_cont .intro_text {left:-30px}
  .cool_introduction .intro_second_img_cont .intro_headline {margin:0 40% 12px 0;text-align:right}
  .cool_introduction .intro_second_img_cont .intro_tagline p {padding:20px 24px 20px 54px}
  .form_container form > div {flex-direction:row}
  .default_text_box, .cool_introduction_cont, .grid_element, .grid_list, .form_containe, .pop_up_box {padding:36px 36px 70px}
  .main_header > div, .main_header ul {flex-direction:row; justify-content:space-between;}
  .main_header nav {order:6}
  .main_footer > div {flex-direction:row; justify-content:flex-end}
  .end_filler_element {padding:1em}
  .end_filler_element h3 {font-size:1.6rem}
  .pop_up_box {left:50%; transform:translate(-50%,-50%); width:80%; max-width:600px}
}

@media only screen and (min-width:900px) {
  body .bg_image_cont {padding-top:80px}
  .cool_introduction_cont, .grid_element, .grid_list, .form_container {margin:0 12px 12px 12px}
  .default_cont, .form_container {margin:0 10%}
  .cool_introduction {max-height:480px; min-height:0}
  .cool_introduction > div {position:absolute; height:100%; overflow:hidden}
  .cool_introduction .intro_first_img_cont {left:-60px; right:0}
    .cool_introduction .intro_first_img_cont img {left:60px; max-width:51%}
    .cool_introduction .intro_first_img_cont .intro_text {right:auto; left:14px; width:42%}
    .cool_introduction .intro_first_img_cont .intro_headline {margin:0 30% 12px 0; text-align:right}
    .cool_introduction .intro_first_img_cont .intro_headline h3 {padding:4px 32px 4px 34px}
    .cool_introduction .intro_first_img_cont .intro_tagline p {padding:16px 16px 16px 34px}
    .cool_introduction .intro_first_img_cont img {left:60px; max-width:56%}
  .cool_introduction .intro_second_img_cont {right:-60px; left:49.5%; border-left-width:1px; border-left-style:solid}
    .cool_introduction .intro_second_img_cont img {right:60px}
    .cool_introduction .intro_second_img_cont .intro_text {left:auto; right:14px; width:82%}
    .cool_introduction .intro_second_img_cont .intro_headline {margin:0 0 12px 30%; text-align:left}
    .cool_introduction .intro_second_img_cont .intro_headline h3 {padding:4px 34px 4px 32px}
    .cool_introduction .intro_second_img_cont .intro_tagline p {padding:16px 34px 16px 16px}
  /* skews */
  .cool_introduction .intro_first_img_cont {transform:skewX(10deg)}
  .cool_introduction .intro_second_img_cont {transform:skewX(-10deg)}
  /* reset skews */
  .cool_introduction .intro_first_img_cont img {transform:skewX(-10deg)}
  .cool_introduction .intro_first_img_cont .intro_text {transform:skewX(-10deg)}
  .cool_introduction .intro_second_img_cont img {transform:skewX(10deg)}
  .cool_introduction .intro_second_img_cont .intro_text {transform:skewX(10deg)}
  .end_filler_element {margin:4px 4% 16px 4%}

  .intro_text h3 {font-size:3rem}
}