/****************************
RESET
****************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{margin:0}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/****************************
GLOBAL
****************************/
body {
	font-family: canada-type-gibson, Helvetica, Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.6;
	color: #666;
	font-weight: 400;
	text-rendering: optimizeLegibility;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	margin: 0 auto;
	padding: 0 80px;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

blockquote {
    background-color: #f7f7f7;
    font-size: 1.175rem;
    line-height: 2rem;
    text-align: center;
	margin: 1.5rem 0 1.125rem 0;
	padding: 1.5625rem 1.25rem 1.25rem;
}

main ul {
    list-style: none;
}

main ul li {
    position: relative;
}

main li::before {
    content: "•";
    font-size: 1.75rem;
    position: absolute;
    top: -8px;
    color: #e8262a;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

p, ul, ol {
	margin-bottom: 1rem;
}

em, i {
    font-style: italic;
}

.site-logo img{
    width: 200px;
}

.red {
    color: #e8262a;
}

a {
    color: #3d76d0;
    text-decoration: none;
}

/****************************
ANIMATION
****************************/
canvas {
	width: 300px !important;
	height: 300px !important;
	position: relative;
	left: 100px;
}

/****************************
HEADERS
****************************/
h1, h2, h3, h4 {
	font-family: canada-type-gibson, Helvetica, Arial, sans-serif;
}

h1 {
	font-size: 3rem;
	line-height: 1.2;
	font-weight: 600;
	margin-bottom: .25rem;
  color: #404040;
}

h2 {
	font-size: 2.25rem;
	line-height: 1.2;
	font-weight: 600;
	margin-bottom: 1.5rem;
	color: #e8262a;
}

h3 {
	font-size: 1.5rem;
	line-height: 1.2;
	font-weight: 600;
	margin-bottom: .5rem;
    color: #000000;
}

h4 {
	font-size: 1.375rem;
	line-height: 1.2;
	font-weight: 400;
}

/****************************
SIDE MENU
****************************/
.toggle-menu {
    display: none;
	cursor: pointer;
}

 /* The side navigation menu */
.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #404040;
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav {
    padding: 25px 0 0 0;
}

.sidenav ul.nav--sidenav {
    list-style: none;
}

.sidenav ul.nav--sidenav {
     padding: 10px 0 0 0;
 }

.sidenav ul.nav--sidenav > li > a {
    padding: 10px 20px;
    text-decoration: none;
	font-weight: 400;
    font-size: 1rem;
	text-transform: uppercase;
    color: #ffffff;
    display: block;
    transition: 0.3s
}

.sidenav ul.nav--sidenav > li > a:hover {
    text-decoration: underline;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
    color: #ffffff;
    text-decoration: none;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

/****************************
LINKS
****************************/
.btn--red-default > a,
.btn--red-ghost > a,
.btn--blue-default > a,
.btn--blue-ghost > a,
.btn--white-default > a,
.btn--white-ghost > a{
	line-height: 1;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border-radius: 1000px !important;
    transition: background .3s !important;
    padding: 14px 25px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: .0625rem !important;
    text-decoration: none !important;
}

/*****Red*****/
.btn--red-default > a {
	color: #ffffff !important;
    background-color: #e8262a !important;
}

.btn--red-default > a:hover {
	background-color: #9e1019 !important;
    transition: all .3 !important;
    -webkit-transition: all .3s !important;
}

.btn--red-ghost > a {
	color: #e8262a !important;
    border: 2px solid #e8262a !important;
}

.btn--red-ghost > a:hover {
	background-color: #e8262a !important;
    color: #ffffff !important;
    transition: all .3s !important;
    -webkit-transition: all .3 !important;
}

/*****Blue*****/
.btn--blue-default > a {
	color: #ffffff !important;
    background-color: #3d76d0 !important;
}

.btn--blue-default > a:hover {
	background-color: #3669b2 !important;
    transition: all .3 !important;
    -webkit-transition: all .3s !important;
}

.btn--blue-ghost > a {
	color: #3d76d0 !important;
    border: 2px solid #3d76d0 !important;
}

.btn--blue-ghost > a:hover {
	background-color: #3d76d0 !important;
    color: #ffffff !important;
    transition: all .3s !important;
    -webkit-transition: all .3 !important;
}

/*****White*****/
.btn--white-default > a {
	color: #404040 !important;
    background-color: #f7f7f7 !important;
}

.btn--white-default > a:hover {
	background-color: #ffffff !important;
    transition: all .3 !important;
    -webkit-transition: all .3s !important;
}

.btn--white-ghost > a {
	color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.btn--white-ghost > a:hover {
	background-color: #ffffff !important;
    color: #404040 !important;
    transition: all .3s !important;
    -webkit-transition: all .3s !important;
}

/****************************
HEADER
****************************/
header section {
    display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;

     padding: 40px 0;
}

header ul.nav--header {
    margin-bottom: 0 !important;
}

header ul.nav--header > li {
    display: inline-block;
    vertical-align: top;
}

header ul.nav--header > li:not(:last-child) {
    margin-right: 35px;
}

header ul.nav--header > li > a {
    font-size: 1rem;
    text-transform: uppercase;
    color: #404040;
    display: block;
    padding: 12px 5px;
    text-align: center;
    text-decoration: none;
}

header ul.nav--header > li > a:hover {
    text-decoration: underline;
}

/****************************
MAIN
****************************/
 section {
     padding: 10px 0;
     max-width: 70rem;
     margin: 0 auto;
 }

 p.section-header {
     font-size: 1.5rem;
 }

.header--center {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
}

.header--left {
    text-align: left;
}

section .padding-top {
    padding-top: 80px;
}

section .padding-right {
    padding-right: 15px;
}

/*****2 col*****/
.layout--2-col {
    display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.layout--2-col .col-1, .layout--2-col .col-2 {
    width: 48%;
}

.layout--2-col .col-1 img, .layout--2-col .col-2 img {
    width: 100%;
}

.layout--2-col .col-1 {
    margin-right: 4%;
}

/*****3 col*****/
.layout--3-col {
    display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

    flex-flow: row wrap;
    justify-content: center;
}

.layout--3-col .col-1, .layout--3-col .col-2, .layout--3-col .col-3 {
    width: 29.3333%;
    margin-left: 2%;
    margin-right: 2%;
    text-align: center;
}

.layout--3-col svg {
    width: 90px;
    margin-bottom: 15px;
}

/****************************
FIELD ITEMS
****************************/
.field-item {
    margin-top: 40px;
}

.field-item--2-col {
    display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.field-item--icon {
    width: 90px;
    padding-right: 20px;
}

.field-item--icon svg {
    width: 90px;
    padding-right: 20px;
}

/****************************
CONTAINER COLORS
****************************/
.bg-color--dark-grey {
    background-color: #404040;
}

.bg-color--dark-grey h2, .bg-color--dark-grey p {
    color: #ffffff;
}

.bg-color--light-grey {
    background-color: #f7f7f7;
}

/****************************
FOOTER
****************************/
footer section {
    display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;

    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;

     padding: 40px 0;
}

footer p {
    text-align: center;
    font-size: .875rem;
    line-height: 1.6;
    margin: 0;
}

footer p a {
    text-decoration: none;
    color: #404040;
}

footer p a:hover {
    text-decoration: underline;
}

footer ul.nav--footer {
    margin-bottom: 0 !important;
    text-align: right;
}

footer ul.nav--footer > li {
    display: inline-block;
    vertical-align: top;
}

footer ul.nav--footer > li:not(:last-child) {
    margin-right: 5px;
}

footer ul.nav--footer > li > a {
    font-size: 1rem;
    text-transform: uppercase;
    color: #404040;
    display: block;
    padding: 12px 0px;
    text-align: center;
    text-decoration: none;
}

footer svg {
    width: 28px;
}


/****************************
MEDIA QUERIES
****************************/
@media screen and (max-width: 1000px) {
    /***** Global *****/
    .container {
	    padding: 0 5%;
    }

		/***** ANIMATION *************/
		canvas {
			width: 320px !important;
			height: 320px !important;
		}

    /***** Main *****/
    section {
        padding: 60px 0;
    }

    section .padding-top {
        padding-top: 30px;
    }

     p.section-header {
         font-size: 1.25rem;
     }

    /** 2 col **/
    .layout--2-col .col-1, .layout--2-col .col-2 {
        width: 100%;
    }
    .layout--2-col.col-1 img, .layout--2-col .col-2 img {
        width: 100%;
    }
    .layout--2-col .col-2 {
        margin-right: 0;
    }
    .layout--2-col .col-text {
        order: 1;
    }
    .layout--2-col .col-img {
        order: 2;
        padding: 25px 25px 0 20px;
    }

    /**3 col**/
    .layout--3-col .col-1, .layout--3-col .col-2, .layout--3-col .col-3 {
        width: 100%;
        padding-top: 30px;
        text-align: left;
        margin-left: 0;
        margin-right: 0;
}

    /***** Header *****/
    header section {
    padding-bottom: 0;
    }
    header section .site-logo {
        width: 100%;
        text-align: center;
    }
    header ul.nav--header {
        display: none;
    }

    /***** Footer *****/
    footer section div {
    width: 100%;
    text-align: center;
    padding: 8px 0;
    flex-grow: 1 !important;
    }
    footer ul.nav--footer {
        text-align: center;
        padding: 0;
    }
    footer ul.nav--footer > li > a {
        padding: 0;
    }

    /***** Side Menu *****/
    .toggle-menu {
        display: inline-block;
        position: absolute;
        left: 7%;
        top: 60px;
    }
}
