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

* {
  box-sizing: border-box;
}

p{
	color: #6F6F6F;
}

@media only screen and (max-width: 850px){
	p{
		font-size: 13px;
	}
}

@media only screen and (max-width: 750px){
	p{
		font-size: 12px;
	}
}

@media only screen and (max-width: 650px){
	p{
		font-size: 11px;
	}
}

/* --------- title name --------- */
.titlename{
	color: white;
	font-size: 70px;
	font-family: 'Allerta Stencil', sans-serif;
	text-align: center;
	margin: 0px;
	padding-top: 10%;
}

@media only screen and (max-width: 950px){
	.titlename{
		font-size: 65px;
	}
}

@media only screen and (max-width: 890px){
	.titlename{
		font-size: 60px;
		padding-top: 11%;
	}
}

@media only screen and (max-width: 830px){
	.titlename{
		font-size: 55px;
		padding-top: 12%;
	}
}

@media only screen and (max-width: 770px){
	.titlename{
		font-size: 50px;
	}
}

@media only screen and (max-width: 710px){
	.titlename{
		font-size: 45px;
		
	}
}

@media only screen and (max-width: 400px){
	.titlename{
		font-size: 30px;
		padding-top: 15%;
	}
}

.titlename1{
	color: white;
	font-size: 70px;
	font-family: 'Allerta Stencil', sans-serif;
	text-align: center;
	margin: 0px;
	padding-top: 6%;
}

@media only screen and (max-width: 950px){
	.titlename1{
		font-size: 65px;
	}
}

@media only screen and (max-width: 890px){
	.titlename1{
		font-size: 60px;
	}
}

@media only screen and (max-width: 830px){
	.titlename1{
		font-size: 55px;
	}
}

@media only screen and (max-width: 770px){
	.titlename1{
		font-size: 50px;
	}
}

@media only screen and (max-width: 710px){
	.titlename1{
		font-size: 45px;
		
	}
}

@media only screen and (max-width: 400px){
	.titlename1{
		font-size: 30px;
		padding-top: 11%;
	}
}
/* --------- /title name --------- */


/* --------- images --------- */
.img1{
	border: 1px solid #D4D4D4;
  	border-radius: 4px; 
  	padding: 5px; 
}

.img1:hover{
	box-shadow: 0 4px 8px 0 rgba(185,185,185,1.00), 0 6px 20px 0 rgba(143,143,143,1.00);
	cursor: pointer;
}
/* --------- /images --------- */
/* --------- /overall --------- */

/* --------- main section --------- */
/* --------- F1 - section1 --------- */
.sec1{
	background-color: white;
	margin: 0px;
	padding: 0px;
}

/* --------- title name container --------- */
.sectitle1{
	height: 350px;
	background-color: white;
	background-image: url(../images/photography/events/f1.1.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
}

@media only screen and (max-width: 1100px){
	.sectitle1{
		height: 340px;
	}
}

@media only screen and (max-width: 1070px){
	.sectitle1{
		height: 335px;
	}
}

@media only screen and (max-width: 1040px){
	.sectitle1{
		height: 330px;
	}
}

@media only screen and (max-width: 1010px){
	.sectitle1{
		height: 325px;
	}
}

@media only screen and (max-width: 980px){
	.sectitle1{
		height: 320px;
	}
}

@media only screen and (max-width: 950px){
	.sectitle1{
		height: 310px;
	}
}

@media only screen and (max-width: 920px){
	.sectitle1{
		height: 300px;
	}
}

@media only screen and (max-width: 890px){
	.sectitle1{
		height: 290px;
	}
}

@media only screen and (max-width: 860px){
	.sectitle1{
		height: 280px;
	}
}

@media only screen and (max-width: 830px){
	.sectitle1{
		height: 270px;
	}
}

@media only screen and (max-width: 800px){
	.sectitle1{
		height: 260px;
	}
}

@media only screen and (max-width: 770px){
	.sectitle1{
		height: 250px;
	}
}

@media only screen and (max-width: 740px){
	.sectitle1{
		height: 240px;
	}
}

@media only screen and (max-width: 710px){
	.sectitle1{
		height: 230px;
	}
}

@media only screen and (max-width: 680px){
	.sectitle1{
		height: 220px;
	}
}

@media only screen and (max-width: 550px){
	.sectitle1{
		height: 200px;
	}
}
/* --------- /title name container --------- */

/* --------- container for text and images --------- */
#section1{
	height: auto;
	text-align: center;
	font-family: 'Ruda', sans-serif;
	background-color: white;
}
/* --------- /container for text and images --------- */

