@charset "utf-8";
/* CSS Document */
*{box-sizing:border-box;}
body{margin: 0;}



/* ---------  TOP NAV  ---------*/

/* [ON BIG SCREEN] */
/* Wrapper */
#hamnav {
  width: 100%;
  background: white;
  /* Optional */
  position: sticky;
  text-align: right;
  height:50px;
}

/* Hide Hamburger */
#hamnav label, #hamburger , #barf{ display: none; }

/* Horizontal Menu Items */
#hamitems { display: flex; float:right; transform: translateY(-45px); }
#hamitems a {
  width: 110px; /* 100% / 5 tabs = 20% */
  padding:5px 5px;
  color: grey;
  text-decoration: none;
  text-align: center;
  top:35px;
  font-family: Arial, "微軟正黑體";
  font-weight: normal;
  font-style: normal;
  font-size:18px;
}
#hamitems a:hover {
  border-radius:20px;
  background:#efefef;
}
/* [ON SMALL SCREENS] */
@media screen and (max-width: 768px){
  /* Show Hamburger Icon */
  #hamnav label { 
  float:right;
    display: flex; 
    color: grey;
    background:white;
    font-style: normal;
    font-size: 2em;
    width:50px;
    height:50px;
    padding: 0px 0px 2px 0px;
    align-items: center;
    justify-content: center;
  }
  
#hamitems a:hover {
  border-radius:0px;
 
}


  /* Break down menu items into vertical */
  #hamitems a {
    	border-radius:0px;
    	box-sizing: border-box;
    	display: block;
    	width: 100%;
	height:50px;
	padding-top:8px;
    	border-bottom: 1px solid #333;
    	color:grey;
    	font-family: Arial, "微軟正黑體";
    	font-weight: normal;
    	font-style: normal;
    	font-size:24px;
text-align:left;
padding-left:8px;
  }

  /* Toggle Show/Hide Menu */
  #hamitems { display: none;  border-top: 1px solid #333;}
  #hamnav input:checked ~ #hamitems {transform: translateY(0px); display: block; position:absolute; width:100%; background:white; }
}

/* ---------  END NAVBAR  ---------*/
    
	
/* ---------  BREAKPOINTS  ---------*/

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
.example {background: red;}
.screenwidth::after  { content:"MAX-width: 768px - Extra small devices (phones, 600px and down)" iphone 11 portrait;}
.topbar{
width: 98%;
}

.splash-text_pos{width:100%;margin:0 auto;margin-top:10px;}

.splash-text_headtext{
width:100%;
max-height: 300px;
font-size:8vw;;
padding-top:25px;
text-align: center;
}
.splash-text-bodytext-spacer{display:block;}

.splash-text_bodytext{
color:white;
width:80%;
font-size:3.5vw;
text-align: center;
}
.splash-block_M{display: block;}
.splash-block_D{display: none;}
    
.dlbutton_M{display:block;}
.dlbutton_M{
width:94%; height:60px; margin:10px 3%; background:#0063c1; display:flex; justify-content: center;align-items: center;
}
.dlbutton_D{display:none;}

.centered-block_A{
    width:90%;
    flex-direction:column;
}
.centered-block_B{
    width:90%;
    flex-direction:column;
}

.block-unit_T{width:98%;}
.block-unit_M{width:98%;}
    
.block-unit_D{display:none;}
.block-unit_M{display:block;} 


.headertext{
	padding-top:20px;
    font-size:30px;
    margin-left:20px;
}
.bodytext{
    	font-size:20px;
	padding-bottom:30px;
    margin-left:20px;
}
.fishtext{
margin-left:20px;
}
.fishwrap{margin-left:20px;margin-right:20px;}

#dlcentering{flex-direction:column;align-content: center;}
#loginphone{display:none;}
#Rlogo{ height:auto;}
#dlright{width:80%; text-align:center; margin:0 auto;}
.footer-items{
flex-direction:column;
padding-bottom:30px;
}


}
	
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
.example {background: green;}
.screenwidth::after  { content:"min-width: 600px - (portrait tablets and large phones, 600px and up) iphone 11 landscape";}
.topbar{
width: 98%;
}
.splash-text_pos{width:100%;margin:0 auto;margin-top:30px;}

.splash-text_headtext{
width:100%;
max-width: 1200px;
max-height: 300px;
font-size:8vw;
padding-top:25px;
text-align: center;
}


.splash-text_bodytext{
color:white;
width:80%;
font-size:3vw;
text-align: center;
}

.splash-block_M{display: block;}
.splash-block_D{display: none;}
    
    
.splash-text-bodytext-spacer{display:block;}



.dlbutton_M{display:block;}
.dlbutton_M{
width:94%; height:60px; margin:10px 3%; background:#0063c1; display:flex; justify-content: center;align-items: center;
}

