/* ==================================================== */
/* CSS FOR HOME PAGE: */
/* ==================================================== */

* {
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing: border-box;
}

/* DEFAULT PAGE LINK COLORS: */
a { text-decoration:none; }
a:link { color:#770000; }
a:visited { color:#90c; }
a:hover { color:#f90; }
a:active { color:#f00; }

body { 
margin:0px; 
background-color:rgb(249, 244, 226);
background-image: url("Resources/watercolor-ivory.jpg"); 
height:100%;
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 18px;
}

/* ==================================================== */
/* IMAGE SEQUENCE: */
/* ==================================================== */

#img_seq_container {
border: 0px solid red;
position:relative;
top:0px;
left:0px;
width:100%;
max-width:2000px;
min-width: 340px;
height: 540px;
overflow:visible;
text-align:center;
display:block;
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-o-transition-duration:0.4s;
transition-duration:0.4s;
z-index:1;
}

#img_A1 {
left: 2%;
z-index:1;
animation-name: twirl_in_img_1;
animation-duration: 1.0s;
animation-delay:1s;
animation-fill-mode: both;
}

#img_A2 {
left: 30%;
z-index:2;
animation-name: twirl_in_img_2;
animation-duration: 1.0s;
animation-delay:2s;
animation-fill-mode: both;
}

#img_A3 {
left: 58%;
z-index:3;
animation-name: twirl_in_img_3;
animation-duration: 1.0s;
animation-delay:3s;
animation-fill-mode: both;
}

#img_A1, #img_A2, #img_A3 {
position:absolute;
width:40%;
display:block;
top:170px;
margin-left:-0px;
overflow-y:hidden;

-ms-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);

-ms-box-shadow: 0px 5px 12px 5px #888888;
-moz-box-shadow: 0px 5px 12px 5px #888888;
-webkit-box-shadow: 0px 5px 12px 5px #888888;
-o-box-shadow: 0px 5px 12px 5px #888888;
box-shadow: 0px 5px 12px 5px #888888;
opacity:1.0;
}

@keyframes twirl_in_img_1 {
0% {top: -400px; left: 25%; transform: rotate(0.0deg);}
100% {transform: rotate(-365deg);}
}

@keyframes twirl_in_img_2 {
0% {top: -400px; left: 25%; transform: rotate(0deg);}
100% {transform: rotate(-365deg);}
}

@keyframes twirl_in_img_3 {
0% {top: -400px; left: 25%; transform: rotate(0deg);}
100% {transform: rotate(-365deg);}
}

@keyframes twirl_in_img_1b {
0% {top: -400px; left: 25%; transform: rotate(0.0deg);}
100% {transform: rotate(-365deg);}
}

@keyframes twirl_in_img_2b {
0% {top: -400px; left: 25%; transform: rotate(0deg);}
100% {transform: rotate(-365deg);}
}

@keyframes twirl_in_img_3b {
0% {top: -400px; left: 25%; transform: rotate(0deg);}
100% {transform: rotate(-365deg);}
}

#replay_button_container {
	border: 0px solid orange;
	width: 100%;
	max-width: 1300px;
	min-width:340px;
	margin: auto;
	padding-top: 10px;
	height: 30px;
	background: none;
}

#replay_button {
	border: 1px solid #595959;
	border-radius: 2px;
	float: right;
	bottom: 0px;
	background: none;
	color: #595959;
	padding-top: 3px;
	padding-bottom: 4px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 10px;
	cursor: pointer;
}

/* ==================================================== */
/* TOP BANNER: */
/* ==================================================== */

#top_banner {
position: fixed; 
text-align:center;
left:0px;
top:0px;
width:100%;
min-width:350px;
height:80px;
background-color: #5b1a1e;
    background: -ms-linear-gradient(#4e0101, #5b1a1e, #4e0101);
    background: -webkit-linear-gradient(#4e0101, #5b1a1e, #4e0101);
    background: -o-linear-gradient(#4e0101, #5b1a1e, #4e0101);
    background: -moz-linear-gradient(#4e0101, #5b1a1e, #4e0101);
    background: linear-gradient(#4e0101, #5b1a1e, #4e0101);
-ms-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
-o-box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: -0px 5px 5px rgba(0, 0, 0, 0.5);
z-index:100;
display:block;
}

#dg_logo {
width:80px;
padding-top:12.5px;
padding-bottom:5px;
margin-right:5px;
}

#dg_name {
width:375px;
padding-bottom:13px;
}

#up_down_arrow {
position:fixed;
left:25px;
top:28px;
width:80px;
cursor:pointer;
z-index:205;
}

/* ==================================================== */
/* TOP LINKS PANEL: */
/* ==================================================== */

#top_links_panel { 
position:fixed;
left:0px;
top:80px;
height:34px;
width:100%;
min-width:350px;
background-color:#af7804;
padding-top:4px;

text-align:center;
font-family: 'Open Sans', 'Verdana Bold', sans-serif;
font-weight: 700; 
font-size: 18px;
line-height: 26px;
color:#ffffff;

-ms-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
-o-box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.7);
box-shadow: -0px 15px 15px rgba(0, 0, 0, 0.7);
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-o-transition-duration:0.4s;
transition-duration:0.4s;
display:block;
z-index:90;
}

