* {
	margin: 0;
	padding: 0;
	font-family: 'Caveat', cursive;
font-family: 'Irish Grover', cursive;
font-family: 'Kaushan Script', cursive;
	/*border: 1px solid red;*/
	
}
body{
	min-width: 1200px;
 background-image: url("https://assets.codepen.io/4470670/IMG_0194.JPG");
	background-repeat: repeat;
	background-size: cover;
}

.container {
	width: 100%;
	height: 100vh;
	/*background-image: url("https://assets.codepen.io/4470670/IMG_0194.JPG");*/
	background-position: center;
	background-size: cover;
	padding-left: 8%;
	padding-right: 8%;
	box-sizing: border-box;
	position: relative;
	min-height: 800px;
}
.mpapage{
	background-image: url("https://assets.codepen.io/4470670/827D14C1-1291-4998-93FD-DA5CE505B7D9.jpeg");
}
.internpage{
	background-image: url("https://assets.codepen.io/4470670/827D14C1-1291-4998-93FD-DA5CE505B7D9.jpeg");
}
.rw-page{
	background-image: url("https://assets.codepen.io/4470670/4B9542A2-6DC3-4CA5-9AEF-C65BD9903745.jpeg");
}

/*index page menu*/

ul.w3 {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	/*background-color: #b0c4de;*/
	background: rgba(185, 211, 240, 0.3)
}

.logo{
 width: 50px;
 position: absolute;
}

li.w3 {
	float: right;
	padding: 0 20px 0 20px;
}

li.w3 a,
.dropbtn {
	display: inline-block;
	color: #000000;
	text-align: center;
	padding: 14px 20px;
	text-decoration: none;
}

li.w3 a.w3:hover,
.dropdown:hover .dropbtn {
	/*background-color: #f0f8ff;*/
	background-color: rgb(248, 224, 197);
}

li.dropdown {
	display: inline-block;
}

.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content a.w3 {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.dropdown-content a.w3:hover {
	background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
	display: block;
}

/* Responsive code start */
@media screen and (max-width: 1250px) {
	.wrapper nav {
		max-width: 100%;
		padding: 0 20px;
	}

	nav .content .links {
		margin-left: 30px;
	}

	.content .links li a {
		padding: 8px 13px;
	}

	.wrapper .search-box {
		max-width: calc(100% - 100px);
	}

	.wrapper .search-box input {
		padding: 0 100px 0 15px;
	}
}


@media screen and (max-width: 900px) {
	.wrapper .menu-icon {
		display: block;
	}

	.wrapper #show-menu:checked ~ .menu-icon i::before {
		content: "\f00d";
	}

	nav .content .links {
		display: block;
		position: fixed;
		background: #14181f;
		height: 100%;
		width: 100%;
		top: 70px;
		left: -100%;
		margin-left: 0;
		max-width: 350px;
		overflow-y: auto;
		padding-bottom: 100px;
		transition: all 0.3s ease;
	}

	nav #show-menu:checked ~ .content .links {
		left: 0%;
	}

	.content .links li {
		margin: 15px 20px;
	}

	.content .links li a,
	.content .links li label {
		line-height: 40px;
		font-size: 20px;
		display: block;
		padding: 8px 18px;
		cursor: pointer;
		color: #000000;
	}

	.content .links li a.desktop-link {
		display: none;
	}
	

	/* dropdown responsive code start */
	.content .links ul,
	.content .links ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		background: none;
		max-height: 0px;
		overflow: hidden;
	}

	.content .links #show-features:checked ~ ul,
	.content .links #show-services:checked ~ ul,
	.content .links #show-items:checked ~ ul {
		max-height: 100vh;
	}

	.content .links ul li {
		margin: 7px 20px;
	}

	.content .links ul li a {
		font-size: 18px;
		line-height: 30px;
		border-radius: 5px !important;
	}
}
li.current-page{
	background: rgb(248, 224, 197);
}

@media screen and (max-width: 400px) {
	.wrapper nav {
		padding: 0 10px;
	}

	.content .logo a {
		font-size: 27px;
	}

	.wrapper .search-box {
		max-width: calc(100% - 70px);
	}

	.wrapper .search-box .go-icon {
		width: 30px;
		right: 0;
	}

	.wrapper .search-box input {
		padding-right: 30px;
	}
}

.row {
	display: flex;
	height: 60%;
	width: 70%;
	margin-left: 130px;
	margin-right: auto;
	aligh-items: center;
	margin-top: 100px;
	position: absolute;
}

.col {
	flex-basis: 50%;
	
}

