/*Main Page  and general CSS*/
body
{
    background: #D21D1D
/*    background: rgba(128,0,0)*/
}

@font-face 
{
    src: url(fonts/cooprblk.ttf); 
    font-family: Cooper;  
    
}

@font-face
{
    src: url(fonts/Calibri.ttf); 
    font-family: Calibri;
}

h1.logo 
{
    color: white;
    font-family: "Cooper Black";  "serif"; 
    text-align: center;

}

h2.head 
{
    color: #F6DF0C;
    font-family: "Calibri";
    text-align: center;
}


/* Animation attempt for "Our Activities" on mainpage */

/*
@keyframes bounceIn
{
    0%
    {
        transform: scale(0.1);
        opacity: 0;
    }
    60%
    {
        transform: scale(1.2);
        opacity: 1;
    }
    100%
    {
        transform: scale(1);
    }
}

h1.Second_Header
{
    animation-duration: 2s;
    animation-name: bounceIn; 
}
*/


#MBar
{
    font-family: "Calibri";
    text-align: center;
}

h1#Second_Header 
{
    color: #F6DF0C;
}

div#mainactivpage
{
    font-family: "Calibri";
    text-align: center;
} 

#MBar a {
        display:inline-block;
        color: black;
        padding: 3px;
        float: bottom;
        width: 20%;
    text-decoration: none;
    border-style: groove;
    border-color: black;
    border-radius: 5px;
}


#MBar a:hover{
    background-color: #D21D1D;
    color:lightgrey;
}

#MBar a:active{
    background-color: #D21D1D;
    color:lightgrey;
}
     

.logo {
    grid-area: logo;
/*    grid-row: 1/2;*/
}   

.head{
    grid-area: head;
/*    grid-row: 1/3; */
} 

#MBar{
    grid-area: nav;
} 


#mimageArea {grid-area: mimageArea}
#mimageArea2 {grid-area: mimageArea2}

#img1 {
    width: 680px;
    height: 400px;
}

.contentContainer {
   /* (block of code which helped in earlier stage) border-style: groove;
    border-color: black;
    margin-right: 2px;*/
    display: grid; 
    text-align: left;
    grid-template-columns: 500px 500px 485px;
    grid-template-rows: 400px;
    grid-template-areas: 
        'mimageArea mimageArea2 infosum infosum' 
        'activity_bar activity_bar activity_bar activity_bar';
    
} 

  
.infosum
{
    grid-area: infosum; 
    background: white;
    
    
/*    grid-column: 2/3;*/
} 

#shrti_header {
    margin-left: 10px;
    text-decoration-line: underline;
}

#ot_weekdays {
    margin-left: 10px;
}

#ot_weekend {
    margin-left: 10px;
}

#shrti_header {
    margin-left: 10px;
}

#price_class {
    margin-left: 10px;
}

#shrtinfo { 
    border-style: groove;
    border-color: black;
    margin-left: 5px;
}



.activity_bar{
  grid-area: activity_bar; 
  align-self: center; 
  position: center;
  bottom: 10px;
  left: 10px;
}

#mainactivpage a { 
        color: white;
        padding: 3px;
        float: center;
        width: 20%;
    text-decoration: none;
    
} 

/*#actlink {
   background-color: white;
    border-style: solid;
    border-color: white;
}*/



/*INFORMATION PAGE     */ 


.iTitle 
{
    color: #F6DF0C; 
    text-align: center; 
    font-family: "Calibri"; 
} 

.head2
{
    color: Black; 
    font-family: "Calibri";
} 


.PText
{
    color: white; 
    font-family: "Calibri";
} 

.infosum
{
    font-family: "Calibri";
}


/* OUR ACTIVITIES PAGE */ 


#ActivityPageText {
   color:black;
    font-size: 18px;
    text-align: center;
    font-family: "Calibri";
}

.TextRed {grid-area: Text; 
    font-size: 18px;
    color: #D21D1D;
    text-align: left;
    margin-top: 40px;
    font-family: "Calibri";
}

.Images {grid-area: Image;}

.Titles {grid-area: Title;
font-size: 20px;
color: black;
text-align: left;
font-family: "Calibri";
}

.ActivityAreasWhite {
    border-style: groove;
    border-color: black;
    border-width: 1px;
    border-bottom: none;
    background-color: white;
    display: grid;
    grid-template-columns: 320px 200px;
    grid-template-rows: 200px;
    grid-template-areas:'Image Title Text';
}


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


.TextWhite
{
grid-area: Text;
margin-top: 40px;
text-align: left;
color: white;
font-size: 18px;
font-family: "Calibri";
}

.ActivityAreasRed {
    border-style: groove;
    border-color: black;
    border-width: 1px;
    border-bottom: none;
    display: grid;
    grid-template-columns: 320px 200px;
    grid-template-rows: 200px;
    grid-template-areas:'Image Title Text';
    
}