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

body{font-family:sans-serif; background:url(https://www.geocities.ws/koper/walpaper.jpg)no-repeat center fixed; background-size:cover; color:white;}

a{text-decoration:none;}

li{list-style:none;}

.container{
  width:80%;
  height:auto;
  margin:0 auto;
  margin-top:50px;
}

/* START HEADER */
.logo img{
  display:block;
  margin:0 auto;
  width:350px;
  height:120px;
  max-width:100%;
}

nav{
  width:80%;
  min-width:100px;
  max-width:80%;
  height:100px;
  margin:0 auto;
  margin-top:50px;
}

nav div{
  width:35%;
  float:left;
  text-align:center;
  background:linear-gradient(to right,#4286f4, #003da0);
}

nav div:hover{
  background:linear-gradient(to right,#003da0, #4286f4);
}

nav div:nth-child(2){
  float:right;
}

nav div a{
  display:block;
  color:white;
  text-decoration:none;
  padding:20px 0;
  font-weight:bold;
}

/*START CONTENT*/

.content{margin-top:30px; font-size:20px; overflow:hidden;}

.content div{
  width:30%;
  float:left;
  text-align:center;
  margin:50px 0;
}

.content div span{
  border:1px solid #0b4eba;
  display:block;
  padding:10px 0;
  cursor:pointer;
}

.content .left{
  margin-right:5%;
}


.content .right{
  float:right;
}

.content .hover p{
  transition:0.8s;
  opacity:0;
  padding:20px 0;
}

.content .hover:hover p{
  opacity:1;
  color:white;
  background:linear-gradient(to right,#4286f4, #003da0);
}

/*INFORMATION*/
.information{
  text-align:center;
  font-size:13px;
  margin-top:10px;
}

.information h2{text-shadow: 2px 2px black; font-size:30px;  margin-top:50px;}

/*START FOOTER*/
.footer{background:#20211f; height:300px; font-size:14px;}

.wrapper-footer{
  height:auto;
  width:80%;
  margin:0 auto;
  overflow:hidden;
  padding:20px 0;
  margin-top:20px;
}

.wrapper-footer h3{color:rgb(255, 110, 0); font-size:18px;}
.wrapper-footer p{padding:3px 0;}

.info-footer{margin-top:13px;}

.footer .left, .footer .mid, .footer .right{width:30%; display:inline-block; height:auto; float:left;}
.footer .left, .footer .mid{margin-right:5%;}
.footer .right{float:right; }
.info-footer a{color:white;}
.info-footer a:hover{color:white;}

.bank {margin:0 auto; width:40%; margin-top:20px; }

@media only screen and ( max-width:750px ) {
  .information h2{font-size:12px;}
  .content {font-size:12px;}
  .info-footer{margin-top:10px;}
  .bank img{display:inline; float:left; width:50%;}
  .footer p {font-size:10px;}
  .footer h3{font-size:12px;}

}/*end media 600px*/