h1 {
	color: #000000;
	font-size: 400%;
	text-align: center;
}

p {
	color: #000000;
	font-size: 30px;
	line-height: 30px;
	
}

.container-btn {
	text-align: center;
	margin: 50px;
	padding: 50px 50px 50px 50px;
}

.btn {
	border: 2px solid #f5f5f5;
	background: none;
	padding: 10px 20px;
	font-size: 30px;
	font-family: "montserrat";
	cursor: pointer;
	margin: 10px;
	transition: 0.8s;
	position: relative;
	overflow: hidden;
	border-radius: 20px;
}

.btn {
	color: #f5f5f5;
}

.btn:hover {
	color: #000000;
	z-index: 0;
}

.btn::before {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 0%;
	background: #f5f5f5;
	z-index: -1;
	transition: 0.8s;
}

.btn::before {
	bottom: 0;
	border-radius: 50% 50% 0 0;
}

.btn:hover::before {
	height: 180%;
}

.card {
	width: 35%;
	height: 50%;
	display: inline-block;
	border-radius: 10px;
	padding: 15px 25px;
	box-sizing: border-box;
	cursor: pointer;
	margin: 20px 30px;
	background-position: center;
	background-size: cover;
	transition: transform 0.5s;
}

.card1 {
	background-image: url("https://assets.codepen.io/4470670/IMG_2691.jpg");
	
}

.card2 {
	
	background-image: url("https://assets.codepen.io/4470670/IMG_2692.JPG");
}

.card3 {
	background-image: url("https://assets.codepen.io/4470670/IMG_2694.JPG");
}

.card4 {
	background-image: url("https://assets.codepen.io/4470670/IMG_2693.JPG");
}

.card:hover {
	transform: translateY(-10px);
}

h5 {
	color: #000000;
	text-shadow: 0 0 5px #999;
}


.overlay {
	position: absolute;
	bottom: 100%;
	left: 0;
	right: 0;
	background-color: #008cba;
	overflow: hidden;
	width: 100%;
	height: 0;
	transition: 0.5s ease;
	border-radius: 10px;
	opacity: 0.5;
}

.container-card:hover .overlay {
	bottom: 0;
	height: 100%;
}

.text {
	white-space: nowrap;
	color: #000000;
	font-size: 200%;
	position: relative;
	height: 100px;
	top: 50%;
	left: 60%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

/*work page*/
iframe{
	width: 1000px;
	height: 1000px;
	margin-top: 50px;
	/*margin-left: auto;*/
	display: block;
 margin-left: auto;
 margin-right: auto;

}
.document{
	height: 150vh;
	position: relative;
	margin-top: 20px;
	/*margin-left: 30%;*/
	/*align-items: center;*/
 min-width: 1000px;
}
h2{
	/*padding-left: 40%;*/
	text-align: center;
	text-transform: capitalize;
}
.page-intro{
	min-height: 60vh;
	padding-left: 20px;
	padding-right: 20px;
}
p.page-intro{
	font-size: 20px;
	letter-spacing: 2px;
	text-indent: 10px;
	line-height: 1.8;
	background-image: url("https://assets.codepen.io/4470670/827D14C1-1291-4998-93FD-DA5CE505B7D9.jpeg");
	background-repeat: no-repeat;
	background-size: cover;
}
.main-page{
	position: relative;
	width: 100%;
	/*height: 60vw;*/
}
div.box{
	width: 250px;
	height: 100px;
	margin: 20px 10px 20px 10px;
	text-align: center;
	line-height: 100px;
	display: flex;
	align-items: center;
}

div.level{
	display: flex;
	align-items: center;
}
.level div{
	flex: 1;
}

/*mpa-page logo*/
img.subpage{
	 display: block;
  margin-left: auto;
  margin-right: auto;
  width: 120px;
  border-radius: 50%;
}

div.about-content{
	display: inline-block;
	left: 80px;
	height: auto;
	margin-top: 20px;
	justify-content: space-between;
}
div.about-content-box{
	width: 100%;
	/*height: auto;*/
	/*margin: 20px 40px 10px 40px;*/
	text-align: center;

}

/*slide card*/
div.slide-card p{
	line-height: 1.4;
	font-size: 28px;
	margin: 5px;
}
div.slide-card h2{
	font-size: 30px;
	/*padding-left: 20%;*/
	text-transform: capitalize;
	
}

.slidershow {
  width: 900px;
  height: 600px;
  overflow: hidden;
}
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.navigation {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.bar {
  width: 50px;
  height: 10px;
  border: 2px solid #000000;
  margin: 6px;
  cursor: pointer;
  transition: 0.4s;
}
.bar:hover {
  background: #000000;
}
input[name="r"] {
  position: absolute;
  visibility: hidden;
}
.slides {
  width: 500%;
  height: 100%;
  display: flex;
}
.slide {
  width: 20%;
  transition: 0.6s;
}
.slide-card {
  width: 100%;
  height: 100%;
  position: absolute;
	 align-content: center;
	 background: rgb(204, 228, 255, 0.4);
	 border-radius: 15%;
	
}
#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%;
}


/*text animation*/
.wavy {
  postition: relative;
  margin: 0;
}
.wavy span {
  position: relative;
  display: inline-block;
  color: #000000;
  font-size: 0.6em;
  text-transform: uppercase;
  animation: animate 2s ease-in-out infinite;
  animation-delay: calc(0.1s * var(--i));
}
@keyframes animate {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(-10px);
  }
  40%,
  100% {
    transform: translateY(0px);
  }
}

