* {
	padding: 0;
	margin: 0;
}

.shell {
	width: 100%;
	margin: 0 auto;
}

.box, .boxx {
	max-width: 800px;
	height: auto;
	margin: 0 auto;
	padding: 1% 0;
}

.boxx {
	display: flex;
}

.boxx-in {
	max-width: 380px;
	width: auto;
	margin: 0 auto;
}

.box-images {
	max-height: 270px;
	height: auto;

	display: flex;
}

.box-img, .img-in, .box-text, .box-images .img-small, .img-big {
	margin: 0 auto;
}

.box-images .img-small .small {
	max-width: 270px;
	width: 100%;
}

.box-images .img-big .big {
	max-width: 460px;
	width: 100%;
	max-height: 270px;
	height: auto;
}

.box-text {
	font-family: "Calibri", sans-serif;
	text-align: center;

	padding: 2% 4%;
}

.box-text .title {
	font-size: 24px;
	font-weight: bold;

	padding: 1% 0;
}

.box-text .info {
	font-size: 15px;
	padding: 0 2%;
}

.boxx .box-text {
	max-width: 400px;
	width: 100%;
}

.boxx .box-text .info {
	text-align: left;
	padding: 3% 0;
}

.boxx .box-text .title {
	text-align: left;
	padding: 4% 0;
}

.boxx .box-text .title-top {
	font-size: 20px;
	text-align: left;
	font-weight: normal;
}

.box-img, .img-in {
	max-height: 380px;
	height: auto;
}

.boxx-in .box-img, .img-in {
	max-width: 380px;
	width: 100%;
}

.color {
	background: rgb(231, 231, 231);
} 

.boxx .boxx-in .box-text, .info {
	padding: 2% 0;
}

.bottom {
	margin: auto;
}

.box-text .bottom-in {
	padding: 0.5% 0 !important;
}


@media only screen and (max-width: 780px) {
	.box, .boxx {
		width: 100%;
	}

	.boxx .boxx-in .box-text h1 {
		padding: 2% 4%;
	}

	.boxx .boxx-in .box-text p {
		padding: 2% 4%;
	}
}

@media only screen and (max-width: 600px) {
	.boxx {
		flex-wrap: wrap;
	}
}