@font-face {
    font-family: 'Martel Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
}


/* Resets */

html, body, ul, li, h1, h2, p {
    margin: 0;
    padding: 0;
}


/* Declares font family, text colour and adds a subtle pattern to the background */

body {
    font-family: 'Martel Sans', sans-serif;
    color: #010218;
    background: #cbd6ff ;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    -webkit-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -moz-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    -o-transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
    transition: all 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750);
}

.fuofb {
    font-size: 28px;
    line-height: 32px;
    margin-top: 20px;
    display: block;
}

img {
    max-width: 100%
}


/* Make container centered in page and center text inside <div> */

.container {
    text-align: center;
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding-top: 25px;
    padding-bottom: 25px;
}


/* Makes image a circle and sizes it to 40% of the outside container */

.container img {}


/* Clears bullet points and places <li> items next to each other instead of stacked on top and changes font */

li {
    display: inline;
    list-style: none;
    padding: 0 4px;
    font-size: 20pt;
}


/* Remove default hyperlink styling, add our own colours and change font-size*/

a, a:visited {
    color: #010218;
    text-decoration: none;
}
a:hover {
    color: #2b6daa;
}
.event a, .event a:visited , .event h4 a, .event h4 a:visited{
    color: #2b6daa!important;
    text-decoration: none;
}
.event a:hover, .event h4 a:hover {text-decoration: underline!important;text-align:left}
/* This changes the link colour when someone hovers their mouse over it */



#nav {padding:10px 0 20px 0}
/* Style our header tags */
h1 {
    font-weight: normal;
}
h2 {
    font-weight: normal;
}

h1 {
    font-size: 32px;
    line-height: 36px;
    color: #010218;
    line-height: 32px;
    margin-top: 20px;
    display: block;

}

h2 {
    font-size: 32px;
    color: #2b6daa;
    line-height: 32px;
    margin-top: 20px;
    display: block;

}
li {text-transform: uppercase}
li.logo {text-transform: none}

/* Adds some space around our bio */

p {
    padding: 10px 0;
}


/* Style our 'available' and 'unavailable' classes */

.available, .unavailable {
    width: 100%;
    margin: 10px auto 20px;
    border-radius: 3px;
    padding: 14px 0;
}

.available {
    color: #fff;
    background-color: #0069be;
}

.unavailable {
    color: #999;
    background-color: #eee;
}

.leftbox {
    width: auto;
    float: left;
    padding-bottom: 25px;
}

.rightbox {
    width: auto;
    float: right;
    padding-bottom: 25px;
}

a.social {
    text-decoration: none;
    display: block;
    text-align: left;
}

a.social:hover {
    text-decoration: none;
}

#outer {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

hr {
    color: #2b6daa;
    background-color: #2b6daa;
    border-color: #2b6daa;
    margin: 10px 0 10px 0;
    width: 100%;
    max-width:800px;
    border-width: 1px;
    height: 1px;
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}