/*=============================*/
/*        Global Resets        */
/*=============================*/

*   { 
        margin: 0;
        padding: 0; 
    }


*,
*::before,
*::after
    {
        box-sizing: border-box;
    }    


/*=============================*/
/*            Fonts            */
/*=============================*/



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

    .roboto-thin {
        font-family: "Roboto", sans-serif;
        font-weight: 100;
        font-style: normal;
      }
      
      .roboto-light {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: normal;
      }
      
      .roboto-regular {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: normal;
      }
      
      .roboto-medium {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-style: normal;
      }
      
      .roboto-bold {
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-style: normal;
      }
      
      .roboto-black {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
        font-style: normal;
      }
      
      .roboto-thin-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 100;
        font-style: italic;
      }
      
      .roboto-light-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 300;
        font-style: italic;
      }
      
      .roboto-regular-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 400;
        font-style: italic;
      }
      
      .roboto-medium-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        font-style: italic;
      }
      
      .roboto-bold-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-style: italic;
      }
      
      .roboto-black-italic {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
        font-style: italic;
      }

      .quattrocento-regular {
        font-family: "Quattrocento", serif;
        font-weight: 400;
        font-style: normal;
      }
      
      .josefin-sans-light {
        font-family: "Josefin Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
      }

      .josefin-sans-regular {
        font-family: "Josefin Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
      }

      .josefin-sans-regular-small {
        font-family: "Josefin Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-size: .9rem;
      }

      .raleway-light {
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;
      }

      .raleway-regular {
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
      }

      .raleway-bold {
        font-family: "Raleway", sans-serif;
        font-optical-sizing: auto;
        font-weight: 700;
        font-style: normal;
      }

      .yeseva-one-light {
        font-family: "Yeseva One", serif;
        font-weight: 300;
        font-style: normal;
      }
      
      .yeseva-one-regular {
        font-family: "Yeseva One", serif;
        font-weight: 400;
        font-style: normal;
      }

      .montserrat-light {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 300;
        font-style: normal;        
      }
      
      .montserrat-regular {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;        
      }

      .montserrat-bold {
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 600;
        font-style: normal;        
      }
            


/*=============================*/
/*     General Page Styles     */
/*=============================*/

body 
		{
            --rh-colour: #004AAD;
            --rh-highlight: #FF16B7;

		    
            display: grid;
            grid-template-columns: 1rem 1fr 1rem;
            grid-template-rows: auto auto 1fr auto;
            grid-template-areas:
                "header header header"
                "links links links"
                ". main ."
                "footer footer footer";
            padding-top: 5px;

                
        }

header
        {
            grid-area: header;
            background-color: transparent;
            width: 100%;
            display: flex;
            flex-flow: column nowrap;
        }        

nav
        {
            grid-area: links;
            font-family: montserrat, roboto, sans-serif; 
            background-color: white;
        }        

section 
        {
            grid-area: main;
            font-family: montserrat, roboto, sans-serif;
        }        

footer
        {
            color: white;
            background-color: var(--rh-colour);
            grid-area: footer;
            font-family: montserrat, roboto, sans-serif;
        }

h1 
		{	
		color:var(--rh-colour);
        font-family: montserrat, roboto, sans-serif;
		font-size: 1.375rem;
		margin:15px 0 5px 0; 
		padding:10px 0px;
        font-weight:bold;
        border: 4px solid;
        border-image-slice: 1;
        border-image-source: linear-gradient(to left, #fff, #BFD2EA 70%, #608ECC);    
        border-left: 0;
        border-right: 0;
        border-top: 0;
        
		}

h2 
		{	
		color:#000000;
		font-size: 1.25rem;
		margin:20px 0px 10px 0px; 
		padding:0px 0px;
        font-weight: 600;
		}  
        
.title
        {
            display: flex;
            flex-flow: row nowrap;
            justify-content: left;
            width: 100%;            
        } 
        
.logo
        {
            background-color: white;
            padding-left: .25em;
        }        
        
.logo img
		{
            width: 100%;
            max-width: 125px;
            min-width: 100px;
            border-radius: .5em;
		}        

.name
        {
            font-size: min(4rem, 10vw) ;
            font-weight: 600;
            height: 100%;          
            color: var(--rh-colour);
            background-color: white;
            background-image: none;  
            font-family: montserrat, sans-serif;            
            display: flex;
            justify-content: left;
            align-items: center;
            padding-left: 20px;
        }  

.search
    {
        display: flex;
        flex-flow: row nowrap;
        justify-self: right;
        align-items: center;
    } 
    
@media screen and (max-width: 330px)
    {
        .search
            {
                display: none;
            }
    }

.mobnav
        {
            display: flex;
		    flex-flow: column nowrap;
		    justify-content: flex-start;
		    align-items: center;
            width: 49%;
            position: absolute;
            background-color:rgb(248, 248, 248);
            z-index: 10;    
            clip-path: circle(0px at top left);
            transition: clip-path ease-in-out 500ms;      
        }

.mobnav span 
    {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        width: 90%;
    }        

.mobnav1,
.mobnav2,
.mobnav3,
.mobnav4,
.mobnav5,        
.mobnav6
        {
            display: flex;
		    flex-flow: column nowrap;
		    justify-content: flex-start;
		    align-items: center;
            width: 100%;
            position: absolute;
            top: 0;
            left: 100%;
            background-color: rgb(248, 248, 248);
            z-index: 10;    
            clip-path: circle(0px at top left);
            transition: clip-path 400ms ease-out;  
        }
        
.mobnav--open,
.mobnav1--open,
.mobnav2--open,
.mobnav3--open,
.mobnav4--open,
.mobnav5--open,
.mobnav6--open
    {
        clip-path: circle(250% at top left);
    }   

.mobnav a 
    {   
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 5px;
        width: 90%;               
        border-top: #8F9092 1px solid;
        padding: 0.5em 0.25em;
        text-decoration: none;
        font-size: 1rem;
        color: #585858;
    }
    
.menu-toggle1,
.menu-toggle2,
.menu-toggle3,
.menu-toggle4,
.menu-toggle5,
.menu-toggle6
    {
        color: #585858;
        border-top: #8F9092 1px solid;
    }    

.navigation
	{
		display: none;
	}

.menu-toggle,
.menu-toggle1,
.menu-toggle2,
.menu-toggle3,
.menu-toggle4,
.menu-toggle5,
.menu-toggle6
    {
        padding: 1em 0.25em;
        cursor: pointer;
    }        
        
.hamburger,
.hamburger::before,
.hamburger::after
    {
        content: "";
        display: block;
        width: 1.75rem;     
        height: 3px;
        background-color: #585858;
        border-radius: 3px;
        transition: all ease-in-out 500ms;
    }        
    
.hamburger::before
    {
        transform: translateY(-6px);
    } 
    
.hamburger::after
    {
        transform: translateY(3px);
    }   

.open .hamburger 
    {
    transform: rotate(45deg);
    }

.open .hamburger::before 
    {
    opacity: 0;
    }

.open .hamburger::after 
    {
    transform: translateY(-3px) rotate(-90deg);
    }

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-left: 1rem;
}

