body { 
    font-family: "Source Sans 3", sans-serif !important;
} 

/* Padding */
header { 
    padding: 10px 5% 0px;
}

main {
    padding: 60px 5% 120px; 
}

main#home {
    padding: 0px !important; 
}

#upcoming {
    padding: 60px 5% 120px; 
    background-color: #FFF;
    display: none;
}

main#home .text {
    padding: 60px 5%;
}

.content {
    position: absolute;
    width: 100%;
    height: 100%;
}

footer {
    padding: 60px 5%;
}

#credit { 
    padding: 10px 5% !important;
}

/* Typography */

h1, h2, h3, strong,
.tribe-events-event-meta dt,
.tribe-common h1 {
    font-weight: 700 !important;
}

h1,
.tribe-common h1 {
    font-size: 3em;
    margin-bottom: 30px;
    display: block;
    letter-spacing: -1px;
}

h2 {
    margin-bottom: 15px; 
}

#home h2 {
    font-size: 3em;
    letter-spacing: -1px;
    margin: 0px 0px 30px;
}

main article h2,
.tribe-events-single h2 {
    font-size: 2em;
    margin-top: 50px;
    letter-spacing: 0px;
}

main aside h2 {
    font-size: 1.5em;
    font-weight: 700;
}

footer h2 {
    font-size: 3em;
    letter-spacing: -1px;
    float: left;
    width: 32%;
    margin: -10px 0px 40px;
}

h3 {
    font-size: 1.25em;
    font-weight: 700;
    margin-bottom: 10px; 
}

aside h3 {
    margin-top: 20px;
}

p, li {
    font-size: 1em;
    font-weight: 400; 
    line-height: 1.4em;
}

p, 
article ul, 
article ol {
    margin-bottom: 10px;
}



h1, 
article h2,
article h3,
.tribe-events-single h1, 
.tribe-events-single h2,
.tribe-events-single h3, 
.tribe-events-single h3 a,
article ul,
article ol,
.tribe-common a:not(.tribe-common-anchor--unstyle), 
.tribe-common a:not(.tribe-common-anchor--unstyle):active, 
.tribe-common a:not(.tribe-common-anchor--unstyle):focus, 
.tribe-common a:not(.tribe-common-anchor--unstyle):hover, 
.tribe-common a:not(.tribe-common-anchor--unstyle):visited,
.tribe-events .tribe-events-calendar-list__event-date-tag-weekday,
.tribe-common .tribe-common-h5, 
.tribe-common .tribe-common-h6 {
    color: #721D45;
    /*color: #0C1A30;*/
}

aside h2,
aside h3 {
    color: #FFD100;
}

aside p {
    color: #FFF;
}


article ul,
article ol,
#account ul {
    list-style-position: inside;
    margin-left: 25px; 
}

article ul,
#account ul {
    list-style: disc;
}

main ol {
    list-style: decimal; 
}

article p,
article li,
article p a,
article li a,
#account li,
#account li a {
    color: #000;
}

#home #becomearef h3,
#home #becomearef p {
    color: #FFF;
}

article p a:hover,
article li a:hover,
#account li a:hover {
    color: #92002C;
}

aside p a {
    color: #FFF;
}

aside p a:hover {
    color: #FFD100;
}

.staff {
    padding: 10px 0px;
    display: block;
    border-top: 1px solid #EEE;
}

.staff img {
    float: left;
    width: 200px;
    height: auto;
}

.stafftext {
    margin-left: 220px;
}

#becomearef h2 {
    color: #FFD100;
}

#becomearef p a {
    color: #FFF;
    text-decoration: none;
    display: block;
}
#becomearef p a:hover{
    text-decoration: underline;
}

#jointheteam h2,
#jointheteam h3 {
    color: #0C1A30;
}

#jointheteam p a {
    color: #0C1A30;
    text-decoration: none;
    display: block;
}
#jointheteam p a:hover {
    text-decoration: underline;
}

#contact h2,
#contact h3,
#contact p {
    color: #FFF;
}

#contact p a {
    color: #FFF;
    text-decoration: none;
    display: block;
}
#contact p a:hover {
    text-decoration: underline;
}

#credit p {
    color: #1f4a8f;
    font-size: 0.88em;
}

#credit p a {
    color: #1f4a8f;
    text-decoration: none;
}
#credit p a:hover {
    text-decoration: underline;
}

.tribe-events-event-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Main Styles */
#whitehead { 
    background-color: #FFF;
}
#coursebanner { 
    background-color: #0C1A30;
    padding: 10px 5%;
    line-height: 1em;
    text-align: center;
}
#coursebanner h2 { 
    color: #FFD100;
    display: inline;
    margin-right: 10px;
    font-weight: 700;
    font-size: 1em !important;
}

