/*! normalize.css v2.1.2 | MIT License | git.io/normalize */article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:.67em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}



bodyx{font:14px/20px Arial,sans-serif;background-color:#4E5869;margin:0;padding:0;color:#000}dl,ol,ul{padding:0;margin:0}h1,h2,h3,h4,h5,h6,p{margin-top:0;padding-right:15px;padding-left:15px}a img{border:none}a:link{color:#414958;text-decoration:underline}a:visited{color:#4E5869;text-decoration:underline}a:active,a:focus,a:hover{text-decoration:none}.container{width:75%;max-width:1260px;min-width:335px;background-color:#100744;margin:0 auto}.header{background-color:#fdfdfd;}.sidebar1{float:right;width:20%;background-color:#93A5C4;padding-bottom:10px}.content{padding:10px 0;width:100%;float:right;background-color:#efefef}.content ol,.content ul{padding:0 15px 15px 40px}ul.nav{list-style:none;border-top:1px solid #666;margin-bottom:15px}ul.nav li{border-bottom:1px solid #8030a0}ul.nav a,ul.nav a:visited{padding:5px 5px 5px 15px;display:block;text-decoration:none;background-color:#8090AB;color:#000}ul.nav a:active,ul.nav a:focus,ul.nav a:hover{background-color:#6F7D94;color:#FFF}.fltrt{float:right;margin-left:8px}.fltlft{float:left;margin-right:8px}.clearfloat{clear:both;height:0;font-size:1px;line-height:0}.content,.sidebar1{min-height:500px}.content>div{margin:20px 15px}@media screen and (max-width:900px){.content>div{width:75%!important}}
.roc {
    display:flex;
}


.elem, .elem * {
	box-sizing: border-box;
	margin: 0 !important;	
}
.elemLandscape, .elemLandscape *  {
    box-sizing: border-box;
}
.elem {
	display: inline-block;
	font-size: 0;
    width:100%;
	
	background: #fff;
	padding: 10px;
	height: auto;
	background-clip: padding-box;
	position:relative; /*added 02222021 */
}

.elemLandscape {
	display: inline-block;
	font-size: 0;
    width:100%;
	
	background: #fff;
	padding: 10px;
	height: auto;
	background-clip: padding-box;
}

.elem {
    transition-property: all;
    transition-delay:1s;
    animation-delay:.1s;
  
     animation-duration: 1.2s;
     animation-direction: normal;
     
     animation-iteration-count:1;
     animation-fill-mode:forwards;
     transform-style: preserve-3d;
}
@keyframes rotate {
  0% {
    transform: scale(1,1) rotateY(0);
    
  }

  100% {
   /* transform: scale(1.3,1.3) rotateY(360deg);*/
   transform:scale(1.1,1.1);
  
  }
}



.elem > span {
    border:#b14d39 solid 10px;
}


.elemLandscape > span {
    border:black solid 10px;
}

.elem:hover {
    animation-name:rotate;
    z-index:99;
}


@media only screen and (min-width: 1024px) {

.elem > span:hover {
   
   border:#036888 solid 10px;
    animation-name:rotate;
    transform-style: preserve-3d;
    
}    
.elem > span:hover {
    
    border:#036888 solid 10px;
}
    
    


}
/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
 .elem {
     width: 100%;
 }
}


.headingdiv {
   position:relative;
   top:.05vh;
   
  
   
    z-index:1;
}

.mainrow {
    z-index:1;
    position: relative;
}


.elem > span {
	display: block;
	cursor: pointer;
	height: 0;
	padding-bottom:	100% !important;
	background-size: cover;	
	background-position: center center;

}


.elem.cindy > span  {
	display: block;
	cursor: pointer;
	height: 0;
	padding-bottom:	100% !important;
	background-size: contain;	
	background-position: center center;

}


.elemLandscape > span {
	display: block;
	cursor: pointer;
	height: 0;
	padding-bottom:	100% !important;

	background-position: center center;
	background-size:contain;
	background-repeat:no-repeat;
	background-color:black;
}










.instructions {
    visibility:hidden;
    padding: 0 !important;
    
}
@media only screen and (min-width: 960px){
.instructions {
    position: fixed;
    top:50vh;
    left:0;
    font-size: 18px;
    color: black;
    background: white;
    z-index: 9999999999;
    visibility: none;
   
   border:#036888 solid 10px;
    
    height:200px !important;
    width:280px !important;
    
}
ul.instructions {
    list-style-type:none;
    text-align:left;
}
div.content.instructions {
    height:350px !important;
    width:270px !important;
    min-height:450px;
    padding:5px !important;
}
.titleimg {
     position:absolute;
    top:20vh;
    
  left: 50%;
  transform: translateX(-50%);
  width:50%;
  
    
}

.content.instructions ul {
    padding:5px !important;
}



}


div.content.instructions {
    height:300px !important;
    width:270px !important;
}


