<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="http://yourjavascript.com/21051171187/jquery-touchswipe-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/11873115711/jquery-1-12-4-min.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/71712155041/responsive-bootstrap-carousel.js"></script>
<div class="container">
<div class="row">
<div id="adv_team_4_columns_carousel" class="carousel slide four_shows_one_move team_columns_carousel_wrapper" data-ride="carousel" data-interval="5000" data-pause="hover">
<!--========= Wrapper for slides =========-->
<div class="carousel-inner" role="listbox">
<!--========= 1st slide =========-->
<div class="item active">
<div class="col-xs-12 col-sm-4 team_columns_item_image">
<a href="#" data-toggle="modal" data-target="#lunchVideoModal_00">
<img class="img-responsive" src="https://img.youtube.com/vi/8HCJvpXXZZg/maxresdefault.jpg" alt="slider 01">
</a>
<div class="team_columns_item_caption">
<h4>La téléphonie professionnelle<br/>pour le manager</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p>
</div>
</div>
<div class="col-xs-12 col-sm-4 team_columns_item_image cloneditem-1">
<a href="#" data-toggle="modal" data-target="#lunchVideoModal_01">
<img class="img-responsive" src="https://img.youtube.com/vi/KG4FnsCYFa8/maxresdefault.jpg" alt="slider 02">
</a>
<div class="team_columns_item_caption">
<h4>La téléphonie professionnelle<br/>pour les assistant(e)s</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p>
</div>
</div>
<div class="col-xs-12 col-sm-4 team_columns_item_image cloneditem-2">
<a href="#" data-toggle="modal" data-target="#lunchVideoModal_02">
<img class="img-responsive" src="https://img.youtube.com/vi/AwCMmyhlaEk/maxresdefault.jpg" alt="slider 03">
</a>
<div class="team_columns_item_caption">
<h4>La Téléphonie professionnelle<br/>pour le service commercial</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p>
</div>
</div>
</div>
<!--========= 2nd slide =========-->
<div class="item">
<div class="col-xs-12 col-sm-4 team_columns_item_image">
<a href="#" data-toggle="modal" data-target="#lunchVideoModal_03">
<img class="img-responsive" src="https://img.youtube.com/vi/FH-k4Fc3TMo/maxresdefault.jpg" alt="slider 04">
</a>
<div class="team_columns_item_caption">
<h4>Le Voice Management<br/>pour l'agent</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p>
</div>
</div>
<div class="col-xs-12 col-sm-4 team_columns_item_image cloneditem-1">
<a href="#" data-toggle="modal" data-target="#lunchVideoModal_04">
<img class="img-responsive" src="https://img.youtube.com/vi/qfiCDJ7QijA/maxresdefault.jpg" alt="slider 05">
</a>
<div class="team_columns_item_caption">
<h4>Le Voice Management<br/>intégré à Zendesk</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="text-center"><a class="btn btn-default" href="telephonie-professionnelle/centrex-pour-le-manager.php"> En savoir plus</a></p>
</div>
</div>
</div>
</div>
<!--======= Navigation Buttons =========-->
<!--======= Left Button =========-->
<!-- Modal Video 00 -->
<div class="modal fade" id="lunchVideoModal_00" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_00Label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="lunchVideoModal_01Label">La téléphonie professionnelle pour le manager</h4>
</div>
<div class="modal-body padding-none">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/8HCJvpXXZZg"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Video 01 -->
<div class="modal fade" id="lunchVideoModal_01" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_01Label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="lunchVideoModal_01Label">La téléphonie professionnelle pour les assistant(e)s</h4>
</div>
<div class="modal-body padding-none">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/KG4FnsCYFa8"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Video 02 -->
<div class="modal fade" id="lunchVideoModal_02" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_02Label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="lunchVideoModal_01Label">La Téléphonie professionnelle pour le service commercial</h4>
</div>
<div class="modal-body padding-none">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/AwCMmyhlaEk"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Video 03 -->
<div class="modal fade" id="lunchVideoModal_03" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_03Label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="lunchVideoModal_01Label">Le Voice Management pour l'agent</h4>
</div>
<div class="modal-body padding-none">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/FH-k4Fc3TMo"></iframe>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Video 04 -->
<div class="modal fade" id="lunchVideoModal_04" tabindex="-1" role="dialog" aria-labelledby="lunchVideoModal_04Label">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="lunchVideoModal_01Label">Le Voice Management intégré à Zendesk</h4>
</div>
<div class="modal-body padding-none">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qfiCDJ7QijA"></iframe>
</div>
</div>
</div>
</div>
</div>
<div class="pull-right padding-top">
<a class="left btn carousel-control team_columns_carousel_control_left adv_left" href="#adv_team_4_columns_carousel" role="button" data-slide="prev">
<i class="fa fa-chevron-left"></i>
<span class="sr-only">Previous</span>
</a>
<!--======= Right Button =========-->
<a class="right btn carousel-control team_columns_carousel_control_right adv_right" href="#adv_team_4_columns_carousel" role="button" data-slide="next">
<i class="fa fa-chevron-right"></i>
<span class="sr-only">Next</span>
</a>
<div class="clearfit"></div>
</div>
</div>
</div>
</div>
/* Carousel Video Fonction */
.team_columns_carousel_wrapper{padding:25px;overflow:hidden}
.team_columns_carousel_control_left,
.team_columns_carousel_control_right{top:26px;
z-index:2;
opacity:1;
width:35px;
height:35px;
border:0;
text-shadow:none;
text-align:center;
-webkit-transition:all ease-in-out .3s;
transition:all ease-in-out .3s
}
.team_columns_item_image{padding-top:60px;padding-bottom:25px}
.team_columns_item_image img{width:100%;
-webkit-filter:grayscale(90%);
-moz-filter:grayscale(90%);
-ms-filter:grayscale(90%);
-o-filter:grayscale(90%);
filter:grayscale(90%);
-webkit-transition:all ease-in-out .3s;
-moz-transition:all ease-in-out .3s;
-ms-transition:all ease-in-out .3s;
-o-transition:all ease-in-out .3s;
transition:all ease-in-out .3s
}
.team_columns_item_image:hover img{-webkit-filter:grayscale(0%);
-moz-filter:grayscale(0%);
-ms-filter:grayscale(0%);
-o-filter:grayscale(0%);
filter:grayscale(0%)
}
.team_columns_item_caption{padding:10px;text-align:left}
.team_columns_item_caption>hr{width:15%}
.team_columns_item_caption h4{text-align:center}
.team_columns_item_caption p{font-weight:400;margin-top:20px;font-family:'Open Sans', sans-serif}
.team_columns_item_caption p a,
.team_columns_item_caption p a:visited{text-decoration:none;
-webkit-transition:all ease-in-out .3s;
transition:all ease-in-out .3s
}
.team_columns_item_social a,
.team_columns_item_social a:visited{width:25px;float:left;height:25px;display:block;line-height:25px;margin-right:2px;text-decoration:none;
-webkit-transition:background ease-in-out .3s;
transition:background ease-in-out .3s
}
@media(min-width:768px) and (max-width:789px){.adv_team_columns_item_social a, .adv_team_columns_item_social a:visited{margin-right:0}}
.team_columns_carousel_wrapper{background:#fff}
.team_columns_carousel_control_left,
.team_columns_carousel_control_left:hover,
.team_columns_carousel_control_left:active,
.team_columns_carousel_control_left:focus,
.team_columns_carousel_control_right,
.team_columns_carousel_control_right:hover,
.team_columns_carousel_control_right:active,
.team_columns_carousel_control_right:f.team_columns_carousel_wrapper{padding:25px;overflow:hidden}
.team_columns_carousel_control_left,
.team_columns_carousel_control_right{position:relative;top:auto;z-index:2;opacity:1;width:35px;height:35px;border:0;text-shadow:none;text-align:center;
-webkit-transition:all ease-in-out .3s;
transition:all ease-in-out .3s
}
.team_columns_item_image{padding-top:25px;padding-bottom:25px}
.team_columns_item_image img{width:100%;
-webkit-filter:grayscale(90%);
-moz-filter:grayscale(90%);
-ms-filter:grayscale(90%);
-o-filter:grayscale(90%);
filter:grayscale(90%);
-webkit-transition:all ease-in-out .3s;
-moz-transition:all ease-in-out .3s;
-ms-transition:all ease-in-out .3s;
-o-transition:all ease-in-out .3s;
transition:all ease-in-out .3s
}
.team_columns_item_image:hover img{-webkit-filter:grayscale(0%);
-moz-filter:grayscale(0%);
-ms-filter:grayscale(0%);
-o-filter:grayscale(0%);
filter:grayscale(0%)
}
.team_columns_item_caption{padding:10px;text-align:left}
.team_columns_item_caption>hr{width:15%}
.team_columns_item_caption h4{text-align:center}
.team_columns_item_caption p{font-weight:400;margin-top:20px;font-family:'Open Sans', sans-serif}
.team_columns_item_caption p a,
.team_columns_item_caption p a:visited{text-decoration:none;
-webkit-transition:all ease-in-out .3s;
transition:all ease-in-out .3s
}
.team_columns_item_social a,
.team_columns_item_social a:visited{width:25px;float:left;height:25px;display:block;line-height:25px;margin-right:2px;text-decoration:none;
-webkit-transition:background ease-in-out .3s;
transition:background ease-in-out .3s
}
@media(min-width:768px) and (max-width:789px){.adv_team_columns_item_social a, .adv_team_columns_item_social a:visited{ margin-right:0}}
.team_columns_carousel_wrapper{background:#fff}
.team_columns_carousel_control_left,
.team_columns_carousel_control_left:hover,
.team_columns_carousel_control_left:active,
.team_columns_carousel_control_left:focus,
.team_columns_carousel_control_right,
.team_columns_carousel_control_right:hover,
.team_columns_carousel_control_right:active,
.team_columns_carousel_control_right:focus{color:#fff;background:#aab2bd!important;font-size:14px}
.team_columns_item_caption{color:171717;box-shadow:0px 3px 10px 3px rgba(0,0,0,0.2)}}
.team_columns_item_caption>hr{border-top:2px solid #5d9cec}
.team_columns_item_image img{box-shadow:0px -3px 10px 3px rgba(0,0,0,0.2)}
