/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */
/* Go crazy with your own styles here */

/* ---  ---- OVERRIDE STYLES ---- --- */

/* Override styles  - fanoe.css /



/*
      ****  MAIN NAVIGATION ****
*/

nav ul, nav li > ul {
    background-color: white;
}

/*responsive small hamburger menu override fanoe styles so it is visible with white bg colour */

/* menu open - i.e. shows cross, hide hamburger symbol*/
.toggle .cross.open span {
    background-color: transparent; /*This is the hamburger middle line colour when menu is open*/
}

    .toggle .cross.open span:before {
        background-color: #c6c5cd; /*This affect the color of the cross stroke \ */
    }

    .toggle .cross.open span:after {
        background-color: #c6c5cd; /*This affect the color of the cross stroke / */
    }

/* menu closed - i.e. hide cross, shows hamburger symbol*/
.toggle span {
    background-color: #c6c5cd; /*This is the hamburger middle line colour when menu is closed*/
}

    .toggle span:before, .toggle span:after {
        background-color: #c6c5cd;  /*this is the hamburger menu icon top and bottome line colour*/
    }

/*end of - responsive small hamburger menu override fanoe styles so it is visible with white bg colour */

*/ nav > ul li a, nav > ul li span {
    font-size: 18px;
}

    nav > ul li a:hover,
    nav > ul li span:hover {
        color: #63B8D4;
    }

nav > ul li.selected > a,
nav > ul li.selected span {
    color: #63B8D4;
    font-weight: 900;
}

nav ul a {
    padding: 0 18px;
    display: inherit;
    /*float: left;*/
    color: #fff;
    font-size: 2em;
    text-decoration: none;
    line-height: 56px;
    /*text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);*/
}

#headerContainer nav > ul li a, nav > ul li span {
    color: black;
    font-weight: 900;
}

    #headerContainer nav > ul li a:hover, nav > ul li span:hover {
        color: #63B8D4;
    }

#headerContainer nav > ul li.selected > a, nav > ul li.selected span {
    color: #63B8D4;
    font-weight: 900;
}

@media (min-width: 992px) {
    nav ul a {
        float: left;
    }


    nav > ul {
        padding-right: 0px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    nav ul a {
        clear: left;
        /*overflow: auto;*/
    }

    nav {
        background-color: white;
    }
}
/* ==> end of media query max width 768px block */

/*  ********************** end of main navigation *******************************   */

/*
            Header & Footer
*/
header, .dark footer {
    background: #2F2E2E;
}

/*  ********************** end of Header & Footer *******************************   */

/*
    Header only
*/

header {
    background-color: #fff;
}

/*  ********************** end of header only *******************************   */
/*
    Footer only
*/
footer p, footer a {
    line-height: 0;
}

footer .fa {
    line-height: 0.5;
}

.dark footer {
    padding: 30px;
    background-color: #2F2E2E;
}
footer.dark img, footer.light img, footer.yellow img, footer.blue img, footer.purple img {
	padding: 0px;
}

#webstrip {
    bottom: 0px;
    width: 100%;
    height: 30px;
    position: fixed;
    background-image: url('/media/1112/stripey-strip_originalsite.png');
    /* background-image: url('webstrip.png'); */
    -webkit-box-shadow: 0px 30px 4px 5px #888;
    -moz-box-shadow: 0px 30px 4px 5px #888;
    box-shadow: 0px 0px 30px 5px #888;
}

@media (max-width: 768px) {
}
/*media query max width 768px*/

/*  ********************** end of footer only *******************************   */

/*
      ****  MAIN CONTENT/BODY ****
*/

* {
    font-family: "Segoe UI", Verdana, Geneva, sans-serif;
}

.dark a, .dark a:visited {
    color: #63B8D4;
}

.dark h1, .dark h2, h2 {
    color: #63B8D4;
}

.dark code, .dark pre {
    background-color: transparent;
}

.img-circle {
    border-radius: 50%;
    width: 150px;
    height: auto;
}


.img-circle-with-border {
	border: 5px solid #63B8D4;
    border-radius: 50%;
    width: 150px;
    height: auto;
}

hr {
    width: 100%;
    height: 1px;
    color: black;
}

.brand {
    height: 114px;
}

.horizontal-list {
    display: inline-flex;
}

    .horizontal-list li {
        padding: 5px;
    }

        .horizontal-list li a {
            border: 1px;
        }

.divAlign-right {
    text-align: right;
}

.dark input, .dark textarea {
    color: #000;
}

.grid-section div:nth-child(-n+3).dark {
    padding: 0px;
}

/*  ********************** end of main content/body *******************************   */

/* 
       Contact form 
*/

#Message {
    width: 400px;
    height: 100px;
}

.dark .field-validation-error {
    color: red;
}


/*  ********************** end of contact form *******************************   */