.breadcrumb li {
  margin: 0;
}

.breadcrumb li + li::before {
  content: ">";
  padding: 0 8px;
  color: #888;
}

.breadcrumb a {
  text-decoration: none;
  color:  #888;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

 .logo-container
                {
                    width: 95vw;
                    padding-inline: auto;
                }


@media screen and (min-width: 61rem) 
        {
            
            body 
                {
                    grid-template-columns: 15% 1fr 15%;
                }  
                
            #home 
                {
                    grid-template-areas:
                    "header header header"
                    "links links links"
                    "main main main"
                    "footer footer footer";
                }    
            
            
            header
                {                    
                    display: flex;
                    flex-flow: row nowrap;
                }

            .menu-toggle,
            .mobnav,
            .hamburger 
                {
                    display: none;
                } 

            .navigation
                {
                    display: flex;
                    justify-content: space-between;
		            gap: 0px;
                    padding-left: 0px;                    
                    text-decoration: none;
                    z-index: 4;
                    background-color: whitesmoke;
                }                

            .navigation li
                {
                    list-style: none;
                    text-align: center;
                    text-transform: uppercase;
                    position: relative;
                    padding: 10px;
                }    

            .navigation a
                            {
                    
                    color: var(--rh-colour);
                    font-size: 0.9rem;
                    text-decoration: none;
                } 
            .navigation li:hover
                {
                    text-decoration: none;
                }
                
            .navigation li:hover:not(:has(> .dropdown-content:hover, .dropdown-content1:hover, .dropdown-content2:hover, .dropdown-content3:hover, .dropdown-content4:hover, .dropdown-content5:hover, .dropdown-content6:hover))
                {
                    text-decoration: underline;
                }    

            .dropbtn,
            .dropdown-content1,
            .dropdown-content2,
            .dropdown-content3,
            .dropdown-content4,
            .dropdown-content5,
            .dropdown-content6
                {
                    display: none;
                    padding: 10px;                                        
                    background-color: whitesmoke;
                }    
                
            .dropdown-content
                {
                    display: flex;
                    flex-flow: column nowrap;
                    background-color: transparent;
                    position: absolute;
                    width: 19%;
                    top: calc(100% + 100px);
                    right: 140px;                
                    padding-top: 10px;
                    z-index: 10;
                }

            #home .dropdown-content
                {
                    width: 110%;
                    right: 0px;
                }

            #home .dropdown-content li
                {
                    left: calc(100% - 40px);
                    transition: left 0.35s ease-in;
                    overflow: hidden;
                    background-color: rgba(255, 255, 255, 0.8);
                    border-top: #292929 1px solid;
                    border-left: #292929 1px solid;
                    border-bottom: #292929 1px solid;
                }
            
            #home .dropdown-content li::before
                {
                    content: "🢐";
                    position: absolute;
                    left: 2%;
                    top: -10%;
                    font-size: 2.5em;
                }    
                
            #home .dropdown-content li:hover
                {
                    left: 0%;
                    overflow: visible;                    
                    background-color: rgba(255, 255, 255, 0.45);
                }
                
            #home .dropdown-content li:hover::before 
                {
                    display: none;
                }
                
            #home .dropdown-content li a
                {                    
                    color: black;
                    text-shadow: white 2px 2px 3px;
                    color: rgba(255, 255, 255, 0);
                } 
            
            #home .dropdown-content li:hover a 
                {    
                    color: #000000;
                }

            .dropdown-content li 
                {
                    width: 18vw;
                    text-align: left; 
                    background-color: white;                   
                    border-top: #d6d6d6 1px solid;
                    border-left: #d6d6d6 1px solid;
                    border-bottom: #d6d6d6 1px solid;
                    border-top-left-radius: 1rem;
                    border-bottom-left-radius: 1rem;
                    box-shadow: #dadada -4px 1px 4px;
                    padding: 1em 2em;
                    margin-bottom: 5px;
                } 
             
                
            .dropdown-content1 li,
            .dropdown-content2 li,
            .dropdown-content3 li,
            .dropdown-content4 li,
            .dropdown-content5 li,
            .dropdown-content6 li 
                {
                    padding-block: 10px;
                }    
                
            .dropdown1:hover .dropdown-content1,
            .dropdown2:hover .dropdown-content2,
            .dropdown3:hover .dropdown-content3,
            .dropdown4:hover .dropdown-content4,
            .dropdown5:hover .dropdown-content5,
            .dropdown6:hover .dropdown-content6
                {
                    display: flex;
                    flex-flow: column nowrap;
                    position: absolute;
                    top: calc(100% - 0px);
                    left: 0%;
                    z-index: 20;
                }                    

            .navigation input[type=text]
                {
                    float: right;
                    padding: 6px;
                    border: none;
                    margin-top: 8px;
                    margin-right: 16px;
                    color: var(--rh-colour);
                    font-size: 0.9rem;
                }    

            .breadcrumb
                {
                    padding-left: 15% !important;
                }            
                
            .logo-container
                {                    
                    margin: 15px auto;
                    overflow-x: clip;
                    background-color: white;
                } 
                
            .logo-extra
                {
                    display: inline !important;
                }    
                
            .logo-scroller
                {
                    --_logo-move: calc((var(--_logo-no) * var(--_logo-sz)) + (var(--_logo-gap) * var(--_logo-no)) );


                    animation: scroll 25s linear infinite;
                    overflow-x: visible !important;
                }    

            @keyframes scroll 
                {
                      0% 
                        {
                        transform: translate3d(0, 0, 0);
                        }
            
                      100% 
                        {
                        transform: translate3d(calc(var(--_logo-move) * -1), 0, 0);
                        }
                }     
                  
        }

.intro
    {
        display: flex;
        flex-flow: column nowrap;
        gap: 10px;
        width: 100%;
        min-height: 450px;
        color: black;
        text-shadow: #bfd2ea 2px 2px 2px;
        position: relative; 
        background-image: url("../images/teamphoto.webp");
        background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white color */
        background-blend-mode: lighten; 
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        margin-bottom: 2rem;
    }     
    
#tp
    {
        display: block;
        width: 70%;
        margin-inline: auto;
    } 

.index_main_content h1
    {
        color: black;
        font-size: 1.75rem;
        text-align: center;
        border: 0;
    }    
    
.index_main_content p
    {
        width: 100%;
        padding-left: 15%;
        padding-right: 15%;
        padding-block: 1.5rem;
        line-height: 2rem;
    }

   
    
.main_content
    {
        display: flex;
        flex-flow: column nowrap;
        font-size: 1.25em;
        padding-left: 1rem;
        padding-right: 1rem;        
    } 
  
.main-para p
    {
        padding-bottom: .75em;
        line-height: 1.3em;              
    } 
    
.introhero
    {
        font-size: 2.5rem;
        text-align: center;
        margin-top: 5px;
        padding-block: 2rem;
    }  
    
.introherosub
    {
        font-size: 1.25rem;
        text-align: center;
        margin-top: 0px;
    }
    
.heropoints
    {
        display: flex;
        flex-flow: row;
        flex-wrap: wrap;
        row-gap: 1rem;
        justify-content: space-evenly;
        margin-bottom: 2rem;        
    }    

.heropoint1,
.heropoint2,
.heropoint3
    {
        width: 350px;
        height: 250px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        font-size: 1.5em;
        color: #fff;
        box-shadow: 3px 3px 5px #707172;
    }

.heropoint1
    {
        border-radius: 36% 64% 39% 61% / 30% 30% 68% 68%;
        background: #BFD2EA;
    }    
    
.heropoint2
    {
        border-radius: 41% 59% 27% 53% / 28% 28% 67% 67%;
        background: #608ECC;
    } 

.heropoint3
    {
        border-radius: 44% 56% 38% 62% / 49% 49% 59% 59%;    
        background: #2061B7;
    } 

.index_main_content .con-button a 
    {
        text-decoration:none;
		text-align: center;
		font-size: 1.25em;
		color: white;
		font-weight:bold;
		border: 1px solid #8F9092;
		border-radius: 0.5rem;
		min-width: 10%;
		padding: 1em 1em;
		background-image: linear-gradient(#ff16b7 0%, #ff6dd1 60%, #ff00ae 100%);
		box-shadow: 
			
			0 4px 3px 1px #FCFCFC,
			0 6px 8px #D6D7D9,
			0 -4px 4px #CECFD1,		
			inset 0 0 3px 0 #CECFD1;
    }

.intro1
    {
        position: relative;
        isolation: isolate;
        margin-top: 5px;
        background-color: #BFD2EA;
    }  
    
.intro1::before,
.intro1::after
    {
        position: absolute;
        content: "";        
        width: 150px;
        height: 150px;
        z-index: -2;
        background-color: #BFD2EA;        
        bottom: -1em;
        
    }  

    
.intro1::before
    {
        right: 50%;
        transform: skew(0, 20deg);
    }

.intro1::after
    {
        left: 50%;
        transform: skew(0, -20deg);        
    }    
    
.intro2
    {
        margin-top: 10px;
    }    
    
.intro3
    {
        position: relative;
        isolation: isolate;
    }    

.intro3::after
    {
        content: "";
        background-color: #608ECC;
        position: absolute;
        z-index: -1;
        inset: 0;
        transform: skewY(-2deg);
    }    

.intro5
    {
        position: relative;
        isolation: isolate;
    } 
    
.intro5::after
    {
        content: "";
        background-color: #2061B7;
        position: absolute;
        z-index: -1;
        inset: 0;
        transform: skewY(2deg);
    } 

.logo-scroller
    {
        --_logo-sz: 150px;
        --_logo-gap: .5rem;
        --_logo-no: 21;

      
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: var(--_logo-sz);
        gap: var(--_logo-gap);
        overflow-x: auto;
        overscroll-behavior-inline: contain;
    }  
    
    
.logo-element
    {
        padding: 0rem;
    }
    
.logo-element > img
    {
        inline-size: 100%;
        aspect-ratio: 16 / 9 ;
        object-fit: contain;
    }

.logo-extra
    {
        display: none;
    } 

@media screen and (min-width: 61rem) 
        {
            .index_main_content h1 
                {
                    font-size: 3rem;
                    padding-inline: 15.1%;
                }

            .introherosub
                {
                    font-size: 1.75rem;
                    text-align: center;
                    margin-top: 0px;
                }    
        }     
    
    
/*=============================*/
/*      Reward Processes       */
/*=============================*/

.question
    {
        font-size: 1.6rem;
        color: #363636;
        font-weight: bold;
    } 

.popout
    {
        font-size: 1.4rem;
        color:#363636;
        font-weight: bold;
        background-color: #bfd2ea86;
        padding: 1rem 2rem 2rem 2rem;
        margin-bottom: 1rem;
    }
   

.question_sm
    {
        font-size: 1.3rem;
        color: #707172;
        font-weight: 700;
    } 


/*=============================*/
/*         Who we are          */
/*=============================*/

figures 
	{
		display: flex;
		flex-flow: row wrap;
		align-items: baseline;
		justify-content: center;	
		gap: 20px 20px;
		margin-top: 20px;
		margin-bottom: 10px;
	}

figures a
    {
        background-color: #E7EEF8;
        padding: 2rem;
        border-radius: .75rem;        
		text-decoration: none; 
    }    

figures img
	{
		width: 220px;
		border-width: 0px;
		border-style: solid;
		border-color: #fff;
		box-shadow: 0px 0px 8px 5px #808080;
	}
	
figures figcaption
	{
		position: relative;
        margin-top: 1rem;
		margin-bottom: 0px;
        font-size: 1.1rem;
		text-align: center;
		color: #000000;
        width: 220px;
	}

figures img:hover
    {
        transform: scale(1.05);
    }    

figures img:hover,
figures figcaption:hover
	{
		color: #004AAD;
	}

/*=============================*/
/*          Profiles           */
/*=============================*/ 

.profile-content
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto min-content max-content max-content;
        grid-template-areas:
                ". title ."
                ". profile ."
                ". exp ."
                ". link .";  
        gap: 1rem 1rem;                      
    }

@media (min-width: 950px) 
    {
        .profile-content
            {
                grid-template-columns: 1fr;                
            } 
        
        .photo
            {
                --pic-width: 12.5rem;

                display: inline;
                float: right;                
                width: var(--pic-width);
                margin-right: 0rem !important;
                margin-left: 1rem !important;
                clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%); 
                shape-outside: polygon(0% 0%, 100% 0%, 100% 100%, 25% 100%);
            }    

        .photo img 
            {
                width: var(--pic-width);
            }
            
    }        

