/*  
    ============================================================
        STANDARD ELEMENTS
    ============================================================
*/


body    {
          font-family: "Roboto", sans-serif;
          margin: 0;
          max-width:1920px;
        }


p   {
        line-height: 1.5;
    }

main    {
            margin: 0 auto;
            width:85%;
        }

a   {
      text-decoration: none;
      color: black;
    }

a:hover     {
                text-decoration: underline;
            }

img         {
                max-width:100%;
            }

ul          {
                list-style: none;
            }

/*  
    ============================================================
        SOCIAL MEDIA TYPE LINKS and hover over colours
    ============================================================
*/


ul li:hover a .fa-youtube       {
                                    color: red;
                                }

ul li:hover a .fa-facebook      {
                                    color: #3b5998;
                                }

ul li:hover a .fa-twitter       {
                                    color: #3b5998;
                                } 


/*  
    ============================================================
        Link Classes
    ============================================================
*/

.textlink			{
						text-decoration:underline;
					}

.textlink:hover		{
						text-decoration:none;
					}


/*  
    ============================================================
        Generic Classes
    ============================================================
*/

.bigscreenonly			{
						
					    } /* Allows for html code (e.g. line break) to happen in largest screen size but will be surpressed with display none for all smaller screens

/*  
    ============================================================
        NAVIGATION BAR
    ============================================================
*/


nav {
  height: 72px;
  background: #202125;
  width: 100%;
  max-width:1920px;
  margin: 0;
  position: fixed;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  padding: 0 16px 0 0;
  box-sizing: border-box;
  z-index: 100;
}

nav a {
  padding: 0 32px;
  color: #eee;
  transition: 0.4s;
}

nav a:hover {
  text-decoration: none;
  color: red;
}

nav ul {
  display: flex;
  list-style: none;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  margin: 0;
}

#logo-img {
  display: flex;
  height: 100%;
  background: #111;
  padding: 0 32px;
  align-items: center;
  color: white;
  transition: 0.4s;
}

#logo-img img {
  height: 72px;
}

#logo-img:hover {
  background: black;
}

#menu-icon {
  height: 100%;
  font-size: 28px;
  padding: 0 4px;
  color: #eee;
  display: none;
  align-items: center;
}

#slideout-menu {
  display: none;
  background: #2d3436;
  z-index: 100;
  position: fixed;
  transition: 0.4s;
  margin-top: 72px;
  width: 100%;
  text-align: center;
  opacity:0;
  pointer-events:none;
}

#slideout-menu ul {
  list-style: none;
  padding: 0 32px;
}

#slideout-menu ul li {
  padding: 8px;
}

#slideout-menu a {
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  color: white;
}

#slideout-menu input {
  width: 85%;
  padding: 8px;
  font-family: "Roboto Condensed", sans-serif;
  font-size: 20px;
  text-align: center;
}


/*
    ============================================================
        Section Headings
    =============================================================
*/

/*  Section heading 1 -> Used for the 1st section heading under the nav Bar */

.section-heading        {
                              font-size:32px;
                              font-family:'Roboto Condensed', sans-serif;
                              border-left:3px solid black;
                              border-right:3px solid black;
                              transition: all 0.4s;
                              display:inline-block;
                              padding:4px 32px;
                              margin-top: 120px;
                        }

.section-heading:hover  {
                                border-top:3px solid black;
                                border-bottom:3px solid black;
                                color:white;
                                background-color:black;
                        }

/*  Section heading 2 -> Used for sections after the 1st one - has a lower margin-top to take into account no nav bar above to worry about  */

.section-heading2        {
                              font-size:32px;
                              font-family:'Roboto Condensed', sans-serif;
                              border-left:3px solid black;
                              border-right:3px solid black;
                              transition: all 0.4s;
                              display:inline-block;
                              padding:4px 32px;
                              margin-top: 30px;
                        }

.section-heading2:hover  {
                                border-top:3px solid black;
                                border-bottom:3px solid black;
                                color:white;
                                background-color:black;
                        }

/*
    ============================================================
        Sections (including articles and Asides)
    =============================================================
*/


/*  Section 1 -> Image and narrative (LHS Article) with sidebar (RHS Aside) */

#section1-container         {
                                display:flex;
                                flex-direction:row;
                            }

#section1-article           {                
                                flex:1; 
                                flex-basis:55%;  
                                border-left:1px solid #999;
                                border-right:1px solid #999;
                                border-bottom:1px solid #999;
                            }

#section1-article img       {
                                width:100%;
                                max-height:800px;
}

#section1-description       {
                                padding: 0 8px;
                            }