/* --------- images --------- */
.F1-row1{
  	display: flex;
  	flex-wrap: wrap;
	padding: 0px 70px;
}

.F1-column1{
  	flex: 33.33%;
  	max-width: 33.33%;
 	padding: 7px;
}

@media only screen and (max-width: 830px){
	.F1-row1{
		padding: 0px 55px;
	}
}

@media only screen and (max-width: 770px){
	.F1-row1{
		padding: 0px 40px;
	}
}

@media only screen and (max-width: 680px){
	.F1-row1{
		padding: 0px 25px;
	}
	
	.F1-column1{
		padding: 5px;
	}
}

@media only screen and (max-width: 550px){
	.F1-row1{
		padding: 0px 10px;
	}
}

.F1-row2{
  	display: flex;
  	flex-wrap: wrap;
	padding: 0px 20px;
}

.F1-column2{
  	flex: 20%;
  	max-width: 20%;
 	padding: 5px;
}

@media only screen and (max-width: 680px){
	.F1-column2{
		display: none;
	}
}

.F1-row3{
  	display: none;
  	flex-wrap: wrap;
	padding: 0px 25px;
}

.F1-column3{
  	flex: 33.33%;
  	max-width: 33.33%;
 	padding: 7px;
}

.F1-row4{
  	display: none;
  	flex-wrap: wrap;
	padding: 0px 100px;
}

.F1-column4{
  	flex: 50%;
  	max-width: 50%;
 	padding: 7px;
}

@media only screen and (max-width: 680px){
	.F1-row3{
		display: flex;
	}
	
	.F1-row4{
		display: flex;
	}
}

@media only screen and (max-width: 600px){
	.F1-row4{
		padding: 0px 95px;
	}
}
/* --------- /images --------- */
/* --------- /F1 - section1 --------- */

/* --------- LKY - section2 --------- */
.sec2{
	background-color: white;
	margin: 0px;
	padding: 0px;
}

/* --------- title name container --------- */
.sectitle2{
	height: 350px;
	background-color: pink;
	background-image: url(../images/photography/events/LKY/LKY02.JPG);
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	text-align: center;
}

@media only screen and (max-width: 1100px){
	.sectitle2{
		height: 340px;
	}
}

@media only screen and (max-width: 1070px){
	.sectitle2{
		height: 335px;
	}
}

@media only screen and (max-width: 1040px){
	.sectitle2{
		height: 330px;
	}
}

@media only screen and (max-width: 1010px){
	.sectitle2{
		height: 325px;
	}
}

@media only screen and (max-width: 980px){
	.sectitle2{
		height: 320px;
	}
}

@media only screen and (max-width: 950px){
	.sectitle2{
		height: 310px;
	}
}

@media only screen and (max-width: 920px){
	.sectitle2{
		height: 300px;
	}
}

@media only screen and (max-width: 890px){
	.sectitle2{
		height: 290px;
	}
}

@media only screen and (max-width: 860px){
	.sectitle2{
		height: 280px;
	}
}

@media only screen and (max-width: 830px){
	.sectitle2{
		height: 270px;
	}
}

@media only screen and (max-width: 800px){
	.sectitle2{
		height: 260px;
	}
}

@media only screen and (max-width: 770px){
	.sectitle2{
		height: 250px;
	}
}

@media only screen and (max-width: 740px){
	.sectitle2{
		height: 240px;
	}
}

@media only screen and (max-width: 710px){
	.sectitle2{
		height: 230px;
	}
}

@media only screen and (max-width: 680px){
	.sectitle2{
		height: 220px;
	}
}

@media only screen and (max-width: 550px){
	.sectitle2{
		height: 200px;
	}
}
/* --------- /title name container --------- */

/* --------- container for text and images --------- */
#section2{
	height: auto;
	text-align: center;
	font-family: 'Ruda', sans-serif;
	background-color: white;
}
/* --------- /container for text and images --------- */

/* --------- images --------- */
#LKYimgedit{
	margin-top: 8%;
}

.LKY-row1{
  	display: flex;
  	flex-wrap: wrap;
	padding: 0px 20px;
}

