@charset "UTF-8";
/* CSS Document */
/* --------- overall --------- */
body, html{
	height: 100%;
	background-color: #2E2A51;
}

* {
  box-sizing: border-box;
}

p{
	margin-left: 10px;
}

/* --------- /overall --------- */

/* --------- top section --------- */
/* --------- image --------- */
.text-container{
	background-image: url("../images/imgs/quote1.JPG");
	background-size: cover;
	height: 675px;
	margin-top: 25px;
	background-position: center;
	background-color: #2E2A51;
	background-attachment: inherit;
}

@media only screen and (max-width: 550px){
	.text-container, .introbtn{
		display: none;
	}
}
/* --------- /image --------- */

/* --------- text --------- */
.text{
	color: white;
	font-size: 200%; 
	text-align: center;
	position: absolute;
	top: 52%;
	left: 58%;
	transform: translate(-50%, -50%);
	mix-blend-mode: screen;
	width: 100%;
}
/* --------- /text --------- */

@media only screen and (max-width: 980px){
	.text{
		font-size: 190%; 
	}
}

@media only screen and (max-width: 850px){
	.text{
		font-size: 180%; 
	}
}

@media only screen and (max-width: 795px){
	.text{
		font-size: 170%; 
	}
}

@media only screen and (max-width: 750px){
	.text{
		font-size: 160%; 
	}
}

@media only screen and (max-width: 660px){
	.text{
		font-size: 150%; 
		left: 60%;
	}
}

@media only screen and (max-width: 550px){
	.text{ 
		left: 61%;
	}
}

@media only screen and (max-width: 490px){
	.text-container{
		background-image: url("../images/imgs/quote3.JPG");
	}
	
	.text{
		font-size: 140%; 
		left: 62%;
	}
}

.textstyle{
	color: #BF639F;
	font-family: 'Amatic SC', cursive;
	line-height: 175%;
}

.textstyle1{
	color: #44A5CD;
	font-family: 'Cookie', cursive;
	font-size: 170%; 
	line-height: 175%;
}
/* --------- /top section --------- */

/* --------- main section --------- */
.title{
	font-size: 25px;
	margin-bottom: 5px;
}

#sec1{
	padding: 15px; 
	background-color: white;
}

.secname{
	color: #7069B1;
	margin: 0px 2px;
	font-size: 16px;
	font-weight: bold;
	font-family: 'Open Sans Condensed', sans-serif;
}

.main{
	padding: 20px 100px;
}

@media only screen and (max-width: 1200px){
	.main{
		padding: 30px 85px;
	}
}

@media only screen and (max-width: 1160px){
	.main{
		padding: 40px 70px;
	}
}

@media only screen and (max-width: 1100px){
	.main{
		padding: 45px 60px;
	}
}

@media only screen and (max-width: 1000px){
	.main{
		padding: 50px 50px;
	}
}

@media only screen and (max-width: 950px){
	.main{
		padding: 55px 40px;
	}
}

@media only screen and (max-width: 780px){
	.main{
		padding: 0px 30px;
	}
}

@media only screen and (max-width: 550px){
	.main{
		padding: 0px 20px;
	}
}

.emptysec, .emptysec2{
	height: 55px;
}

.row{
  	display: flex;
  	flex-wrap: wrap;
	margin-left: 30px;
}

.column{
  	flex: 33.33%;
  	max-width: 33.33%;
 	padding: 3px;
}
/*
@media only screen and (max-width: 780px){
	.column{
		flex: 50%;
  		max-width: 50%;
	}
}

@media only screen and (max-width: 400px){
	.row{
		padding: 10px 20px;
	}
	
	.column{
		flex: 100%;
  		max-width: 100%;
	}
}
*/

@media only screen and (max-width: 600px){
	.row{
		padding: 10px 20px;
	}
	
	.column{
		flex: 100%;
  		max-width: 100%;
	}
}

.container{
  position: relative;
  color: white;
}

.image{
	filter: grayscale(100%);
}

.category-text{
	font-size: 40px;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	opacity: 1;
	text-align: center;
}

.container:hover .image{
	opacity: 1;
	filter: grayscale(0%);
	cursor: pointer;
}

.container:hover .category-text{
	opacity: 0;
	cursor: pointer;
	font-family: 'Ruda', sans-serif;
}

@media only screen and (max-width: 875px){
	.category-text {
		font-size: 28px;
	}
}

@media only screen and (max-width: 780px){
	.category-text {
		font-size: 30px;
	}
}

@media only screen and (max-width: 600px){
	.category-text {
		font-size: 25px;
	}
}
/* --------- /main section --------- */