@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Montserrat:400');

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}
.intro {
    height:100%;
    width:100%;
    margin:auto;
    background: url(https://static.pexels.com/photos/230986/pexels-photo-230986.jpeg);
    display:table;
    top:0;
    background-size:cover;
}
.intro .inner {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    max-width:none;
}
.content {
    max-width:600px;
    margin: 0 auto;
    text-align:center;
    padding-bottom:20%;
}

.content h1 {
    font-family: 'roboto',sans serif;
    font-size:600%;
    font-weight:100;
    color: #FF00FF;
    line-height:70%;
}

.content h2 {
    font-family: 'roboto',sans serif;
    font-size:200%;
    font-weight:100;
    color: #FFFFFF;
    line-height:70%;
}

.btn {
    font-family:'roboto', sans-seraf;
    font-size:135%;
    font-weight:400;
    color: #3a6168;
    text-transform:uppercase;
    text-transform:none;
    border:solid #3a6168;
    padding: 10px 20px;
    border-radius:9px;
}

.btn:hover {
    color: #cbdfb6;
    border: solid #cbdfb6 2px;
    transition: all 0.5s;
    
}

/*--- Media Queries --*/
@media screen and (max-width: 900px) {
    
    background-size: cover;
    
.content { 
    padding-bottom: 30%
}
.btn {
    font-size: 130%;
    padding: 9px 17px;
}

@media screen and (max-width: 768px) {
.content { 
    padding-bottom: 40%
}
.content h1 {
    font-size:300%;
}
.btn {
    font-size: 110%;
    padding: 7px 15px;
}
}
@media screen and (max-width: 480px) {
.content { 
    padding-bottom: 40%
}
.btn {
    font-size: 110%;
    padding: 6px 14px;
}
	
}