<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 ---------->
<div class="container" id="tourpackages-carousel">
<div class="card">
<img class="card-img-top" src="http://placehold.it/150x150" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div><!-- End container -->
.pymk-card {
margin-left: 0px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
position: relative;
width: 178px;
height: 317px;
float: left
}
.pymk-card.hidden {
display: none
}
.pymk-card.visibility {
visibility: hidden
}
.pymk-card.guest .card-wrapper .content .title:hover {
color: #000;
cursor: default
}
.pymk-card.guest .card-wrapper .name:hover {
text-decoration: none
}
.pymk-card.closing {
overflow: hidden
}
.pymk-card.email .card-wrapper .content {
overflow: hidden
}
.pymk-card.email .card-wrapper .content .profile-info {
display: none
}
.pymk-card.email .card-wrapper .content .email-confirm {
display: block
}
.pymk-card.focused .card-wrapper button.bt-close {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom:1;*display: inline
}
.pymk-card .card-wrapper {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom:1;*display: inline;
background: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.15),-1px 0 0 rgba(0,0,0,0.03),1px 0 0 rgba(0,0,0,0.03),0 1px 0 rgba(0,0,0,0.12);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.15),-1px 0 0 rgba(0,0,0,0.03),1px 0 0 rgba(0,0,0,0.03),0 1px 0 rgba(0,0,0,0.12);
box-shadow: 0 1px 1px rgba(0,0,0,0.15),-1px 0 0 rgba(0,0,0,0.03),1px 0 0 rgba(0,0,0,0.03),0 1px 0 rgba(0,0,0,0.12);
width: 100%;
height: 100%;
position: absolute;
top: 0;
-webkit-transition-property: top;
-moz-transition-property: top;
-o-transition-property: top;
transition-property: top;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-backface-visibility: hidden
}
.ie.lte8 .pymk-card .card-wrapper {
border-bottom: 2px solid #ccc
}
.pymk-card .card-wrapper:hover {
-webkit-box-shadow: 0 0px 10px #888;
-moz-box-shadow: 0 0px 10px #888;
box-shadow: 0 0px 10px #888;
-webkit-transition: box-shadow 0.3s linear;
-moz-transition: box-shadow 0.3s linear;
-o-transition: box-shadow 0.3s linear;
transition: box-shadow 0.3s linear
}
.pymk-card .card-wrapper:hover button.bt-close {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom:1;*display: inline
}
.pymk-card .card-wrapper a:hover {
color: #0077b5;
cursor: pointer;
text-decoration: none
}
.pymk-card .card-wrapper .profile-info {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px
}
.pymk-card .card-wrapper .profile-info .title {
font-size: 14px;
font-weight: bold;
line-height: 16px;
color: #000;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
max-height: 32px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom:1;*display: inline;
width: 136px;
white-space: normal
}
.pymk-card .card-wrapper .profile-info .title a {
color: #000
}
.pymk-card .card-wrapper .profile-info .title a:focus,.pymk-card .card-wrapper .profile-info .title a:hover {
color: #0077b5
}
.pymk-card .card-wrapper .profile-info .title .a11y-headline {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px)
}
.pymk-card .card-wrapper .profile-info .headline {
font-size: 13px;
line-height: 17px;
color: #333;
font-weight: normal;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
max-height: 45px;
margin-left: 0px;
margin-right: 0px;
margin-top: 5px;
margin-bottom: 5px;
display: block;
display: -webkit-box;
white-space: normal;
line-height: 15px;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical
}
.pymk-card .card-wrapper .profile-info .extra {
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
font-size: 13px;
line-height: 17px;
color: #66696a;
font-weight: normal
}
.pymk-card .card-wrapper .profile-info .extra a {
color: #666
}
.pymk-card .card-wrapper .profile-info .extra a:hover {
color: #0077b5
}
.pymk-card .card-wrapper a {
cursor: pointer
}
.pymk-card .card-wrapper button {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom:1;*display: inline;
border: none;
cursor: pointer;
position: absolute
}
.pymk-card .card-wrapper button.bt-close {
top: 0;
right: 0;
height: 20px;
padding: 0;
margin: 0;
display: none;
background: rgba(0,0,0,0.3)
}
.pymk-card .card-wrapper button.bt-close .glyph {
color: #f1f3f5
}
.pymk-card .card-wrapper button.bt-close .glyph:before {
font-family: "LinkedIn-Glyphs-2.0.7","LinkedIn-Glyphs";
font-weight: normal;
font-style: normal;
text-decoration: inherit;
speak: none;
font-size: 20px;
color: inherit;
content: "\e00f"
}
.pymk-card .card-wrapper button.bt-request-buffed {
font-size: 13px;
font-weight: bold;
line-height: 17px;
color: #000;
background: #f9f9f9;
width: 100%;
bottom: 0px;
height: 35px;
padding: 0 10px
}
.pymk-card .card-wrapper button.buffed-blue {
color: #006fa6;
text-decoration: none
}
.pymk-card .card-wrapper button.buffed-blue.hover,.pymk-card .card-wrapper button.buffed-blue:hover,.pymk-card .card-wrapper button.buffed-blue.focus,.pymk-card .card-wrapper button.buffed-blue:focus {
text-decoration: none
}
.pymk-card .card-wrapper button.buffed-blue.visited,.pymk-card .card-wrapper button.buffed-blue:visited {
color: #96999c
}
.pymk-card .card-wrapper button.buffed-blue:focus,.pymk-card .card-wrapper button.buffed-blue:hover {
background: #eee
}
.pymk-card .card-wrapper button.buffed-grey {
color: #666
}
.pymk-card .card-wrapper button.buffed-grey:focus,.pymk-card .card-wrapper button.buffed-grey:hover {
background: #eee
}
.pymk-card .card-wrapper button.buffed-blue-bkg-1 {
color: #fff;
background: #0077b5
}
.pymk-card .card-wrapper button.buffed-blue-bkg-1:focus,.pymk-card .card-wrapper button.buffed-blue-bkg-1:hover {
background: #046293
}
.pymk-card .card-wrapper button.buffed-blue-bkg-2 {
color: #006fa6;
text-decoration: none
}
.pymk-card .card-wrapper button.buffed-blue-bkg-2.hover,.pymk-card .card-wrapper button.buffed-blue-bkg-2:hover,.pymk-card .card-wrapper button.buffed-blue-bkg-2.focus,.pymk-card .card-wrapper button.buffed-blue-bkg-2:focus {
text-decoration: none
}
.pymk-card .card-wrapper button.buffed-blue-bkg-2.visited,.pymk-card .card-wrapper button.buffed-blue-bkg-2:visited {
color: #96999c
}
.pymk-card .card-wrapper button.buffed-blue-bkg-2:focus,.pymk-card .card-wrapper button.buffed-blue-bkg-2:hover {
color: #fff;
background: #0077b5
}
.pymk-card .card-wrapper button.bt-incommon {
right: 0;
top: 163px
}
.pymk-card.buffer {
display: none
}
.svg-blur-effect-def {
float: left;
width: 0;
height: 0
}
.email-confirm-tooltip {
padding: 10px
}
.email-confirm-tooltip h3 {
font-weight: bold;
padding-top: 0px;
padding-bottom: 5px
}
.pymk-card.promo.hide {
opacity: 0
}
.pymk-card.promo {
opacity: 1;
transition: opacity 500ms
}
.pymk-card.promo .promo-image-container {
height: 100px;
padding-top: 20px;
box-sizing: border-box;
text-align: center
}
.pymk-card.promo .promo-image-highlight {
width: 72px;
height: 72px;
border: 2px solid #005E93;
margin: auto;
border-radius: 38px;
position: relative;
display: inline-block
}
