.clr:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; zoom: 1; }
.wrap .oceanwp-desc { padding: 10px 15px; margin: 20px 8px; }
.wrap .oceanwp-desc p { font-size: 14px; margin: 0; }
.oceanwp-modules .modules-top { display: block; margin: 15px 0.5%; }
.oceanwp-modules .modules-top p.submit { display: inline-block; margin: 0; }
.oceanwp-modules .modules-top p.submit input:active { vertical-align: baseline !important; }
.oceanwp-modules .modules-top .owp-all-wrap { display: inline-block; margin-left: 15px; }
.oceanwp-modules .modules-top .owp-all-wrap p { display: inline-block; font-size: 15px; line-height: 1.5; margin: 0; }
.oceanwp-modules .modules-top .owp-all-wrap #owp-switch { float: none; display: inline-block; margin-left: 8px; }
.oceanwp-modules .btn-switcher { float: right; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; list-style: none; margin: 0; padding: 0; }
.oceanwp-modules .btn-switcher li { float: left; border-right: 1px solid rgba(0,0,0,.1); margin: 0; }
.oceanwp-modules .btn-switcher li:last-child { border-right: none; }
.oceanwp-modules .btn-switcher li a { display: inline-block; background-color: #f5f5f5; color: #555; font-size: 12px; font-weight: 600; width: 50px; height: 28px; line-height: 28px; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; text-align: center; -webkit-box-shadow: none; box-shadow: none; }
.oceanwp-modules .btn-switcher li a:hover { background-color: #eee; }
.oceanwp-modules .btn-switcher li.active a,
.oceanwp-modules .btn-switcher li.active a:hover { background-color: #3498DB; color: #fff; }
.oceanwp-modules .btn-switcher li:first-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.oceanwp-modules .btn-switcher li:last-child a { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.is-fadeout { animation: fade linear 200ms 1 forwards; }
.is-fadein { animation: fade linear 200ms 1 reverse forwards; }
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }
.oceanwp-modules .modules-inner { display: -webkit-box; display: -ms-flexbox; display: flex; flex-wrap: wrap; margin-top: 30px; }
.oceanwp-modules .column-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; background: #fff; border: 1px solid #ccc; width: 24%; min-height: 150px; margin: 0 0.5% 1% 0.5%; padding: 25px 25px 20px; overflow: hidden; box-sizing: border-box; }
.oceanwp-modules .column-wrap.hidden { display: none !important; }
.oceanwp-modules .type { position: absolute; top: 0; right: 0; color: #fff; font-size: 12px; font-weight: 700; width: 50px; height: 30px; line-height: 30px; text-transform: uppercase; letter-spacing: 1px; border-bottom-left-radius: 5px; text-align: center; }
.oceanwp-modules .type.js { background-color: #fea952; }
.oceanwp-modules .type.css { background-color: #67ce6b; }
.oceanwp-modules .column-inner { display: -webkit-box; display: -ms-flexbox; display: flex; flex-direction: column; width: 100%; }
.oceanwp-modules .info { display: block; position: relative; font-size: 18px; color: #333; margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid #eaeaea; }
.oceanwp-modules .desc { flex: 1 0 auto; display: block; margin: 0 0 20px; font-size: 16px; line-height: 1.6; font-weight: 400; color: #777; }
.oceanwp-modules .bottom-column { padding: 20px 0 0; border-top: 1px solid #eaeaea; margin: 0; }
.oceanwp-modules .bottom-column .title { float: left; margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 16px; text-transform: uppercase; letter-spacing: 0.6px; }
.oceanwp-modules #owp-switch { float: right; }
.oceanwp-modules #owp-switch input { position: absolute; left: -9999px; }
.oceanwp-modules #owp-switch label { position: relative; padding-left: 4em; padding-top: .25em; cursor: pointer; }
.oceanwp-modules #owp-switch label:before,
.oceanwp-modules #owp-switch label:after { content: ''; position: absolute; height: 1.80em; -webkit-transition: all .5s ease; -o-transition: all .5s ease; transition: all .5s ease; }
.oceanwp-modules #owp-switch label:before { left: 0; top: 0; width: 3.70em; background-color: #dfd9ea; border-radius: 1.5em; z-index: 0; }
.oceanwp-modules #owp-switch label:after { left: .15em; top: .1em; background-color: #fff; border-radius: 50%; width: 1.60em; height: 1.60em; }
.oceanwp-modules #owp-switch input:checked + label:before { background-color: #72da67; border-color: #72da67; }
.oceanwp-modules #owp-switch input:checked + label:after { left: 1.95em; }
.oceanwp-modules p.submit { margin: 15px 0 0 0.5%; padding: 0; clear: both; }
/* RTL */
body.rtl .oceanwp-modules p.submit { margin: 0; }
body.rtl .oceanwp-modules .modules-top .owp-all-wrap { margin-right: 15px; margin-left: 0; }
body.rtl .oceanwp-modules .modules-top .owp-all-wrap #owp-switch { margin-right: 8px; margin-left: 0; }
body.rtl .oceanwp-modules .btn-switcher { float: left; }
body.rtl .oceanwp-modules .btn-switcher li { float: right; border-left: 1px solid rgba(0,0,0,.1); border-right: none; }
body.rtl .oceanwp-modules .btn-switcher li:last-child { border-left: none; }
body.rtl .oceanwp-modules .btn-switcher li:first-child a { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.rtl .oceanwp-modules .btn-switcher li:last-child a { border-top-left-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.rtl .oceanwp-modules .type { left: 0; right: auto; border-bottom-right-radius: 5px; border-bottom-left-radius: 0; }
body.rtl .oceanwp-modules .bottom-column .title { float: right; }
body.rtl .oceanwp-modules #owp-switch { float: left; }
body.rtl .oceanwp-modules p.submit { margin: 15px 0.5% 0 0; }
@media screen and ( max-width: 1280px ) {
.oceanwp-modules .column-wrap { width: 32.33%; }
}
@media screen and ( max-width: 1100px ) {
.oceanwp-modules .column-wrap { width: 49%; }
}
@media screen and ( max-width: 767px ) {
.oceanwp-modules .modules-top .owp-all-wrap { display: block; margin: 10px 0 0; }
.oceanwp-modules .modules-top { position: relative; }
.oceanwp-modules .btn-switcher { position: absolute; top: 3px; right: 0; }
}
@media screen and ( max-width: 600px ) {
.oceanwp-modules .column-wrap { width: 100%; }
} |