/*.rood {  color: #800000;}
.geel {  color: #ffcc00;}
.wit  {  color: #ffffff;}
.donkergrijs {  color: #aaaaaa;}
*/

html {
    background: #ffffff;
    font-size: 100.01%;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: #f3f5f6;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}
  

body {
    font-family: verdana, 'Open Sans', sans-serif;    
  background: url('https://www.suikerzak.nl/sz/images/bg.png') top left;
    background-repeat: repeat;
  color: #000000;
  margin: 0px !important;
}

body {
    line-height: 18px;

    
}


xdiv#kop img {
    transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    -webkit-transform: scale(1.1, 1.1);
}


#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0px auto;
    padding-bottom: 30px;
    background: #ffffff;
  border: 1px solid #525252;  
  width: 1132px;
}

.container {
    width: 1132px;
  position: relative;
  margin: 0 auto;
}

p,li {
    font-size: 0.8em !important;
}

td {
    font-size: 0.9em !important;
}



h3 {
    font-size: 0.9em !important;
}

td
{
  vertical-align: top !important;
     
}

/* ###################### general ###################### */
#all {
    margin: 0 auto;
    max-width: 1050px;
    padding: 0;
    text-align: left;
    font-size: 0.8em;
  border: 1px solid #800000;
  border-radius: 15px;
  box-shadow: 5px 5px 30px #aaaaaa;
  background: #ffffff;
}

#header {
    display: block !important;
    position: relative;    
    overflow: hidden;
}



#contentarea,
#contentarea2 {
    position: relative;
    overflow: hidden;
    padding: 0px 0px !important;    
    margin: 0 auto;
}

#linkerkolom
{
    padding: 0;
    float: left;
    margin: 0;
    width: 23%;
    position: relative
}

#middenkolom
{
    padding: 0;
    float: left;
    width: 50%;
    position: relative;
  margin: 0 25px 0 35px;
}

#middenkolom a
{
  color: #800000;
  text-decoration: none;
}

#middenkolom a:hover
{
  color: #cccccc;
  text-decoration: none;
}

#middenkolom h3
{
  color: #ffcc00;
}

#middenkolom ul
{
  margin-left: 20px;
}

#rechterkolom
{
    padding: 0;
    float: right;
    margin: 0;
    width: 21%;
    position: relative
}


#wrapper2 {
    width: 72%;
    float: left;
    position: relative;
    padding-bottom: 20px;
    overflow: hidden

}

#wrapper2 .item-page {
    max-width: 660px
}

#main {
    padding-top: 10px;
    padding-bottom: 20px;
    position: relative;

}

/* ###################### main ###################### */

/* ++++++++++++++  position  ++++++++++++++ */

.blog-featured {
    padding: 0;
}

.items-leading {
    padding: 0;
    overflow: hidden;
    margin-bottom: 0px;
}

.row-separator {
    display: block;
    clear: both;
    margin: 0;
    border: 0;
    height: 1px
}

.item-separator {
    display: none;
    margin: 0;
}

.shownocolumns {
    width: 98% !important;
}

#top {
    margin: 0 0 20px 0;
    overflow: hidden
}

/* ++++++++++++++  blog  ++++++++++++++ */

.cols-1 {
    display: block;
    float: none !important;
    margin: 0 !important;
}

.cols-2 .column-1 {
    width: 46%;
    float: left;
}

.cols-2 .column-2 {
    width: 46%;
    float: right;
    margin: 0
}

.cols-3 .column-1 {
    float: left;
    width: 29%;
    padding: 0 5px;
    margin-right: 4%

}

.cols-3 .column-2 {
    float: left;
    width: 29%;
    margin-left: 0;
    padding: 0 5px
}

.cols-3 .column-3 {
    float: right;
    width: 29%;
    padding: 0 5px
}

.items-row {
    overflow: hidden;
    margin-bottom: 0px !important;
}

.column-1,
.column-2,
.column-3 {
    padding: 0px 0px;
}

.column-2 {
    width: 55%;
    margin-left: 40%;
}

.column-3 {
    width: 30%
}

.blog-more {
    padding: 10px 5px
}


img {
    border: 0 none;
}






/* +++++++++++++++  menus ++++++++++++++++++++++++ */



#header ul {
position: relative;
display: block;
text-align: center;
list-style-type: none;
}


#header ul.menu {
  width: auto;
  text-align: center;  
  background-color: #ffcc00;
  height: 40px;
  margin-top: 0px;
  padding-top: 16px;
  padding-left: 0px;
}

#header ul.menu li {
  display: inline;
}

#header ul.menu li a{
  padding: 0 1%;
  color: #800000;
  text-decoration: none;
  border-radius: 5px;
  padding: 10px;
  font-variant: small-caps;
  font-size: 18px;
}

#header ul.menu li a:hover
{
  color: #ffffff;
  font-variant: small-caps;
  background: #800000;
  padding: 10px;
  border-radius: 5px;
  transition: ease-in 1s;
}


#footer
{
  background-color: #ffcc00;
  padding: 20px;
  text-align: center;
  font-size: 12px;
  margin: 13px;
  border-radius: 15px;
}



h1
{
  color: #800000;
  font-size: 20px;
  line-height: 25px;
  padding-bottom: 13px;
  border-bottom: 1px solid #800000;
  margin-bottom: 17px;
}

