@charset "utf-8";
/* CSS Document */
body { font:100% Acme, Arial, Geneva, sans-serif; background-color:#fff; color:#000; margin:0; padding:0; text-align:center; }
h1, h2, h3 {text-align:center; color:#000; font-weight:bold; font-family:Gabriela, Gabriola, Verdana, Geneva, sans-serif;  line-height:1.1em; }
@media screen and (max-width:640px) {h1 {font-size:200%;} }
@media screen and (min-width:641px) {h1 {font-size:250%;} }
h2 {font-size:175%; color:#066;  }
h3 {font-size:175%; color:#099; }
p {font:120% Acme, Arial, Geneva, sans-serif; color:#000; padding:0 14px; }

img {max-width:100%; height:auto; border:none; }
* {box-sizing:border-box;}
hr {width:88%; margin:8px auto; color:#009999; }
button {width:auto; margin:8px auto; padding:4px 8px; border:none; background-color:#099; color:#fff; text-align:center; }
button a {color:#fff; text-decoration:none; }
form {background-color:#fafafa; color:#585858; border-radius:4px; max-width:55%; border:ridge 2px #f0f0f0; margin-left:8px; margin-right:8px; font-size:100%; } 
@media only screen and (max-width:800px) {form { width:100%; max-width:100%; } }
form p {display:block; }
label {font-size:80%; padding:0; margin:0; color:#585858; font-weight:normal;}
iframe {width:95%; height:auto; margin:0 auto; padding:0; }
.float_lftfrmtitle {float:left; text-align:right; width:155px; margin-right:0px; border-radius:4px; background-color:rgba(0,102,102,.7); color:#fff; line-height:1.4em; padding:4px; margin-top:0; margin-bottom:8px;}
.float_lftfrm {float:left; text-align:left; margin-right:8px; border-radius:4px; background-color:#fff; color:#585858;  line-height:1.4em; padding:4px; margin-top:0; margin-bottom:8px;}
.frmbtn {background-color:#fff; color:#006666; font-size:150%; font-weight:bold; padding:8px; font-weight:bold; text-align:center; border-radius:4px; margin:0 auto; }

#container { width:85%;  margin:0 auto; border:none; text-align:left; }
#container a{color:#009999; cursor:pointer; background-color:inherit; }
#container a:hover {color:#006666; cursor:pointer; }
#container h1, h2, h3 {text-align:center; color:#000; font-weight:bold; font-family:Gabriela, Gabriola, "Trebuchet MS", Geneva, sans-serif;  line-height:1.1em; }
#container h2 {font-size:175%; color:#066;  }
#container h3 {font-size:150%; color:#099; }
#container p {font:120% Acme, Arial, Geneva, sans-serif; color:#000; padding:0 14px; font-weight:normal; }

@media only screen and (min-width:641px) and (max-width:1268px) {#container {	width:88%;} }
@media only screen and (min-width:481px) and (max-width:640px) {#container {	width:98%;} }
@media only screen and (max-width:480px) {#container {	width:100%;} }

#header { background-color:rgba(255,255,255,0.75);  padding:0 0 0 10px; margin:0; border-bottom:thin 2px #009999; }
#header h1 { margin:0; padding:0; text-align:left; vertical-align:middle;}

#mainContent { padding:0; background-color:#fff; color:#000; margin:0; }

#mainContent2 { padding:8px 0; background-color:rgba(0,153,153,0.7); color:#fff; margin:0px; }
#mainContent2 h1, h2, h3, p { color:#fff;  }
#mainContent2:hover {background-color:rgba(0,153,153,1.0);  }
#mainContent2 a {color:#fff; cursor:pointer; }
#mainContent2 a:hover {text-decoration:underline; color:#0FF; }

#footer { padding:10px; background-color:#fafafa; color:#585858; height:auto; border-bottom:thin 2px #009999; border-top:thin 2px #009999; }	
#footer p { text-align:left; margin:0; 	padding:10px 0; font-size:80%; font-weight:bold; color:#585858; }
@media only screen and (max-width:640px) {#footer p {font-size:100%; } }
#footer h1, h2, h3 { text-align:left;	margin:0; 	padding:10px 0; font-weight:bold; color:#585858; }
#footer a, a:hover {color:#009999; }	

#footflt_rt { padding:0px; width:28%; min-width:225px; max-width:480px; margin-left:8px; float:right; border:none; background-color:#fafafa; color:#585858;  }
@media only screen and (max-width:640px) {#footflt_rt { max-width:50%; } }
@media only screen and (max-width:460px) {#footflt_rt { min-width:88px; width:auto; max-width:140px; max-height:88px; overflow:hidden; } }
#footflt_rt p { margin:0; padding:10px 0; font-weight:bold; text-align:center; color:#585858;}

#image_bar {padding:8px;  background-color:#fafafa; opacity:1; filter:alpha(opacity=100); margin:0px;}
#image_bar img { opacity:1; filter:alpha(opacity=100); }	
#image_bar p { margin:0; padding:14px 0;  font-weight:bold; color:#000; }
#image_bar h1, h2, h3 { text-align:center;	margin:0; 	padding:10px 0; font-weight:bold; color:#000; }

#ideas {padding:0px;  background-color:#fafafa; opacity:1; filter:alpha(opacity=100); margin:0 auto; width:100%; height:auto;}
#ideas p { margin:0; padding:8px 0;  font-weight:bold; color:#000; }
#ideas h1, h2, h3 { text-align:center;	margin:0; 	padding:8px 0; font-weight:bold; color:#000; }
#ideas a {color:#006666; text-decoration:none; }
#ideas a:hover {color:#009999; text-decoration:underline; }

#more {display:none;}
#more2 {display:none;}
#more3 {display:none;}
#more4 {display:none;}

#btn {width:auto; margin:8px auto; padding:4px 8px; border:none; background-color:#099; color:#fff; text-align:center; }
#btn a {color:#fff; text-decoration:none; }

#ideas_lt {padding:0px;  background-color:#fafafa; opacity:1; filter:alpha(opacity=100); margin:0 auto; width:100%; height:auto; font-family: 'Arapey', "Trebuchet MS", Geneva, sans-serif; font-size:100%;}
#ideas_lt p { margin:0; padding:8px 0;  font-weight:bold; color:#000; font-family: 'Arapey', "Trebuchet MS", Geneva, sans-serif; font-size:100%; }
#ideas_lt h1, h2, h3 { text-align:center; margin:0; padding:8px 0; color:#000; }
#ideas_lt a {color:#006666; text-decoration:none; }
#ideas_lt a:hover {color:#009999; text-decoration:underline; }
#light {font-weight:normal; margin-left:14px; margin-right:14px; }
#light p {font-family: 'Arapey', "Trebuchet MS", Geneva, sans-serif; font-size:120%; }

/* top/main slideshow */
.mySlides {display:none; }
/* Slideshow container */
.slideshow-container { width:100%; max-width:845px; position:relative; margin:auto; height:auto;}
.slideshow-container img {vertical-align:middle; width:100%; height:auto; }
/* Caption text */
.textSlides { color:#f0f0f0; font-size:130%; padding:8px 12px; position:absolute; bottom:34px; width:100%;   text-align:center; background-color:rgba(0,153,153,0.8); z-index:2; }
@media only screen and (max-width:640px) { .textSlides { font-size:100%; } }

/* Number text (1/3 etc) */
.numbertext {color:#f0f0f0; font-size:8px; padding:8px 12px; position:absolute; top:0;
}
.dot { height:12px; width:12px; margin:0 4px; background-color:#f0f0f0; border-radius:50%; display:inline-block; transition:background-color 0.6s ease; }
.active, .dot:hover { background-color:#808080; }
/* Fading animation */
.fade { -webkit-animation-name:fade; -webkit-animation-duration:2.0s; animation-name:fade; animation-duration:2.0s; }

@-webkit-keyframes fade { from {opacity:.3} to {opacity:1} }
@keyframes fade { from {opacity:.3} to {opacity:1} }


#nav { padding:0; background:#fafafa; color:#585858; width:100%; margin:1px auto; border-bottom:thin 2px #009999; border-top:thin 2px #009999; height:auto; line-height:1.1em; }
#nav a {display:inline; margin:0; padding:8px 24px; text-align:center; float:right; color:#009999;  font-size:90%; text-decoration:none; }
#nav a:hover {background-color:#fff; text-decoration:underline; color:#585858; }
#nav a.active {background-color:#f0f0f0; color:#006666; text-decoration:underline; }
@media only screen and (max-width:640px) {#nav a, a:hover, a:visited, a:active {width:auto; padding:8px; } }
.contain {width:85%; margin:0 auto; }
@media only screen and (min-width:641px) and (max-width:1268px) {.contain {	width:88%;} }
@media only screen and (min-width:481px) and (max-width:640px) {.contain {	width:98%;} }
@media only screen and (max-width:480px) {.contain {	width:100%;} }

#btm { padding:0; background:#fff; color:#000; width:100%; margin:1px auto; border-bottom:thin 2px #009999; border-top:thin 2px #009999; height:auto; line-height:1.1em; }
#btm a {color:#009999; text-decoration:underline; }
#btm a:hover {color:#006666; }

#social {margin:0 auto; color:#000; background-color:inherit; }
#social img {width:36px; height:auto;  padding:8px 8px 0px 8px; opacity:.75; filter:alpha(opacity=75);}
@media only screen and (min-width:1080px) {#social img {width:48px; height:auto; } }
#social h1, h2, h3, p { text-align:center;	margin:0; 	padding:0; font-weight:bold; color:#000; }
#social img:hover { opacity:1.0; filter:alpha(opacity=100); }

#ideactr { width:320px; height:480px; text-align:center; margin:0 auto; position:relative;
animation-name:ideamove; animation-duration:40s; animation-iteration-count:infinite; animation-timing-function:ease-out; -webkit-animation-timing-function:ease-out; -webkit-animation-name:ideamove; -webkit-animation-duration:40s;   -webkit-animation-iteration-count:infinite;   }
#ideactr img { position:relative; left:0px; top:0px; margin:0; padding:0;  }
/* Caption text */
.overlayideactr { color:#f0f0f0; padding:8px 12px; position:absolute; bottom:0; width:100%;  text-align:center; background-color:rgba(0,153,153,0.8); z-index:5; }
#ideactr h3 { color:#f0f0f0; font-size:130%; line-height:1.1em; }
#ideactr a {color:#fff; }
#ideactr a:hover {color:#f0f0f0; }
@media only screen and (max-width: 640px) { .overlayideactr h3 { font-size: 100%; } }

@media only screen and (max-width:720px) {#ideactr {display:none; }}
@media only screen and (min-width:721px) {#ideactr {float:none; margin:0 auto; }}

@-webkit-keyframes ideamove { 
	0% {position:relative; top:-120px; left:120px; background-color:transparent; opacity:0.2;  filter:Alpha(opacity=20);  }
  2% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0000.gif); opacity:1.0;  filter:Alpha(opacity=100);  }
  76% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0005.gif); opacity:1.0;  filter:Alpha(opacity=100);  }
  78% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0002.gif); opacity:1.0;  filter:Alpha(opacity=100);  } 
  98% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0002.gif); opacity:1.0;  filter:Alpha(opacity=100);  } 
	100% {position:relative; top:120px; left:-120px; background-color:transparent; opacity:.2;  filter:Alpha(opacity=20);  } }

@keyframes ideamove  { 
	0% {position:relative; top:-120px; left:120px; background-color:transparent; opacity:0.2;  filter:Alpha(opacity=20);  }
  2% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0000.gif); opacity:1.0;  filter:Alpha(opacity=100);  }
  76% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0005.gif); opacity:1.0;  filter:Alpha(opacity=100);  }
  78% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0002.gif); opacity:1.0;  filter:Alpha(opacity=100);  } 
  98% {position:relative; top:0px; left:0px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0002.gif); opacity:1.0;  filter:Alpha(opacity=100);  } 
	100% {position:relative; top:120px; left:-120px; background-image:url(/images/Raini_and_Assoc_professional_home_staging_0002.gif); opacity:.2;  filter:Alpha(opacity=20);  } }

.float_lft_logo {float:left; text-align:center; width:40%; height:auto; margin:10px auto;}
.float_lft_logo img {padding:0 14px; }

.float_rtbtn {float:right; text-align:right; width:20%; height:auto; margin-left:8px; padding:0px; }
@media only screen and (max-width:550px) {.float_rtbtn {width:100%; float:none; text-align:center; } }
.float_rt40 {float:right; text-align:center; width:39%; height:auto; margin-left:8px; padding:8px; }
@media only screen and (max-width:550px) {.float_rt40 {	width:100%; float:none; } }
.float_rt60 {float:right; width:55%; height:auto; margin-right:8px; padding:8px; }
@media only screen and (max-width:550px) {.float_rt60 {	width:100%; float:none; } }
.float_rt60 h2 {font-size:150%; line-height:1.1em; }
.float_rt60 h3 {font-size:130%; line-height:1.1em; }
.hide {display:inherit; }
@media only screen and (max-width:460px) { .hide { display:none; } }
.hidebig {display:none; }
.hide650760 {display:inherit; }
@media only screen and (min-width:590px) and (max-width:760px)  { .hide650760 {display:none; } }

.Arapey { font-family: 'Arapey', "Trebuchet MS", Geneva, sans-serif; font-size:100%;}
.clear {clear:both; margin:0; padding:0;}
.clrlft {clear:left; }
.clrrt {clear:right; }

.bold {font-weight:bold; }
.black {color:#000; }
.center {text-align:center; }
.imgrtpad8 {float:right; margin:0 8px; }
.imgpad8 {padding:8px; }
.imgctr {margin:0 auto; }
.imglft25 {float:left; max-width:25%; height:auto; padding-right:12px; }
.left {text-align:left; margin-left:8px; }
.smaller {font-size:smaller; }
.small10 {font-size:11pt; line-height:11pt; }

.white { color:#fff; background-color:inherit; }
.yellow {color:#FF0; text-align:center; }
.dkteal {color:#066; }
.teal {color:#099; }
.red {color:#f00; }
.big {font-size:24pt;  }
@media only screen and (max-width:640px) {.big  { font-size:14pt;  } }
.max55 {max-width:55%; height:auto; margin-left:auto; margin-right:auto; }
@media only screen and (max-width:550px) {.max55 {	width:480px; max-width:100%; float:none; } }
.floatno {float:none; max-width:100%; }
.block {width:50%; margin:0 auto; padding:24px; display:block; border:groove 1pt #000; background-color:#f0f0f0;  }

____
/* dup June 2018 from: W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes and edited - for animation*/


.w3-container:after,.w3-container:before {content:"";display:table;clear:both}
.w3-container {padding:0.01em 16px}

.w3-center {display:inline-block;width:auto}
.w3-center {text-align:center}
.w3-center{text-align:center!important}

.w3-animate-zoom {animation:animatezoom 1s}@keyframes animatezoom{from{transform:scale(1)} to{transform:scale(.5)}}
__________

#contteal { padding:8px 0; background-color:rgba(0,153,153,0.7); color:#fff; margin:0px; }
#contteal h1, h2, h3, p { font-weight:bold; text-align:center; color:#fff; line-height:1.1em; }
#contteal:hover {background-color:rgba(0,153,153,1.0);  }
#contteal a {color:#fff; cursor:pointer; }
#contteal a:hover {text-decoration:underline; color:#0FF; }
____

#image_bar_rev h1, h2, h3, p { margin:0 auto; padding:10px 0;  font-weight:bold; color:#fff; z-index:3; }
#image_bar_rev a, a:active, a:visited {text-decoration:none; color:#fafafa; opacity:1; filter:alpha(opacity=100); z-index:3; }
#image_bar_rev a:hover {text-decoration:underline; color:#0ff; opacity:1; filter:alpha(opacity=100); z-index:3; }

/* from w3schools.org June 2018 for text overlay  - edited by WebStir*/
.cont360 { position:relative; width:100%; float:none; text-align:center; margin:0 auto; }
@media only screen and (min-width:721px) {.cont360 {display:none; }}
@media only screen and (max-width:720px) {.cont360 {width:100%;float:none; }}


.image { display:block; width:320px; max-width:100%; height:auto; margin:0 auto; z-index:-1; }
.overlay { background-color:#009999; color:#fff; overflow:hidden; width:100%; max-height:20%; 
-webkit-transform:scale(0); transform:scale(0); transition:.5s ease; opacity:0.5; filter:alpha(opacity=50); z-index:2; }
.overlay:hover .overlay:focus { opacity:1; filter:alpha(opacity=100); background-color:#009999; color:#fff;  }
.overlay h1, h2, h3, p { margin:0 auto; padding:10px 0;  font-weight:bold; color:#fff; z-index:3; }
.overlay a, a:active, a:visited {text-decoration:none; color:#fafafa; opacity:1; filter:alpha(opacity=100); z-index:3;}
.overlay a:hover {text-decoration:underline; color:#0ff; opacity:1; filter:alpha(opacity=100); z-index:3;}
.cont360:hover .overlay { transform:scale(1); -webkit-transform:scale(1); }

.cont100 { position:relative; top:0; left:0; width:100%; float:none; text-align:center;  opacity:1.0; filter:alpha(opacity=100); }
.image2 { display:block; width:845px; max-width:100%; height:auto; margin:0 auto; opacity:1; filter:alpha(opacity=100); z-index:-1;}
.cont100:hover .overlay2 { opacity:1; filter:alpha(opacity=100); }
.overlay2 { position:absolute; top:50%; left:0; text-align:center;   background-color:#fff; color:#006666; width:100%; transition:1.5s ease; opacity:0.7; filter:alpha(opacity=70); font-weight:bold; z-index:2; }
.overlay2 h1, h2, h3, p { color:#009999;  opacity:1; filter:alpha(opacity=100); margin:0; padding:0; line-height:1em; }

.text { color:#fff; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); text-align:center;  background-color:rgba(0,153,153,0.8); padding:8px; width:100%;}
.text h1, h2, h3, p, a { color:#fff; opacity:1; filter:alpha(opacity=100); margin:0; padding:0; line-height:normal; }
  @media only screen and (max-width:799px) {.text {font-size:150%; }}
  @media only screen and (min-width:1080px) {.text {width:80% }}
.text a {text-decoration:none; color:#fff; padding:0; }  
.text a:hover {color:#0ff; text-decoration:underline; padding:0; }
.cont100:hover .text { opacity:1; filter:alpha(opacity=100); }


____

/* for responsive image grid/gallery - ideas page */

.row {
  display:block;
  padding:0 8px;
  column-span:all;
  column-count:4;
}

/* Create four equal columns that sits next to each other */
@media screen and (min-width:801px) {
.column {
  float:left;
  max-width:25%;
  padding:0 8px;
}
}

.column img {
  margin-top:0px; margin-bottom:12px;
  vertical-align:middle;
  width:100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (min-width:601px) and (max-width:800px) {
  .column {
    float:left;
	max-width:50%;
  padding:0 8px;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {
  .column {
    float:none;
    max-width:100%;
  padding:0 8px;
  }
}