#profile h1
    {
        grid-area: title;
    }    

.photo,
.photo img
    {        
        max-width: 60vw;
        margin-inline: auto;
    }
    
figure figcaption
    {        
        text-align: center;
        font-size: 1rem;
        padding-block: 20px;
    }    

.profile-words
    {
        grid-area: profile;
        font-size: 1.5em;
        height: min-content;
    }

.profile-words p
    {
        padding: 1rem; 
    }   

.profile-tag
    {
        background-color: #E7EEF8;
    }    
    
.profile-detail
    {
        font-size: .8em;
    }

.profile-list
    {
        position: relative;
        grid-area: exp;
        width: 90%;
        justify-self: center;
        position: relative;
        background-image:
            url(../images/spiral.png), 
            linear-gradient(
                135deg, 
                #f5f4d8, 
                #fafafa );  
        padding: 4em 1em 1em 3em;        
        background-repeat: repeat-x; 
        box-shadow: 1px 1px 2px rgba(0,0,0,0.2),
               1px 2px 2px rgba(0,0,0,0.2),
               2px 4px 2px rgba(0,0,0,0.2),
               3px 6px 2px rgba(0,0,0,0.2)             
    } 

.profile-list::before,   
.profile-list::after
    {
        position: absolute;
        content: "";
        top: 0;
        width: 6px;
        height: 16px;
        background-color: white;
    }

.profile-list::before
    {
        right: -6px;
    }
    
.profile-list::after
    {
        left: -3px;
    }    

.profile-list p,
.profile-list li
    {
        padding-top: 10px;
        padding-bottom: 2px;
        padding-inline: .5em;
        border-bottom: rgb(97, 160, 241, 0.3) solid 1px;  
    } 

.profile-list p 
    {
        font-weight: 600;
        font-size: 1.25rem;
    }

.profile-list li
    {
        
        list-style: square outside url(../images/bullet.png);        
    }    

.links
    {
        grid-area: link;        
        justify-self: center;
        display: flex;
        gap: 1rem;
        align-content: center;
        align-items: center;
        
    }
    
.links a 
    {
        --dot-size: 5rem;

        padding: 1rem;
        width: var(--dot-size);
        height: var(--dot-size);
        background: linear-gradient(0deg, #ddd, #fff);
        border: #808080 0px solid;                
        box-shadow: 2px 2px 3px 1px #808080;
        border-radius: 50rem;
    } 
    
.links img
    {
        max-width: 50px;
    }   
    
.links a:hover
{
    transform: scale(1.05);
    box-shadow: 0 0 10px #4b4583;
}      


/*=============================*/
/*        What we Do           */
/*=============================*/  

.what-content
    {
        --_w1-color:    #b03a2e;
        --_w1-lt-color: #fadbd8;
        --_w2-color:    #d4ac0d;
        --_w2-lt-color: #fcf3cf;
        --_w3-color:    #1f618d;
        --_w3-lt-color: #a9cce3;
        --_w4-color:    #117a65;
        --_w4-lt-color: #d0ece7;

        --_w1-color:    #FF12B8;
        --_w1-lt-color: #ffb7e933;
        --_w2-color:    #C911A6;
        --_w2-lt-color: #f264d87e;
        --_w3-color:    #2F88FF;
        --_w3-lt-color: #93C1FF33;        
        --_w4-color:    #004AAD;
        --_w4-lt-color: #2583ff63;
        
        --_txt-color:   #000000; 


        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1em 1em;
        margin-bottom: 1em;
    }   
    
.grid 
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1rem;
        margin-block: 1rem;
    }
    
.grid-item 
    {
        padding: 2rem 2rem;
        background-color: #bfd2ea;
        border-radius: 0.5rem;
        box-shadow: 2px 3px 5px #abacac;
    } 

.grid-item a
     {
        font-weight: bold;
        color: rgb(49, 49, 49);
        text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.8);
     }               
     
