/* ---------------------------------------------------------------------------------------------------------------------------
START OF NAVIGATION MENU
--------------------------------------------------------------------------------------------------------------------------- */
.header a {
color: #000;
} /* Sets colour of the links within the navigation bar */
.header {
background-color: #fff;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.1);
position: static;
overflow: hidden;
width: 100%;
z-index: 3;
} /* Sets colour, adds box shadow underneath nav, makes nav static and sets positioning */
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
padding: 10px 0px;
} /* Sets positioning and background colour of the nav links */
.header li a {
display: block;
padding: 20px 20px;
border-right: 1px solid #b3b2b2;
text-decoration: none;
text-transform: uppercase;
} /* Sets positioning, adds border line, and removes any text decoration */
.header li a {
background-image: linear-gradient(currentColor, currentColor);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px;
transition: background-size .3s;
} /* Sets positioning, adds border line, and removes any text decoration */
.header li a:hover,
.header .menu-btn:hover,
.header li a:focus {
background-color: #f8f7f7;
background-size: 100% 2px;
} /* Sets background colour of nav links when you hover over them */
.header .logo {
display: block;
float: left;
font-size: 3em;
padding: 10px 0px;
text-decoration: none;
margin-left:15%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .25s ease-out;
margin-right: 15%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
cursor: pointer;
display: inline-block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
margin-right: 5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
.header .menu-icon .navicon:before {
top: 5px;
} /* Sets positioning of the third part of the hamburger menu */
.header .menu-icon .navicon:after {
top: -5px;
} /* Sets positioning of the first part of the hamburger menu */
.header .menu-btn {
display: none;
} /* Prevents small additional hamburger button from appearing on the screen */
.header .menu-btn:checked ~ .menu {
max-height: 500px;
} /* Sets the maximum height that the hamburger menu can reach while opened */
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
} /* Prevents middle part of the hamburger menu displaying through the cross while the hamburger menu is open */
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
} /* Sets positioning of one part of the hamburger menu icon create a cross */
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
} /* Sets positioning of one part of the hamburger menu icon create a cross */
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
} /* Sets positioning of the hamburger icon when closed and opened */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 104em = 1668px */
@media only screen and (max-width: 1668px) {
.header .logo {
font-size: 3.2em;
margin-left: 5%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
transition: max-height .3s ease-out;
margin-right: 5%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
padding: 38px 10px;
margin-right: 2.5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
width: 22px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 104em = 1668px */
@media only screen and (max-width: 1310px) {
.header .logo {
font-size: 3.2em;
margin-left: 5%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
margin-right: 5%;
margin-left: 5%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
padding: 38px 0px;
margin-right: 5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
width: 22px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 104em = 1668px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 1471em = 1471px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 92em = 1471px */
@media (min-width: 1310px) {
.header li {
float: left;
} /* Sets floating position of the nav links */
.header li a {
padding: 20px 25px;
} /* Sets padding to the nav links */
.header .menu {
clear: none;
float: right;
max-height: none;
} /* Sets positioning of nav links and sets float */
.header .menu-icon {
display: none;
} /* Stops the hamburger menu icon from appearing when in other views outwith mobile view */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 48em = 768px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF 36em = 577px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* 36em = 577px */
@media only screen and (max-width: 577px) {
.header .logo {
font-size: 3.2em;
margin-left:2.5%;
} /* Sets positioning, removes any text decoration, sets font-size */
.header .menu {
transition: max-height .3s ease-out;
margin-right: 2.5%;
} /* Sets positioning, of nav bar and sets transition speed when opening hamburger menu icon */
.header .menu-icon {
padding: 38px 10px;
margin-right: 2.5%;
} /* Sets positioning of hamburger icon and adds the pointer cursor when users hover over the icon */
.header .menu-icon .navicon {
width: 22px;
} /* Sets colour and sizing of the hamburger menu icon */
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
} /* Sets size, positioning and animation speed for the hamburger menu icon */
}
/* ---------------------------------------------------------------------------------------------------------------------------
END OF 36em = 577px RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
END OF RESPONSIVE NAVIGATION MOBILE VIEW
--------------------------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------------------------
START OF ALERT MESSAGE BOX
--------------------------------------------------------------------------------------------------------------------------- */
.alert-message {
text-align: left;
margin-left: 15%;
margin-right: 15%;
} /* Adjusts sizing and alignment of a
