*{
margin: 0;
padding: 0;
}
@font-face{
    font-family: MyNunito;
    src: url(Nunito-Regular.ttf);
}
body{
background-color: black;
color: white;
font-family: sans-serif, serif;
overflow-x: hidden;
width: 100%;
min-width: 1064px;
font-family: MyNunito;
}
.headerBar{
position: fixed;
top: 0px;
background: #E8E8E8;
color: white;
text-shadow: 1px 1px 10px black; 
text-align: center;
width: 100%;
min-width: 1064px;
height: auto;
padding-bottom: 3px;
background-image: url("images/Paagoriastoneloop.jpg");
}
.links a:link, .links a:visited{
color: white;
text-shadow: 1px 1px 10px black; 
}
.links li{
list-style: none;
font-size: 95%;
display: inline-block;
padding: 10px;
margin: 15px 55px;
}
.links a{
transition: all .4s;
text-decoration: none;
margin: 27px 15px 27px 15px;
padding: 0px;
}
.links a:active, .links a:hover{
cursor: pointer;
color: white;
text-shadow: 1px 1px 10px black; 
background: black;
background: linear-gradient(black, #333);
padding: 28px 15px 28px 15px;
margin: 0px;
}
a.nav-active{
color: white !important;
background: black;
background: linear-gradient(black, #333);
padding: 28px 15px 28px 15px;
margin: 0px;
}
img#headerImg{
width: 803px;
height: auto;
}
#aboutBox{
display: inline-block;
width: 40%;
height: auto;
float: right;
background-image: url("images/Paagoriastonesquaretile.jpg");
background-color: #BBB;
color: white;
word-wrap: break;
padding: 30px;
margin-right: 10%;
margin-top: 80px;
font-size: 110%;
line-height: 155%;
border-radius: 15px;
transition: all .4s;
}
#aboutBox:hover{
transform: scale(1.05);
}
.bigImage{
background-attachment: scroll;
background-size: cover;
box-shadow: inset 0 0 100px #555;
width: 100%;
height: 905px;
position: relative;
clear: both;
-ms-interpolation-mode: nearest-neighbor;
image-rendering: -webkit-optimize-contrast;
image-rendering: -webkit-crisp-edges;
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: pixelated;
}
#bigImage1{
background-image: url("images/EndiusBackgroundFinal.jpg");
}
#bigImage2{
background-image: url("images/Paagorialandscape1.jpg");
}
#bigImage3{
background-image: url("images/Paagoriacastle1.jpg");
}
#bigImage4{
background-image: url("images/PaagoriaShop.jpg");
}
#wrap{
padding: 40px;
text-align: center;
width: 100%;
min-width: 1064px;
margin-left: -40px;
}
.left, .right{
vertical-align: top;
color: white;
text-shadow: 1px 1px 10px black; 
background-color: #444;
display: inline-block;    
padding: 20px;   
width: 200px;
height: 220px;
border-radius: 12px;
transition: all .4s;
position: relative;
margin-bottom: 2.5%;
background-attachment: scroll;
background-size: cover;
clear: both;
}
.b1{
background-image: url("images/Paagoriastonetexture1.jpg");
}
.b2{
background-image: url("images/Paagoriastonetexture2.jpg");
}
.b3{
background-image: url("images/Paagoriastonetexture3.jpg");
}
.b4{
background-image: url("images/Paagoriastonetexture4.jpg");
}
.right,#right{
margin-left: 2.5%;
}
.left a, .right a, #left a, #right a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 12px;
}
#left, #right{
vertical-align: top;
color: white;
background-color: #444;
display: inline-block;    
padding: 20px;   
width: 200px;
height: 220px;
border-radius: 12px;
transition: all .4s;
position: relative;
margin-bottom: 2.5%;
}
.left:hover, .right:hover{
transform: scale(1.10);
}
#characterBlockLeft, #characterBlockRight{
vertical-align: top;
background-image: url("images/Paagoriastonesquaretile.jpg");
background-color: #BBB;
color: white;
display: inline-block;
padding: 20px;
width: 180px;
height: 300px;
border-radius: 15px;
margin-bottom: 2.5%;
transition: all .4s;
}
#characterBlockRight{
margin-left: 2.5%;
}
#characterBlockLeft:hover, #characterBlockRight:hover{
transform: scale(1.25);
}
#content{
margin: 70px auto;
margin-bottom: -70px;
}
#home{
height: auto;
background-color: #555;
}
#characters{
height: auto;
background-color: #555;
}
#about{
height: auto;
background-color: #555;
}
#shop{
height: auto;
background: #555;
background: linear-gradient(#555, #777);
}
#footer{
color: white;
line-height: 50px;
height: 50px;
background-color: #E8E8E8;
background-image: url("images/Paagoriastoneloop.jpg");
}
.modal{
transition: all .4s;
opacity: 0;
pointer-events: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
color: black;
background-color: #C3C3C3;
background: linear-gradient(#A3A3A3, #C3C3C3);
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 60%;
}
.close, .closePurchase, .closePurchase2{
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus,
.closePurchase:hover,
.closePurchase:focus,
.closePurchase2:hover,
.closePurchase2:focus{
color: black;
text-decoration: none;
cursor: pointer;
}
.form input[type="text"], .form input[type="password"], .form input[type="submit"], .form input[type="reset"], .form textarea{
padding: 9px;
border: solid 1px #888;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 88%;
max-width: 200px;
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
-moz-background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px); 
}
.form textarea{
width: 88%;
max-width: 87%;
height: 150px;
line-height: 150%;
}
.form input:hover, .form textarea:hover, .form input:focus, .form textarea:focus{
border-color: #444;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.form label{
margin-left: 10px;
color: black;
}
.submit input{
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
cursor: pointer;
}
.submit input:hover{
-webkit-box-shadow: rgba(0, 0, 0, 0.38) 0px 0px 8px;
}