.dlbutton_D{display:none;}


.centered-block_A{
    width:100%;
    flex-direction:column;
}
.centered-block_B{
    width:100%;
    flex-direction:column;
}

.block-unit_T{width:98%;}
.block-unit_D{width:98%;}
    
.block-unit_M{display:block;}
.block-unit_D{display:none;} 

.headertext{
	margin-left:20px;
	padding-top:20px;
    	font-size:30px;
}
.bodytext{
	margin-left:20px;
    	font-size:20px;
	padding-bottom:30px;
}
.fishtext{margin-left:30px;}

.fishwrap{margin-left:20px;margin-right:20px;}

#dlcentering{flex-direction:row;}

#dlright{width:50%; text-align:left;}

.footer-items{
flex-direction:column;
padding-bottom:30px;
}

.footer-socmed{flex-direction:column;padding-top:10px;}

}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.example {background: blue;}
.screenwidth::after  { content:"min-width: 768px -(landscape tablets, 768px and up) ipad mini 2012 portrait";}    
.topbar{
width: 98%;
}

.splash-text_pos{width:85%;margin:0 auto;margin-top:60px;}

.splash-text_headtext{
width:100%;
max-width: 1200px;
max-height: 300px;
font-size:5vw;
padding-top:50px;
text-align: left;
}

.splash-text-bodytext-spacer{display:none;}

.splash-text_bodytext{
color:white;
width:100%;
font-size:2.4vw;
text-align: left;
padding-top:0px;
}
.splash-block_M{display: none;}
.splash-block_D{display: block;}
    

.dlbutton_M{display:none;}
.dlbutton_D{margin-top:30px; width:280px; height:50px;display:flex; justify-content: center;align-items: center;}
    
.centered-block_A{
    width:100%;
    flex-direction:row;}
.centered-block_B{
    max-width:100%;
    flex-direction:row-reverse;}  
    
.block-unit_T{width:50%;}
.block-unit_D{width:50%;}
    
.block-unit_M{display:none;} 
.block-unit_D{display:block;}
    
.text-wrap_A{
    margin-left:20px; 
    width:80%;
}
.text-wrap_B{
        margin-right:15px;
        width:80%; 
        float:right;
}

.headertext{
    margin:0 auto;
    font-size:50px;
}
.bodytext{
    font-size:22px;
    text-align:left;
margin-left:7px;
    margin-right:auto;

}

.fishwrap{margin-left:0px;margin-right:0px;}

#dlcentering{flex-direction:row;}

.footer-items{
flex-direction:row;
padding-right:30px;
}

.footer-socmed{flex-direction:row;}
}


     
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
 .example {background: orange;}	
.screenwidth::after  { content:"min-width: 992px - Large devices (laptops/desktops, 992px and up) ipad pro 2015 portrait";}
.topbar{
width: 80%;
}

.splash-text_pos{width:90%; max-width:1200px;margin:0 auto;margin-top:70px;}

.splash-text_headtext{
width:100%;
max-width: 1200px;
max-height: 300px;
font-size:5vw;
padding-top:40px;
text-align: left;
}

.splash-text-bodytext-spacer{display:none;}
.splash-text_bodytext{
width:100%;
font-size:2vw;
text-align: left;
padding-top:0px;
}

.splash-block_M{display: none;}
.splash-block_D{display: block;}


.dlbutton_M{display:none;}
.dlbutton_D{margin-top:30px; width:280px; height:50px;display:flex; justify-content: center;align-items: center;}

.centered-block_A{
    width:100%;
    flex-direction:row;}
.centered-block_B{
    max-width:100%;
    flex-direction:row-reverse;}
.block-unit_T{width:50%;}
.block-unit_D{width:50%;}
    
.block-unit_M{display:none;}
.block-unit_D{display:block;}
.text-wrap_A{
    margin-left:20px; 
    width:80%;
}
.text-wrap_B{
        margin-right:15px;
        width:75%; 
        float:right;
}


.headertext{
    margin:0 auto;
    font-size:50px;
}
.bodytext{
    font-size:22px;
    text-align:left;
margin-left:7px;
    margin-right:auto;

}


.fishwrap{margin-left:0px;margin-right:0px;}

#dlcentering{flex-direction:row;}
.footer-items{
flex-direction:row;
padding-right:30px;
}

.footer-socmed{flex-direction:row;}
}


/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.example {background: pink;}
.screenwidth::after{content:"min-width: 1200px - (large laptops and desktops, 1200px and up)  ipad pro 2015 landscape, dell xps 13 fullscreen" ;}
.topbar{
width: 80%;
max-width:1200px; 
}
.splash-text_pos{width:80%; max-width:1200px;margin:0 auto;margin-top:50px;}

