@charset "UTF-8";
/* CSS Document */



/*colors: 
new green:   #758B60
light blue: 238, 242, 243, #eef2f3
cream: 220,220,220,  
light cream: 252, 249, 243, #fcf9f3
orange: 168, 100, 27, #8B7660
light orange 247, 241, 234 #f7f1ea
gray #333 51, 51, 51
*/

@font-face {
font-family: 'glacial_indifferencebold';
src: url('glacialindifference-bold-webfont.woff2') format('woff2'),
url('glacialindifference-bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'glacial_indifferenceitalic';
src: url('glacialindifference-italic-webfont.woff2') format('woff2'),
url('glacialindifference-italic-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'glacial_indifferenceregular';
src: url('glacialindifference-regular-webfont.woff2') format('woff2'),
url('glacialindifference-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'journalregular';
src: url('journal-webfont.eot');
src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
url('journal-webfont.woff2') format('woff2'),
url('journal-webfont.woff') format('woff'),
url('journal-webfont.ttf') format('truetype'),
url('journal-webfont.svg#journalregular') format('svg');
font-weight: normal;
font-style: normal;

}

* {margin: 0; padding: 0;}

body {width: 100%; 
margin: 0 auto;
font-size: 18px;
}

ul.li ul.li {margin-left: 1em}


.left {
position: absolute;
top: 1em;
left: 1em;
width: 8vw;
height: auto;
padding: 1.25vw 1vw 0 0;
margin:  0;
 
}


.donate {	position: fixed;
	width: 7.5vw;
	height: 7.5vw;
	top: -.5em;
	right: 5em;
margin: 0 0 0 0;
padding: 0;
 border-radius: 50%;	 
    }

.newsletter {	position: fixed;
	width: 7.5vw;
	height: 7.5vw;
	top: 5em;
	right: 5em;
margin: 0 0 0 0;
padding: 0;
 border-radius: 50%;	 
    }


.volunteer {	float: center;
  width: 12.5vw;
  height: 12.5vw;
margin: 0 auto;
padding: 0;
border-radius: 50%;
}


.skip   {
position: fixed;
top: -.5em;
left: 1em;
width: 2.5em;
height: 2.5em;
padding: .5em .5em 1em .5em;
margin:  1.1em 0 0 1vw;
background: rgba(255,255,255,0.4);
border: 1px solid rgba(226, 184, 127, 0.2);
border-radius: 50%;
color: #999;	 
}

.fb   {position: relative;
	top: 58em;
	left: 140%;
width: 4vw;
height: 2.75vw;
padding: 0;
margin:  0;
 opacity: .8;
	z-index: 2000;
	 
}

.fbf  {
position: relative;
bottom: 3em;
right: 6.5em;
width: 4vw;
height: 2.75vw;
padding: 0;
margin:  0;
 opacity: .7;
}

.fb:hover {opacity: .9;}


header {
position: fixed;
top: 0;
width: 100%;
height: 4em;
padding: 0 5% 0 10%;
margin: 0 auto;
background-color: rgba(220, 220, 220, 1.0);
}

 


#logo {
float:left;
opacity: 1.0;
height: 100%; 
width: 19%;
 max-height: 6em;
padding: 1% 1% 1% 3%;
margin: 0 0 0 0;
z-index: 1500;
	align-content: center;
}


nav {float: left;
width: 60%;
height: auto;
z-index: 200;
padding: 0 0 0 0;
cursor: pointer;
	 
}

 

ul.b {

display: inline;
margin: 0 0 0 2em;
padding: 0 0 0 0 ;
list-style: none;
width: 100%;
font-family: 'Open Sans Condensed', sans-serif;
text-align: left;
color: #333;
font-size: .9em;
line-height: 1em;
font-weight: normal;

}

ul.b li  {  
display: inline-block;
width: 13%;
height: 1em;
top: 0;
position: relative;
padding: 2.5em 3em 2.75em 1em;
margin:   -1em 0 0 1em;
cursor: pointer;
list-style-type:none;
 
}

.active {background: rgba(255,255,255,0.8);}


ul.b li ul.c {  
position: absolute;
top: 4.5em;
left: 0;
width: 100%;
min-width: 8em;
height: auto;
padding:   1em 1em 2em 2em ;
box-shadow: 0px 1px 0px #999;
display: block;
opacity: 0;
visibility: hidden;
transition: opacity  1s ease-in-out;
border: .25px solid rgba(216, 155, 43, 0.5); 
background:  rgba(255, 255, 255, 0.8); 
list-style-type:none;
	
}



ul.b li:hover ul.c {
float: left;
width: 100%;
min-width: 20em;
opacity: 1;
visibility: visible;
background: rgba(255, 255, 255, 0.95); 
box-shadow: 0px 1px 55px #fff;
}




ul.b li ul.c li { 

/*float: center;*/
display: block;
width: auto;
height: 1.5vw;
position: relative;
padding: 0 0 2em 0;
margin: 0 0 0 0;
background: rgba(255,255,255,0);
cursor: pointer;
 
}

 


ul.b li ul.c li  p { 
font-size: 1em; 
line-height: 1.25em;
margin: 1em 1em 3em .5em;
text-align: left;
font-weight: 300;
letter-spacing: 0px; 
}  

ul.b li ul.c li:hover p { 
border-bottom: .5px solid rgba(216, 155, 43, 0.4); 
}  

#news p { 
margin: 1em 1em 0 0;
text-align: left;
font-weight: 300;
letter-spacing: 0px;
color:#333; }

#news h3 { 
margin: 0; }

/*.cart {float: right; margin-top: 2em;}*/

.menu {
  display: none;
}

.hide {
  display: none;
}



 


a:link {
color: #608B8B;
text-decoration: none; 
	font-weight: 800;
}

a:visited {
text-decoration: none;
color: #758B60 
}

a:hover {
text-decoration: none;
color: #8B7660;
font-weight: 800;
}

a:active {
text-decoration: none;
color: #758B60; 
}

.blue a:link {
color: #fcf9f3;
text-decoration: none; 
	font-weight: 500;
}

.blue a:visited {
text-decoration: none;
color: #f7f1ea; 
}

.blue a:hover {
text-decoration: none;
color: #fff;
font-weight: 800;
}

.blue a:active {
text-decoration: none;
color: #fff; 
}


ul.b a:link {color: rgba(96, 139, 139, 0.8);}
ul.b a:visited {color: rgba(226, 184, 127, 1.0);}
ul.b a:hover {color: rgba(252, 249, 243, 1);}
ul.b a:active {color: rgba(226, 184, 127, 1.0); font-weight: 600;}

ul.c a:link {color: rgba(0, 0, 0, 0.6);}
ul.c a:visited {color: rgba(0, 0, 0, 0.3);}
ul.c a:hover {color: rgba(0, 0, 0, 0.8);}
ul.c a:active {color: rgba(0, 0, 0, 0.6); font-weight: 600;}


p    {font-family: 'Open Sans Condensed', sans-serif;
color: #333;
font-size: 1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 1em 0;
font-weight: normal;
word-spacing: 1px;
}

.skip p {font-size: .5em;line-height: .9em; text-align: center; color: #999;}
 
.fb p {font-size: 1em;line-height: 1.2em; text-align: center; color: #fff;}

.fbf p {font-size: 1em;line-height: 1.2em; text-align: center; color: #fff;}

 


.bold {font-family: 'journalregular';
color: #333;
font-size: 2em;
line-height: 1em;
letter-spacing: 1px;
margin: 0 0 0  0;
font-weight: 200;
}

.bar .bold {color: #fff;}



.detail {font-family: 'Open Sans Condensed', sans-serif;
color: #333;
font-size: .7em;
line-height: 1em;
letter-spacing: -.25px;
margin: -1em 0 1em 0;
font-weight: 100;word-spacing: 1px;
}


p2   {font-family: 'Open Sans Condensed', sans-serif;
color: rgba(226, 184, 127, 0.7);
font-size: 1em;
line-height: 1.5em;
letter-spacing: -.25px;
margin: 0 0 1em 0;
font-weight: 100;word-spacing: 1px;
}

.boldsans {font-weight: 900; color: #333;}

li   {font-family: 'Open Sans Condensed', sans-serif;
color: #333;
font-size: 1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 .5em 1.5em;
font-weight: 100;
	word-spacing: 1px;
	
}


ul ul 
{padding: 0 0  0 1.5em;
 }
 

h1 {font-family: 'journalregular';
color: #333;
font-size: 3.25em;
line-height: .75em;
letter-spacing: 1px;
word-spacing: -7px;
margin: 1em 0 .5em 0;
font-weight: 200;
/*text-transform: uppercase;*/
}

h5 {font-family: 'journalregular';
color: rgba(226, 184, 127, 0.9);
font-size: 2.25em;
line-height: .75em;
letter-spacing: normal;
margin:  0 0 .2em 0;
font-weight: 200;
text-transform: lowercase;
}



h2 {font-family: 'glacial_indifferencebold';
color: #333;
font-size: 1.5em;
line-height: 2.5em;
letter-spacing: normal;
margin: 2em 0 0 0 ;
}


h3 {font-family: 'glacial_indifferencebold';
color: #333;
font-size: 1.1em;
line-height: 1em;
letter-spacing: 1.6px;
margin: 2em 0 .2em 0 ;
text-transform: uppercase;
}

#connections h3 {margin: 3em 0 1em 0 ; }

 

h4 {font-family: 'Open Sans Condensed', sans-serif;
color: rgba(72, 109, 127, 0.8);
font-size: 1.5em;
line-height: 1.5em;
margin: 2em 0 2em -20vw ;
font-weight: 100;
letter-spacing: -.5px; word-spacing: 1px;
}

.text h4 {font-family: 'Open Sans Condensed', sans-serif;
color: rgba(255, 255, 255, 0.8);
font-size: 1.5em;
line-height: 1.5em;
margin: 2em 0 0 0 ;
font-weight: 100;
letter-spacing: -.5px; word-spacing: 1px;
}

h6   {font-family: 'glacial_indifferenceregular';
color: #333;
font-size: 1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 2em 0 0  0;
font-weight: 800;
} 


html {
scroll-behavior: smooth;
}

#agencies {}

#living   {
padding: 0 0 6vh 0;
max-width: 100%;
margin:0 0 70vh 0;
background-position: auto 0;
height: 100vh;
background-color: rgba(135,207,216,0.7)
} 

#imagine, #stories, #need, #community,   #story, #team, #services, #referrals, #design, #who,  #solacehome, #you, #advocate, #donor, #support, #volun, #ally,  #join, #event, #calendar, #faqs, #info, #news, #connections, #contact, #research, #needhelpnow, #employment, #news { 
float: left;
width: 100vw;
height: auto;
min-height: 100vh;
margin: 0;
padding: 0 0 0 0;
/*background-image: url(images/home.jpg)	;
background-attachment: fixed;
 background-position: center;
background-repeat: no-repeat;
background-size: cover;*/
display: block;

}

#imagine  { 
background-color: #eef2f3;
background: url(images/blueblanket.jpg) no-repeat fixed center ;  
 background-size: cover;
}

#need  { 
background-color: #f7f1ea;
background: url(images/cardboardhouse.jpg)no-repeat fixed center;
background-size: cover; 
}

#community { 
background-color: #eef2f3;
background: url("images/manhat.jpg") no-repeat fixed center;
background-size: cover;  
}



#services   { 
background-color: #eef2f3;
background: url(images/men.jpg)no-repeat fixed center;
background-size: cover;  
}



