/**! ================================================== * LAYOUT/Body * Body Styling * ================================================== */
 * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
	 box-sizing: border-box;
   transition: all 0.2s ease-in;
   -webkit-transition: all 0.2s ease-in;
}

:host {
  overflow: auto;
}


 html, body {
	 height: 100%;
}

img {
  max-width:100%;
}

 html {
	 -ms-text-size-adjust: none;
	 -webkit-text-size-adjust: none;
}

 body {
	 margin: 0;
	 padding: 2em 1em 0em 1em;
	 font-size: 100%;
	 font-family: 'Open Sans', sans-serif;
   background: url('../images/shutterstock_148677209.jpg') center center no-repeat fixed;
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
	 line-height: 1.5em;
   position: relative;
   height:100%;
   width:100%;
	 color: #fff;
	 font-weight: 400;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}


 main {
	 margin: 0px auto;
	 max-width: 1100px;
   box-shadow: 0px 2px 88px #000;
}

a {
  text-decoration: none;
  color: #fff;
}



a.link:hover {
  text-decoration: underline;
}

h1 {
  color:#fff;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 55px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  padding:25px 30px;
  width:100%;
  line-height: 0.82em;
  margin:0px;
}


h2 {
  background-color:#DFB55F;
  display:block;
  padding:50px;
  width:100%;
  font-size:35px;
  font-weight: 300;
  line-height: 1.5em;
  letter-spacing: 0.03em;
  margin:0px;

}



.logo {
  width:1050px;
}

.logo img {
  width:100%;
}



header {

}


.content {
  padding:2em 0;
}

.s1, .s2, .s3, .s4 {
  background-color:#c5d984;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  flex: 1 1 50%;
  min-height: 350px;

  position: relative;
}

.s1:hover .overlay, .s2:hover .overlay, .s3:hover .overlay, .s4:hover .overlay {
  opacity:1;
}

.s1 img {
  max-height: 58px;

}

.s2 {
   background: url('../images/bg_invest.jpg') center center no-repeat #c5d984;
   background-size: cover;
}

.s3 {
   background: url('../images/bg_how.jpg') center center no-repeat #c5d984;
   background-size: cover;
   align-items: flex-start;
}

.s4 {
   background: url('../images/bg_advise.jpg') center center no-repeat #c5d984;
   background-size: cover;
   align-items: flex-start;
}

.overlay {
  position: absolute;
  top:0px;
  bottom:0px;
  width:100%;
  opacity:0;
  background-color:rgba(43,40,38,0.3);
}



.s1-content, .s2-content, .s3-content, .s4-content {
  visibility: hidden;
  display: none;
  color: #000000;
  padding:20px 30px;
}

.s1:hover + .s1-content, .s2:hover + .s2-content, .s3:hover + .s3-content, .s4:hover + .s4-content, .s1 + .s1-content:hover {
  visibility: visible;
  flex: 0 0 50%;
  display: flex;
  position: absolute;
  right:0px;
  top:0px;
  z-index:9999;
  height:350px;
  width:50%;

}

.s2:hover + .s2-content {
  right:auto;
  left:0px;
}

.s3:hover + .s3-content {
  right:0px;
  left:auto;
  top:auto;
  bottom:0px;
}

.s4:hover + .s4-content {
  right:auto;
  left:0px;
  top:auto;
  bottom:0px;

}



.s1-content {
  background-color: #c5d984;
}
.s2-content {
  background-color: #93b2c2;
}
.s3-content {
  background-color: #009cb4;
}
.s4-content {
  background-color: #005693;
  color:#fff;
}

.s1-content img {
  margin:5px 0 0 0;
}

.z-index1 {
  z-index: 10;
}

.z-index2 {
  z-index: 20;
}

.is-uppercase {
  text-transform: uppercase;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}


p {
    word-break: break-word;
}


footer {
  width:100%;
  max-width:1100px;
  margin:80px auto;
  box-shadow: 0px 2px 88px #000;
}

.btn, .btndark {
  background-color:#992633;
  font-size:14px;
  padding:0.8em 2em;
  text-transform: uppercase;
  color:#fff;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin:1.5em 0 0 0;
  display: inline-block;
}


