@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);

/* Move down content because we have a fixed navbar that is 50px tall */
body-content {
}

body {
    padding-right: 0 !important; /*This stops the page shifting left upon opening a modal - DO NOT REMOVE!*/
}

html {
    overflow-y: scroll;
}

.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

.boldTableText {
    font-weight: bold;
}

.col-md-6 img {
    padding: 0 0 20px 0;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.alertRow {
    margin: 15px 15px 15px 15px; /*Stretches the 'alerts' to only their necessary width*/
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .alertRow {
        display: block;
        text-align: center;
        margin: 30px;
    }
}

.alert-secondary {
    background-color: #f1f3f4;
    margin: 5px 10px 20px 10px;
    width: 95%;
}

.alert-success {
    margin: 5px 10px 20px 10px;
    width: 95%;
}

.alert-danger {
    margin: 5px 10px 20px 10px;
    width: 95%;
}

.solidPurple { /*HR Separating Line*/
    margin: 38px 0 30px 0;
    border: solid 1px #33534C;
}

::selection {
    background: #EEEEFF; /* WebKit/Blink Browsers */
}

::-moz-selection {
    background: #EEEEFF; /* Gecko Browsers */
}

.standardImage img {
    padding: 3px 5px 20px 5px;
    width: 100%;
}

.mainPurpleBannerMember { /*Purple banner at the very top of every page. Coded in the MASTER.*/
    height: 40px;
    background-color: #222B62;
    text-align: right;
    color: white;
    font-size: 1.1em;
}

    .mainPurpleBannerMember p {
        padding: 8px 3px 0 0;
    }

@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .mainPurpleBannerMember {
       text-align: center;
       font-size: 1em;
    }
}

.mainPurpleBannerNonMember { /*Purple banner at the very top of every page. Coded in the MASTER.*/
    background-color: #222B62;
}

.internetExplorerWarning { /*Hides notice natively*/
    display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: none) {/*-----------------Covers IE10 and IE11-----------------*/
    .hideOnInternetExplorer {
        display: none !important;
    }
    .internetExplorerWarning {
        display: inline;
        height: 40px;
        background-color: #F1EBF7;
        text-align: center;
        color: #242561;
        font-size: 0.8em;
    }
    .internetExplorerWarning i {
        padding-right: 3px;
    }
}

@media screen\0 { /*-----------------Covers IE8, IE9 and IE10-----------------*/
    .ie8910 {
        display: inline;
        height: 40px;
        background-color: #F1EBF7;
        text-align: center;
        color: #242561;
        font-size: 0.8em;
    }
}

@media \0screen\,screen\9 { /*-----------------Covers IE6, IE7 and IE8-----------------*/
    .ie678 {
        display: inline;
        height: 40px;
        background-color: #F1EBF7;
        text-align: center;
        color: #242561;
        font-size: 0.8em;
    }
}

.internetExplorerWarning p {
    padding: 10px 3px 0 0;
}

@media screen and (max-width: 1020px) { 
    .internetExplorerWarning {
        text-align: center;
        height: 70px;
    }
}

.button, input, optgroup, select, textarea { /*Gives radio boxes a margin from their text*/
    margin-right: 10px;
}

@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .radioClass {
        text-align: center; /*Centers radios*/
        margin: 30px 10px 10px 10px; /*Spaces radios*/
    }
}

@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .alertCenter {
        text-align: center; /*Centers alert*/
        margin: 30px 10px 10px 10px;
    }
}

.flatpickr-input { /*Calendar pop up - https://flatpickr.js.org/ */
    max-width: 120px;
    margin-right: 0;
}


.disabled.form-control, [readonly].form-control { /*Changes Bootstrap form input background to white*/
    background-color: white;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}


a { /*Hides the annoying white selection boxes on links*/
    outline: 0; /*DECIDE WHETHER TO USE THIS BEFORE GOING LIVE*/
    color: #75005C;
    font-weight: 400;
    
}

    a:hover {
        color: #F282B3;
        text-decoration: none;
    }



.textBoxGroupDiv { /*Used with 'form-group'. Allows us to add spacing to form elements.*/
    margin: 15px 5px 20px 5px;
}

.badgeIcon {
    height: 90px;
    margin: 10px 12px 10px 12px;
}

/*-----RECAPTCHA BOX-----*/

.recaptchaBox {
    margin: 20px 15px 15px 15px;
    text-align: left;
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .recaptchaBox {
        text-align: center;
    }
}

.g-recaptcha {
    display: inline-block;
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .g-recaptcha {
        display: inline-block; /*Centers the captcha box on small screens*/
    }
}

/*-----Buttons-----*/

.btnStandard {
    background-color: #497CB6;
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
}

    .btnStandard:hover {
        background-color: #7fa3cc;
    }

.btnSaveData {
    background-color: #33534C;
    color: white;
    margin: 15px 15px 15px 15px;
    border-radius: 10px;
}

    .btnSaveData:hover {
        background-color: #2b2046;
    }

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .btnSaveData {
        display: block;
        margin: 0 auto; /*Centers the button on small screens*/
    }
}

.btn-primary { /*STANDARD buttons*/
    white-space: normal; /*Wraps button text as necessary*/
    margin: 10px 5px 5px 5px;
    border-radius: 10px; /*Makes buttons rounded*/
    border-color: #75005C;
    //border:none;
    background-color: #75005C;
    color: #ffffff;
}

.btn btn-primary { /*STANDARD buttons*/
    white-space: normal; /*Wraps button text as necessary*/
    margin: 10px 5px 5px 5px;
    border-radius: 12px; /*Makes buttons rounded*/
    border-color: #75005C;
    background-color: #75005C;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #F282B3;
    border-color: #F282B3;
    color: #ffffff;
    //text-decoration: underline;
}

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .btn-primary {
            margin: 0 auto; /*Centers the button on small screens*/
        }
    }

    .btn btn-lg btn-primary {
    margin: 50px;
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .eventBookingButton {
        margin-top: 20px;
        margin-bottom: 20px;
    }
}