#section1-sidebar           {                 
                                  flex:2;      
                                  background:#333;
                                  padding: 8px 16px;
                                  color:white;
                            }

#section1-sidebar-topcontainer {
                                    border-bottom:1px solid red;
                                }

#section1-sidebar-topcontainer p {
                                    font-size:14px;
                                    line-height: 1.2;
                                }

#section1-sidebar-topcontainer ul   {
                                  
                                  list-style: none;
                                  justify-content: center;
                                  padding: 0;
                                }

#section1-sidebar-topcontainer ul li {
                                      display: inline-block;
                                      font-size: 20px;
                                      padding: 16px;
                                 }

#section1-sidebar-toplinkcontainer {
                                        margin-top:10px;
                                        margin-bottom:20px;
                                        padding-bottom:30px;
                                        border-bottom:1px solid red;

                                    ;}




#section1-sidebar-container         {   margin-top:10px;
                                        margin-bottom:20px;
                                        padding-bottom:30px;
                                        border-bottom:1px solid red;
                                     }

#section1-sidebar-headercontainer {
                                    
                                    vertical-align:center;
                                   }

#section1-sidebar-headercontainer h3    {
                                            display:inline; 
                                            margin-left:10%;
                                            vertical-align:bottom;
                                        }

#section1-sidebar ul                    {
                                            font-size:14px;
                                            justify-content: left;
                                            padding:0px;

                                        }

#section1-sidebar a             {
                                    text-decoration: underline; 
                                    color:white;
                                }

#section1-sidebar a:hover       {
                                     text-decoration:none;
                                     color:red;
                                }

#section1-sidebar-toplinkcontainer a    {
                                                display:inline; 
                                                color:white;
                                                margin-top:5px;
                                                font-size:14px;
                                                border:1px solid white;
                                                border-radius: 10px;
                                                padding:5px;
                                                text-decoration: none;

                                        ;}

#section1-sidebar-toplinkcontainer a:hover    {
                                                color:red;
                                                background-color:#111;
                                                border:1px solid red;
                                            ;}

#section1-sidebar-botlinkcontainer a        {
                                                display:inline; 
                                                color:white;
                                                margin-top:5px;
                                                font-size:14px;
                                                border:1px solid white;
                                                border-radius: 10px;
                                                padding:5px;
                                                text-decoration: none;
                                            }  

#section1-sidebar-botlinkcontainer a:hover  {
                                                color:red;
                                                background-color:#111;
                                                border:1px solid red;
                                            
                                            } 

/*  Section 2 -> A CSS Grid repeating the same information across rows\columns and will automatically adjust the content to fit the screen size */

#section2-container		    {

                                border-bottom:1px solid #999;

			                }

#section2-linkseries              {                                                                     					            display:grid;
					            grid-gap:10px;
					            grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
                                justify-content: start;
                                justify-items: start;
                                padding-bottom:16px;
                                text-align: center;
                                    }

#section2-linkseries a            {                                                                     					            
                                        text-decoration:none;
                                     }

#section2-linkseries a:hover            {                                                                     					            
                                        text-decoration:underline;
                                     }

#section2-imagetext             {
                                    max-width:185px;
                                    padding:5px;
                                    background-color:#DCDCDC;
                                }

#section2-imagetextfill             {
                                        display:none;
                                    }

#section2-imagetext  img       {
                                width:175px;
                                height:200px;                              
                                }

.section2-par                   {
                                line-height: 1.5; 
                                white-space:nowrap; overflow:hidden; display:block;
                                font-size: 14px;
                                text-overflow: ellipsis;
                                }



#section2-finallink             {
                                                                  margin-top:10px;
                                                                    margin-bottom:25px;
                                                                   
                                }

#section2-finallink   a        {
                                                display:inline; 
                                                color:black;

                                                font-size:15px;
                                                border:1px solid black;
                                                border-radius: 10px;
                                                padding-top:10px;
                                                padding-bottom:10px;
                                                                                                padding-left:30px;
                                                                                                padding-right:30px;
                                                text-decoration: none;
                                                background-color:white;
                                            }  

#section2-finallink   a:hover  {
                                                color:white;
                                                background-color:black;
                                            
                                            } 


#section2-item              {
                                padding:0px;
                                background:#DCDCDC;
                                color:white;
                                border:3px solid #DCDCDC;
                                border-radius:25px;
                                margin-bottom:10px;
                                width:50%;
                            }

#section2-linkoverflow          {
                                    text-align: center;
                                    background-color:#DCDCDC;
                                    color:#333;
                                    max-height:100px;
                                    overflow:auto;
                                                                        margin-top:5px;
                                                                        margin-bottom:5px;
                                                                        margin-right:5px;
                                                                        
                                }