.btn:hover {
  background-color:#85222d;
}


a:not([class]) {
    color: #fff !important;
}

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

.no-pad {
  padding:0px!important;
}






/**! ================================================== * LAYOUT/Flexbox-Grid * * ================================================== */
 .flexbox {
   display: -ms-flexbox;
	 display: flex;
}
 .flex-container {
   display: -ms-flexbox;
   display: -ms-inline-flexbox;
	 display: flex;
   /*width: 1050px;*/
	 max-width: 1050px;
   position: relative;
	 margin: 0 auto;
   -ms-flex-direction: row;
	 flex-direction: row;
   -ms-flex-wrap:wrap;
	 flex-wrap: wrap;
   flex:0 0 auto;
}
 .flex-container .inner {
	 height: 100%;
}
 .flex-container .gap {
	 margin: 3em;
}
 .flex-container .gap1 {
	 margin: 2.1em;
}
 .flex-container .gap2 {
	 margin: 1.5em;
}
 .flex-container .gap3 {
	 margin: 0.6em;
}
 .flex-container .gap-hor1 {
	 margin: 0 1.5em;
}
 .flex-basis1 {
	 flex-basis: 8.333336%;
}
 .flex-basis2 {
	 flex-basis: 16.666667%;
}
 .flex-basis3 {
	 flex-basis: 25.000008%;
}
 .flex-basis4 {
	 flex-basis: 33.333334%;
}
 .flex-basis5 {
	 flex-basis: 41.66668%;
}
 .flex-basis6 {
	 flex-basis: 50%;
   min-width: 0;
}
 .flex-basis7 {
	 flex-basis: 58.333352%;
}
 .flex-basis8 {
	 flex-basis: 66.666667%;
}
 .flex-basis9 {
	 flex-basis: 75.000024%;
}
 .flex-basis10 {
	 flex-basis: 83.33336%;
}
 .flex-basis11 {
	 flex-basis: 91.666696%;
}
 .flex-basis12 {
	 flex-basis: 100%;
   min-width: 0;
}
 .order1 {
	 order: 1;
}

 .order2 {
	 order: 2;
}

 .order3 {
	 order: 3;
}

 .oneline {
	 flex-wrap: nowrap;
}
 .center-main {
   -ms-flex-pack: center;
	 justify-content: center;
}

.align-start {
 align-items: flex-start;
}

 .center-cross {
	 align-items: center;
}
 .rowreverse {
	 flex-direction: row-reverse;
}
 .column {
	 flex-direction: column;
}
 .columnreverse {
	 flex-direction: column-reverse;
}
 .flexstart {
   -ms-flex-pack: flex-start;
	 justify-content: flex-start;
}
 .flexend {
   -ms-flex-pack: flex-end;
	 justify-content: flex-end;
}

 .space-between {
   -ms-flex-pack: space-between;
	 justify-content: space-between;
}
 .space-around {
   -ms-flex-pack: space-around;
	 justify-content: space-around;
}
 .space-evenly {
   -ms-flex-pack: space-evenly;
	 justify-content: space-evenly;
}

 .valign-start {
	 align-items: flex-start;
}
 .valign-end {
	 align-items: flex-end;
}
 .valign-center {
	 align-items: center;
}
 .valign-baseline {
	 align-items: baseline;
}
 .valign-stretch {
	 align-items: stretch;
}
 .align-item-center {
	 align-self: center;
}
 .align-item-right {
	 align-self: end;
}
 .flex-item {
	 flex-shrink: 0;
}
 .flex-item--grow-2 {
	 flex-grow: 2;
}
 .flex-item--shrink-2 {
	 flex-shrink: 2;
}
 .flex-item--basis-70 {
	 flex-basis: 70%;
}
 .flex-item--align-end {
	 align-self: flex-end;
}
 .flex-item--align-center {
	 align-self: center;
}



.show-mobile {
  display:none;
}

.nav {
  display:none;
  width:100%!important;
}

.nav ul {
  width:100%;
  display: block;
  margin:1em 0 0 0;
  padding: 0px;
}