.btn-success { /*STANDARD buttons*/
    white-space: normal; /*Wraps button text as necessary*/
    margin: 10px 5px 5px 5px;
    border-radius: 10px; /*Makes buttons rounded*/
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .btn-success {
        display: block;
        margin: 0 auto; /*Centers the button on small creens*/
    }
}

.btn-danger { /*DELETE/REMOVE buttons*/
    white-space: normal; /*Wraps button text as necessary*/
    margin: 10px 5px 5px 5px;
    border-radius: 10px; /*Makes buttons rounded*/
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .btn-danger {
        display: block;
        margin: 0 auto; /*Centers the button on small creens*/
    }
}


    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .btn-info {
   /*         margin: 10px;*/
        }
    }

.btn-info {
    white-space: normal; /*Wraps button text as necessary*/
    margin: 10px 5px 5px 5px;
    border-radius: 10px; /*Makes buttons rounded*/
}

/* this style is used on the programme overview page for plenary, tutoirals etc..*/
.btn-Tutorials {
    background-color: #CC6600;
    color: #ffffff;
    font-size: 20px;
    margin-top: 0.3em;
    padding: 10px 20px 10px 20px;
    width: 250px;
    border: none;
    border-radius: 4px;
    outline: none;
    border-radius: 4px;
    outline-color: none;
}

.btn-plenary {
    background-color: #4F81BD;
    color: #ffffff;
    font-size: 20px;
    margin-top: 0.3em;
    padding: 10px 20px 10px 20px;
    width: 250px;
    border: none;
    border-radius: 4px;
    outline: none;
    border-radius: 4px;
    outline-color: none;
}

.btn-program {
    background-color: #7F7F7F;
    color: #ffffff;
    font-size: 20px;
    margin-top: 0.3em;
    padding: 10px 20px 10px 20px;
    width: 250px;
    border: none;
    border-radius: 4px;
    outline: none;
    border-radius: 4px;
    outline-color: none;
}
.btn-elements {
    background-color: #769245;
    color: #ffffff;
    font-size: 20px;
    margin-top: 0.3em;
    padding: 10px 20px 10px 20px;
    width: 250px;
    border: none;
    border-radius: 4px;
    outline: none;
    border-radius: 4px;
    outline-color: none;
}
.tablesmall {
   margin-left:auto;
   margin-right:auto;

}

@media screen and (max-width: 768px) {
    .btn-Tutorials {
        font-size: 20px;
        margin-top: 0.3em;
        padding: 10px 20px 10px 20px;
        width: 100%;
        outline-color: none;
    }
    .btn-elements {
        font-size: 20px;
        margin-top: 0.3em;
        padding: 10px 20px 10px 20px;
        width: 100%;
        outline-color: none;
    }
    .btn-plenary {
      
        font-size: 20px;
        margin-top: 0.3em;
        padding: 10px 20px 10px 20px;
        width: 100%;
        outline-color:none;
      

    }
    .btn-program {
        font-size: 20px;
        margin-top: 0.3em;
        padding: 10px 20px 10px 20px;
        width: 100%;
        outline-color: none;
    }
    .tablesmall {
        margin: 0px 0px 0px 0px;
    }

}



/*---------------------------------------------------------------------------------*/
.duelButtons {
    text-align: right;
}

@media (max-width: 768px) { /*When two buttons are next to each other, this centers them to the page in mobile mode*/
    .duelButtons {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
}

.singleButton {
    margin-top: 20px;
    margin-bottom: 20px;
}

@media (max-width: 768px) { /*Centers single buttons to page when in mobile mode*/
    .singleButton {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
}


    .singleButtonRightFirst { /*Centers single buttons to page when in mobile mode - These buttons would usually align right*/
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: right;
}

@media (max-width: 768px) { /*Centers single buttons to page when in mobile mode - These buttons would usually align right*/
    .singleButtonRightFirst {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
    }
}

    /*apply these these to a H1 and an IMG to set a little icon image on the LHS of the page title*/
    .side-title {
        display: inline-block;
    }

.title-img {
    height: 75px;
    margin-right: 1%;
}

/*--------Nav Tabs--------*/

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom-width: 3px;
    border-bottom: 3px solid #007BFF !important; /*Blue bottom border on active tab*/
  
}

.nav-tabs .nav-link { /*Gets rid of default 'pill' border around all tabs on hover*/
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 3px solid white;
   
}

    .nav-tabs .nav-link:hover {
        border-bottom: 3px solid #e2e6e9; /*Non-Active tabs will have a grey bottom border on hover*/
    }

.nav-tabs { /*Gets rid of the full width grey bottom border that runs along all tabs*/
    border: none;
    text-align: center;
    
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .nav-tabs { /*Centers tabs when on smaller screens*/
        display: flex;
        justify-content: center;
        flex-direction: row;
    }
}


.nav-link { /*Padding around individual tabs*/
    padding: .8rem 1.8rem;
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .nav-link {
        padding: 15px;
        margin-bottom: 10px;
    }
}

/*--------------------------- TABLES/LISTS/GRIDVIEWS -----------------------------*/

.highlight { /*Highlights applicable text as you filter*/
    color: #33534C;
    font-weight: bold;
}


div.table-title {
    margin: auto;
    max-width: 600px;
    padding: 5px;
    width: 100%;
}

.table-title h3 {
    color: #fafafa;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    font-family: "Roboto", helvetica, arial, sans-serif;
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
}


/*** Table Styles **/

.table td, .table th {
    vertical-align: middle;
}

th {
    color: white;
    background-color: #222B62;
    font-size: 25px;
    font-weight: 100;
    padding: 16px 16px 0 16px;
    text-align: left;
    vertical-align: middle;
    border: 1px solid #222B62;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    th {
        font-size: 18px;
        font-weight: 100;
        padding: 10px;
        text-align: left;
        vertical-align: middle;
        border: 1px solid #222B62;
    }
}


/*TABLE HEADER LINKS*/

th a {
    color: white;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    th a {
        color: white;
    }
}


th a:hover {
    color: #f2f2f2;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    th a:hover {
        color: #f2f2f2;
    }
}

/*------------------*/

th:first-child {
    border-top-left-radius: 0;
}

