/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
*/
.scrollable {

  /* required settings */
  position:relative;
  overflow:hidden;
  width: 940px;
  height:320px;

  /* custom decorations */
  border:none;
}

/*
  root element for scrollable items. Must be absolutely positioned
  and it should have a extremely large width to accomodate scrollable items.
  it's enough that you set the width and height for the root element and
  not for this element.
*/
.scrollable .items {
  /* this cannot be too large */
  width:20000em;
  position:absolute;
  clear:both;
}

.items .slide {
  float:left;
  width:940px;
}

.items .slide .left {
  position:relative;
  top:0px;
  left:0px;
  width:460px;
  height:320px;
  background-color:#f3f5f2;
  overflow:hidden;
}

.items .slide .right {
  position:relative;
  top:-320px;
  left:480px;
  width:460px;
  height:320px;
  overflow:hidden;
}

.items .slide {
  overflow:hidden;
}

.items .slide h2 {
  padding:20px 20px 0px 10px;
  font-size:32px;
  font-weight:normal;
  color:#368ca2; /*#0096af;*/
  font-family:Myriad Pro,Tahoma,Arial,Helvetica,sans-sarif;
  line-height:28px;
}

.items .slide h3 {
  padding-left: 10px; 
  color:#368ca2;
  font-family: Myriad Pro, Tahoma, Arial, Helvetica, sans-serif; 
  font-weight: normal;
  font-size: 17px;
}
.items .slide p{
  /*padding:10px 20px 20px 10px;*/
  padding:10px 20px 0px 10px;
  color:#888;
  font-size:16px;
  font-family:Myriad Pro,Tahoma,Arial,Helvetica,sans-sarif;
  line-height:20px;
}


/* single scrollable item */
.scrollable > img {
  float:left;
  margin:20px 5px 20px 21px;
  background-color:#fff;
  padding:2px;
  border:1px solid #ccc;
  width:100px;
  height:75px;
  
  -moz-border-radius:4px;
  -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
  border:2px solid #000;
  position:relative;
  cursor:default;
}

.scrollable h2 {
  margin-top: 0;
}


/* position and dimensions of the navigator */
.navi {
  margin-left:15px;
  width:400px;
  height:20px;
  border:none;
  position:absolute;
  top:295px;
  left:10px;
}


/* items inside navigator */
.navi a {
  width:8px;
  height:8px;
  float:left;
  margin:3px;
  background:url(../img/navigator.png) 0 0 no-repeat;
  display:block;
  font-size:1px;
  border:none;
}

/* mouseover state */
.navi a:hover {
  background-position:0 -8px;      
}

/* active state (current page state) */
.navi a.active {
  background-position:0 -16px;
  border:none;
}



/* this makes it possible to add next button beside scrollable */
.scrollable {
 /* float:left;  */
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
  background:url(../img/bt_rect_hori_large.png) no-repeat;
  display:block;
  width:40px;
  height:40px;
  float:left;
  margin:40px 10px;
  cursor:pointer;
  font-size:1px;
  position:absolute;
  top:100px;
}

/* right */
a.right {
  background-position: 0 -40px;
  clear:right;
  margin-right: 0px;
  /*left:925px;*/
  left:455px;
}
a.right:hover   { background-position:-40px -40px; }
a.right:active   { background-position:-80px -40px; }


/* left */
a.left{
  margin-left: 0px;
  left:-15px;
  }
a.left:hover    { background-position:-40px 0; }
a.left:active    { background-position:-80px 0; }

/* up */
a.up:hover      { background-position:-40px 0; }
a.up:active      { background-position:-80px 0; }

/* down */
a.down         { background-position: 0 -40px; }
a.down:hover      { background-position:-40px -40px; }
a.down:active    { background-position:-80px -40px; }


/* disabled navigational button */
a.disabled {
  visibility:hidden !important;    
}   







