@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@viewport {
  width: device-width;
  zoom: 1;
}
* {
  box-sizing: border-box;
}
a{
	color:#f1f1f1;
	text-decoration:none;
	transition:1s;
}
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color:#f1f1f1;
}
img, video, canvas {
  /* max-width: 100%; */
}
footer{
  position: absolute;
  max-width:40%;
  bottom: 30px;
  z-index: 1000;
  right:60px;
  text-transform:uppercase;
  font-size: 10px;
	
}
.testborder{
	border:1px solid red;
}	
.overlay{
	position: absolute;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	padding:20px;
	background:white;
	color:black;
	transition:0.5s;
	z-index:2000;
	border:5px solid black;
	;
}
.overlay-title{
	float:right;
	position:absolute;
	right:0;
	top:0;
}
.overlay-cont{
	/* position:relative; */
	width:100%;
	overflow-y: scroll;
	box-sizing:unset;
	height:100%;
	padding-top:-100px;
	/* flex-grow:1; */
	/* margin-top: 100px; */
	/* scrollbar-width:none; */
	/* to hide scrollbar */
	margin-right:30px;
	padding-right:60px;
	overflow:auto;
}
.slider-description.dhide{
	max-height:10%;
	  transition: max-height 1s;
  -webkit-transition: max-height 1s;
  cursor: zoom-in;
}
.hide{
	/* right:0px; */
	width:80px;
	height:80px;
	/* position:absolute; */
	/* top:0px; */
	line-height:80px;
	text-align:center;
	font-size:2em;
	cursor:pointer;
	border-radius:40px;
	-webkit-transition:1s;
	transition:1s;
}
.hide:hover{
	color: blue;
	background:rgba(0,0,0,0.1);
	transform: rotate(90deg);
	border-radius:2px;
}
.overlay-show{
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.video-cover{
	z-index:-1;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	min-width: 100%;
	min-height: 100%;
	
}
.slider a:hover, .slider a:hover>h2{
	transition: 1s;
	color:blue;
}
.slider a>h2{
	transition: 1s;
}
.slide-2{
	background-image: url('images/1.jpg');
}
.slide-1{
	background-image: url('images/2.jpg');
}
.slide-3{
	background-image: url('images/3.JPG');
}
.slide-4{
	background-image: url('images/4.jpg');
}
.slide-6{
	background-image: url('images/6.jpg');
}

.slide-8{
	background-image: url('images/8.PNG');
}
.slide-9{
	background-image: url('images/9.jpg');
}
.slide-10{
	background-image: url('images/10.jpg');
}
.slide-11{
	background-image: url('images/11.jpg');
}
.slide-12{
	background-image: url('images/12.JPG');
}
.slide-13{
	background-image: url('images/13.jpg');
}
.image-cover{
	z-index:-1;
	position: fixed;
	right: 0;
	top: 0;
	min-width: 100%;
	min-height: 100%;

}
/* Navigation */
.navigation {
  text-transform: uppercase;
  position: absolute;
  width: 100%;
  height: 100px;
  padding: 0 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
}
.navigation{
  /* color:#FAA; */
  mix-blend-mode: exclusion;
}

.rotate{
 -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.navigation-left {
  margin-left: -40px;
}


.navigation-center {
  margin-right: 85px;
}

.navigation-right {
  display: flex;
  align-items: center;
}

/* Slider wrapper*/
.css-slider-wrapper {
  display: block;
  background: #FFF;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Slider */
.slider {
	overflow:hidden;
  	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
  width: 100%;
  height: 100%;
  position: absolute;
  //left: 0;
  top: 0;
  opacity: 1;
  z-index: 0;
  display: flex;
  flex-direction: column;
  /* flex-wrap: nowrap; */
  /* align-items: flex-end; */
  /* justify-content: left; */
  /* align-content: center; */
  
  -webkit-transition: -webkit-transform 1600ms;
  transition: -webkit-transform 1600ms, transform 1600ms;
  -webkit-transform: scale(1);
  transform: scale(1);
  display: flex;
  justify-content: flex-end;
}

.slider-description {
  /* -webkit-transform: translateY(300px); */
  /* transform: translateY(300px); */
  background: rgba(0,0,0,0.6);
  max-width:40%;
  margin-left:10px;
  padding:10px;
  margin-bottom:10px;
  /* height:100%; */
  max-height:60%;
  color:#FFF;
  opacity:0;
  transition: max-height 1s, color 1s,opacity 800ms;
  -webkit-transition: max-height 1s, color 1s,opacity 800ms;
  overflow:hidden;
  cursor: zoom-out;
  
}

.slider-description:hover,.slider-description:hover>h2{
	color: #fec;

}
.slider.visible .slider-description{
	opacity:1;
}
/* Slider Inner Slide Effect */
.slider h2 {
  
  color: #f1f1f1;
  font-weight: 900;
  text-transform: capitalize;
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  margin-top: auto;
  letter-spacing: 2px;
    -webkit-transition: opacity 800ms, -webkit-transform 800ms,color 800ms;
  transition: transform 800ms, opacity 800ms, color 800ms;
  -webkit-transition-delay: -webkit-transform 1s; /* Safari */
  transition-delay: transform 1s;

}

.navigation a:hover{
	color:blue;
}


.btn_more {
	color:#f1f1f1;
  height: 50px;
  border: none;
  font-family: Montserrat;
  font-size: 20px;
  font-weight: 100;
	background:none;
	margin:0;
	padding:0;
  text-align: left;
  position: relative;
  cursor: pointer;
  transition: all .2s;
}

.btn_more:hover {

}


.slider .btn_more:focus {
  outline: none;
}







/* Slider Pagger */
.slider-pagination {
  position: absolute;
  bottom: 30px;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.slider-pagination label {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  background: #f1f1f1;
  margin: 0 10px;
  cursor: pointer;
}
.slider-pagination input{
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.slider-pagination div{
	
}
.slide-radio + .page{
	transition: all 1s;
	-webkit-transition: all 1s;
}
/* Slider Pagger Event */
.slide-radio:checked + .page{
  width: 14px;
  height: 14px;
  /* max-width:14px; */
  border: 2px solid #ea2e49;
  background: none;

}
.page:not(.visible)
{
	scale(0);
	opacity:0;
	margin:0;
	width:0px;

}
.slide-radio{
	display:none;
}
/* Slider Slide Effect */

.slider.visible h2,.slider.visible h4
{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1
}
h2{
	text-transform: uppercase;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li{
	padding: 0px 16px;
	display:inline;
	
}
.navigation-center{
		display:none;
	}
.flexcardbox{
	width:90%;
	margin-left:5%;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-evenly;
}
.profi{
	width:30%;
	/* word-wrap: break-word; */
	text-align: justify;
	text-justify: inter-word;
	
}
.profileimg{
	width: 100%;
	padding-top: 100%;
	border-radius: 50%;
	display:inline-block;
	background-repeat:none;
	background-size:cover;
}
.profi h2{
	text-align:center;
}
.project{
	width:100%;
	display:flex;
	margin:5%;
}

#message{
	width:90%;
}

.projectimg{
	width: 30%;
	flex-grow:1;
	padding-top: 30%;
	/* border-radius: 2%; */
	margin-right:5%;
	position:relative;
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.projecttext{
	flex-grow:2;
	width:60%;
}
#iflo{
	background-image:url("images/pixi3.jpg");
}

#next,#prev{
	position: absolute;
	z-index:200;
	border-radius:50px;
	height:100px;
	width:100px;
	top: 50%;
	margin-top:-50px;
	background: rgba(0,0,0,0.5);
	text-align:center;
	transition: 1s;
	-webkit-transition:1s;
	opacity:0;
}
#next{
	right:2%;
}
#prev{
	left:2%;
}
#prev:hover,#next:hover{
	opacity:1;
}
/* Responsive */
@media only screen and (max-width: 600px) {
	#copyright{
		display:none;
	}
	footer{
		display:none;
		width:100%;
		max-width:100%;
		right: 0;
		bottom: 5%;
	}
	footer ul{
		text-align: center;
	}
	.slider-pagination{
		bottom: 3%;
	}
	.slider-description{
		max-width:100%;
		margin: 2%;
		margin-bottom:13%;
		
	}
	.navigation{
		padding-left:0;
		padding-right:0;
		width:100%;
		justify-content: space-evenly;
	
	}
	.navigation-left{
		display:none;
	}
	.navigation-right li{
		justify-content: space-evenly;
		width:100%;
		
	}
	.navigation-right{
		width:100%;
		display:inline;
		text-align:center;
	}
	#next,#prev{
		display:none;
	}
	.profi{
		width:90%;
		margin-bottom:20%;
	}
	.profiles{
	width:100%;
	}
	.project{
		flex-direction:column;
		margin-bottom:20%;
	}
	.profileimg{
		width:90%;
		padding-top:90%;
	}
	.projectimg{
		width:90%;
		padding-top:90%;
	}
	.projecttext{
		width:90%;
	}
	.slider{
		-webkit-transition: -webkit-transform 500ms;
		transition: -webkit-transform 500ms, transform 500ms;
	}
	.slider-description:hover,.slider-description:hover>h2{
	color: #fff;

}
}
/* Not required */
/* .slider h4 { */
  /* margin-top: auto; */
  /* margin-left:20px; */
  /* margin-bottom: 2px; */
  /* //padding:0; */
  /* //margin:0; */
  /* font-size: 22px; */
  /* font-family: "Raleway"; */
  /* color: rgba(51, 51, 51, 0.349); */
  /* font-weight: bold; */
  /* text-transform: uppercase; */
  /* opacity: 0; */
  /* -webkit-transform: translateY(300px); */
  /* transform: translateY(300px); */
  /* color:#f1f1f1; */
/* } */

/* .slider h4 { */
  /* -webkit-transition: opacity 800ms, -webkit-transform 800ms; */
  /* transition: transform 800ms, opacity 800ms; */
  /* -webkit-transition-delay: 1.4s; /* Safari */ */
  /* transition-delay: 1.4s; */
/* } */