@media only screen and (min-width:769px) and (max-width: 959px) {
    .instructions {
    position: fixed;
    top:1vh;
    left:2vw;
    font-size: 12px;
    color: black;
    background: white;
    z-index: 9999999999;
    visibility: hidden;
    border: solid 1px green;

    height:45vh;
   width:90vw;
   width:70vw;
    padding-left: 1px;
    text-align:center;
}
    
}

@media only screen and (max-width: 768px) {
    .instructions {
    position: fixed;
    top:20vh;
    left:15vw;
    font-size: 14px;
    color: black;
    background: white;
    z-index: 9999999999;
    visibility: hidden;
    border: solid 1px green;
    /*drop-shadow(1px 1px 1px pink);*/
    height:45vh;
    width:100vw;
    padding-left: 20px;
    text-align:center;
    }
    
}

h5.headingdiv,h1.headingdiv {
    width: 100%;
   /* padding:5px;*/
    background: white;
    color:blue !important;
    font-weight:bold;
    position: relative;
 
  
}
span.headingdiv {
    padding:0 !important;
    margin:auto auto;
    z-index:99999;
    
   
    
}

.titleimg {
     position:absolute;
    top:1px;
    
  left: 50%;
  transform: translateX(-50%);
  width:50%;
    
     box-shadow: 10px 10px 5px #aaaaaa;
    
}

.imagesection {
    position:relative !important;
}

 
.blueribbon,.redribbon,.goldribbon {
    position:absolute;
    top:0;
    left: -1px;
    width:250px;
    height:250px;
    opacity:.9;
    
    
}
 
.honorribbon {
    position:absolute;
    top:0;
    right: -7%;
    width:250px;
    height:250px;
    opacity:.9;
    z-index:99;
    
}



@media only screen and (min-width:1024px) and (max-width: 1024px) {
    .blueribbon,.redribbon,.goldribbon {
        right:-11vw;
        
    }

} 

@media only screen and (min-width:768px) and (max-width: 1023px) {
    .blueribbon,.redribbon,.goldribbon {
        right:-15vw;
        
    }

} 

@media only screen and (min-width:10px) and (max-width: 767px) {
    .blueribbon,.redribbon,.goldribbon {
        right:-30vw;
        
    }

} 














.blueribboncard,.redribboncard,.goldribboncard {

    position:fixed;
    top:1%;
    left:1%;
    height:400px;
    width:400px;
    z-index:99999999999;
    opacity:1;
    max-width:100%;
    background-position:center center;
    

}




@media only screen  and (max-width : 768px) {
 
 ul {
     list-style-type:none;
     background:none;
 }
 .titleimg {
     position:absolute;
    top:1vh;
    
  left: 50%;
  transform: translateX(-50%);
  width:100%;
    
}

 
 
 
 
 
}

@media only screen  and (max-width : 767px) {

 ul {
     list-style-type:none;
     background:none;
 }
 /* added content min height on 02/10/2021 */
 .content {
     min-height:370px !important;
 }
 
 
}
@media only screen and (min-width:768px) and (max-width: 959px) {
   
    ul {
        list-style-type:none;
    }
    
 
   
}
@media only screen and (min-width:1024px) and (max-width: 1024px) {

.titleimg {
    top:1vh;
}
.instructions {
    top:12px;
}



}

h3#lcl_title {
    color:black !important;
    font-weight:700;
    
}

h5#lcl_author,#lcl_descr {
    color:black !important;
    font-weight:700;

}
div#lcl_txt {
    background:white !important;
   /* border:3px solid gold !important;*/
   border:3px solid #036888 !important;
    padding:1px;
}
#lcl_txt {
    color:black;
}
a[href] {
  color: black !important;
}

/* added 02-22-2021 */
.elem:hover::before{
    
    background: white !important;
    border-radius: 5px;
    color: black !important;
    white-space:pre;
    
    content: attr(data-before); /* value that that refers to CSS 'content' */
    font-size:12px;
    font-weight:900;
    position: absolute;
    bottom:12px;
    left:10px;
    z-index: 999;
    width: 94%;
	/*margin-left: -78px;
    transform: translateY(calc(-100% - 12px));*/
    height:40px;
   /* border:solid gold 4px;*/
   border:solid #036888 4px;
    padding:2px;
    padding-bottom:2px;
    /*box-shadow: 2px 2px 2px rgb(240, 240, 240, 0.15);*/
    box-sizing:border-box;
}



/* done with before hover */

#lcl_descr {
    color:black;
    font-weight:600;
}

.content {
    background:white;

}

.elem {
    background:white;
    
}

.btn-default {
    color:black;
    font-weight:bold;
    
    
}
    
    

.closeicon {
     font-weight:bold;
    color:white;
    background:black;
    padding:1px;
    

}
.pleaseread {
    color: red;
    font:1.2em;
    font-weight:700;
    text-align:center;
}
ul li span {
    font-weight:bold;
    font-size:1.1em;
    
}
.titleimgx {
    position:fixed;
    top:8vh;
    width:100%;
}
.testbox {
    border-radius: 33px;
	box-shadow: 0 0 2px rgb(240, 240, 240, 0.15);
	border: 1px solid #484848;
	color: #eee;
}

