@charset "utf-8";

/* General Structure
-------------------------------------------------- */

* { margin: 0; padding: 0; font-family: 'Open Sans'; }

html,
body { font-size: 100%; color: #3D3F48; height: 100%; }

body { margin: 0; position: absolute; top: 0; left: 0; right: 0; }

.wrapper, .banner .banner-content { position: relative; width: 70%; margin: 0 auto; }

.content-wrap { padding: 30px 0;min-height: 75%; }

.column { position: relative; padding: 40px 0; }

.col-1-2,
.col-1-3,
.col-1-4 { display: flex; display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap; }


.col-1-1 { max-width: 1000px; width: 100%; margin: 0 auto; }

.col-1-2 .column { width: 46%; margin-right: 8%; }

.col-1-3 .column { width: 30%; margin-right: 5%; }

.col-1-4 .column { width: 22%; margin-right: 4%; }

.col-1-2 .column > :nth-child(2n+2).column,
.col-1-2 > :nth-child(2n+2).column, .col-1-3 .column > :nth-child(3n+3).column,
.col-1-3 > :nth-child(3n+3).column, .col-1-4 .column > :nth-child(4n+4).column,
.col-1-4 > :nth-child(4n+4).column { margin-right: 0 !important; }

.back-to {margin:20px 0; }

/* Headings
-------------------------------------------------- */

h1,
h2,
h3,
h4 { line-height: 1; }

h1,
h2 { padding-bottom:30px; font-size: 1.8rem; text-align: center; }

.subtitle { padding-bottom: 20px; text-align: center; color: #626466; font-size: 1.1rem; }

h2 { text-align: center; }

h3 { font-size: 1.1rem; font-weight: 600; padding: 30px 0 20px 0; }

h4 { font-size: 1rem; font-weight: 600; padding: 10px 0; }

/* Text
-------------------------------------------------- */

a { color: #004e9c; text-decoration: none; }

a:hover { color: #2F669E; }

p,
ul { padding-bottom: 10px; }

li { margin-left: 40px; padding-bottom: 5px; }

/* Buttons
-------------------------------------------------- */

.button, .expandHead { background-color: #004e9c; padding: 10px 15px; margin: 15px 0 0 0; color: #FFFFFF; display: inline-block; max-width: 300px; text-align: center; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); left: 50%; position: relative; }

.button:hover { background-color: #2F669E; }

/* Header
-------------------------------------------------- */

header img { width: auto; height: 40px; padding: 15px 0; }

header img:hover { height: 42px; padding: 14px 0px; }

header { background-color: #004e9c; color: #004e9c; height: 70px; }

header * { color: #FFF; }

/* Banner
-------------------------------------------------- */

.banner .button { left: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }

.banner { position: relative; overflow: hidden; height: 300px; }

.banner img,
.banner .banner-gradient { width: 100%; position: absolute; }

.banner img { z-index: 0; }

#home .banner img { margin: -22% 0; }

.banner .banner-gradient { z-index: 5; height: 400px; top: 0; bottom: 0; left: 0; right: 0; }

.banner p { width: 600px; font-size: 1.4rem; }

.banner ul,
.download ul,
.banner p,
.download p { padding: 0; }

.banner .banner-content { z-index: 10; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); padding-left: 0%; }

.banner .banner-gradient { background: -webkit-linear-gradient(left, rgba(255,255,255,0.8), rgba(0,0,0,0)); background: -o-linear-gradient(left, rgba(255,255,255,0.8), rgba(0,0,0,0)); background: -ms-linear-gradient(left, rgba(255,255,255,0.8), rgba(0,0,0,0)); background: -moz-linear-gradient(left, rgba(255,255,255,0.8), rgba(0,0,0,0)); background: linear-gradient(left, rgba(255,255,255,0.8), rgba(0,0,0,0)); }


/* Footer
-------------------------------------------------- */

footer { font-size: 0.8rem; text-align: center; padding: 10px 0; border-top: 1px solid #D6D8DA; margin-top: 20px; }

/* Expandable Boxes
-------------------------------------------------- */

.expandHead { max-width:100% !important; }

.expandHead h1,
.expandHead h2,
.expandHead h3 { text-align: center; color: #FFF; font-size: 1rem; padding: 0 !important; margin: 0; }

.expandContent { padding: 20px 0; }

.expandHead:hover { cursor: pointer; }

/* Images
-------------------------------------------------- */

.img-medium, .img-large { padding-bottom:10px; display:block; margin: 0 auto;
}

.img-medium { width: 100px;  }

.img-large { width: 200px; }

.floatingImg-l,
.floatingImg-r { margin-bottom: 8px; width: auto !important; }

.floatingImg-l { clear: left; float: left; margin-right: 16px; }

.floatingImg-r { clear: right; float: right; margin-left: 16px; }

.download [class^="icon-"],
header [class^="icon-"] { font-size: 2rem; }

header [class^="icon-"]:hover { font-size: 2.1rem; }

/* Lightbox
-------------------------------------------------- */

.wrapper-gallery-item .gallery-item { width: 300px; height:200px; overflow: hidden; border: 1px solid #ABABAB; border-radius:3px; margin-right:1%; margin-bottom:10px; line-height:0; }

.wrapper-gallery-item > .gallery-item:nth-child(3n+3) { margin-right: 0 !important; }

.wrapper-gallery-item { display:flex; flex-wrap: wrap; }

.wrapper-gallery-item .gallery-item a { overflow: hidden; }

.wrapper-gallery-item .gallery-item a img { align-self: center; width:100%; }

.lightbox { /** Hide the lightbox */
display:none; opacity:0; /** Apply basic lightbox styling */
position: fixed; z-index: 9999; width: 100%; min-height: 100%; -webkit-transition: opacity .5s ease-in-out; -moz-transition: opacity .5s ease-in-out; -o-transition: opacity .5s ease-in-out; transition: opacity .5s ease-in-out; background-color:rgba(0,0,0,0.8); }

.lightbox * { color:#FFF; text-align:center;}

.lightbox:target { /** Show lightbox when it is target */
display:block; opacity: 1; top: 0; left:0; }

.lightbox .lightbox-box { width: -webkit-min-content; width: -moz-min-content; width:50%; margin: 2% auto; padding: 10px 20px 10px 20px; position:relative; }

.lightbox .title { margin: 0; padding: 0 0 10px 0px; border-bottom: 1px #ccc solid; font-size: 22px; }

.lightbox .lightbox-content { display: block; width:90%; margin:0 auto;}

.lightbox .close { display: block; text-decoration: none; font-size: 22px; color: #858585; position: absolute; right:0; }

.clear { display: block; clear: both; }

.lightbox .lightbox-content .desc { z-index: 99; bottom: 0; position: absolute; padding: 10px; margin: 0 0 4px 0; background: rgba(0,0,0,0.8); color: #fff; font-size: 17px; opacity: 0; transition: opacity ease-in-out 0.5s; }

.lightbox .lightbox-content:hover .desc { opacity: 1; }

.lightbox .next,
.lightbox .prev { position:absolute; bottom:50%; }

.lightbox .next { right:0; }
.lightbox .prev { left:0; }

.lightbox img { max-width:100%; max-height:80vh; margin:20px 0; }