/*************************************************/
/* ssb.css bevat de basisopmaak voor de site     */
/*************************************************/
:root {
  --ssb_yellow: #efe558;
  --ssb_red: #e00808;
  --ssb_text:#003399;
  --ssb_shadow: #ffffcc;
  --ssb_orange: #e7470c;
  font-size: 14px; /* standaard fontsize voor de website */
}

 *{
  box-sizing: border-box;
  padding: 0;
  margin: 0;

}
html{
	height: 100%;
}
body{
	background: linear-gradient(to right,var(--ssb_orange) , var(--ssb_yellow) 20%, var(--ssb_yellow) 80%,var(--ssb_orange)  );
	height: 100%;
  margin: 0;
  font-family: 'Poppins',arial;
  font-weight: 500;
  color: var(--ssb_text);
}

h1{ /*alleen te gebruiken voor de naam vd voorstelling in vak2 (rode achtergrond) */
  font-family: 'Atma', Arial;
	font-weight: 600;
	/* 400 is als normal*/
	font-style: italic;
	text-align: center;
  font-size: 3.0rem;
  color: var(--ssb_yellow);
  padding-top: 15px;
  padding-bottom: 15px;
}
h3{ /* te gebruiken voor de naam vd voorstelling in textvakken */
  font-family: 'Atma', Arial;
	font-weight: 400;
	/* 400 is als normal*/
	font-style: italic;
	text-align: center;
  font-size: 2.5rem;
  color: var(--ssb_red);
  padding-top: 5px;
  padding-bottom: 5px;
}



.ssb_font_Lemonada {
	font-family: 'Lemonada', cursive;
  font-weight: bold;
	text-align: center;
	/*text-shadow: 0.5px 0.5px 0.5px var(--ssb_yellow);*/
  /*border-top: 2px solid #003399;*/
}

.ssb_size{
  font-size: 1.5rem;
}

.ssb_xs{
  font-size: 0.75rem;
}


.ssb_underline{
  text-decoration: underline;
}



a{
  text-decoration: none;
  color: #111421;
}
img{
  max-width: 100%;
}

.ssb_border{
  border-style: solid;
  border-color: #003399;
  border-radius: 25px;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  z-index: 100;
  top: 0;
}


.ssb_skew{

  max-height: 400px;
	-ms-transform: skew(3deg,-5deg); /* IE 9 */
  -webkit-transform: skew(3deg,-5deg); /* Safari 3-8 */
	border-radius: 25px;
  border-style: solid;
  border-color: white;
  transform: skew(3deg,-5deg);
	box-shadow: 10px 10px  #cc0000;

}


.ssb_button{ color: #efe558;
background-color: #cc0000;
padding: 5px 5px;
text-align: center;
text-decoration: none;
cursor: pointer;
border-radius: 25px;
}


.ssb_active{
	background-color: #cc0000;
}
/* Fixed/sticky icon bar (vertically aligned 50% from the top of the screen) */
.icon-bar {
  position: fixed;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Style the icon bar links */
.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 20px;
}

/* Style the social media icons with color, if you want */
.icon-bar a:hover {
  background-color: #000;
}
/*#icon-bar a[class*="facebook"] span { background: #3b5998; }*/
.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}
}