/*************************************************************/
//				DotYellow.nl
// 			
// language:	HTML5 / css3/js
// data: 		d.d: 2018-06-08                         			
// version:		v1.0 beta  
//				©2018 Bart Kamerling www.bartkamerling.nl  
/*************************************************************/

.w3-row-padding img {margin-bottom: 12px}
.w3-bar{
	position:fixed;	/*** Mobile bar ***/
	top: 0;
	width: 100%;
	height:50px;
	padding-top:10px;
	z-index: 5;
}

#topbar{
	position: fixed;	/*** Menu Mobile ***/
	top: 50px; 
    width: 100%;
    margin:0;
    padding: 20px;
    z-index: 4;
}


/* animation duration new*/
.w3-animate-top{position:relative;animation:animatetop 1.0s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
.w3-animate-left{position:relative;animation:animateleft 1.0s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
.w3-animate-right{position:relative;animation:animateright 1.0s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
.w3-animate-bottom{position:relative;animation:animatebottom 1.0s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
.w3-animate-zoom {animation:animatezoom 1.0s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(0.5)}}

/* css rotate */
.fa-rotate-45 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(90deg);
}

/* Hamburger animation */

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.6s;
}
.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
 }
.change .bar2 {opacity: 0.3;}
.change .bar3 {
	transform:scale(0.5);
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}