@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Raleway:400,600,700);
/*------------------------------------
    STYLE.CSS
    DAVE DRIESMANS (@davedriesmans)
    v1 - 2 january 2014
    
    1 BASE
    2 LAYOUT
    3 GRID
    4.1 HEADER & NAVIGATION
    4.2 FOOTER
    5 DESIGN
    10 RESPONSIVE
------------------------------------ */
/**
 * Setup
 */
/*------------------------------------
   COLORS
----------------------------------- */
/*------------------------------------
   FONTS
------------------------------------ */
@font-face {
  font-family: 'geosanslight';
  src: url("fonts/geosanslight-webfont.eot");
  src: url("fonts/geosanslight-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/geosanslight-webfont.woff") format("woff"), url("fonts/geosanslight-webfont.ttf") format("truetype"), url("fonts/geosanslight-webfont.svg#geosanslightregular") format("svg");
  font-weight: normal;
  font-style: normal; }

/*------------------------------------
   WIDTH
----------------------------------- */
/* ------------------ 1 BASE  ------------------  */
html, button, input, select, textarea {
  font-family: Raleway, Helvetica; }

body {
  margin: 0;
  padding: 0;
  height: 100%;
  min-height: 100%;
  color: #010101;
  font-size: 16px;
  line-height: 21px;
  font-family: Raleway, Helvetica;
  background-color: #375e82; }

html, body {
  height: 100%; }

img {
  width: 100%; }

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }

a {
  color: #333333;
  text-decoration: underline; }

a:hover {
  text-decoration: #80c594; }

h1, h2, h3 {
  font-family: utopia-std-subhead; }

h1 a, h2 a, h3 a, a h3, .logo a {
  text-decoration: none; }

h1 {
  font-size: 30px;
  line-height: 32px;
  color: #333333;
  margin: 0 0 20px 0;
  font-weight: 200px; }

h2 {
  position: relative;
  font-family: geosanslight;
  text-transform: uppercase;
  font-weight: 200;
  font-size: 30px;
  letter-spacing: 10px;
  color: #76a0cf;
  line-height: 32px; }

/* h2:before {
	border-top:  1px solid $grey;
	content:"    ";
	width: 40px;
	height:1px;
	background-color:yellow;
	color:red;
	font-weight:bold;
	position: absolute;
	bottom: 5px;
	z-index: 99;	
} */
h3, h3 a {
  font-size: 25px;
  color: #76a0cf;
  line-height: 25px;
  text-decoration: none; }

h3.thin {
  font-weight: normal; }

a h3:hover, h3 a:hover {
  color: #00243d; }

.icon {
  float: left;
  height: 0;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  font-size: 0; }

.icon-21 {
  width: 21px;
  padding-top: 21px; }

/* ------------------  2 LAYOUT ---------------   */
.wrapper {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1%; }

.full-container {
  display: table;
  height: 100%;
  width: 100%;
  margin: 0; }

.content-container {
  margin: 20px 0 30px 0; }

.push-right {
  float: right; }

/* ------------------  3 GRID --------------------   */
/*
  based on concrete from david lumley
  https://github.com/davidlumley/concrete
*/
/* Rows */
.row {
  min-width: 768px;
  margin: 10px auto; }

.row .row {
  max-width: 100%;
  min-width: 100%; }

.row:after {
  content: "";
  display: table;
  clear: both; }

/* columns base */
[class*='col-'] {
  float: left;
  padding-right: 20px; }

[class*='col-']:last-of-type {
  padding-right: 0px; }

.col.with-extra-padding {
  padding-left: 10px;
  padding-right: 10px; }

/* column width */
.col-1 {
  width: 8.33%; }

.col-2 {
  width: 16.66%; }

.col-3 {
  width: 25%; }

.col-4 {
  width: 33.33%; }

.col-5 {
  width: 41.66%; }

.col-6 {
  width: 50%; }

.col-7 {
  width: 58.33%; }

.col-8 {
  width: 66.66%; }

.col-9 {
  width: 75%; }

.col-10 {
  width: 83.33%; }

.col-11 {
  width: 91.66%; }

.col-12 {
  width: 100%; }

/* offset */
.offset.by-one {
  margin-left: 8.33%; }

.offset.by-two {
  margin-left: 16.66%; }

.offset.by-three {
  margin-left: 25%; }

.offset.by-four {
  margin-left: 33.33%; }

.offset.by-five {
  margin-left: 41.66%; }

.offset.by-six {
  margin-left: 50%; }

.offset.by-seven {
  margin-left: 58.33%; }

.offset.by-eight {
  margin-left: 66.66%; }

.offset.by-nine {
  margin-left: 75%; }

.offset.by-ten {
  margin-left: 83.33%; }

.offset.by-eleven {
  margin-left: 91.66%; }

/* ------------------  4.1 HEADER & NAVIGATION ------   */
#header {
  width: 100%;
  background-color: transparent;
  margin: 20px 0 50px 0;
  padding: 0px 0; }

#header .header-content {
  display: block;
  background-color: rgba(42, 75, 110, 0.9);
  border-bottom: 1px solid #375e82;
  margin: 0; }