#section2-linkoverflow ul {width: 80%;
    margin: auto;}

#section2-linkoverflow li {border:1px solid black;
margin-bottom:5px;border-radius:10px;background:white;color:black;padding-top:5px;padding-bottom:5px;}

#section2-linkoverflow li:hover {border:1px solid #111;color:white;text-decoration:underline;background-color:#111;}


/*  Section 3 -> A CSS Grid with a fixed number of identical columns - used for the bottom links section   */

#section3-container		    {
					            display:grid;
                                grid-gap:10px;
					            grid-template-columns: repeat(auto-fit,minmax(275px, 1fr));
                                grid-template-rows:auto;
                                margin-top:16px;
                               margin-bottom:16px;
                                padding-bottom:20px;
                                text-align: center;
                                border-bottom:1px solid #999;




				            }

#section3-item              {
                                padding:0px;
                                background:#333;
                                color:white;
                                border:3px solid #333;
                                                                border-radius:50px;
                            }

#section3-item h4             {
                                padding:0px;
                                font-size:26px;
                                text-decoration:bold; 
                                margin-bottom:10px;
                                                                        
                                }

#section3-linkoverflow          {
                                    text-align: center;
                                    background-color:#333;
                                    color:#333;
                                    max-height:300px;
                                    overflow:auto;
                                                                        margin-top:20px;
                                                                        margin-bottom:40px;
                                                                        margin-right:20px;
                                                                        border:1px solid #333;
                                }


#section3-linkoverflow ul {width: 80%;
    margin: auto;}

#section3-linkoverflow li {border:1px solid white;
margin-bottom:5px;border-radius:10px;background:#333;color:white;padding-top:5px;padding-bottom:5px;}

#section3-linkoverflow li:hover {border:1px solid red;color:red;text-decoration:underline;background-color:#111;}



/*  Section 4 ->    Image and narrative (LHS Article) with sidebar (RHS Aside) - Very similar to Section 1 but some amendments were necessary so could not just re-use all the section 1 CSS
                    Decided to just give section4 its own copy of all the css which is not ideal really from a programming perspective but a clean solution
*/

#section4-container         {
                                display:flex;
                                flex-direction:row;
                                margin-bottom:10px;
                                padding:20px;
                                border:1px solid #333;
                                border-radius: 20px;
                                background-color:#666A6D;
                            }

#section4-article           {                
                                flex:1; 
                                flex-basis:65%;  
                                border-left:1px solid #999;
                                border-right:1px solid #999;
                                border-bottom:1px solid #999;
                                background-color:white;
                            }

#section4-article img       {
                                width:100%;
                                max-height:800px;
}

#section4-image			{
								  position: relative;
								  width: 100%;
								 padding-bottom: 56.25%;
								  height: 0;
							}

#section4-image iframe	{
							  position: absolute;
							  top:0;
							  left: 0;
							  width: 100%;
							  height: 100%;
							}

#section4-image img	{
							  position: absolute;
							  top:0;
							  left: 0;
							  width: 100%;
							  height: 100%;
							}

#section4-description       {
                                padding: 0 8px;
                            }

#section4-sidebar           {                 
                                  flex:2;      
                                  background:#333;
                                  padding: 8px 16px;
                                  color:white;
                            }

#section4-sidebar-topcontainer {
                                     border-bottom:1px solid red;
                                }

#section4-sidebar-topcontainer p {
                                    font-size:14px;
                                    line-height: 1.2;
                                }

#section4-sidebar-topcontainer ul   {
                                  
                                  list-style: none;
                                  justify-content: center;
                                  padding: 0;
                                }

#section4-sidebar-topcontainer ul li {
                                      display: list-item;
                                      font-size: 16px;
                                      padding: 8px;
                                 }

#section4-sidebar-topcontainer img {
                                      width:150px;
                                      height:150px;
                                 }

#section4-sidebar-toplinkcontainer {
                                        margin-top:10px;
                                        margin-bottom:20px;
                                        padding-bottom:30px;
                                        border-bottom:1px solid red;
                                    ;}

#section4-sidebar-toplinkcontainer2 {
                                        margin-top:10px;
                                        margin-bottom:20px;
                                        padding-bottom:30px;
                                        border-bottom:1px solid red;
                                    ;}


#section4-sidebar-container         {   margin-top:10px;
                                        margin-bottom:20px;
                                        padding-bottom:30px;
                                        border-bottom:1px solid red;
                                     }

#section4-sidebar-headercontainer {
                                    
                                    vertical-align:center;
                                   }