.grid-item a
    {
        text-decoration: none;
    }

.grid-item a:hover 
    {
        text-decoration: underline;
    }    

@media (min-width: 50rem)
    {
        .what-content
            {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto;
                
            }

        .grid 
            {                
                grid-template-columns: repeat(6, 1fr);
                grid-template-rows: repeat(3, 1fr);
                
            }
            
        .wwd1 
            {
                grid-column: 1 / span 3;
                grid-row: 1 / span 1;
            }    

        .wwd2 
            {
                grid-column: 4 / span 3;
                grid-row: 1 / span 1;
            }    

        .wwd3 
            {
                grid-column: 1 / span 4;
                grid-row: 2 / span 1;
            }
            
        .wwd4
            {
                grid-column: 5 / span 2;
                grid-row: 2 / span 1;
            }
            
        .wwd5 
            {
                grid-column: 1 / span 6;
                grid-row: 3 / span 1;
            }
            
        .wwd6 
            {
                grid-column: 1 / span 3;
                grid-row: 4 / span 1;
            }

        .wwd7 
            {
                grid-column: 4 / span 3;
                grid-row: 4 / span 1;
            }
            

    }

.what-content h2 
    {
        padding: 1em;        
        border-radius: 0rem;
        text-align: center;
        color: white;
        margin-block: 0;
    }
    
.what-one h2
    {
        background-color: var(--_w1-color);
    }

.what-one .what-detail 
    {
        border-left: var(--_w1-color) solid 5px;        
        color: var(--_txt-color);
        background-color: var(--_w1-lt-color);
    }

.what-one .what-topic 
    {
        color: var(--_txt-color);
        border-bottom: var(--_w1-lt-color) solid 1px;
    }

.what-two h2
    {
        background-color: var(--_w2-color);
    }    

.what-two .what-detail 
    {
        border-left: var(--_w2-color) solid 5px;        
        color: var(--_txt-color);
        background-color: var(--_w2-lt-color);
    }

.what-two .what-topic 
    {
        color: var(--_txt-color);
        border-bottom: var(--_w2-lt-color) solid 1px;
    }    

.what-three h2
    {        
        background-color: var(--_w3-color);
    }

.what-three .what-detail 
    {
        border-left: var(--_w3-color) solid 5px;        
        color: var(--_txt-color);
        background-color: var(--_w3-lt-color);
    }

.what-three .what-topic 
    {
        color: var(--_txt-color);
        border-bottom: var(--_w3-lt-color) solid 1px;
    }    

.what-four h2
    {        
        background-color: var(--_w4-color);
    }  

.what-four .what-detail 
    {
        border-left: var(--_w4-color) solid 5px;        
        color: var(--_txt-color);
        background-color: var(--_w4-lt-color);
    }

.what-four .what-topic 
    {
        color: var(--_txt-color);
        border-bottom: var(--_w4-lt-color) solid 1px;
    }    

.what-content-list
    {
        display: grid;
        grid-template-rows: 1fr max-content;
        
    }    

.what-topic
    {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        gap: 1em;
        padding-bottom: 0em !important;
        padding: .25em 1em;
        font-weight: 500;
    }        

.what-toggle
    {
        display: none;
    }   
    
.what-toggle:focus ~ .what-topic .open,
.what-toggle:focus ~ .what-topic .close
    {
        outline: 2px solid var(--rh-colour);
    }    

.what-toggle-label
    {
        font-size: .75em;
        font-weight: 600;
        color: #7a7a7a;
    }    

.what-detail
    {
        display: none;   
        overflow: hidden;
    }

.what-toggle:checked ~ .what-detail 
    {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;             
        font-size: .9em;
        font-weight: 600;
        padding: 1em;
    }    

.close
    {
        display: none;
    }    

.what-toggle:checked ~ .what-topic .open
    {
        display: none;
    } 

.what-toggle:checked ~ .what-topic .close
    {
        display: inline;
    }

/*=============================*/
/*        How we Work          */
/*=============================*/  

