body{
	margin: 0;
	font-family: 'Open Sans', sans-serif;
	background-color: rgb(12,26,36); /* For browsers that do not support gradients */
      /* Standard syntax */
}

#header{
padding-left: 20%;
padding-right: 20%;
/*background-color: lightgrey;*/
height: 70px;
}

.active a{
    border-bottom: #515151 solid 1px;
    color:#515151 !important;
}
.content {

  height:calc(100% - 70px);
}

.nav-bar {
    list-style-type: none;
    color: #515151;
    padding: 0;
    overflow: hidden;
    text-align: center;


}

.nav-bar li {
    float: left;
    margin:auto 0;
    width: 25%;
    text-decoration: none;

}

.nav-bar li a {
    display: block;
        text-align: center;
    padding-top: 15px;
    font-size: 1.75em;
    text-decoration: none;
    color:#818181;
}

/* Change the link color to #111 (black) on hover */
.nav-bar li a:hover {
	cursor: pointer;
    color: #515151;
}



.content-messages{
	color: #515151;

}

#greetings{
	margin-top: 15%;
	margin-right: 15%;
	float: right;
	text-align: center;
	cursor: default;
	height:400px;
	width:360px;

}

#bigname{
    font-size: 5em;
    
}

#hello{
	font-size: 10em;
	position: absolute;
	height: 200px;
	/*top:30%;*/
    padding-left:5px;
	top:0;
	 -moz-animation-name: dropHeader;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 1s;

    -webkit-animation-name: dropHeader;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;

    animation-name: dropHeader;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;

}

#hCover{

	height: 200px;
	width:375px;
	position: absolute;
	top: 30%;
	overflow: hidden

}
#split{
	height:2px;
	width:100%;
	background-color: #515151;
		}

#splitAni{
	height:3px;
	width:375px;
	background-color: #515151;

	position: absolute;
	top: 0;
	-moz-animation-name: splitOut;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: .5s;

    -webkit-animation-name: splitOut;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: .5s;

    animation-name: splitOut;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .5s;


}
#sCover{

	height: 3px;
	width:375px;
	position: absolute;
	top: calc(30% + 200px);
	overflow: hidden

}

#name{
	height: 50px;
	font-size: 3.25em;
	position: absolute;
	top: 0;
    padding-left:10px;
    color:#818181;
	-moz-animation-name: dropName;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: 1s;

    -webkit-animation-name: dropName;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;

    animation-name: dropName;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s;

}
h2{
    color: #DFDFDF;

}
.card{
    background-color: white;
    color: #DFDFDF;
    width:500px;
    height: 700px;
    float: left;
    margin-left: 50px;
    margin-top: 100px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /*border: #818181 solid 1px;
    /*-moz-animation-name: scalePage;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: ease-in;
    -moz-animation-duration: .5s;

    -webkit-animation-name: scalePage;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: .5s;

    animation-name: scalePage;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .5s;*/
}

button{
    height: 50px;
    width:150px;
    font-size: 1em;
    /*border: 1px solid #818181;*/
    border:1px solid #818181;
    border-radius: none;
    background-color: white;
    /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    color: #DFDFDF;
}

input{
    width:60%;
    height: 50px;
    border:0;
    border-bottom:1px solid #818181;
    margin-top:10px;
    font-size: 2em;
    color: #818181;
    margin-bottom: 15px;
    padding-bottom: 0;
}

textarea{
    width:60%;
    margin-top:10px;
    font-size: 1em;
    color: #818181;
    border:1px solid #818181;
    height: 200px;
    margin-bottom: 15px;
}

*:focus {
    outline: none;
}
button:hover{
    background-color: #F1F1F1;
    background-color: lightblue;
    }

    button:focus{
        box-shadow: none;
    }
.card-text{
    padding: 10px;
    text-align: center;
    margin-left: 20%;
    width:600px;
}

.card img{
    width: 100%;
    height: 100%;
}

.card.contact{
	height: 180px;
}

#page1{
    margin-left: 150px;

}

#nCover{

	height: 200px;
	width:375px;
	position: absolute;
	top: calc(30% + 203px);
	overflow: hidden

}

#title{
	margin-top: 5%;
	margin-right: 10%;
	float: right;
	text-align: center;
	cursor: default;
    height:400px;
	width:360px;
}

#main {
	font-size: 5em;
    width:100%;
}
#hCover{

    height: 200px;
    width:375px;
    position: absolute;
    top: 30%;
    overflow: hidden

}

#desc{
	font-size: 2em;
    width:calc(100%-20px);
    padding-left: 10px;
    padding-right: 10px;
    color:#818181;
}
#selfie{
width:100%;
padding-top: calc(10%);
margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
}
#icon{
    width: 100%;
    height: 90px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    vertical-align: middle;
}

#icon i.atSymbol:hover{
		color:darkred;
}

#icon i.linkedSymbol:hover{
		color: #2E617F;
}

#icon i.githubSymbol:hover{
		color: black;
}

#icon i{
    font-size: 6em;
    color: #DFDFDF;
    cursor: pointer;
		margin-right: 20px;

	}
@-moz-keyframes scalePage {
    0% {
        -moz-transform: scale(.75);
        opacity:.5;
    }
    100% {
        -moz-transform: scale(1);
        opacity:1;
    }
}
@-webkit-keyframes scalePage {
    0% {
        -webkit-transform: scale(.75);
        opacity:.5;
    }
    100% {
        -webkit-transform: scale(1);
        opacity:1;
    }
}
@keyframes scalePage {
    0% {
        transform: scale(.75);
        opacity:.5;
    }
    100% {
        transform: scale(1);
        opacity:1;

    }
}
@-moz-keyframes dropHeader {
    0% {
        -moz-transform: translateY(300px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropHeader {
    0% {
        -webkit-transform: translateY(300px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropHeader {
    0% {
        transform: translateY(300px);
    }
    100% {
        transform: translateY(0);
    }
}
@-moz-keyframes splitOut {
    0% {
        margin-right: 50%;
        margin-left: 50%;
        width: 0;
    }
    100% {
        margin-right: 0;
        margin-left: 0;
        width: 100%;

    }
}
@-webkit-keyframes splitOut {
    0% {
        margin-right: 50%;
        margin-left: 50%;
        width: 0;
    }
    100% {
        margin-right: 0;
        margin-left: 0;
        width: 100%;

    }
}
@keyframes splitOut {
    0% {
        margin-right: 50%;
        margin-left: 50%;
        width: 0;
    }
    100% {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
    }
}

@-moz-keyframes dropName {
    0% {
        -moz-transform: translateY(-300px);
    }
    100% {
        -moz-transform: translateY(0);
    }
}
@-webkit-keyframes dropName {
    0% {
        -webkit-transform: translateY(-300px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}
@keyframes dropName {
    0% {
        transform: translateY(-300px);
    }
    100% {
        transform: translateY(0);
    }
}