#section4-sidebar-headercontainer h3    {
                                            display:inline; 
                                            margin-left:10%;
                                            vertical-align:bottom;
                                        }

#section4-sidebar ul                    {
                                            font-size:14px;
                                            justify-content: left;
                                            padding:0px;

                                        }

#section4-sidebar a             {
                                    text-decoration: underline; 
                                    color:white;
                                }

#section4-sidebar a:hover       {
                                     text-decoration:none;
                                     color:red;
                                }

#section4-sidebar-toplinkcontainer a    {
                                                display:inline; 
                                                color:white;
                                                margin-top:5px;
                                                font-size:14px;
                                                border:1px solid white;
                                                border-radius: 10px;
                                                padding:5px;
                                                text-decoration: none;
                                                white-space: nowrap; 

                                        ;}

#section4-sidebar-toplinkcontainer a:hover    {
                                                color:red;
                                                background-color:#111;
                                                border:1px solid red;
                                            ;}



#section4-sidebar-botlinkcontainer a        {
                                                display:inline; 
                                                color:white;
                                                margin-top:5px;
                                                font-size:14px;
                                                border:1px solid white;
                                                border-radius: 10px;
                                                padding:5px;
                                                text-decoration: none;
                                            }  

#section4-sidebar-botlinkcontainer a:hover  {
                                                color:red;
                                                background-color:#111;
                                                border:1px solid red;
                                            
                                            } 


/*
    ============================================================
        Section 5 Specific CSS
    =============================================================

    Section 5 re uses alot of the Section 4 css but there are some additional elements as below:

*/


.vidurltree         {
                         margin-top:0px;   
                         margin-bottom:10px; 
                    }


#section5-filtervidlinks        {
                                                border:1px dashed #333;
                                                border-radius: 20px;
                                                margin-top:20px;
                                                margin-bottom:20px; 
                                                padding-top:20px;
                                                padding-bottom:30px;
                                                padding-left:20px;
                                                padding-right:20px;
                                                background-color:#DCDCDC;
                                }

#section5-filtervidlinks h3        {
                                                margin-top:0px;
                                                margin-bottom:20px;

                                            }  

#section5-filtervidlinks a        {
                                                display:inline; 
                                                color:#333;
                                                font-size:14px;
                                                border:1px solid #333;
                                                border-radius: 10px;
                                                margin-right:20px;
                                                padding-top:5px;
                                                padding-bottom:5px;
                                                padding-left:20px;
                                                padding-right:20px;
                                                text-decoration: none;
                                                
                                            }  

#section5-filtervidlinks a:hover  {
                                                color:white;
                                                background-color:#111;
                                                border:1px solid white;
                                            
                                            } 

.section5-par                   {
                                line-height: 1.5; 
                                display:block;
                                font-size: 12px;

                                }

.tablevidlinks		{
						width:25%;
						margin-top:0px;
                        margin-bottom:10px;
					}


.tablevidlinks tr	{
						border-top:5px solid;
						border-bottom:5px solid;
						border-left:5px solid;
						border-right:5px solid;
						background-color:grey;
					}

.tablevidlinks td	{
						text-align:center;
					}


.texttd					{
							background-color:#A8A8A8;
							font-weight:bold;
						}

#section5-sidebar-botlinkcontainer {
                                        padding-bottom: 30px;
                                        border-bottom:1px solid red;
                                    }

#section5-sidebar-botlinkcontainer h3        {
                                                margin-bottom:30px;
                                            } 

#section5-sidebar-botlinkcontainer a        {
                                                display:inline; 
                                                color:white;
                                                font-size:14px;
                                                border:1px solid white;
                                                border-radius: 10px;
                                                padding:10px;
                                                text-decoration: none;
                                            }  

#section5-sidebar-botlinkcontainer a:hover  {
                                                color:red;
                                                background-color:#111;
                                                border:1px solid red;
                                            
                                            } 




/*
    ============================================================
      BOOKMARKS -  Blank Headings for bookmarks
    =============================================================
    */




#bv1                                  {
                                               height:0px; 
                                               padding:0px;
                                               margin:0px;
                                            } 

#bv2                                  {
                                               height:0px; 
                                               padding:0px;
                                               margin:0px;
                                            } 

#bv3                                  {
                                               height:0px; 
                                               padding:0px;
                                               margin:0px;
                                            } 

#vd                                  {
                                               height:0px; 
                                               padding:0px;
                                               margin:0px;
                                            } 


/*
    ============================================================
        Video IFrame Container CSS
    =============================================================
*/


.iframe-container			{
								  position: relative;
								  width: 100%;
								 padding-bottom: 56.25%;
								  height: 0;
							}