.splash-text_headtext{
width:100%;
max-height: 100px;
font-size:54px;
padding-top:50px;
text-align: left;
}

.splash-text-bodytext-spacer{display:none;}

.splash-text_bodytext{
padding-top:30px;
width:100%;
font-size:24px;
text-align: left;
}

.splash-block_M{display: none;}
.splash-block_D{display: block;}


.dlbutton_M{display:none;}
.dlbutton_D{margin-top:30px; width:280px; height:50px;display:flex; justify-content: center;align-items: center;}


.centered-block_A{
    max-width:1200px;
    flex-direction:row;}
.centered-block_B{
    max-width:1200px;
    flex-direction:row-reverse;}
.block-unit_T{width:50%;}
.block-unit_D{width:50%;}
.block-unit_M{display:none;}
.block-unit_D{display:block;}
.text-wrap_A{
    margin-left:20px; 
    width:80%;
}
.text-wrap_B{
        margin-right:15px;
        width:75%; 
        float:right;
}
.headertext{
    margin:0 auto;
    font-size:50px;
}
.bodytext{
    font-size:22px;
    text-align:left;
	margin-left:7px;
    margin-right:auto;

}

.fishwrap{margin-left:0px;margin-right:0px;}

#dlcentering{flex-direction:row;}
.footer-items{
flex-direction:row;
padding-right:30px;
}
.footer-socmed{flex-direction:row;}
}
/* ---------  END BREAKPOINTS  ---------*/
	


    
    
/* ---------  OTHER STYLES  ---------*/

body{margin:0;}
.row{
    margin:0 auto;
}
.splash-block_M{
    background-image: url("../images/splash_mobile.jpg");
    background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
}
.splash-block_D{
    background-image: url("../images/splash_wide.jpg");
    background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}
.centered-block_T{
    width:100%;
    display:flex; 
    margin:0 auto; 
    padding:5px;
}  
.centered-block_A{
        display:flex; 
        margin:0 auto; 
        padding:5px;
    }  
.centered-block_B{
        display:flex; 
        margin:0 auto; 
        padding:5px;
    }  
.image-wrap_M{
    background-image:url(../images/image_mobile.jpg);
    float:none;
    width:100%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center;
	max-width:500px;
}
.image-wrap_D{
    	background-image:url("../images/image_desktop.png");
    	width:100%;
	background-size:contain;
	background-repeat:no-repeat;
	background-position: center;
	max-width:500px;
}


/* ------------  IMAGE URLS --------------*/
.image_D1{background-image:url("../images/roomi_layout_08_desktop_05.jpg");}
.image_D2{background-image:url("../images/roomi_layout_08_desktop_09.jpg");}
.image_D3{background-image:url("../images/roomi_layout_08_desktop_12.jpg");}
.image_D4{background-image:url("../images/roomi_layout_08_desktop_15.jpg");}



.shim{height:20px;}


/* ------------  FONT STYLES  --------------*/

.footer-block{}

.footer-items{
font-family: Arial, "微軟正黑體";
font-weight: bold;
font-style: normal;
}
a.footer-items:link {color:white;text-decoration:none;}
a.footer-items:visited {color:white;}
a.footer-items:hover {color:grey;}


.splash-text_headtext{
color: white;
margin:0 auto;
font-family: Arial, "微軟正黑體";
font-weight: bold;
font-style: normal;
}
.splash-text_bodytext{
font-family: Arial, "微軟正黑體";
margin:0 auto;
}   
.splashtext{
    color:#222222;
    font-family: Arial, "微軟正黑體";
    font-weight: bold;
    font-style: normal;
    width:80%;
    margin:0 auto;
    font-style: normal;
    font-size:40px;
}
.headertext{
    color:#222222;
    font-family: Arial, "微軟正黑體";
    font-weight: bold;
    font-style: normal;
}
.bodytext{
    font-family: Arial, "微軟正黑體";
    color:#222222;
    font-weight:normal;
    font-style: normal;
    text-align:left;
}

.fa-stack{color:grey;}

.dlbutton_D{
	color:white;
	font-family: Arial, "微軟正黑體";
	font-weight: bold;
	font-style: normal;
	font-size:20px;
    z-index:500;
    background:#003081; border:1px solid white; 
}
a.dlbutton_D:link {text-decoration:none;}

.dlbutton_M{
	color:white;
	font-family: Arial, "微軟正黑體";
	font-weight: bold;
	font-style: normal;
	font-size:20px;
    z-index:500;
}
a.dlbutton_M:link {text-decoration:none;}

.dlbutton_bottom{
	color:darkblue;
	font-family: Arial, "微軟正黑體";
	font-weight: bold;
	font-style: normal;
	font-size:20px;
    text-decoration: none;
}
a.dlbutton_bottom:link {text-decoration:none;}




/* ------------   END STYLES  --------------*/