/*---------------------------------------------------------------------------*\
    Typography
\*---------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------*\
		Font Size
	\*---------------------------------------------------------------------------*/
		/*---------------------------------------------------------------------------*\
			Font Size - Root
		\*---------------------------------------------------------------------------*/
			/*Set up Responsive Root font sizes*/
			/* Older browsers */
			html { 
				font-size: 15px; 
			}
				
			/*Make sure body is not overwriting html root font size*/
			body { 
				font-size: 1em; 
			}
			
		/*---------------------------------------------------------------------------*\
			Font Size - Mobile
		\*---------------------------------------------------------------------------*/
			h1{
				font-size: 1.602rem;
			}
					
			h2{
				font-size: 2.5rem;
			}		
			
			h3{
				font-size: 1.266rem;
			}		
			
			h4{
				font-size: 1.125rem;
			}
					
			li,
			p,
			.button{
				font-size: 1rem;
			}
								
			li,
			p,
			.button{
				font-size: 1rem;
			}
		
			a, 
			span,
			i{
				font-size: inherit;
			}
				
			.small{
				font-size: 0.8rem
			}
					
			/*---------------------------------------------------------------------------*\
				Font Size - Mobile - Special sizes
			\*---------------------------------------------------------------------------*/					
				/* Title Area - e.q. of a H4 */
				.title-area h1{
					font-size: 1.125rem;
				}

					
		/*---------------------------------------------------------------------------*\
			Font Size - Tablets/Laptops
		\*---------------------------------------------------------------------------*/
				
			@media(min-width:767px)
			{
				
				h1{
					font-size: 4.574rem;
				}
					
				h2{
					font-size: 2.728rem;
				}
			
				h3{
					font-size: 1.44rem;
				}
			
				h4{
					font-size: 1.2rem;
				}
					

				p{
					font-size: 1rem;
				}
					
				li,
				.button{
					font-size: 1rem;
				}				
				
				a, 
				span,
				i{
					font-size: inherit;
				}
				
				.small{
					font-size: 0.833rem;
				}
					
				/*---------------------------------------------------------------------------*\
					Font Size - Tablets/Laptops - Special Sizes
				\*---------------------------------------------------------------------------*/
					
					/* Title Area -e.q. of a H4 */
					.title-area h1{
						font-size: 1.2rem;
					}
					
					header .mobile-nav ul.main-menu > li > a{
						font-size: 1.8rem;
					}

			}
			
		/*---------------------------------------------------------------------------*\
			Font Size - Desktop
		\*---------------------------------------------------------------------------*/
				
			@media(min-width:1170px)
			{
				
				h1{
					font-size: 6rem;
				}
					
				h2{
					font-size: 3rem;
				}
				
				h2.homepage-title{
					font-size: 3.2rem;
				}

				h2.consumer-title{
					font-size: 2.3rem;
				}
			
				h3{
					font-size: 1.9rem;
				}
				
				h3.homepage-title{
					font-size: 2.9rem;
				}				
				
			
				h4{
					font-size: 1.25rem;
				}
					
				p{
					font-size: 1rem;
				}
					
				li,
				.button{
					font-size: 1rem;
				}
				
				a, 
				span,
				i{
					font-size: inherit;
				}
					
				.small{
					font-size: 0.8rem;
				}
					
					
				/*---------------------------------------------------------------------------*\
					Font Size - Desktop - Special Sizes
				\*---------------------------------------------------------------------------*/
					.title-area h1{
						font-size: 1.25rem;
					}
					
					header .mobile-nav ul li a{
						font-size: 1.6rem;
					}
			}
				
		/*---------------------------------------------------------------------------*\
			Margin Spacing
		\*---------------------------------------------------------------------------*/
			h1,
			h2{
				margin:20px 0;
			}
            
			h3,
			h4{
				margin:15px 0;
			}
			
			h5,
			p,
			blockquote{
				margin:10px 0;
			}
			
			h1:first-child,
			h2:first-child,
			h3:first-child,
			h4:first-child{
				margin-top: 0;
			}
			
			h1:last-child,
			h2:last-child,
			h3:last-child,
			h4:last-child{
				margin-bottom: 0;
			}
			
			h5:first-child,
			p:first-child,
			blockquote:first-child{
				margin-top: 0;
			}
			
			h5:last-child,
			p:last-child,
			blockquote:last-child{
				margin-bottom: 0;
			}
		
		/*---------------------------------------------------------------------------*\
			Font Color
		\*---------------------------------------------------------------------------*/
			h1{
				color:#333;
                color: var(--title-colour);
			}
					
			h2{
				color:#333;
                color: var(--title-colour);
			}
			
			h3{
				color: #333;
                color: var(--subtitle-colour);
			}
			
			h4{
				color: #333;
                color: var(--body-colour);
			}
			
			h5{
				color: #333;
                color: var(--body-colour);
			}

			p,
            label,
			div,
            li{
				color: #333;
                color: var(--body-colour);
			}

            a{
                color: var(--link-colour);
            }			
					
			a.inherit,
			i{
				color: inherit;
			}
			
			
			/*---------------------------------------------------------------------------*\
				Font Color - Light
			\*---------------------------------------------------------------------------*/	
				.light h1,
				.light h2,
                h1.light,
				h2.light{
					color:#ffffff;
                    color: var(--light-title-colour);
				}
			
				.light h3,
                h3.light{
					color:#ffffff; 
                    color: var(--light-subtitle-colour);
				}

				.light h4,
				.light h5,
				.light p,
				.light li,
				.light label,
				.light div,
				h4.light,
				h5.light ,
				p.light ,
				li.light ,
				label.light ,
				div.light div{
					color:#ffffff;
                    color: var(--light-body-colour);
				}

                .light a,
                a.light{
                    color:#ffffff;
                    color: var(--light-link-colour);
                }
				
		
		/*---------------------------------------------------------------------------*\
			Font Family
		\*---------------------------------------------------------------------------*/
			h1, 	
			h2{
				font-family: 'Open Sans', sans-serif;
                font-family: var(--title-font);
			}

            h3{
                font-family: 'Open Sans', sans-serif;
                font-family: var(--subtitle-font);
            }
			
			h4, 
			p,
			ul,
			li,
            div{

				font-family: 'Open Sans', sans-serif;
                font-family: var(--body-font);				
			}
			
			a, 
			span{
				font-family: inherit;
			}

		/*---------------------------------------------------------------------------*\
			Line Hieght
		\*---------------------------------------------------------------------------*/
			p{
				line-height: 1.7;
			}


		/*---------------------------------------------------------------------------*\
			Font Weights
		\*---------------------------------------------------------------------------*/
			h1 {
				font-weight: 200;
			}
			 	
			h2 {
				font-weight: 200;
			}

			h3{
				font-weight: 600;
			}
			
			h4, 
			p{
				font-weight: 400;
			}
			
			a, 
			span{
				font-weight: 400;
			}
		
		/*---------------------------------------------------------------------------*\
			Links
		\*---------------------------------------------------------------------------*/
			a{
				text-decoration:none;
				font-weight: inherit;
				transition: 0.4s;
			}
			
			a:hover{
				text-decoration:none;
				outline:none;
				cursor: pointer;
			}

            a.underline{
                text-decoration: underline;
            }

		/*---------------------------------------------------------------------------*\
			Lists
		\*---------------------------------------------------------------------------*/
			ul{
				margin: 30px 0;
				padding: 0;
				list-style-position: inside;
			}

			ul li{
				margin-bottom: 10px;
			}