/*
    ============================================================
        Footer
    =============================================================
*/

footer  {
          background: black;
          color: #eee;
        }

footer a    {
                color: white;
            }


footer #footer-container    {
                                width:90%;
                                margin: 0 auto;
                                display: flex;
                                flex-direction: row;
                            }

footer #footer-left {
                      flex: 1;
                      border-right: 1px solid red;
                      text-align: left;
                    }

footer #footer-right {
                      flex: 2;
                      padding: 8px;
                      text-align: center;
                     }

footer #footer-left ul {
                          padding: 0;
                          list-style: none;
                          line-height: 1.5;
                       }

footer #footer-socialmedia ul   {
                                  display: flex;
                                  list-style: none;
                                  justify-content: center;
                                  padding: 0;
                                }

footer #footer-socialmedia ul li {
                                      font-size: 48px;
                                      padding: 16px;
                                 }


/*
    ============================================================
        Generated Logo Functionality
    =============================================================
*/

#genlogo    {
                background: #111;
                width:200px;
                height:250px;
                text-align:center;
            }

#genlogo-top    {

                    height:50%;

                }

#genlogo-top img   {
                        padding-top:10%;
                        padding-bottom:10%;
                        width:60%;
                        height:80%;
                    }



#genlogo-bottom {
                    padding-top:10%;
                   height:50%;

                }

#genlogo-bottom p   {
                        margin: 0;
                        font-size:25px;
                        color: white;
                    }



/*
    ============================================================
        Media Queries
    =============================================================
*/

  /*  max-width: 1440px */

  @media (max-width: 1440px) {
  
   #section4-article           {                
                                flex-basis:55%;  
                            } 

  }


  /*  max-width: 1366px */

  @media (max-width: 1366px) {
  
    main    {
            width:95%;
        }


nav ul      {
                font-size:18px;
            }

.tablevidlinks			{
								width:33%;
							}



#section5-filtervidlinks a        {
                                                display:block;
                                                margin-bottom:5px;
                                                max-width:33%;
                                }

.bigscreenonly			{
						    display:none;
					    }

  }

  /*  max-width: 1024px */

  @media (max-width: 1024px) 
  
  {
        nav ul      {
                        font-size:15px;
                    }

        #section4-container       {
                            display:flex;
                            flex-direction:column;
                            text-align:center;

                        }


#section4-sidebar-topcontainer p {
                                    font-size:16px;
                                    line-height: 1.5;
                                }

#section4-sidebar-container     {
                                    display:none;                                    
                                }

  }
  
  /*  max-width: 900px */

  @media (max-width: 900px) {
  
  body      {
                
                text-align:center;
                
            }
  
  nav ul    {
                display: none;
            }

  
  #menu-icon    {
                    display: flex;
                }

  #slideout-menu    {
                        display: block;
                    }


#section1-container       {
                            display:flex;
                            flex-direction:column;

                        }


 #section1-sidebar-topcontainer {
                                    border-bottom:none;
                                }

#section1-sidebar-topcontainer p {
                                    font-size:16px;
                                    line-height: 1.5;
                                }

#section1-sidebar-container     {
                                    display:none;                                    
                                }

#section2-item              {

                                width:100%;
                            }

#section2-linkoverflow          {

                                    max-height:150px;

                                                                        
                                }





.tablevidlinks			{
								width:50%;
							}

#section5-filtervidlinks a        {
                                                margin:auto;
                                                margin-bottom:5px;
                                                width:50%;
                                                max-width:50%;
                                }



}







  /*  max-width: 768px */

@media (max-width: 768px)   {
                                  


#section1-container     {
                            display:flex;
                            flex-direction:column;

                        }

#section1-article       {                
                            flex-basis:100%; 
                        }



footer #footer-container    {
                                width:100%;
                                flex-direction: column;
                                text-align: center;
                            }

footer #footer-left         {
                                flex: 1;
                                border-right: 0;
                                border-bottom: 1px solid red;
                                padding-left: 0;
                                text-align: center;
                            }


.tablevidlinks			{
								width:75%;
							}

#section5-filtervidlinks a        {
                                                width:75%;
                                                max-width:75%;
                                }

}


  /*  max-width: 480px */

@media (max-width: 480px)   {
                                  


.tablevidlinks			{
								width:100%;
							}

#section2-linkseries              {                                                                     					            display:grid;
					                    grid-gap:10px;
					                    grid-template-columns: repeat(auto-fit,minmax(145px,1fr));
                                    }

#section2-imagetext             {
                                    max-width:150px;
                                    padding-bottom:5px;
                                }


}