/*info card*/
.infocard {
    visibility:hidden;
   /* display:none;*/
    position:fixed;
    bottom:200px;
    right:1vw;
    width:300px;
    height:300px;
   /* background:white;*/
    color:black;
    z-index:99999999999;
    padding: 5px;
}
.infocardtext {
    z-index: 99999999999;
    visibility:hidden;
   /* display:none;*/
    position:absolute;
    top:4px;
    left:20px;
    color:black;
    font-size:30px;
    
}

#lcl_txt {
    position:absolute;
    top:10px;
    left:10px !important;
   /* border:10px solid gold !important;*/
   border:10px solid #036888 !important;
    width:300px;
    height:300px;
    background:white;
  
}
@media only screen  and (max-width : 767px) {

 #lcl_txt {
     width:200px;
     height:300px;
 }
 
}
 







#infocard {
    position:absolute;
    top:-50px;
    background:white;
    width:300px;
    height:60px;
    padding:3px;
   /* border:3px solid gold;*/
   border:3px solid #036888;
    left:30px;
    font-size:24px;
   
}
#welcome {
    padding-top:15px;
    
}



@media only screen  and (max-width : 768px) {

 #infocard {
     width:200px;
     font-size:12px;
     color:red !important;
 }
     #welcome {
    padding-top:80px;
    }


 
}

@media only screen  and (max-width : 1024px) {

 
     #welcome {
         padding-top:80px;
    }


 
}

@media only screen and (max-width:540px){
    #welcome {
        padding-top:40px;
    }
}





div#lcl_txt {
   /* border:10px solid gold !important;*/
   border:10px solid #036888 !important;
}

/* added 02-22-2021 */
.elem:hover::before{
    
    background: white !important;
    border-radius: 5px;
    color: black !important;
    white-space:pre;
    
    content: attr(data-before); /* value that that refers to CSS 'content' */
    font-size:12px;
    font-weight:400;
    position: absolute;
    bottom:12px;
    left:10px;
    z-index: 999;
    width: 94%;
	/*margin-left: -78px;
    transform: translateY(calc(-100% - 12px));*/
    height:40px;
   /* border:solid gold 2px;*/
   border:solid #036888 2px;
    padding:2px;
    padding-bottom:2px;
    /*box-shadow: 2px 2px 2px rgb(240, 240, 240, 0.15);*/
    box-sizing:border-box;
}



/* done with before hover */


a[href] {
  color: #E18728;
}

#welcome::before {    
    
      content: "";
      
      background-image: url('https://www.rocklinfinearts.org/wp-content/themes/kadence-child/ARTIMG/member2025/membershow2025Banner.jpg');
      background-size: contain;
      position: absolute;
      top: 0px;
      right: 0px;
      bottom: 0px;
      left: 0px;
      opacity: 0.02;
      z-index:-99;
     

     
}



body {
    
    /*  background: linear-gradient(to right, #f9f6f1, #ffffff) !important;*/
     
}



#top {
position:fixed;
bottom:2vh;
left:50px;
z-index: 99;
color:red;
background:white;
font-size:1.5rem;
border:1px solid red;
padding:5px;
}


#container > canvas {
position:absolute;
	top:1%;
	left:0%;
	width:100%;
	height:100%;
	text-align:center;
	opacity: 1;
    -webkit-transition: opacity 200ms linear;
    transition: opacity 200ms linear;
	
}

@media only screen and (max-width:1023px){
    #container > canvas {
        display:none;
    }
}

/*
canvas,#container {
      background-image: url('https://www.rocklinfinearts.org/wp-content/themes/RFA/ARTIMG/sky.jpg');
      z-index:99;
}

*/
/*
#karen8x:hover {
    content: url('/MEMBERSHOW2021THUMBNAILS/karen8.gif');
}
*/






/*
.navbar-custom {
    
    padding-bottom:0px !important;
  
  background:#036888 !important;
}
*/

.ui-widget.ui-widget-content.ui-menu {
    border: none !important;
   background-color:transparent !important;
 
}
/*
.navbar-nav>li>a {
font-family:Tahoma !important;

color:white !important;
font-weight:bold !important;
font-size:.9em;
}
*/
/*
ul.nav li {
    border:none !important;
    border-bottom:none !important;
    background:white !important;
    
    color:#80300a !important;

    
}

ul.nav li > ul > li > a{
    color: #8030a0!important;
    background:white !important;
}
ul.nav li > ul > li > a:hover {
    color:white!important;
    background:#8030a0 !important;
}

ul > li > a {
    color:white !important;
}
*/
.main-navigation .primary-menu-container > ul > li.menu-item > a {

    color: white !important;
    background:#100744 !important;
}
.secondary-navigation .secondary-menu-container > ul > li.menu-item > a {
	background:#100744!important;
	color:white !important;
	
}
ul > li {
  /*  background:#100744 !important;*/
    
}