/*
 Theme Name:   International Fibre
 Theme URI:    https://syon.com
 Description:  IF Theme
 Author:       Syon
 Author URI:   https://syon.com
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         responsive-layout, accessibility-ready
 Text Domain:  if
*/

/* Defaults */
html {
    font-size: 1rem;
}
body {
    font-family: 'Open Sans', sans-serif;
}

/* Menus */
ul.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
ul.menu > li {
    display: inline-block;
    margin: auto;
}
ul.menu > li:first-child {
    margin-left: 0;
}
ul.vertical-menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

/* Menu containers */
.menu-top-left-menu-container, .menu-container {
    height: 100%;
    position: relative;
}
.menu-top-left-menu-container > ul.menu, .menu-container > ul.menu {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

/* Navigation */
#mobile-navigation {
    display: none;
}
#desktop-navigation a {
    text-decoration: none;
}
#first-level {
    background-color: #fff;
    font-size: 0.6rem;
    font-weight: bold;
    text-align: center;
    padding: 0.5rem;
}
#first-level a {
    color: #004587;
    padding: 0.25rem;
}
#first-level .top-nav a:hover {
    background-color: #e8348b;
    color: #fff;
}
#first-level .top-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#first-level .top-nav ul > li {
    margin-right: 0.5rem;
    display: inline-block;
    position: relative;
}
#first-level .top-nav ul > li:last-child {
    margin-right: 0;
}
#first-level div.logo {
    text-align: center;
    margin: 0.25rem 0;
}
#first-level ul.sub-menu {
    display: none;
    position: absolute;
    left: 50%;
    margin-top: 0.25rem;
    transform: translateX(-50%);
    z-index: 1;
    padding: 0.25rem;
    background-color: #004587;
}
#first-level ul.sub-menu li {
    margin: 0;
    background-color: #004587;
}
#first-level ul.sub-menu a {
    color: #fff;
    min-width: 10rem;
    display: block;
}
#first-level ul.menu > li:hover ul.sub-menu {
    display: block;
}
#second-level div.logo > a.logo {
    width: 100%;
    height: 5rem;
    display: block;
    text-align: center;
    margin: 2rem auto 1rem auto;
}
#second-level div.logo > a.logo > img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
    margin: auto;
}
#second-level, #floating-menu {
    background-color: #3abff0;
}
#floating-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1;
}
#second-level .menu, #floating-menu .menu {
    font-size: 1rem;
    text-align: center;
}
#second-level .menu > li, #floating-menu .menu > li {
    padding: 0.25rem 2rem 0.25rem 0;
    margin: 0.75rem 0;
    font-size: 1.25rem;
    text-transform: uppercase;
}
#second-level .menu > li > a, #floating-menu .menu > li > a {
    padding: 0.5rem;
    color: #fff;
}
#second-level .menu > li.current-page > a, #floating-menu .menu > li.current-page > a {
    background-color: rgb(0, 69, 135, 0.2);
}
#second-level .menu > li > a:hover, #floating-menu .menu > li > a:hover {
    background-color: #004587;
}
#strapline {
    background-color: #e8348b;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    font-size: 1.75rem;
    padding: 0.25rem inherit;
    margin-bottom: 1rem;
}
body.mobile #content {
    margin-top: 5rem;
}

/* Footer */
#footer {
    background-color: #3abff0;
    padding: 1rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    color: #fff;
}
#footer p {
    margin: 0;
}
#footer .pages {
    text-align: right;
}
#footer .pages a {
    color: #fff;
}
#footer .contact {
    text-align: center;
}
#footer .contact a {
    color: #fff;
}
body.mobile #footer .copyright, body.mobile #footer .contact, body.mobile #footer .pages {
    text-align: center;
}

/* Helpers */
.bold {
    font-weight: bold;
}
img.alignleft {
    float: left;
    margin-right: 1rem;
    margin-bottom: 1rem;
}
img.alignright {
    float: right;
    margin-left: 1rem;
    margin-bottom: 1rem;
}
.hidden {
    display: none;
}
.align-center {
    text-align: center;
}
.align-left {
    text-align: left;
}
.align-right {
    text-align: right;
}

