body, html {
  height: 100%;
  margin: 0;
  font-family: Georgia; 
}

.margin{
	margin: 20px;
}
.bg {
  /* The image used */
  background-image: url("media/garlic-bg.jpg");
  height: 100%; 
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size:cover;
  display: flex; 
  justify-content: center; 
  align-items: center;
}

@media only screen and (max-width: 1280px)and (min-width: 1024px) {
.bg {
    height: 110%!important;
  }
}

.bgimg {
display: flex; 
	justify-content: center;
	align-items: center;
}


.caption {
	background-color:white; 
	background-color:rgba(255,255,255,0.80);  
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 720px; 
	width: 100%;
	height:800px;
	border: 2px solid #2e3192; 
	position:relative;
	outline: 20px solid rgba(255,255,255,0.80);
	margin: 20px;
	text-align: center;
	color: #000;
	z-index: 100;

}



.title-blue{
	line-height: 110%; 
	font-weight:800; 
	color: #2e3192; 
	font-size: 63px;
}

.subtitle-italic{
	font-style: italic; 
	font-weight:normal; 
	color: #2e3192; 
	font-size: 35px; 
	margin-bottom:20px;
}


.subtitle-gray{
	line-height: 110%; 
	font-weight:normal; 
	color: #808080; 
	font-size: 35px; 
	margin-bottom: 30px;
}

.gray-bold{
	font-weight:bold; 
	color: #808080; 
	font-size: 22px;
}

.gray{
	line-height: 110%; 
	font-weight:normal; 
	color: #808080; 
	font-size: 22px;
}



.font1{
	font-weight:bold; 
	color: #2e3192; 
	font-size: 18px; 
	margin-top: 20px;
}


.font2{
	color: #2e3192; 
	font-size: 18px; 
	line-height: 130%;
}


.font3{
	font-weight:bold; 
	color: #2e3192; 
	font-size: 18px; 
	margin-top: 20px;
}


.font4{
	color: #2e3192; 
	font-size: 18px; 
	line-height: 130%;
}


.font5{
	color: #2e3192; 
	font-size: 18px; 
	line-height: 130%;
}


.font6{
	color: #2e3192; 
	font-size: 18px; 
	line-height: 130%;
}


.font7{
	font-family: Georgia; 
	font-weight:bold; 
	color: #2e3192; 
	font-size: 18px; 
	margin-top: 20px;
}


.font8{
	color: #2e3192; 
	font-size: 18px; 
	line-height: 130%;
}


.color{
	text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

@media only screen and (max-width: 768px) {
 .bg {
    height: 200%!important;
  }
}


@media only screen and (max-width: 768px) {
	.bg{
		align-items: flex-start!important;
	}

	.caption {
		width: 80%;
		margin-top: 50px;
	}
}


@media only screen and (max-width: 600px) {
	 .bg {
		height: 200%!important;
	  }
	.caption{
		width: 75%;
		height: 900px!important;
	}	
	.title-blue{
		font-size: 35px;
		line-height: 100%;
	}

	.subtitle-italic{
		font-size: 22px; 
		margin-top: 10px;
	}


	.subtitle-gray{
		font-size: 22px; 
	}

	.gray-bold{
		font-size: 19px;
		line-height: 140%;
	}

	.gray{
		font-size: 18px;
		line-height: 130%;
	}
}