/*--------------------------------------------------------- Iconbox Side Shortcode ---------------------------------------------------------*/ .iconbox-side { padding: 10px; } .iconbox-side .icon-container { transition: background 0.2s; } .iconbox-side.style2 .icon-container .image-container{ width: 60px; } .iconbox-side .icon { transition: color 0.2s; font-size: 30px; } .iconbox-side.style2 .icon{ font-size: 50px; } .iconbox-side .iconbox-side-container { width: 70%; max-width: 500px; } .iconbox-side .description { margin-bottom: 25px; font-size: 13px; line-height: 21px; font-weight: normal; } /* alignment */ .iconbox-side.left-align .icon-container, .iconbox-side.left-align .iconbox-side-container { float: left; text-align: left; } .iconbox-side.left-align .iconbox-side-container { margin-left: 19px; } .iconbox-side.right-align .icon-container, .iconbox-side.right-align .iconbox-side-container { float: right; text-align: right; } .iconbox-side.right-align .iconbox-side-container { margin-right: 19px; } .iconbox-side.responsive .iconbox-side-container{ margin: auto 0; } .iconbox-side.left-align.responsive .icon-container, .iconbox-side.left-align.responsive .iconbox-side-container, .iconbox-side.right-align.responsive .icon-container, .iconbox-side.right-align.responsive .iconbox-side-container{ float: none; display: block; text-align: center; width: inherit; } /* icon background */ .iconbox-side .icon-background { display: table; } .iconbox-side .icon-background .icon:before { speak: none; font-size: 30px; line-height: 63px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .iconbox-side .icon-background .icon { vertical-align: middle; transition: color 0.3s; display: inline-block; font-size: 0; cursor: pointer; width: 61px; height: 61px; border-radius: 50%; text-align: center; position: relative; z-index: 1; } .iconbox-side .icon-background .icon:after { top: 0; left: 0; padding: 0; z-index: -1; -webkit-transition: -webkit-transform 0.2s, opacity 0.3s; -moz-transition: -moz-transform 0.2s, opacity 0.3s; transition: transform 0.2s, opacity 0.3s; pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .iconbox-side:hover .icon-background .icon:after { transform: scale(1.3); opacity: 0; } .iconbox-side:not(.side2) .iconbox-side-container .title { line-height: 30px; } .iconbox-side .icon-container.icon-background ~ .iconbox-side-container .title { line-height: 61px; margin-bottom: 0; }