th:last-child {
    border-top-right-radius: 0;
}

tr {
    color: #666B85;
    /*font-size: 25px;*/
    font-weight: normal;
    font-family: "Roboto", helvetica, arial, sans-serif;
    /*    text-shadow: 0 1px 1px rgba(256, 256, 256, 0.1);*/
}

tr:first-child {
}

    tr:nth-child(odd) {
        background-color: #eeeeff;
    }

tr:last-child {
    animation: none;
}

tempTR {
    text-align: right;
}

td {
    padding: 12px;
    text-align: left;
    vertical-align: middle;
    /*font-size: 16px; Sets 'doc_title' font size*/
}

@media (max-width: 768px) and (min-width: 451px) { /*This is the point at which the Side Menu breaks to above the page content*/
    td {
        padding: 6px;
        text-align: left;
        vertical-align: middle;
        font-size: 14px; /*Sets 'doc_title' font size*/
        word-wrap: break-word;
    }
}

@media screen and (max-width: 450px) and (min-width: 0) { /*Stops logo going underneath quote before it breaks to new line*/
    td {
        padding: 6px;
        text-align: left;
        vertical-align: middle;
        font-size: 14px; /*Sets 'doc_title' font size*/
        word-wrap: break-word;
    }
}


table {
    border-collapse: collapse;
}

td, th {
    border: 1px solid #C1C3D1;
}

/*-----------The following is where we replace text + icons in a table header with just the icon. This improves smaller screen experience.-----------*/

.iconAndTextColumnText {
    display: inline;
    padding-right: 10px; /*Gives it a small amount of space from the FontAwesome Icon*/
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/ /*Download text will hide on smaller screens*/
    .iconAndTextColumnText {
        display: none;
    }
}

.iconAndTextColumnIcon {
    display: inline;
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .iconAndTextColumnIcon {
        display: block;
    }
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/
    .iconAndTextColumn {
        text-align: center;
    }
}

/*------------------------------------------------------*/

.columnLimit240Width {
    max-width: 240px;
}

.columnLimit280Width {
    max-width: 280px;
}

@media screen and (max-width: 768px) { /*Upon text breaking to own line*/ /*This can be used to hide specific columns on smaller screened devices*/
    .tableColumnsSmallScreenHide {
        display: none;
    }
}


.documentIcons img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .documentIcons img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
    }
}


.documentIcons img:hover {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
}

.documentNA {
    font-weight: 600;
    text-align: center;
    padding: 12px;
    height: 50px;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .documentNA {
        padding: 12px 0 12px 0;
    }
}

.idlsocPadlock { /*This is the padlock used when a document is for IDLSoc Members Only*/
    font-size: 24px;
    color: #212163;
}

.careersNetworkTableLogos img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: auto;
    max-width: 120px;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .careersNetworkTableLogos img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 50px;
    }
}

.flagIcons img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 40px;
    /*-moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;*/
    border: solid 1px #e6e6e6;
    border-radius: 3px;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .flagIcons img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        height: 30px;
    }
}

.flagIcons img:hover {
    /*-moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);*/
}


.tableClass {
    /*-webkit-box-shadow: 5px 8px 11px -2px rgba(61,46,99,0.44); /*TABLE shadows, black outline*/
    /*-moz-box-shadow: 5px 8px 11px -2px rgba(61,46,99,0.44);*/
    /*box-shadow: 5px 8px 11px -2px rgba(61,46,99,0.44);*/
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .tableClass {
        padding: 5px;
    }
}

.standardTableText { /*Standard table, set font here*/
    font-family: "Roboto", helvetica, arial, sans-serif;
}

.completeBreakTableText { /*Fully break table text including words themselves*/
    word-wrap: break-word;
    word-break: break-all;
    font-family: "Roboto", helvetica, arial, sans-serif;
}

/*------------------------PAGING------------------------*/

.standardGridViewPaging a:hover {
    color: #4b387a;
}

.standardGridViewPaging tr td {
    font-size: 20px;
    padding: 0;
    margin: 8px;
    border: none;
    border-radius: 5px;
    background-color: #007BFF;
    word-wrap: break-word;
    display: inline-block;
}

.standardGridViewPaging a,
.standardGridViewPaging span {
    position: relative;
    float: right;
    padding: 6px 12px;
    margin-right: -1px;
    line-height: 1.42857143;
    color: white;
    text-decoration: none;
    border: none;
}

.standardGridViewPaging span { /*Active page*/
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #33534C;
    border: none;
    border-radius: 5px;
}

/*---Future Use---*/

.standardGridViewPaging tr > td:first-child > a,
.standardGridViewPaging tr > td:first-child > span {
}

.standardGridViewPaging tr > td:last-child > a,
.standardGridViewPaging tr > td:last-child > span {
}

/*---ListViews---*/

.listViewPagingButtonsNumbers {
    color: white;
    font-size: 20px;
    padding: 6px 12px;
    margin: 8px;
    border-radius: 0;
    word-wrap: break-word;
    display: inline-block;
}

    .listViewPagingButtonsNumbers:hover {
        color: #4b387a;
        text-decoration: none;
    }

.listViewPagingButtonsCurrentPage {
    background-color: #007BFF;
    color: white;
    font-size: 20px;
    padding: 6px 12px;
    margin: 8px;
    border-radius: 5px;
    word-wrap: break-word;
    display: inline-block;
}

.listViewPagingButtonsNextPrevious {
    color: white;
    font-size: 20px;
    padding: 6px 12px;
    margin: 8px;
    border-radius: 0;
    background-color: #007BFF;
    word-wrap: break-word;
    display: inline-block;
}

.listViewPagingButtonsLast { /*NOT currently in use*/
    background-color: #007BFF;
    color: white;
    font-size: 20px;
    padding: 6px 12px;
    margin: 8px;
    border-radius: 0;
    word-wrap: break-word;
    display: inline-block;
}


/*------------------ CONTAINERS / MAIN PAGE LAYOUT / COLUMNS ---------------------*/

.largeContainer { /*Full Width Container with padding*/
    padding: 0 40px 0 40px;
}