#referrals   { 
background-color: #eef2f3;
background: url("images/thehouse.jpg")no-repeat fixed center;
background-size: cover;  
}


/*#howitworks { 
background-color: #f7f1ea;
background: url(images/help.jpg)no-repeat center center fixed;
background-size: 100%;  
}*/

#who { 
background-color: #f7f1ea;
background: url(images/bench.jpg)no-repeat fixed center;
background-size: cover;  
}
#design { 
background-color: #f7f1ea;
background: url(images/soup.jpg)no-repeat fixed center;
background-size: cover;  
}
#solacehome  { 
background-color: rgba(96, 117, 139, 0.1);
background: url(images/gears.jpg)no-repeat fixed center;
background-size: cover;  
}

#vision { 
background-color: #eef2f3;
background: url(images/stones.jpg)no-repeat fixed center;
background-size: cover;  
}


#story { 
background-color: #f7f1ea;
background: url(images/handsnew.jpg)no-repeat fixed center;
background-size: cover;  
}

#you { 
background-color: #f7f1ea;
background: url(images/team2.jpg)no-repeat fixed center;
background-size: cover;  
}

#donor { 
background-color: #f7f1ea;
background: url(images/anythinghelps.jpg)no-repeat fixed center;
background-size: cover;  
}

#support { 
background-color: #f7f1ea;
background: url(images/anythinghelps.jpg)no-repeat fixed center;
background-size: cover;  
}

