*{
	margin: 0;
	padding: 0;
}

/*----HOME MENU----*/


.header{
	min-height: 100vh;
	width: 100%;
	height: 100%;
	background-color: #2A5068;
	position: fixed;
}
nav{
	display: flex;
	padding: 2% 6%;
	justify-content: space-between;
	align-items: center;
}
nav img{
	width: 70px;
}
.nav-links{
	flex: 1;
	text-align: right;
}
.nav-links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
	font-family: 'Berkshire Swash', cursive;
}
.nav-links ul li a{
	color: #E06152;
	text-decoration: none;
	font-size: 20px;
}
.nav-links ul li::after{
	content: '';
	width: 0%;
	height: 2px;
	background: #D5E2EA;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.nav-links ul li:hover::after{
	width: 100%;
}
.title-text{
	width: 90%;
	color: #D5E2EA;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}
.title-text h1{
	font-size: 80px;
	line-height: 90%;
	font-family: 'Berkshire Swash', cursive;
}
.title-text h2{
	font-size: 80px;
	padding-top: 20px;
	font-family: 'Berkshire Swash', cursive;
}
.title-text p{
	color: #E06152;
	font-size: 20px;
	font-family: 'Nunito Sans', sans-serif;
	padding-top: 30px;
}

@media only screen and (max-width: 600px){
	.header img{
		width: 50px;
	}
	.title-text h1{
		font-size: 40px;
	}
	.title-text h2{
		font-size: 40px;
	}
	.nav-links ul li a{
	font-size: 15px;
	}
}
/*-------latest------*/
.barrier{
	width: 100%;
	background-image: url("images/oval.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 600px;
	margin: auto;
	padding-top:130px;
	padding-bottom: 90px;
}
.latest{
	background-color: #D5E2EA;
	background-image: url("images/back.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	top: 818px;
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
}
.latest h1{
	font-size: 40px;
	font-family: 'Berkshire Swash', cursive;
	color: #E06152;
	padding-top: 20px;
	padding-bottom:1200px;
}
.latest h2{
	font-size: 50px;
	font-family: 'Berkshire Swash', cursive;
	color: #2A5068;
}
.row{
	justify-content: center;
	width: 100%;
	display: flex;
}
.picture-row{
	width: 300px;
	height: 450px;
	border-radius: 15px;
	position: relative;
	overflow: hidden;
	margin: 70px 40px 400px 40px;
}
.picture-row img{
	width: 300px;
	display: block;
}
.layer{
	background: transparent;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: 0.5s;
}
.layer:hover{
	background-color: #EDBEB4;
	opacity: 0.7;
}
.layer h3{
	width: 100%;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
	color: #2A5068;
	font-size: 25px;
	left: 50%;
	bottom: 0;
	transform: translate(-50%);
	position: absolute;
	opacity: 0;
	transition: 0.5s;
}
.layer:hover h3{
	opacity: 1;
	bottom: 60%;
}
.layer p{
	width: 100%;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	color: #2A5068;
	font-size: 12px;
	left: 50%;
	bottom: 0;
	transform: translate(-50%);
	position: absolute;
	opacity: 0;
	transition: 0.5s;
}
.layer:hover p{
	opacity: 1;
	bottom: 30%;
}
.layer a{
	text-decoration: none;
	background-color: #2A5068;
	padding: 10px;
	border-radius: 10px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
	color: #F9E9E1;
	font-size: 12px;
	left: 50%;
	bottom: 0;
	transform: translate(-50%);
	position: absolute;
	opacity: 0;
	transition: 0.5s;
}
.layer:hover a{
	opacity: 1;
	bottom: 10%;
}
.contact-barrier{
	width: 100%;
	background-image: url("images/oval.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	top: 2832px;
	margin: auto;
	padding-top:130px;
	padding-bottom: 90px;
}

@media only screen and (max-width: 600px){
	.row{
		width: 100%;
		display: block;
		padding-bottom: 70px;
	}
	.picture-row{
		margin-top: 20px;
		margin-bottom: 50px;
	}
	.latest h1{
		padding-bottom: 1400px;
	}
	.contact-barrier{
		top: 3400px;
	}
}

/*-----contact-----*/
.contact{
	background-color: #D5E2EA;
	top: 800px;
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
}
.contact-row{
	justify-content: center;
	width: 100%;
	display: flex;
}
.contact-col{
	flex-basis: 30%;
	height: 450px;
	position: relative;
	overflow: hidden;
	margin-top: 70px;
	padding: 10px;
}
.contact-col h3{
	font-size: 45px;
	text-align: right;
	font-family: 'Berkshire Swash', cursive;
	color: #2A5068;
}
.contact-col img{
	width: 350px;
	display: block;
}
.contact-btn{
	display: flex;
	text-decoration: none;
	color: #EDBEB4;
	border-radius: 50px;
	padding: 20px;
	font-size: 18px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	background-color: #2A5068;
	position: relative;
	left: 50%;
	width: 20%;
	cursor: pointer;
}
.contact-btn:hover{
	background-color: #EDAB79;
	color: #E06152;
	transition: 1s;
}

/*-----footer-----*/
.footer{
	background-color: #EDBEB4;
	width: 100%;
	position: relative;
	top: 800px;
}
.footer-nav{
	display: flex;
	padding: 2% 6%;
	justify-content: space-between;
	align-items: center;
}
.logo img{
	padding-top: 70px;
	padding-left: 100px;
	width: 70px;
}
.footer-links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
	font-family: 'Berkshire Swash', cursive;
}
.footer-links ul li a{
	color: #E06152;
	text-decoration: none;
	font-size: 15px;
}
.footer-links ul li::after{
	content: '';
	width: 0%;
	height: 2px;
	background: #D5E2EA;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.footer-links ul li:hover::after{
	width: 100%;
}
.footer-nav{
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 15px;
	color: #E06152;
}
@media only screen and (max-width: 600px){
	.contact-row{
		display: block;
	}
	.contact-col h3{
		font-size: 40px;
		text-align: center;
		padding-bottom: 50px;
	}
	.contact-btn{
		left: 35%;
		text-align: center;
	}
	.contact-col img{
		justify-content: center;
	}
	.logo img{
		padding-left: 20px;
	}
	.footer-nav{
		padding-right: 12px;
	}
	.footer-links ul li{
		padding-right: 0;
	}
}

/*---CONTACT MENU----*/


/*------Contact Header------*/
.contact-header{
	min-height: 100vh;
	width: 100%;
	height: 100%;
	background-color: #EDAB79;
	position: fixed;
}
nav{
	display: flex;
	padding: 2% 6%;
	justify-content: space-between;
	align-items: center;
}
nav img{
	width: 70px;
}
.contact-links{
	flex: 1;
	text-align: right;
}
.contact-links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
	font-family: 'Berkshire Swash', cursive;
}
.contact-links ul li a{
	color: #2A5068;
	text-decoration: none;
	font-size: 20px;
}
.contact-links ul li::after{
	content: '';
	width: 0%;
	height: 2px;
	background: #D5E2EA;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.contact-links ul li:hover::after{
	width: 100%;
}
.contact-title{
	width: 90%;
	color: #D5E2EA;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
}
.contact-title h1{
	font-size: 80px;
	line-height: 90%;
	font-family: 'Berkshire Swash', cursive;
}
.contact-title p{
	color: #E06152;
	font-size: 20px;
	font-family: 'Nunito Sans', sans-serif;
	padding-top: 50px;
}


/*-----Registration-----*/
.regist{
	position: absolute;
	background-color: #EDAB79;
	width: 100%;
	height: 600px;
	top: 700px;
	display: inline-flex;
	transition: 1s;
}
.regist-left{
	flex-basis: 40%;
	padding: 40px;
	color: #2A5068;
	font-family: 'Berkshire Swash', cursive;
	text-align: right;
	font-size: 30px;
}
.regist-left img{
	width: 100px;
	padding-bottom: 20px;
	padding-top: 30px;
}
.regist-right{
	background-color: #EDAB79;
	flex-basis: 60%;
	padding: 40px;
	color: #2A5068;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	text-align: left;
	font-size: 15px;
}
.input-row{
	 flex-basis: 45%;
	 padding-top: 20px;
	 padding-bottom: 10px;
}
label{
	font-size: 20px;
}
input{
	width: 100%;
	height: 30px;
	font-size: 18px;
	background-color: #F9E9E1;
	border-radius: 5px;
	padding-bottom: 5px;
	outline: none;
	border: none;
}
textarea{
	width: 100%;
	background-color: #F9E9E1;
	border-radius: 15px;
	padding-bottom: 5px;
	outline: none;
	border: none;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
	font-size: 18px;
}
button{
	font-size: 20px;
	font-weight: 700;
	font-family: 'Nunito Sans', sans-serif;
	background: #D5E2EA;
	width: 70px;
	border: none;
	outline: none;
	color: #E06152;
	height: 50px;
	border-radius: 30px;
	margin-top: 20px;
	box-shadow: 0 5px 15px 0 rgba(28, 0, 181, 0.3);
	cursor: pointer;
}
.regist .fas{
	display: block;
	color: #2A5068;
	margin-top: 40px;
	margin-left: 40px;
	font-size: 30px;
	cursor: pointer;
}
.contact-footer{
	background-color: #EDBEB4;
	width: 100%;
	position: relative;
	top: 1300px;
}

@media only screen and (max-width: 600px){
	.contact-header img{
		width: 50px;
	}
	.regist{
		display: block;
	}
	.contact-footer{
		top: 1750px;
	}
}

/*------PORTFOLIO MENU-----*/
.portfolio-header{
	min-height: 100vh;
	width: 100%;
	height: 100%;
	background-color: #F9E9E1;
	position: fixed;
}
.portfolio{
	background-color: #F9E9E1;
	top: 250px;
	width: 100%;
	height: 1500px;
	margin: auto;
	text-align: center;
	position: relative;
}
.portfolio-col{
	margin-bottom: 200px;
	justify-content: center;
}
.portfolio-col h1{
	font-size: 50px;
	line-height: 90%;
	font-family: 'Berkshire Swash', cursive;
	color: #2A5068;
}
.portfolio-col p{
	color: #EDBEB4;
	font-size: 15px;
	font-family: 'Nunito Sans', sans-serif;
	padding-top: 50px;
	padding-bottom: 60px;

}
.portfolio-col ul li{
	list-style: none;
	display: block;
	padding: 20px 12px;
	position: relative;
	font-family: 'Berkshire Swash', cursive;
}
.portfolio-col ul li a{
	color: #EDBEB4;
	text-decoration: none;
	font-size: 30px;
}
.portfolio-col ul li a:hover{
	color: #2A5068;
	transition: 0.5s;
}
.portfolio-col ul li::after{
	content: '';
	width: 0%;
	height: 3px;
	background: #D5E2EA;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.portfolio-col ul li:hover::after{
	width: 40%;

}
.portfolio-barrier{
	width: 100%;
	background-image: url("images/oval.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	padding-top:130px;
	padding-bottom: 90px;
	top: 1282px;
}
.contact-port{
	background-color: #D5E2EA;
	width: 100%;
	position: relative;
	top: 0px;
}
.port-footer{
	background-color: #EDBEB4;
	width: 100%;
	position: relative;
	top: 0px;
}

@media only screen and (max-width: 600px){
	.portfolio-header img{
		width: 50px;
	}
	.portfolio-barrier{
		top: 1382px;
	}
}

/*-------ABOUT MENU------*/

.about-header{
	min-height: 100vh;
	width: 100%;
	height: 100%;
	background-color: #F9E9E1;
	position: fixed;
}
.about-title{
	width: 100%;
	color: #2A5068;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	text-align: center;
	font-size: 50px;
	font-family: 'Berkshire Swash', cursive;
}
.about{
	background-color: #F9E9E1;
	width: 100%;
	top: 700px;
	text-align: center;
	position: relative;
}
.about img{
	width: 400px;
}
.intro{
	background-color: #F9E9E1;
	width: 100%;
	text-align: center;
	position: relative;
	justify-content: center;
	display: flex;
}
.intro h1{
	font-size: 50px;
	font-family: 'Berkshire Swash', cursive;
	color: #EDAB79;
	position: absolute;
	
}
.intro p{
	padding-top: 250px;
	padding-bottom: 200px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 20px;
	font-weight: 400;
	color: #2A5068;
	width: 50%;
	background-image: url("images/circles.png");
	background-repeat: no-repeat;
	background-size: 300px;
	background-position: center;
}
.fun-fact{
	background-color: #EDBEB4;
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
	justify-content: center;
}
.fun-fact h3{
	padding-top: 100px;
	padding-bottom: 70px;
	font-size: 50px;
	font-family: 'Berkshire Swash', cursive;
	color: #2A5068;
}
.fun-q{
	padding-top: 70px;
	padding-bottom: 250px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: #2A5068;
	background-image: url("images/oval2.png");
	position: relative;
  	background-size: 100% 100%;
}
.info{
	background-color: #F9E9E1;
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
	display: flex;
	justify-content: center;
}
.info p{
	width: 50%;
	padding-top: 50px;
	margin-top: 50px;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 25px;
	font-weight: 400;
	color: #2A5068;
}
.social-media{
	background-color: #F9E9E1;
	width: 100%;
	margin: auto;
	text-align: center;
	position: relative;
	padding-top: 50px;
	padding-bottom: 300px;
}
.social-media h3{
	padding-top: 100px;
	padding-bottom: 70px;
	font-size: 50px;
	font-family: 'Berkshire Swash', cursive;
	color: #EDBEB4;
}
.sosmed-icons{
	display: flex;
	justify-content: center;
	font-size: 50px;
	padding: 20px;
}
.fab{
	margin: 0 50px;
	background-color: #EDAB79;
	padding: 40px; 
	border-radius: 60px;
	text-decoration: none;
	color: #2A5068;
}
.about-barrier{
	width: 100%;
	background-image: url("images/oval.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	position: absolute;
	margin: auto;
	padding-top:130px;
	padding-bottom: 90px;
	top: 3000px;
}
.contact-about{
	background-color: #D5E2EA;
	width: 100%;
	position: relative;
	top:662.5px;
}
.about-footer{
	background-color: #EDBEB4;
	width: 100%;
	position: relative;
	top: 650px;
}

@media only screen and (max-width: 600px){
	.about-title{
		top: 300px;
		font-size: 40px;
	}
	
}


/*------WEB BOM-----*/
.webbom-header{
	min-height: 100vh;
	width: 100%;
	height: 1700px;
	background-color: #D5E2EA;
	position: absolute;
}
.fas{
	margin-top: 30px;
	font-size: 40px;
	color: #EDAB79;
}
.slide-title{
	position: relative;
	text-align: center;
	color: #2A5068; 
	top: 200px;
	left: 50%;
	transform: translate(-50%);
}
.slide-title h3{
	font-size: 30px;
	font-family: 'Berkshire Swash', cursive;
}
.slide-title p{
	margin-top: 50px;
	font-size: 15px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 400;
}
.slidershow{
  width: 700px;
  height: 400px;
  overflow: hidden;
}
.middle{
  position: absolute;
  float: left;
 	left: 50%;
 	transform: translateX(-50%);
  top: 400px;
 }
.navigation{
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar{
  width: 10px;
  height: 10px;
  border: 3px solid #E06152;
  border-radius: 50%;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover{
  background: #E06152;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides{
  width: 500%;
  height: 100%;
  display: flex;
}

.slide{
  width: 20%;
  transition: 0.6s;
}
.slide img{
  width: 700px;
  height: auto;
}

#r1:checked ~ .s1{
  margin-left: 0;
}
#r2:checked ~ .s1{
  margin-left: -20%;
}
#r3:checked ~ .s1{
  margin-left: -40%;
}
#r4:checked ~ .s1{
  margin-left: -60%;
}
#r5:checked ~ .s1{
  margin-left: -80%;
}
/*------Slidershow2------*/
.slidershow2{
  width: 200px;
  height: 700px;
  overflow: hidden;
}
.middle2{
  position: absolute;
  float: left;
 	left: 75%;
 	transform: translateX(-75%);
  top: 900px;
 }
.navigation2{
  position: absolute;
  bottom: 20px;
  left: 10%;
  display: flex;
}
.bar2{
  width: 10px;
  height: 10px;
  border: 3px solid #E06152;
  border-radius: 50%;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar2:hover{
  background: #E06152;
}

input[name="r"]{
    position: absolute;
    visibility: hidden;
}

.slides2{
  width: 500%;
  height: 100%;
  display: flex;
}

.slide2{
  width: 20%;
  transition: 0.6s;
}
.slide2 img{
  width: 300px;
  height: auto;
}

#r6:checked ~ .s1{
  margin-left: 0;
}
#r7:checked ~ .s1{
  margin-left: -20%;
}
#r8:checked ~ .s1{
  margin-left: -40%;
}
#r9:checked ~ .s1{
  margin-left: -60%;
}
#r10:checked ~ .s1{
  margin-left: -80%;
}

.webbom-footer{
	background-color: #EDBEB4;
	width: 100%;
	position: relative;
	top: 1400px;
}

/*-------Instagram-----*/
.slide-header{
	min-height: 100vh;
	width: 100%;
	height: 1400px;
	background-color: #D5E2EA;
	position: absolute;
}
.slidershow2{
  width: 700px;
  height: 500px;
  overflow: hidden;
}
.navigation-ig{
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.ig-bar{
  width: 10px;
  height: 10px;
  border: 3px solid #E06152;
  border-radius: 50%;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.ig-bar:hover{
  background: #E06152;
}
.slide-footer{
	background-color: #EDBEB4;
	width: 100%;
	position: relative;
	top: 1200px;
}

/*-------DFT-----*/
.slidershow3{
  width: 700px;
  height: 500px;
  overflow: hidden;
}
.navigation-dft{
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dft-bar{
  width: 10px;
  height: 10px;
  border: 3px solid #E06152;
  border-radius: 50%;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.dft-bar:hover{
  background: #E06152;
}