.hwwpoint
    {
        background-color: #BFD2EA;
        border-radius: 20px;
        padding: 30px 0 30px 20px;
        margin-bottom: 25px;
        box-shadow: -5px 8px 5px #a1a1a1;
    }

.hwwp
    {
        padding-left: 15px;
    }

.values
    {
        display: flex;
        flex-flow: column wrap;       
        margin-bottom: 1rem;
        gap: 1rem 1rem;
        font-family: montserrat, roboto, sans-serif;
    }

.values img
    {
        max-width: 5rem;
        min-width: 3.5rem;
    }

.value-card
    {
        border: #f1f1f1 1.5rem solid;
        width: 100%;
        flex-shrink: 1;
        flex-grow: 1;
        padding-inline: 1rem;
        border-radius: 1.5rem;
    }    

.value-card h2
    {
        font-size: 1.25rem;
    }

.value-chr
    {
        color: black;
    }

.value-content
    {
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1rem;
        padding-bottom: 1em;
        font-weight: 300;
        font-size: .8em;
    }

@media (min-width: 50rem)
    {
        .values
            {
                flex-flow: row wrap;                 
                justify-content: center;                
            }

        .value-card
            {
                width: 23.5%;
            }    

    }     

/*=============================*/
/*          Clients            */
/*=============================*/    

.client-logos
    {
        display: grid;
        grid-auto-flow: row;
        gap: 1rem;
        align-items: flex-start;
        margin-bottom: 1rem;
    }

@media (min-width: 50rem)
    {
        .client-logos
            {
                grid-auto-flow: column;
                grid-template-columns: 1fr 1fr 1fr;
            }

        .logo-column img
            {
                width: clamp(5rem, 10vw, 9rem) !important;
            } 
            
        .logo-column h2 
            {
                color: #000000 !important;
                background-image: none !important;
                background-color: transparent !important;
                clip-path: none !important;
            }
    }    


.logo-column
    {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        gap: 1rem;
        border:  #eaf2f8 1.5rem solid;
        border-radius: 1.5rem;
    } 
    
.logo-column h2
    {
        text-align: center;
        margin-top: 0;
        padding-top: 1.5rem;
        padding-bottom: 3rem;
        color: white;
        background-color: #1f618d;
        clip-path: polygon(0 0, 100% 0%, 100% 60%, 50% 100%, 0 60%);

    }    

.logo-column img
    {
        width: 28vw;
        margin-inline: auto;
    }


/*=============================*/
/*          Insights           */
/*=============================*/ 

.insights
    {
        display: grid;
        grid-template-columns: auto;
        margin-bottom: 1rem;
    }

.insights-links
    {
        display: flex;
        flex-flow: column nowrap;       
        margin-bottom: 1rem;
        gap: 1rem 1rem;
    }
    
.insights-links .article-card 
    {
        padding: 2rem 0;
        border-radius: 0;
        border: solid whitesmoke 15px;
    }  
    
.insights-links .article-card img 
    {
        max-width: 50px;
    }

.articles
    {
        display: flex;
        flex-flow: column nowrap;       
        margin-bottom: 1rem;
        gap: 1rem 1rem;
    }

.videos:empty 
    {
        display: none;
    }

.videos .article-card
    {
        margin-bottom: 1rem;
        cursor: pointer;
    }    


.video
    {
        position: relative;
    }    

.video::before
    {
        --_play-sz: 5rem;
        
        position: absolute;
        top: calc(50% - (var(--_play-sz) / 2));
        left: calc(50% - (var(--_play-sz) / 2));
        content: "\2bc8";
        color: #585858;
        background-color:#9c9c9c;
        opacity: .75;
        font-size: 3.5rem;
        width: var(--_play-sz);
        height: var(--_play-sz);
        border-radius: 20rem;
        z-index: 10;        
    } 
    
.video-player
    {
        position: fixed;
        left: 2.5%;
        top: 19%;
        width: 95%;
        background-color: rgba(0,0,0,0.8);
        padding: 1rem;
        z-index: 20;
        display: none;
    } 
    
.video-player span 
    {
        position: absolute;
        top: 0rem;
        right: 1.5rem;
        font-size: 5rem;
        color: white;
        cursor: pointer;
    }
    
.video-player video 
    {
        width: 100%;
        border-radius: 1rem;
        object-fit: cover;
    }

@media (min-width: 50rem)
    {

        .insights   
            {
                grid-template-columns: 3fr min-content;
            }

        .articles
            {
                flex-flow: row wrap; 
                justify-content: flex-start;
                align-items: stretch; 
                flex: 1 1 min-content;  
            }

        .insights-links
            {  
                margin: 0 20%;
            }  

        .videos
            {
                background-color:   #a9cce3;
                padding: 1em;
            }
            
        .video-player
            {
                width: 70%;
                left: 15%;
                padding: 8%;
            }     
    }

.article-card
    {
        --card-colour: #2061B7;

        text-align: center;
        background-color: white;
        box-shadow: #707985 2px 4px 4px;
        border-radius: 1rem;
        flex: 1 1 min-content;
    }

.article-card a 
    {
        text-decoration: none; 
    }

.article-content
    {
        display: flex;
        flex-flow: column nowrap;
        height: 100%;
        justify-content: space-between; 
    }       

.article-card:hover
    {
        transform: scale(.95);
        opacity: .5;
    }     

.article-title
    {
        color: #000000;        
        font-size: 1.5rem;
        border-radius: 0px;
        padding-inline: .5em;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
    }

.article-description
    {
        min-width: 15rem;
        font-size: 1rem;
        text-align: center;
        color: black;
        flex-grow: 1;
        flex-shrink: 1;
        padding-inline: 1em;
        padding-bottom: .5em;
    }  
    
.article-content img 
    {
        width: 100%;
        object-fit: contain;
        border-top-left-radius: .8rem;
        border-top-right-radius: .8rem;
    }



/*=============================*/
/*          Articles           */
/*=============================*/  

