html,header, footer, body, nav, div, img, a, li, h1, h2{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
}
*{box-sizing: border-box;} /*THIS DECIDES BOX SIZE SO YOU CAN PLAY WITH IT*/

a:link, a:visited{
	color:#414f52;

	transition: .2s color ease-in-out;
}
a:hover, a:active{
	color: #262d30;
	text-decoration:none;
}

/*styling content*/
main{
	padding: 0rem;
	line-height: 1.6rem;
}
section>p{
	text-indent: 2.6rem;
}


/*styling the header part*/
.toggle-menu{
	display: none;
}
header{
	margin:0;
	padding:0.3rem 6rem 0.5rem 6rem; /* THIS IS FOR NAVIGATION BAR SIDE PADDING */
}
.site-title img{
	max-width: 250px;
	display: inline-block;
	vertical-align: middle;
}

.nav-list{	
	display: flex;
	flex-flow: row;
	justify-content: space-between;
	align-items: center;
	white-space: nowrap;
	font:2.7vmin calibri;
	background:rgba(0,0,0,0);
	
	
}
.nav-list > li {
	position: relative;
	margin:0 0 0 0;
}

.nav-list>li:not(.has-logo)>a{
	text-transform: uppercase;
	display: block;
	padding:2rem;
}

.nav-list ul{
	position: absolute;
	z-index: 1010;
	background-color: #fff;
	line-height: 1.7vw;
	left: -9999px;
	padding:0px 10px 0px 10px;
}

.nav-list ul a{
	font-weight: normal;
	display: block;
	padding:1.5vw 0.2vw 0.5vw 0.4vw;	
}

.nav-list > li:hover a + ul{
	left: 0;
	top:100%;
}

.mobile-display{
	display: none;
}

@media only screen and (max-width: 58.75rem){
	.has-logo{
		display: none;
	}
	.mobile-display{
		display: block;
		margin:0rem auto;
		text-align: center;
		
	}
}
@media only screen and (max-width: 57.68rem){
	.toggle-menu{
		display: block;
		max-width: -webkit-min-content;
		max-width: -moz-min-content;
		max-width: min-content;
		margin: 0.5rem auto;
		background-color: #e54658; 
		text-align: center;
		color: #fff !important;
		padding:0.4rem 1rem 0.4rem 1rem;
		border-radius: .25em;
		

	}

	.toggle-menu:hover{background-color: #bc2435;}

	.nav-list{
		display: block;
		width: 100%;
		position: static;
		line-height: 1rem;
		z-index: 1012;
		left: 0;
		top:0;
		background-color: #fff;
		max-height: 0;
		overflow: hidden;
		height:80vh;
		
	
	}

	.active{
		max-height: 100%;
		overflow: auto;
	}


	.nav-list  ul{
		position: static;
		text-indent: 2rem;
		z-index: 1013;
	}
}