/* Use these styles for Calls to Action and Events */
/* Be sure this style sheet is listed on the page */

body {font-family: Rototo, sans-serif }

/* :::::::::: GENERAL ::::::::*/
.small {font-size: 12px }

/* :::::::::: EVENT TITLES ::::::::*/
#titlesgeneral img { width: 150px }
#titlevolunteer nav { position: absolute; top: 20px; left: 400px }


/* ::::::: CONTAINER  :::::  */

/* contains each event 
-basic style for every page;*/
.container-block { 
position: relative;
border: solid 1px #ccc;
margin-bottom: 25px;
padding: 10px 0;
border-radius: 16px;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
text-align: center; 
line-height: 1.2;
background-color: #fff;
overflow:hidden;
z-index: 90;
}

/* CTA page container-block 1   
--Floats left: four per page 
#container.CTApage .container-block { 
float: left; 
width: 24%; height: 25vw; 
margin: 20px 10px 0 0; 
}
*/

/* CTA page container-block 2   
--Floats left: consistent width, height */
#container.CTApage .container-block { 
float: left; 
width: 260px; height: 320px; 
margin: 20px 10px 0 0; 
}

@media only screen and (max-width: 600px){
 #container.CTApage .container-block { margin-top: -20; }

}




/* Sidebar container-block -  
--Stacks, height: auto */
#container.homepage #column-sidebar .container-block {
float: none; 
width: 100%; height: auto;
margin-right: 2%; margin-left: 2%; margin-bottom: 12px; margin-top:0;
}
 
/* Small LABELS */
.ctaribbon {
position: absolute; top: -18px; left: 3px;
/* border-top-left-radius: 5px; border-top-right-radius: 5px; */
border-radius: 2px;
border: solid 1px white;
background-color: var(--orange); color: white;
display: inline;
padding:2px 4px;
font-size: 11px;
text-transform: none;
z-index: 200;
}

.labellittle {
position: absolute; top: -18px; right: 3px;
/* border-top-left-radius: 5px; border-top-right-radius: 5px; */
border-radius: 2px;
border: solid 1px white;
background-color: #2b52af; color: white;
display: inline;
padding:2px 4px;
font-size: 11px;
text-transform: none;
z-index: 200;
}


/* IMAGE */
/* contains the image to control the size */
div.container-image {
position:relative;
text-align: center;
/* display: flex; 
 display:block; */
background-color: var(--white); 
width: 100%; 
height: 140px;
margin-left: 0; margin-top: 10px; margin-bottom: 0;
overflow:hidden;

border: none 3px var(--lightblue);
z-index: 100;
}

div.container-image img { 
position:relative; 
text-align: left;
vertical-align: middle;
width: 100%; height: auto;
border: none 3px var(--lightblue);
z-index: 110;
}

/* TEXT */
.container-block .text { 
margin-top: 0px; 
position: relative; text-align: center; 
padding: 10px;
}

.container-block .event-name {
margin-top: 0px; 
font: bold 18px 'Roboto Condensed', sans-serif;
}

.container-block .event-name2 {
font: normal 15px 'Roboto Condensed', sans-serif;
color:black;
}

/* #column-full.cta  .container-blocks  h1, 
#column-full.events .container-blocks  h1 
{font: normal 16px 'Roboto Condensed', sans-serif; }


#column-full.cta  .container-blocks  h3 {
font: normal 13px 'Roboto Condensed', sans-serif; }
*/

/* BUTTONS */

.container-block a:link.button-event, 
.container-block a:visited.button-event { 
display:block;
text-align: center; 
position: absolute; bottom: 2px;
width: 100%; margin: 0; 
background-color: var(--blue); color: #fff;
font-size: 16px;
margin-top: 20px; 
border-radius: 4px; padding: 6px 0;
z-index: 200;
}

/* style='position: absolute; bottom: 12px; right: 5px'*/

.container-block a:hover.button-event,
.container-block a:active.button-event { 
 background-color: orange; color: #000;

}





/* image container  
#container.homepage #column-sidebar div.container-image  {
position:relative;
display: block;
background-color: #fff;
height: 200px;
width: 100%;
overflow:hidden;
vertical-align: middle;
}

#container.homepage #column-sidebar div.container-image img { 
position: relative; 
text-align: center;
width: 95%;
}


#container.homepage #column-sidebar .button { 
position: relative;  
display: block; width: 100%; 
font-size: 14px; 
border-radius: 4px; padding: 8px 0; 
color: #fff;
margin-top: 10px; 
background-color:#394ff6;
}

*/