/* Extra Small Devices, .visible-xs-* */
/* -----------------------------------*/
@media (max-width: 767px) {

	/*
	  root element for the scrollable.
	  when scrolling occurs this element stays still.
	*/
	.scrollable {

	  /* required settings */
	  position:relative;
	  left: -15px;
	  overflow:hidden;
	  width: 100vw;
	  height:420px;

	  /* custom decorations */
	  border:none;
	}

	/*
	  root element for scrollable items. Must be absolutely positioned
	  and it should have a extremely large width to accomodate scrollable items.
	  it's enough that you set the width and height for the root element and
	  not for this element.
	*/
	.scrollable .items {
	  /* this cannot be too large */
	  width:20000em;
	  position:absolute;
	  clear:both;
	}

	.items .slide {
	  float:left;
	  width:100vw;
	}

	.items .slide .left {
	  position:relative;
	  top:180px;
	  left:0px;
	  width:100vw;
	  height:270px;
	  background-color:#f3f5f2;
	  overflow:hidden;
	}

	.items .slide .right {
	  position:relative;
	  top:-270px;
	  left:0;
	  width:100vw;
	  height:180px;
	  overflow:hidden;
	}
	
	.items .slide .right img {
		width: 100%;
		height: auto;
		position: absolute;
		top:-20%;
	}

	.items .slide {
	  overflow:hidden;
	}

	.items .slide h2 {
	  padding:10px 15px 0px 15px;
	  font-size:14px;
	  font-weight:normal;
	  color:#368ca2; /*#0096af;*/
	  font-family:Tahoma,Arial,Helvetica,sans-serif;
	  line-height:18px;
	}

	.items .slide h3 {
	  padding-left: 15px;
	  padding-right: 15px;
	  color:#368ca2;
	  font-family: Tahoma,Arial,Helvetica,sans-serif;
	  font-weight: normal;
	  font-size: 12px;
    line-height:16px !important;
    hyphens: auto;
	  -webkit-hyphens: auto;
	}
  
  .items .slide h3 br {
    display: none;
  }
  
  .items .slide h3 a::after {
    content: "  |  ";
  }
  
  .items .slide h3 a:last-child::after {
    content: "";
  }

	.items .slide p{
	  /*padding:10px 20px 20px 10px;*/
	  padding:10px 30px 0px 15px;
	  color:#888;
	  font-size:12px;
	  font-family: Tahoma,Arial,Helvetica,sans-serif;
	  line-height:16px !important;
	  font-weight: normal;
	  hyphens: auto;
	  -webkit-hyphens: auto;
	}


	/* single scrollable item */
	.scrollable > img {
	  float:left;
	  margin:20px 5px 20px 21px;
	  background-color:#fff;
	  padding:2px;
	  border:1px solid #ccc;
	  width:100px;
	  height:75px;
	  
	  -moz-border-radius:4px;
	  -webkit-border-radius:4px;
	}

	/* active item */
	.scrollable .active {
	  border:2px solid #000;
	  position:relative;
	  cursor:default;
	}

	.scrollable h2 {
	  margin-top: 0;
	}


	/* position and dimensions of the navigator */
	.navi {
	  left: 50vw;
	  margin-left: -70px;
	  width:140px;
	  height:20px;
	  border:none;
	  position:absolute;
	  top:10px;
	  display: block;
	  text-align: center;
	}


	/* items inside navigator */
	.navi a {
	  width:8px;
	  height:8px;
	  float:left;
	  margin:3px;
	  background:url(../img/navigator.png) 0 0 no-repeat;
	  display:block;
	  font-size:1px;
	  border:none;
	}

	/* mouseover state */
	.navi a:hover {
	  background-position:0 -8px;      
	}

	/* active state (current page state) */
	.navi a.active {
	  background-position:0 -16px;
	  border:none;
	}



	/* this makes it possible to add next button beside scrollable */
	.scrollable {
	 /* float:left;  */
	}

	/* prev, next, prevPage and nextPage buttons */
	a.browse {
	  background:url(../img/bt_rect_hori_large.png) no-repeat;
	  display:block;
	  width:40px;
	  height:40px;
	  float:left;
	  margin:40px 10px;
	  cursor:pointer;
	  font-size:1px;
	  position:absolute;
	  top:60px;
	}

	/* right */
	a.right {
	  background-position: 0 -40px;
	  clear:right;
	  margin-right: 10px;
	  /*left:925px;*/
	  right: 0px;
	  left: auto;
	}
	a.right:hover   { background-position:-40px -40px; }
	a.right:active   { background-position:-80px -40px; }


	/* left */
	a.left{
	  margin-left: 10px;
	  left:0px;
	  }
	a.left:hover    { background-position:-40px 0; }
	a.left:active    { background-position:-80px 0; }

	/* up */
	a.up:hover      { background-position:-40px 0; }
	a.up:active      { background-position:-80px 0; }

	/* down */
	a.down         { background-position: 0 -40px; }
	a.down:hover      { background-position:-40px -40px; }
	a.down:active    { background-position:-80px -40px; }


	/* disabled navigational button */
	a.disabled {
	  visibility:hidden !important;    
	}

}

/* Small Devices, .visible-sm-* */
/* -----------------------------*/
@media (min-width: 768px) and (max-width: 991px) {

#No4 .scrollable{
  overflow: hidden;
  max-width: 100% !important;
  width: 100% !important;
}

#No4 a.browse {
	z-index: 10000;
}