@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

/*  apply a natural box layout model to all elements  */
* {
  box-sizing: border-box;
}

/* Body */
body {
  font-family: "Poppins", sans-serif;
  max-width: 1024px;
  margin: auto;
}

header {
  padding: 0.5rem 2%;
  max-width: 1024px;
}
header h1 {
  font-size: 1.5rem;
  color: #061f76;
  padding: 1rem 0 0 0;
}
header h2 {
  font-size: 0.8rem;
  font-weight: 300;
}
header figure {
  margin: 10px;
}
header figure img {
  float: left;
  margin: 0 4% 0 0;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

main {
  /* -- Slider -- */
}
main h1 {
  font-size: 1.7rem;
  color: #061f76;
  font-weight: 500;
}
main .swiper-wrapper {
  margin-bottom: 25px;
}
main .swiper {
  width: 100%;
  height: auto;
}
main .swiper img {
  width: 100%;
  display: block;
}
main .swiper p {
  margin: 0;
  padding: 1rem 2%;
  position: absolute;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.6);
  text-align: center;
  color: white;
  width: 100%;
}
main .welcome {
  padding: 0.5rem 2vw;
}
main .welcome h1 {
  padding-bottom: 1rem;
}
main .flex-container {
  -moz-column-count: 1;
       column-count: 1;
  display: block;
  padding: 0 2%;
}
main .flex-container h1 {
  font-size: 2rem;
  padding: 1rem 0;
}
main .flex-container h2 {
  color: #3fb3fb;
  font-weight: 500;
}
main .flex-container h3 {
  font-size: 1rem;
  color: #3fb3fb;
  font-weight: 500;
  padding: 0.5rem 0;
  padding-top: 2rem;
}
main .flex-container figure img {
  width: 100%;
}
main .flex-container figure figcaption {
  line-height: 18px;
  margin-bottom: 4rem;
}
main div.msg h1 {
  text-align: center;
  line-height: 40px;
  margin-top: 20px;
}
main form {
  padding: 0 2%;
}
main form fieldset {
  margin: 2rem 0;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 0.5rem 2%;
  width: 100%;
}
main form legend {
  color: #061f76;
  margin: 0 1rem;
  padding: 0.5rem;
}
main form label.top, main form div {
  display: block;
  padding: 0.5rem 0;
  color: #3fb3fb;
  font-size: 0.8rem;
}
main form label.top input, main form label.top select {
  display: block;
  font-size: 1rem;
  border-radius: 10px;
  border: 1px solid #999;
  margin-top: 0.5rem;
  padding: 0.75rem;
  color: #999;
  width: 100%;
  background-color: rgba(150, 150, 150, 0.1);
}
main form label.sbs {
  display: block;
  padding: 0.75rem;
  color: #999;
}
main form label.top input:required {
  border-left: #061f76 solid 10px;
}
main form label.top input:required:valid {
  border-left: rgb(47, 185, 47) solid 10px;
}
main form fieldset label select {
  -webkit-appearance: none;
}
main form input.submitBtn {
  border: none;
  background-color: #3fb3fb;
  color: white;
  padding: 0.5rem 2%;
  border-radius: 10px;
  width: 96%;
  font-size: 22px;
  font-weight: 500;
  margin: 0 2%;
}
main .ablum h1 {
  padding: 2rem 2%;
}
main section.thegallery {
  padding: 0.5rem;
}
main section.thegallery figure {
  width: 100%;
  height: 0;
  padding-bottom: 60%;
  position: relative;
  margin: 0;
}
main section.thegallery figure img {
  width: 100%;
  height: auto;
  position: absolute;
}
main .cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
main .cards .column {
  padding: 0 2vw;
}
main .cards .small-0 {
  flex-basis: 0%;
}
main .cards .small-1 {
  flex-basis: 8.3333333333%;
}
main .cards .small-2 {
  flex-basis: 16.6666666667%;
}
main .cards .small-3 {
  flex-basis: 25%;
}
main .cards .small-4 {
  flex-basis: 33.3333333333%;
}
main .cards .small-5 {
  flex-basis: 41.6666666667%;
}
main .cards .small-6 {
  flex-basis: 50%;
}
main .cards .small-7 {
  flex-basis: 58.3333333333%;
}
main .cards .small-8 {
  flex-basis: 66.6666666667%;
}
main .cards .small-9 {
  flex-basis: 75%;
}
main .cards .small-10 {
  flex-basis: 83.3333333333%;
}
main .cards .small-11 {
  flex-basis: 91.6666666667%;
}
main .cards .small-12 {
  flex-basis: 100%;
}
main .cards .blog {
  margin: 30px 0;
  box-shadow: 0 4px 4px rgba(40, 40, 40, 0.3);
}
main .cards .blog figure img {
  width: 100%;
}
main .cards .blog figcaption {
  padding: 10px;
}
main .cards .blog figcaption h2 {
  margin-bottom: 5px;
  color: #3fb3fb;
  font-weight: 500;
  font-size: 18px;
}
main .cards .blog figcaption p {
  line-height: 18px;
}
main .cards .blog .actionButton {
  background-color: #333;
  padding: 20px 40px;
  display: grid;
  justify-content: center;
  margin: 5px 0;
}
main .cards .blog .actionButton a {
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  text-decoration: none;
}