/* Generic headers */
h1 {
    font-size: 2rem;
    color: #3abff0;
    text-transform: uppercase;
}
h2, h2 a, h2 a:hover {
    font-size: 1.5rem;
    color: #e8348b;
    margin-bottom: 0;
    text-transform: uppercase;
}
h1.heading {
    margin-top: 2rem;
}

/* Iframes */
iframe {
    border: none;
}

/* Form validation */
span.wpcf7-not-valid-tip, div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
    /*display: none !important;*/
}
.wpcf7-not-valid {
    background-color: #990000;
    color: #fff;
    border-color: #990000;
}
.wpcf7-not-valid::placeholder {
    color: #fff;
}

/* Featherlight */
.featherlight:last-of-type {
    background-color: rgba(232, 52, 139, 0.8);
}
.featherlight .featherlight-content {
    background-color: transparent;
    text-align: center;
    overflow-x: hidden;
}
.featherlight .featherlight-content .featherlight-close-icon {
    font-size: 1.5rem;
    font-weight: bold;
    background-color: transparent;
    color: #fff;
    border: 5px solid #fff;
    border-radius: 100%;
    padding: 0.5rem;
    width: 3.5rem;
    height: 3.5rem;
}
.modal-video {
    width: 85vw;
}

.cf7sr-g-recaptcha {
    margin-bottom: 2rem;
}
.cf7sr-g-recaptcha div {
    margin: auto;
}

/* Media breakpoints */

body.mobile #mobile-navigation {
    display: block;
}
body.mobile #mobile-navigation > .bar {
    top: 0;
    left: 0;
    height: 5rem;
    width: 100%;
    background-color: #3abff0;
    position: fixed;
    z-index: 99999;
}
body.mobile #mobile-navigation > .bar > .logo {
    position: absolute;
    display: block;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    max-width: calc(100% - 5rem);
}
body.mobile #mobile-navigation > .bar > .logo > img {
    max-height: 2rem;
    width: auto;
    max-width: 100%;
}
body.mobile #mobile-navigation > .bar > .switch {
    font-size: 2.5rem;
    color: #fff;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}
body.mobile #mobile-navigation ul.menu li {
    display: block;
}
body.mobile #mobile-navigation ul.menu ul.menu {
    margin-left: 1rem;
}
body.mobile #mobile-navigation ul.menu ul.menu li {
    font-size: 0.85rem;
} 
body.mobile #mobile-navigation ul.service-options li {
    font-size: 0.85rem;
} 
body.mobile #mobile-navigation > .menu-wrapper {
    display: none;
    height: 0;
    padding: 1rem;
    font-size: 1rem;
    text-transform: uppercase;
}
body.mobile #mobile-navigation > .menu-wrapper.active {
    display: block;
    position: fixed;
    top: 5rem;
    left: 0;
    width: 100%;
    background-color: #3abff0;
    z-index: 99999;
    height: auto;
}
body.mobile #mobile-navigation > .menu-wrapper a {
    color: #fff;
    text-decoration: none;
}
body.mobile #mobile-navigation > .menu-wrapper ul {
    list-style-type: none;
    padding: 0;
}
body.mobile #mobile-navigation > .menu-wrapper ul ul {
    margin-left: 2rem;
    margin-bottom: 1rem;
}
body.mobile #mobile-navigation .mobile-menu {
    margin-bottom: 1rem;
}
body.mobile #mobile-navigation .mobile-menu hr {
    border: none;
}
body.mobile #mobile-navigation .footer {
    font-size: 0.75rem;
}

/* Footer */
body.mobile #footer .column-1 {
    text-align: center;
}
body.mobile #footer a.logo {
    max-width: 50%;
    margin: auto;
    margin-bottom: 2rem;
}