/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on May 24, 2019 */

@font-face {
    font-family: 'metropolismedium';
    src: url('../fonts/metropolis-medium-webfont.eot');
    src: url('../fonts/metropolis-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-medium-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-medium-webfont.woff') format('woff'),
         url('../fonts/metropolis-medium-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-medium-webfont.svg#metropolismedium') format('svg');
    font-weight: normal;
    font-style: normal;
}




@font-face {
    font-family: 'metropolismedium_italic';
    src: url('../fonts/metropolis-mediumitalic-webfont.eot');
    src: url('../fonts/metropolis-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-mediumitalic-webfont.woff2') format('woff2'),
         url('../fonts/metropolis-mediumitalic-webfont.woff') format('woff'),
         url('../fonts/metropolis-mediumitalic-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-mediumitalic-webfont.svg#metropolismedium_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolisregular';
    src: url('../fonts/metropolis-regular-webfont.eot');
    src: url('../fonts/metropolis-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-regular-webfont.woff') format('woff'),
         url('../fonts/metropolis-regular-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-regular-webfont.svg#metropolisregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolisitalic';
    src: url('../fonts/metropolis-regularitalic-webfont.eot');
    src: url('../fonts/metropolis-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-regularitalic-webfont.woff') format('woff'),
         url('../fonts/metropolis-regularitalic-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-regularitalic-webfont.svg#metropolisitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolissemi_bold';
    src: url('../fonts/metropolis-semibold-webfont.eot');
    src: url('../fonts/metropolis-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-semibold-webfont.woff') format('woff'),
         url('../fonts/metropolis-semibold-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-semibold-webfont.svg#metropolissemi_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolissemi_bold_italic';
    src: url('../fonts/metropolis-semibolditalic-webfont.eot');
    src: url('../fonts/metropolis-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-semibolditalic-webfont.woff') format('woff'),
         url('../fonts/metropolis-semibolditalic-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-semibolditalic-webfont.svg#metropolissemi_bold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolisextra_bold';
    src: url('../fonts/metropolis-extrabold-webfont.eot');
    src: url('../fonts/metropolis-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-extrabold-webfont.woff') format('woff'),
         url('../fonts/metropolis-extrabold-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-extrabold-webfont.svg#metropolisextra_bold') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'metropolisextra_bold_italic';
    src: url('../fonts/metropolis-extrabolditalic-webfont.eot');
    src: url('../fonts/metropolis-extrabolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-extrabolditalic-webfont.woff') format('woff'),
         url('../fonts/metropolis-extrabolditalic-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-extrabolditalic-webfont.svg#metropolisextra_bold_italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'metropolisbold';
    src: url('../fonts/metropolis-bold-webfont.eot');
    src: url('../fonts/metropolis-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/metropolis-bold-webfont.woff') format('woff'),
         url('../fonts/metropolis-bold-webfont.ttf') format('truetype'),
         url('../fonts/metropolis-bold-webfont.svg#metropolisbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { color: #262626; font-family: 'metropolisregular', sans-serif; font-size: 15px; line-height: 1.8; font-family: 'Montserrat', sans-serif; }
img { vertical-align: baseline; }

h1, h2, h3, h4, h5, h6 {font-family:'metropolisbold', sans-serif; font-weight:normal!important;}

strong {font-weight:normal!important;font-family:'metropolisbold', sans-serif; }

.emphasis {display:block; margin:0 auto; margin:1em 0;  font-family: 'metropolismedium_italic', sans-serif;  font-size:1.35em; padding:1em 0;;}

.question  {font-family: 'metropolisextra_bold_italic'; color:#069}

.what { font-family: 'metropolismedium_italic', sans-serif; font-size:16px;}

.bluetext {color:#069}

strong {font-weight:normal!important;font-family: 'metropolisbold';}
em {font-style:normal!important;font-family: 'metropolisitalic';}

.list-unstyled li:before {font-family:'fontawesome'; content: "\f00c"; margin-left: -1.5em;  padding-right:.5em; }
.list-unstyled li {list-style-position:outside; text-indent: 0em; padding-left:0em }

/*--------------------------------------------------------------LINKS--------------------------------------------------------------*/
a { color: #262626; }
a:visited { color: #757686; }
a:hover, a:focus, a:active { color: #262626; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; list-style: none; }

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

.site-branding { width: calc(100% - 24px); padding: 20px 0; }
.site-branding a { margin-top: 6px; }
 @media screen and (min-width: 992px) {
 .site-branding {width: auto;}
}

/* --------------------------------------------------------------NAVIGATION---------------------------------------*/
.hamburger-menu { position: relative; width: 24px; height: 22px; margin: 0 auto;  transition: .5s ease-in-out;
cursor: pointer; }
.hamburger-menu span { display: block; position: absolute; height: 2px; width: 100%; background: #262626; border-radius: 10px; opacity: 1; left: 0;  transition: .25s ease-in-out;
}
.hamburger-menu span:nth-child(1) {top: 2px;}
.hamburger-menu span:nth-child(2), .hamburger-menu span:nth-child(3) {top: 10px;}
.hamburger-menu span:nth-child(4) {top: 18px;}
.hamburger-menu.open span:nth-child(1) {top: 18px;width: 0;left: 50%;}
.hamburger-menu.open span:nth-child(2) {transform: rotate(45deg);}
.hamburger-menu.open span:nth-child(3) {transform: rotate(-45deg);}
.hamburger-menu.open span:nth-child(4) {top: 18px;width: 0;left: 50%;}

.site-navigation ul { position: fixed; top: 0; left: -320px; z-index: 9999; width: 320px; max-width: calc(100% - 120px); height: 100%; padding: 30px 15px; margin: 0; background: #fff; list-style: none; overflow-x: scroll; transition: all 0.35s; }
.site-navigation.show ul { left: 0; }
.site-navigation ul li { margin: 0 16px; }

.site-navigation ul li a { display: block; padding: 16px 0; font-family: 'metropolismedium'; font-size: 15px;  line-height: 1; color: #262626; text-decoration: none;  transition: color .35s;}
.site-navigation ul li a:hover {text-shadow:3px 3px 3px rgba(204,204,204,.5);}


 @media screen and (min-width: 992px) {
 .site-navigation ul {
 position: relative;
 top: auto;
 left: auto;
 width: 100%;
 max-width: 100%;
 height: auto;
 padding: 0;
 overflow: auto;
 background: transparent;
}
 .site-navigation ul li a {padding: 10px 20px; border:1px solid transparent; border-radius:4px;}
}


/*--------------------------------------------------------------SECTION--------------------------------------------------------------*/
section { padding: 96px 0; }

/*--------------------------------------------------------------BUTTON--------------------------------------------------------------*/
.btn { padding: 18px 40px; border: 1px solid #069; border-radius: 4px; font-size: 14px;  line-height: 1; color: #262626; outline: none; }
.btn:focus { outline: none; }
.btn:hover {background:#069; color:white;}


/*--------------------------------------------------------------HERO--------------------------------------------------------------*/

.hero { position: relative; z-index: 99; padding-top:150px; padding-bottom:100px; }
.hero::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background: rgba(0, 102, 153, .8);
}

.hero h1 { position: relative; padding-bottom: 24px; color: #fff; }
 @media screen and (max-width: 400px) {
.display-1 { font-size:3rem; font-weight:300; line-height:1.2 }
.display-2 { font-size:3.5rem; font-weight:300; line-height:1.2 }
.display-3 { font-size:2.5rem; font-weight:300; line-height:1.2 }
.display-4 { font-size:1.5rem; font-weight:300; line-height:1.2 }
 }

.hero_home { background: url(../images/smallpattern.jpg)}


.hero_inner { position: relative; z-index: 99; padding:75px 0; background: url(../images/smallpattern.jpg)}
.hero_inner::after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 z-index: -1;
 width: 100%;
 height: 100%;
 background: rgba(0, 102, 153, .8);
}

.hero_inner h1 { position: relative; color: #fff; line-height:normal }

/*--------------------------------------------------------------CONTACT FORM--------------------------------------------------------------*/
.contactform { padding:2em; background: #efefef; border-radius:4px;}
.contactform h2 { font-size: 30px; }
.contactform h4 { font-size: 16px; }

.contactform .radio-label {display : block;}
.contactform .radio-label > input[type="radio"] {visibility: hidden;position: absolute;}

.contactform .options input[type="radio"] {visibility: hidden;position: absolute;}

.contactform .options label { position: relative;margin-right: 40px;font-size: 14px;line-height: 1;color: #6a6a6a;}

.contactform .options input[type="radio"] + .options-type-radio {
    display: block;
    width: 18px;
    height: 18px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
}

.contactform .options input[type="radio"] + .options-type-radio + .centered-dot {
    visibility: hidden;
    display: block;
    position: absolute;
    left: 7px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #ff5e06;
}

.contactform.options input[type="radio"]:checked + .options-type-radio {border-color: #ff5e06;}
.contactform.options input[type="radio"]:checked + .options-type-radio + .centered-dot { visibility: visible;}

.contactform input { width: calc(50% - 14px); padding: 12px 30px; margin-top: 28px; border: 1px solid #e0e0e0; font-size: 14px; line-height: 1; }
.contactform input::placeholder {color: #069;}

.contactform input[type=submit] {width:200px;padding:12px;border:1px solid #069; border-radius: 4px; font-size: 14px;  line-height: 1; color: #262626; outline: none; background:none; }
.contactform input[type=submit]:focus { outline: none; }
.contactform input[type=submit]:hover {background:#069; color:white;}

 @media screen and (max-width: 768px) {
.contactform input {width: 100%;}
}



/*--------------------------------------------------------------ARTICLE--------------------------------------------------------------*/
article {}
article img { display: block; width: 100%; margin: 0;}


/*--------------------------------------------------------------SIDEBAR--------------------------------------------------------------*/
@media screen and (max-width: 992px) {
.sidebar {margin-top: 96px;}
}
.sidebar h2 { font-size: 18px;  }


/*--------------------------------------------------------------XXXXXXXXXXXXX--------------------------------------------------------------*/
.sidebar {margin-top:0;}
.sidebarbox {}
.sidebarbox ul {list-style: none;margin: 0;}
.sidebarbox li {margin-bottom: 10px;}
.sidebarbox li:nth-last-of-type(1) {margin-bottom: 0;}

.sidebarbox figure,
.sidebarbox figure a ,
.sidebarbox figure img { display: block; margin: 0;}
.sidebarbox figure {width: 72px;}
.sidebarbox .sidebarbox-content {width: calc(80% - 80px);}
.sidebarbox h3 a {font-size:12px;color: #069; text-decoration:underline;}
.sidebarbox p {font-size:12px; line-height:ZZZZ;}

/*--------------------------------------------------------------SIDEBAR FEATURE--------------------------------------------------------------*/
.sidebar .feature {}
.sidebar .feature .featurewrap { padding: 0; background: none;}
.sidebar .feature .featurewrap .feature-wrap figure { width: 100%;}

.sidebar .featurewrap figure img {display: block;width: 100%;}
.sidebar .feature .feature-content { width: 100%;padding: 20px; margin-top: 0;border: 1px solid #e0e0e0;border-top: 0; border-radius: 0 0 4px 4px; background:#e8e8e8}

.sidebar .featurewrap h6 {font-size: 15px;}
.sidebar .featurewrap h6 span {font-size: 14px; font-family: 'metropolisregular', sans-serif; }
.sidebar .featurewrap p {font-size:13px; line-height:16px; margin:0 0 14px 0;}

/*--------------------------------------------------------------BLOCK QUOTE-------------------------------------------------------------*/

.quote-card {background: #fff;padding: 20px;padding-left: 50px;box-sizing: border-box;position: relative;overflow: hidden;min-height: 80px;}
.quote-card p {font-family: 'metropolisitalic'; font-size: 18px;line-height: 1.5;margin: 0;max-width: 95%;}

.quote-card:before {
  font-family: Georgia, serif;
  content: "“";
  position: absolute;
  top: -20px;
  left: 10px;
  font-size: 5em;
  font-weight: normal;
}
.quote-card:after {
  font-family: Georgia, serif;
  content: "”";
  position: absolute;
  bottom: -70px;
  line-height: 100px;
  right: 0px;
  font-size: 15em;
  font-weight: normal;
}
@media (max-width: 640px) {
  .quote-card:after {font-size: 22em;right: -25px;}
}
.quote-card footer {background:none; display:block;font-size: 14px;color:inherit;text-align:left;margin:0; padding:0;}
.quote-card cite { font-family: 'metropolisitalic'; color:inherit; font-style:normal!important;}

.quote-card.blue-card {background: rgba(0, 102, 153, .3); border-radius:4px;}
.quote-card.blue-card:before, .quote-card.blue-card:after {color: rgba(0, 102, 153, .25)}

/*--------------------------------------------------------------FOOTER--------------------------------------------------------------*/
footer { padding:30px; font-size: 12px; color: #fff; background: #131212; text-align: center; }