#uitl-nav-2.navbar:after{content:''; position:absolute; bottom:-1px; left:0px; right:0px; height:2px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdfaab+0,fdfaab+21,9dd1de+24,9dd1de+50,b5e31f+54,b5e31f+76,fec90f+79,fec90f+100 */ background: #fdfaab; /* Old browsers */ background: -moz-linear-gradient(left, #fdfaab 0%, #fdfaab 21%, #9dd1de 24%, #9dd1de 50%, #b5e31f 54%, #b5e31f 76%, #fec90f 79%, #fec90f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #fdfaab 0%,#fdfaab 21%,#9dd1de 24%,#9dd1de 50%,#b5e31f 54%,#b5e31f 76%,#fec90f 79%,#fec90f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #fdfaab 0%,#fdfaab 21%,#9dd1de 24%,#9dd1de 50%,#b5e31f 54%,#b5e31f 76%,#fec90f 79%,#fec90f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfaab', endColorstr='#fec90f',GradientType=1 ); /* IE6-9 */ } #uitl-nav-2.navbar:before{content:''; position:absolute; top:0px; left:0px; right:0px; height:2px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdfaab+0,fdfaab+21,9dd1de+24,9dd1de+50,b5e31f+54,b5e31f+76,fec90f+79,fec90f+100 */ background: #fdfaab; /* Old browsers */ background: -moz-linear-gradient(left, #fdfaab 0%, #fdfaab 21%, #9dd1de 24%, #9dd1de 50%, #b5e31f 54%, #b5e31f 76%, #fec90f 79%, #fec90f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #fdfaab 0%,#fdfaab 21%,#9dd1de 24%,#9dd1de 50%,#b5e31f 54%,#b5e31f 76%,#fec90f 79%,#fec90f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #fdfaab 0%,#fdfaab 21%,#9dd1de 24%,#9dd1de 50%,#b5e31f 54%,#b5e31f 76%,#fec90f 79%,#fec90f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfaab', endColorstr='#fec90f',GradientType=1 ); /* IE6-9 */ } #uitl-nav-2 .bg-wrap{ } #uitl-nav-2 a svg{ padding:15px 5px 15px 5px; } #uitl-nav-2 li:hover a{text-decoration:none !important; color:#000 !important;} #uitl-nav-2 a{text-decoration:none !important;} #uitl-nav-2 li .nav-link svg, #uitl-nav-2 li .sub-menu a svg{opacity:0.2;} #uitl-nav-2 li:hover .nav-link svg, #uitl-nav-2 li .sub-menu li:hover svg{opacity:1;} #uitl-nav-2 li:nth-child(1):hover.nav-item{background:#FDFAAB;} #uitl-nav-2 li:nth-child(2):hover.nav-item{background:#9DD1DE;} #uitl-nav-2 li:nth-child(3):hover.nav-item{background:#A8D220;} #uitl-nav-2 li:nth-child(4):hover.nav-item{background:#FEC90F;} #uitl-nav-2 li:nth-child(5):hover.nav-item{background:#FDFAAB;} #uitl-nav-2 li:nth-child(6):hover.nav-item{background:#9DD1DE;} #uitl-nav-2 li:nth-child(7):hover.nav-item{background:#A8D220;} #uitl-nav-2 li:nth-child(8):hover.nav-item{background:#FEC90F;} #uitl-nav-2 li:nth-child(9):hover.nav-item{background:#FDFAAB;} #uitl-nav-2 li:nth-child(10):hover.nav-item{background:#9DD1DE;} #uitl-nav-2 li:nth-child(11):hover.nav-item{background:#A8D220;} #uitl-nav-2 li:nth-child(12):hover.nav-item{background:#FEC90F;} #uitl-nav-2 .sub-menu li:nth-child(1):hover{background:#FDFAAB;} #uitl-nav-2 .sub-menu li:nth-child(2):hover{background:#9DD1DE;} #uitl-nav-2 .sub-menu li:nth-child(3):hover{background:#A8D220;} #uitl-nav-2 .sub-menu li:nth-child(4):hover{background:#FEC90F;} #uitl-nav-2 .nav-item{position:relative;} #uitl-nav-2 .sub-menu li:hover a{text-decoration:none !important; color:#000 !important;} #uitl-nav-2 .sub-menu{padding:0 !important; margin:0; width:100%; background:rgba(255,255,255,0.5);} #uitl-nav-2 .sub-menu li{width:100%; padding:4px; text-align:center;} #uitl-nav-2 .sub-menu li{padding:0; margin:0;}.madgrid-item .rounded-circle{width:150px; height:150px; margin:0 auto; border-width:5px; border-style:solid;} #desc-text-3 .bg-wrap { background: #ffffff; } #desc-text-3 .bg { background-image: url('../images/uitlaatservice/dog-paw-print-love-wallpaper-mural.jpg'); background-repeat: Repeat; background-position: center center; background-size: contain; opacity: 0.03; } #uitl-sep{ height:20px; position:relative; } #uitl-sep:after{content:''; position:absolute; op:-1px; left:0px; right:0px; height:2px; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#fdfaab+0,fdfaab+21,9dd1de+24,9dd1de+50,b5e31f+54,b5e31f+76,fec90f+79,fec90f+100 */ background: #fdfaab; /* Old browsers */ background: -moz-linear-gradient(left, #fdfaab 0%, #fdfaab 21%, #9dd1de 24%, #9dd1de 50%, #b5e31f 54%, #b5e31f 76%, #fec90f 79%, #fec90f 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, #fdfaab 0%,#fdfaab 21%,#9dd1de 24%,#9dd1de 50%,#b5e31f 54%,#b5e31f 76%,#fec90f 79%,#fec90f 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, #fdfaab 0%,#fdfaab 21%,#9dd1de 24%,#9dd1de 50%,#b5e31f 54%,#b5e31f 76%,#fec90f 79%,#fec90f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfaab', endColorstr='#fec90f',GradientType=1 ); /* IE6-9 */ }.madgrid-item .rounded-circle{width:150px; height:150px; margin:0 auto; border-width:5px; border-style:solid;} .madgrid-item-holder .madgrid-item:nth-child(1) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(2) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(3) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(4) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(5) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(6) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(7) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(8) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(9) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(10) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(11) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(12) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(13) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(14) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(15) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(16) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(17) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(18) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(19) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(20) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(21) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(22) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(23) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(24) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(25) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(26) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(27) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(28) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(29) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(30) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(31) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(32) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(33) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(34) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(35) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(36) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(37) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(38) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(39) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(40) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(41) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(42) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(43) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(44) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(45) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(46) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(47) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(48) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(49) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(50) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(51) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(52) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(51) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(52) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(53) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(54) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(55) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(56) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(57) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(58) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(59) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(60) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(61) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(62) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(63) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(64) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(65) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(66) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(67) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(68) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(69) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(70) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(71) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(72) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(73) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(74) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(75) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(76) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(77) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(78) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(79) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(80) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(81) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(82) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(83) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(84) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(85) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(86) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(87) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(88) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(89) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(90) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(91) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(92) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(93) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(94) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(95) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(96) .rounded-circle{border-color:#9DD1DE;} .madgrid-item-holder .madgrid-item:nth-child(97) .rounded-circle{border-color:#B5E31F;} .madgrid-item-holder .madgrid-item:nth-child(98) .rounded-circle{border-color:#FEC90F;} .madgrid-item-holder .madgrid-item:nth-child(99) .rounded-circle{border-color:#FDFAAB;} .madgrid-item-holder .madgrid-item:nth-child(100) .rounded-circle{border-color:#9DD1DE;} .hond-naam{display:table; padding:10px; margin-top:5px;} .madgrid { margin: 15px auto; } .madgrid-item-holder { position: relative; -webkit-column-gap: 0px !important; column-gap: 0px !important; } .madgrid-item .madgrid-item-frame { display: block; } .madgrid-item-frame { cursor: pointer; text-decoration: none; margin:0; font-weight: normal; } .madgrid-item .madgrid-item-frame * { cursor:pointer !important; } .madgrid-item img { display:block; width: 100%; } .madgrid-none { display: none; } /* Start Grid Content */ .madgrid-content-holder { opacity: 0; position:fixed; animation-name: BgfadeIn; animation-duration: 0.5s; animation-fill-mode: both; } .madgrid-content-holder > .madgrid-content { position: fixed; z-index:9998; width: 100%; height:100%; top:0px; left: 0; top: -9999px; animation-duration: 0.5s; animation-fill-mode: both; animation-name: BgfadeOut; } .madgrid-closebt-holder, .madgrid-closebt-holder-right { position: fixed; top:0; height:32px; width:32px; z-index:99999; display:none; } .madgrid-closebt-holder { left: 0 } .madgrid-closebt-holder-right { right: 0; } .madgrid-circle-btn { width: 32px; height: 32px; } .madgrid-close-holder { position: fixed; z-index: 9997; width: 100%; height:100%; left: 0; top: -200%; } .madgrid-closebt { display:block; cursor: pointer; height: 100%; width: 100%; margin:0; padding:0; position: relative; } .madgrid-close-icon { display: block; height:16px; width: 16px; padding:8px; font-size:16px; transition: font-size 2s; } .madgrid-closebt:hover .f-100 { text-shadow: 0 0 30px #ffffff; } /* Start madgrid Content Styles */ .madgrid-content-style-center { position:relative; height:80%; width:80%; left:10%; top:10%; overflow:auto; max-height:100%; z-index:9999; animation-duration: 0.5s; animation-fill-mode: both; box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.2), 0 6px 18px 6px rgba(0, 0, 0, 0.1); } .madgrid-content-style-left { position:relative; width: 90%; height: 100%; top: 0; left: 0; overflow:auto; max-height:100%; z-index:9999; animation-duration: 0.5s; animation-fill-mode: both; box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.2), 0 6px 18px 6px rgba(0, 0, 0, 0.1); } .madgrid-content-style-right { position:relative; width: 90%; height: 100%; top: 0; left: 10%; overflow:auto; max-height:100%; z-index:9999; animation-duration: 0.5s; animation-fill-mode: both; box-shadow: 0 4px 12px 4px rgba(0, 0, 0, 0.2), 0 6px 18px 6px rgba(0, 0, 0, 0.1); } .madgrid-content-style-photo { overflow:hidden; z-index:9998; position: relative; width: 80%; height: 80%; top:10%; left:10%; animation-duration: 0.5s; animation-fill-mode: both; } .madgrid-content-style-photo > .madgrid-content-container { position: relative; overflow:auto; height: 100%; width: 100%; overflow:hidden; } .madgrid-content-style-photo > .madgrid-content-container .madgrid-content-row { height: 100%; width: 100%; padding: 0; position:relative; display:block; margin:auto; text-align:center; overflow:hidden; } .madgrid-content-style-photo > .madgrid-content-container > .madgrid-content-row > img { max-height: 100%; max-width: 100%; position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%); display:block; margin: auto; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .madgrid-content-row { padding: 30px 15px; position: relative; } /* End madgrid Content Styles */ /* Start Controller */ .madgrid > .madgrid-content-holder input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content { top:0; animation-name: fadeIn; } .madgrid > .madgrid-content-holder input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-close-holder { top:0; } .madgrid > .madgrid-content-holder input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-ontop { display:block; } /* End Controller */ /* Start Content Showing Effects */ .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-fade { animation-name: fadeIn; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-pulse { animation-name: pulse; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-flash { animation-name: flash; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-rubberBand { animation-name: rubberBand; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-shake { animation-name: shake; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-swing { animation-name: swing; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-tada { animation-name: tada; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-wobble { animation-name: wobble; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-jello { animation-name: jello; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-bounce { animation-name: bounce; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-bounceIn { animation-name: bounceIn; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-bounceLeft { animation-name: bounceInLeft; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-bounceRight { animation-name: bounceInRight; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-bounceUp { animation-name: bounceInUp; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-bounceDown { animation-name: bounceInDown; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-flipX { animation-name: flipInX; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-flipY { animation-name: flipInY; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-lightSpeed { animation-name: lightSpeedIn; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-rotate { animation-name: rotateIn; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-rotateUpLeft { animation-name: rotateInUpLeft; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-rotateDownLeft { animation-name: rotateInDownLeft; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-rotateUpRight { animation-name: rotateInUpRight; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-rotateDownRight { animation-name: rotateInDownRight; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-slideUp { animation-name: slideInUp; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-slideDown { animation-name: slideInDown; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-slideLeft { animation-name: slideInLeft; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-slideRight { animation-name: slideInRight; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-jackBox { animation-name: jackInTheBox; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-roll { animation-name: rollIn; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-zoom { animation-name: zoomIn; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-zoomLeft { animation-name: zoomInLeft; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-zoomRight { animation-name: zoomInRight; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-zoomUp { animation-name: zoomInUp; } .madgrid > .madgrid-content-holder > input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-effect-zoomDown { animation-name: zoomInDown; } /* End Content Effects - IN */ /* START ANIMATION EFFECTS */ .click-ripple { position:relative; overflow:hidden; transform:translate3d(0,0,0); } .click-ripple:after{ content:""; display:block; position:absolute; width:100%; height:100%; top:0; left:0; background-image:radial-gradient(circle,#000 10%,transparent 10.01%); background-repeat:no-repeat; background-position:50%; transform:scale(10,10); opacity:0; transition:transform 0.5s,opacity 1s; pointer-events:none; } .click-ripple:active:after{ transform:scale(0,0); opacity:.2; transition:0s; } @keyframes BgfadeIn { 0% { opacity: 0; } 99% { opacity: 0; } 100% { opacity: 1; } } @keyframes BgfadeOut { 0% { opacity: 1; top: 0; } 99% { opacity: 0; top: 0; } 100% { opacity: 0; top: -9999px; } } /*===== START IMAGE HOVER ANIMATION =====*/ .hover-zoomIn { overflow: hidden; } .hover-zoomIn img { transform: scale(1); -webkit-transition: transform 1s; transition: transform 1s; } .hover-zoomIn:hover img { transform: scale(1.2); -webkit-transition: transform 1s; transition: transform 1s; } .hover-zoomOut { overflow: hidden; } .hover-zoomOut img { transform: scale(1.2); -webkit-transition: transform 1s; transition: transform 1s; } .hover-zoomOut:hover img { transform: scale(1); -webkit-transition: transform 1s; transition: transform 1s; } .hover-vignetteOut { position: relative; overflow:hidden; } .hover-vignetteOut:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 20rem rgba(0,0,0,0.8) inset; -webkit-transition: box-shadow 1s; transition: box-shadow 1s; } .hover-vignetteOut:hover:after{ content: ""; box-shadow: 0 0 0rem rgba(0,0,0,0) inset; -webkit-transition: box-shadow 1s; transition: box-shadow 1s; } /*===== END IMAGE HOVER ANIMATION =====*/ /* END ANIMATION EFFECTS */ /* Start Responsive Layout */ @media screen and (max-width: 768px) { .madgrid-item .rounded-circle{width:100px; height:100px; margin:0 auto;} .madgrid-content-style-center { height: 100%; width: 100%; left: 0; top:0; } .madgrid-content-style-photo { width: 90%; height: 90%; top: 5%; left: 5%; } .madgrid > .madgrid-content-holder input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-closebt-holder { display:block; } .madgrid > .madgrid-content-holder input[name=madgrid-switch][type=checkbox]:checked + .madgrid-content > .madgrid-closebt-holder-right { display:block; } .madgrid-content > .madgrid-closebt-holder { height: 32px; width: 32px; } .madgrid-content .madgrid-close-icon { height:16px; width: 16px; padding:8px; font-size:16px; } } @media (min-width: 576px) { .card-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-gap: 0.75rem; column-gap: 0.75rem; } .card-columns .card { display: block; /*overflow: hidden;*/ break-inside: avoid-column; -webkit-column-break-inside: avoid; page-break-inside: avoid; } .max-col-2 { -webkit-column-count: 2 !important; -moz-column-count: 2 !important; column-count: 2 !important; } .madgrid-content-style-left { width: 80%; } .madgrid-content-style-right { width: 80%; left: 20%; } } @media (min-width: 768px) { .card-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } .max-col-3 { -webkit-column-count: 3 !important; -moz-column-count: 3 !important; column-count: 3 !important; } .madgrid-content-style-left { width: 70%; } .madgrid-content-style-right { width: 70%; left: 30%; } } @media (min-width: 992px) { .card-columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } .max-col-4 { -webkit-column-count: 4 !important; -moz-column-count: 4 !important; column-count: 4 !important; } .madgrid-content-style-left { width: 60%; } .madgrid-content-style-right { width: 60%; left: 40%; } } @media (min-width: 1200px) { .card-columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; } .madgrid-content-style-left { width: 50%; } .madgrid-content-style-right { width: 50%; left: 50%; } } .card-shadow { box-shadow: 0 3px 6px rgba(0,0,0,0.10), 0 3px 6px rgba(0,0,0,0.20); } /* .madgrid-no-gap { -webkit-column-gap: 0px !important; column-gap: 0px !important; } */ .madgrid-item-holder .card { margin:0px; border-radius: 0px; border: 0!important; } .madgrid-item-holder .card-img { border-radius: 0px; } .madgrid-card-gutter { padding: 0.75rem; } .madgrid-card-frame {} /* End Responsive Layout */ /* MISC */ .content-rating { height: 48px; display: block; } .content-rating > img { width: 24px; height: 24px; margin: 12px 0; display:inline-block; } .madgrid-content-row a { text-decoration: none !important; } .madgrid-img-fluid { display:block; width: 100%; } .madgrid-img-fluid img { width: 100%; display:block; } .madgrid-content-row .mb-30 { margin-bottom: 30px; display: block; } .pad-5 { padding: 5px; } .w-10p { width: 10%; } .w-100p { /* Full Width */ width: 100%; height: auto; } .f-100 { /* Font size 100 */ font-size: 100px; width: auto; height: auto; transition: text-shadow 1s; }#uitl-footer .bg-wrap{ background:#48B54A; }