@font-face {
font-family: din-2014, sans-serif;
font-weight: 300;
font-style: normal; }
@font-face {
font-family: din-2014, sans-serif;
font-weight: normal;
font-style: normal; }
@font-face {
font-family: din-2014, sans-serif;
font-weight: bold;
font-style: normal; }
body {
margin: 0;
padding: 0;
scroll-behavior: smooth;
font-family: din-2014, sans-serif;
background-color: #606060; }
.container {
background-color: #fff; }
h1 {
font-weight: bold;
font-size: 1em;
border: 4px solid #77e86a;
text-transform: uppercase;
text-align: center;
display: inline-flex;
justify-content: center;
padding: 10px 50px;
margin-top: 0px; }
@media (min-width: 500px) {
h1 {
font-size: 1.6rem;
width: 250px; } }
h2 {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: .2rem; }
@media (min-width: 500px) {
h2 {
font-size: 2em; } }
img {
max-width: 100%; }
strong {
font-size: 1.2em;
font-weight: 300; }
p {
margin-bottom: .2rem; }
.video *:focus {
outline: none !important; }
.container {
width: 100%;
margin: 0 auto;
border: 1px solid #000;
position: relative; }
.margin-top-15 {
margin-top: 15px; }
.pad-bottom {
padding-bottom: 80px; }
@media (min-width: 1000px) {
.container {
max-width: 1000px; } }
.inner {
height: 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding: 10px 10px 10px 10px;
overflow: hidden; }
@media (min-width: 500px) {
.inner {
padding: 0 10% 0 10%; } }
.footer {
padding: 30px 20px;
background-color: #009537; }
.feature-image {
margin-left: -30%;
margin-right: -30%;
display: flex;
justify-content: center;
position: relative;
margin-top: 1.4rem;
margin-bottom: 1.4rem; }
.feature-image img {
display: block;
z-index: 100; }
.feature-image:before {
background-color: #40B0BC;
content: "";
position: absolute;
height: 70%;
width: 100%;
top: 15%; }
#subForm {
font-family: 'DINPro', sans-serif !important; }
#subForm input {
font-family: 'DINPro', sans-serif !important; }
#subForm button {
font-family: 'DINPro', sans-serif !important; }
.edge--bottom {
position: relative;
z-index: 1; }
.edge--bottom:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden; }
.edge--bottom:after {
bottom: 0;
transform: skewY(-3deg);
transform-origin: 100%; }
.edge--bottom--reverse {
position: relative;
z-index: 1; }
.edge--bottom--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden; }
.edge--bottom--reverse:after {
bottom: 0;
transform: skewY(3deg);
transform-origin: 0 100%; }
.edge--top {
position: relative;
z-index: 1; }
.edge--top:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden; }
.edge--top:before {
top: 0;
transform: skewY(3deg);
transform-origin: 100% 0; }
.edge--top--reverse {
position: relative;
z-index: 1; }
.edge--top--reverse:before {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden; }
.edge--top--reverse:before {
top: 0;
transform: skewY(-3deg);
transform-origin: 0 0; }
.edge--both {
position: relative;
z-index: 1; }
.edge--both:before, .edge--both:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden; }
.edge--both:before {
top: 0;
transform: skewY(3deg);
transform-origin: 100% 0; }
.edge--both:after {
bottom: 0;
transform: skewY(-3deg);
transform-origin: 100%; }
.edge--both--reverse {
position: relative;
z-index: 1; }
.edge--both--reverse:before, .edge--both--reverse:after {
background: inherit;
content: '';
display: block;
height: 50%;
left: 0;
position: absolute;
right: 0;
z-index: -1;
-webkit-backface-visibility: hidden; }
.edge--both--reverse:before {
top: 0;
transform: skewY(-3deg);
transform-origin: 0 0; }
.edge--both--reverse:after {
bottom: 0;
transform: skewY(3deg);
transform-origin: 0 0; }
.toggle-nav {
display: none !important; }
#logo-small {
display: none; }
@media screen and (max-width: 889px) {
#logo-small {
display: block;
position: absolute;
top: 10px;
left: 10%;
z-index: 200; }
#logo-small .logo-svg {
width: 150px; } }
@media screen and (max-width: 889px) {
.toggle-nav {
padding: 15px;
margin: 15px;
display: flex !important;
align-self: flex-end;
justify-content: flex-end;
color: #000;
font-size: 2em;
transition: color linear 0.15s; }
.toggle-nav:hover, .toggle-nav.active {
text-decoration: none; } }
.header {
position: relative; }
.header-wrap {
display: flex;
justify-content: space-between;
padding: 0 10% 0 10%; }
.header-wrap a {
display: inline-block;
text-decoration: none;
color: #4A4F54;
padding: 0 10px; }
#logo {
padding-left: 0;
z-index: 100; }
#main-nav {
display: flex;
flex-direction: column;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-end;
padding-bottom: 50px;
font-size: 1.2em; width: 100%;
margin-bottom: 1em; }
#main-nav div {
padding: 0 .5em; }
#main-nav a {
margin-bottom: 10px;
border-bottom: 3px solid #fff;
padding: 0;
text-transform: uppercase; }
#main-nav a:hover {
border-bottom: 3px solid #77e86a; }
#main-nav a.active {
border-bottom: 3px solid #8dc63f; }
#menu {
display: none; }
#logo {
display: none; }
@media screen and (min-width: 890px) {
#logo { display: block; }
#menu {
display: block;
width: 100%; }
#main-nav {
align-items: flex-end;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-end;
padding-bottom: 50px;
font-size: 0.9em;
margin-top: 100px;
margin-right: 10%; margin-bottom: 0;
font-weight: 600; }
#main-nav div {
padding: 0 .5em; }
#main-nav a {
margin-bottom: 10px;
text-transform: uppercase;
border-bottom: 3px solid #fff;
padding: 0; }
#main-nav a:hover {
border-bottom: 3px solid #8dc63f; }
#main-nav a.active {
border-bottom: 3px solid #8dc63f; } } .slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent; }
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0; }
.slick-list:focus {
outline: none; }
.slick-list.dragging {
cursor: pointer;
cursor: hand; }
.slick-slider .slick-track,
.slick-slider .slick-list {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto; }
.slick-track:before, .slick-track:after {
content: "";
display: table; }
.slick-track:after {
clear: both; }
.slick-loading .slick-track {
visibility: hidden; }
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none; }
[dir="rtl"] .slick-slide {
float: right; }
.slick-slide img {
display: block; }
.slick-slide.slick-loading img {
display: none; }
.slick-slide.dragging img {
pointer-events: none; }
.slick-initialized .slick-slide {
display: block; }
.slick-loading .slick-slide {
visibility: hidden; }
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent; }
.slick-arrow.slick-hidden {
display: none; } .slick-loading .slick-list {
background: #fff url(https://cna.ca/wp-content/themes/CNA/assets/css/ajax-loader.gif) center center no-repeat; } .slick-prev,
.slick-next {
position: absolute;
display: block;
height: 45px;
width: 25px;
line-height: 0px;
font-size: 0px;
cursor: pointer;
background: transparent;
color: transparent;
top: 50%;
-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
padding: 0;
border: none;
outline: none; }
.slick-prev {
left: 10px;
background-image: url(https://cna.ca/wp-content/themes/CNA/assets/css/arrow-left.svg);
background-repeat: no-repeat;
z-index: 101; }
.slick-next {
right: 10px;
background-image: url(https://cna.ca/wp-content/themes/CNA/assets/css/arrow-right.svg);
background-repeat: no-repeat;
z-index: 101; } .slick-dotted.slick-slider { }
.slick-dots {
position: absolute;
bottom: 10px;
list-style: none;
display: block;
text-align: center;
padding: 0;
margin: 0;
width: 100%; }
.slick-dots li {
position: relative;
display: inline-block;
height: 15px;
width: 15px;
margin: 0 5px;
padding: 0;
cursor: pointer; }
.slick-dots li button {
box-sizing: border-box;
border: 1px solid black;
border-radius: 50%;
background-color: black;
display: block;
height: 15px;
width: 15px;
outline: none;
line-height: 0px;
font-size: 0px;
color: transparent;
padding: 2px;
cursor: pointer; }
.slick-dots li button:hover, .slick-dots li button:focus {
outline: none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { }
.slick-dots li.slick-active button {
opacity: 0.5; }  .slick-slider .main-content {
flex-direction: column;
justify-content: space-between; }
.slick-slider .footnote {
margin-top: 20px;
font-size: .7em; }
.slick-slider .footnote a {
color: #fff; }
.stats-main-slider {
max-width: 800px;
background-color: #009FDC;
border: 4px solid #fff;
margin: 0 auto; }
.stats-main-slider .inner-slide {
box-sizing: border-box;
padding: 0 30px; }
.stats-main-slider .slick-dots li button {
background-color: #fff;
border: none; } .stats-1-slider {
max-width: 800px;
background-color: #f99d20; }
.stats-1-slider .inner-slide {
box-sizing: border-box;
padding: 0 70px; }
.stats-1-slider .slick-dots li button {
background-color: #fff;
border: none; } .stats-2-slider {
max-width: 850px;
background-color: #1226AA; }
.stats-2-slider .inner-slide {
box-sizing: border-box;
padding: 0 70px; }
.stats-2-slider .slick-dots li button {
background-color: #fff;
border: none; } .stats-3-slider {
max-width: 850px;
background-color: #57B6B2; }
.stats-3-slider .inner-slide {
box-sizing: border-box;
padding: 0 70px; }
.stats-3-slider .slick-dots li button {
background-color: #fff;
border: none; } .stats-4-slider {
max-width: 850px;
background-color: #60269E; }
.stats-4-slider .inner-slide {
box-sizing: border-box;
padding: 0 70px; }
.stats-4-slider .slick-dots li button {
background-color: #fff;
border: none; } .videos-slider {
max-width: 800px;
background-color: #8dc63f; }
.videos-slider .slick-next {
background-image: url(https://cna.ca/wp-content/themes/CNA/assets/css/arrow-right-dark.svg); }
.videos-slider .slick-prev {
background-image: url(https://cna.ca/wp-content/themes/CNA/assets/css/arrow-left-dark.svg); }
.videos-slider .inner-slide {
box-sizing: border-box;
padding: 0 70px; }
.videos-slider .inner-slide .main-content {
width: 100%;
text-align: center;
margin-bottom: 2em; }
.videos-slider .slick-dots li button {
background-color: #fff;
border: none; }
@media (max-width: 950px) {
.videos-slider .slick-next {
right: 0;}
.videos-slider .slick-prev {
left: 0;} }
@media (max-width: 600px) {
.video .inner {
height: 240px;
display: block; } } #people { }
.people-slider {
max-width: 850px;
background-color: #04a4e4;
border: 4px solid #fff;
padding: 3.2rem 0;   }
.people-slider .main-content {
text-align: center !important; }
.people-slider .read-more {
text-decoration: none;
background-color: #4A4F54;
color: #fff;
padding: 10px 20px;
display: inline-block;
margin-top: 10px;
font-size: 18px;
text-align: center;
margin-bottom: 10px;
box-sizing: border-box;
width: 160px; }
.people-slider .slick-dots {
margin-bottom: 0.25rem;
}
.people-slider .slick-slide .main_wrap {
margin-top: 0; }
.people-slider .slick-slide .icon { }
.people-slider .icon img {
width: 200px; }
@media (min-width: 500px) {
.people-slider .main-content {
text-align: left !important; }
.people-slider .slick-slide .icon {
margin: 0 2.5em 1em 0; }
.people-slider .icon img { width: 240px;
margin-bottom: 20px;
object-fit: cover;
margin-top: 10px; }
.people-slider .main-content {
width: 300px; }
.people-slider .read-more {
display: block; } }
.people-slider .inner-slide {
box-sizing: border-box;
padding: 20px 40px;
position: relative; }
.people-slider .slick-dots li button {
background-color: #fff;
border: none; }
.people-slider .person-who {
font-size: 0.9em;
border-bottom: 2px solid white;
padding-bottom: 5px; }
.people-slider .person-name {
font-size: 1.0em;
padding-top: 5px;
font-weight: bold; }
.people-slider .person-title {
font-size: 0.9em;
padding-top: 5px;
text-align: center !important; }
@media (min-width: 500px) {
.people-slider .person-who {
font-size: 1.2em;
font-weight: normal; }
.people-slider .person-name {
font-size: 2em; }
.people-slider .person-title {
font-size: 1.2em;
text-align: left !important; } }
@media (max-width: 800px) {
.people-slider {
padding: 1rem 0 1.6rem 0;
}
}
.slick-slide .main_wrap {
flex-direction: column; }
@media (max-width: 800px) {
.slick-slide br {
content: ' '; }
.slick-slide br:after {
content: ' '; } }
.slick-slide .icon {
display: flex;
justify-content: center;
margin: 0 auto; align-items: center; }
.slick-slide .main_wrap {
display: flex; justify-content: center; }
.slick-slide .icon img {
max-width: 285px; }
.slick-slide .heading {
font-size: 1.1em;
font-weight: bold;
line-height: 1.2em;
text-align: center;
margin: 0 auto; }
.slick-slide .main-content {
text-align: left;
font-size: 0.98em;
margin-bottom: 0.5em; }
.slick-slide .main-content p {
margin: 0; }
@media (min-width: 500px) {
.slick-slide .main_wrap {
margin-top: 70px; }
.slick-slide .main-content {
font-size: 1.2em;
margin-bottom: 1.2em; }
.slick-slide .heading {
font-size: 1.5em;
line-height: 1.2em;
max-width: 500px; } }
@media (min-width: 500px) {
.slick-slide .short-content {
display: flex;
max-width: 400px;
font-size: 1.5em; } }
.slick-slide .short-content {
max-width: 100%;
margin-bottom: 80px; }
@media (min-width: 990px) {
.slick-slide .short-content {
display: flex;
padding-top: 15px;
max-width: 350px;
font-size: 1.3em; } }
@media (min-width: 1000px) {
.slick-slide .main_wrap {
flex-direction: row; }
.slick-slide .icon {
margin: 0 2.5em 2.5em 0; } } @media (max-width: 800px) {
.stats-1-slider {
max-width: 100%; }
.slick-slide .icon img {
max-width: 100%;
height: 150px;
object-fit: contain; }
.stats-main-slider {
max-width: 100%; } }
.social {
color: #fff;
background-color: #00953B; }
.social h1 {
color: #fff;
border: 4px solid #fff; }
.social .message {
color: #fff;
font-size: 1em;
margin-bottom: 1.5em; }
.social .message a {
text-decoration: none;
color: #000; }
@media (min-width: 500px) {
.social .message {
font-size: 1.2em; } }
.social .columns {
display: flex;
justify-content: space-between; }
.social .icons {
display: flex; }
.social .icons a {
margin-right: 30px;
display: inline-block; }
.social .icons a img {
display: inline-block; }
.social .icons a:hover img {
opacity: 0.7; }
.news {
display: flex;
flex-wrap: wrap;
width: 100%; justify-content: center; }
.news h1 {
border: 4px solid #fff; }
@media (min-width: 500px) {
.news .news {
justify-content: space-between; } }
.news p {
width: 219px;
margin-top: 15px; }
.news .box {
box-shadow: 10px 10px 0 #0083AA; }
.news .box img {
display: inline-block;
vertical-align: middle; }
.news .read-more {
background-color: #00A0DF;
display: block;
text-decoration: none;
padding: 10px 20px;
color: #fff;
margin-top: 20px;
text-align: center;
font-size: 18px;
box-sizing: border-box;
width: 160px; }
.news .news-inner {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 5px; }
.news .txt-btn {
display: flex;
flex: 1;
flex-direction: column;
justify-content: space-between; }
.post-box {
display: flex;
flex-direction: column; }
@media (max-width: 500px) {
.news .news-inner {
padding-top: 20px; } }
@media (min-width: 500px) {
.post-box {
flex-direction: row; } }
.post-box {
display: flex;
margin-bottom: 20px;
padding-left: 10px; }
.post-box .thumb {
width: 300px;
margin-right: 20px; }
.post-box .main-content {
max-width: 500px; }
.post-box h2 {
margin-top: 0;
font-size: 1.5em;
max-width: 500px; }
.post-box .read-more {
background-color: #4A4F54;
display: block;
text-decoration: none;
padding: 10px 20px;
color: #fff;
margin-top: 20px;
text-align: center;
font-size: 18px;
box-sizing: border-box;
width: 160px; }
.blog-entry h2 {
margin-top: 0; }
.blog-entry img {
margin-right: 20px;
margin-bottom: 20px; }
.stats { }
.stats h1 {
color: #4A4F54;
border: 4px solid #4A4F54; }
.stats p:not(".inner-slide") {
color: #4A4F54;
font-weight: bold;
margin-top: 0;
font-size: 1.2em; }
.headline {
color: #52575b;
font-size: 1.3em;
font-weight: 700;
margin-top: 0;
margin-bottom: 10px; }
.yt-holder {
background-color: #3e5265;
margin: 0 30px; }
@media (min-width: 900px) {
.yt-holder {
margin: 0 30px;
width: 650px;
margin: 0 auto; } }
.youtube-player {
position: relative;
padding-bottom: 56.23%; height: 0;
overflow: hidden;
max-width: 100%;
background: #000; }
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent; }
.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
-webkit-transition: .4s all;
-moz-transition: .4s all;
transition: .4s all; }
.youtube-player img:hover {
-webkit-filter: brightness(75%); }
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url(//cna.ca/wp-content/themes/CNA/assets/images/player.png) no-repeat;
cursor: pointer; }
@media (max-width: 960px) {
.video {
margin-top: -32px; }
.stats-main-slider {
margin: 0 20px; } }
@media (min-width: 550px) {
.video-wrap { } }
h1 {
margin-bottom: 10px; }
.main {
color: #fff;
background-color: #0d577c;
padding-top: 20px;  }
.main .main-image {
max-width: 100%;
width: 100%;
height: auto;
object-fit: contain;
margin-bottom: 40px; }
@media (max-width: 500px) {
.main .main-image {
object-fit: scale-down;
margin-top: 40px;
object-position: center; } }
.health-care {
color: #fff;
background-color: #0083aa; }
.video {
color: #fff;
background-color: #8dc63f; }
.video h1 {
border: 4px solid #4A4F54;
color: #4A4F54; }
.news {
color: #fff;
background-color: #4A4F54; }
.stats {
color: #fff;
background-color: #fff; }
.people {
color: #fff;
background-color: #00A0DF; }
.people h1 {
border: 4px solid #fff; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%; padding-top: 25px;
height: 0;
margin-top: 2em;
margin-bottom: 2em; }
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; } .js-cm-form {
display: flex;
justify-content: space-between;
margin-bottom: 100px;
flex-direction: column; }
.js-cm-form input {
box-sizing: border-box;
background-color: #00953B;
border: 4px solid #fff;
color: #fff;
padding: 7px 20px;
outline: none;
border-radius: 0;
-webkit-appearance: none;  font-size: 18px;
width: 305px; }
.js-cm-form input::placeholder {
color: #fff; }
.js-cm-submit-button {
background-color: #4A4F54;
padding: 7px 10px;
font-size: 18px;
color: #fff;
border: 4px solid #4A4F54;
outline: none;
box-sizing: border-box;
width: 160px; }
.name-field {
margin-bottom: 1.5em; }
.email-field {
margin-bottom: 1.5em; }
.signup {
font-size: 1.3em;
margin-bottom: 10px;
margin-top: 0;
font-weight: 700; }
@media (min-width: 900px) {
.js-cm-form {
flex-direction: row; }
.name-field {
margin-right: 10px; }
.email-field {
margin-left: 10px;
margin-right: 15px; } }
.videos-slider:focus {
outline: none !important; }
.videos-slider .inner-slide:focus {
outline: none !important; }
.youtube-player:focus, iframe:focus {
outline: none !important; }
html[data-useragent*='"Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"'] .main .inner,
html[data-useragent*='MSIE 10.0'] .main .inner {
display: block;
}
html[data-useragent*='"Mozilla/5.0 (Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko"'] .stats-main-slider,
html[data-useragent*='MSIE 10.0'] .stats-main-slider {
left: 10%;
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.main .inner,
.slick-slider .slick-list .slick-slide .inner-slide .main_wrap div,
.slick-slider .slick-list .slick-slide .inner-slide .main_wrap,
.main .inner .inner-slide .main_wrap,
.main .inner .inner-slide .main_wrap div,
.main .inner .inner-slide .main_wrap div .main-content {
display: block !important;
}
.slick-slider .slick-list .slick-slide .inner-slide .main_wrap div,
.main .inner .inner-slide .main_wrap > div,
.stats .inner .inner-slide .main_wrap > div {
float: left !important;
}
.inner .people-slider {
padding-right: 30px !important;
padding-left: 30px !important;
}
}