/*iframe document*/
a.document-otherlink{
	margin-left: 20px;
	text-decoration: none;
	cursor: pointer;
}
div.document-other{
	position: relative;
	text-align: center;
	margin-top: 40px;;
}

/*.wavetext span{
	font-size: 1.3em;
}*/
div.wavetext{
	font-size: 1em;
}


/*project page*/
.container-project {
  margin: 10px;
	 height: 100%;
}

.row-project {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.image-project {
  background: #50a7ff;
  position: relative;
  flex: 1;
  max-width: 400px;
  height: 270px;
  margin: 20px;
  overflow: hidden;
}

.image-project img {
  opacity: 0.8;
  position: relative;
  vertical-align: top;
  transition: 0.6s;
  transition-property: opacity;
	 object-fit: cover;
}

.project-img{
	width: 100%;
	height: 100%;
}

.image-project:hover img {
  opacity: 0.3;
}

.image-project .details {
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  width: 100%;
  height: 100%;
}

.image-project .details h2 {
  text-align: center;
  font-size: 35px;
  text-transform: uppercase;
  font-weight: 300;
  margin-top: 70px;
  transition: 0.4s;
  transition-property: transform;
}

.image-project .details h2 span {
  font-weight: 900;
}

.image-project:hover .details h2 {
  transform: translateY(-30px);
}

.image-project .details p {
  margin: 30px 30px 0 30px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  transition: 0.6s;
  transition-property: opacity, transform;
	 line-height: 20px;
}

.image-project:hover .details p {
  opacity: 1;
  transform: translateY(-40px);
}

.more {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  bottom: -60px;
  transition: 0.6s;
  transition-property: bottom;
}

.image-project:hover .more {
  bottom: 0;
}

.more .read-more {
  color: #000;
  text-decoration: none;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

.more .read-more span {
  font-weight: 900;
}

.more .icon-links i {
  color: #000;
  font-size: 20px;
}

.more .icon-links a:not(:last-child) i {
  margin-right: 20px;
}

a.link-project{
	text-decoration: none;
}

@media screen and (max-height: 900px) {
  .image-project .details p {
    display: none;
  }
	.contact-info-box{
		display: none;
	}
}



/*gallery*/
.img-gallery {
  max-width: 100%;
	 left: 10%;
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 30px;
}
.img-gallery img {
  width: 100%;
  cursor: pointer;
  border-radius: 20px;
  transition: all 0.7s linear;
}
.img-gallery img:hover {
  /*transform: scale(0.8) rotate(-15deg);*/
  border-radius: 20px;
  box-shadow: 0 32px 75px rgba(68, 77, 136, 0.2);
  transform: rotate(20deg) scale(0.8);
  transition: all 0.7s linear;
}

.full-img {
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.full-img img {
  width: 90%;
  max-width: 500px;
}
.full-img span {
  position: absolute;
  top: 5%;
  right: 5%;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}


/*contact information*/
.contact-info img{
	position: relative;
 margin-left: auto;
 margin-right: auto;
 width: 20rem;
	border-radius: 50%;
}
.contact-box{
	display: flex;
}
.contact-info{
	align-items: center;
	position: relative;
	justify-content: center;
	display: flex;
}
.contact-info-box{
	display: flex;
	
}
.contact{
	width: 200px;
	list-style-type: none;
	background: rgb(255, 255, 255, 0.7);
	border-radius: 30px;
}

.contact li{
	line-height: 4;
}
.infolist{
	display: flex;
	justify-content: center;
	align-items: center;
}
li.contact-link:hover{
 cursor: pointer;	
}
.contact-link a{
	text-decoration: none;
	color: #000;
}