* {
	border: 0;
	margin: 0;
	padding: 0;
}
section, main {
	display: block;
}
body {
    background-size: cover;
	background-color: #F3F3F3;
	font-family: 'Lato', sans-serif;
	padding-top: 80px;
}
#front {
	background-color: #363636;
	border: 0 solid #ed145b;
	box-shadow: 2px 2px 2px 2px #AFAFAF;
	/*	
	background-image: url(images/kristenphoto.png);
	background-repeat: no-repeat;
	background-image: url(images/triangle1.png);  */
	color: #ed145b;
	font-weight: lighter;
	height: 315px;
	margin: auto;
	width: 500px;
}
#kristenphoto {
   -webkit-filter: grayscale(1);
	filter: grayscale(1);   
	float: right;
	position: relative;
}
#front h1 {
	color: #FFFFFF;
	clear: both;
	float: right;
	margin-right: 126px;
	margin-top: -69px;
	position: relative;
}
#front p {
	clear: both;
	float: right;
	margin-right: 126px;
	margin-top: -39px;
	position: relative;
}
#line1 {
	border-right: 2px #ed145b solid;
	float: left;
	height: 150px;
	margin-top: -318px;
	position: relative;
	width: 169px;
	/*------------------------ BELOW IS CODE FOR COOL LINES CHANGING COLORS (It ends at the #line2 !!! ) ------------------------*/
	-webkit-animation-name: coollines; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: coollines;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes coollines {
    from {
    	border-right: 3px #ed145b solid;
    }
    to {
    	border-right: 3px #FFFFFF solid;
    }
}
/* Standard syntax */
@keyframes coollines {
 	from {
 		border-right: 3px #ed145b solid;
 	}
    to {
    	border-right: 3px #FFFFFF solid;
    }
}
#line2 {
	border-right: 2px #ed145b solid;
	float: left;
	height: 75px;
	margin-top: -80px;
	position: relative;
	width: 385px;
}
#line3 {
	border-right: 2px #FFFFFF solid;
	float: left;
	height: 315px;
	margin-top: -319px;
	position: relative;
	width: 159px;
}
#line4 {
	border-right: 2px #FFFFFF solid;
	float: left;
	height: 64px;
	margin-top: -70px;
	position: relative;
	width: 393px;
	/* ----------------------- BELOW IS CODE FOR COOL LINES CHANGING COLORS (It ends at the .rotate:hover !!! ) ---------------------*/
	-webkit-animation-name: coollines3; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    animation-name: coollines;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes coollines3 {
    from {
    	border-right: 3px #FFFFFF solid;
    }
    to {
    	border-right: 3px #ed145b solid;
    }
}
/* Standard syntax */
@keyframes coollines3 {
 	from {
 		border-right: 3px #FFFFFF solid;
 	}
    to {
    	border-right: 3px #ed145b solid;
    }
}
.rotate:hover {
	transition: all 1s ease;
    -webkit-transform: rotateZ(720deg);
    -ms-transform: rotateZ(720deg);
    transform: rotateZ(720deg);
}
.container {
	position: relative;
	overflow: hidden;
	width: 250px;
	height: 200px;
}
.container .textbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 380px;
	height: 200px;
	margin-left: -460px;
}
.container:hover .textbox {
	margin-left: 35px;
	margin-top: 35px;
}
.container img {
	margin-left: 0;
}
.container:hover img {
	margin-left: 340px;
}
.text {
	padding-top: 50px;
}
.container img, .textbox {
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
.textbox {
	color: #FFFFFF;   /* #ed145b */
}
#title {
	font-size: 20px;
}

/* ------------------ BODY BORDER CODING IS BELOW!!! ---------------- */

body:before, body:after {
    background: #CFCFCF;
    content: "";
    height: 10px;
    left: 0;
    position: fixed;
    right: 0;
}
body:before {
    top: 0;
}
body:after {
    bottom: 0;
}



/* ------------------ BELOW IS MOVING TEXT FOR TEXT TEXTURIZING!!! ---------------- */
/* -----
 .movingtext h1 {
    background: url('images/texttexturizing.png');
    background-repeat: repeat-x;
    background-position: 0 0;
    font-family: 'Lato', sans-serif;
    color: transparent;
    -webkit-font-smoothing: antialiased;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0;
 	-webkit-animation: BackgroundAnimated 5s linear infinite;
    -moz-animation: BackgroundAnimated 5s linear infinite;
    -ms-animation: BackgroundAnimated 5s linear infinite;
    -o-animation: BackgroundAnimated 5s linear infinite;
    animation: BackgroundAnimated 5s linear infinite;
}
@keyframes BackgroundAnimated {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-webkit-keyframes BackgroundAnimated {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-ms-keyframes BackgroundAnimated {
    	from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}
@-moz-keyframes BackgroundAnimated {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 100% 0;
    }
}

-----*/