<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/aktivist/pen/BpOMyv?depth=everything&order=popularity&page=37&q=device&show_forks=false" />
<link rel='stylesheet prefetch' href="https://bw.bekitzur.com/wp-content/plugins/js_composer/assets/css/js_composer.min.css?ver=4.12.1"><link rel='stylesheet prefetch' href="https://bw.bekitzur.com/wp-content/themes/bekitzur-theme/dist/styles/main.css"><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.css'>
<style class="cp-pen-styles">body {
margin-top:0!important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@charset "utf-8";
/* CSS Document */
.clear{
/* clear:both; */
}
/*DEVIDES*/
.ias-devide-wrap{
display:inline-block;
vertical-align: bottom;
max-width:100%;
padding:8px 5px;
}
.ias-devide-wrap.ias-new-devide{
display:block;
}
.device, .wpb_row .device{
box-sizing:content-box;
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
transform-origin: 0 0;
-webkit-transform-origin: 0 0;
}
.device .screen{
overflow:hidden;
}
.ia-nexus5{
margin:10px 0;
}
/*devide content*/
.ias-devide-content{
position:absolute;
top:-1px;
left:-1px;
right:-1px;
bottom:-1px;
overflow: hidden;
}
.ias-devide-content img{
width:100%;
height:auto;
}
.ias-devide-content-carousel .is-ias-carousel{
height:100%;
}
.is-ias-carousel, .is-ias-carousel .owl-item, .is-ias-carousel .owl-item img, .screen{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
/*hero*/
/*.showcase-style-hero{
text-align:center;
}
.showcase-style-hero{
margin-left:-8%;
margin-right:-8%;
}
.showcase-style-hero .hero-col{
display:inline-block;
vertical-align:middle;
text-align:center;
transform:scale(.85);
-webkit-transform:scale(.85);
position:relative;
z-index:8;
margin-left: -11%;
padding:0;
float:none;
}
.showcase-style-hero .hero-col:first-child{
margin-left: 0;
margin-right: -11%;
}
.showcase-style-hero .hero-col:nth-child(2){
transform:scale(1);
-webkit-transform:scale(1);
z-index: 9;
margin-left: 0;
margin-right: 0;
}
.showcase-style-hero .hero-col.col-xs-12, .showcase-style-hero .hero-col.col-xs-12:first-child{
transform:scale(1);
-webkit-transform:scale(1);
z-index: 9;
margin-left: 0;
margin-right: 0;
padding:0 15px;
}
.showcase-style-hero .hero-col.col-xs-6:first-child{
margin-right: -30%;
}
.showcase-style-hero .hero-col.col-xs-6:nth-child(2){
margin-right: 0;
}
@media(max-width:767px){
.showcase-style-hero .hero-col{margin-left: -10%;}
.showcase-style-hero .hero-col:first-child{margin-right: -10%;}
.showcase-style-hero .hero-col.col-xs-6:first-child{ margin-right: -20%; }
}
.showcase-style-hero .hero-col:nth-child(4){z-index:7; transform:scale(.8); -webkit-transform:scale(.8);}
.showcase-style-hero .hero-col:nth-child(5){z-index:6; transform:scale(.8); -webkit-transform:scale(.8);}
.showcase-style-hero .hero-col:nth-child(6){z-index:5; transform:scale(.8); -webkit-transform:scale(.8);}
*/
/*features carousel*/
.features-control-item{
position:relative;
padding:35px 0px 15px;
transition:all .3s;
cursor:pointer;
margin-bottom:10px;
}
.features-control-item .media{
transition:all .35s ease;
padding-left:10px;
}
.second-features-col .features-control-item .media{
padding-left:0;
padding-right:10px;
}
.features-control-item.active .media{
padding-left:0;
padding-right:10px;
}
.features-control-item.active .media-heading{
color:#FF5D00;
}
.second-features-col .features-control-item.active .media{
padding-left:10px;
padding-right:0;
}
.features-control-item:before{
content:' ';
opacity:0;
position:absolute;
bottom:0px;
left:0px;
right:100%;
height:1px;
background-color:#999;
background-color:rgba(153,153,153,.5);
transition:all .3s;
}
.dark-div .features-control-item:before{
background-color:#fff;
background-color:rgba(255,255,255,.5);
}
.features-control-item.active:before{
opacity:1;
right:-25px;
}
.second-features-col .features-control-item:before{
left: 100%;
right: 40px;
}
.second-features-col .features-control-item.active:before{
left:-25px;
}
.features-control-item:after{
content:' ';
opacity:0;
position:absolute;
z-index:55;
bottom:-19px;
right:100%;
height:38px;
width:38px;
border-radius:50%;
background-color: #ff5d00;
box-shadow: 0 0 0 0px rgba(255,255,255,.2);
transition:all .3s, opacity .2s linear .1s;
}
.features-control-item.active:after{
opacity:1;
right:-60px;
box-shadow: 0 0 0 6px rgba(160,160,160,.2);
-webkit-animation: pointing .5s ease .25s;
animation: pointing .5s ease .25s;
backface-visibility:visible;
-webkit-backface-visibility:visible;
}
.second-features-col .features-control-item:after{
left: 100%;
}
.second-features-col .features-control-item.active:after{
left:-60px;
}
@-webkit-keyframes pointing {
0% {box-shadow: 0 0 0 0px rgba(160,160,160,.5);}
45% {box-shadow: 0 0 0 15px rgba(160,160,160,.05);}
50% {box-shadow: 0 0 0 0px rgba(160,160,160,.2);}
100% {box-shadow: 0 0 0 6px rgba(160,160,160,.2);}
}
@keyframes pointing {
0% {box-shadow: 0 0 0 0px rgba(160,160,160,.5);}
45% {box-shadow: 0 0 0 15px rgba(160,160,160,.05);}
50% {box-shadow: 0 0 0 0px rgba(160,160,160,.2);}
100% {box-shadow: 0 0 0 6px rgba(160,160,160,.2);}
}
@media(max-width:991px){
.features-control-item{
padding:20px 0px 10px;
}
.features-control-item .media{
padding-left:0;
padding-right:0;
}
.features-control-item:before{
left: 100%;
right: 0;
}
.features-control-item.active:before{
left:-25px;
right: 0;
}
.features-control-item:after{
left: 100%;
}
.features-control-item.active:after{
left:-60px;
}
.features-control-item .ia-icon{
width:60px;
height:60px;
line-height:60px;
font-size:24px;
}
.features-control-item.active .media {
padding-left: 0;
padding-right: 0;
}
}
@media(max-width:767px){
.features-control-item{
padding:10px 0px 10px;
}
.features-control-item .media-heading{
font-size:16px;
}
}
@media(max-width:520px){
.showcase-style-features .feature-col{
width:100%;
}
.feature-col-devide{
text-align:center;
}
.features-control-item{
padding:20px 20px 0px;
}
.features-control-item .media-heading{
font-size:18px;
}
.features-control-item:before,.features-control-item:after{
display:none;
}
.features-control-item .ia-icon{
width:40px;
height:40px;
line-height:38px;
font-size:14px;
}
}
.device, .device div:not(.screen *), *:before, *:after {
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1);
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
}
a {
text-decoration: none;
}
.top-bar, .bottom-bar {
height: 10px;
background: black;
width: 100%;
display: block;
}
.device .screen {
width: 100%;
position: relative;
height: 100%;
z-index: 2;
text-align: left;
/*text-indent: -999px;*/
display: block;
-webkit-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 0 0 3px #111;
box-shadow: 0 0 0 3px #111;
}
/*
.device .screen:before {
content: '';
display: block;
text-indent: -9999px;
height: 34px;
display: inline-block;
text-align: left;
width: 96px;
position: absolute;
top: 50%;
margin-top: -17px;
left: 50%;
margin-left: -48px;
background-image: url(https://marvelapp.com/static/site_assets/images/logo.png);
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 96px 68px;
}
*/
.ia-gpixel .device {
padding: 85px 12px;
margin: 0 auto;
background: #2c2b2c;
position: relative;
width: 320px;
height: 568px;
display: block;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.ia-gpixel .inner {
width: 98%;
height: 99%;
width: calc(100% - 8px);
height: calc(100% - 8px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 8px);
position: absolute;
top: 4px;
left: 4px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
border-radius: 46px;
background: #1e1e1e;
z-index: 1;
}
.ia-gpixel .volume {
position: absolute;
right: -3px;
top: 280px;
z-index: 0;
height: 85px;
width: 3px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
background: #282727;
}
.ia-gpixel .volume:before {
position: absolute;
left: 0px;
top: -75px;
height: 45px;
width: 3px;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
background: inherit;
content: '';
display: block;
}
.ia-gpixel .screen {
background: rgb(226,228,228);
background: -moz-linear-gradient(top, rgba(226,228,228,1) 0%, rgba(125,130,129,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,228,228,1)), color-stop(100%,rgba(125,130,129,1)));
background: -webkit-linear-gradient(top, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
background: -o-linear-gradient(top, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
background: -ms-linear-gradient(top, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
background: linear-gradient(to bottom, rgba(226,228,228,1) 0%,rgba(125,130,129,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e4e4', endColorstr='#7d8281',GradientType=0 );
}
.ia-gpixel.black .screen {
background: rgb(179,179,183);
background: -moz-linear-gradient(top, rgba(179,179,183,1) 0%, rgba(66,64,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,179,183,1)), color-stop(100%,rgba(66,64,68,1)));
background: -webkit-linear-gradient(top, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
background: -o-linear-gradient(top, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
background: -ms-linear-gradient(top, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
background: linear-gradient(to bottom, rgba(179,179,183,1) 0%,rgba(66,64,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3b3b7', endColorstr='#424044',GradientType=0 );
}
.ia-gpixel .camera {
background: #000;
width: 30px;
height: 12px;
position: absolute;
top: 60px;
left: 50%;
margin-left: -15px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 3;
}
.ia-gpixel .sensor {
background: #3c3d3d;
width: 12px;
height: 12px;
position: absolute;
top: 30px;
left: 90px;
z-index: 3;
margin-left: -32px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
.ia-gpixel .speaker {
background: #292728;
width: 80px;
height: 10px;
position: absolute;
top: 32px;
left: 50%;
margin-left: -40px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
z-index: 3;
}
.ia-gpixel .top-bar {
top: 70px;
position: absolute;
left: 0;
}
.ia-gpixel .bottom-bar {
bottom: 47px;
position: absolute;
left: 0;
}
.ia-nexus5 .device {
padding: 50px 15px 50px 15px;
-webkit-border-radius: 20px;
border-radius: 20px;
width: 320px;
height: 568px;
margin: 0 auto;
background: #181818;
position: relative;
}
.ia-nexus5.landscape .device {
padding: 15px 50px 15px 50px;
height: 320px;
width: 568px;
}
.ia-nexus5 .device:before {
-webkit-border-radius: 600px / 50px;
border-radius: 600px / 50px;
background: inherit;
content: '';
top: 0;
position: absolute;
height: 103.1%;
width: calc(100% - 26px);
width: -webkit-calc(100% - 26px);
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.ia-nexus5.landscape .device:before {
width: 103.1%;
height: calc(100% - 26px);
height: -webkit-calc(100% - 26px);
-webkit-border-radius: 50px / 600px;
border-radius: 50px / 600px;
}
.ia-nexus5 .inner {
width: 98%;
height: 99%;
width: calc(100% - 8px);
height: calc(100% - 6px);
width: -webkit-calc(100% - 8px);
height: -webkit-calc(100% - 6px);
position: absolute;
top: 3px;
left: 4px;
-webkit-border-radius: 20px;
border-radius: 20px;
background: #1e1e1e;
}
.ia-nexus5.landscape .inner {
left: 3px;
top: 4px;
width: 98%;
height: 99%;
height: calc(100% - 8px);
width: calc(100% - 6px);
height: -webkit-calc(100% - 8px);
width: -webkit-calc(100% - 6px);
}
.ia-nexus5 .inner:before {
-webkit-border-radius: 600px / 50px;
border-radius: 600px / 50px;
background: inherit;
content: '';
top: 0;
position: absolute;
height: 103.0%;
width: calc(100% - 26px);
width: -webkit-calc(100% - 26px);
top: 50%;
left: 50%;
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.ia-nexus5.landscape .inner:before {
width: 103%;
height: calc(100% - 26px);
height: -webkit-calc(100% - 26px);
-webkit-border-radius: 50px / 600px;
border-radius: 50px / 600px;
}
.ia-nexus5 .button {
width: 3px;
position: absolute;
left: -3px;
top: 110px;
height: 100px;
background: inherit;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px;
}
/*
.ia-nexus5.landscape .button {
height: 3px;
width: 100px;
left: calc(100% - 210px);
left: -webkit-calc(100% - 210px);
top: -3px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
}
*/
.ia-nexus5 .lock {
width: 3px;
position: absolute;
right: -3px;
top: 70px;
height: 45px;
background: inherit;
-webkit-border-radius: 0px 2px 2px 0px;
border-radius: 0px 2px 2px 0px;
}
/*
.ia-nexus5.landscape .lock {
height: 3px;
width: 45px;
right: 70px;
top: 100%;
-webkit-border-radius: 0px 0px 2px 2px;
border-radius: 0px 0px 2px 2px;
}
*/
.ia-nexus5 .screen {
-webkit-box-shadow: none;
box-shadow: none;
background: rgb(243,66,75);
background: -moz-linear-gradient(top, rgba(243,66,75,1) 0%, rgba(255,213,31,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(243,66,75,1)), color-stop(100%,rgba(255,213,31,1)));
background: -webkit-linear-gradient(top, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
background: -o-linear-gradient(top, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
background: -ms-linear-gradient(top, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
background: linear-gradient(to bottom, rgba(243,66,75,1) 0%,rgba(255,213,31,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3424b', endColorstr='#ffd51f',GradientType=0 );
}
.ia-nexus5 .camera {
background: #3c3d3d;
width: 10px;
height: 10px;
position: absolute;
top: 18px;
left: 50%;
z-index: 3;
margin-left: -5px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
/*
.ia-nexus5.landscape .camera {
top: 50%;
left: calc(100% - 18px);
left: -webkit-calc(100% - 18px);
margin-left: 0;
margin-top: -5px;
}
*/
.ia-nexus5 .camera:before {
background: #3c3d3d;
width: 6px;
height: 6px;
content: '';
display: block;
position: absolute;
top: 2px;
left: -100px;
z-index: 3;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
/*
.ia-nexus5.landscape .camera:before {
top: -100px;
left: 2px;
}
*/</style></head><body>
<div id="body-wrap">
<div id="wrap">
<div id="body">
<div class="container">
<div class="content-pad-3x">
<div class="row">
<div id="content" class="col-md-12" role="main">
<article class="single-page-content">
<div class="ia_row">
<div class="vc_row wpb_row vc_row-fluid ">
<div class="vc_col-sm-12 wpb_column vc_column_container">
<div class="wpb_wrapper">
<div class="iapp-showcase-shortcode iapp-showcase-shortcode-5679">
<section class="iapp-showcase iapp-showcase-1 showcase-style-features">
<h2 class="hidden hide">Features 1</h2>
<div class="row">
<div class="col-md-4 col-md-push-4 col-sm-6 col-xs-7 feature-col feature-col-devide">
<div class="ias-devide-wrap ias-devide-1">
<div class="ia-gpixel ias-devide black">
<div class="device">
<div class="inner"></div>
<div class="volume"></div>
<div class="camera"></div>
<div class="top-bar"></div>
<div class="sensor"></div>
<div class="speaker"></div>
<!--
<div class="button"></div>
<div class="lock"></div>
<div class="camera"></div>
<div class="inner"></div>
-->
<div class="screen">
<div class="ias-devide-content ias-devide-content-features">
<div class="is-ias-carousel single-carousel ias-features-carousel" data-autoplay="3500" data-autoheight=false data-features-id=1>
<img src="http://bw.bekitzur.com/wp-content/uploads/2016/09/car_ins_Sneak-peek.png" alt="Pure CSS Devides"/>
<img src="http://bw.bekitzur.com/wp-content/uploads/2016/09/car_ins_Save-2.png" alt="Many Showcase Styles"/>
<img src="http://bw.bekitzur.com/wp-content/uploads/2016/09/car_ins_Save-1.png" alt="Full Responsive"/>
<img src="http://bw.bekitzur.com/wp-content/uploads/2016/09/car_ins_Install.png" alt="Unlimited purposes"/>
<img src="http://bw.bekitzur.com/wp-content/uploads/2016/09/car_ins_Better.png" alt="Retina Ready"/>
<img src="http://bw.bekitzur.com/wp-content/uploads/2016/09/car_ins_adviser.png" alt="Premium Support"/>
</div>
</div> </div>
<div class="bottom-bar"></div>
<div class="home"></div>
</div>
</div> </div>
</div>
<div class="col-md-4 col-md-pull-4 col-sm-6 col-xs-5 feature-col feature-col-text">
<div class="features-control-item features-control-item-0 " data-features-item=0 >
<div class="media">
<div class="pull-left">
<div class="ia-icon">
<i class="fa fa-mobile"></i>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Install</h3>
<p class="hidden-xs">Snapshot your current insurance policy. No policy — no problem.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-1 visible-sm visible-xs" data-features-item=1 >
<div class="media">
<div class="pull-left">
<div class="ia-icon">
<i class="fa fa-star"></i>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Snapshot</h3>
<p class="hidden-xs">Get better personalized offers from dozens insurance companies.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-2 " data-features-item=2 >
<div class="media">
<div class="pull-left">
<div class="ia-icon">
<i class="fa fa-laptop"></i>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Save</h3>
<p class="hidden-xs">BeeWell will continue looking for even better personalized offers.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-3 visible-sm visible-xs" data-features-item=3 >
<div class="media">
<div class="pull-left">
<div class="ia-icon">
<i class="fa fa-send"></i>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Your personal live adviser</h3>
<p class="hidden-xs">No phone calls, emails and waiting on line! It's exactly like texting to your friends.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-4 " data-features-item=4 >
<div class="media">
<div class="pull-left">
<div class="ia-icon">
<i class="fa fa-apple"></i>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Sneak peek</h3>
<p class="hidden-xs">See what your neighbors pay for same car coverage right from your BeeWell app.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-5 visible-sm visible-xs" data-features-item=5 >
<div class="media">
<div class="pull-left">
<div class="ia-icon">
<i class="fa fa-life-ring"></i>
</div>
</div>
<div class="media-body">
<h3 class="media-heading">Private quotes</h3>
<p class="hidden-xs">You never get annoying phone calls or emails: BeeWell negotiates with insurance companies on your behalf.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
</div>
<div class="col-md-4 hidden-sm hidden-xs second-features-col">
<div class="features-control-item features-control-item-1" data-features-item=1 >
<div class="media">
<div class="pull-right">
<div class="ia-icon">
<i class="fa fa-star"></i>
</div>
</div>
<div class="media-body text-right">
<h3 class="media-heading">Better deal before renewal</h3>
<p class="hidden-xs">Let BeeWell check for better options before renewing your current policy.</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-3" data-features-item=3 >
<div class="media">
<div class="pull-right">
<div class="ia-icon">
<i class="fa fa-send"></i>
</div>
</div>
<div class="media-body text-right">
<h3 class="media-heading">The new world</h3>
<p class="hidden-xs">Showing some appropriate images for these benefits as illustration</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
<div class="features-control-item features-control-item-5" data-features-item=5 >
<div class="media">
<div class="pull-right">
<div class="ia-icon">
<i class="fa fa-life-ring"></i>
</div>
</div>
<div class="media-body text-right">
<h3 class="media-heading">Premium Support</h3>
<p class="hidden-xs">Ask us everything and you will get the best answers</p>
</div>
</div>
<div class="clearfix"></div>
</div><!--/features-control-item-->
</div>
</div>
</section> </div><!--/iapp-showcase-shortcode-->
</div>
</div>
</div> </div><!--/ia_row-->
</p>
</article>
</div><!--/content-->
</div><!--/row-->
</div><!--/content-pad-3x-->
</div><!--/container-->
</div><!--/body-->
</div><!--wrap-->
</div><!--/body-wrap-->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.2/owl.carousel.min.js'></script>
<script >
jQuery(document).ready(function() {
//carousel
jQuery(".is-ias-carousel").each(function(){
var carousel_id = jQuery(this).attr('id');
var auto_play = jQuery(this).data('autoplay');
var auto_height = jQuery(this).data('autoheight');
var items = jQuery(this).data('items');
var navigation = jQuery(this).data('navigation');
if(jQuery(this).hasClass('ias-features-carousel')){ //features carousel
var feature_id = jQuery(this).data('features-id');
jQuery(this).owlCarousel({
singleItem:true,
stopOnHover:true,
autoHeight: auto_height,
// autoPlay: auto_play,
addClassActive : true,
afterInit: function(i){
jQuery('.iapp-showcase-'+feature_id+' .features-control-item-0').addClass('active');
},
afterMove: function(i){
var current = this.currentItem;
jQuery('.iapp-showcase-'+feature_id+' .features-control-item').removeClass('active');
jQuery('.iapp-showcase-'+feature_id+' .features-control-item-'+current).addClass('active');
},
});
}else if(jQuery(this).hasClass('single-carousel')){ //single style
jQuery(this).owlCarousel({
singleItem:true,
stopOnHover:true,
autoHeight: auto_height,
autoPlay: auto_play,
addClassActive : true
});
}else{
jQuery(this).owlCarousel({
autoPlay: auto_play,
stopOnHover:true,
items: items?items:3,
itemsDesktop: items?false:3,
itemsDesktopSmall: items?(items>3?3:false):3,
singleItem: items==1?true:false,
navigation: navigation?true:false,
navigationText:["<i class='fa fa-angle-left'></i>","<i class='fa fa-angle-right'></i>"],
slideSpeed: 500,
addClassActive : true
});
}
});
jQuery('.ias-devide').each(function(index, element) {
var parent_width = jQuery(this).parent('.ias-devide-wrap').width();
var devide_width = jQuery('.device',this).outerWidth();
var scale = parent_width/devide_width;
if(scale>1){ scale = 1;}
var css = '-webkit-transform: scale('+ scale + '); transform: scale('+ scale + ');';
jQuery('.device',this).attr('style', css);
jQuery(this).height(jQuery('.device',this).outerHeight()*scale);
});
jQuery('.showcase-style-features').each(function(index, element) {
var $this_feature = jQuery(this);
var $this_feature_owl = jQuery(".ias-features-carousel",this).data('owlCarousel');
jQuery('.features-control-item',this).click(function(e) {
$this_feature_owl.goTo(jQuery(this).data('features-item'));
});
});
});//document ready
/*jQuery(window).resize(function(e) {
ias_devide_resize();
setTimeout(function(){
ias_devide_resize();
}, 300);
});*/
var resize_timeout;
window.onresize = function(){
clearTimeout(resize_timeout);
resize_timeout = setTimeout(ias_devide_resize, 300);
};
function ias_devide_resize(){
jQuery('.ias-devide').each(function(index, element) {
var parent_width = jQuery(this).parent('.ias-devide-wrap').width();
var devide_width = jQuery('.device',this).outerWidth();
//var max_scale = jQuery(this).data('scale')?jQuery(this).data('scale'):1;
var scale = parent_width/devide_width;
if(scale>1){ scale = 1;}
var css = '-webkit-transform: scale('+ scale + '); transform: scale('+ scale + ');';
jQuery('.device',this).attr('style', css);
jQuery(this).height(jQuery('.device',this).outerHeight()*scale);
});
}
//# sourceURL=pen.js
</script>
</body></html>
