/* Theme options CSS All Codes Just for Record.*/ /* To delete main menu drop shadow line- Use this code to delete bydefault dropshadow line under main menu. */ header#main-header.et-fixed-header, #main-header{ -webkit-box-shadow:none !important; -moz-box-shadow:none !important; box-shadow:none !important; } /* Footer Widget Area- Use this code to hide bydefault widget area */ #footer-widgets { display: none; padding: 1% 0 0; } /* overhanging logo by Amer Saleem- Use this code to change the size of main logo */ #top-header {z-index: 99999;} #logo { max-height: 98%; margin-top: 2px; z-index: 100000; } /*Use this code to make the Divi Slider Controls dots into stylish Squares*/ .et_pb_slider .et-pb-controllers a { border-radius: 0 !important; } /* To make logo in Header Floating Logo just put this code in DIVI Theme custom CSS portion.*/ .logo_container { animation-name:floating-logo; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating-logo { 0% { transform: translate(0, 0); } 50% { transform: translate(0, -6px); } 100% { transform: translate(0, 0); } } /* To filter float three module especially call to action. Put "floatcta1" in the CSS Class of the first module, Put "floatcta2" in the CSS Class of the second module, Put "floatcta3" in the CSS Class of the third module & Paste this code in Divi Theme options Custom CSS box*/ .floatcta1 { animation: flcta1 5s infinite; } @keyframes flcta1 { 0% {transform:scale(1)} 50% {transform:scale(1.1)} 100% {transform:scale(1)} } .floatcta2 { animation: flcta2 4s infinite; } @keyframes flcta2 { 0% {transform:scale(1)} 50% {transform:scale(1.1)} 100% {transform:scale(1)} } .floatcta3 { animation: flcta3 7s infinite; } @keyframes flcta3 { 0% {transform:scale(1)} 50% {transform:scale(1.1)} 100% {transform:scale(1)} } /* and to Stop The Animation On Hover Add This code, but if you dont want to stop this hover effect then no need to use this code.*/ .floatcta1:hover { animation: none; } .floatcta2:hover { animation: none; } .floatcta3:hover { animation: none; } /* To bounce any module. Put "bounceA" in the CSS Class of that module & Paste this code in Divi Theme options Custom CSS box*/ .bouncA { animation: bouncer 4s infinite; } .bouncA:hover { animation: none; } @keyframes bouncer { 0% { transform: translateY(0); } 2% { transform: translateY(-20px); } 4% { transform: translateY(0); } 6% { transform: translateY(-15px); } 8% { transform: translateY(0); } 12% { transform: translateY(-30px); } 16% { transform: translateY(0); } 20% { transform: translateY(-10px); } } /* To bounce like heart any module. Put "ptgrow" in the CSS Class of that module & Paste this code in Divi Theme options Custom CSS box*/ .ptgrow { animation: ptable 5s infinite; } @keyframes ptable { 0% { transform:scale(1) } 50% { transform:scale(1.05) } 100% { transform:scale(1) } } .ptgrow:hover { animation:none; transform:scale(1.05) } /* To spine any modulee especially a title or button. Put "dspin" in the CSS Class of that module & Paste this code in Divi Theme options Custom CSS box*/ .dspin { animation: titlespin 10s infinite; } @keyframes titlespin { 0% { transform:rotateX(0) } 20% { transform:rotateX(360deg) } 40% { transform:rotateX(360deg) } 70% { transform:rotateX(360deg) } 100% { transform:rotateX(0) } } /* To fade any modulee especially a title or text. Put "hfade" in the CSS Class of that module & Paste this code in Divi Theme options Custom CSS box*/ .hfade { animation: hfd1 5s infinite; } @keyframes hfd1 { 0% { opacity:1; } 66.66% { opacity:0; } 100% { opacity:1; } } .hfade:hover { animation:none; } /* CSS to shake any module. Paste "dl-shake" in module advance setting CSS Class box. */ #page-container .et-l .et_pb_section .dl-shake { animation: button-shake 2s infinite; } @keyframes button-shake { 10%,90% { transform: translate3d(0, -1px, 0); } 20%,80% { transform: translate3d(0, 2px, 0); } 30%,50%,70% { transform: translate3d(0, -2px, 0); } 40%,60% { transform: translate3d(0, 3px, 0); } } /* CSS for shadow effect to any module - Paste "dl-shadow-pulse" in module advance setting CSS Class box. To increase or decrease shadow effect edit all three "30px" to any other number.*/ #page-container .et-l .et_pb_section .dl-shadow-pulse { animation: shadow-pulse 2s infinite; } @-webkit-keyframes shadow-pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0.5); } 70% { -webkit-box-shadow: 0 0 0 30px rgba(0,0,0,0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(0,0,0,0); } } @keyframes shadow-pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0.5); box-shadow: 0 0 0 0 rgba(0,0,0,0.4); } 70% { -moz-box-shadow: 0 0 0 30px rgba(0,0,0,0); box-shadow: 0 0 0 30px rgba(0,0,0,0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(0,0,0,0); box-shadow: 0 0 0 0 rgba(0,0,0,0); } } /* CSS for showing Underline effect to any module - Paste "myline" in module advance setting CSS Class box.*/ .myline::before { content: ""; position:absolute; height:4px; width:0; background-color: blue; bottom:-10px; left:50%; transform: translate(-50%); transition-duration: .7s; } .myline:hover::before { width:100%; } /* CSS for showing Under/Upper line hower effect to any module - Paste "bbscale" in module advance setting CSS Class box.*/ .bbscale { border-top: 2px solid transparent; border-bottom: 2px solid transparent; transition-duration: .75s; } .bbscale:hover { border-top: 2px solid blue; border-bottom: 2px solid blue; box-shadow: 0px 10px 20px #abaaaa; transform: scale(1.1) } /* CSS for showing Underline hower effect to any anchor text - Paste "myhlink" in module advance setting CSS Class box.*/ .myhlink a { position:relative; text-decoration:none; color: blue; } .myhlink a::after { content: ''; position:absolute; bottom: -4px; left: 0; width:0; height: 2px; background-color: blue; transition: width .75s ease; } .myhlink a:hover::after { width:100%; } /* CSS for changing size of an image any where in the website - Paste "scalingimage" in module advance setting CSS Class box.*/ .scalingimage { animation: scaleimage 30s infinite; } @keyframes scaleimage { 0% {transform:scale(1)} 50% {transform:scale(1.3)} 100% {transform:scale(1)} } /* CSS for changing animation of any blurb icons in the website - Paste "iconan2" in module advance setting CSS Class box.*/ .iconan2 .et-pb-icon { animation: listspin 10s infinite !important; } @keyframes listspin { 0% { transform:rotate(0)} 25% { transform:rotate(0)} 50% { transform:rotate(360deg)} 75% { transform:rotate(360deg)} 100% { transform:rotate(0)} } /* CSS for rotating of any module along y-axis in the website - Paste "roti" in module advance setting CSS Class box.*/ .roti { animation: rota1 4s linear infinite; } @keyframes rota1 { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } /* CSS for bouncing of any module in the website - Paste "bounci" in module advance setting CSS Class box.*/ .bounci { animation: bou1 1s ease-in-out infinite; } @keyframes bou1 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } } /* CSS for webbling of any module in the website - Paste "icwob" in module advance setting CSS Class box.*/ .icwob { animation: wobble 2s infinite; } @keyframes wobble { 0% { transform: rotate(0deg); } 25% { transform: rotate(-30deg); } 50% { transform: rotate(30deg); } 75% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } } /* CSS for changing the colour of any icon in the website - Put icon module anywhere & Paste "coloricon" in module advance setting CSS Class box of said icon. Here you can use it only for icon module not for any other modules.*/ .coloricon span { animation: bcc3 10s infinite linear; } @keyframes bcc3 { 0%{color:red;} 33%{color:orange;} 66%{color:yellow;} 100%{color:red;} } /* Text Grow effect. Some basic settings are here, In Row Do ZERO padding on top/bottom. make its height according to screen as on desktop 75px. & module max width should be about 70% to 80%. After these settings put "gtext" in module advance setting CSS Class box of said text module.*/ .gtext { animation: tgro 20s infinite linear; } @keyframes tgro { 0% { width:30%; opacity:1; } 10% { width:40%;opacity:1; } 20% { width:50%; } 30% { width:80%; } 40% { width:100%; } 50% { width:100%; } 60% { width:100%; } 70% { width:100%; } 80% { width:50%;opacity:1; } 90% { width:40%; } 100% { width:30%;opacity:1; } } /* Gradient animated effect. Some basic settings are here, Add some gradient in ROW BACKGROUND portion. In Row Do ZERO padding on top/bottom. Make Section & Row height according to screen as on desktop 75vh or any according to screen. After these settings put "animate-gradient" in ROW advance setting CSS Class box.*/ .animate-gradient { background-size: 400% 400%; animation: gradient 5s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Background animated effect. Some basic settings are here. Make Section height according to screen as on desktop 75vh or any according to screen. After these settings put "animate-gradientbg" in SECTION advance setting CSS Class box.*/ .animate-gradientbg { background-size: 120% 120%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /*** Hide any module. Some basic settings are here, Add some image in ROW BACKGROUND portion. In Row/section Do ZERO padding on top/bottom. Make Section & Row height according to screen as on desktop 75vh or any according to screen. & after these settings put "imblsw" in module advance setting CSS Class box.***/ .imblsw { animation: imageswap 20s infinite; } @keyframes imageswap { 0% { opacity:1; } 50% { opacity:0; } 100% { opacity:1; } } /* For 2 Columns in Mobile. Put "two-columns" in ROW advanced CSS Class Portion & Put below code in Divi theme Options "CSS" Portion.*/ @media only screen and (max-width: 980px) { .two-columns .et_pb_column { width: 48%!important; margin-bottom:0!important; margin-right:2.0% !important; } /* For 3 Columns in Mobile. Put "three-columns" in ROW advanced CSS Class Portion & Put below code in Divi theme Options "CSS" Portion.*/ @media only screen and (max-width: 980px) { .three-columns .et_pb_column { width: 32.0%!important; margin-bottom:0!important; margin-right:1.4% !important; } /* For 4 Columns in Mobile. Put "four-columns" in ROW advanced CSS Class Portion & Put below code in Divi theme Options "CSS" Portion.*/ @media only screen and (max-width: 980px) { .four-columns .et_pb_column { width: 24.0%!important; margin-bottom:0!important; margin-right:1.0% !important; } /* For 5 Columns in Mobile. Put "five-columns" in ROW advanced CSS Class Portion & Put below code in Divi theme Options "CSS" Portion.*/ @media all and (max-width: 980px) { html .et-db .five-columns .et_pb_column { width:19.2% !important; } .five-columns .et_pb_column:nth-last-child(-n+5) { margin-bottom:0 !important; margin-right:0.8% !important; } /* For 6 Columns in Mobile. Put "six-columns" in ROW advanced CSS Class Portion & Put below code in Divi theme Options "CSS" Portion.*/ @media all and (max-width: 980px) { html .et-db .six-columns .et_pb_column { width:16.0% !important; } .six-columns .et_pb_column:nth-last-child(-n+6) { margin-bottom:0 !important; margin-right:0.6% !important; } /* When convert this site into another site. Copy and Pasteall these codes into Divi theme options CSS Portion.*/