#coursebanner .textwidget {
    display: inline;
}

#coursebanner p { 
    color: #FFF;
    display: inline;
    font-size: 1em !important;
}

#coursebanner a { 
    display: block;
}

#logo {
    height: 80px;
    width: auto;
    float: left;
}

#image {
    height: 400px;
    background-size: cover;
    background-position: top center;
}

#slides {
	position: relative;
}

#slidetext {
    position: absolute;
    z-index: 10;
    width: 90%;
    left: 5%;
    top: 10%;
}

#slides h1 {
	font-size: 4em;
	letter-spacing: -2px;
    color: #FFF;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    margin-bottom: 10px;
}

#slides p {
	font-size: 2em;
	letter-spacing: -1px;
    line-height: 1.1em;
    color: #FFF;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5);
}

.menu-main-container { 
	float: right;
    clear: right;
    margin-top: 40px;
} 

.menu-main-container ul { 
	float: right;
    position: relative;
} 

.menu-main-container li { 
	float: left;
    font-weight: 700;
    font-size: 1.125em;
} 

.menu-main-container li a { 
	display: block;
    padding: 10px 15px;
    color: #46062F;
    text-decoration: none;
} 

.menu-main-container li:hover > a {
    background-color: #FFD100;
    color: #0C1A30;
}

.menu-main-container ul ul {
	display: none;
}
.menu-main-container ul li:hover > ul {
	display: block;
}
.menu-main-container ul ul {
	position: absolute;
	top: 100%;
	width: 300px;
	z-index: 3000;
    background-color: rgba(255,255,255,0.95);
}
.menu-main-container ul ul li {
	float: none;
	font-size: 1em;
	position: relative;
	border-right: 0px;
	z-index: 3000;
	font-weight: 400;
}
.menu-main-container ul ul li a {
	padding: 5px 15px;
    color: #46062F;
}

.menu-main-container ul ul li a:hover {
    border-bottom: none;
    background-color: #0C1A30;
    color: #FFF;
}

#home #becomearef section {
    width: 50%;
    float: left;
    padding-right: 40px;
}

#home #aboutus,
#home #becomearef {
    display: flex;
    min-height: 400px;
}

#home #aboutus {
    flex-direction: row-reverse;
}

main {
    background-color: #FFF;
}

main .left,
main .right {
    flex: 50%;
}


.image {
    background-size: cover; 
    background-position: 50% 50%;
}

#upcoming .flex {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2%;
}

#upcoming .event {
    background-color: #FFF;
    flex: 23.5%;
}

#upcoming a {
    color: #0C1A30;
    text-decoration: none;
}

#upcoming a:hover {
    color: #0C1A30 ;
    text-decoration: underline;
}

.newsimg {
    width: 100%;
    height: 200px;
    background-size: cover; 
    background-position: 50% 50%;
}

.newstext {
    padding: 20px 20px 20px 20px;
}

main article {
    float: left;
    width: 64%;
}

main article img {
    width: 100%;
}

main figure {
    margin: 20px 0px;
    width: 100%;
}

main aside {
    width: 32%;
    float: right;
    background-color: #0C1A30;
    padding: 20px;
}

.nf-form-fields-required {
    margin-bottom: 40px;
}

.nf-field-label {
    color: #0C1A30;
}

.nf-field-element input {
    border: 1px solid #c493b3;
    padding: 10px;
}

.nf-field-element select {
    padding: 10px;
}


/* Style the buttons that are used to open and close the accordion panel */
.year {
    background-color: #fff;
    color: #0C1A30;
    cursor: pointer;
    padding: 15px 30px 15px 0px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
    font-size: 24px;
  }

  
  /* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.year:hover {
    background-color: #EEE;
  }

  .year:after {
    content: '\2193';
    font-weight: bold;
    float: right;
    margin-left: 5px;
    font-size: 18px;
  }
  
  .active:after {
    content: "\2191";
  }
  
  
  /* Style the accordion panel. Note: hidden by default */
  .panel {
    padding: 10px 0px 20px 10px;
    background-color: white;
    display: none;
    overflow: hidden;
  }
  

#downloads a {
    display: block;
    background-size: 24px auto;
    background-repeat: no-repeat;
    padding: 6px 0px 6px 34px;
    text-decoration: none;
}

#downloads a:hover {
    text-decoration: underline;
}


#downloads a[href$=".pdf"] {
    background-image: url('/wp-content/themes/portreebraes/img/pdf.png');
}

#downloads a[href$=".doc"],
#downloads a[href$=".docx"] {
    background-image: url('/wp-content/themes/portreebraes/img/word.png');
}