/* ::::::: EVENTS ON HOMEPAGE sidebar ::::: */

#container.homepage #column-sidebar div.container-block {position: relative; 
text-align: center;
height: auto; width: 100%;
color: #000000;
}

#container.homepage #column-sidebar div.container-image { 
width: 90%; height: auto; text-align: center;
}

#container.homepage #column-sidebar div.container-image img { 
position: relative; 
text-align: center;
width: 90%; height: auto;
}

#container.homepage #column-sidebar .button { 
position: relative;  
display: block; width: 100%; 
font-size: 12px; 
border-radius: 4px; padding: 8px 0; 
color: #fff;
margin-top: 10px; 
background-color:#394ff6;
}

/* ::::::: NETWORK NOVA EVENTS HOMEPAGE box ::::: */

/* Small LABELS */
body#networknova .ctaribbon {display: none;}
body#networknova .labellittle {display: none;}

body#networknova  .container-block { 
position: relative;
border: solid 1px #ccc;
margin-bottom: 10px;
padding: 10px 0;
border-radius: 5px;
text-align: center; 
line-height: 1.2;
background-color: #fff;
z-index: 90;
width: 100%; margin-left:2%;
color: #000000;
}

body#networknova  div.container-image { 
width: 90%; margin-left: 5%; height: auto; text-align: center;
}

body#networknova  div.container-image img { 
position: relative; 
text-align: center; width: 90%; height: auto;
}

body#networknova .container-block .event-name {
margin-top: 0px; 
font: bold 16px 'Roboto Condensed', sans-serif;
}

body#networknova .container-block .button { 
font-size: 11px; 
border-radius: 4px; padding: 8px 0; 
color: #fff;
margin-top: 10px; 
background-color:#394ff6;
}




/* ::::: HOMEPAGE column-full :::::: */

#container.homepage #column-full  .container-block { 
position: relative;
float: left; 
width: 280px; height: 320px;
/*width: 30%; height: 320px; margin-right: .5%;  min-width: 200px;*/
border: solid 1px #ccc;
padding: 5px; margin: 20px 10px 0 0  ; 
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
line-height: 1.2;
background-color: #fff;
}

/* image container  */
#container.homepage #column-full  div.container-image  {
position:relative;
display: block;
background-color: #fff;
height: 140px;
max-height: 50%;
width: auto;
overflow:hidden;
vertical-align: middle;
}

#container.homepage #column-full  div.container-image img { 
position: relative; 
text-align: center;
height: auto; width: 100%;
}



#container.homepage #column-full  .container-block a.button { 
position: absolute; bottom;
font-size: 16px;
width: 100%;
display: block;
margin:0;
background-color: var(--blue);
}


#container.homepage #column-full  .container-block#long { 
position: relative;
float: none; 
width: 100%; height: auto;
border: solid 10px var(--gold);
padding: 10px; margin: 0 5px  ; 
border-radius: 24px;
-moz-border-radius: 24px;
-webkit-border-radius: 24px;
line-height: 1.2;
background-color: #fff;
}



/* POWERPACK PAGE EVENTS */
/* Events listed on right side of powerpack pages */
.box-pp-event {
position: relative;
display: block; 
width: 100%; height: 120px; 
padding: 10px 5px 5px 10px;
margin-bottom: 10px;
border: solid 6px #2292d4; 
border-radius: 10px;
background-color: #fff;
}

.box-pp-event .text {
position: relative;
display: block; 
width: 100%; height: 120px; 
padding: 10px 5px 5px 10px;
margin-bottom: 10px;
border: solid 6px #2292d4; 
border-radius: 10px;
background-color: #fff;
}

.box-pp-event .labellittle { 
position: absolute; top: -10px; right: none; left: 10px;
width: 100px; 
background-color: var(--lightblue);
border-radius: 2px;
border: none 1px white;
}

.box-pp-event .ctaribbon.PP {
position: absolute; top: -10px; left: 10px;
border-radius: 2px;
border: none 1px white;
background-color: var(--blue); color: white;
display: inline;
}