/*
 Theme Name:     Zangspel
 Description:    Zangspel Child Theme
 Author:         Zang & Spel
 Author URI:     https://www.zangspel.nl
 Template:       Divi
 Version:        1.0.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

@font-face {
 font-family: MUSED_STICKS;
 src: url('/wp-content/uploads/et-fonts/MUSED_STICKS.ttf');
}

@font-face {
 font-family: MUSED;
 src: url('/wp-content/uploads/et-fonts/MUSED.ttf');
}


.table-lied {
    
}

.table-lied th { 
    background-color: #f46c5d;
    color: white !important;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    }

.table-lied tr:hover { 
    background: rgba(244,108,93,0.56) !important;
    color: white;
    }


.table-lied tr th.firstcol {
    position:sticky;
	left:0;
	z-index:1;
}

.table-lied td:first-child {
    position:sticky;
	left:0;
	z-index:1;
    background-color: white;
}

.table-lied tr:hover td:first-child { 
    background: rgb(ccc / 30%)!important;
    color: white;
    }

.Game {
    height: 25px;
    width: 25px;
}

.Game:hover {
    content: url('http://www.zangspel.nl/wp-content/uploads/2021/01/playing-hover.png');
    height: 25px;
    width: 25px;
    z-index: 9999;
}

.table_button {
    color: #f46c5d!important;
    border: 2px solid;
    border-width: 12px!important;
    border-color: rgba(0,0,0,0);
    border-radius: 40px;
    letter-spacing: 4px;
    font-size: 16px;
    font-family: 'Fredoka One',display!important;
    text-transform: uppercase!important;
    background-color: #ffffff;
    padding: 0.3em 1em!important;
    box-shadow: 0px 12px 38px -6px rgb(0 0 0 / 30%);
    transition: letter-spacing 300ms ease 0ms;
    margin: 20px;
    position: relative;
}

.lied-onderdeel {
    color: #f46c5d!important;
	border: 2px solid;
    border-width: 12px!important;
    border-color: rgba(0,0,0,0);
    border-radius: 5px;
    letter-spacing: 4px;
    font-size: 16px;
    font-family: 'Fredoka One',display!important;
    text-transform: uppercase!important;
	background-color: #ffffff;
	box-shadow: -4px 0px 10px 0px rgb(0 0 0 / 30%);
    padding: 20px;
	margin-bottom: 20px;
	margin-top: 20px;
    position: relative;
}

input[type=submit] {
    color: #f46c5d!important;
    border: 2px solid;
    border-width: 12px!important;
    border-color: rgba(0,0,0,0);
    border-radius: 40px;
    letter-spacing: 4px;
    font-size: 16px;
    font-family: 'Fredoka One',display!important;
    text-transform: uppercase!important;
    background-color: #ffffff;
    padding: 0.3em 1em!important;
    box-shadow: 0px 12px 38px -6px rgb(0 0 0 / 30%);
    transition: letter-spacing 300ms ease 0ms;
    
    margin: 20px;
    position: relative;
    
    padding:10px 20px; 
    cursor:pointer;
    -webkit-border-radius: 40px;
    
}

@media (max-width: 767px) {
input[type=submit] {
    display: inline-block!important;
    }
}

@media (max-width: 767px) {
input[type=submit] {
    display: inline-block!important;
    }
}
    

input[type=text] {
    border:2px solid #ccc; 
    -webkit-border-radius: 40px;
    border-radius: 20px;
    color: #f46c5d;
    width: 100%;
    padding: 12px;
    margin: 8px;
    box-sizing: border-box;
    resize: none;
}

input[type=text]:focus {
    border-color:#f46c5d;
}

/* class applies to select element itself, not a wrapper element */
.select-form {
  color: #f46c5d;
  line-height: 1.3;
  padding: 12px;
  width: 100%;
  max-width: 100%; /* useful when width is set to anything other than 100% */
  box-sizing: border-box;
  margin: 8px;
  border: 2px solid #ccc;
  box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
  border-radius: 20px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
   /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. 
    for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference
    
  */
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
  background-repeat: no-repeat;
  /* arrow icon position (1em from the right, 50% vertical)*/
  background-position: right .7em top 50%;
  /* icon size*/
  background-size: .65em auto;
}

/* Hide arrow icon in IE browsers */
.select-form::-ms-expand {
  display: none;
}
/* Hover style */
.select-form:hover {
  border-color: #f46c5d;
}
/* Focus style */
.select-form:focus {
  border-color: #f46c5d;
}


.liedjes-form {
    padding: 20px;
    border-radius: 20px;
    border-color: #f46c5d;
    margin-bottom: 50px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 20px;
    background-color: white;
    box-shadow: 0px 12px 48px -6px rgb(0 0 0 / 30%);
}

label {
  padding: 20px;
  display: inline-block;
}

.col-25 {
  float: left;
  width: 25%;
  margin: 8px;
}

.col-75 {
  float: left;
  width: 40%;
  margin: 8px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    display: inline-block;
  }
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #ccc!important;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #ccc;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color: #ccc;
}

.et_pb_section_2 {
    box-shadow: none!important;
}

.lied-titel {
	text-align: center; 
	font-family: 'Fredoka One',display; 
	line-height: 1.4em
}

.table-info {
    
}

.table-info th { 
    background-color: #f46c5d;
    color: white !important;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    }


.table-info tr th.firstcol {
    position:sticky;
	left:0;
	z-index:1;
}

.table-info td:first-child {
    position:sticky;
	left:0;
	z-index:1;
    background-color: white;
}