#downloads a[href$=".xls"],
#downloads a[href$=".xlsx"] {
    background-image: url('/wp-content/themes/portreebraes/img/xls.png');
}

#downloads a[href$=".ppt"],
#downloads a[href$=".pptx"] {
    background-image: url('/wp-content/themes/portreebraes/img/ppt.png');
}

#becomearef,
#contact,
#credit { 
	background-color: #0C1A30;
}

#jointheteam { 
	background-color: #FFD100;
} 

footer section {
    float: left;
    width: 32%;
    margin-left: 2%;
}

footer section .textwidget {
    padding-right: 20px;
}

#sponsors img {
    float: left;
    height: 50px;
    width: auto;
    margin: 0px 20px 0px 0px;
}

#social {
    float: left;
    clear: both;
    margin-top: -32px;
}

#social img {
    width: 20px;
    height: auto;
    float: left;
    margin-right: 20px;
}

/* EVENTS */
.tribe-events-view {
    position: relative;
    width: 90%;
    margin: 60px 5%;
}

.tribe-events .tribe-events-header {
    display: none;
}

.tribe-events-calendar-list__event-title {
    pointer-events: none;
}

.tribe-events .tribe-events-l-container {
    min-height: 600px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
    min-height: 700px;
    padding: 0px;
    margin: 0;
    width: 100%;
}

#tribe-events-pg-template {
    margin: 0 5%;
    padding: 0px;
    width: 100%;
}

.tribe-events-event-meta.primary, .tribe-events-event-meta.secondary {
    width: 100%;
}

abbr[title] {
    text-decoration: none;
}


@media all and (max-width: 1279px) {
        main#home #upcoming {
            padding: 40px 5% 120px; 
        }

        #slides h1 {
            font-size: 3.5em;
        }
        h1, h2 {
            font-size: 2.5em;
        }

        #home h2 {
            font-size: 2.5em;   
        }
        
        footer h2 {
            font-size: 2.5em;
            letter-spacing: -1px;
            float: left;
            width: 32%;
            margin: -10px 0px 20px;
        }
        h3 {
            font-size: 1.25em;
            font-weight: 700;
            margin-bottom: 10px; 
        } 
}

@media all and (max-width: 1200px) {


        #archive .postwrapper {
            flex: 32%;
            max-width: 32%;
        }  
}

@media all and (max-width: 1080px) {
        #home #becomearef section {
            width: 100%;
            padding-right: 0px;
            margin-bottom: 20px
        }
        #sponsors img {
            margin: 0px 10px 0px 0px;
        }
}

@media all and (max-width: 1000px) {
        #upcoming .flex {
            column-gap: 2%;
            row-gap: 2%;
        }
        
        #upcoming .newsbox {
            flex: 49%;
            margin-bottom: 20px;
        }
}


@media all and (max-width: 940px) {        
        #slides h1 {
            font-size: 3em;
            letter-spacing: -1px;
        }
        
        #slides p {
            font-size: 1.5em;
        }
        
        footer h2 {
            width: 100%;
            margin-bottom: 30px;
        }
        footer section {
            width: 50%;
            margin-left: 0%;
        }
        #social {
            margin-top: 0px;
        }
        #sponsors img {
            margin: 0px 20px 0px 0px;
        }
}

@media all and (max-width: 800px) {
    #logo {
        height: 60px;
    }
    header { 
        padding: 10px 5% 10px;
    }

        main .left,
        main .right {
            flex: 100%;
            min-height: 300px;
        }

        #home #aboutus,
        #home #becomearef {
        flex-direction: column;
        }

        main#home .text {
            padding: 40px 5%;
        }

        main article,
        main aside {
            width: 100%;
            float: left;
        }

        main article {
            margin-bottom: 20px;
        }        
}

@media all and (max-width: 700px) {
        #upcoming .flex {
            flex-direction: column;
            column-gap: 0%;
        }
}

@media all and (max-width: 670px) {
    #sponsors img {
        margin: 0px 10px 0px 0px;
    }
}


@media all and (max-width: 600px) {
        footer section {
            width: 100%;
            margin-bottom: 20px
        }

        #sponsors img {
         margin: 0px 20px 0px 0px;
        }


        #social {
            margin-top: 20px;
        }
        
        .newsbox {
            flex-direction: column;
            margin-bottom: 20px;
        }

    }

    @media all and (max-width: 400px) {        
        #slides h1 {
            font-size: 2.5em;
        }
        
        #slides p {
            font-size: 1.25em;
        }

        .stafftext {
            margin-left: 0;
            clear: left;
            padding-top: 20px;
        }

    }