
#modal-02 {
	background:url(../../siteart/p4.png) !important;
	background-repeat: repeat;
	background-color: #ddd;
	
	
	
	font-family: sans-serif;
	color: #fff;
	background-color: #333;
	width: 90%;
	display:inline-block;
	float: none;
}


.animatedModal-Close {
	width: 10%;
	padding: 10px 0px;
	position:absolute;top:8px;right:8px;
	/*display: inline-block;*/
	background: #b32018;
	color: #fff;
	font-family:'Lato', sans-serif;
	font-size:14px;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	text-align:center;
}

.animatedModal-Close:hover {
	background: #b93033;
}

.modalContent {
    height: 50%;
}

.modalContent-Title {
	font-family: 'Lato', sans-serif;
	font-size: 17px;
	color: #000;
	text-align: left;
	margin-bottom: 7px;
}

/* Place text in the middle of the image */
.modalContent-Box {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 15%;
    transform: translate(0%, -50%);
    color: white;
    border: 2px solid #ddd;
    padding: 40px;
    box-sizing: border-box;
    display: inline-block;
    width: 70%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    background: #fff;
    background-size: cover;
    background-position: center;
}

.thirds{width:30%;display:inline-block;margin:1%;}

@media screen and (max-width: 1000px) {
.modalContent-Box{width:85%;left:7.5%;}
}

@media screen and (max-width: 800px) {
.animatedModal-Close{width:15%;}
.thirds{width:46%;}
}

@media screen and (max-width: 600px) {
.thirds{width:96%;}
}

@media screen and (max-width: 480px) {
.animatedModal-Close{width:20%;padding:5px 0;}
}

@media screen and (max-width: 380px) {
.animatedModal-Close{width:25%;}
}