@charset "UTF-8";
/*
 * Main cascading styles for amis
 *
 * @author     David Cürten
 * @since      16.02.2020
 *
 * @category   main
 * @copyright  2020 aveta | David Cürten
 * @version    1.0.0
 */

html {
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: 'Oswald', sans-serif;
}

.main-container {
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	overflow: hidden;
	background-size: contain;
	background-image: url("https://ofidio.de/img/background.jpg");
}

.content-wrapper {
	min-height: 100vh;
	display: flex;
	flex-flow: column;
}

.main-content {
	position: relative;
	margin: auto;
	max-width: 600px;
	max-height: 300px;
}

.card-box {
	width: 500px;
	height: 300px;
}

.card-box-top {
	background-color: #149098;
	border: 1px solid #064b4f;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}

.card-box-bottom {
	background-color: #ffffff;
	color: #149098;
	border: 1px solid #898989;
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}

.card-box-top .image-wrapper {
	position: relative;
	margin: 50px 150px;
	width: 200px;
	height: 200px;
}

.card-box-top-background {
	position: relative;
	top:0;
	
	-moz-transform: rotate(10deg);
	-ms-transform: rotate(10deg);
	-o-transform: rotate(10deg);
	-webkit-transform: rotate(10deg);
	transform: rotate(10deg);
	
	z-index: 10;
}

.card-box-top-foreground {
	position: relative;
	top: -300px;
	
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	
	z-index: 20;
}

.card-box-bottom-background {
	position: relative;
	top:0;
	
	-moz-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);
	-webkit-transform: rotate(-10deg);
	transform: rotate(-10deg);
	
	z-index: 15;
}

.card-box-bottom-foreground {
	position: relative;
	top: -300px;
	
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	
	z-index: 25;
}

.info-box-logo {
	float:left;
	margin: 20px 43px;
	width: 80px;
	height: 100px;
}

.info-box-header {
	float:left;
	margin: 20px 10px;
	width: 145px;
	height: 100px;
	bottom: 0;
	font-size: 28px;
	text-align: center;
}

.info-box-empty {
	float:left;
	margin: 20px 10px;
	width: 145px;
	height: 100px;
}

.info-box-product {
	float: left;
	margin: 10px;
	width: 179px;
	height: 140px;
	color: #898989;
	text-align: right;
}

.info-box-contact {
	float:left;
	margin: 10px;
	width: 279px;
	height: 140px;
	text-align: left;
}