.LKY-column1{
  	flex: 33.33%;
  	max-width: 33.33%;
 	padding: 7px;
}

@media only screen and (max-width: 680px){
	.LKY-row1{
		padding: 0px 10px;
	}
	
	.LKY-column1{
		padding: 5px;
	}
}

@media only screen and (max-width: 550px){
	.LKY-row1{
		padding: 0px 5px;
	}
}

.LKY-row2{
  	display: flex;
  	flex-wrap: wrap;
	margin: 0px 15%;
}

.LKY-column2{
  	flex: 50%;
  	max-width: 50%;
 	padding: 7px;
}

@media only screen and (max-width: 400px){
	#LKYimgedit{
		margin-top: 0;
	}
	
	.LKY-column1, .LKY-column2{
		flex: 100%;
		max-width: 100%;
	}
	
	.LKY-row1{
		margin: 0px;
	}
	
	.LKY-row2{
		padding: 0px 10px;
		margin: 0px;
	}
}
/* --------- /images --------- */

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

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

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

.container:hover .category-text{
	opacity: 1;
	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;
	}
}
/* --------- /LKY - section2 --------- */

/* --------- FarOcean - section3 --------- */
.sec3{
	background-color: white;
	margin: 0px;
	padding: 0px;
	height: 550px;
	display: none;
}


/* --------- title name container --------- */
.sectitle3{
	height: 350px;
	background-color: lightblue;
/*	background-image: url(../images/photography/events/farocean.jpg);*/
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	text-align: center;
}

@media only screen and (max-width: 1100px){
	.sectitle3{
		height: 340px;
	}
}

@media only screen and (max-width: 1070px){
	.sectitle3{
		height: 335px;
	}
}

@media only screen and (max-width: 1040px){
	.sectitle3{
		height: 330px;
	}
}

@media only screen and (max-width: 1010px){
	.sectitle3{
		height: 325px;
	}
}

@media only screen and (max-width: 980px){
	.sectitle3{
		height: 320px;
	}
}

@media only screen and (max-width: 950px){
	.sectitle3{
		height: 310px;
	}
}

@media only screen and (max-width: 920px){
	.sectitle3{
		height: 300px;
	}
}

@media only screen and (max-width: 890px){
	.sectitle3{
		height: 290px;
	}
}

@media only screen and (max-width: 860px){
	.sectitle3{
		height: 280px;
	}
}

@media only screen and (max-width: 830px){
	.sectitle3{
		height: 270px;
	}
}

@media only screen and (max-width: 800px){
	.sectitle3{
		height: 260px;
	}
}

@media only screen and (max-width: 770px){
	.sectitle3{
		height: 250px;
	}
}

@media only screen and (max-width: 740px){
	.sectitle3{
		height: 240px;
	}
}

@media only screen and (max-width: 710px){
	.sectitle3{
		height: 230px;
	}
}

@media only screen and (max-width: 680px){
	.sectitle3{
		height: 220px;
	}
}

@media only screen and (max-width: 550px){
	.sectitle3{
		height: 200px;
	}
}
/* --------- /title name container --------- */

.FO-row1{
  	display: flex;
  	flex-wrap: wrap;
	margin: 0px 15px;
}

.FO-column1{
  	flex: 16.66%;
  	max-width: 16.66%;
 	padding: 4px;
}

@media only screen and (max-width: 850px){
	.FO-column1{
		flex: 33.33%;
  		max-width: 33.33%;
	}
}

@media only screen and (max-width: 680px){
	.FO-column1{
		flex: 50%;
  		max-width: 50%;
	}
}
/* --------- /FarOcean - section3 --------- */

/* --------- Clubmed - section4 --------- */
.sec4{
	background-color: white;
	margin: 0px;
	padding: 0px;
	height: 550px;
	display: none;
}

.sectitle4{
	height: 350px;
	background-color: pink;
/*	background-image: url(../images/photography/events/farocean.jpg);*/
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	text-align: center;
}

@media only screen and (max-width: 1100px){
	.sectitle4{
		height: 340px;
	}
}

@media only screen and (max-width: 1070px){
	.sectitle4{
		height: 335px;
	}
}

@media only screen and (max-width: 1040px){
	.sectitle4{
		height: 330px;
	}
}

@media only screen and (max-width: 1010px){
	.sectitle4{
		height: 325px;
	}
}

