/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
*{
box-sizing:border-box;
}
body{
	background-image:url(../images/bg3.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.box{
width:1200px;
margin: 10px auto;
}
header{
width:100%;
height: 100px;
position: relative;
z-index:10;
background-color:rgba(255, 129, 129, 0.918);
border-radius: 30px;
}
header a{
display:inline-block;
position:absolute;
}
header img{
width: 60px;
}
nav{
z-index:0;
position:relative;
margin: 0 auto;
margin-top: 10px;
width: 1200px;
display: inline-block;
top: 10px;
}
nav ul{
text-align: center;
}
.mininav{
display: inline-block;	
}
h1{
padding: 10px 0;
display:block;
text-align:center;
font-size:50px;
font-weight:900;
position: relative;
top: 20px;
z-index: -3;
}
nav li{
display: inline-block;
}
nav li a{
display: inline-block;
border-right: 1px solid red;
padding: 5px 7.7px;
font-size: 1.3em;
margin: 0 0 5px 0;
transition: color 0.6s;
position: relative;
text-decoration:none;
color: black;
background-color:rgb(248, 248, 248);
}
#borderless{
border-right: 0;
}
#borderless2{
	border-right: 1px solid red;
}
nav li a:hover{
    background-color: #FDEEEE;
    color:red;
}
.def, .np{
	background-color:rgb(248, 248, 248);
	font-size: 2em;
	border-radius: 40px;
	text-align: center;
	width: 800px;
	padding: 30px;
	margin: 100px auto 0 auto;
	border-top: 3px solid red;
	border-bottom: 3px solid red;
}
.np{
	width: 300px;
	margin-top: 20px;
}
.defbox{
	width: 1200px;
}
strong{
	font-weight:900;
	color: #FF8B8B;

}
@media only screen and (max-width:1220px){
	.box{
		width:700px;
	}
	nav{
		width: 700px;
		margin: 0 auto;
		text-align: center;
		margin: 0 auto;
	}
	#borderless2{
		border-right: 0;
	}
	header{
		width:700px;
		margin:0 auto;
	}
	.def{
		width: 600px;
	}
	.defbox{
		width: 700px;
	}
}

@media only screen and (max-width:800px){
	.box{
		width: 600px;
	}
	h1{
		font-size: 40px;
	}
	nav li{
		display:block;
	}
	nav li a{
		width: 200px;
		padding: 16px;
		text-align: center;
		border-right: 0;
		background-color:rgb(248, 248, 248);
		font-size: 1.7em;
		border-radius:10px;
	}
 	nav li a:before{
		content: '';
		position: absolute;
		bottom: 0;
		left: 50px;
		border-bottom: 1px solid rgb(255, 0, 0);
		width: 100px;
	}
	#borderless:before{
		border-bottom: 0;
	}
	nav{
		border: 0px solid red;
		width: 200px;	
	}
	header{	
		position:sticky;
		top:10px;
		width: 600px;
		height:120px;
	}
	h1{
		padding: 30px 0;
	}
	.def, .np{
		width: 300px;
		font-size: 1.5em;
		margin: 0 50px;
		position: relative;
		top: 0;
	}
	.np{
		position:relative;
		top: 20px;
	}
	.defbox{
		display: inline-block;
		width: 400px;
		position: absolute;
		top: 250px;
	}
}

@media only screen and (max-width:620px){
	.box{
		width: 360px;
	}
	h1{
		
		line-height: normal;
		font-size: 30px;
	}
	nav{
		border: 0px solid red;
		width: 360px;	
		top: 0px;
	}
	nav li{
		display:inline-block;
	}
	header{
		width: 360px;
		height:120px;
		margin-bottom: 20px;
	}
	nav li a{
		width: auto;
		font-size: 0.9em;
		margin: 2px;
		padding: 12px 8px;
	}
	nav li a:before{
		width: 0px;
	}
	.def, .np{
		width: 250px;
		padding: 25px;
		position: static;
		margin: 50px 55px 20px 55px;
	}
	.np{
		margin: 20px 55px 0 55px;
	}
	.defbox{
		width: 360px;
		position: static;
	}

}