.thumb
		{	
            display: none;
            height: 80px;
            width: 160px; 
            grid-column-start: 3;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 2;
            border-radius: 0 0 200px 200px ;
            background-color: lightgrey;
		
		}

	#insights_content
		{
            display: grid;
            grid-template-columns: 1fr 160px 1fr;
            grid-template-rows: 0 250px max-content min-content max-content;
            grid-template-areas:
                "heading heading heading"
                "tag tag tag"
                "image image image"
                "title title title"
                "content content content";
            margin: 15px 5px;
            align-items: center;
		}	

	.article_heading
		{
            display: none;
            font-family: calibri, "century gothic", arial;
            text-align: center;
            font-weight:bold;
            padding-top: 5px;
            padding-bottom: 0px;		
            grid-area: heading;
		}

	.article_rh_tag
		{
            font-size: 2.75em;
            text-align: center;
            color: #003399;
            grid-area: tag;
		}

	.article_rh_tag p
		{
            font-size: .2em;
            font-style: italic;		
            padding-bottom: 30px;
		}

	hr
		{
            margin-left: auto;
            margin-right: auto;		
            margin-top: 30px;
            width:90%;
            background-color: #003399;
		}

	.article_image
		{
		    grid-area: image;
		}

	.article_image img
		{
            display:block;
            margin: 0 auto;
            max-width: 80%;		
            max-height: 600px;			
		}

	.article_title
		{
            grid-area: title;
            width: 90%;
            margin-left: auto;
            margin-right: auto;
		}

	.article_title h1
		{            
            width: 100%;
            text-align: center;
            font-weight:normal;
            font-size: 1.5em;
            border-bottom: 0;
		}

	.article_content
		{
            columns: 1;
            font-family: calibri, "century gothic", arial;
            text-align: justify;
            grid-area: content;
            padding-top: 1em;
		}

	.article_content p
		{
		    padding: .1em 1.5em 1em 1.5em;
		}

	.nl1
		{
            padding-left: 15px;
            padding-right: 15px;
            list-style: none;
            counter-reset: li;
            padding-bottom: 1em;
		}

	.nl1 li,	
	.bl li
		{            
            counter-increment: li;
		}

    .nl1 li
        {
            padding: 0 1.5em 0.5em 1.5em;
        }
            
    .bl li
		{
            padding: 0 1.5em 0.5em .2em;
		}

	@supports (grid-template-columns: subgrid) 
		{
  		.nl1 
			{
    			display: grid;
    			grid-template-columns: min-content 1fr;
  			}
  		.nl1 li 
			{
    			grid-column: 1 / -1;
    			display: grid;
    			grid-template-columns: subgrid;
  			}
		}

	.nl1 li::before 
		{
            content: counter(li) ".";
            margin-right: 0.2rem;
		}

	.bl
		{
            list-style-position: outside;
            list-style-type: disc;
            padding-left: 10px;
            padding-right: 10px;
            padding-bottom: 1em;
            margin-left: 2em;
		}	

	.article_content .highlight
		{
            font-style: italic;
            font-weight:bold;
		}

	.article_content .point
		{
            font-family: calibri, "century gothic", arial;
            color: #003399;
            font-weight:bold;
		}

	.article_content img:not(.inlineimg)
		{
            display: block;
            width: 90%;
            margin: auto;
            padding-top: 8px;
            padding-bottom: 8px;
            column-span: all;
		} 
	
	.article_content .imgtitle
		{
            text-align: center;
            font-weight:bold;
            column-span: all;
		}

	.article_content .inlineimg
		{
		    width: 100%;
		}

    .icon-grid
        {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr 1fr;
            gap: 1em;
            padding-inline: 2em;
        }
    
    .icon-grid img 
        {
            min-width: 50px;
        }    


@media screen and (min-width: 950px) 
	{	

		.article_rh_tag
			{
			    font-size: 6em;
			}

		.article_rh_tag p
			{
			    font-size: .15em;
			}

		.article_title h1
			{
			    font-size: 2.5em;
			    text-align: left;
			}			


		#insights_content .article_content
			{
			    columns: 2;		
			}

	}

/*=============================*/
/*       Case Studies          */
/*=============================*/  


.cs-links
    {
        display: flex;
        flex-flow: column nowrap;       
        margin-bottom: 1rem;
        gap: 1rem;

        --border-color: #e0e0e0;
    }

.cs-card
    {                   
        box-shadow: #707985 2px 4px 4px;
    }    

.cs-card h2
    {
        background-color: var(--border-color);
        padding: 1rem 2rem;
        margin-block: 0;
        font-weight: bold;  
        color: #585858;
        font-size: larger; 
    }    

.cs-topics
    {
        border: solid var(--border-color) 10px; 
        padding: 0rem 0;
    } 
    
.cs-topics a
    {
        text-decoration: none;
        display: flex;
        flex-flow: column nowrap;
        color: #585858;     
        margin: 1rem;
    }    

.cs-topics a:hover
    {
        text-decoration: underline;
    }        

.cs_link
    {
        text-transform: none;
    }                

#casestudy_content
    {
        --cs-pad: 5%;
        
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto;
        grid-template-areas:
            "title"
            "content";            
        margin-bottom: 15px;
        align-items: center;
    }

.cs_title
    {
        padding-inline:  var(--cs-pad);
    }        

@media screen and (min-width: 900px) 
	{
        #casestudy_content
		    {
                --cs-pad: 5%;
            }    
    }


.cs_content
		{
            columns: 1;
            font-family: montserrat, roboto, sans-serif;
            text-align: justify;
            grid-area: content;
            padding-top: 1em;
		}

.cs_content h3
        {
            margin: 1em 0;
            color: #004AAD;
        }        

.cs_content p
		{
		    padding: 1em;
		}

.line 
        {
            font-size: 1.75rem;
            color: #707172;
            font-weight: bold;
        }
.quote        
        {
            font-size: 1.75rem;            
            color:white;
            background-color: #608ECC;
            font-weight: bold;
            width: 100%;
            padding: 2rem var(--cs-pad);
        }

.output
    {
        background-color: #a9cce352;
        padding: 20px var(--cs-pad);
        margin-bottom: 1rem;
    }        

.outline
    {
        display: flex;
        flex-flow: column wrap;
        padding-inline: var(--cs-pad);       
        margin-bottom: 1rem;
        justify-content: space-between ;
        gap: 1rem 1rem;
    }        

.outline div
    {
        display: flex;
        flex-flow: row nowrap;
        border-radius: .75rem;              
        box-shadow: #707985 2px 4px 4px;
        max-width: 100%;
        flex-shrink: 1;
        flex-grow: 1;
    }  
    
.outlinetitle
    {
        color: white;
        background-color: #004AAD; 
        border-top-left-radius: .75rem;
        border-bottom-left-radius: .75rem;
        font-size: 1em;
        font-weight: 600;
        text-align: left;
        width: 125px;
        flex-shrink: 0;
    } 

@media screen and (min-width: 61rem) 
        {
            .outlinetitle
                {
                    font-size: 1.5em;
                    width: 27.5%;
                }    
        }
.outlinedetail ul
    {
        list-style-type: none;
        padding: .5rem 1rem;
    }
    
.outlinedetail li
    {
        padding-block: .5rem;
    }    

.issue
    {
        padding: 20px var(--cs-pad);
    } 
    
.solution
    {        
        padding: 20px var(--cs-pad);
    }

.pain 
    {
        border-collapse: collapse;
    } 
    
.pain th 
    {
        background-color: #a9cce352;
    }    

.pain th,
.pain td
    {
        border: #707985 1px solid;
        padding: .5rem 1rem;
    } 

/*=============================*/
/*           Forums            */
/*=============================*/  

