/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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;
}

/*---------------RESET END------------------*/
html{
    overflow-x: hidden;
}


body{
    background-color: #15032d;
    overflow: hidden;
    }



#container{
    width: 100%;
    height: 6vw;
    background-color: #ed1846;
    
}

#monogram{
    display: inline;
    position: relative;
    top: -18vw;
    left: 42.8vw;
}

#monogram img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
#monogram img:hover, #monogram img:focus, #monogram img:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

#monogram img{
    width: 12vw;
    height: 6vw;
}

#logo{
    height: 21vw;
    width: 21vw;
    background: #ed1846;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    overflow: hidden;
    margin: 0 auto;
    top: -6vw;
    position: relative;
    }

nav{
    text-align: left;
    position: relative;
    top: -25vw;
    left: -2vw;
}

nav a{
    color: #fff;
    text-decoration: none;
    margin: 4vw 4vw 0vw 4vw;
    font-size: 1.5vw;
    font-family: 'Raleway', sans-serif;
    padding-bottom: 1vw; 
}


/* Underline From Center */
nav a {
  
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
nav a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  right: 50%;
  bottom: 0;
  background: #fff;
  height: 2px;
  -webkit-transition-property: left, right;
  transition-property: left, right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
nav a:hover:before, nav a:focus:before, nav a:active:before {
  left: 0;
  right: 0;
}

#nav_two{
    float: right;
}

#nav_one{
    margin-left: 8vw
}

#nav_shape{
  height: 65vw;
    width: 65vw;
    background: #fff;
    position: relative;
    top: -59vw;
    z-index: -1;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0 auto;
    }

#portrait{
    height: 15vw;
    width: 15vw;
    position: relative;
    top: -42.5vw;
    z-index: 1;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0 auto;
    }

#portrait img{
    width: 90%;
    border: 1vw solid #ed1846;
}

#title{
    margin: auto;
    width: 70%;
    text-align: center;
    position: relative;
    top: -25vw;
}

#title h1{
    font-family: 'Oswald', sans-serif;
    color: #fff;
    margin-bottom: 1.5em;
    font-size: 5vw;
    }



#title h3{
    font-family: 'Oswald', sans-serif;
    color: #fff;
    margin: 0 auto;
    width: 65%;
    font-size: 3vw;
    padding: 2vw 0;
}

#triangle{
    width: 0;
    height: 0;
    border-left: 53.5vw solid transparent;
    border-right: 53.5vw solid transparent;
    border-top: 13vw solid #15032d;
    position: relative;
    top: -0.5vw;
    left: -4vw;
    z-index: 1;
    margin: 0 auto;
}

#background_one{
    background-color: #ed1846;
    width: 100%;
    height: 118vw;
}

#heading{
    margin: 0 auto;
    position: relative;
    top: -2vw;
}

#heading h1{
    font-family: 'Dense', serif;
    color: #fff;
    font-size: 7vw;
    text-align: center;
}

hr{
    width: 48vw;
}

#skills{
    padding: 4vw 0;
    width: 100%;
    position: relative;
    top: -104vw;
    z-index: 1;
}

#skills_two{
    padding: 15%;
}

.example{
   height: 12vw;
    width: 12vw;
    margin: 0 auto;
}

.example img{
    width: 100%;
    margin: 0 auto;
}

.example img {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
.example img:hover, .example img:focus, .example img:active {
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

h5{
    text-align: center;
    color: #fff;
    font-family: "Dense", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3vw;
    padding: 1vw;
}

.example_text{
    width: 75%;
    margin: 5% auto;
    padding: 5%;
}

.example_text p{
    color: #fff;
   text-align: center;
    margin: 5% 0 0 0 ;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height: 1.8vw;
    font-size: 1.3vw;
    letter-spacing: 0.03vw;
}

.example_container{
    width: 33%;
    float: left;
    margin: 6% 0% 0 0;
}

#triangle_two{
    width: 0;
    height: 0;
    border-left: 58.5vw solid transparent;
    border-right: 58.5vw solid transparent;
    border-top: 14vw solid #ed1846;
    position: relative;
    top: -10.5vw;
    left: -9vw;
    z-index: 2;
    margin: 0 auto;
}

#heading_two{
    position: relative;
    top: -88vw;
    left: -32vw;
    margin: 0 auto;
}

#heading_two h1{
    font-family: 'Dense', serif;
    color: #fff;
    font-size: 7vw;
    text-align: center;
}

.style_two{
	border-top: 5px solid #fff;
    padding: 0 0 15% 0;
    margin: 0 auto;
    width: 18%;
    
}

#container_two{
    width: 100%;
}

#contact_container{
    width: 100%;
    position: relative;
    top: 28vw;
    z-index: 3;
    text-align: center;
    
}

#contact_container h5{
    
    color: #15032d;
    font-family: "Dense", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 3vw;
    padding: 1vw;
}
    }

#contact_container img{
    float: left;
    margin: 0.2em 1em 0 1em;
    
}

#contact_container #one{
    padding: 0 0 2vw 0;
}

#contact_container #two{
    padding: 0 0 2vw 0;
}

#one img, #two img, #three img{
    width: 5vw;
}

#contact_container #one, #contact_container #two, #contact_container #three{
    width: 33%;
    display: inline;
    float: left;
}

#icon_container{
    width: 65vw;
    margin: 0 auto;
    position: relative;
    top: 74vw;
    left: 3vw;
}

#icon_container a{
    padding: 5vw;
}

#icon_container img{
    width: 5vw;
}

#logo_two{
   height: 21vw;
    width: 21vw;
    background: #15032d;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    overflow: hidden;
    margin: 0 auto;
    top: 49.2vw;
    position: relative;
    z-index: -1;
    
}

#monogram_two{
    display: inline;
    position: relative;
    top: 32vw;
    left: 42.8vw;
}

#monogram_two img{
    width: 12vw;
    height: 6vw;
}

#monogram_two img{
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}
#monogram_two img:hover, #monogram_two img:focus, #monogram_two img:active {
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
}

#background_two{
    background-color: #fff;
    z-index: 1;
    width: 100%;
    height: 77vw;
    position: relative;
    top: -87vw;
}

#footer{
        height: 23vw;
    width: 100%;
    position: relative;
    top: 31vw;
    background-color: #15032d;
    z-index: -4;
}

#triangle_three{
    width: 0;
    height: 0;
    border-left: 30vw solid transparent;
    border-right: 30vw solid transparent;
    border-bottom: 30vw solid #ed1846;
    position: relative;
    top: -13.5vw;
    left: -0.2vw;
    z-index: -5;
    margin: 0 auto;
}