/*  INITAIL ============================================================================= */
html {font-size:18px}

body { font-family: 'Fira Sans', sans-serif;
        background-color: #4d4855;
background-image: radial-gradient(circle,#4d4855 5%, #000000);
        }

h1 {font-weight: 800;font-size: 1.75rem;}
h2 {font-weight: 800;font-size: 1.75rem;}
h3 {font-weight: 400;font-size: 26px;line-height:1.35}
h4 {font-weight: 400;font-size: 1.125rem;}
h5 {font-weight: 700;font-size: 1.125rem;}
h6 {font-weight: 400;font-size: 1.125rem;}

p {	font-size:1rem;margin: 0 0 1.25rem;}


a {text-decoration:none; color:#d7d7d7;}

a:hover {color:white}


/*  HEADER ============================================================================= */

.header {
    padding: 9px 56px;
   
    
    }
        
.site-title {
    margin: 0;
    
    font-weight: 800;
    font-size: 18px;
    line-height: 38px;
    float:left;
    }
.primary-nav {
    height:100vh;
    width:95%;
    padding:0 2.5%;
    position:fixed;
    top:-100vh;left:0;
    background-color: #4d4855;
background-image: radial-gradient(circle,#4d4855 5%, #000000);
transition: .3s;
}
.nav-item { 
    padding:7px 14px 7px;
    font-size:16px;
    float:right;
    }
.list-menu {
    margin-top:32px;
}

.list-item {
    text-align:center;
    margin-bottom: 7px;
    padding: 7px 14px 7px;
}
.menu-toggle {
    padding: 7px 14px 7px;
    font-size:16px;
    position:absolute;
    top:10px;
    right:0px;
}
.heroimage {padding: 36px 18px;
    text-align:center;
    color:white;
}
.heroimage h3 {color:#d7d7d7}

.desc {width:900px;max-width:90%;margin:auto;padding-top:8px;color:#d7d7d7}
.desc2 {width:700px;max-width:80%;margin:auto;padding-top:18px;color:#d7d7d7}

.desc a {color:white;}

.aboutme a {text-decoration:none; border-bottom:1px dotted darkgrey;}

.aboutme {width:900px; max-width:85%; margin:36px auto;}
.aboutme-1 {padding-right:18px;text-align:left;font-weight:400}

.abutton {margin:auto;width:300px;background:#ffcc00;color:#35323b;
            text-align:center;font-size:20px;padding:9px 0px 6px;
            border-radius:3px; font-weight:600;border-bottom:solid 3px #ffd400;
}
input {
    width:95%;
    margin: 10px 0px;
    padding: 10px 2.5%;
    font-family:'Barlow';
    font-size:20px;
    background:#f5f8fa;
    outline:none;
    border:#e3e3e3 solid 1px;
    cursor:pointer;
}
input:focus {   background:white;
                border:#e3e3e3 1px solid;
}
#contactushere {
    display:none;
}
textarea {
    width: 95%;
    margin: 10px 0px;
    height: 200px;
    padding: 10px 2.5%;
    font-family:'Barlow';
    font-size:20px;
    background:#f5f8fa;
    outline:none;
    border:#e3e3e3 solid 1px;
}
textarea:focus { background:white;
                border:#e3e3e3 1px solid;
}
	

.footer {font-size:14px;background:#f7f7f7;border-top:solid 1px lightgray;padding: 10px 0 10px;text-align:center;color:darkgray}
.foot1 {padding-left:2rem;text-align:left;}

.footer a {color:darkgray; text-decoration:none;border-bottom:1px dotted darkgray}
.footer a:hover {color:#03a9f4}

#replybox {display:none;}
#replybtn {text-align:right}


@media only screen and (max-width: 900px) {
    .footer {font-size:12px}
    .foot1 {padding-left:0;text-align:center;}
}


@media only screen and (max-width: 767px) {
    .menu-toggle {display:inline}
    .nav-item{display:none}
    .site-title {margin-left: -42px;}
    .aboutme .site-title {margin-left:0px}
    .aboutme-1 {padding-right:0px; text-align:left}

}
@media only screen and (min-width: 767px) {
    .nav-item:{display:block}
    .menu-toggle {display:none}
}
@media only screen and (max-width: 570px) {
    h3 {font-size:18px}
}