.standardContainer { /*Plain old Bootstrap 'container' with a little bit of extra margin, top and bottom*/
    margin-top: 2%;
    margin-bottom: 2%;
}

.noSideMenuContainer { /*Used with standard containers when there is no side menu being used*/
    padding: 60px 5px 60px 5px;
}


.containerLightPurple { /*Full Width with light Purple Background*/
    background-color: #F5F0FA;
    padding: 20px 0 20px 0;
    margin: 20px 0 20px 0;
}


.containerSideMenu { /*Full width with header and footer padding*/
    padding: 60px 0 0px 0;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .containerSideMenu {
        padding: 40px 0 40px 0;
    }
}

.containerFullWidth { /*Full width with header and footer padding*/
    padding: 10px 0 60px 0;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .containerFullWidth {
        padding: 40px 0 40px 0;
    }
}

.containerFullWidthPreContent { /*To be used on pages which start normal sizes, then stretch to a full width container*/
    padding: 60px 0 0 0;
}

@media (max-width: 768px) { /*To be used on pages which start normal sizes, then stretch to a full width container*/
    .containerFullWidthPreContent {
        padding: 40px 0 0 0;
    }
}

.fa-user { /*Logged in User Icon*/
    margin-right: 8px;
}

/*--------- SIDE MENU ----------*/

.sideMenuColumn {
    padding-left: 50px;
    padding-right: 50px;
    overflow-wrap: break-word;
}

@media (max-width: 1400px) and (min-width: 991px) { /*BREAKPOINT 1 -- Middle break-point inbetween smallest and largest full-sized menu */
    .sideMenuColumn {
        padding-left: 20px;
        padding-right: 5px;
        overflow-wrap: break-word;
    }
}

@media (max-width: 991px) and (min-width: 768px) { /*BREAKPOINT 2 -- This is when the main menu breaks to a mobile menu*/
    .sideMenuColumn {
        padding-left: 20px;
        padding-right: 5px;
        overflow-wrap: break-word;
    }
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .sideMenuColumn {
        padding-bottom: 20px;
    }
}

.sideMenuColumn a {
    color: #212163;
    display: block;
    background-color: #d9d9f2;
    border-radius: 3px;
    margin: 2px;
    padding: 10px;
    font-size: 18px;
    overflow-wrap: break-word;
}



.lockedPageIcon { /*Lock/Padlock*/
    color: #212163;
    display: block;
    border-radius: 3px;
    margin: 2px;
    padding: 0;
    width: 1em;
    height: 1em;
    float: right;
    position: relative;
    top: 3px;
}

@media (max-width: 1400px) and (min-width: 1px) { /*BREAKPOINT 1 -- Middle break-point inbetween smallest and largest full-sized menu */
    .lockedPageIcon {
        display: none; /*Hides padlock below desktop screen size*/
    }
}

.sideMenuColumn a:hover {
    background-color: #b3b3e6;
    text-decoration: none;
}

@media (max-width: 790px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .sideMenuColumn a{
       font-size: 16px
    }
}

.menuTitle { /*Purple background for the currently active page*/
    color: white;
    display: block;
    background-color: #212163;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin: 3px;
    padding: 10px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

    _:-ms-lang(x), .menuTitle label { /*Moves the menu title (label) down a few pixels only in Microsoft Edge*/
        position: relative;
    top: 3px;
    }

    .menuTitle i {
        color: #212163;
        display: block;
        border-radius: 3px;
        margin: 2px;
        padding: 0;
        font-size: 20px;
        float: right;
    }

.selected{
    text-decoration: underline;
}



/*-------- CONTENT AREA --------*/

.mainContentAreaColumn { /*Sets the standard text area width*/
    max-width: 1200px;
    padding-right:5%; /* right hand margin */
}

.mainContentAreaColumn h1 { /*---Page Title---*/
    padding: 0 5px 20px 0;
    font-size: 44px;
}


.mainContentAreaColumn h2 { /*---Small Title---*/
    padding: 0 10px 20px 10px;
    font-size: 35px;
}

.mainContentAreaColumn h4 { /*---Sub Headings---*/
    padding: 5px 5px 5px 5px;
    font-weight: 500;
}

.mainContentAreaColumn h3 { /*---Sub Headings---*/
    padding: 5px 5px 10px 5px;
    font-weight: 500;
}

.boldText {
    font-weight: 600;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .mainContentAreaColumn h1 {
        text-align: center;
        padding: 5px 5px 20px 0;
    }
}

.mainContentAreaColumn p { /*Standard Text*/
    padding: 3px 5px 3px 5px;
    width:100%;
}

.mainContentAreaColumn ul { /*Bulleted Lists*/
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 8px;
}

.mainContentAreaColumn ol { /*Numbered Lists*/
    padding: 3px 8px 3px 48px;
}

/*.mainContentAreaColumn hr {*/ /*Separating line*/
    /*border-top: 1px solid #33534C;
}*/

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .mainContentAreaColumn p {
        padding: 0 12px 0 12px;
    }
}

.extraWideContentAreaColumn p { /*Standard Text*/
    padding: 3px 5px 3px 5px;
}


@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .extraWideContentAreaColumn p {
        padding: 0 12px 0 12px;
    }
}

.extraWideContentAreaColumn { /*Sets the extra wide text area width*/
    max-width: 1900px;
    margin-left: auto;
    margin-right: auto;
}



.extraWideContentAreaColumn h1 { /*---Page Title---*/
    padding: 0 5px 20px 0;
    font-size: 44px;
}

.extraWideContentAreaColumn h2 { /*---Small Title---*/
    padding: 0 10px 20px 10px;
    font-size: 35px;
}

.extraWideContentAreaColumn h4 { /*---Sub Headings---*/
    padding: 5px 5px 20px 5px;
    font-weight: 500;
}

.centerMe {
    text-align: center;
}

/*------------------ HOME PAGE / DEFAULT.ASPX ---------------------*/
/* --------------------- SECTION 0 ---------------------*/
/*---Jumbotron / Slider / Slideshow / Banner / Carousel---*/
.homeJumbo {
    background-color: #222B62; /*#f2ecf8*/
    color: white;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
    border-radius: 0;
}

.jumboGroup {
    padding-top: 15px;
    padding-bottom: 15px;
}

.jumboTitle h1 {
    color: white;
    font-size: 3.2rem;
}

.jumboInfo {
    color: white;
    margin-top: 20px;
    margin-bottom: 20px;
}

.jumboSubTitle {
    color: white;
    font-size: 1.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

.jumboCarousel img {
    width: 100%;
}

.jumboButtons {
}



/* --------------------- SECTION 1 ---------------------*/
.homeSection1Image { /*Fading animation added to banner here to stop its loading looking unnatural*/
    width: 100%;
    height: 250px;
    background-image: url("../../Images/Pages/Home/Banner/mainBannerNov2018.jpg"); /*For some reason, this needs to be a hard-coded link on test else it will not work. For example: 'http://dte-test-server/ToffeeApple/...'*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    -webkit-animation: fadein 1.1s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 1.1s; /* Firefox < 16 */
    -ms-animation: fadein 1.1s; /* Internet Explorer */
    -o-animation: fadein 1.1s; /* Opera < 12.1 */
    animation: fadein 1.1s;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeSection1Image {
        height: 170px;
    }
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.homeSection1Image img {
    width: auto;
    height: 250px;
}

/* --------------------- SECTION 2 ---------------------*/
.homeSection2 { /*This is where it vertically and horizontally aligns text in a div*/
    background-color: #f2ecf8;
    height: auto;
    line-height: 60px;
    text-align: center;
}

.homeSection2 p {
    padding: 16px 5px 5px 5px;
    color: #222163;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    font-size: 24px;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeSection2 p {
        font-size: 18px;
        padding: 12px 10px 0 10px;
    }
}

/* --------------------- SECTION 3 ---------------------*/

.homeSection3Circle {
    margin-bottom: 20px;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeSection3Circle {
        margin-top: 20px;
    }
}

.homeSection3Circle img {
    max-height: 170px; /*This affects the actual images inside the circle*/
    width: auto;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeSection3Circle img {
        max-height: 140px; /*This affects the actual images inside the circle*/
    }
}

.rounded-circle {
    position: relative;
    background: linear-gradient(rgb(61,46,99), rgb(225,220,239)); /*Fancy gradient borders :)*/
    -webkit-border-radius: 50px;
    -webkit-font-smoothing: subpixel-antialiased; /*Smooths out the gradient-stops it looking blocky*/
    -moz-border-radius: 50px;
    border-radius: 50%;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeSection3Title h3{
        font-size: 20px;
    }
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeSection3Text p {
        padding-top: 5px;
        font-size: 14px;
    }
}

/* --------------------- SECTION 4 ---------------------*/

.homeSection4 { /*This is where it vertically and horizontally aligns text in a div*/
    height: 40px;
    line-height: 60px;
    text-align: center;
    background-color: #33534C;
}

.homeSection4 p {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    color: white;
    font-size: 18px;
}

/* --------------------- SECTION 5 ---------------------*/

.section5SingleFeature {
    border: solid 2px #33534C;
    text-align: center;
    background-color: #FFFFFF;
    border-radius: 3px;
}

.section5SingleFeature h3 {
    margin: 5px 5px 5px 5px;
}

.section5SingleFeature p {
    margin: 10px 5px 10px 5px;
}

.homeCardsDeck {
    padding: 10px;
}


.homeCards {
    border: solid 1px #e5d8f3;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Shadow on hover*/
    transition: all .12s ease-in-out; /*Grow on hover*/
    font-family: sans-serif;
    border-radius: 7px;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
}

    .homeCards:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        transform: scale(1.012);
    }

.homeCards a {
    text-decoration: none;
}

.homeCards h3 {
    padding: 15px 5px 5px 5px;
    color: #33534C;
    font-weight: 500;
}



@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeCards h3 {
        font-size: 26px;
    }
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeCardsNewsletterSpan { /*The Newsletter block is set up differently to the other blocks so requires a specific bit of stylign to ensure it centers in mobile view and is the correct font. */
        text-align: center;
        font-size: 26px;
    }
}

.homeCards h3 span::before { /*This causes the text to always break to the next line withoot having to use the now defunct <br>*/
    content: "\A";
    white-space: pre;
}

.homeCards p {
    padding: 5px;
    color: black;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .homeCards p {
        padding-bottom: 10px;
        font-size: 16px;
    }
}

.homeCardsNewsletterSpan {
    color: #33534C;
    font-weight: 500;
    font-size: 1.75rem;
    line-height: 1.2;
}

.homeCards i {
    padding: 10px;
    color: #33534C; 
    font-size: 4em;
}



/* --------------------- SECTION 6 ---------------------*/
/*---Newletter Column---*/
.newsletterColumn {
    padding: 5px;
}

.newsletterColumnTitle {
    background-color: #33534C;
    color: white;
    padding: 5px 5px 5px 5px;
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
    border-left: solid 1px #33534C;
    border-right: solid 1px #33534C;
    margin: 0 0 0 0;
}

.newsletterContent {
    border-left: solid 1px #33534C;
    border-bottom-left-radius: 3px;
    border-right: solid 1px #33534C;
    border-bottom-right-radius: 3px;
    border-bottom: solid 1px #33534C;
    background-color: #F5F0FA;
}

.newsletterContent p {
    padding: 7px;
}

/*---Upcoming Events Column---*/

.upcomingEventsColumn {
    padding: 5px;
}

.upcomingEventsColumnTitle {
    background-color: #33534C;
    color: white;
    padding: 5px 5px 5px 5px;
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
    border-left: solid 1px #33534C;
    border-right: solid 1px #33534C;
    margin: 0 0 0 0;
}

.upcomingEventsContent {
    border-left: solid 1px #33534C;
    border-bottom-left-radius: 3px;
    border-right: solid 1px #33534C;
    border-bottom-right-radius: 3px;
    border-bottom: solid 1px #33534C;
    background-color: #F5F0FA;
}

.upcomingEventsContent p {
    padding: 7px;
}

/*---News Column---*/

.newsColumn {
    padding: 5px;
}

.newsColumnTitle {
    background-color: #33534C;
    color: white;
    padding: 5px 5px 5px 5px;
    border-top-right-radius: .25rem;
    border-top-left-radius: .25rem;
    border-left: solid 1px #33534C;
    border-right: solid 1px #33534C;
    margin: 0 0 0 0;
}

.newsContent {
    border-left: solid 1px #33534C;
    border-bottom-left-radius: 3px;
    border-right: solid 1px #33534C;
    border-bottom-right-radius: 3px;
    border-bottom: solid 1px #33534C;
    background-color: #F5F0FA;
}

.newsContent p {
    padding: 7px;
}

/*------------------ FLAGS / COUNTRIES ---------------------*/

.fullWidthFlags {
    padding: 5px 0 5px 0;

    margin-left: auto;
    margin-right: auto;
    text-align: center;
    background-color: #f2f2f2; /*Light Purple Background*/
}

.fullWidthFlags img {
    max-height: 45px;
    vertical-align: middle;
    padding: 8px 1px 8px 1px;
    /*-moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;*/
}

    .fullWidthFlags img:hover {
        /*-moz-transform: scale(1.5);
        -webkit-transform: scale(1.5);
        transform: scale(1.5);*/

    }

/*--------------------------------------MEMBERSHIP PAGE-------------------------------------*/

.featuresWrap {
    display: flex;
    background: white;
    padding: 1rem 1rem 1rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 7px 7px 30px -5px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

    .featuresWrap:hover {
        background: linear-gradient(135deg, #a899cc 0%, #3F3162 100%);
        color: white;
    }

        .featuresWrap:hover i {
            color: white;
        }

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .featuresWrap {
        margin: 15px 20px 15px 20px;
    }
}

.featuresIconWrap {
    margin: auto;
}

.featuresIconFont {
    font-size: 4rem !important;
    color: #313131;
    margin: 1rem;
    padding-right: 1rem;
}

@media (max-width: 768px) { /*This is the point at which the Side Menu breaks to above the page content*/
    .featuresIconFont {
        font-size: 3rem !important;
        margin-right: 40px;
        margin-left: 0;
    }
}

.featuresTextAndTitlecenter {
    margin: auto;
}

.featuresTitleStyle {
    font-family: 'Source Sans Pro',sans-serif;
    font-size: 1.4rem;
}

.boldTitle {
    font-weight: 700;
}


/* ------------------------------------- JOIN NOW PAGE -------------------------------------*/

.membershipBox {
    text-align: center;
    background-color: #33534C;
    padding: 4px;
    margin: 5px;
    transition: all .2s ease-in-out;
    -moz-transition: all 0.2s;
    -webkit-transition: all 0.2s;
    border-radius: 3px;
}

.membershipBox:hover {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.membershipBox p {
    padding: 6px 0 0 0;
    font-size: 18px;
}

.membershipBox a {
    color: white;
}

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

/*-------------------------------------------CALENDAR STARTS--------------------------------------------*/

.memberEventsList { /*Ensures the events stretch to full page width*/
    margin: 0 10px 35px 10px;
    width: 100%;
}

@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .memberEventsList {
        margin: 0 30px 30px 30px;
        width: auto;
    }
}

.halfwide {
    width: 47%;
}

.fullwide {
    width: 100%;
}

.hasMidDate {
    width: 6%;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
}

.noMidDate {
    display: none;
}

.hasLastDate {
    display: inline-block;
    width: 47%;
}

.noLastDate {
    display: none;
}

.margined {
    margin-left: 15%;
    margin-right: 15%;
}

@media (min-width: 750px) {
    .myModX {
        max-width: 800px;
        margin: 1.75rem auto;
    }

    .topRowPadded {
        padding-left: 25%;
        padding-right: 25%;
    }
}

@media (max-width: 750px) {
    .margined {
        margin-left: 1%;
        margin-right: 1%;
    }

    .hasMidDate {
        display: none
    }

    .halfwide {
        width: 50%;
    }

    .hasLastDate {
        display: inline-block;
        width: 50%;
    }
}

.modal::-webkit-scrollbar {
    display: none;
}

.eventImage {
    width: 100%;
    height: auto;
    padding: 20px 120px 0 120px;
}

@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .eventImage {
        padding: 10px 10px 0 10px;
    }
}

/*--------------------------------------------CALENDAR ENDS---------------------------------------------*/

/*-----------------------------------------MEMBER AREA STARTS-------------------------------------------*/

.memberDashboardBoxesFullWidth { /*Full width 12 columnn boxes*/
    /*background-color: #F8F8FF;*/
    margin: 50px 10px 35px 10px;
    padding: 12px 10px 4px 10px;
    /*-webkit-box-shadow: 5px 8px 11px 1px rgba(61,46,99,0.44); /*---3D Shadow effect---*/
    /*-moz-box-shadow: 5px 8px 11px 1px rgba(61,46,99,0.44); ---3D Shadow effect---*/
    /*box-shadow: 5px 8px 11px 1px rgba(61,46,99,0.44); ---3D Shadow effect---*/
    width: 100%;
    text-align: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    transition: all .12s ease-in-out;
    font-family: sans-serif;
    border-radius: 7px;
    -webkit-font-smoothing: antialiased;
}

    .memberDashboardBoxesFullWidth:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        transform: scale(1.012);
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .memberDashboardBoxesFullWidth {
            text-align: center;
            margin: 30px 30px 30px 30px;
            width: auto;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode*/
        }
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .memberDashboardBoxesFullWidth:hover {
            transform: none; /*Disables animation when in mobile mode*/
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode and hovering*/
        }
    }

.memberDashboardBoxesSameHeightRow { /*Multiple columns in same row - Ensures they are the same height*/
    margin: 10px 10px 10px 10px;
    padding: 10px;
    box-shadow: 0 30px 70px rgba(0,0,0,.2);
    /*-webkit-box-shadow: 5px 8px 11px 1px rgba(61,46,99,0.44); ---3D Shadow effect---*/
    /*-moz-box-shadow: 5px 8px 11px 1px rgba(61,46,99,0.44); ---3D Shadow effect---*/
    /*-box-shadow: 5px 8px 11px 1px rgba(61,46,99,0.44); ---3D Shadow effect---*/
    height: 100%; /*Keeps all columns in the row the same height*/
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Shadow on hover*/
    transition: all .12s ease-in-out; /*Grow on hover*/
    font-family: sans-serif;
    border-radius: 7px;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
}

    .memberDashboardBoxesSameHeightRow:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        transform: scale(1.012);
        will-change: transform;
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .memberDashboardBoxesSameHeightRow {
            text-align: center;
            margin: 30px 30px 0 30px;
            width: auto;
            height: auto; /*Disables the auto-height columns to stop them overlapping in mobile mode*/
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode*/
        }
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .memberDashboardBoxesSameHeightRow:hover {
            transform: none; /*Disables animation when in mobile mode*/
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode and hovering*/
        }
    }

    .userIconClass { /*Members' User Icon*/
        text-align: center;
    }

    .userIconCover { /*Members' User Icon*/
        width: 150px;
        height: 150px;
        border-radius: 50%;
        border: 2px solid #DEDEDE;
        object-fit: cover;
        object-position: center center;
    }

    .memberDashboardSameHeightRowTitlesWithIcon { /*Centers the title on the special 'same height' rows*/
        text-align: center;
        position: relative;
    }

    .memberDashboardSameHeightRowTitleLeftIconSpan { /*Spans the icon to the left without interfering with the centered title on the special 'same height' rows*/
        position: absolute;
        top: 10px;
        font-size: 34px;
        color: #33534C;
        padding-left: 3px;
    }

    .memberDashboardSameHeightRowCenteredTitle {
        padding: 5px 5px 10px 5px;
    }

    .memberDashboardBoxesFullWidthTitleLeftIconSpan { /*Spans the icon to the left without interfering with the centered title on the full width rows*/
        position: absolute;
        top: 17px;
        font-size: 34px;
        color: #33534C;
        padding-left: 3px;
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .memberDashboardBoxesFullWidthTitleLeftIconSpan {
            padding-right: 50px;
        }
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .memberDashboardBoxesFullWidthCenteredTitle {
            padding: 0 30px 0 30px;
        }
    }

/*-----------------View Member Profile-----------------*/

.memberPagesBoxes {
    margin: 10px 30% 20px 30%;
    padding: 10px;
    text-align: center;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    transition: all .12s ease-in-out;
    font-family: sans-serif;
    border-radius: 7px;
    -webkit-font-smoothing: antialiased;
}

    .memberPagesBoxes:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        transform: scale(1.012);
    }


@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .memberPagesBoxes {
        margin: 20px 20px 20px 20px;
    }
}

.memberPagesBoxes h3 {
    text-align: center;
}

.memberPagesBoxes .userIcon {
    width: 100px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
}

/*-----------------Events Box/ListView-----------------*/
.verticalAlignRow {
    display: flex;
    align-items: center;
}

    .pagingRow {
        margin: 20px;
    }

    .singleEvent {
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        font-family: sans-serif;
        border-radius: 7px;
        border-radius: 7px;
        font-family: sans-serif;
        margin: 0 10px 35px 10px;
        width: 100%;
        transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Shadow on hover*/
        transition: all .12s ease-in-out; /*Grow on hover*/
        font-family: sans-serif;
        border-radius: 7px;
        font-family: sans-serif;
        -webkit-font-smoothing: antialiased;
    }

        .singleEvent:hover {
            box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
            transform: scale(1.012);
        }

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .singleEvent {
            padding: 20px 20px 20px 20px;
            margin: 0 30px 30px 30px;
            width: auto;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode*/
        }
    }

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .singleEvent:hover {
            transform: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode on hover*/
        }
    }

    .eventTitle {
        font-size: 32px;
        padding: 10px 0 20px 0;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        color: #33534C;
        line-height: normal;
    }

    @media screen and (max-width: 850px) { /*Upon text breaking to own line*/
        .eventTitle {
            padding: 20px 5px 10px 5px;
            font-size: 25px;
        }
    }

    .eventInformation {
        font-size: 16px;
        padding: 10px 0 20px 0;
        width: 100%;
        text-align: center;
        line-height: normal;
    }

    @media screen and (max-width: 850px) { /*Upon text breaking to own line*/
        .eventInformation {
            padding: 20px 5px 10px 5px;
            font-size: 14px;
        }
    }

    .eventDate {
        font-size: 16px;
        padding: 10px 10px 10px 10px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    @media screen and (max-width: 850px) { /*Upon text breaking to own line*/
        .eventDate {
            padding: 10px 5px 10px 5px;
            font-size: 14px;
        }
    }


    .eventLocation {
        font-size: 16px;
        padding: 10px 10px 10px 10px;
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }

    time {
        display: inline-block;
        width: 100%;
        color: rgb(255, 255, 255);
        background-color: #33534C;
        padding: 5px;
        text-align: center;
        text-transform: uppercase;
    }

    time > span {
        display: none;
    }

    time > .day {
        display: block;
        font-size: 56pt;
        font-weight: 100;
        line-height: 1;
    }

    time > .month {
        display: block;
        font-size: 24pt;
        font-weight: 900;
        line-height: 1;
    }

    time > .year {
        display: block;
        font-size: 12pt;
        font-weight: 100;
        line-height: 2;
    }

    .goRight {
        float: right;
    }

    .editEventButton {
        float: right;
        /* vertical-align: top; */
        border-bottom: 95%;
        position: absolute;
        top: 3%;
        right: -3%;
        /* line-height: 1.5em; */
        font-size: 1.5em;
    }

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .editEventButton {
            top: 90%;
            right: 1%;
        }
    }

/*------------------------------------------ADD/EDIT EVENT ENTRIES------------------------------------------*/

.eventEditSection {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    font-family: sans-serif;
    border-radius: 7px;
    margin: 30px 10px 30px 10px;
    padding: 20px 20px 20px 20px;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Shadow on hover*/
    transition: all .12s ease-in-out; /*Grow on hover*/
    font-family: sans-serif;
    border-radius: 7px;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
}

    .eventEditSection:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        transform: scale(1.012);
    }

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .eventEditSection {
            padding: 20px 20px 20px 20px;
            margin: 0 30px 30px 30px;
            width: auto;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode*/
        }
    }

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .eventEditSection:hover {
            transform: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode on hover*/
        }
    }

/*------------------------------------------ADMIN AREA STARTS-------------------------------------------*/

/*--------Admin Icons--------*/

.fa-save { /*SAVE Button*/
    color: #2ecc71;
}

    .fa-save:hover { /*SAVE Button*/
        color: #44d580;
    }


.fa-sign-out-alt { /*CANCEL Button*/
    color: #3498db;
}

    .fa-sign-out-alt:hover { /*CANCEL Button*/
        color: #52a7e0;
    }


.fa-edit { /*EDIT Button*/
    color: #000000;
}

    .fa-edit:hover { /*EDIT Button*/
        color: #404040;
    }

.fa-trash { /*DELETE Button*/
    color: #c0392b;
}

    .fa-trash:hover { /*DELETE Button*/
        color: #d55244;
    }

.adminHomeBoxesSameHeightRow { /*Multiple columns in same row - Ensures they are the same height*/
    margin: 10px 10px 10px 10px;
    padding: 10px;
    height: 100%; /*Keeps all columns in the row the same height*/
    width: 100%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); /*Shadow on hover*/
    transition: all .12s ease-in-out; /*Grow on hover*/
    font-family: sans-serif;
    border-radius: 7px;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
}

    .adminHomeBoxesSameHeightRow:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
        transform: scale(1.012);
    }

    @media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
        .adminHomeBoxesSameHeightRow {
            text-align: center;
            margin: 30px 30px 0 30px;
            width: auto;
            height: auto; /*Disables the auto-height columns to stop them overlapping in mobile mode*/
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode*/
        }
    }

    @media screen and (max-width: 768px) { /*Upon text breaking to own line*/
        .adminHomeBoxesSameHeightRow:hover {
            transform: none;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); /*Sets shadow to standard size when in mobile mode on hover*/
        }
    }

/*--------------------------------------------ADMIN AREA END-------------------------------------------*/

/*--------------------------------------------TECH COMMITTEE-------------------------------------------*/

.disk-img{
    max-width: 40px;
    padding-right: 1%;
    margin-right: 3px;
}
.split-img{
    max-width: 40px;
}
.folder-link {

    color: black;
    font-size: 1.1em;
    font-weight: 600;

}

/*--------------------------------------------CAB-------------------------------------------*/
.cabLogo {
    width: 100%; 
    max-width: 160px; 
    height: auto;
}

/*--------------------------------------------SYMPOSIUM HISTORY-------------------------------------------*/

.goldExhibitor {
    text-align: center;
    margin-bottom: 10px;
}

.goldExhibitorLeft {
    text-align: left;
    margin-bottom: 10px;
}

.goldExhibitorLeft img {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.silverExhibitor {
    margin-top: auto; /*Vertically centers*/
    margin-bottom: auto; /*Vertically centers*/
}

.silverExhibitorLeft {
    text-align: left;
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) { /*Upon menu breaking to own line*/
    .silverExhibitor {
        max-width: 150px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*----------------------------------------------CHAPTER PAGES---------------------------------------------*/

.aboutChapterFlag {
    padding: 0 10px 20px 10px;
    max-width: 130px;
}

/*---------------------------------------------INTERESTS PAGES--------------------------------------------*/

.interestsOutsideDiv {
    display: inline-block;
    padding: 10px
}

@media screen and (max-width: 768px) {
    .interestsOutsideDiv {
        display: block;
        padding: 10px 5px 10px 5px;
    }
}

.interestsInsideDiv {
    padding: 10px;
    text-align: center;
    vertical-align: middle;
    border-radius: 5px;
    background-color: #F1F3F4;
    border: 1px solid #d6d8db;
}

@media screen and (max-width: 768px) {
    .interestsInsideDiv {
        width: 100%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    .btn-danger {
        display: inline;
    }
}


.loginButton {
    padding: 0 !important;
}

@media screen and (min-width: 1506px) {
    .menuLoginButtonBtn {
        margin: 2px 0 0 10px !important;
    }
}

@media screen and (max-width: 1505px) and (min-width: 992px) {
    .menuLoginButtonBtn {
        margin: 16px 0 0 10px !important;
    }
}

.menuLoginButton {
    display: block;
    top: 50px;
    margin: 0 !important
}

@media screen and (max-width: 991px) and (min-width: 0) {
    .menuLoginButton { /*Centers login button when in mobile menu*/
        text-align: center !important;
        margin: 10px 0 10px 0;
    }
}

/* Programme Day outer table */
.day_table {
    width: 100%;
    border: 1px solid #666666;
}

/* Event Programme center card */
.card {
    margin: 0 auto; /* Added */
    float: none; /* Added */
    width: 100%;
    margin-bottom: 10px; /* Added */
}

/* Admin screen tables smaller font so more info fits on screen*/
.adminTable th {
    vertical-align: middle;
    font-size: 16px;
    padding-bottom: 10px; /* Added */
}

/* New CSS Marquee code as html tag is deprecated NC */
.marquee {
    width: 100%;
    line-height: 40px;
    background-color: rgba(255,255,255,0.2);
    color: white;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    padding:1% 0 1% 0;
}

    .marquee div {
        display: inline-block;
        padding-left: 100%;
        animation: marquee 15s linear infinite;
        /*        -moz-animation: scroll-left 15s linear infinite;
        -webkit-animation: scroll-left 15s linear infinite;*/
    }

        .marquee div span {
            padding-left: 15px
        }

@keyframes marquee {
    0% {
        -moz-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    100% {
        -moz-transform: translate(-100%, 0); /* Firefox bug fix */
        -webkit-transform: translate(-100%, 0); /* Firefox bug fix */
        transform: translate(-100%, 0);
    }
}



.button-program {


}



/* -------------------------------------- */