h2
{
  color: #800000;
  font-size: 17px;
  line-height: 21px;
  margin-bottom: 7px;
  margin-top: 30px;
}

.moduletableoverdeclub ul, .moduletableoversuiker ul, .moduletableadressen ul, .moduletableadvertenties ul, .moduletableinlog ul, .moduletablecatalogi ul, .moduletablewikkeltjes ul, .moduletablezoekendatabase ul, .moduletableaantal ul, .moduletablevraagenaanbod ul
{
  list-style-type: none;
  width: 80%;
}

.moduletableoverdeclub ul.menu, .moduletableoversuiker ul.menu, .moduletableadressen ul.menu, .moduletableadvertenties ul.menu, .moduletableinlog ul.menu, .moduletablecatalogi ul.menu, .moduletablewikkeltjes ul.menu, .moduletablezoekendatabase ul.menu, .moduletableaantal ul.menu, .moduletablevraagenaanbod ul.menu
{
  margin-left: 17px;
}

.moduletable h3, .moduletableoverdeclub h3, .moduletableoversuiker h3, .moduletableadressen h3, .moduletableadvertenties h3, .moduletableinlog h3, .moduletablecatalogi h3, .moduletablewikkeltjes h3, .moduletablezoekendatabase h3, .moduletableaantal h3, .moduletablevraagenaanbod h3, .moduletablesuikerzakjevandeweek h3
{
  background: #800000;
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 3px 3px 20px #aaaaaa;
}

.moduletableoverdeclub ul li a, .moduletableoversuiker ul li a, .moduletableadressen ul li a, .moduletableadvertenties ul li a, .moduletableinlog ul li a, .moduletablecatalogi ul li a, .moduletablewikkeltjes ul li a, .moduletablezoekendatabase ul li a, .moduletableaantal ul li a, .moduletablevraagenaanbod ul li a
{
  color: #800000;
  text-decoration: none;
}

.moduletableoverdeclub ul li a:hover, .moduletableoversuiker ul li a:hover, .moduletableadressen ul li a:hover, .moduletableadvertenties ul li a:hover, .moduletableinlog ul li a:hover, .moduletablecatalogi ul li a:hover, .moduletablewikkeltjes ul li a:hover, .moduletablezoekendatabase ul li a:hover, .moduletableaantal ul li a:hover, .moduletablevraagenaanbod ul li a:hover
{
  color: #cccccc;
  text-decration: none;
}

.moduletablevraagenaanbod p
{
  margin-left: 8px;
}
.moduletableadvertenties a, .moduletablevraagenaanbod a
{
  color: #800000;
  text-decoration: none;
}

.moduletableadvertenties a:hover, .moduletablevraagenaanbod a:hover
{
  color: #cccccc;
  text-decration: none;
}

#vraagenaanbod h3
{
  color: #800000;
  font-size: 20px;
  line-height: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #800000;
  margin-bottom: 10px;
}

.customadvertenties
{
  background: #fdf9ed;
  padding: 10px;
  border-radius: 15px;
  font-size: 90%;
  margin-top: 50px;
}

.moduletablecontact h3
{
  background: #800000;
  color: #ffffff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 3px 3px 20px #aaaaaa;
}

.moduletablecontact a
{
  color: #800000;
  text-decoration: none;
}

.moduletablecontact a:hover
{
  color: #cccccc;
  text-decration: none;
}

th
{
  background-color: #cccccc !important;
}


ul.menu li a:hover
{
  color: #ffffff;
  background: #800000;
  border-radius: 2px;
  padding: 2px;
}

li.current
{
  font-weight: bold;
}

.pagination ul li
{
  display: inline;
  padding: 0 10px 0 10px;
}

.moduletablebeeldmerk, .custombeeldmerk
{
 -webkit-transition: all 3s ease-in;
-moz-transition: all 3s ease-in;
-ms-transition: all 3s ease-in;
-o-transition: all 3s ease-in;
transition: all 3s ease-in;
}








#f1_container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 200px;
  z-index: 1;
}
#f1_container {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
}
#f1_card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1.0s linear;
  -moz-transform-style: preserve-3d;
  -moz-transition: all 1.0s linear;
  -o-transform-style: preserve-3d;
  -o-transition: all 1.0s linear;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
#f1_container:hover #f1_card, #f1_container.hover_effect #f1_card {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);

  -webkit-box-shadow: -5px 5px 5px #aaa;
  -moz-box-shadow: -5px 5px 5px #aaa;
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  -webkit-transform: rotateY(180deg);
  -webkit-box-sizing: border-box;
  -moz-transform: rotateY(180deg);
  -moz-box-sizing: border-box;
  -o-transform: rotateY(180deg);
  -o-box-sizing: border-box;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: black;
  text-align: center;
  background-color: #fff;
  border-radius: 50px;
}


.honderdduizend
{
  font-size: 20px;
  text-align: center;
}

tr.letter
{
  background: #ff0000;
  height: 35px;
}

p.letter
{
  background: #ff0000;
  height: 35px;
}

td.letter2 {
    padding: 20px;
  background: #ff0000;
}

p.letter2 {
    background: #ff0000;
}

td.jaartal, td.geschiedenistekst, td.afbeelding {
    padding: 0 10px 0 10px;
  border: 1px solid #525252;
}