/* FOOTER  */
#footerWrapper {
  background-color: #1b1b1b;
}

footer {
  margin-top: 30px;
  font-size: 0.85rem;
  padding: 1rem 0;
  color: #bbb;
  text-align: center;
}
footer a {
  color: #eee;
}

/*Adjust the media query max-width value on line 5 to match your breakpoint between the small and medium screens OR between the medium and large screens*/
@media only screen and (max-width: 34.9375rem) {
  nav {
    background-color: #288be4;
  }
  /* Navigation Button  -------------------------------------------------------- */
  nav button {
    width: 100%;
    padding: 0.4rem 2vw;
    text-align: left;
    background: transparent;
    border: none;
    font-size: 1.6rem;
    color: #FFF;
    cursor: pointer;
  }
  /* Navigation Bar -------------------------------------------------------- */
  #primaryNav {
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    z-index: 998;
    font-weight: 300;
  }
  #primaryNav li.active a {
    background-color: rgba(0, 0, 0, 0.25);
  }
  #primaryNav li a {
    display: block;
    width: 100%;
    padding: 0.75rem 2vw;
    font-size: 14px;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.15);
    color: white;
    text-decoration: none;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }
  #primaryNav li a:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  /* Toggle the navigation bar to expand down  */
  #primaryNav.open {
    height: auto;
  }
  /* Submenus – optional .parent class indicates dropdowns */
  #primaryNav > li:hover > a {
    background: rgba(0, 0, 0, 0.5);
  }
  #primaryNav li.parent > a:after {
    font-size: 1rem;
    content: "⋮";
    color: rgba(255, 255, 255, 0.5);
    float: right;
  }
  #primaryNav li.parent > a:hover {
    background: rgba(0, 0, 0, 0.5);
  }
  /*hide the sub menu items by default*/
  #primaryNav li ul {
    display: none;
    background: rgba(0, 0, 0, 0.1);
    padding: 0;
  }
  #primaryNav li ul a {
    border-top: solid 1px rgba(0, 0, 0, 0.2);
    font-size: 14px;
    padding: 10px 5%;
    font-weight: 300;
  }
  #primaryNav li:hover ul {
    display: block;
  }
} /* End Mobile Styles */
@media only screen and (min-width: 35rem) {
  header {
    padding: 0.5rem 2%;
  }
  header h1 {
    font-size: 2rem;
  }
  header h2 {
    font-size: 1rem;
  }
  nav button {
    display: none;
  }
  nav {
    background-color: #288be4;
  }
  nav ul {
    display: flex;
    margin-left: 2%;
    border-left: 1px solid rgba(0, 0, 0, 0.1);
  }
  nav ul li {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
  nav ul li a {
    display: block;
    font-size: 1rem;
    padding: 0.9rem 1.2rem;
    color: white;
    text-decoration: none;
    transition: background 0.3s linear;
  }
  nav ul li a:hover {
    background-color: rgba(0, 0, 0, 0.5);
  }
  nav #primaryNav li.parent > a:after {
    content: "▼";
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.5);
    float: right;
    padding: 0.3rem 0 0.3rem 0.8rem;
  }
  nav ul li ul {
    display: flex;
    flex-direction: column;
    background-color: #1b7ed7;
    border: none;
    width: 14rem;
    position: absolute;
    left: -999rem;
    z-index: 99;
  }
  nav ul li ul li {
    border-right: none;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
  }
  nav ul li:hover ul {
    left: auto;
    margin-left: 0;
  }
  nav li.active a {
    background-color: rgba(0, 0, 0, 0.2);
  }
  main .flex-container {
    padding: 2rem;
  }
  main .flex-container figure img {
    width: auto;
    margin: 0;
    height: 200px;
    padding: 0 1rem;
  }
  main .flex-container figure img.book1 {
    float: right;
  }
  main .flex-container figure img.book2 {
    float: left;
  }
  main .flex-container figure img.author {
    padding-left: 0;
    float: left;
  }
  main .cards .medium-0 {
    flex-basis: 0%;
  }
  main .cards .medium-1 {
    flex-basis: 8.3333333333%;
  }
  main .cards .medium-2 {
    flex-basis: 16.6666666667%;
  }
  main .cards .medium-3 {
    flex-basis: 25%;
  }
  main .cards .medium-4 {
    flex-basis: 33.3333333333%;
  }
  main .cards .medium-5 {
    flex-basis: 41.6666666667%;
  }
  main .cards .medium-6 {
    flex-basis: 50%;
  }
  main .cards .medium-7 {
    flex-basis: 58.3333333333%;
  }
  main .cards .medium-8 {
    flex-basis: 66.6666666667%;
  }
  main .cards .medium-9 {
    flex-basis: 75%;
  }
  main .cards .medium-10 {
    flex-basis: 83.3333333333%;
  }
  main .cards .medium-11 {
    flex-basis: 91.6666666667%;
  }
  main .cards .medium-12 {
    flex-basis: 100%;
  }
}
@media only screen and (min-width: 64rem) {
  header, nav, main {
    max-width: 1024px;
    margin: auto;
  }
  nav ul li a {
    font-size: 0.9rem;
    padding: 1rem 1.2rem;
  }
  main .cards .large-0 {
    flex-basis: 0%;
  }
  main .cards .large-1 {
    flex-basis: 8.3333333333%;
  }
  main .cards .large-2 {
    flex-basis: 16.6666666667%;
  }
  main .cards .large-3 {
    flex-basis: 25%;
  }
  main .cards .large-4 {
    flex-basis: 33.3333333333%;
  }
  main .cards .large-5 {
    flex-basis: 41.6666666667%;
  }
  main .cards .large-6 {
    flex-basis: 50%;
  }
  main .cards .large-7 {
    flex-basis: 58.3333333333%;
  }
  main .cards .large-8 {
    flex-basis: 66.6666666667%;
  }
  main .cards .large-9 {
    flex-basis: 75%;
  }
  main .cards .large-10 {
    flex-basis: 83.3333333333%;
  }
  main .cards .large-11 {
    flex-basis: 91.6666666667%;
  }
  main .cards .large-12 {
    flex-basis: 100%;
  }
  main .cards .column {
    padding: 0 1vw;
  }
}/*# sourceMappingURL=styles.css.map */