@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,900);

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

body{
	font-size: 1em;
	line-height: normal;
	font-family: 'Playfair Display', serif;
	background-color: white;
}

a{
	text-decoration: none;
	display: inline-block;
	color: black;
	position: relative;
	-webkit-transition: all .3s ease-out .3s;
	transition: all .3s ease-out .3s;
}
#top a:hover, a.check:hover, .list_link:hover, #port_header a:hover, #back a:hover{
	color: #E91E63;
}

#top a:after, a.check:after, .list_link:after, #port_header a:after, #back a:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	-webkit-transform: scaleX(0);
	-ms-transform: scaleX(0);
    transform: scaleX(0);
	background-color: #E91E63;
	-webkit-transition: all .3s ease-out .3s;
	transition: all .3s ease-out .3s;
}

#top a:hover:after, a.check:hover:after, .list_link:hover:after, #port_header a:hover:after, #back a:hover:after{
	-webkit-transform: scaleX(1.1);
	-ms-transfrom: scaleX(1.1);
	transform: scaleX(1.1);
}

	#wrapper{
		width: 100%;
		height: 100%;
		margin: 0 auto;
	}

	#wrapper:after{
		content: "";
		display: block;
		clear: both;
	}

		#top{
			width: 100%;
			height: 100vh;
		}

		header{
			width: 100%;
			height: 50px;
		}

			header nav ul{
				width: 50%;
				margin: 0 auto;
            }

				header nav ul li{
					float: left;
					text-align: center;
					width: 25%;
					height: 50px;
					line-height: 50px;
				}

			#home{
				width: 100%;
				position: relative;
				overflow: hidden;
				background-color: #B2EBF2;
				margin-top: 1%;
			}

				#left_home{
					width: 60%;
					float: left;
				}

					.heading{
						position: absolute;
						top: 50%;
						margin-left: 8%;
						transform: translateY(-80%);
					}

						.heading h1{
							font-size: 4em;
						}


						.heading h2{
							font-size: 1.5em;
						}

						.heading p{
							color: white;
							font-size: 1.2em;
							margin-left: -5%;
						}

						.heading a{
							font-size: 1.5em;
							position: absolute;
							bottom: -10;
							right: 0;
						}

						.title{
							margin-left: 60%;

						}


				#right_home{
					width: 40%;
					float: right;
				}

					#right_home img{
						width: auto;
						max-width: 100%;
						height: 100vh;
						float: right;
					}

			#about{
				width: 100%;
				height: 100vh;
				position: relative;
				overflow: hidden;
				background-color: #F8BBD0;
			}

			#heading_for_mobile{
				display: none;
			}

				#left_about{
					width: 30%;
					float: left;
				}

				#right_about{
					width: 70%;
					float: right;
				}

                    #introduction{
                        width: 60%;
                    }

					#right_about img{
						width: auto;
						max-width: 100%;
						height: 100vh;
						float: right;
					}

				#web_design{
					width: 100%;
					height: 100vh;
					position: relative;
				    overflow: hidden;
					background-color: #FFEB3B;
				}

					  .contents{
						  width: 100%;
						  height: 100vh;
					  }

						  #port_header{
							  width: 100%;
							  height: 80px;
							  background-color: white;
						  }

							  #port_header ul{
								  float: right;
								  width: 50%;
							  }

								  #port_header ul li{
									  float: left;
									  text-align: center;
									  width: 25%;
									  height: 80px;
									  line-height: 80px;
								  }

						.web{
							background-color: #FFEB3B;
						}


							.slideout-menu ul{
								margin-top: 5%;
							}

								.slideout-menu ul li{
									margin-bottom: 10%;
									text-align: center;
									font-size: 1.5em;
								}

						.list_1{
							float: left;
							width: 50%;
							height: 50vh;
						}

						.list_2{
							float: left;
							width: 50%;
							height: 50vh;
						}

						.list_3{
							clear: both;
							width: 100%;
							height: 50vh;
							background-color: #212121;
						}

							 .list_3 li a{
								 color: white;
								 padding-top: 10vh;
							 }

							.images{
								width: auto;
								height: 50vh;
							}

				#inspiration{
					width: 100%;
					height: 100vh;
					position: relative;
				    overflow: hidden;
					background-color: #C8E6C9;
				}

					.inspi{
						background-color: #C8E6C9;
					}

                        #inspi_wrapper{
							width: 100%;
							height: 100vh;
							margin: 0;
							overflow: hidden;
						}

						.popup{
							position: absolute;
							display: none;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							height: 100vh;
							width: 100%;
							text-align: center;
							background-color: rgba(0,0,0,0.80);
						}

						.popup:target{
							display: block;
						}

							.popup img{
								width: 55vw;
								height: auto;
								margin-top: 1.5em;
								padding: 1em;
								background-color: white;
							}

				#photo_gallery{
					width: 100%;
					height: 100vh;
					position: relative;
					overflow: hidden;
					background-color: #C5CAE9;
				}

					.photo_g{
						background-color: #C5CAE9;
					}

						#gallery_wrapper{
							width: 100%;
							height: 100vh;
							margin: 0;
							overflow: hidden;
						}

							#top_row li, #middle_row li, #bottom_row li{
								float: left;
								width: 33%;
								margin: 0 auto 1em auto;
							}

								#top_row img, #middle_row img, #bottom_row img{
								width: auto;
								height: 18vh;
								margin: 0;
							}

				#videos{
					width: 100%;
					height: 200vh;
					position: relative;
					overflow: hidden;
					background-color: #E1BEE7;
				}

					#video_heading{
						top: 30%;
					}

						.vd{
							width: 100%;
							height: 200vh;
							background-color: #E1BEE7;
						}

							.vd video{
								width: 100%;
								max-width: 100%;
								height: auto;
							}

							#video_1, #video_2{
								width: 55vw;
								height: 80vh;
								margin: 10vh auto 0 auto;
								position: relative;
								text-align: center;
							}

							#video_1{
								margin: 5vh auto 0 auto;
							}

								#video_1 dt, #video_2 dt{
									font-size: 1.5em;
									margin-bottom: 3vh;
								}
				#contact{
					width: 100%;
					height: 100vh;
				}

					#contact_wrapper{
						width: 60%;
						height: 100vh;
						margin: 0 auto;
					}

						#contact h1{
							margin: 5vh 0;
							font-size: 4.5em;
						}

						#contact form{
							width: 100%;
						}

							#name, #mail, #message, #submit{
								font-family: 'Playfair Display', serif;
							}

							#name, #mail{
								width: 45%;
								height: 10vh;
								margin-bottom: 5vh;
								padding-left: 1em;
								font-size: 1.2em;
							}

							#name{
								float: left;
							}

							#mail{
								float: right;
							}

							#message{
							width: 97%;
							height: 30vh;
							float: left;
							margin-bottom: 5vh;
							padding:1em 0 0 1em;
							font-size: 1.2em;
							}

							#submit{
								width: 100%;
								height: 10vh;
								float: left;
								background-color: #E91E63;
								border: none;
								font-size: 1.2em;
								-webkit-transition: all .7s ease-out .3s;
								transition: all .7s ease-out .3s;
							}

							#submit:hover{
								background-color: #FF80AB;
							}

					footer{
						width: 100%;
						height: 13vh;
						background-color: black;
						color: white;
						position: relative;
					}

						footer p{
							position: absolute;
							bottom: 1em;
							left: 1em;
						}

							#back a{
								position: absolute;
								bottom: 1em;
								right: 1em;
								color: white;
								font-size: 1.2em;
							}

				/* For lightbox like effect with css */

					.slideout-menu {
						position: absolute;
						top: 0;
						left: -100%;
						width: 100%;
						height: 100vh;
						z-index: 100;
					}

						.lists{
							width: 100%;
							overflow: hidden;
							position: relative;
						}
					.slideout-menu h3 {
						position: relative;
						display: block;
						width: 100%;
						height: 80px;
						line-height: 80px;
						color: black;
						font-size: 2em;
						padding-left: 3%;
						background-color: white;
					}
					.slideout-menu .slideout-menu-toggle {
						position: absolute;
						top: 30px;
						right: 5%;
						display: inline-block;
						padding: 5px;
						font-family: Arial, sans-serif;
						line-height:0.6;
						text-align: center;
						background: #455A64;
						color: #9E9E9E;
						text-decoration: none;
						vertical-align: top;
					}
					.slideout-menu-toggle:hover {
						color: white;
					}

						a.check:hover{
							color: #E91E63;
						}