a.top_links_colors:link { color:#ffff00; }
a.top_links_colors:visited { color:#ffcc00; }
a.top_links_colors:hover { color:#ffffff; }
a.top_links_colors:active { color:#ffff00; }


/* ==================================================== */
/* CONTAINER DIV: */
/* ==================================================== */

#container_div {
border: 0px solid blue;
position:relative;
width:100%;
max-width:1300px;
min-width:340px;
top:0px;
height:880px;
margin:auto;
padding-left:10px;
padding-right:10px;
text-align:center;
-ms-transition-duration:0.4s;
-moz-transition-duration:0.4s;
-webkit-transition-duration:0.4s;
-o-transition-duration:0.4s;
transition-duration:0.4s;
}

#message_div {
border: 0px solid green;
padding-left:10%;
padding-right:10%;
}

#copyright_div {
border: 0px solid purple;
width:100%;
height:80px;
text-align:center;
padding-top:10px;
}

.welcome_text {
font-family: 'Bilbo Swash Caps', 'Handwriting', cursive; 
font-weight: 400;
font-size: 60px;
line-height:30px;
color:#595959;
text-align:left;
}

h1 {
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 28px;
line-height: 38px;
color:#595959;
text-align:left;
}

.body_text {
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 18px;
line-height:28px;
color:#595959;
text-align: left;
}

.copyright_text {
font-family: 'Merriweather', 'Clarendon', serif; 
font-weight: 300; 
font-size: 16px;
line-height:26px;
color:#595959;
text-align: center;
}

/* ==================================================== */
/* FEEDBACK WINDOW: */
/* ==================================================== */

#feedback_window {
position: fixed;
display: none; /* Hidden by default */
width: 50%;
height: 300px;
top: 35%;
left: 25%;
text-align: center;
padding: 20px 20px;
background-color: rgba(255,255,0,0.9); /* Black background with opacity */
z-index: 50; /* Specify a stack order */
cursor: pointer; /* Add a pointer on hover */
}


/* ==================================================== */
/* MEDIA QUERIES: */
/* ==================================================== */

@media screen and (max-width:1100px)
{
	#top_banner { height:80px; }
	#dg_name { width:375px; }
	#dg_logo { width:80px; }
	#up_down_arrow { top:28px; }
}

@media screen and (max-width:1000px)
{
	#img_A1, #img_A2, #img_A3 { width: 52%; }
	#img_A2 { left: 23.5%;  }
	#img_A3 { left: 47%; }
}

@media screen and (max-width:900px)
{
	#top_banner { height:65px; }
	#dg_name { width:325px; padding-top:16px; }
	#dg_logo { width:65px; padding-top:0px; padding-bottom:9px; }
	#up_down_arrow { top:22px; width:75px; }
	#top_links_panel { top:65px; }
	#container_div { top: -15px; }
	.subhead_text { font-size: 26px; line-height: 36px; }
	#img_A1, #img_A2, #img_A3 { width: 60%; }
	#img_A2 { left: 20.5%;  }
	#img_A3 { left: 38.5%; }
}

@media screen and (max-width:800px)
{
	#up_down_arrow { top:22px; width:70px; }
	#img_A1, #img_A2, #img_A3 { width: 66%; }
	#img_A2 { left: 17%;  }
	#img_A3 { left: 32%; }
}

@media screen and (max-width:700px)
{
	#dg_logo { width:62px; padding-top:0px; padding-bottom:9px; margin-left: 30px; }
	#img_A1, #img_A2, #img_A3 { width: 72%; }
	#img_A2 { left: 14%;  }
	#img_A3 { left: 26%; }
}

