/*
========Team Members============
1. StudentID: 100269437
   Name: Akshita Bhandari
2. StudentID: 100268482
   Name: Harshdeep Singh
3. StudentID: 100268537
   Name: Bharti Chopra

*/


/*Font styles============*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,700|Lora:400,700|Open+Sans:400,800,600|PT+Sans+Caption:400,700);


/*Layout=========================*/
body{
	font-family: "Lora", 'times new roman', times, georgia;
	font-weight: 400;
	width: 90%;
	margin: auto;
}
/*header-------*/
header{
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #222 ;
	background-image: url('patterns/asfalt-light.png'), url('patterns/batthern.png');
	background-repeat: no-repeat, background-repeat;
	color: white;
	animation: moving 100s infinite linear;
    	
}

@keyframes moving{
	0%{
		background-position: 0% 0,0 0;
	}

100%{
	background-position: 100% 0,0 0;
}

}
nav ul li{
	font-size: 20px;
	font-family: "Open Sans", helvetica, arial;
	font-weight: 400;
	padding: 5px;
	background-color: #000;
	list-style-type: none;
}
nav ul li:hover{
	background-color:pink;
}

 ul li{
	padding: 5px;
	list-style-type: none;
	font-size: 24px;
	font-weight: bold;	
}
a{
	text-decoration: none;
	color: white;
}

ul{
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	padding: 0;
	margin: 0;
}
nav ul{
	display: flex;
	flex-direction: row;
	justify-content:center;
	margin-bottom: 0;
}

h1{

	font-size: 3rem;
	font-family: "Roboto", helvetica, arial;
	font-weight: bolder;
	padding: .5rem;
	border: 2px solid white;
}
h2{
	background-color: #000; 
	color: #fff;
	}
img{
	width: 100%;
}
h3{
	font-family: "PT Sans Caption", 'times new roman', times, georgia;
	font-weight: 700;
	text-align: center;
	margin: 0;
	padding-top: 20%;
}


form{
	max-width: 90%;

}



/*Classes================================*/

#form{
	font-size: 1.2rem;
	font-family: "Lora", 'times new roman', times, georgia;
	font-weight: 400;
	padding-top: 3px;
	padding-bottom: 3px;
	background-color: rgba(0,0,0,0.6);
	width: 100%;
	text-align: center;
/*	margin-top: 0;*/

}

.main{

	background-color: #222;
	padding-top: 1rem;
	padding-right: 1rem;
	padding-left: 1rem;
	color: white;

	}

.slide{

	display: flex;
    justify-content: space-between;
    align-items: center;

}


.container{
	display: flex;
	flex-direction:row;
	justify-content:space-between;
	align-content:flex-start;
	flex-wrap:wrap;
 	background: linear-gradient(to top, rgba(255,255,255,0.6),
  	rgba(255,255,255,1)), url('patterns/skulls.png');

}


.gallery{
	flex-basis:32%;
}


.drawer{
	position: absolute;
	display: flex;
	justify-content:center;		
	width: 90%;
	height: 1000px;
	opacity: .95;
	align-items:flex-start;
	color: white;
	background-color: black;
	text-align: center;
	background-image: url('patterns/asfalt-light.png'), url('patterns/batthern.png');
	background-repeat: no-repeat, background-repeat;
	animation: moving 100s infinite;
	transform:translate(0,-110%);
	transition:transform 2s ease-in-out ;
}

.draweranim1{
	transform:translate(0,0);
}

.button{
	background: none;
	border: 2px solid white;
	display: inline-block;
	padding: 10px;
	color: white;

}
.features{
	background-color: rgba(84,84,84,0.6);
	width: 100%;
	padding: 5px;
	display: flex;
	justify-content: space-around;
	align-items:center;
	margin-bottom: .5rem;
}

.grow1{
	flex-grow:2;
}
.grow2{
	flex-grow:1;
}

.yellow{
	background-color: orange;
	color: black;
	width: 100%;
	font-size: 1.5rem;
	color: white;
}
.none{
	display:none; 
}



/*Media queries==================================*/


@media screen and (max-width: 830px){

	.gallery{

	flex-basis:47%;
}
.shrink{
flex-shrink:999999999999;
}
ul{
	display: flex;
	flex-wrap: wrap;
}
#duplicate{
	font-size: 3rem;
	display: block;
	padding: 0;
	border: 2px solid white;
}

}

@media screen and (max-width: 500px){

	.gallery{
	flex-basis:100%;
}
.shrink{
flex-shrink:9999999999999999999999;
}
}