/*
 * bg blue #008cd3
 * a yellow #fec409
 * a orange #e26819
 * a red #ad200b
 * h1 text #222233
 * h1 span text #ffffff
 * overlay bg #111111
 *
 * deprecated
 * bg blue #008cd3 
 * h1 text #fff
 * h1 span text #bbb
 *
 * a psuedo order LoVeHAte
*/

/* The animation code */

@keyframes replace-yourself{

    0% { letter-spacing: -2.5vw; }
    100% { letter-spacing: 0.5vw; }
}

@keyframes why-replace-yourself{

    0% { color: #008cd3; }
    20% { color: #008cd3; }
    100% { color: #fff; }
}

@keyframes open-button{

}

@keyframes home-button{

}

html{

    padding: 0;
    margin: 0;
}

body{ 

    background-color: #008cd3; 
    padding: 0;
    margin: 0;
    font-size: 16px;
}

article{ 

    padding: 70px 20px 0 30px; 
}

h1{ 

    color: #fff;
    	font-size: 40px; 
    	font-size: 8vw; 
    font-family: Arial, sans-serif; 
    letter-spacing: 0.5vw;
}

h1 span.replace-yourself{ 

    color: #222233; 
}

/* animate */

h1 span.replace-yourself{ 
     
    letter-spacing: 0.5vw;
    animation-name: replace-yourself;
    animation-duration: 1s; 
}

h1 span.why-replace-yourself{ 
     
    color: #fff; 
    animation-name: why-replace-yourself;
    animation-duration: 6s; 
}

/* footer */

footer div{
	
	text-align: center;
}


/* menu and overlay */

#myNavOverlay{

	visibility: visible;
}

a.homebtn{

    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 100%;
    color: #fec409;
    text-decoration: none;
}

a.homebtn img{

	margin-top: 20px;
    margin-left: 20px;
    height: 66px;
    width: 60px;
}

a.openbtn{

    position: absolute;
    top: 0px;
    right: 0px;
    margin: 5px 20px;
    font-family: Arial, sans-serif;
    font-size: 70px;
    line-height: 100%;
    color: #fec409;
    text-decoration: none;
}

a.openbtn:link{

    color: #fec409;
}
a.openbtn:visited{
    color: #fec409;
}
a.openbtn:hover{
    color: #e26819;
}
a.openbtn:active{
    color: #ad200b;
}

.overlay{

    height: 0;      /* change according to slide type */
    width: 100%;    /* change according to slide type */
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111; /* #111111; #330bad #5F4B8B */ 
    overflow-x: hidden;
    transition: 1.0s;
}

.overlay-content{

    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}


.overlay .overlay-content a{

	padding: 10px 0;
}

.overlay a{

    font-family: Arial, sans-serif;
    	font-size: 20px; 
    	font-size: 5vw; 
    letter-spacing: 0.3vw;
    text-decoration: none;
    color: #fec409;
    display: block; 
}

.overlay a:link{

    color: #fec409;
}
.overlay a:visited{
    color: #fec409;
}
.overlay a:hover{
    color: #e26819;
    background-color: #000;
}
.overlay a:active{
    color: #ad200b;
    background-color: #000;
}

.overlay .closebtn{

    position: absolute;
    top: 0px;
    right: 0px;
    margin: 5px 15px;
    font-family: Arial, sans-serif;
    font-size: 80px;
    line-height: 100%;
}


@media (min-width: 575px) {
	article{
		padding: 5vw 3vw 0 30px;
	}
	
	h1 {
		font-size: 40px; 
		font-size: 5vw;
	}
}