@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');


body{
font-family: 'Open Sans', sans-serif !important;
}

*{margin:0px;
padding:0px;
}

ul li{
list-style-type:none;
}

.wrap{
margin:0px auto;
padding-left:20px;
padding-right:20px;
max-width:1240px;
}

 /* Add a black background color to the top navigation */
.topnav {
  background-color: transparent;
  overflow: hidden;
  float: right;
}

/* Style the links inside the navigation bar */
.topnav a {
display: inline-block;
color: #fff;
text-align: center;
padding: 10px 5px;
text-decoration: none;
font-size: 15px;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
margin-top: 20px;
margin-left: 10px;
margin-right: 10px;
}

.topnav a.border{
border-bottom: 2px solid #fff;
}

.block img:hover {
    background: #41D5FA;
	}

/* Change the color of links on hover */
.topnav a:hover {
background-color: transparent;border-bottom: 2px solid #fff;
}

/* Add an active class to highlight the current page */
.topnav a.active {
background-color: transparent;
color: #fff;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
} 

.bgcolor{
background: rgba(3, 39, 68, 0.7);
width: 40%;
margin: 0px auto;
padding: 30px;
text-align: center;
position: relative;
z-index: 9999;
}


.logo{
float:left;
}

#banner{
background: url(../images/banner1.jpg);
padding-top: 20%;
padding-bottom: 20%;
background-size: cover;
background-repeat: no-repeat;
}

.fullheader{
position: absolute;
width: 100%;
top: 30px;
}

.bgcolor h1{
text-transform: uppercase;
font-size: 18px;
letter-spacing: 5px;
font-weight: 800;
color: #41D5FA;margin-bottom: 5px;}

.bgcolor h2{
text-transform: uppercase;
font-size: 40px;
color: #fff;
margin-bottom: 10px;}

.bgcolor p{color: #fff;
font-size: 16px;
line-height: 24px;}

#about{
background: url(../images/aboutbg.jpg);
padding-top: 20%;
padding-bottom: 20%;
background-size: cover;
background-repeat: no-repeat;
}

#about h1{
text-align: center;
text-transform: uppercase;
margin-bottom: 30px;
color: #fff;
font-weight: 100;
letter-spacing: 4px;
font-size: 25px;}

#about h1:after{content: '';
border-bottom: 2px solid #41D5FA;
width: 80px;
margin: 0px auto;
display: block;
padding-top: 20px;}

#about p{color: #fff;
font-size: 16px;
line-height: 24px;
margin-bottom: 20px;
text-align: center;
}


#Investments h1{
text-align: center;
text-transform: uppercase;
margin-bottom: 15px;
color: #fff;
font-weight: 100;
letter-spacing: 4px;
font-size: 25px;}


#Investments{
background: #022238;
padding-top: 10%;
padding-bottom:10%;}

.block {
width: 29%;
display: inline-block;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
vertical-align:top;
}


.block h3{text-align: center;
text-transform: uppercase;
line-height: 28px;
font-size: 25px;
color: #fff;
height: 155px;
font-weight: 800;
margin-top: 50px;
background: #0F465F;
padding-top: 60px;
padding-left: 30px;
padding-right: 30px;
}

.block img{text-align: right;
display: block;
background: #19637E;
padding: 25px;
float: right;
margin-top: 44%;
margin-right: -30px;display: none;}

#copyright .left{
float:left;
}

#copyright .right{
float:right;
}

#copyright{
    background:#022238;
    padding: 20px 0px;
    border-top: 0.5px solid #fff;
}

#copyright ul li{
    display: inline-block;
    margin-left: 10px;
}

#copyright ul li a,
#copyright .left p{
    color: #fff;
}

#copyright ul li a:hover{
    color: #41D5FA;
}


#site-footer h1{
text-align: center;
text-transform: uppercase;
margin-bottom: 30px;
color: #fff;
font-weight: 100;
letter-spacing: 4px;
font-size: 25px;}

#site-footer h1:after{
    content: '';
    border-bottom: 2px solid #41D5FA;
    width: 50px;
    margin: 0px auto;
    display: block;
    padding-top: 20px;
}

#site-footer{
    /*background: url(../images/contact-bg.jpg);*/
    padding-top:10%;
    padding-bottom: 10%;
    background-size: cover;
    background-repeat: no-repeat;border-top: 1px solid #35566C;
    background-color: #022238;
}

#site-footer h2{
font-size: 15px;
margin-bottom: 10px;
margin-top: 20px;
text-transform: uppercase;
color: #fff;
font-weight: 800;
letter-spacing: 2px;}

