* {
margin: 0 0 0 0;
padding: 0 0 0 0}
body {
max-width: 1600px;
margin: 0 auto;
font-family: ’ヒラギノ角ゴ Pro W3’, ‘Hiragino Kaku Gothic Pro’, メイリオ, Meiryo, Osaka, ‘MS Pゴシック’, ‘MS PGothic’, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #333333;
background: #ffffff}
.img-responsive {max-width:100%; margin-top:10px; margin-bottom:10px}
.button {
display: inline-block;
padding: 5px 10px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 15px;
box-shadow: 0 3px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
h1 , h2 {font-weight: lighter}
/* Define image1 */
.image1 {
margin: .5% .5%;
border: solid #000000 1px;
box-shadow: 1px 1px 2px #000004;
float: right; }
/* Hide initial unused images */
.image2 , .image3 , .image4 {
display: none}
/* Set up structure and drop down menu */
header {
width: 90%;
text-align:  center;
padding: .5% 5%;
background: #2e2e2e}
header h1 {
font-size: 30px;
text-align:  center;
color: #fefefe;
text-shadow: none}
.slogan {
font-size: 24px;
font-style: oblique;
color: goldenrod;
text-shadow: none;}
nav {
width: 90%;
background: #2e2e2e;
padding: 0 0;
float: left;
margin: 1% 5% }
/*  horizontal navbar  */
.hnavbar{
list-style:none;
margin-bottom: 0;
float:left;
position:relative;
z-index:5;}
.hnavbar li{
float:left;
margin-right:10px;
margin-bottom: 0px;
position:relative;}
.hnavbar a{
display:block;
padding:5px;
color:#fffffe;
border: solid #00000e 1px;
text-decoration:none;}
.hnavbar a:hover{
text-decoration:none;
border: solid #0e0e0e 1px;}
/*--- DROPDOWN ---*/
.hnavbar ul{
list-style:none;
position:absolute;
left:-9999px;}
.hnavbar ul li{
padding-top: 0px;
float:none;
width: 150%}
.hnavbar ul a{
white-space:nowrap;}
.hnavbar li:hover ul{left:0;}
.hnavbar li:hover a{ 
background:#2e2e2e;
text-decoration:none;}
.hnavbar li:hover ul a{ 
text-decoration:none;}
.hnavbar li:hover ul li a:hover{
background:#696969;}
.main {
width: 80%;
padding: 0 10%;
float: left;}
footer {
width: 100%;
background: #2e2e2e;
float: left}
/* Define text elements */
.main h1 {
font-size : 24px;
text-align : center;
color : #000001;
margin: 1% 0 }
.main h2 {
font-size : 22px;
text-align : center;
color : #696969;
margin: 1% 0}
.main p {
text-align : left;
margin: 2% 0}
.main p.clear {
clear:both}
footer p {
text-align : center;
color: #fefefe;
padding: 2% 0} 
footer p a , footer p a:visited {
color: #c0c0c0}
/* Media Queries for web page adjustments */
@media all and (max-width:1440px) {
.image1 {display: none} /* Hide image1 */
.image2 {display: block;float: right} /* Show image2 and float it*/
}
@media all and (max-width:1280px) {
body {font-size:18px}
.image2 {display: none} /* Hide image2 */
.image3 {display: block;float: right} /* Show image3 and float it */
}
@media all and (max-width:1024px) {
.main h1 {font-size:24px}
.main h2 , .right h2 {font-size:20px}
}
@media all and (max-width:850px) {
.image3 {display: none}
.image4 {display:block;float: right}
}
@media all and (max-width:768px) {
body {font-size: 16px;}
header h1 {font-size: 22px}
.slogan {font-size: 18px}
.main h1 {font-size:22px}
.main h2  {font-size:18px}
}
@media all and (max-width:720px) {
.main h1 {font-size:20px}
}
@media all and (max-width: 480px) {
header ,  nav , .main , .hnavbar , .hnavbar li ul ,  
footer  {
width: 90% !important;
display: block !important;
padding:0 5% !important;
margin: 0 auto !important;}
header h1 {float: none;font-size:18px;text-align: center}
.slogan {font-size:18px;}
.main h1 , .main h2 , .right h2 {font-size: 18px}
.hnavbar li , .hnavbar li ul li {
width: 100%;
text-align: center;
margin: 0 0;}
.hnavbar li a {
padding: 5% 0;}
.hnavbar li ul {
z-index: 10}
.image4{display: none;}/* hide image4 */
.image3 { /* show image3 */
float: none; /* Remove float property - important for centering */
display: block;
max-width: 96%;
margin: 2% auto;
clear: both}
}