/*----- GENERAL STYLES -----*/

* {margin:0px; padding:0px; }

html {height:100%; width:100%; font-size:62.5%; }
body {height:100%; font-size:1.25rem; font-family: "Outfit", sans-serif; font-weight:300; color:#000; background-color:#eeeeee; }

h1 {font-size:3.2em; font-family: "Fraunces", serif; font-weight:800; color:#000000; letter-spacing:-1px; line-height:1.2; margin:0 0 30px 0; }
h2 {font-size:1.35em; font-family: "Outfit", sans-serif; font-weight:500; color:#000000; line-height:1.2; margin:0 0 30px 0;  }
h3 {font-size:1.5em; font-family: "Fraunces", serif; font-weight:800; color:#000; line-height:1.15; margin:0 0 20px 0; }
h4 {font-size:1.4em; font-family: "Fraunces", serif; font-weight:500; color:#000; line-height:1.2; margin:0 0 20px 0;  }
p {font-size:1.4em; font-family: "Outfit", sans-serif; font-weight:300; color:#000; line-height:1.5em; margin:0 0 20px 0; }
p:last-child {margin:0; }
sup {font-size:0.7em; vertical-align:super; line-height:0; }

.bold {font-weight:600; }
.highlight {background-color:#DCFC2C; }

a:link {color:#5C9AFF; font-weight:500; text-decoration:none; }
a:visited {color:#5C9AFF; text-decoration:none; }
a:active {color:#5C9AFF; text-decoration:none; }
a:hover {color:#5C9AFF; text-decoration:underline; cursor:pointer; }

ul {list-style:none; margin:0 0 20px 0; padding:0; }
ul li {position:relative; padding-left:30px; margin-bottom:10px; font-size:1.4em; }
ul li::before {content:''; position:absolute; top:3px; left:0; width:18px; height:18px; background: url("../images/bullet.png") no-repeat center center; background-size: 18px 18px; }

img {max-width:100%; display:block; }

.button,
.button:link,
.button:visited,
.button:active {margin:0 auto; text-decoration:none; padding:8px 40px; border-radius:10px; border:none; color:#fff; font-size:1.3em; font-weight:500; background:#5C9AFF; cursor:pointer; display:inline-block; }
.button:hover {background:#DCFC2C; color:#000; text-decoration:none; background-image:none; transition:0.3s; }


/*----- WRAPPER -----*/

#wrapper {margin:0 auto; max-width:1500px; background-color:#ffffff; }

/*----- HEADER -----*/

#wrapper #header {border-bottom:1px solid #d8d8d8; }
#wrapper #header .header-container {max-width:1300px; padding:40px 30px 30px 30px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-start; }
#wrapper #header .header-container .left {width:25%; }
#wrapper #header .header-container .logo {width:40%; }
#wrapper #header .header-container .logo img {max-width:280px; margin:0 auto; }
#wrapper #header .header-container .right {width:25%; }

/*----- NAVIGATION -----*/

#wrapper #nav {border-bottom:1px solid #d8d8d8; }
#wrapper #nav .nav-container {max-width:1300px; padding:20px 30px; margin:0 auto; display:flex; justify-content:center; }
#wrapper #nav .nav-container .link {padding:0 30px; font-size:1.2em; font-weight:500; }

#wrapper #nav .nav-container .link a:link {color:#000000; font-weight:500; text-decoration:none; }
#wrapper #nav .nav-container .link a:visited {color:#000000; text-decoration:none; }
#wrapper #nav .nav-container .link a:active {color:#000000; text-decoration:none; }
#wrapper #nav .nav-container .link a:hover {color:#5C9AFF; text-decoration:none; cursor:pointer; }

/*----- CONTENT -----*/

#wrapper #content { }
#wrapper #content .content-container {max-width:1300px; padding:0 30px; margin:0 auto; display:flex; justify-content:space-between; align-items:stretch; }
#wrapper #content .content-container .main-content {width:calc(100% - 290px); padding:40px 30px 40px 0; }
#wrapper #content .content-container .sidebar {width:330px; padding:40px 0; border-left:1px solid #d8d8d8; }

#wrapper #content .content-container .main-content .cards-wrapper {display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; }
#wrapper #content .content-container .main-content .cards-wrapper .card {width:calc(33.3% - 12px); margin:0 0 20px 0; }
#wrapper #content .content-container .main-content .cards-wrapper .card.large {width:calc(50% - 10px); }
#wrapper #content .content-container .main-content .cards-wrapper .card img {margin:0 0 10px 0; aspect-ratio:16/9; border-radius:10px; }
#wrapper #content .content-container .main-content .cards-wrapper .card h2 {color:#000000; margin:0 0 10px 0; }
#wrapper #content .content-container .main-content .cards-wrapper .card .date {font-size:1em; font-weight:400; color:#777777; }

#wrapper #content .content-container .main-content .cards-wrapper a:link {color:#000000; text-decoration:none; }
#wrapper #content .content-container .main-content .cards-wrapper a:visited {color:#000000; text-decoration:none; }
#wrapper #content .content-container .main-content .cards-wrapper a:active {color:#000000; text-decoration:none; }
#wrapper #content .content-container .main-content .cards-wrapper a:hover {color:#5C9AFF; text-decoration:none; cursor:pointer; }

#wrapper #content .content-container .sidebar .about {padding:0 0 0 30px; }
#wrapper #content .content-container .sidebar .about .benefits-wrapper {font-size:1.25em; margin:0 0 5px 0; display:flex; justify-content:flex-start; align-items:center; }
#wrapper #content .content-container .sidebar .about .benefits-wrapper .icon {width:35px; margin:0 10px 0 0; }
#wrapper #content .content-container .sidebar .about .benefits-wrapper .benefit { }

#wrapper #content .content-container .sidebar .newsletter {margin:20px 0 0 0; padding:20px 0 0 30px; border-top:1px solid #d8d8d8; }

/*----- FOOTER -----*/

#wrapper #footer {border-top:1px solid #d8d8d8; }
#wrapper #footer .footer-container {max-width:1300px; padding:40px 30px; margin:0 auto; }








/*----- MAX WIDTH 1150PX -----*/    

@media only screen and (max-width:1150px) {

    
#wrapper #content .content-container .main-content .cards-wrapper .card {width:calc(50% - 10px); }

}

/*----- MAX WIDTH 900PX -----*/    

@media only screen and (max-width:900px) {

}

/*----- MAX WIDTH 780PX -----*/    

@media only screen and (max-width:780px) {


}

/*----- MAX WIDTH 550PX -----*/    

@media only screen and (max-width:550px) {


}