@media screen and (max-width:625px)
{
	#dg_name { width:300px; padding-top:18px; }
	#dg_logo { width:60px; padding-top:0px; padding-bottom:9px; margin-left: 50px; }
	.welcome_text { font-size: 50px; line-height: 44px; }
	.subhead_text { font-size: 24px; line-height: 34px; }
}

@media screen and (max-width:600px)
{
	#img_A1, #img_A2, #img_A3 { width: 78%; }
	#img_A2 { left: 11%;  }
	#img_A3 { left: 20%; }
}
@media screen and (max-width:550px)
{
	#dg_name { width:275px; padding-top:18px; }
	#dg_logo { width:57px; padding-bottom:8px; margin-left:60px; }
}

@media screen and (max-width:525px)
{
	#top_links_panel { height:62px; }
	#dg_logo { padding-bottom:8px; margin-left:80px; }
	#container_div { top: 13px; }
}

@media screen and (max-width:500px)
{
	#dg_name { width:270px; padding-top:20px; }
	#dg_logo { margin-left:90px; }
	#img_A1, #img_A2, #img_A3 { width: 82%; }
	#img_A2 { left: 9%;  }
	#img_A3 { left: 16%; }
}

@media screen and (max-width:480px)
{
	#dg_name { width:270px; margin-left:80px; }
	#dg_logo { display:none;; }
}

@media screen and (max-width:450px)
{
	#dg_name { width:270px; padding-top:20px; margin-left: 85px; }
}

@media screen and (max-width:400px)
{
	#up_down_arrow { width:60px; top:24px; left:16px; }
	#dg_name { width:250px; padding-top:20px; margin-left: 80px; }
	#img_A1, #img_A2, #img_A3 { width: 86%; }
	#img_A2 { left: 7.25%;  }
	#img_A3 { left: 12.5%; }
}

@media screen and (max-width:360px)
{
	#up_down_arrow { top:24px; width:55px; left:16px; }
	#dg_name { width:225px; padding-top:22px; margin-left: 70px; }
}




/* ==================================================== */
/* MULTI-COLUMN BOX ITEMS: */
/* ==================================================== */

h2 {
  font-family: "Merriweather";
  font-size: 36px;
  line-height: 1.4;
  font-weight: 300;
  color: #737373;
  text-align: center;
  margin-top: 0px;
  margin-bottom: 20px; 
}

h3 {
  font-family: "Merriweather";
  font-size: 24px;
  line-height: 1.4;
  font-weight: 300;
  color: #737373;
  text-align: center;
  margin-top: 30px;
  margin-bottom: 0px; 
}

.multi_column_box {
  border: 1px solid #737373;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 1.6%;
  padding-bottom: 1.6%;
  min-width: 120px;
}

.article {
  font-family: "Merriweather";
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  column-count: 4;
  column-gap: 26px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: gray;
}

#drop_cap_D {
	font-family: Merriweather;
	font-size: 120px;
	line-height: 93px;
	color: white;
	
	/* background image settings: */
	background-image:url("Resources/DropCapBackground-Green-1.jpg");
	background-color: Wheat;
	border: 1px solid #66ffff;
	display: inline-block;
	vertical-align: text-top;
	float: left;
	width: 97px; /* adjust this to fit the letter you are using for this drop cap */
	height: 102px;
	padding-top: 6px;
	padding-left: 2px;
	margin-top: -10px;
	margin-right: 4px;
}
	
hr { 
width: 60%;
border-top: 1px solid #737373;
}

#red_plumeria {
  width: 100%;
  float: left;
  transform: rotate(0deg);
  margin-left: 0%;
  margin-right: 4%;
  margin-bottom: 4%;
  display: inline-block;
}

#noelani {
  width: 100%;
  float: left;
  transform: rotate(0deg);
  margin-left: 0%;
  margin-right: 4%;
  margin-bottom: 4%;
  display: inline-block;
}

#hawaii_kai_canoes {
  width: 100%;
  float: left;
  transform: rotate(0deg);
  margin-left: 0%;
  margin-right: 4%;
  margin-bottom: 4%;
  display: inline-block;
}

@media screen and (max-width: 1050px)
{
  h2 { font-size: 34px; }
  .article { column-count: 3; }
}

@media screen and (max-width: 760px)
{
  h2 { font-size: 30px; }
  .article { column-count: 2; }
}

@media screen and (max-width: 550px)
{
  h2 { font-size: 28px; }
  h3 { font-size: 24px; }
  .article { column-count: 1; }
}

@media screen and (max-width: 250px)
{
  h2 { font-size: 24px; }
  h3 { font-size: 20px; }
  .article { padding-left: 5%; padding-right: 5%; }

}