body {
  display: flex;
  align-items: center;
  min-height: 100vh;
  background-image: url("slike/sky_background.jpg");

}

.myButton {
	box-shadow: 0px 0px 0px 2px #9fb4f2;
	background:linear-gradient(to bottom, #7396d4 5%, #104680 100%);
	background-color:#7396d4;
	border-radius:10px;
	border:1px solid #4e6096;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:14px;
	padding:8px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #283966;
  position:absolute;
  top:0;
  right:0;
}
.myButton:hover {
	background:linear-gradient(to bottom, #104680 5%, #7396d4 100%);
	background-color:#104680;
}
.myButton:active {
	position:absolute;
	top:1px;
}


.s_logo_pipistrel {
  position:absolute;
  top:0;
  left:0;
  max-width: 150px;
}
.s_logo_meden {
  position: absolute;
  bottom: 0;
  right: 0;
  max-width: 150px;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 340px;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .s_logo_pipistrel{
    max-width: 250px;
  }
  .s_logo_meden{
    max-width: 250px;
  }
  .grid {
    max-width: 1200px;
 }
}
.card {
  position: relative;
  flex: 1 1 100%;
  margin: 31px 0;
  padding: 20px;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .card {
    flex-basis: calc(33.33% - (62px + 40px));
    margin: 0 31px;
 }
}
.card__thumb {
  overflow: hidden;
}
.card__img {
  margin: -20px -20px 0;
}
.card__img img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
  box-sizing: border-box;
}
.card__desc {
  margin-top: 20px;
}
.card__two .card__img {
  padding: 20px;
}
.card__one {
  transition: transform 0.5s;
}
.card__one::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 2s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .15);
  content: '';
  opacity: 0;
  z-index: -1;
}
.card__one:hover, .card__one:focus {
  transform: scale3d(1.08, 1.08, 1);
}
.card__one:hover::after, .card__one:focus::after {
  opacity: 1;
}
.card__two::before, .card__two::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.38s ease-in-out, transform 0.35s ease-in-out;
  content: '';
  opacity: 0;
  pointer-events: none;
}
.card__two::before {
  transform: scale3d(0, 1, 1);
  transform-origin: left top;
  border-top: 1px solid #acacac;
  border-bottom: 1px solid #acacac;
}
.card__two::after {
  transform: scale3d(1, 0, 1);
  transform-origin: right top;
  border-right: 1px solid #acacac;
  border-left: 1px solid #acacac;
}
.card__two:hover::before, .card__two:focus::before, .card__two:hover::after, .card__two:focus::after {
  transform: scale3d(1, 1, 1);
  opacity: 1;
}
.card__three::before, .card__three::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: scale3d(0, 0, 1);
  transition: transform 0.3s ease-out 0s;
  background: rgba(255, 255, 255, .1);
  content: '';
  pointer-events: none;
}
.card__three::before {
  transform-origin: left top;
}
.card__three::after {
  transform-origin: right bottom;
}
.card__three:hover::before, .card__three:focus::before, .card__three:hover::after, .card__three:focus::after {
  transform: scale3d(1, 1, 1);
}