@media only screen and (max-width: 980px){
	.sectitle4{
		height: 320px;
	}
}

@media only screen and (max-width: 950px){
	.sectitle4{
		height: 310px;
	}
}

@media only screen and (max-width: 920px){
	.sectitle4{
		height: 300px;
	}
}

@media only screen and (max-width: 890px){
	.sectitle4{
		height: 290px;
	}
}

@media only screen and (max-width: 860px){
	.sectitle4{
		height: 280px;
	}
}

@media only screen and (max-width: 830px){
	.sectitle4{
		height: 270px;
	}
}

@media only screen and (max-width: 800px){
	.sectitle4{
		height: 260px;
	}
}

@media only screen and (max-width: 770px){
	.sectitle4{
		height: 250px;
	}
}

@media only screen and (max-width: 740px){
	.sectitle4{
		height: 240px;
	}
}

@media only screen and (max-width: 710px){
	.sectitle4{
		height: 230px;
	}
}

@media only screen and (max-width: 680px){
	.sectitle4{
		height: 220px;
	}
}

@media only screen and (max-width: 550px){
	.sectitle4{
		height: 200px;
	}
}
/* --------- /title name container --------- */
/* --------- /Clubmed - section4 --------- */

/* --------- Festive Occasions - section5 --------- */
/* --------- title name container --------- */
.sec5{
	background-color: white;
	margin: 0px;
	padding: 0px;
	height: 1000px;
}

@media only screen and (max-width: 950px){
	.sec5{
		height: 850px;
	} 
}

@media only screen and (max-width: 850px){
	.sec5{
		height: 750px;
	}
}

@media only screen and (max-width: 750px){
	.sec5{
		height: 650px;
	}
}

@media only screen and (max-width: 650px){
	.sec5{
		height: 550px;
	}
}

.sectitle5{
	height: 350px;
	background-color: darkseagreen;
	background-image: url("../images/photography/festive occasions.JPG");
	background-repeat: no-repeat;
	background-position: top;
	background-size: cover;
	text-align: center;
}

@media only screen and (max-width: 1100px){
	.sectitle5{
		height: 340px;
	}
}

@media only screen and (max-width: 1070px){
	.sectitle5{
		height: 335px;
	}
}

@media only screen and (max-width: 1040px){
	.sectitle5{
		height: 330px;
	}
}

@media only screen and (max-width: 1010px){
	.sectitle5{
		height: 325px;
	}
}

@media only screen and (max-width: 980px){
	.sectitle5{
		height: 320px;
	}
}

@media only screen and (max-width: 950px){
	.sectitle5{
		height: 310px;
	}
}

@media only screen and (max-width: 920px){
	.sectitle2{
		height: 300px;
	}
}

@media only screen and (max-width: 890px){
	.sectitle5{
		height: 290px;
	}
}

@media only screen and (max-width: 860px){
	.sectitle5{
		height: 280px;
	}
}

@media only screen and (max-width: 830px){
	.sectitle5{
		height: 270px;
	}
}

@media only screen and (max-width: 800px){
	.sectitle5{
		height: 260px;
	}
}

@media only screen and (max-width: 770px){
	.sectitle5{
		height: 250px;
	}
}

@media only screen and (max-width: 740px){
	.sectitle5{
		height: 240px;
	}
}

@media only screen and (max-width: 710px){
	.sectitle5{
		height: 230px;
	}
}

@media only screen and (max-width: 680px){
	.sectitle5{
		height: 220px;
	}
}

@media only screen and (max-width: 550px){
	.sectitle5{
		height: 200px;
	}
}

.FO-row1{
  	display: flex;
  	flex-wrap: wrap;
	padding: 0px 70px;
}

.FO-column1{
  	flex: 50%;
  	max-width: 50%;
 	padding: 7px;
}

.FO-row2{
  	display: flex;
  	flex-wrap: wrap;
	padding: 0px 70px;
}

.FO-column2{
  	flex: 33.33%;
  	max-width: 33.33%;
 	padding: 7px;
}

@media only screen and (max-width: 650px){
	.FO-row1{
		padding: 0px 20px;
	}
	
	.FO-row2{
		padding: 0px 20px;
	}
}
/* --------- /title name container --------- */
/* --------- /Festive Occasions - section5 --------- */
/* --------- /main section --------- */