/* STYLE FOR NEW SPiC WEBSITE REDESIGN */
/*
Heading font-color: #444444;
Body font-color: #333333;
*/

/*----------------------------------------
 #CONTAINER
-----------------------------------------*/
#spic-red-banner{
	padding: 50px 0px;
}

#spic-red-cube{
	text-align: center;
	/*border: solid 2px #eaecf0;*/
	border-radius: 50px;
	background: #ffffff;
	padding: 20px;
	margin: 0 5px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
}

#spic-red-icon{
	display: inline-block;
	border-radius: 20px;
	background: #ffffff;
	padding: 15px;
	margin: 10px 10px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
}

#spic-red-icon-text{
	display: inline-table;
	vertical-align: middle;
}

/*----------------------------------------
 #TEXT ELEMENT
-----------------------------------------*/
.spic-red-header h1, .spic-red-header h2, .spic-red-header h3, .spic-red-header h4{
	color: #444444;
	font-family: 'Roboto', sans-serif;
}

.spic-red-body p{
	color: #333333;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 150%;
	text-align: justify;
	margin: 1em 1em 0 0;
}

.spic-red-header h1{
	font-size: 60px;
	font-weight: bold;
	line-height: 60px;
}

.spic-red-header h2{
	font-size: 40px;
	margin: 10px 0px;
	font-weight: bold;
	text-align: center;
}

.spic-red-header h3{
	font-size: 24px;
	margin: 15px 0px;
	font-weight: normal;
}

.spic-red-header h4{
	font-size: 22px;
	text-transform: none;
	margin: 5px 0px;
	font-weight: 700;
}

.spic-red-dot{
	font-family: 'Roboto', sans-serif;
  	color: #00a7e7;

}
.spic-red-dot::before {
    content: ".";
}
/*----------------------------------------
 #BUTTON
-----------------------------------------*/
.spic-red-detail{
	padding: 0px;
}

.spic-red-detail a{
	font-family: 'Roboto', sans-serif;
	width: 160px;
	text-align: center;
	padding: 5px 0px;
    font-size: 16px;
    margin: 10px 0px;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, .06), 0px 1px 3px rgba(0, 0, 0, .1);
}

.spic-red-detail.act-btn a{
	background: #00a7e7;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #ffffff;
}

.spic-red-detail.nav-btn a{
	background: #ffffff;
	border: solid 2px #00a7e7;
    border-radius: 30px;
    color: #00a7e7;
}

/*----------------------------------------
 #BUTTON HOVER
-----------------------------------------*/
.spic-red-detail.act-btn a:hover {
    background: #ffffff;
    color: #00a7e7;
}

.spic-red-detail.nav-btn a:hover {
    background: #00a7e7;
	color: #ffffff;
}

/*----------------------------------------
 #PROGRAMME
-----------------------------------------*/
.spic-red-programme{
	
}

.spic-red-logo{
	width: 70%;
	height: auto;
}

.spic-red-partner{
	margin: 0px 0px 15px;
}

/*----------------------------------------
 #BANNER TICKER
-----------------------------------------*/
/* Wrapper: hides overflow */
.banner-ticker-wrapper {
  width: 100%;
  overflow: hidden;
  background-color: #e12228;  /* Banner background */
}

/* Scrolling ticker */
.banner-ticker {
  display: inline-block;
  white-space: nowrap;
  animation: ticker-scroll 20s linear infinite;
}

/* Individual messages */
.banner-ticker span {
  display: inline-block;
  margin-right: 5px; /* spacing between messages */
  color: #ffffff;
  font-size: 14px;
}

/* Animation: start fully right, scroll to left */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%); /* scroll half because content is duplicated */
  }
}

/* Responsive font size for mobile */
@media (max-width: 768px) {
  .banner-ticker span {
    font-size: 14px;
    margin-right: 20px;
  }
}

/* Pause on hover */
.banner-ticker-wrapper:hover .banner-ticker {
  animation-play-state: paused;
}