#header .row {
  margin: 0; }

.logo {
  float: left;
  height: 0;
  width: 86px;
  padding-top: 80px;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
  font-size: 0;
  background: url("../images/common/logo-merlin-80.png");
  margin: 10px 0 0px 49px; }

nav[role="navigation"] {
  display: block;
  float: right;
  margin: 50px 70px 0 0;
  font-family: utopia-std-subhead; }

nav[role="navigation"] li {
  position: relative;
  float: left;
  display: inline-block;
  font-size: 20px;
  color: white; }

nav[role="navigation"] li a {
  padding: 5px 35px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 13px;
  color: #dddddd;
  font-weight: 400;
  text-decoration: none;
  border-right: 1px solid #dddddd; }

nav[role="navigation"] li:last-child a {
  border-right: none;
  padding-right: 0; }

nav[role="navigation"] li a:hover,
nav[role="navigation"] li a:focus {
  color: white; }

nav[role="navigation"] li.active a {
  color: white; }

/* submenu */
nav[role="navigation"] li ul.submenu {
  z-index: 999;
  position: absolute;
  top: 36px;
  left: 50%;
  text-transform: uppercase;
  width: 158px;
  margin-left: -80px;
  display: none;
  border: 0;
  background-color: #00243d;
  padding: 8px; }

nav[role="navigation"] li ul.submenu li {
  -webkit-transition: all 0.14s ease-out;
  -moz-transition: all 0.14s ease-out;
  -o-transition: all 0.14s ease-out;
  transition: all 0.14s ease-out;
  border-top: 1px solid rgba(255, 255, 255, 0.6); }

header nav ul li ul.submenu:after {
  content: " ";
  height: 20px;
  width: 100%;
  position: absolute;
  bottom: 100%;
  left: 0;
  background: url("../images/icons/submenu-arrow-blue.png") bottom center no-repeat; }

nav[role="navigation"] li ul.submenu li:first-child {
  border-top: 0; }

nav[role="navigation"] li ul.submenu li a {
  float: left;
  padding: 10px;
  font-size: 11px;
  letter-spacing: 1px;
  color: #dddddd;
  font-weight: 500;
  display: block;
  padding: 6px 0;
  width: 140px;
  text-align: center;
  border: 0; }

nav[role="navigation"] li ul.submenu li a:hover {
  background-color: #004270; }

nav[role="navigation"] li:hover ul.submenu {
  display: block;
  background-color: #00243d; }

/* ------------------ 4.2 FOOTER  ------   */
footer {
  width: 100%;
  color: #FFF;
  display: table-row;
  height: 60px;
  font-size: 12px; }

footer a {
  color: #FFF; }

.socialmedia {
  float: right; }

.icon-fb {
  background: url("../images/icons/facebook.png");
  margin: 0 10px 0 20px; }

.icon-li {
  background: url("../images/icons/linkdin.png"); }

/* ------------------ 5 DESIGN  ------   */
.headerpic {
  clear: both;
  background: #eee8e6 url("../images/slider/foto-home.jpg") center center no-repeat;
  background-size: cover;
  color: #ebe8d9;
  text-align: center;
  position: relative;
  min-height: 300px; }

.content-container .wrapper {
  box-shadow: #325575 1px 1px, #325575 2px 2px, #325575 3px 3px, #325576 4px 4px, #325676 5px 5px, #325676 6px 6px, #325677 7px 7px, #325677 8px 8px, #335677 9px 9px, #335778 10px 10px, #335778 11px 11px, #335778 12px 12px, #335778 13px 13px, #335779 14px 14px, #335879 15px 15px, #335879 16px 16px, #33587a 17px 17px, #34587a 18px 18px, #34587a 19px 19px, #34597b 20px 20px, #34597b 21px 21px, #34597b 22px 22px, #34597b 23px 23px, #345a7c 24px 24px, #345a7c 25px 25px, #355a7c 26px 26px, #355a7d 27px 27px, #355a7d 28px 28px, #355b7d 29px 29px, #355b7e 30px 30px, #355b7e 31px 31px, #355b7e 32px 32px, #355b7e 33px 33px, #355c7f 34px 34px, #365c7f 35px 35px, #365c7f 36px 36px, #365c80 37px 37px, #365c80 38px 38px, #365d80 39px 39px, #365d81 40px 40px, #365d81 41px 41px, #365d81 42px 42px, #375e82 43px 43px; }

.content-container ul {
  margin-left: 20px; }

.box {
  border-radius: 10px;
  border: 1px solid #f6f4f4;
  background-color: #FFF; }