/* css */

body > header {
  position: absolute !important;
  z-index: 110;
  top: 0;
  right: 0;
  width: 100%;
}

main
{
  min-height:0; 
  background:none; 
  padding:0;
  max-width:100%;
}

#html5_map
{
  text-align:center;
  border:none;
  height:400px;


  margin: 30px auto;
  width: 600px;
  margin:20px auto;
}

#html5_map svg
{
  /*width:100%;*/
}

#html5_map svg path {
  stroke: #fff;
  stroke-width: 2;
}

#header_logo_home
{
  height:246px;
  width:16%;
  background:url(images/sbs-logo.svg) left top no-repeat;
  background-size:100% auto;
  display: block;
  position:absolute;
  top:70px;
  margin: 0 auto;
  padding:0;
  background-size:contain;
  border:none;
}
#header_slide_show {width:75%;margin: 0 auto;}
#header_map_wrapper {
  min-height: 350px;
  padding-top: 20px;
  max-width: 100%;
  overflow: hidden;
  position: relative;
  background: #fff;
}


footer {overflow:hidden;/*ipad fix*/}

#galleria_header_slideshow {}
#row_2_slideshow_wrapper {}

/*START: Full screen width background bands */


/*:END*/
#row_1 {position:relative;color:#000;background:#fff;padding:50px 20px;}
#row_1 .flex_column {width:50%;min-height:100px;padding:12px;margin:15px;}
#row_1 h1 {color:#000;}
#row_1 .fantom-border {
  background: #c0d52e;
  width: 40%;
  height: 4px;
  display: block;
  position: absolute;
  bottom: 0;
}

#row_2{padding:50px 20px 20px 20px;}
#row_2 h2 {color:#000;margin:0;}

#row_3 {padding: 20px 20px 80px 20px;}
/** Flexible columns **/
#row_3 ul {
  display: grid;
  list-style: none;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 5px;
  padding:0;
  margin:0;
}

#row_3 ul li {
  display: block;
  width: 100%;
  max-width: 100%;
  border: none;
}

#row_3 ul li a, #row_3 ul li a:visited, #row_3 ul li a:hover {
  background: #014880;
  display: block;
  line-height: 60px;
  padding: 0 12px;
  color: #fff;
  text-align: center;
  font-weight: ;
}
#row_3 ul li a:hover
{
  background:#002848;
}

.flex_column_1{order: 1;}
.flex_column_2{order: 2;}

footer .flex_column {margin-bottom:15px;}

.arct_item_toolbar {z-index: 11;} /*Needed so toolbar shows up over other elements*/

/* CALENDAR */

.event_filter
{
  display:none;/*not used on home page*/
}
.event-date-icon
{
  position:absolute;
  background:url(images/calendar_icon.png) center top repeat-y;
  height: 62px;
  margin: 0 0 0 -60px;
  width: 58px;
}

.event-date-icon div:first-child
{
  color: #FFFFFF;
  font-size: 11px;
  padding: 8px 4px 2px 0; /*tweaks text horizontal centering as well*/
  text-align: center;
}

.event-date-icon-day
{
  color: #666666;
  font-family: georgia;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding-right: 5px;
}

#event_calendar_2_module .item 
{
  font-size:.85em;
}

#event_calendar_2_module .item_group
{
  margin-bottom:34px;  
}

#event_calendar_2_module h3
{
  border-bottom:1px solid #ccc;  
}

#event_calendar_2_module h3 a, 
#event_calendar_2_module h3 a:visited
{
  font-size:1.2em;
  color: #000;
  font-weight:normal
}


#event_calendar_2_module h3 a:hover 
{
  color:#FB0633;
  text-decoration:none !important;
}

#event_calendar_2_module .location_name {
  color: #666;

}

@media (max-width: 1280px),(max-device-width: 1280px)
{
  /*Extra wide backgrounds don't show below this resolution*/
  #row_1,#row_2 {height:auto;}
  #row_1:before,#row_2:before {display:none;}
}

@media (max-width: 940px),(max-device-width: 940px)
{

}

@media (max-width:900px),(max-device-width: 900px)
{
  #header_slide_show {width:100%;margin: 0 auto;}



  #row_1 .item {width:50%;}
  #row_1 .item_center {width:100%;float:none;clear:both;min-height:20px;}

  #row_2 .flex_column {width:100%;}
  #row_2.flex_columns {flex-direction:column;}

  #row_1 .item_w_image
  {
    width:100%;
  }

  #row_3 ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }

}

@media (max-width:768px),(max-device-width: 768px)
{
  #header_logo_home
  {
    width:23%; 
  }
  #row_3 ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width:640px),(max-device-width: 640px)
{
  #row_1 .flex_column {width:100%;margin:0;padding:15px;min-height:auto;}
  #row_1.flex_columns {flex-direction:column;}

  #row_1 .flex_column:nth-child(2) {background:#fff;color:#000;margin-bottom:20px;}



  #html5_map
  {
    text-align:center;
    border:none;
    margin: auto;
    left:calc(50% - 200px); /*Center map for cropping*/
    position:absolute;
  }

  #html5_map svg {height:calc(80vw);}
  #header_map_wrapper{padding-top:90px;}
  #header_logo_home
  {
    top: 0px;
    background-position:center top;
    background-size: contain;
    height: 90px;
    left: calc(50% - 50px);
    top: 0;
    width: 100px;
    margin-top:20px;
  }

}

@media (max-width:400px),(max-device-width: 400px)
{
  #row_3 ul {
    grid-template-columns: 1fr 1fr;
  }
}