/* CSS RESET */

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;
}
/* HTML5 display-role reset for older browsers */
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;
}


.container{
	margin:auto;
	}

	:root {
	  --primary: #ddd;
	  --dark: #333;
	  --light: #fff;
	  --shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
	}

body{
	margin:0;
	padding:0;
	font-family: 'Cormorant Garamond', serif;
	background-color: #FEFCFF;
	width: 100%;
	}

.headersection{
	margin: auto;
}

.headergrid{
	display: grid;
	width: 1600px;
	margin-left: auto;
	margin-right: auto;
/*	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 80px 500px 80px;
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	padding-top: 40px;
	justify-items: center;
	grid-template-areas:
	". header ."
	". diamonddiv ."
	". h2line .";*/
}

.header{
	margin-top: 30px;
	margin-left: 30%;
	margin-right: 30%;
}

.headerspan{
	font-size: 120px;
	color: #E5E4E2;
	text-shadow: 2px 2px 2px #1f1e1c;
	letter-spacing: 8px;
}

.header h1{
	font-size: 80px;
	color:#1f1e1c;
	text-shadow: 1px 1px 2px #1f1e1c;
	letter-spacing: 6px;
}

.h2line{
	margin-left: 30%;
	margin-right: 30%;
	margin-top: 460px;
}

.h2line h2{
	font-size: 40px;
	color:#1f1e1c;
	text-shadow: 1px 1px 2px #1f1e1c;
	letter-spacing: 6px;
}

.diamonds{
	position: absolute;
	width: 600px;
	height: 150px;
	margin-top: 220px;
	margin-left: 50%;
	margin-right: auto;
}

ul{
transform: translate(-50%, -50%);
margin: 0;
padding: 0;
}

ul li{
list-style: none;
position: fixed;
width: 200px;
height: 200px;
transform: rotate(45deg);
transition: .5s;
margin:-100px;
overflow: hidden;
opacity: .8;
box-shadow: 2px 2px 2px #1f1e1c;
}

ul li:hover{
opacity: 1;

}

ul li.item1{
top: 0;
left: 0;
}

ul li.item2{
bottom: 0;
left: 25%;
}

ul li.item3{
top: 0;
left: 50%;
}

ul li.item4{
bottom: 0;
left: 75%;
}

ul li.item5{
top: 0;
left: 100%;
}

ul li .bg {
	width: 100%;
	height: 100%;
	transform: rotate(-45deg) scale(1.42);
}

ul li.item1 .bg{
	background: url(../images/business.jpg);
	background-size: cover;
}

ul li.item2 .bg{
	background: url(../images/beautiful.jpg);
	background-size: cover;
}

ul li.item3 .bg{
	background: url(../images/walle.jpg);
	background-size: cover;
}

ul li.item4 .bg{
	background: url(../images/artist.jpg);
	background-size: cover;
}

ul li.item5 .bg{
	background: url(../images/electronics.jpg);
	background-size: cover;
}

/* -----------PERSONAL SECTION  -----------------------*/

.personalpresenetation{
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	box-shadow: 1px 1px 20px #1f1e1c;
	background-color: #fff;
	padding-top: 50px;
	padding-bottom: 50px;
}

.personalpresentationgrid{
	display: grid;
	width: 1600px;
	grid-template-columns:  1fr 1fr 1fr;
	grid-column-gap: 160px;
	grid-row-gap: 60px;
	margin-left: auto;
	margin-right: auto;
	justify-items: center;
	grid-template-areas: "personaltext personaltext personalimg";
}

.personalimg img{
	width: 100%;
	height: 350px;
	grid-area: personalimg;
	box-shadow: 1px 2px 5px #1f1e1c;
	margin-top: 20px;
}

.personaltext{
	grid-area: personaltext;
	font-size: 20px;
}

.personaltext h2{
	font-size: 25px;
	color:#1f1e1c;
	text-shadow: 1px 1px 1px #1f1e1c;
	letter-spacing: 3px;
}

/* -----------HOVER IMAGES----------------------- */