#site-footer p{
color:#fff;line-height: 23px;
font-size: 16px;}

.section1{
width: 50%;
float: left;
}

.section2{
width: 50%;
float: left;
}

#site-footer .section2 p {
    color: #fff;
    margin-bottom: 30px;
}

.section2 input{width: 100%;
background: #0B2B41;
border: none;
padding: 15px;
color: #fff;
opacity: 1;
font-size: 15px;
letter-spacing: 0px;
font-family: 'Open Sans', sans-serif !important;
margin-bottom:10px;}
.section2 textarea{width: 100%;
background: #0B2B41;
border: none;
padding: 15px;
color: #fff;
opacity: 1;
font-size: 15px;
letter-spacing: 0px;
font-family: 'Open Sans', sans-serif !important;
margin-bottom: 20px;}

.section2 ul li.width1{width: 45%;
float: left;}

.section2 ul li.width2{width: 45%;
float: right;}

.section2 .newbtn{width: auto;
float: right;
background: transparent;
text-transform: uppercase;
font-weight: bold;
padding: 0px;
border-bottom: 2px solid #35566C;cursor: pointer;
margin-right: -30px;}

.section2 form{
width:85%;
}
.section1 ul li{
display:inline-block;
}

.section1 ul li a.line {margin-right: 30px;
border-right: 1px solid #fff;
padding-right: 30px;}

.section1 ul li a{text-decoration: none;
color: #fff;line-height: 23px;
font-size: 16px;}

.section1 ul {    margin-top: 20px;
    margin-bottom: 100px;
}

.newbtn:hover, .topnav a:hover {
    color: #41D5FA;}
	
.block h3:hover {
    background: #fff; color: #000;}
.section1 ul li a:hover {
    color: #41D5FA !important;
	}

#Investments {
    background: url(../images/ivan-bandura.jpg);
        background-repeat: repeat;
        background-size: auto;
    padding-top: 10%;
    padding-bottom: 8%;
    background-size: cover;
    background-repeat: no-repeat;
}

#Investments h4{text-align: center;
color: #fff;
font-size: 14px;
margin-bottom: 50px;
font-weight: 100;}

/*.block h4{margin-top: -35%;
text-align: center;
text-transform: uppercase;
line-height: 28px;
font-size: 0px;
color: #fff;
font-weight: 800;
}

.block h3:hover h4{margin-top: -35%;
text-align: center;
text-transform: uppercase;
line-height: 28px;
font-size: 25px;
color: #fff;
font-weight: 800;background: #fff;
display:block !important;font-size: 25px;}

.block h3:hover{display:none;}*/


.flip-box {
background-color: transparent;
width: 30%;
height: 200px;
border: transparent;
perspective: 1000px;
float: left;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 40px;
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

/* Style the front side */
.flip-box-front {
background-color: #0F465F;
  color: black;
}

/* Style the back side */
.flip-box-back {
    background-color: #fff;
    color: #000;
    transform: rotateY(180deg);
}
.flip-box .flip-box-back h2 {
    color: #000;
    font-size: 16px;
    font-weight: normal;
    text-transform: capitalize;
}
.flip-box h2{
    text-align: center;
    text-transform: uppercase;
    line-height: 28px;
    font-size: 25px;
    color: #fff;
    font-weight: 800;
    padding-top: 50px;
    width: 60%;
    margin: 0px auto;
}

/* CSS Document */














@media screen and (max-width:767px) {
.flip-box {
    background-color: transparent;
    width: 100%;
    height: 200px;
    border: transparent;
    perspective: 1000px;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 40px;}

.particles-js-canvas-el{height: 75% !important;}
.fullheader {
    position: relative;
    width: 100%;
    top: 0;
    background: #000;}
	
	.logo {
    float: none;}
	
	.bgcolor {
    background: rgba(3, 39, 68, 0.7);
    width: 80%;
    margin: 0px auto;
    padding: 10px;
    text-align: center;
}


.section1 {
    width: 100%;
    float: none;}
	.section1 ul {
    margin-top: 20px;
    margin-bottom: 10px;}
	.section2 {
    width: 100%;
    float: none;}
	#copyright .left {
    float: none;
    text-align: center;}
	
	#copyright .right {
    float: none;
    text-align: center;margin-top: 7px;
}
.block {
   width: 100%;
    margin-left: 0;}
	
.logo img{    width: 100%;
    padding-top: 10px;
}
.topnav {
    float: none;
}

#Investments h1 {
    margin-top: 30px;
}
}











 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
.bgcolor h2 {
    font-size: 25px;}
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}