.forums
    {
        display: grid;
        grid-template-columns: 10% 1fr 10%;
        grid-template-rows: auto;
        row-gap: 1rem;
        margin-bottom: 1em;
        grid-template-areas: 
            ". . ."
            ". . ."
            ". . ."
            ". . ."
            "topics topics topics"
            "list1 list1 list1"
            "list2 list2 list2"
            "summary summary summary"
            "linkedin linkedin linkedin"
            "email email email";
    }

.forums h2  
    {
        font-weight: bold;
    }    

@media screen and (min-width: 50rem) 
    {
        
        .forums
            {
                grid-template-columns: 1fr 5rem 1fr;
                grid-template-rows: repeat(5, min-content) auto;
                grid-template-areas: 
                    ". . ."
                    ". . ."
                    ". . ."
                    ". . ."
                    ". . ."
                    "topics topics topics"
                    "list1 list1 list1"
                    "summary summary summary"
                    "linkedin . email";
            }
        
        .forum-photo
            {
                max-width: 100%;
                justify-self: center;
                align-self: center;
                padding-left: 2.5rem;
                grid-row: 1 / 3;
                grid-column: 2 / 4 !important;
            }
        
        .forum-intro1
            {
                margin-right: 2rem;
                grid-row: 2 / 4;
                grid-column: 1 / 3 !important;
            }  
            
        .forum-intro2
            {
                margin-left: 2rem;
                grid-row: 3 / 5;
                grid-column: 2 / 4 !important;
            }     

        .forum-intro3
            {
                margin-right: 2rem;
                grid-row: 4 / 6;
                grid-column: 1 / 3 !important;
            } 
            
    } 

