/*
 Theme Name:   ET Cleaning Company
 Theme URI:    https://candythemes.com/downloads/et-cleaning-company/
 Description:  Divi child theme based on the free 'Cleaning Company' layout pack designed by Elegant Themes.
 Author:       Candy Themes
 Author URI:   https://candythemes.com
 Author Email: info@candythemes.com
 Template:     Divi
 Version:      1.4
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: candy
*/

/* NIEUWE VIDEOCURSUS MADE BY THE ONE AND ONLY RECEP */


.myGrid2 {
	width: 100%;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}
.grid-item-border2 {
	border-radius: 3px;
	height: 100%;
	overflow: hidden;
}

@media only screen and (min-width: 993px) {
.myGrid2 {
	
}
.grid-item2 {
	margin: 0px 0px 26px 0px;
	width: 33%;
}
.grid-item-border2 {
	border: 1px solid #F2835A;
	padding: 5px;
	margin: 5px;
	background: #FFFFFF;
	color: #000000;
	position:relative;
	text-align: center;
	width: 300%;
}
}

@media only screen and (max-width: 992px) {
.myGrid2 {
	
}
.grid-item2 {
	margin: 0px 0px 26px 0px;
	width: 50%;
}
.grid-item-border2 {
	border: 1px solid #F2835A;
	padding: 5px;
	margin: 5px;
	background: #FFFFFF;
	color: #000000;
	position:relative;
}
}

@media only screen and (max-width: 768px) {
.myGrid2 {

}
.grid-item2 {
	margin: 0px 0px 26px 0px;
	width: 100%;
}
.grid-item-border2 {
	border: 1px solid #F2835A;
	padding: 5px;
	margin: 5px;
	background: #FFFFFF;
	color: #000000;
	position:relative;
}
}

.titel-curs {
	font-size: 20px;
}

/* Videocursus Nieuwe Balk */

.main-balk {
    background-color: #F2835A;
    height: 80px;
    width: 100%;
    border-radius: 7px;
}

.main-balk h1 {
	color: white; 
	font-weight: bold;
	text-align: center;
	position: relative;
	top: 25px;
}

.main-balk .dropbtn {
	color: white;
	float: right;
	padding-right: 20px;
	position: relative;
	bottom: 5px;
	border: none;
	background: none;
}


@media only screen and (max-width: 600px) {
  .main-balk h1 {
	font-size: 15px;
  }
}

.main-balk h1::before {
	content: '+';
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 1.1em;
}

.containergrid1 .contentBx .grid-item2 {
	position: relative;
	height: 0;
	display: none;
	transition: 0.5;
}

.containergrid1 .contentBx.active .grid-item2 {
	display: inherit;
	height: 100%;
}

.contentBx.active .main-balk  h1::before {
	content: '-';
	position: absolute;
	top: 45%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 1.1em;
}


.new-grid {
  display: grid;
  gap: 35px 30px;
  grid-template-columns: auto auto auto;
  padding: 10px;
}

.grid-item3 {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #F2835A;
  padding: 20px;
  text-align: center;
  border-radius: 2px;
}

.grid-item3 a {
	color: #F2835A;
}

@media only screen and (max-width: 600px) {
.new-grid , .grid-item3{
	float: none;
	width: 100%;
	align-items: center;
	grid_row: 1;
	grid-column: 1 ;
	justify-content: center;
  }
.thumb{
	width: 200px;
  }	
}

/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
.new-grid , .grid-item3{
	float: none;
	width: 100%;
	align-items: center;
	grid_row: 1;
	grid-column: 1 ;
	justify-content: center;
	gap: 0;
  }
.main-balk h1 {
	font-size: 20px;
  }
	.grid-item3 a {	
		margin: 10px;
	}
}
 
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
.new-grid , .grid-item3{
	float: none;
	width: 100%;
	align-items: center;
	grid_row: 1;
	grid-column: 1 ;
	justify-content: center;
	gap: 0;
  }
.main-balk h1 {
	font-size: 15px;
  }
.grid-item3 a {	
	margin: 10px;
	}
	.grid-item3 .thumb{
		width: 200px;
	}
}

@media only screen and (min-width: 770px) and (max-width: 992px) {
.new-grid , .grid-item3{
	float: none;
	width: 100%;
	align-items: center;
	grid_row: 1;
	grid-column: 1 ;
	justify-content: center;
	gap: 0;
  }
.grid-item2 {
	width: 100%;
	}
}

@media screen and (max-device-width: 540px) {
.new-grid , .grid-item3{
	float: none;
	width: 100%;
	align-items: center;
	grid_row: 1;
	grid-column: 1 ;
	justify-content: center;
	gap: 0;
  }
.main-balk h1 {
	font-size: 15px;
  }
.thumb {
	width: 400px;
}
}

@media only screen and (min-width: 600px) and (max-width: 740px) {
.main-balk h1{
	font-size: 15px;
  }
}

.vidcur {
    position: relative;
    left: 950px;
    bottom: 110px;
}

@media only screen and (min-width: 280px) and (max-width:1180px) {
    .vidcur {
        position: relative;
        left: 0px;
        bottom: 0px
    }
}


/* END NEW VIDEOCURUS-MAIN  */