/* Overview of the Coptic Orthodox Church Menu */

body{margin: 0px; background:#f7f4eb; font-family:Verdana; width: 100%;}

/* body {font-family: Verdana; width: 100%;} */

.container {
   
  width: 1400px;
  padding: 0;         /* breathing room on mobile */
  box-sizing: border-box;
}


/* Each column */
.menu-column {
  flex: 1; /* equal width columns */
  padding: 1rem 0 0 0; 
}

/* Menu list */ 
.menu-column ul {
  list-style: none;
  padding: 1rem 0;
  margin: 0;
}

.menu-column li {
  margin-bottom: 0.33rem; 
}

.menu-column a {
 background: #F7F4EB;     /*  #33b5e5 needed for the menu */
 color: #191970;
 font-family:verdana; 
 display: block;
 font-size: 17px;
 padding: .5rem 1rem;
 text-decoration: none;
}

.menu-column a:hover {
  background: #86cae9; 
  color: #FFFFFF;
  }


/* Background spans full screen */
.header-bg {background-color: #86cae9; 
 /* background-image: linear-gradient(#86cae9, #f7f4eb); */
}

.btn{
display: block;
text-align: center;
color: #191970;
background: #f7f4eb;
font-family: 'Roboto Flex', sans-serif;
font-size: 15px;
font-weight: 400;
text-transform: capitalize;
letter-spacing: 1px;

padding: 3px 10px;
margin-bottom: 0;
border-radius: 0;
border: none;
position: relative;
z-index: 1;

transition: all .3s ease 0s;}
.btn:hover{
color: #fff;
background: #86cae9;
box-shadow: 0 0 50px -5px #f7f4eb;}
.btn:before,
.btn:after{
content: '';
border: 3px solid #86cae9;
position: absolute;
left: 0;   right: 0;   top: 0;   bottom: 0;
clip-path: polygon(0 0, 70% 0, 20% 100%, 0 100%);
transition: all 0.3s ease 0s;}
.btn:after{ clip-path: polygon(80% 0, 100% 0, 100% 100%, 30% 100%); }

.CopticSource { /* formatting the text source */
margin: 0; 
padding-left: 0; 
font-family: verdana;      
font-size: 13px;  
background-color: #f7f4eb; 
color:#191970;    
border-left: 3px solid #86cae9;    
border-bottom: 3px solid #86cae9;
border-color:#86cae9; 
text-decoration: none;   
}    
a:hover { 
background-color:#86cae9;    
border-color:#f7f4eb; 
color:white; 
}


/* B O R D E R  */
.horizontal_line { 
background-color: #8DCCE9; 
border-top: 0px solid; 
height: 3px; 
line-height: 100%;
padding: 2px;
width: 100%;  }


/* border */
.border {
  border-top: 50px ;
  border-color:  #f7f4eb;
  border-style: solid;
  height: 30px;
}

/* unvisited link */	a:link 	{	color: red;		}
/* visited link */	a:visited	{	color: green;	}
/* mouse over link */ a:hover 	{	color: Yellow;	}
/* selected link */	a:active	{	color: yellow;	} 





/* The Copt Page */

/*    Divider  1*/

.fish-row {
  border-bottom: #888888 1px double;
  border-top: #888888 1px double;
  height: 3px;
  width: 100%; max-width: 100%;
  margin-top: 2em;
}
.hellohal {
  width: 100px; margin: -33px auto 0; 
  display: block; z-index: 100;
  background: #ffffff;}



.colour-block {
  background: linear-gradient(#86cae9, #f7f4eb);
  width: 100%;
  padding: 3% 20% 10% 10%;
  box-sizing: border-box;
  color: #191970;
}
.saint-img {
  float: right;
  width: 200px;
  margin: 10px 0 20px 30px;
}



/*------------------*/
/*  SKEW CLOCKWISE  */
/*------------------*/
.skew-cc{
  width:100%;
  height:100px;
  left:0;
  background: linear-gradient(to right bottom, #f7f4eb 49%, #fff 50%), linear-gradient(-50deg, #ffffff 16px, #000 0);
}


/*-------------------------*/
/* SKEW COUNTER CLOCKWISE  */
/*-------------------------*/
.skew-c{
  width:100%;
  height:100px;
  left:0;
  background: linear-gradient(to left bottom, #fff 49%, #86cae9 50%);
}

@media (max-width: 768px) {
  .saint-img {
    float: none;
    display: block;
    margin: 20px auto;
    width: 70%;
  }
}




/*  ============================ */
/* Mobile: stack into one column */
/* ============================= */
@media (max-width: 768px) {

  .menu-columns {flex-direction: column; padding: 0; gap: 0;  }
 
 .menu-column {
    margin: 0;
    padding: 0;
    background: transparent;
  }
 
  .menu-column ul {margin: 0;  padding: 0;  }
  .menu-column li { margin: 0; padding: 0;  }
  .menu-column a { font-size: 13px;
    margin: 0;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 2px 12px 3px 12px;
    line-height: 1.2;    }
 

}