.nav ul li {
  background-color: #93b2c2;
  display: block;
  margin:5px 0px;
  color:#005693;
  line-height: 1em;
  text-transform: uppercase;
}

.nav ul li a {
  color:#005693!important;
  font-size:20px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  padding:0.5em 1em;
  display:inline-block;
  line-height: 1.3em;
  width:100%
}

.nav ul li a span {
  float: left;
}

.nav ul li a span:last-child {
  float:left;
  background: url('../images/ic_arrow.png') no-repeat center center;
  width:24px;
  margin:0 0 0 0.3em;
  height:24px;
}

.nav-fixed {
  position: fixed;
  height:auto;
  left:0px;
  right:0px;
  top:0px;
  width:100%;
  padding:1em;
  z-index:9999999;
  background-color:#e3f7fe;
}

.c1 {
  display: none;
  position: absolute;
  bottom:0px;
  left:0px;
  right:0px;
  height:350px;
  background-color:#005693;
  color:#fff;
  width: 100%;
}

.c1 {
}

.c1 .flex-basis6 {
  padding: 30px 20px;
}

.contact {
  margin:0;
  width:100%;
  padding:0 0 2em 0;
}

.contact button {
  float:right;
  text-align: right;
  display:inline-block;
}

button {
  background-color:transparent;
  border:none;
  margin:0;
  padding: 0;
  outline:none;
  cursor: pointer;
  display: inline-block;
}

button.close {
  position: absolute;
  right:2em;
  top:2em;
  opacity:0.9;
}

button.close:hover {
  opacity:1;
}

 @media only screen and (min-width: 200px) and (max-width: 1050px) {
   .flex-container {
     max-width: 100%;
   }

   .flex-container.nav-container {
     width:100%;
   }

 }


 @media only screen and (min-width: 200px) and (max-width: 800px) {

   body {
     background: url('../images/shutterstock_148677209_mobile.jpg') no-repeat bottom fixed #e4f7fe;
     padding:2em 1em 0em 1em;
     background-position: center bottom;
   }

  .flex-basis1, .flex-basis2, .flex-basis3, .flex-basis4, .flex-basis5, .flex-basis6, .flex-basis7, .flex-basis8, .flex-basis9, .flex-basis10, .flex-basis11, .flex-basis12 {
    -webkit-flex: 1 1 100%;
    -ms-flex: 1 1 100%;
    flex-basis: 100%;
    flex: 1 1 100%;
    justify-content: center;
    min-width: 0;
 }



   .logo, .logo img {
     max-width:100%;
   }

   .center-cross {

   }
   .contact {
     padding:0 0 12em 0;
   }

  .s1-content, .s2-content, .s3-content, .s4-content {
   display: block;
   visibility: visible;
  }

  .s1:hover + .s1-content, .s1 + .s1-content:hover, .s2:hover + .s2-content, .s3:hover + .s3-content, .s4:hover + .s4-content {
   position: relative;
   top:auto;
   left:auto;
   bottom: auto;
   right: auto;
   display: block;
   visibility: visible;
   flex: 1 1 100%;
   display: flex;
   right:0px;
   top:0px;
   z-index:100;
   height:100%;
  }
  .s1:hover .overlay, .s2:hover .overlay, .s3:hover .overlay, .s4:hover .overlay {
   display: none;
  }

  .hide-mobile {
    display: none;
  }

  .c1 {
    display: block;
    position: relative;
    height:auto;
    margin:2em 0 13em 0;
    padding:0;
  }

  .c1 .flex-basis6 {
    padding: 20px 0;
  }

  .c1 .flex-basis6:first-child {
    padding-bottom:20px;
  }

  .logo {
    flex: 1 1 70%;
    max-width: auto;
    width:auto;
    margin:0 5em 0 0;
  }

  .show-mobile {
    display: inline-block;
  }

  .c1 div.flex-container, .s1-content, .s2-content, .s3-content, .s4-content {
    padding:10px 20px;
    z-index:99999;
  }

}


@media only screen and (min-width: 200px) and (max-width: 480px) {
  body {
    background-size: contain;
    background-position: center bottom;
  }

  .logo {
    margin:0 2em 0 0;
  }


}