.showcase{
	background-color: #FEFCFF;
	margin-top: 120px;
	margin-left: auto;
	margin-right: auto;
	padding-right: 50px;
	padding-bottom: 100px;
	padding-top: 10px;
}

.demogrid{
	display: grid;
	width: 1600px;
	margin: auto;
	grid-template-columns:  1fr 1fr 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 60px;
	background-color: #FEFCFF;
	/*box-shadow: 1px 1px 20px #1f1e1c;*/
	justify-items: center;
}

.showcaseh1{
	grid-column: 2;
	grid-row:1;
	text-align: center;
	font-size: 30px;
	color:#1f1e1c;
	text-shadow: 1px 1px 2px #1f1e1c;
	letter-spacing: 6px;
}

.box1{
	grid-column: 1;
	grid-row:2;
}

.box2{
	grid-column: 2;
	grid-row:2;
}

.box3{
	grid-column: 3;
	grid-row:2;
}

.box4{
	grid-column: 1;
	grid-row:3;
}

.box5{
	grid-column: 2;
	grid-row:3;
}

.box6{
	grid-column: 3;
	grid-row:3;
}

.box7{
	grid-column: 1;
	grid-row:4;
}

.box8{
	grid-column: 2;
	grid-row:4;
}

.showcase {
}

.box{
	position: relative;
	width: 500px;
	height: 400px;
	overflow: hidden;
	border-radius: 6px;
	background: #000;
	box-shadow: 2px 5px 15px rgba(0, 0, 0, 0.8);
	transition: .5s;
}

.box:hover{
	transform: translateY(-30px);
	box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
}

.box .imgBox{
	position: relative;
}

.box .imgBox img{
	transition: 0.5s;
	width: 550px;
	height: 450px;
}

.box:hover .imgBox img{
	opacity: 0.6;
	transform: translateY(-40px);
}

.box .content{
	position: absolute;
	background: rgba(0, 0, 0, 0.5);
	bottom: -270px;
	left: 0;
	padding: 10px;
	box-sizing: border-box;
	transition: 0.5s;
	opacity: 0;
}

.box:hover .content{
	opacity: 1;
	bottom: 0px;
}

.box .content h3{
	font-size: 48px;
	color: #fff;
	font-weight: 700;
	margin-top: 5px;
	margin-bottom: 5px;
}

.box .content p{
	font-size: 32px;
	color: #fff;
	font-weight: 400;
	padding-bottom: 40px;
}

.box .content .btnD{
	text-decoration: none;
	font-size: 36px;
	padding: 10px 20px;
	border: none;
	border-radius: 3px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-weight: 700;
	transition: 0.5s;
}

.box .content .btnD:hover{
	background: rgba(44, 53, 57, 0.8);
	color: #fff;
}

.grid2{
	display: grid;
	width: 100%;
	grid-template-columns:  3fr 3fr 3fr 3fr;
	grid-template-rows: 2fr;
	grid-gap: 30px;
	align-items: stretch;
	background-color: #fff;
	padding-left: 50px;
	padding-right: 50px;
	padding-bottom: 20px;
	box-shadow: 1px 1px 20px #1f1e1c;
	text-align: center;
}

.Techinqueheadline{
	background-color: #eee;
	grid-column: 2/4;
	grid-row: 1;

}

.Techinque1{
	background-color: #ddd;
	grid-column: 1;
	grid-row:2;
}

.Techinque2{
	background-color: #eee;
	grid-column: 2;
	grid-row:2;
}

.Techinque3{
	background-color: #ddd;
	grid-column: 3;
	grid-row:2;
}

.Techinque4{
	background-color: #eee;
	grid-column: 4;
	grid-row:2;
}

/*
#showcase{
	background:url(../images/mountains.jpeg) no-repeat center center;
	height:600px;
}

.showcase-content{
	margin-top:260px;
	background:#333;
	color:#fff;
	font-size:15px;
	text-transform:uppercase;
	border-radius:5px;
	background:rgba(0,0,0,0.7);
	padding:5px;
	}

#info{
	background-color:#0CF;
	}

.polaroid {
	background-color:#58BAFC;
	padding:0px;
	margin:0px;
	width:350px;
	text-align:justify;
	}
*/