#volun { 
background-color: #f7f1ea;
background: url("images/wheelchairnew.jpg")no-repeat fixed center;
background-size: cover;  
}

#join { 
background-color: #f7f1ea;
background: url(images/team.jpg)no-repeat fixed center;
background-size: cover;  
}


.backimage {
width: 100vw;
height: 50vh;

}


.logo {display: inline-block;
width: 6.5vw;
height: 7.5vw;
top: 0;
position: relative;
padding: 0 1vw 0 1vw;
margin: 0  0 4vh -1.5vw;
background-image: url(images/solacewhite.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .5;
transition:   background 3s ease-in-out;
	background-color: antiquewhite;
}

.logo:hover {
background-image: url(images/SolaceLogo.png);
opacity: 1.0;
}
.leftcol {  
position: relative;
top: 0;
left: -18vw;
margin: 0 -15vw 0 0;
width: 15vw;
height: 15vw; 
 
}


.logosm {
/*float: left;*/
content-align: left;
width: 100%;
padding: 0 0 0 0;	
height: 8vh;
background-image: url(images/SolaceLogo.png);
background-size: 50%;
background-repeat: no-repeat;
background-position: left;
}

 

li p { 
font-size: 1em; 
line-height: 1em;
/*text-align: center;*/
font-weight: 600; 
margin-bottom: 0;
 margin-left: 0em; 
}
 
ul li ul li p { 
font-size: 1em; 
line-height: 1em;
margin: 0;
text-align: center;
font-weight: 100;
	letter-spacing: -.5px;
}  
 

.half {
	float: left;
width: 40%;
height: auto;
margin-right: 10%;
}

 .full {
	float: left;
width: 100%;
height: auto;

}



.circles
{float: left;
width: 100vw;
height: auto;
min-height: 50vh;
margin: 2vh 0 0 -35vw;
padding: 5vh 10vw 5vh 15vw;
 
}
.circ1, .circ2, .circ3
{float: left;
background: rgba(72, 109, 127,0.2);
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
t-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
border: 1px solid rgba(72, 109, 127,0.8);
border-radius: 50%;
}

.circ1 {width: 27vw;
height: 27vw;
margin: 10vh 0 0 0;
padding: 2vw 5vw 5vw 5vw;
background-image: url(photos/blanket.jpg )
}

.circ2 {width: 25vw;
height: 25vw;
margin: -4vw 0 0 -5vw;
padding: 2vw 5vw 5vw 5vw;
background-image: url(photos/bench.jpg);
z-index: 1000;
}

.circ3 {width: 27vw;
height: 27vw;
margin: 5vw -5vw 0 -5vw;
padding: 2vw 5vw 5vw 5vw;
background-image: url(photos/capitol.jpg);
}

.circ1t {width: 20vw;
 display: none;
}
.circ2t {width: 19vw;
 z-index: 1000;
	 display: none;
}
.circ3t {width: 23vw;
  display: none;
}




#team .circles
{float: left;
width: 45vw;
height: auto;
min-height: 50vh;
margin: 2vh 0 0 -15vw;
padding: 5vh 40vw 5vh 10vw;

}

.col {width: 100%;
display: block; 
height: auto;
margin: 3em 0 3em 15%;	 
}


.col5 {width: 30%;
height: auto;
float: left;
padding-right: 3%;
}


.profilecol { 
display: flex;
align-items: stretch;
height: auto;
margin: 3em 0 3em 0;
 
	
}

 

.profileimage {
width: 25%;
	margin-right: 5%;
}

.profile {
width: 70%;
}

.circ1:hover {background-image: url(photos/);}
.circ2:hover {background-image: url(photos/ );}
.circ3:hover {background-image: url(photos/ );}

.circ1 > p {color: rgba(72, 109, 127,0);transition: all 1s ease-in-out;}
.circ1:hover > p {color: rgba(72, 109, 127,0.8);}

.circ2 > p {color: rgba(72, 109, 127,0);transition: all 1s ease-in-out;}
.circ2:hover > p {color: rgba(72, 109, 127,0.8);}

.circ3 > p {color: rgba(72, 109, 127,0);transition: all 1s ease-in-out;}
.circ3:hover > p {color: rgba(72, 109, 127,0.8);}

 

footer{
float: left;
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 10vh 30vw;
height: auto;
background-color:rgba(96, 139, 139, 1.0);
	font-family: 'Open Sans Condensed', sans-serif;
color: #fff;
font-size: .85em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 1em 0;
font-weight: normal;
word-spacing: 1px;
 
}
 
.footerlogo {display: inline;
width: 20%; 
height: auto;
float: left;
margin: 0 2em 0 0  ;}


footer h3 {color: rgba(252, 249, 243, 0.4);margin-top: 1.5em; font-size: 1em;}
footer h5 {color: rgba(252, 249, 243, 1.0);
font-size: 2.25em;
line-height: .75em;
margin: 0 0 -.5em 0;}
footer a:link {color:#e2b87f}
footer a:visited {color:#fff}
footer a:hover {color:#f7f1ea}
footer .bold {color: #f7f1ea;}

.foot {float: left; width: 100%; margin-bottom: .5em; }

footer .leftcol {  
margin: 0 0 4em 0; 
}

/*.menu {display: none;}	 */


.btn-primary { 
display:block;
width: 3em;
height: 3em;
margin:  3em 0 2em 40%;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background-color:rgba(117, 139, 96, 1.0); 
}

.circles .btn-primary {margin:  1em 0 3em 45%;}
.home  .btn-primary {margin:  92vh 0 3em 48vw;}
#living  .btn-primary {margin:  -3em 0 3em 48vw;}
.bar .btn-primary {margin-left:  6vw;}

@keyframes glowing {
0% { box-shadow: 0 0 -10px #8B7660; border: 2px solid rgba(255, 255, 255, 1);}
35% { box-shadow: 0 0 40px #8B7660; border: 2px solid rgba(255, 255, 255, 1);}
70% { box-shadow: 0 0 40px #8B7660;border: 2px solid rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 -10px #8B7660; border: 2px solid rgba(255, 255, 255, 1);}
}

@keyframes glowingwhite {
0% { box-shadow: 0 0 -10px 10px #fff; border: 2px solid rgba(255, 255, 255, 1);}
40% { box-shadow: 0 0 20px  10px #fff; border: 2px solid rgba(255, 255, 255, 1);}
60% { box-shadow: 0 0 20px  10px #fff;border: 2px solid rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 -10px  10px #fff; border: 2px solid rgba(255, 255, 255, 1);}
}

@keyframes glowinggray {
0% { box-shadow: 0 0 -10px 10px #fff; border: 2px solid rgba(255, 255, 255, .5);}
40% { box-shadow: 0 0 20px  10px #fff; border: 2px solid rgba(255, 255, 255, .5);}
60% { box-shadow: 0 0 20px  10px #fff; border: 2px solid rgba(255, 255, 255, .8);}
100% { box-shadow: 0 0 -10px  10px #fff; border: 2px solid rgba(255, 255, 255, .5);}
}

.button-glow {
animation: glowing 5000ms infinite;
}

.button-glow2 {
animation: glowingwhite 5000ms infinite;
}


.button-glow3 {
animation: glowinggray 5000ms infinite;
}

button p {text-align: center; color: rgba(255, 255, 255, 1.0); margin-top: .7em;}



.bar {position: relative;
width: 100vw;
height: 10vh;
margin: 77vh 0 70 0;
padding: 2vh;
color: #fff;
align-content: center;
background-color: rgba(226, 184, 127, 0.6);
} 

.bar p {color: #fff; font-size: 1.25em; text-align: center;}

.arrow {float: center;
margin: .4em 0 0 0;
opacity: .5;}

.arrow:hover {opacity: 1.0;}

.blue, .cream, .orange {
float: left; 
width: 19vw;
min-height: 40vh;
margin: 13vh 60vw 40vh 10vw;
padding: 2.25vw 2.25vw 2.25vw 2.25vw;
background-color:rgba(72, 109, 127, 0.6);
border: 1px solid rgba(226, 184, 127, 0.8); 
}

.blue {
background-color:rgba(72, 109, 127, 0.9);
border: 1px solid rgba(117, 139, 96, 0.8); 
color: #fcf9f3;
}
.blue  h5  {color: #fcf9f3;}
.blue p2   {color: #fcf9f3;}

.orange {
background-color:rgba(139, 118, 96, 0.86);
border: 1px solid rgba(226, 184, 127, 0.8);

}
.orange  h5  {color: rgba(252, 249, 243, 1.0);}
.orange p2   {color: rgba(252, 249, 243, 1.0);}

.cream {
background-color:rgba(252, 249, 243, 0.9);
border: 1px solid rgba(139, 118, 96, 0.8); }
.cream p2, h5  {color: rgba(139, 118, 96, 1.0);}

#cream100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 10vh 30vw;
height: auto;
background-color:#fcf9f3; }

#blue100, #blue2100, #howitworks   {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 10vh 30vw;
height: auto;
background-color:#eef2f3 } 

#orange100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 10vh 30vw;
height: auto;
background-color:#f7f1ea }

#ally #orange100 {height: 100vh;}

.blue100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 10vh 30vw;
height: auto;
	min-height: 100vh;
background-color:#eef2f3 }

.cream100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 10vh 30vw;
height: auto;
	min-height: 100vh;
background-color:#fcf9f3; }

.orange100p {float: left; 
width: 100%;
margin: 0 0 3em 0;
padding: 0 3em 2em 3em;
height: auto;
 
background-color: rgba(168, 100, 27, 0.1);
 
border: solid 1px rgba(168, 100, 27, 0.8);}

.orange100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 30vw 0 30vw;
height: auto;
	min-height: 100vh;
background-color: #f7f1ea }

 

.tanbar {float: left; 
width: 100vw;
height: 2vh;
margin-bottom: 0;
background-color: rgba(226, 184, 127, 0.3);
}

.notice {  position: fixed;
vertical-align: middle;	
top: 60vh;
left: 10vw;
width: 5vw;
height: 7vw;
padding:  0 2vw 2vw 2vw ;
box-shadow: 0px 1px 15px #d1d1d1;
webkit-transition: all 0.92s;
-moz-transition: all 0.9s;
-ms-transition: all 0.9s;
-o-transition: all 0.9s; 
transition: all 0.9s;
border: 1px solid rgba(226, 184, 127, 0.3);
border-radius: 50%;
background: rgba(255,255,255,0.4);
background-image:url(images/attend.png);
background-repeat: no-repeat; background-position: center; background-size: cover;
}

.notice:hover {  
box-shadow: 0px 1px 60px rgba(226, 184, 127, 0.9);
opacity: 1.0;
border:1px solid rgba(226, 184, 127, 0.9);
border-radius: 100%;
}


/*-------------------------accordion----------------*/

.accordion {
background-color: rgba(72, 109, 127, 0.2);
cursor: pointer;
padding: 1vw  1vw  1vw  2vw;
width: 100%;
border: none;
outline: none;
transition: 0.4s;
border-radius: 25px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: left;
color: #333;
font-size: 1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 0 0;
font-weight: bold
}



.active, .accordion:hover {
background-color: rgba(72, 109, 127, 0.4); 
}

.panel {
padding: 0 18px;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
max-height: 0;
border-radius: 25px;

transition: max-height 0.4s ease-out;
}

.panel p {margin: 18px 0;}

.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}



/*----------------------------popup

https://codepen.io/imprakash/pen/GgNMXO----------------*/

.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255, 0.7);
/*transition: opacity 500ms;*/
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

 

.popup {max-width: 1200px;
margin: 100px auto;
padding: 2em;
background-color:  rgba(252, 249, 243, 1.0) ;
width: 80%;
height: 75vh;
position: relative;
overflow: scroll;

/* transition: all 5s ease-in-out;*/
}

 
.popup .close {
float: center;
top: .5em;
right: 49%;
transition: all 200ms;
font-size: 3em;
font-weight: bold;
text-decoration: none;
color: #333;
margin: 0 0 0 0;
text-align: center;
	 

width: 100%;
}
.popup .close:hover {
color: #666;
}
.popup .content {float: left;
max-height: 20%;
width: 100%;
overflow: auto;
text-align: center;
margin: 1em 0 1em 0;
 
}

 


/*---------------slide show----------------*/

* {box-sizing: border-box}

 

.mySlides {display: none}
img {vertical-align: middle;  }

.mySlidesm {display: none}
img {vertical-align: middle;  }

/* Slideshow container */
.slideshow-container {
  max-width: 1200px;
  position: relative;
  margin: auto;
	display: inline;
}

/* Slideshow container */
.slideshow-containerm {
  max-width: 1200px;
  position: relative;
  margin: auto;
	display: none;
 
}

 
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
color: #fff;
padding: 8px 12px;
position: absolute;
bottom: 10%;
left: 8vw;
width: 50vw;
height: auto;
text-align: center;
 
}
.text .btn-primary { 
margin:  3em 0 2em 45%;}

.text p {color: #fff; margin-bottom: -1em;}
.text h3 {color: #fff; text-align: center}
.textm p {color: #fff; margin-bottom: -1em;}
.textm h3 {color: #fff;  text-align: center}

.textm {
padding: 20px 20px 40px 20px;
position: absolute;
bottom: 5%;
left: 5vw;
width: 90vw;
height: auto;
text-align: center;
background-color: rgba(0, 0, 0, 0.3);
}
 
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
 
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.bm {
	float: left;
	margin:0 0 1em 20%;
	padding-top: 3em;
	 width: 80%;
	height: auto;
}

/* On smaller screens, decrease text size */
/*@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

 
 
 


/*--------------------------------------------------mobile -------------------------------------------------*/
@media only screen and (max-width: 480px)   {


	
.left {
display: none;
}

html {
  scroll-behavior: auto; 
}


body {width: 100%; 
margin: 0 auto;
font-size: 16px;
}

ul.b a:link {color: rgba(0, 0, 0, 0.6); }
ul.b a:visited {color: rgba(0, 0, 0, 0.3); }
ul.b a:hover {color: rgba(0, 0, 0, 0.8); }
ul.b a:active {color: rgba(0, 0, 0, 0.6); }

ul.c a:link {color: rgba(0, 0, 0, 0.6); }
ul.c a:visited {color: rgba(0, 0, 0, 0.3); }
ul.c a:hover {color: rgba(0, 0, 0, 0.8); }
ul.c a:active {color: rgba(0, 0, 0, 0.6); }

.donate {	position: fixed;
width: 20vw;
height: 20vw;
top: -1em;
left: 50vw;
margin: 0 0 0 0;
padding: 0;
box-shadow: 0 0 0 #d99c2d;
transition:   background 2s ease-in-out;
 
border-radius: 50%;
}
	
	
.newsletter {	position: fixed;
width: 20vw;
height: 20vw;
top: 3em;
left: 60vw;
margin: 0 0 0 0;
padding: 0;
box-shadow: 0 0 0 #d99c2d;
transition:   background 2s ease-in-out;
 
border-radius: 50%;
}


.volunteer {	float: center;
  width: 22.5vw;
  height: 22.5vw;
margin: 0 auto;
padding: 0;
border-radius: 50%;
}


a:link {
color: #758B60;
text-decoration: none; 

}



a:visited {
text-decoration: none;
color: #758B60 }

a:hover {
text-decoration: none;
color: #8B7660;
font-weight: 800;


}

a:active {
text-decoration: none;
color: #758B60;  }


p   {font-family: 'Open Sans Condensed', sans-serif;
color: #333;
font-size: 1.1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 1em 0;
font-weight: lighter;
}

	#contact p {text-align: center;}	 


.bold {font-family: 'journalregular';
color: #333;
font-size: 2em;
line-height: 1em;
letter-spacing: 1px;
margin: 0 0 0  0;
font-weight: 200;
}

.bar .bold {color: #fff;}




p2   {font-family: 'Open Sans Condensed', sans-serif;
color: rgba(226, 184, 127, 0.7);
font-size: 1.1em;
line-height: 1.5em;
letter-spacing: -.25px;
margin: 0 0 1em 0;
font-weight: 600;
}



li   {font-family: 'Open Sans Condensed', sans-serif;
color: #333;
font-size: 1.1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 .25em 0;
font-weight: 100;
}

nav li   {font-family: 'Open Sans Condensed', sans-serif;
color: #999;
font-size: 1.5em;
line-height: 1em;
letter-spacing: normal;
margin-bottom: .2em;
font-weight: 100;
text-align: left;
}


h1 {font-family: 'journalregular';
color: #333;
font-size: 2.5em;
line-height: .7em;
letter-spacing: 1px;
word-spacing: -7px;
margin: 1em 0 .2em 0;
font-weight: 200;
text-align: center;
/*text-transform: uppercase;*/
}

h5 {font-family: 'journalregular';
color: rgba(226, 184, 127, 0.9);
font-size: 2.5em;
line-height: .7em;
letter-spacing: normal;
margin: .3em 0 .1em 0;
font-weight: 200;
text-transform: lowercase;
text-align: center;
}



h2 {font-family: 'glacial_indifferencebold';
color: #333;
font-size: 1.5em;
line-height: 2.5em;
letter-spacing: normal;
margin: 2em 0 0 0 ;
}


h3 {font-family: 'glacial_indifferencebold';
color: #333;
font-size: 1em;
line-height: 1em;
letter-spacing: 1.6px;
margin: 2.5em 0 0 0 ;
text-transform: uppercase;
text-align: center;
}

#connections h3 {margin: 3em 0 1em 0 ; }

h4 {font-family: 'Open Sans Condensed', sans-serif;
color: rgba(72, 109, 127, 0.6);
font-size: 1.5em;
line-height: 1.5em;
margin: 2em 0 2em 0 ;
font-weight: 100;
letter-spacing: -.5px;
}

h6   {font-family: 'Open Sans Condensed', sans-serif;
color: #333;
font-size: 1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 1em 0 0  0;
font-weight: 900;
} 



#living   {
padding: 0 0 6vh 0;
max-width: 100%;
margin:0 0 70vh 0;
background-position: auto 0;
height: 100vh;
background-color: rgba(135,207,216,0.7)
} 

#imagine, #stories, #need, #community,   #team, #services, #design, #who,   #solacehome, #you, #advocate, #donor, #support, #volun, #ally,  #join, #event, #calendar, #faqs, #info, #news, #connections, #contact, #research, #needhelpnow, #employment, #news { 
float: left;
width: 100vw;
height: auto;
min-height: 50vh;
margin: 0;
padding: 0 0 0 0;
background-size: 100% auto;
/* -webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;  */
background-position: top;
background-repeat: no-repeat;
/*display: block;*/
object-fit: cover;
}


#imagine  { 
background-color: #eef2f3;
background: url(images/blueblanketm.jpg) ;
object-fit: cover;
background-position: top;
	margin-top: 0;
}

#services   { 
background-color: #eef2f3;
background: url(images/menm.jpg);
object-fit: cover;
background-position: top;
 

}

#need  { 
background-color: #f7f1ea;
background: url(images/cardboardhousem.jpg) ; 
background-size: 100% auto;
background-position: top;
}


#who { 
background-color: #f7f1ea;
background: url(images/benchm.jpg); 
background-size: 100% auto;
background-position: top;
}
#design { 
background-color: #f7f1ea;
background: url(images/soupm.jpg); 
background-size: 100% auto;
background-position: top;
}
#solacehome  { 
background-color: #eef2f3;
background: url(images/gearsm.jpg);
background-size: 100% auto;
background-position: top;
}
#community { 
background-color: #eef2f3;
background: url("images/manhatsm.jpg");
background-size: 100% auto;
background-position: top;
	object-fit: cover;
}

#vision { 
background-color: #eef2f3;
background: url(images/stonesm.jpg); 
background-size: 100% auto;
background-position: top;
}


#story { 
background-color: #f7f1ea;
background: url(images/handnewsm.jpg); 
background-size: 100% auto;
background-position: top;
}

#you { 
background-color: #f7f1ea;
background: url(images/team2m.jpg);
background-size: 100% auto;
background-position: top;
}

#donor { 
background-color: #f7f1ea;
background: url(images/anythinghelpsm.jpg); 
background-size: 100% auto;
background-position: top;
}
	
	#support { 
background-color: #f7f1ea;
background: url(images/anythinghelpsm.jpg); 
background-size: 100% auto;
background-position: top;
}


#volun { 
background-color: #f7f1ea;
background: url("images/wheelchairsm.jpg"); 
background-size: 100% auto;
background-position: top;
}

#join { 
background-color: #f7f1ea;
background: url(images/teamm.jpg); 
background-size: 100% auto;
background-position: top; 
}


.backimage {
width: 100vw;
height: 50vh;

}

.logo {display: inline-block;
width: 6.5vw;
height: 7.5vw;
top: 0;
position: relative;
padding: 0 1vw 0 1vw;
margin: 0  0 4vh -1.5vw;
background-image: url(images/solacewhite.png);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
opacity: .5;
transition:   background 3s ease-in-out;

}

.logo:hover {
background-image: url(images/SolaceLogo.png);
opacity: 1.0;
}

.leftcol {  

position: relative;
top: 0;
left: 25vw;
margin: 0 0 0 0;
width: 40vw;
height: 40vw; 
	 
}

	
	
	
 /*-------------------  nav----------------------*/
/*.logo
{float: left; margin-top: 1em; width: 25%; } */

/*
.back {background: rgba(0,0,0,0.1);
width: 100vw;
height: 0;
	position: relative;
	top: 12px;
	left: -25vw;
	 padding-left: 43vw ;
	-webkit-transition: all 1.2s ease-in-out;
-moz-transition: all 1.2s ease-in-out;
-ms-transition: all 1.2s ease-in-out;
-o-transition: all 1.2s ease-in-out;
transition: all 1.2s  ease-in-out;
 
}

.back:hover {background: rgba(0,0,0,0.8);
height: 40px;
 }*/



#logo {
float:left;
	opacity: 1.0;
	height: auto; 
	height:45px;
	padding: 10px 0 0 15px;
	margin: 0 0 0 0;
	z-index: 1500;	
	 
}
 


nav {display: none;
	position: fixed;
top: 55px;
left: 5%;
width: 90%;
height: 85vh;
z-index: 200;
padding: 0;
cursor: pointer;
background-color: rgba(255, 255,255, 0.95);
	border: .25px solid rgba(216, 155, 43, 0.5); 
}

ul.b  { 
display: inline;
margin: 0 5% 0 5%;
padding: 0 0 0 0;
list-style: none;
width: 60%;
 
}
	
	 

ul.b li  {  
display: block;
width: 50%;
height: 4em;
top: 0;
position: relative;
padding: 1.5em 0 .5em 2em;
margin:   0 0 0 0;
cursor: pointer;
list-style-type:none;
 
}

.active {background: rgba(255,255,255,0.8);}


ul.b li ul.c {  
position: fixed;
top: 85px;
left: 45%;
width: 45%;
min-width: 40%;
height: 75vh;
padding:   0 1em 1em 1em ;
box-shadow: none;
display: block;
opacity: 0;
visibility: hidden;
transition: opacity  1s ease-in-out;
border: .25px solid rgba(216, 155, 43, 0.8); 
background:  rgba(255, 255, 255, 0.9); 
/*transition: all  1s ease-in-out;*/
list-style-type:none;
z-index: 1000;
  
}



ul.b li:hover ul.c {
/*float: left;*/
width: 40%;
 min-width: 40%; 
opacity: 1;
visibility: visible;
/*background: rgba(255, 255, 255, 0.95); */
/*box-shadow: 0px 1px 55px #fff;*/
}




ul.b li ul.c li { 

/*float: center;*/
display: block;
width: 100%;
height: 3.5vw;
position: relative;
padding: 0 0 1.75em 0;
margin: 0 0 0 0;
background: rgba(255,255,255,0);
cursor: pointer;

}

  ul.b li ul.c li  p { 
font-size: 20px; 
line-height: 1em;
margin: 1em 1em 1em 0;
text-align: left;
font-weight: 300;
letter-spacing: 0px; 
}  

ul.b li ul.c li:hover p { 
border-bottom: none;
}  
 




/*.cart {float: right; margin-top: 2em;}*/

/*.menu {
  display: none;
}*/

.hide {
  display: none;
}


 





/*.cart {float: right; margin-top: 2em;}*/



header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 55px;
  padding: 0 0 0 0;
  margin: 0 auto;
background-color: rgba(220, 220, 220, 1.0);
}
	
	 


#menu-toggle {
  top:1em;
  right: 2em;
	width: 1.75em;
  position:fixed;
  	z-index: 3000;
 
}

 
	
	

.menu {
display: block;

}	
 

/*
ul li ul li p { 
font-size: 1.25em; 
line-height: 1em;
margin-bottom: 0;
text-align: center;
font-weight: 100;
}  



li p { 
font-size: 1.15em; 
line-height: 1em;
text-align: center;
font-weight: 100; 
 

}*/


.circles
{float: left;
width: 90vw;
height: auto;
min-height: 50vh;
margin: 2vh 10vw 2em 0vw;
padding: 0;

}
.circ1, .circ2, .circ3
{float: left;
background: rgba(72, 109, 127,0.2);
cursor: pointer;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
t-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
border: 1px solid rgba(72, 109, 127,0.8);
border-radius: 50%;
}
	
	
.circ1t, .circ2t, .circ3t
{float: left;
background: rgba(72, 109, 127,0.2);
width: 90vw;
height: 90vw;
padding: 20vw 10vw 10vw 10vw;
margin: -5vh 0 10vh 0;	
border: 1px solid rgba(72, 109, 127,0.8);
border-radius: 50%;
text-align: center;
	display: block;
}
	

.circ1 {
display: block;
width: 90vw;
height: 90vw;
margin: -2vh 0 0 3vw;
padding: 5vw 10vw 10vw 10vw;
background-image: url(photos/blanket.jpg);
	
}

.circ2 {width: 90vw;
height: 90vw;
margin: -2vh 0 0 3vw;
padding: 5vw 10vw 10vw 10vw;
background-image: url(photos/bench.jpg);
z-index: 1000;
}

.circ3 {width: 90vw;
height: 90vw;
margin: -2vh 0 0 3vw;
padding: 5vw 10vw 10vw 10vw;
background-image: url(photos/capitol.jpg);
}

 

#team .circles
{float: left;
width: 90vw;
height: auto;
min-height: 50vh;
margin: 2vh 0 0 0;
padding: 5vh 5vw 5vh 5vw;
}

.col {width: 90%;
display: block; 
height: auto;
margin: 3em 0 3em 0;
}
	
	.profilecol { 
display: block;
		
align-items: stretch;
height: auto;
margin: 3em 0 3em 0;
 
	
}

 

.profileimage {
width: 45%;
	margin: 0 0 1em 25%;
}

.profile {
width: 100%;
}


.circ1: {background-image: url(photos/);}
.circ2:hover {background-image: url(photos/ );}
.circ3:hover {background-image: url(photos/ );}

.circ1 > p {color: rgba(72, 109, 127, 0);transition: all 1s ease-in-out;}
.circ1:hover > p {color: rgba(72, 109, 127,1);}

.circ2 > p {color: rgba(72, 109, 127,0);transition: all 1s ease-in-out;}
.circ2:hover > p {color: rgba(72, 109, 127,1);}

.circ3 > p {color: rgba(72, 109, 127,0);transition: all 1s ease-in-out;}
.circ3:hover > p {color: rgba(72, 109, 127,1);}

 
 

 

footer h3 {color: rgba(252, 249, 243, 0.4);margin-top: 1.5em; font-size: 1em;}
footer h5 {color: rgba(252, 249, 243, 1.0);
font-size: 2.25em;
line-height: .75em;
margin: 0 0 -.5em 0;}
footer a:link {color:#e2b87f}
footer a:visited {color:#fff}
footer a:hover {color:#f7f1ea}
footer .bold {color: #f7f1ea;}



footer{
float: left;
width: 100%;
padding: 5% 5% 3vh 5%;
height: auto;
background-color:rgba(72, 109, 127, 0.9);
font-family: 'Open Sans Condensed', sans-serif;
color: #fff;
font-size: 1em;
line-height: 2em;
letter-spacing: -.25px;
margin: 0 0 1em 0;
font-weight: normal;
word-spacing: -1px;
}	
	
 

.foot 
{display: block; 
margin: 1em 0 0 0; 
width: 90vw; 
text-align: center;}

footer {color: #fff;}
footer a:link {color:#e2b87f}
	
footer .logo {
padding: 0 ;
margin: 0  0 2em 0;
background-size: 75%;
width: 30vw;
	 }
	
.col5 h5, h3 {text-align: left; margin-top: .5em; letter-spacing: normal;}	
.col5 {width: 50%;
height: auto;
min-height: 55vh;
float: left;
padding-left: 5%;
}


	

.btn-primary { 
display:block;
width: 3em;
height: 3em;
margin:  3em 0 2em 43.75%;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
background-color:rgba(117, 139, 96, 1.0); 
}


#blue100, #howitworks .btn-primary { 
margin:  3em 0 2em 44.5%;
}
#cream100 .btn-primary { 
margin:  3em 0 2em 44.5%;
}
#orange100	.btn-primary { 
margin:  3em 0 2em 44.5%;
}

.circles .btn-primary {margin:  1em 0 3em 41%;}
.home  .btn-primary {margin:  92vh 0 3em 45vw;}
#living  .btn-primary {margin:  -3em 0 3em 48vw;}
.bar .btn-primary {margin-left:  6vw;}

@keyframes glowing {
0% { box-shadow: 0 0 -10px #8B7660; border: 1px solid rgba(255, 255, 255, 0);}
40% { box-shadow: 0 0 40px #8B7660; border: 2px solid rgba(255, 255, 255, 1);}
60% { box-shadow: 0 0 40px #8B7660;border: 2px solid rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 -10px #8B7660; border: 1px solid rgba(255, 255, 255, 0.3);}
}

@keyframes glowingwhite {
0% { box-shadow: 0 0 -10px 10px #fff; border: 1px solid rgba(255, 255, 255, 0);}
40% { box-shadow: 0 0 60px  10px #fff; border: 2px solid rgba(255, 255, 255, 1);}
60% { box-shadow: 0 0 60px  10px #fff;border: 2px solid rgba(255, 255, 255, 1); }
100% { box-shadow: 0 0 -10px  10px #fff; border: 1px solid rgba(255, 255, 255, 0.3);}
}

.button-glow {display: none;
animation: glowing 5000ms infinite;
}

.button-glow2 {display: none;
animation: glowingwhite 5000ms infinite;
}

button p {text-align: center; color: rgba(255, 255, 255, 1.0); margin-top: .7em;}



.bar {position: relative;
width: 100vw;
height: 10vh;
margin: 77vh 0 70 0;
padding: 2vh;
color: #fff;
align-content: center;
background-color: rgba(226, 184, 127, 0.6);
} 

.bar p {color: #fff; font-size: 1.25em; text-align: center;}

.arrow {float: center;
margin: .4em 0 0  0;
opacity: .5;
}

.arrow:hover {opacity: 1.0;}

.blue, .cream, .orange {
float: left; 
width: 90vw;
height: auto;
margin: 12vh 5vw 55vh 5vw;
padding: 2.25vw 5vw 12vw 5vw;
background-color:rgba(72, 109, 127, 0.9);
border: 1px solid rgba(226, 184, 127, 0.8); 
}

.blue {
color: rgba(226, 184, 127, 1.0);
}
	
#solacehome .blue {margin: 45vh 5vw 8vh 5vw;} 
	 #advocate  .blue {margin: 45vh 5vw 8vh 5vw;} 
 #vision .blue {margin: 45vh 5vw 8vh 5vw;} 
 
	
	
.blue  h5  {color: rgba(226, 184, 127, 1.0);}
.blue p2   {color: rgba(226, 184, 127, 1.0);}

.orange {
background-color:rgba(168, 100, 27, 0.9);
}
	
#need .orange {margin: 52vh 5vw 8vh 5vw;} 
	
.orange  h5  {color: rgba(252, 249, 243, 1.0);}
.orange p2   {color: rgba(252, 249, 243, 1.0);}

.cream {
background-color:rgba(252, 249, 243, 0.9);
border: 1px solid rgba(139, 118, 96, 0.8); }
.cream p2, h5  {color: rgba(168, 100, 27, 1.0);}

#cream100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 5vw 10vh 5vw;
height: auto;
background-color:#fcf9f3; }

#blue100, #blue2100, #howitworks {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 5vw 10vh 5vw;
height: auto;
background-color:#eef2f3 } 

#orange100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 5vw 10vh 5vw;
height: auto;
background-color:#f7f1ea }

#ally #orange100 {height: 100vh;}

.blue100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 5vw 10vh 5vw;
height: auto;
background-color:#eef2f3;
	min-height: 50vh;}
	
	.cream100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 5vw 10vh 5vw;
height: auto;
		min-height: 50vh;
background-color:#fcf9f3;
	}

.orange100 {float: left; 
width: 100vw;
margin: 0 0 0 0;
padding: 5vw 5vw 10vh 5vw;
height: auto;
	min-height: 50vh;
background-color: #8B7660}

.tanbar {float: left; 
width: 100vw;
height: 2vh;
margin-bottom: 0;
background-color: rgba(226, 184, 127, 0.3);
}

.notice {  position: fixed;
/*vertical-align: middle;	*/
top: 50vh;
left: 70vw;
width: 15vw;
height: 20vw;
padding:  0 5vw 5vw 5vw ;
box-shadow: 0px 1px 60px rgba(226, 184, 127, 0.9);
webkit-transition: none 0.92s;
-moz-transition: none 0.9s;
-ms-transition: none 0.9s;
-o-transition: none 0.9s; 
transition: none 0.9s;
border: 1px solid rgba(226, 184, 127, 0.8);
border-radius: 50%;
background: rgba(255,255,255,0.9);
background-image:url(images/attend.png);
background-repeat: no-repeat; background-position: center; background-size: cover;
}

.notice:hover {  
box-shadow: 0px 1px 60px rgba(226, 184, 127, 0.9);
opacity: 1.0;
border:1px solid rgba(226, 184, 127, 0.9);
border-radius: 100%;
}


	
		
	
/*---------------slide show----------------*/

* {box-sizing: border-box}
 

.mySlides {display: none}
.mySlides img {
	/*vertical-align: middle;*/
	  width: 100%;
  height: auto;
	 
} 
	
	
.mySlidesm {display: none}
.mySlidesm img {
	/*vertical-align: middle;*/
	  width: 100%;
  height: auto;
 
	 } 
		
	
	
	.feature {width: 200%;}	
	
/* Slideshow container */
.slideshow-container {
  max-width: 100%;
	height: 60vh;
  position: relative;
  margin: auto;
	margin-top: 4em;
	display: none;
}

	.slideshow-containerm {
  max-width: 100%;
	height: 60vh;
  position: relative;
  margin: auto;
	margin-top: 4em;
	 display: inline;
}
	
/* Next & previous buttons */
/*.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}*/

/* Position the "next button" to the right */
/*.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}*/

/* On hover, add a black background color with a little bit see-through */
/*.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}
*/
/* Caption text */
/*.text {
  color: #f2f2f2;
  font-size: 18px;
	line-height: 35px;
  padding: 8px 12px;
  position: absolute;
  top: 8em;
left: 8%;
  width: 45%;
	height: auto;
  text-align: center;
 background-color: #000;
}
	
	
	.textm {
  color: #fff;
  font-size: 18px;
	line-height: 35px;
  padding: 8px 12px;
  position: absolute;
  top: 8em;
left: 8%;
  width: 45%;
	height: auto;
  text-align: center;
		  background-color: #fff;
}*/
	

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
	 
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

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

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

	

/*-------------------------accordion----------------*/



.accordion {
background-color: rgba(72, 109, 127, 0.2);
cursor: pointer;
padding: 4vw  4vw  4vw  6vw;
width: 100%;
border: none;
outline: none;
transition: 0.4s;
border-radius: 25px;
font-family: 'Open Sans Condensed', sans-serif;
text-align: left;
color: #333;
font-size: 1em;
line-height: 1.5em;
letter-spacing: normal;
margin: 0 0 0 0;
font-weight: bold
}

.active, .accordion:hover {
background-color: rgba(72, 109, 127, 0.4); 
}

.panel {
padding: 0 18px;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
max-height: 0;
border-radius: 25px;

transition: max-height 0.4s ease-out;
}

.panel p {margin: 18px 0;}

.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}


.active, .accordion:hover {
background-color: rgba(72, 109, 127, 0.4); 
}

.panel {
padding: 0 18px;
background-color: rgba(255, 255, 255, 0.5);
overflow: hidden;
max-height: 0;
border-radius: 25px;

transition: max-height 0.4s ease-out;
}

.panel p {margin: 18px 0;}

.accordion:after {
content: '\02795'; /* Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2796"; /* Unicode character for "minus" sign (-) */
}


#show:target {display:inline;}
#hide {display:block;}
#show:target {display:block;}
#hide:target {display:none;}

  
.footerlogo {display: inline;
width: 20%; 
height: auto;
float: left;
margin: 0 2em 1em 0  ;}
	

.fb   {position: relative;
	top: 107em;
	left: 40%;
width: 15vw;
height: auto;
padding: 0;
margin:  0;
 opacity: .8;
	z-index: 2000;
	 background-color: antiquewhite;
}

 .fbf   {
position: relative;
bottom: 5%;
left: 45%;
width: 10vw;
height: 10vw;
padding: 0;
margin:  2em 0 2em 0;
	 
 opacity: .7;
}

.fb:hover {opacity: .9;}

 

.half {
	float: left;
width: 90%;
height: auto;
margin-right: 0;
}


}