.forum-photo
    {
        width: 100%; 

        -webkit-mask-image: url(https://www.rewardheads.co.uk/images/brush-mask.png);
        -webkit-mask-size: contain;
        mask-image: url(https://www.rewardheads.co.uk/images/brush-mask.png);
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;  
        grid-column: 1 / 4;
        
    }

.forum-intro1
    {
        padding: 1.25rem 12% 1.25rem 1.25rem;        
        background-color:#E7EEF8;
        grid-column: 1 / 4;        
        clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
    }

.forum-intro2
    {
        padding: 1.25rem 1.25rem 1.25rem 12%;
        color: white;

        background-color: #2061B7;
        grid-column: 1 / 4;
        clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%, 0% 50%);
    }

.forum-intro3
    {
        padding: 1.25rem 12% 1.25rem 1.25rem; 
        background-color: #BFD2EA;
        grid-column: 1 / 4;
        clip-path: polygon(0% 0%, 90% 0, 100% 50%, 90% 100%, 0% 100%);
    }

.forum-topics
    {
        grid-area: topics;
        padding: 1em 0 0 1em;
    }    

.forum-list1
    {
        grid-area: list1;
        
    }

.forum-list2
    {
        grid-area: list2;
    }

.forum-list1,
.forum-list2
    {
        padding-top: 1em;
        padding-left: 2em;
        padding-right: 1em;
        padding-bottom: 1em;
        list-style: square outside url(../images/bullet.png);
        background-color: whitesmoke;
    }

.forum-summary
    {
        grid-area: summary;
        padding: 1em;
    }


   
/*=============================*/
/*          Coaching           */
/*=============================*/    

.coach-intro
    {
        color: white;
        font-size: 1.5rem;
        text-shadow: 2px 2px #000000;
        min-height: 20rem;
        padding-left: 1rem;
        padding-right: 50%;
        padding-top: 4em;
        padding-bottom: 1rem;
        margin-bottom: 1em;
        background-image: url(../images/coach.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

.coach-info
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 1em 1em;
    }

.coach-info-one
    {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        background-color: #bfd2ea;
        border: #cccccc solid 1px;
        padding: 3em 1em 2em 1em;           
        box-shadow: 2px 2px 3px 1px #808080; 
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }   

.coach-info-one img 
    {
        width: 5rem;
        box-shadow: 2px 2px 3px 2px #e7e7e7,
        5px 5px 3px 2px #808080;
    } 
    
.coach-info-one a
    {
        color:  #004AAD;
        font-weight: bold;
        text-decoration: none;
    } 
    
.coach-info-one a:hover,
.coach-info-one img:hover    
    {
        color:  #ffffff;
        transform: scale(1.2);
    }

.coach-info-two
    {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        position: relative;
        border: #cccccc solid 1px;
        padding: 3em 1em 1em 1em;           
        box-shadow: 2px 2px 3px 1px #808080; 
    }
    
.coach-info-two::before
    {
        --dot-size: 5rem;

        position: absolute;
        content: "";
        background-image: url(../images/icons/learn-tp-lgs.png);
        background-size: calc(var(--dot-size) / 1.25) ;
        background-position: center center;
        background-repeat: no-repeat;
        top: calc(0% - calc(var(--dot-size) / 2));
        left: calc(50% - calc(var(--dot-size) / 2));
        width: var(--dot-size);
        height: var(--dot-size);
        background-color: white;
        border: #808080 0px solid;                
        box-shadow: 2px 2px 3px 1px #808080;
        border-radius: 50rem;
    }    

.coach-info-three
    {
        flex: 1 1 auto;
        grid-column: 1 / 2;
        grid-row: 3 / 4;
        padding: 1em;
    }
 
.coach-info-three ul
    {
        padding-left: 2rem;
    }    
    
.coach-info-three li
    {
        padding-top: 5px;
        padding-bottom: 2px;
        padding-inline: 1em;
        list-style: square outside url(../images/bullet.png);        
    }    
    


    @media (min-width: 50rem)
    {
        .coach-info
            {        
                grid-template-columns: 1fr 1fr;
            }

        .coach-info-one
            {
                grid-column: 1 / 2;
                grid-row: 1 / 2;
            }       
            
        .coach-info-two
            {
                grid-column: 2 / 3;
                grid-row: 1 / 2; 
            }  
            
        .coach-info-three
            {
                grid-column: 1 / 3;
                grid-row: 2 / 3;
            }         
        
    }  

.coach-summary
    {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1em; 
        margin-block: 1em;    
    }    

.coach-summary p 
    {
        color: black;
        font-weight: 600;
        padding: 1em;   
    } 
    
.coach-summary-intro,
.coach-summary-point
    {
        background-color: #BFD2EA;
        box-shadow: 2px 2px 3px 1px #808080;    
    } 
    
.coach-summary-point
    {
        position: relative;
        border-radius: 10rem;
        display: flex;
        align-items: center;
        padding-left: 5.5rem;
        font-size: 1rem;
        min-height: 6rem;
    }    

.coach-summary-point::before
    {
        position: absolute;
        content: "\2394";
        top: 0;
        left: 0;
        height: 100%;
        aspect-ratio: 1 / 1;
        color: #bfd2ea; 
        background-color: #E7EEF8;
        font-size: 5em;
        font-weight: 800;
        z-index: 5;
        border-radius: 10rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }   

@media (min-width: 64rem)
    {    
    
    .coach-summary
            {
                grid-template-columns: 1fr 1fr !important; 
            }    
            
        .coach-summary-intro
            {
                grid-column: 1 / 3;
            }    

        .coach-summary-point
            {
                margin-inline: 1rem;
            } 

        } 
        
.btm-con-button
    {
        display: flex;
        justify-content: center;		
		
    }            



/*=============================*/
/*         Contact Us          */
/*=============================*/    

#contact h2
    {
        color: white;
        font-size: 1.25rem;        
        text-shadow: 2px 2px #000000;
        text-align: left;
        background-image: url(../images/contact.webp);
        background-position: center center;
        background-size: cover;       
        background-repeat: no-repeat; 
        height: 20rem;
        padding-top: .5em;
        padding-inline: .5em;         
    }

    

.contact-card
    {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        width: 100%;
        gap: 2rem 2rem;
        grid-template-areas: 
                "app"
                "email"
                "linkedin";
        margin-block: 1rem;  
        font-size: 1rem;   
    }

@media (min-width: 50rem)
    {
        #contact h2
            {
                font-size: 2rem;
                padding-inline: 5%;
            }

        .contact-card
            {
                grid-template-columns: 1fr 1fr;
                grid-template-areas: 
                    "app app" 
                    "email linkedin";
                font-size: 1.25rem;    
            }

        .contact-topic
            {
                font-size: 2rem !important;
            }    
    }    

.contact-email
    {
        grid-area: email;
    }    

.contact-app
    {
        grid-area: app;
    }

.contact-note
    {
        font-size: 0.75em;
    }    

.contact-phone
    {
        grid-area: phone;
    }

.contact-linkedin
    {
        grid-area: linkedin;
    }   
    
.contact-linkedin img 
    {
        width: 2rem;
        transform: translate(5px, 10px);
    }

.contact-linkedin img:hover 
    {
        transform: translate(5px, 10px) scale(1.2);
    }

.contact-email,
.contact-app,
.contact-phone,
.contact-linkedin
    {
        position: relative;
        border: #cccccc solid 1px;
        padding: 3em 1em 2em 1em;           
        box-shadow: 2px 2px 3px 1px #808080;  
    }  
    
.contact-email p,
.contact-app p,
.contact-phone p,
.contact-linkedin p
        {  
            padding-bottom: .5em;
        }      

.contact-email::before
    {
        background-image: url(../images/icons/mail-tp-lgs.png);        
    }

    .contact-app::before
    {
        background-image: url(../images/icons/app-tp-gs.png);
    }    

    .contact-phone::before
    {
        background-image: url(../images/icons/phone-tp-lgs.png);
    }

.contact-linkedin::before
    {
        background-image: url(../images/icons/l-in-logo-gs.png);
    }

.contact-email::before,
.contact-app::before,
.contact-phone::before,
.contact-linkedin::before
    {
        --dot-size: 5rem;

        position: absolute;
        content: "";
        background-size: calc(var(--dot-size) / 1.75) ;
        background-position: center center;
        background-repeat: no-repeat;
        top: calc(0% - calc(var(--dot-size) / 2));
        left: calc(50% - calc(var(--dot-size) / 2));
        width: var(--dot-size);
        height: var(--dot-size);
        background-color: white;
        border: #808080 0px solid;                
        box-shadow: 2px 2px 3px 1px #808080;
        border-radius: 50rem;
        z-index: 10;

    } 
    
.contact-topic
    {
        font-size: 1.5rem;
    }

.con-button
    {
        display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: .25em;
		margin-bottom: .5em;
    }    

.con-button a 
    {
        text-decoration:none;
		text-align: center;
		font-size: 1.25em;
		color: #606060;
		font-weight:bold;
		border: 1px solid #8F9092;
		border-radius: 1.5rem;
		min-width: 10%;
		padding: .5em 1em;
		background-image: linear-gradient(#FDFDFD 0%, #fff 60%, #D8D9DB 100%);
		box-shadow: 
			
			0 4px 3px 1px #FCFCFC,
			0 6px 8px #D6D7D9,
			0 -4px 4px #CECFD1,		
			inset 0 0 3px 0 #CECFD1;
    }

.con-button a:hover 
    {
        box-shadow:
			0 4px 3px 1px #FCFCFC,
			0 6px 8px #D6D7D9,
			0 -4px 4px #CECFD1,
			inset 0 0 3px 3px #CECFD1;
		transform: scale(.975);
    }
 

/*=============================*/
/*         List Styles         */
/*=============================*/    

.list-nest
    {
        counter-reset: line-number;
    }

.number-list
    {
        padding-left: 0px;
        padding-right: 0px;
        
        counter-reset: line-letter;
    }

.letter-list
    {
        padding-left: 25px;
        padding-right: 15px;
        list-style-type: lower-alpha;
    }    

.number-list li
    {        
        padding: 0 .75em 0 .75em;
    }

@supports (grid-template-columns: subgrid) 
    {
      .number-list
        {
            display: grid;
            width: 100%;
            grid-template-columns: min-content 1fr;
            grid-template-rows: auto;
        }
        
      
      .number-list li,
      .letter-list 
        {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: subgrid;
        }
    }

.number-list li::before 
    {
        counter-increment: line-number;
        content: counter(line-number) ".";
        margin-right: 0.5rem;
    }

.letter-list li::before 
    {
        counter-increment: line-letter;
        content: counter(line-letter, lower-alpha) ".";
        margin-right: 0.5rem;
        
    }
	


/*=======================+=====*/
/*           Footer            */
/*=============================*/    
    
.legal
    {
        display: flex;
        flex-flow: row nowrap;
        gap: 0px;
        padding-top: 10px;
        justify-content: center;
    }


.legal li,
.legal a
    {
        font-size: .9rem;
        list-style: none;
        text-decoration: none;
        color: white;
        line-height: 1.2;        
    }

.legal a
    {        
        padding-inline: 15px; 
        border-right: white solid 1px;
    }    

#last
    {
        border-right: none;
    }    

.credits
    {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        gap: 10px;
        padding-block: 10px;
    }    
    
.credits img
    {
        height: 132px;
        border: none;
    }  
    
.credits iframe
    {
        height: 132px;
        width: 132px;
        border: none;
    }   
    
.co-num
    {
        text-align: center;
        font-size: 0.75em;
        padding-bottom: 30px;
    } 
    
@media screen and (max-width: 750px) 
 
    {
        .co-num span
            {
                display: none;
            }

        .legal
            {
                flex-flow: column nowrap;
            }
            
        .legal a    
            {
                border-right: none;
            }  
            
        .credits img 
            {
                max-height: 100px !important;
            }    
    }    



/*=======================+=====*/
/*              404            */
/*=============================*/ 


.error 
    {
        text-align: center;
        font-size: 2rem;
        margin-inline: 15%;
        padding-top: 2rem;
        min-height: 500px;
        max-width: 65%;
        background-image: url(../images/404_logo.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }