/* Write your custom css code here */

/* for article titles */
.page-header h2 {
    font-size: 24px;
}

/* for home page title */
h2.item-title {
    font-size: 24px !important;
}

/* make h3 red, as in old site */
h3, .h3 {
    color: #eb1337;
}

/* hack problem with the sun framework */
/* the position content-left should not display in tablet mode */
/* or in phone mode either (although that was working correctly) */
@media screen and (max-width: 991px) {
    div.content-left { display: none !important;
    }
}

/* hack related issues with the sun framework */
/* arrange that the main content displays full with in tablet mode */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .col-sm-9 { width: 100%;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .sunfw-flex-component > .col-sm-9 {  
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* remove unwanted blank space above the breadcrumbs */
#column_column-7 {
    padding-top: 0;
}

div.content-center {
    margin-top: 0;
}

/* define structures for the marketing style */
/* heading 1 needs to clear left */
h1.mrt-mkt {
    clear: left;
}

/* a row contains an image and a patch, */
/* patch below image for small devices, otherwise side by side */
/* fixed part of the ruleset */
div.mrt-mkt-row {   
    padding-top: 5px;  
    padding-bottom: 5px;
    clear: left;
}

/* variable part of the ruleset */
@media screen and (min-width: 768px) {
    div.mrt-mkt-row { display: block;
    }
}

/*  the image part of a row */
div.mrt-mkt-img {
/*    max-width: 330px; */
    float: left; 
    margin-left: 1%; 
    margin-right: 1%; 
/*  margin-left: 10px; 
    margin-right: 5px; */
/*    vertical-align: middle;  */
    text-align: center;
}

/* variable part of the ruleset for these images */
/* set a width for non-mobile devices, to make the row structure work */
@media screen and (min-width: 768px) {
    div.mrt-mkt-img { 
/*        width: 300px; */
        width: 40%;    
    }
}

/* for mobile devices set the width to 95% */
@media screen and (max-width: 768px) {
    div.mrt-mkt-img { width: 95%;
    }
}

/* for headers in the image area */
h2.mrt-mkt-img-head {
    text-align: left; 
/*    max-width: 300px; */
    max-width: 95%;
}

/* for images */
/* fixed part of the ruleset */
img.mrt-mkt-img {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 2px solid black;
}

/* variable part of the ruleset for these images */
/* set a width for non-mobile devices, to make the row structure work */
@media screen and (min-width: 768px) {
    img.mrt-mkt-img { 
/*        width: 300px; */
        width: 96%;    
    }
}

/* for mobile devices set a fixed width */
@media screen and (max-width: 768px) {
    img.mrt-mkt-img { width: 300px;
    }
}

/* for borderless images */
/* fixed part of the ruleset */
img.mrt-mkt-img-0b {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

/* variable part of the ruleset for these images */
/* set a width for non-mobile devices, to make the row structure work */
@media screen and (min-width: 768px) {
    img.mrt-mkt-img-0b { 
/*        width: 300px; */
        width: 96%;    
    }
}

/* for mobile devices set a fixed width */
@media screen and (max-width: 768px) {
    img.mrt-mkt-img-0b { width: 300px;
    }
}

/* for image captions */
p.mrt-mkt-img {
/*    max-width: 300px; */
    max-width: 96%;
}

/* the patch part of a row */
div.mrt-mkt-patch {
    float: left; 
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 8px;
/*    margin-left: 5px; */
    margin-left: 1%;
    margin-right: 1%;
    padding-left: 5px;
    padding-right: 5px;
    color: white;
}

/* variable part of the ruleset for patches */
/* properties for non-mobile devices */
@media screen and (min-width: 768px) {
    div.mrt-mkt-patch { 
/*        max-width: 420px;
        margin-right: 10px; */
        width: 55%;
    }
}

/* variable part of the ruleset for patches */
/* equivalent properties for mobile devices */
@media screen and (max-width: 768px) {
    div.mrt-mkt-patch { 
        width: 95%;
    }
}

/* background colours for patches */
div.mrt-maroon {
    background-color: #a80c0d;
}

div.mrt-HEgreen {
    background-color: #28622c;
}

div.mrt-MWblue {
    background-color: #1c2852;
}

div.mrt-MSCgrey {
    background-color: #687077;
}

div.mrt-NEgreen {
    background-color: #7e960c;
}

/* internal patch structure needs a two cell table */
/* first cell for text, second cell for links */
table.mrt-mkt-patch {
    border: 0px;
}

/* first cell of table */
td.mrt-mkt-patch {
    vertical-align: top;
    padding-left:  5px;
    padding-right: 5px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: white;
}

/* text within cells of tables */

h2.mrt-mkt-text {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 150%; 
    font-weight: normal;
    color: white;
}

ul.mrt-mkt-t1 {
    font-size: 120%; 
    list-style-type: disc;
    margin-top: 0px;
    padding-top: 0px; 
    padding-top: 0px;
    padding-bottom: 0px; 
    color: white;
}

ul.mrt-mkt-t2 {
    list-style-type: circle;
    padding-top: 0px; 
    padding-bottom: 0px; 
    color: white;
}

li.mrt-mkt-t1 {
    color: white;
    padding-bottom: 0px; 
    padding-top: 0px; 
}

li.mrt-mkt-t2 {
    color: white;
    padding-bottom: 0px; 
    padding-top: 0px; 
}

p.mrt-mkt-t1 {
    font-size: 120%; 
    color: white;
    padding-bottom: 0px; 
    padding-top: 0px; 
}

ul.mrt-mkt-links {
    font-size: 120%; 
    list-style-type: none;
    padding-top: 0px; 
    padding-bottom: 0px; 
    color: white;
}

span.mrt-mkt-links {
    padding-left: 18px; 
    text-decoration: underline;
    color: white;
}

/* define wide patches */
div.mrt-mkt-wide {
    width: 97%;
    float: left; 
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 8px;
    margin-left: 10px; 
    margin-right: 5px; 
    padding-left: 5px;
    padding-right: 5px; 
    color: white;
}

/* control images in ordinary style pages */
img.mrt-plain {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 0;
/* incorporate img-responsive from Bootstrap */
    display: block;
/*  max-width: 100%; not needed - is already included */
    border: 2px solid black;
}

/* variable part of the ruleset for landscape images */
/* set a width for non-mobile devices */
@media screen and (min-width: 768px) {
    img.mrt-land { width: 540px;
    }
}

/* variable part of the ruleset for portrait images */
/* set a width for non-mobile devices */
@media screen and (min-width: 768px) {
    img.mrt-port { width: 400px;
    }
}

/* control list styles in ordinary pages */
ul.mrt-plain {
    list-style-type: disc;
}

li.mrt-plain {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 10px;
}

/* adjust heading margins, etc in ordinary pages */
h1.mrt-plain {
    clear: left;
}

h2.mrt-plain {
    clear: left;
    margin-top: 5px;
}

h3.mrt-plain {
    clear: left;
    margin-top: 5px;
}

/* adjust paragraph right padding, etc in ordinary pages */
p.mrt-plain {
    clear: left;
}

@media screen and (min-width: 992px) {
    p.mrt-plain { padding-right: 15px;
    }
}


/* hide elements on mobile devices */
@media screen and (max-width: 768px) {
    div.mrt-hide-on-mobile { display: none;
    }
}

@media screen and (max-width: 768px) {
    p.mrt-hide-on-mobile { display: none;
    }
}

/* hide elements on desktop devices */
@media screen and (min-width: 993px) {
    div.mrt-hide-on-desktop { display: none;
    }
}

div.mrt-hide-on-desktop {
    clear: left;
}

/* and hide unwanted divisions or paragraphs unconditionally */
div.mrt-hide-always { 
    display: none;
}

p.mrt-hide-always { 
    display: none;
}

/* define structures for the semi-marketing style */
/* the equivalent of a patch */
div.mrt-semi {
/*    max-width: 420px; */
    float: left; 
/*    margin-left: 5px; 
    margin-right: 10px; */
    margin-left: 1%; 
    margin-right: 1%; 
}

/* variable part of the ruleset for these patches */
/* properties for non-mobile devices */
@media screen and (min-width: 768px) {
    div.mrt-semi { 
        width: 55%;
    }
}

/* equivalent properties for mobile devices */
@media screen and (max-width: 768px) {
    div.mrt-semi { 
        width: 95%;
    }
}

/* hide event numbers in the calendar */
#cal_event p b {
    display: none;
}
#cal_event p:first-child {
    display: none;
}

/* styles for real tables */
table.mrt-table {
    background-color: #ffffff;
    border-style: solid;
    border-collapse: separate;
    border-width: 1px;
    border-spacing: 1px;
}

@media screen and (min-width: 992px) {
    table.mrt-table { margin-right: 15px;
    }
}

th.mrt-table {
    border-style: solid;
    border-width: 1px;
    padding-left:  2px;
    padding-right: 2px;
}

td.mrt-table {
    border-style: solid;
    border-width: 1px;
    padding-left:  2px;
    padding-right: 2px;
}

/* styles for rows for side caption images */
/* landscape images first */

/* the image part of the row */
div.mrt-side-im-land {
/*    max-width: 560px; */
    float: left; 
/*    margin-left: 10px; 
    margin-right: 5px;  */
    margin-left: 1%; 
    margin-right: 1%; 
    text-align: center;
}

/* and the variable parts of this ruleset */
@media screen and (min-width: 768px) {
    div.mrt-side-im-land { 
        width: 75%;  
    }
}

@media screen and (max-width: 768px) {
    div.mrt-side-im-land { 
        width: 95%;
    }
}

/* and the caption part of the row */
div.mrt-side-cap-land {
/*     max-width: 210px;  */
    float: left; 
/*    margin-left: 5px; 
    margin-right: 10px; */
    margin-left: 1%; 
    margin-right: 1%; 
}

/* and the variable parts of this ruleset */
@media screen and (min-width: 768px) {
    div.mrt-side-cap-land { 
        width: 20%;  
    }
}

@media screen and (max-width: 768px) {
    div.mrt-side-cap-land { 
        width: 95%;
    }
}

/* and the equivalents for portrait images */

/* the image part of the row */
div.mrt-side-im-port {
/*    max-width: 420px; */
    float: left; 
/*    margin-left: 10px; 
    margin-right: 5px;  */
    margin-left: 1%; 
    margin-right: 1%; 
    text-align: center;
}

/* and the variable parts of this ruleset */
@media screen and (min-width: 768px) {
    div.mrt-side-im-port { 
        width: 55%;
    }
}

@media screen and (max-width: 768px) {
    div.mrt-side-im-port { 
        width: 95%;
    }
}

/* and the caption part of the row */
div.mrt-side-cap-port {
/*    max-width: 330px;  */
    float: left; 
/*    margin-left: 5px; 
    margin-right: 10px;  */
    margin-left: 1%; 
    margin-right: 1%; 
}

/* and the variable parts of this ruleset */
@media screen and (min-width: 768px) {
    div.mrt-side-cap-port { 
        width: 40%;
    }
}

@media screen and (max-width: 768px) {
    div.mrt-side-cap-port { 
        width: 95%;
    }
}

/* styles for rows with equal halves */

/* fixed part of the ruleset for the row itself */
div.mrt-equal-row {   
    padding-top: 5px;  
    padding-bottom: 5px;
    clear: left;
}

/* variable parts of the ruleset */
@media screen and (min-width: 768px) {
    div.mrt-equal-row { display: block;
    }
}

@media screen and (min-width: 992px) {
    div.mrt-equal-row { margin-right: 15px;
    }
}

/* fixed part of the ruleset for one half */
div.mrt-equal {
    margin-left: 1%; 
    margin-right: 1%; 
    float: left; 
}

/* and variable part of the ruleset */
@media screen and (min-width: 768px) {
    div.mrt-equal { 
      width: 48%;
    }
}

@media screen and (max-width: 768px) {
    div.mrt-equal { 
        width: 95%;
        text-align: center;
    }
}

/* for ordinary centred images, to be displayed at width */

img.mrt-centred {
    height: auto;
    margin-left: auto;
    margin-right: auto;
    border: 0;
}

/* for centred captions and other text */

h1.mrt-centred {
/*    max-width: 96%; */
    text-align: center;
}

p.mrt-centred {
/*    max-width: 98%; */
    text-align: center;
}

ul.mrt-centred {
/*    max-width: 96%; */
    text-align: center;
}

li.mrt-centred {
/*    max-width: 96%; */
    text-align: center;
}

/* for buttons (eg for links) */

.mrt-button {
    border:none;
    border-radius:8px;
    display:inline-block;
    padding:8px 16px;
    vertical-align:middle;
    overflow:hidden;
    text-decoration:none;
    color:inherit;
    background-color:inherit;
    text-align:center;
    cursor:pointer;
    white-space:nowrap
}

.mrt-button:hover {
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)
}

.mrt-btn-blue {
    color:#fff!important;
    background-color:#2196F3!important
}

.mrt-btn-brown {
    color:#fff!important;
    background-color:#471312!important
}

/* Style the buttons that are used to open and close an accordion panel */
.MRT-accord {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

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

/* Style an accordion panel. Note: hidden by default */
.MRT-panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}

.MRT-accord:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.MRT-active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}