@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@import url('http://fonts.googleapis.com/css?family=Lato:400,700');

/************ ******************* ************/
/************ ITEMS FOR ALL SITES ************/
/************ ****************** ************/
 
/************ TABLES  ************/
table, tr, td {border: none;}

/************ FLEX TABLE  ************/
table.flextable, .flextable tbody, .flextable tr {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
 
.flextable td {
	display: list-item; 
    list-style-type: none;
	margin: 0px;
	padding: 10px 0 0 0;
}

@media only screen and (max-width: 767px) { 
	table.flextable, .flextable tbody, .flextable tr, .flextable td {display: block; width: 100%;}
	.flextable tr { border-bottom: 2px #ddd solid; } 
	.flextable td {text-align: center;}
}

/********** EQUAL TABLE ********************/
.equaltable { width: 100%; display: table; table-layout: fixed;}
.equaltable > tbody > tr { display: table-row;}
.equaltable > tbody > tr > td  {	display: table-cell; margin: 10px; width: 2%; border: 10px solid rgba(0,0,0,0); vertical-align: top; word-break: break-word;}
.equaltable td img {padding: 0px !important; margin: 0px !important;}

@media only screen and (max-width: 767px){ 
	.equaltable, .equaltable > tbody > tr, .equaltable > tbody > tr > td { display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
	.equaltable img { display: block; margin: 0 auto;}	
}


/************ BREAKDOWN TABLES ON RESPONSIVE ************/ 
@media only screen and (max-width: 767px) { 
#g-main table tr { border-bottom: 2px #ddd solid; } 
#g-main table td { display: block; width: auto !important; } 
}
/************ MAKE THE ROTATOR NOT JUMP  ************/
.sprocket-features-img-container {width: 100%;}

/************ IMAGES ************/
.item img {margin-left: 10px; margin-right: 10px; margin-bottom: 10px;}
 
/************ HANDLE ELLIPSES BETTER ON ROKSPROCKET  ************/
.sprocket-lists-desc p:last-of-type:after {content: " ...";}
.roksprocket-ellipsis {display: none;}

/************ HIDE FIRST ELEMENT OF A ROCK SPROCKET  ************/
.hidefirst .sprocket-lists-portrait-container li:first-child, .sprocket-lists-modern-container li:first-child {display: none;}

/************ ALERT ************/
#alert .g-content {padding: 0; margin: 0;}
#alert {border: none; padding: 0; margin: 0; background-color: #FFCFCF; color: #FF0000;}
#alert h1, #alert h2, #alert h3, #alert h4, #alert h5, #alert h6, #alert p { margin-left: 20px; color: red; background: transparent;}

/************ BREAKDOWN ADS ON RESPONSIVE ***********
.g-content.admod, .admod .g-content {padding: 0;margin: 0;}

.admod table, .admod tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
 
 .admod td {
	display: list-item; 
	list-style-type: none;
	margin: 0px;
	padding: 10px 0 0 0;
}

@media only screen and (min-width: 401px) and (max-width: 480px) {.admod table td [id$="-wide"] > div {width: 330px !important;} }
@media only screen and (max-width: 400px) {.admod table td [id$="-wide"] > div, .admod table td ins  {width: 300px !important;} } **/


/************ SPONSORSHIP PAGE (from CMS2.5) ************/
.basic, .bronze, .silver, .gold, .platinum {transition: all .5 linear;}
h4.sprocket-tables-title a {font-weight: bold; font-size: 1.5em; }
.basic .sprocket-tables-desc {background: white; color: #333; }
.bronze .sprocket-tables-desc {background: #8C7853 !important; color: #333; }
.silver .sprocket-tables-desc {background: #CDCDCD !important; color: #333; }
.gold .sprocket-tables-desc {background: #CFB53B !important; color: #333; }
.platinum .sprocket-tables-desc {background: #E5E4E2 !important; color: #333; }

.sponsorshippage .component-content ul li, .sponsorshippage .component-content ol li, .sponsorshippage .component-content ul {   
	padding: 0 1%;
    line-height: inherit;
    margin: 1% -4px 1% 0;}

.sponsorshippage .component-block .sprocket-tables .readon {float: none; display: block;}
.sponsorshippage .sprocket-tables .sprocket-tables-link .readon {background: #C52125; color: white; border: none;}
.sponsorshippage .sprocket-tables .sprocket-tables-link .readon:hover {background: #3173BD;}

.basic h4.sprocket-tables-title a {color: #333 !important; }
.bronze h4.sprocket-tables-title a {color: white !important; }
.silver h4.sprocket-tables-title a {color: #333 !important; }
.gold h4.sprocket-tables-title a {color: white !important; }
.platinum h4.sprocket-tables-title a {color: #333 !important; }

.basic:hover h4.sprocket-tables-title a {color: #666 !important; }
.bronze:hover h4.sprocket-tables-title a {color: #ddd !important; }
.silver:hover h4.sprocket-tables-title a {color: #666 !important; }
.gold:hover h4.sprocket-tables-title a {color: #ddd !important; }
.platinum:hover h4.sprocket-tables-title a {color: #CFB53B !important; }

.sprocket-tables-item .sprocket-tables-cell:nth-child(1) { height: 220px;}
.sprocket-tables-item .sprocket-tables-cell:nth-child(3) { height: 225px;}
.sprocket-tables-item .sprocket-tables-cell:nth-child(3) img {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.noborder img {
     background: none !important;
     border: 0 !important;
     -moz-box-shadow: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     padding: 0px !important;
	 margin: 0 !important;
     -moz-border-radius: 0px;
     -webkit-border-radius: 0px;
     border-radius: 0px;
}

.sponsorshippage h4.sprocket-tables-title {background: transparent;}
/******** changing this to be site-wide instead of just the sponsorship page - http://www.svdpomaha.org/faith-formation/resources/common-prayers  ******/
 .sprocket-lists-portrait-title  {background: transparent; color: #3173B8;}



/************ HIGHLIGHT SILVER  ************/
.sprocket-tables-block {margin-top: 30px !important; }
.silver {margin-top: -30px !important; }
.silver .sprocket-tables-item .sprocket-tables-cell:nth-child(1) { height: 220px; padding-top: 30px;}
.silver .sprocket-tables-item .sprocket-tables-cell:nth-child(6) { height: 120px; padding-top: 30px;}
.silver .sprocket-tables-item { border: 3px solid #572A79; margin-top: 30px; }
.silver .sprocket-tables-item {box-shadow: 2px 2px 15px #888 ;} 

/************ EXAMPLE ADS  ************/
.sponsorshippage .rokbox-wrapper .rokbox-outer .rokbox-row .rokbox-inner .rokbox-container .rokbox-caption {text-align: center;}
.sponsorshippage .rokbox-wrapper .rokbox-outer .rokbox-row .rokbox-inner .rokbox-container .rokbox-content { padding-bottom: 40px;}

/************ FAQ  ************/
.sponsorshippage .sprocket-lists-container li:first-child {display: none;}
.sponsorshippage .sprocket-lists .sprocket-lists-container li .sprocket-lists-title {background: none; color: #777;}
.sponsorshippage .sprocket-lists .sprocket-lists-container li {background: none; border: none; box-shadow: none;}
.sponsorshippage .sprocket-lists-title .indicator {display: none;}

/********** EQUAL TABLES ********************/
.equaltables { width: 100%; display: table; table-layout: fixed;}
.equaltables > div  {	display: table-cell; margin: 10px; width: 2%; border: 10px solid rgba(0,0,0,0); vertical-align: top; word-break: break-word;}

@media only screen and (max-width: 767px){ 
	.equaltables, .equaltables div{ display: block; table-layout:auto; width: 100%; border: none; margin: 0;}
	.equaltables img { display: block; margin: 0 auto;}
}

/************ BORDER ON VIDEO  ************/
.sponsorshippage iframe {border: 4px rgba(0,0,0,0.5) solid; border-radius: 5px;}

/************ NO BORDER  ************/
.sprocket-tables img {
     background: none !important;
     border: 0 !important;
     -moz-box-shadow: none !important;
     -webkit-box-shadow: none !important;
     box-shadow: none !important;
     padding: 0px !important;
	 margin: 0 !important;
     -moz-border-radius: 0px;
     -webkit-border-radius: 0px;
     border-radius: 0px;
	 max-width: 100%;
}

.sponsorshippage .cat-children, .sponsorshippage .rt-cat-children{display: none;}

/************ BREAKDOWN ADS ON RESPONSIVE ************/
.rt-block.admod, .admod .rt-block {padding: 0;margin: 0;}

.admod table, .admod tr {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
 
 .admod td {
	display: list-item; 
    list-style-type: none;
	margin: 0px;
	padding: 10px 0 0 0;
}



/************ FIX FOR IFRAMES ON IOS Devices ************/
iframe {width: 1px; min-width: 100%; }

/************ DOCMAN ************/
.docman_download__info {display: none;}
.doclink .docman_download__info {display: none;}
.k-ui-namespace .k-js-grid-controller koowa_table_list > .docman_block > h3.koowa_header { display: none; }
.k-ui-namespace .koowa_header__item--image_container {display: none;}
.k-ui-namespace .mod_docman ul li .koowa_header { margin: 0 0 2px 15px;}





/********************************************************************************************************/
/****************************************  CMS 3.0 REDESIGN 2017  ***********************************************/
/********************************************************************************************************/
/************ GET RID OF SIDE COLUMNS  ************/
.g-block.remove-column { flex: 0%; width: 0%;}
.full-width .g-container {width: 100% !important;}


/************* STYLES ***************/

h1 {color: #355fa1; font-size: 2.75rem;}
h2 {color: #355fa1; border-bottom: 2px solid #666; font-size: 2.25rem;}
h3 {background: #355fa1; border-radius: 5px; color: white; padding: 1px 10px;}
h4 {color: #666; font-size: 1.75rem;}
h5, h6, a {color: #355fa1;}

.readon {background: #355fa1; color: white; padding: 3px 10px; border-radius: 5px; font-size: .9em; font-family: "Lato";}
.readon:hover {background: #ababab; color: white;}

.button {background: #ababab;  font-family: "Lato";}
.button:hover {background: #355fa1; color: white;}


.fancytable th {background: #355fa1; color: white;}

.homelayout #g-main {display: none;}


img.pull-left {margin: 6px;}

/********** ALERT **********/
.alert h1, .alert h2, .alert h3, .alert h4, .alert h5, .alert h6, .alert p {color: red; background: transparent; padding: 1rem;}
.alert {
    background: pink;
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
}
.alert .g-content {margin: 0; padding: 0;}
.alert p {margin-top: 0;}


/********** HEADER **********/
#g-header .g-content.g-particle {padding:0; float: none; display: table; margin: auto;}

/********** MENU **********/
#g-navigation .g-menu-item-title {font-family: 'Lato', sans-serif; text-transform: uppercase;}
.g-main-nav .g-toplevel > li.g-parent .g-menu-parent-indicator:after {display: none;}
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container {background: #355fa1;}
#g-navigation .g-main-nav .g-sublevel > li:hover > .g-menu-item-container {background: #355fa1;}
#g-navigation .g-container .g-grid { float: none; display: table; margin: auto; }


@media only screen and (min-width: 481px) and (max-width: 959px) {
    .g-main-nav .g-toplevel > li > .g-menu-item-container, .g-main-nav .g-sublevel > li > .g-menu-item-container 
    {font-size: .75rem !important; padding .05rem .469rem;}
}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .g-main-nav .g-toplevel > li > .g-menu-item-container {padding: 0.2345rem 0.3rem;}
}


/************ MOBILE MENU *************/
#g-offcanvas #g-mobilemenu-container ul > li:not(.g-menu-item-type-particle):not(.g-menu-item-type-module).active {
    background: #355fa1;
}
#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator {border: 1px solid white;}

/********** MENU - DROPDOWN **********/

.g-main-nav .g-toplevel > li.g-parent.g-selected > .g-menu-item-container > .g-menu-parent-indicator:after { content: "\f078";}

/********** MENU - MOBILE **********/
#g-offcanvas, #g-offcanvas #g-mobilemenu-container ul {background: #092153;}
#g-offcanvas #g-mobilemenu-container ul > li.g-menu-item-link-parent > .g-menu-item-container > .g-menu-parent-indicator {display: none;}

/********* MENU - SECONDARY PAGES **********/
.box1.moduletable a, .box1.widget a, .box1 > .g-content a { color: white;  padding: .5rem 1rem;}
.nav {margin-top: 0; margin-bottom: 0 !important;}
.moduletable.box1 a:hover, .box1.widget a:hover, .box1 > .g-content a , .box1.moduletable .menuside-menu  li.current.active:not(.deeper)  {background: #092153; }
.moduletable[class*="box"] {padding: 1rem 0;}


.box1.moduletable ul.nav-child.unstyled {margin-left: 1rem;}
ul.unstyled li:hover, ol.unstyled li:hover {
    background: #092153;
}
ul.unstyled li a:hover {
    background: transparent !important;
}

/********** ROTATOR / SHOWCASE **********/
.sprocket-features.layout-slideshow .sprocket-features-arrows .arrow {
    color: white; 
    font-size: 3rem; 
    background: black;
    width:4rem;
    height:3rem;
    line-height:2.5rem;
}
.layout-slideshow .sprocket-features-arrows .arrow {border-radius: .5rem;}
#g-showcase {
    background: #355fa1;
    background-image: url(/images/stories/solutio/showcase-background.jpg);
    background-size: cover;
}
#g-showcase .g-container {background: transparent;}




#g-showcase #rotatorhome .g-content {margin: 0; padding: 0; }

#showcase-a h2 {font-size: 1.5em; margin-bottom: 0; color: white;font-family: 'Lato', sans-serif; border-bottom: none;}
#showcase-a h3 {font-size: 1.5em; margin-bottom: 0; color: white; background: transparent; text-transform: none;}
#showcase-a p {font-size: 1.1em; margin-top: 0; font-family: 'Lato', sans-serif;}
#showcase-a a {color: white;}

.sprocket-features.layout-slideshow .sprocket-features-img-container:before {background: none;}

@media only screen and (min-width: 1200px) {}
@media only screen and (min-width: 768px) and (max-width:1199px) {
    #showcase-a p {font-size: .8em; }
    #showcase-a h2 {font-size: 1.1em;}
}

#showcase-a .g-content {margin: .2rem; padding: .4rem;}

@media only screen  and (max-width: 767px) {
    #showcase-a .mod_placehere , #showcase-a .moduletable{text-align: center;}
	.g-logo img {width:  95%; padding-top: 30px;}
	#g-extension .size-55 .g-content { padding-left: 0px; padding-right: 0px; margin-left: .7rem; margin-right: .7rem;}
}


/********** CONTENT **********/
#g-extension h3 {color: #355FA1;  font-size: 2rem;  text-transform: none; font-weight: 300}
.sprocket-lists .sprocket-lists-container li.active {
    background: transparent;
    color: black;
}
.box4.moduletable {background: transparent;}
#g-extension h4.sprocket-lists-title   {text-transform: none; font-size: 1.1rem !important; color: #355FA1; font-weight: bold;}

/********* PARISH HEADLINES **********/
#g-extension .sprocket-lists-portrait-item a span {color: white; background: #355FA1; border-radius: 1rem; padding: .1rem 1rem; float: right;}
#g-extension .sprocket-lists-portrait-item a span:hover {background: #666;}
#g-extension .portrait-image {margin: 1rem 1rem 0 0;}
#g-extension h4.sprocket-lists-portrait-title {background: transparent; color: #355FA1; margin-bottom:.5rem; margin: 5px 0;}
#g-extension p {margin: .2rem 0 1.5rem 0;}
.homelayout .sprocket-lists-portrait-container li {border-bottom: 2px solid #355FA1;}
#g-extension h3 {margin-bottom: 0; color: #355FA1; background: transparent;}

/********** ASK THE PASTOR **********/

#g-footer h3.box1 {color: white; font-size: 2.5em; text-align: center; margin-bottom: 0;}
#g-footer #footer-a-class .platform-content {background: transparent; padding-bottom: 20px;}




#g-extension {
    background: #f1e8d6;     
    background-image: url(/images/stories/solutio/content-background.jpg);
    background-size: cover;
}




/********** FOOTER **********/
#g-footer {background: #355fa1;}
#g-footer h2 {border-bottom: none; color: #ccc; font-size: 1.5rem; margin: 0;}
#g-footer p {width: 75%; color: white; float: none; display: table; margin: auto; }
#g-footer a.readon {background: #333; padding: .5rem 1rem; margin: 1rem; font-size: 1.2rem; width:10rem;}
#g-footer a.readon:hover {background: #666;}
#g-copyright a, #g-copyright p, #g-copyright h2 {color: #355fa1; text-align: center;}
#g-copyright h2 {border-bottom: none;}
#g-copyright .smallfont {font-size: .6rem;}

#g-copyright a.readon {color: white; padding: 1rem 2rem;}
#g-footer h3.box1em; margin: .5rem .25rem;}

@media only screen and (min-width: 768px) and (max-width: 959px) {}
@media only screen and (max-width: 767px) {
    #g-copyright a.readon {display: block; width: 100%; margin: .5rem;}
}


/************ HANDLE ELLIPSES BETTER ON ROKSPROCKET  ************/
p.portrait-text:last-of-type:after {content: " ...";}

/************* SPACE HOME HOMEPAGE UNDER LATEST BULLETINS ***********/
#g-extension .g-content .platform-content {margin-bottom: 3rem;}