/*##### Table content CSS custom JK #####
*#1.Text css style for different places, banner,....
*#2.Images css style 
*#3.Boxes, lines,... css style
*#4.Hyperlinks css style


*/


/*
.headlinejk{
	color: #a0522d; font-family: "Great Vibes", cursive; font-size: 30px; line-height: 20px; font-weight: normal; margin-bottom: 0px; margin-top: 5px; text-align: center; text-shadow: 0 1px 1px #fff;
}
*/

/* old style 

<div style="background-color:#ED872D;">
<p class="text-align-center"><img alt="" height="200" src="/en/sites/default/files/bannerOcarm/EasterKEditEn01_19.jpg" width="900" /></p>

<p class="text-align-center" style="margin:0in 0in 10pt"><span style="font-size:13pt"><span style="line-height:115%"><span style="font-family:&quot;Times New Roman&quot;,serif"><span style="font-size:18.0pt"><span style="line-height:115%"><span style="font-family:&quot;Bodoni MT Black&quot;,serif"><span style="color:#ffffff">Order of the brothers of the Most Blessed Virgin Mary of Mt. Carmel</span></span></span></span></span></span></span></p>
</div>
*/

/* Name of some fonts for website
https://www.hostinger.com/tutorials/best-html-web-fonts
*/

/*#1a Begin banner TEXT css style JKJK############################*/

/********
textbanner01 goes with the background div  colore background cream gold yellow
<div style="background-color:#ED872D;"> ... </div>
*/
@media (min-width: 999px) {
    .textbanner01{color: #a0522d; font-family: "Great Vibes", cursive; font-size: 45px; line-height: 40px; font-weight: normal; margin-bottom: 0px; margin-top: 5px; text-align: center; text-shadow: 0 1px 1px #fff;}
}

@media (max-width: 998px) {
    .textbanner01{color: #a0522d; font-family: "Garamond", cursive; font-size: 40px; line-height: 30px; font-weight: normal; margin-bottom: 0px; margin-top: 5px; text-align: center; text-shadow: 0 1px 1px #fff;}
}

@media (max-width: 800px) {
  .textbanner01{color: #a0522d; font-family: "Great Vibes", cursive; font-size: 30px; line-height: 30px; font-weight: normal; margin-bottom: 0px; margin-top: 5px; text-align: center; text-shadow: 0 1px 1px #fff;}
  }

@media (max-width: 600px) {
  .textbanner01{color: #191970; font-family: "Geneva", cursive; font-size: 20px; line-height: 15px; font-weight: normal; margin-bottom: 0px; margin-top: 3px; text-align: center; text-shadow: 0 1px 1px #fff;}
}
/*End text banner css style JK*/

/*#1.b Text posistion */
/*text center for footer*/
.textcenter{
    text-align: center;
    font-weight: bold;
    color: white;
}

/*#2.Images css style JK############################*/
.hideimage img {
    display: none;
}
/*This class add to twig view full node to center image*/
.centeredjk img {
  display:block;
  margin-left: auto;
  margin-right: auto;
}   
    
/*#3.Boxes, lines,... css style JK############################*/

/*#3.a Boxes css style*/
/**Border box for the moto and the shield at the bottom**/
.boxocarm01{
     border:3px solid saddlebrown;
     padding:6px;
}
/**Border box style(for the big box for the Covid-19**/
.boxocarm02{
     border:9px solid steelblue;
     padding:6px;
}
/**Border box style(for the small box for the Covid-19**/
.boxocarm03{
    border:5px solid steelblue;
    padding:5px;
}
/* class box violet border */
.boxlent01 {
  border: 5px solid violet;
  border-radius: 3px;
}

/*#3.b Lines css style*/

/* Large bottom line border (for Covid19 under) */
.linebottom01 {
  border-bottom: 5px solid steelblue;
  border-radius: 3px;
}
/*Style HR (Horizontal Ruler/Line)css style JK*/
/* Large rounded line violet border */
hr.lent01 {
  border: 5px solid violet;
  border-radius: 3px;
}



/*#4 Hyperlinks css classes color JK############################ */
/*with this name class, it only works inside content*/
a.linkjk02 {
    text-decoration: underline;
    color: #4682b4; 

}
a.linkjk02:hover, a.linkjk02:active {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

a.linkjk02:visited {
    text-decoration: underline;
    color: #a35777; 
}
/*#### important!!! link with different class name =>it work in node*/

.linkjk03 a {
    text-decoration: underline;
    color: #4682b4; 
}
.linkjk03 a: visited {
    text-decoration: underline;
    color: #a35777; 
}

.linkjk03 a:hover, a:active {
    background-color: #4CAF50;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}