@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600;700&display=swap');
/* CSS Document */
.clear { clear: both; }
.clearfix:after { content: "."; display:block; height:0; clear:both; visibility:hidden; }/* ----- clear fix for floats ----- */
.clearfix { display:inline-block; }
* html .clearfix { height:1%; }/* hides clearfix from IE-mac */
.clearfix { display:block; }/* end hide from IE-mac */
.centered { text-align:center; }
.lefted { text-align:left !important }
.alignleft {
    float:left;
    font-size: 17px;
    color: #fff;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
}
.alignright {
    float:right;
    font-size: 17px;
    color: #fff;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
}
.aligncenter { float:none; display:inline-block; text-align:left }
.alignnone { clear:both; font-size:0; line-height:0; margin:0; padding:0; border:0; height:0; width:0; }
.aligncenter.centered { text-align:center }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
/* End Clearfix
--------------------------------------------------------------------------------------------------------*/


/* =2. Preloader
--------------------------------------------------------------------------------------------------------*/
#preloader { position:fixed; top:0; left:0; right:0; bottom:0; background:#fff; z-index:99999; }
#status { z-index:28; position:absolute; color:#2b2b2b; top:50%; height:220px; width:100%; margin-top:-110px; }
#preloader p.small { font-size:15px; display:block; text-transform:uppercase; font-style:normal; font-weight:400; letter-spacing:1px; padding:0 !important }
/* horizontal centering */
.parent { width:100%; margin:0px auto; position:absolute; top:0; left:0; height:100%; padding:17px 35px; z-index:11; text-align:center; }
#preloader .child { text-align:center; }
#section1 .child { padding-bottom:82px; }
/* vertical centering */
.parent { display: table }
.child { display: table-cell; vertical-align: middle; padding:0; }
.parent .bottom { display: table-cell; vertical-align: bottom; padding:0; }
.parent .top { display: table-cell; vertical-align: top; padding:0; }
.box-parent .child { padding-top:10px; }
/* End Preloader
--------------------------------------------------------------------------------------------------------*/


/* =3. Typography
--------------------------------------------------------------------------------------------------------*/
html { height:100%; width:100%; overflow-x:hidden; }
body { font-size: 15px; font-family:Lora, "Helvetica Neue", Helvetica, Arial, sans-serif; color:#777; background:#f8f8f7; height:100%; width:100%; -webkit-text-size-adjust: 100%; -moz-osx-font-smoothing:grayscale; -webkit-font-smoothing: antialiased;  }
strong { font-weight:700; }
a, a > * { -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
a, a:hover, a:focus { color:#2b2b2b; text-decoration:none; outline: 0; }
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0; text-rendering: optimizeLegibility; outline: 0; }
*:focus, *:after:focus, *:before:focus { outline: 0; }
*:after, *:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }

p { line-height:1.5; padding:0; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; position:relative;}
a { text-decoration:none; }
p a { color:#555; text-decoration:underline; }
p a:hover { color:#2b2b2b; text-decoration:underline; }
a p { color:#555; }
p.small { font-size:15px !important; text-transform:uppercase; font-weight:400; color:#555; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; padding-left:1px; font-style:normal !important; }
a p.small { color:#2b2b2b }
#preloader p.small { color:#555 !important; padding:0 !important }
p.small.above-h2 { padding-top:25px; margin-bottom:-5px; position:relative; }
p.lefted, .lefted p { text-align:left }
p.large { font-size:18px; padding:15px 0 15px; margin-bottom:0; display:inline-block }
.header-wrapper p.large, #section1 p.large { max-width:100%; }
#section1 p.large { font-size:20px; font-family: 'PT Sans', sans-serif; line-height: normal; font-weight: 400; }
p.large.no-padding { padding:0; }
.with-bg p { color:#fff !important; }
.info-box-content p.large, .header-wrapper p.large { max-width:100%; margin-left:auto; margin-right:auto; font-size: 17px; color: #000; font-family: 'PT Sans', sans-serif; font-weight: 400; text-align: justify; line-height: normal; }
.info-box-content p.large, .header-wrapper-restaurant p.large { max-width:100%; margin-left:auto; margin-right:auto; font-size: 17px; color: #000; font-family: 'PT Sans', sans-serif; font-weight: 400; text-align: justify; line-height: normal; }
.extra-padding-top, .bg-white p, .auto-height p { padding-top:10px; }
p.below-button { position:relative; top:-10px; font-style:italic; font-size:13px; }
.agency p.below-button { top:-5px; }
.with-bg a p.below-button { color:#fff; text-decoration:underline; opacity:0.7; }
.with-bg a:hover p.below-button { color:#fff; opacity:1; }

blockquote { border:0; font-style:italic; position:relative; margin:55px 0 15px; text-align:center; padding-bottom:0;  }
blockquote p { margin-top:0 !important; font-size:20px; color:#2b2b2b; }
blockquote::before { content:"“”" !important; position:absolute; display:block; font-family:Georgia, "Times New Roman", Times, serif; font-size:56px; left:50%; top:-55px; font-weight:600; width:100px; margin-left:-50px; text-align:center; color:#2b2b2b; letter-spacing:0.1em; }
blockquote p.name { font-style:normal; color:#777; font-weight:400; margin-top:-5px; position:relative; font-size:13px; padding-bottom:0; }
blockquote .small::before, blockquote footer::before, blockquote small::before { content:""; }
.with-bg blockquote, .with-bg blockquote::before { color:#fff; }
/* End Typography
--------------------------------------------------------------------------------------------------------*/


/* =4. Headings
--------------------------------------------------------------------------------------------------------*/
#logo { display:block; display:table; height:52px; position:relative; margin:0; float:left }
#logo a { background:url(https://www.utulivubungalow.com/images/bg-logo.png) center no-repeat; background-size:100px 52px; width:100px; /*try to keep it below 52px*/ height:52px; text-indent:-9999px; display: table-cell; vertical-align: middle; }





@media (max-width:768px) {
.tagline { float:left; font-size:20px; font-weight:400; padding:0; margin:0px auto; position:relative; display:table; height:52px; margin-top:-1px;     font-family: "Oswald", Arial, Helvetica, sans-serif; color:#000;}
.tagline span { display: table-cell; vertical-align: middle; font-size: 23px; font-family: "Oswald", Arial, Helvetica, sans-serif;}
.mother-text {
    max-width: 100%;
    vertical-align: middle;
    padding: 10px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    border-color: rgb(97, 97, 97);
}
.day-tour-details h3 {
    font-family: "Oswald",sans-serif;
    font-size: 30px;
    font-weight: 400;
    text-align: left;
}
}


@media (min-width:767px) {
.tagline { float:left; font-size:30px; font-weight:400; padding:0; margin:0px auto; position:relative; display:table; height:52px; margin-top:-1px; font-family: "Oswald", Arial, Helvetica, sans-serif; color:#000; }
.tagline span { display: table-cell; vertical-align: middle;     font-family: "Oswald", Arial, Helvetica, sans-serif; }
.mother-text {
    max-width: 50%;
    vertical-align: middle;
    padding: 10px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    border-color: rgb(97, 97, 97);
}   
.day-tour-details h3{
    font-family: "Oswald",sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-align: left;
}
.day-tour-details h3.left-room-heading-align {
    font-family: "Oswald",sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-align: left;
}
.day-tour-details h3.right-room-heading-align {
    font-family: "Oswald",sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-align: right;
}
.day-tour-details h3.right-room-heading-align {
    display: inline-block;
}
.day-tour-details h3.right-price-list {
    margin-left: 20px;
}
.day-tour-details h3.right-price-list span {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 39px;
}
}




#logo-white { display:block; background:url(https://www.utulivubungalow.com/images/bg-logo-white.png) center no-repeat; background-size:100px 52px; width:100px; /*try to keep it below 52px*/ height:52px; text-indent:-9999px; position:absolute; top:52%; left:50%; margin-left:-50px; z-index:2 }

.numbers, h1, h2, h3, h4, h5, h6 { line-height:1.3; color:#2b2b2b; display:block; position:relative; font-family:"Oswald", Arial, Helvetica, sans-serif; font-weight:400; }
.with-bg h1, .with-bg h2, .with-bg h3, .with-bg h4, .with-bg h5, .with-bg h6 { color:#fff; }
h1 { font-size:60px; line-height:1.1;  margin-bottom:20px; }
h2 { font-size:44px; line-height:1.2;  }
h2 strong { letter-spacing:-1px; }
h3 { font-size:28px; line-height:1.25; }
h4 { font-size:22px; }
h5 { font-size:18px; }
h6 { font-size:16px; }
.numbers { font-weight:400; font-size:48px; line-height:1; letter-spacing:-2px; padding-bottom:10px; padding-top:10px }

h1 span.italic, h2 span.italic, h3 span.italic, h4 span.italic, h5 span.italic { font-family:"Lora", Arial, Helvetica, sans-serif; font-weight:400; font-style:italic; letter-spacing:-1px; }

.header-wrapper h2 { max-width:674px; margin-left:auto; margin-right:auto; }
/* End Headings
--------------------------------------------------------------------------------------------------------*/


/* =5. Buttons
--------------------------------------------------------------------------------------------------------*/
#arrow-down { position:absolute; bottom:80px; left:50%; z-index:11; height:100px; width:70px; margin-left:-35px; background:url(https://www.utulivubungalow.com/images/bg-arrow-down@2x.png) no-repeat 21px 26px; background-size:28px 16px; text-indent:-9999px; display:block; -webkit-animation: moveUpDown 2s infinite  normal ease-out; animation: moveUpDown 2s infinite  normal ease-out;
}
.read-more { position:absolute; z-index:54; bottom:0; left:0; text-align:center; width:100%; margin-bottom:-40px; opacity:0; -webkit-transition: opacity 0.42s ease-in-out 0s, margin 0.42s ease-in-out 0s; -moz-transition: opacity 0.42s ease-in-out 0s, margin 0.42s ease-in-out 0s; transition: opacity 0.42s ease-in-out 0s, margin 0.42s ease-in-out 0s; }
.read-more span { background:rgba(255, 103, 95, .8); color:#fff; font-size:12px; text-transform:uppercase; font-style:normal; padding:10px 14px 11px 14px; display:inline-block; margin:0 auto; height:38px; }
#inquire { margin-bottom:50px; }
@-webkit-keyframes moveUpDown {
0% { bottom:80px; }
50%{ bottom:100px; }
100% { bottom: 80px; }
}
@keyframes moveUpDown {
0% { bottom:80px; }
50%{ bottom:100px; }
100% { bottom: 80px; }
}

.safari-tour-details a.button {  border-radius:3px; float: left; border:2px solid #2b2b2b; padding:15px 28px 16px; line-height:1; display:inline-block; margin-bottom:20px; margin-top:20px; font-size:17px !important; text-transform:uppercase; font-weight:400; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; color:#2b2b2b; position:relative; z-index:1; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; text-decoration:none !important; }
.day-tour-details a.button {  border-radius:3px; float: left; border:2px solid #2b2b2b; padding:15px 28px 16px; line-height:1; display:inline-block; margin-bottom:20px; margin-top:20px; font-size:17px !important; text-transform:uppercase; font-weight:400; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; color:#2b2b2b; position:relative; z-index:1; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; text-decoration:none !important; }
.button {  border-radius:3px; border:2px solid #2b2b2b; padding:15px 28px 16px; line-height:1; display:inline-block; margin-bottom:20px; margin-top:20px; font-size:17px !important; text-transform:uppercase; font-weight:400; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; color:#2b2b2b; position:relative; z-index:1; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; text-decoration:none !important; }
.submit { line-height:1; font-size:12px !important; text-transform:uppercase; font-weight:400; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; color:#2b2b2b; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }
.button:hover, .button:hover i.fa, .button:hover .submit { color:#fff !important; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; cursor:pointer;}
.button::after { background:#2b2b2b; content:""; display:block; height:0; position:absolute; left:0; top:0; right:0; -webkit-transition: height 0.2s ease 0s; transition: height 0.2s ease 0s; z-index:-1; }
.button:hover::after { height:100%; -webkit-transition: height 0.2s ease 0s; transition: height 0.2s ease 0s; }
.button.full-width { width:100%; text-align:center; margin-top:26px; padding:0; }
.button input { display:inline-block; padding:16px 28px 17px; width:100%; }

.button i { margin-right:3px !important; }
.button:hover i { color:#fff !important; }
/* End Text and Buttons
--------------------------------------------------------------------------------------------------------*/


/* =6. Main Nav
--------------------------------------------------------------------------------------------------------*/
nav { margin:0px auto; position:relative; display:table; height:52px; float:right; z-index:1000 }
#nav { display: table-cell; vertical-align: middle; }
#nav li { float:left; margin:0px 0px 0px 28px; position:relative }
#nav li a { font-size:18px !important; text-transform:uppercase; font-weight:400; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; display:block; padding:3px 0 5px 1px; position:relative; color:#2b2b2b; z-index:100 }
#nav li a::after { content:""; background:#2b2b2b; bottom:6px; display:block; left:0; height:2px; position:absolute; -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; width:100%; opacity:0; }
#nav li a:hover::after, #nav li.active a::after { left:0; width:100%; bottom:1px; opacity:1; }
#nav li.with-dropdown a::after, .touch #nav li a:hover::after, .touch #nav li.active a::after { opacity:0; }
#nav li.with-dropdown ul li a:hover::after { opacity:1; }

#nav li ul { position:absolute; background:#fff; padding:0px 0px 15px; margin-left:-20px; display:none; border:1px solid rgba(0, 0, 0, 0.15); border-radius:4px; }
#nav li:hover ul { display:block; }
#nav li ul li { margin:0px 0px; padding:0 20px; }
#nav li ul li a { font-size:10px; }
#nav li ul li.first { border-top:0px solid #d8d8d8; padding-top:15px; }
#nav li ul li.first:after { background:#fff; top:-3px; content:""; height:8px; margin-left:2px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); width:8px; }
#nav li ul li.first:before { background:none repeat scroll 0 0 rgba(221, 221, 221, 1); top:-5px; content:""; height:8px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); width:8px; margin-left:2px; }
/* End Main Nav
--------------------------------------------------------------------------------------------------------*/


/* =7. Main Content
--------------------------------------------------------------------------------------------------------*/
header { position:relative; z-index: 1099; width:100%; background:#fff; padding:16px 35px 14px; -webkit-box-shadow:0px 0px 1px rgba(0, 0, 0, 0.25); box-shadow:0px 0px 1px rgba(0, 0, 0, 0.25); }
#undefined-sticky-wrapper { z-index:200; width:100% }
.container { position:relative; margin:0 auto;  }
.section { position:relative; padding:84px 0; display:block; }
.section-contact-section { position:relative; padding:5px 0; display:block; }
.section-day-tours { position:relative; padding:40px 0; display:block; }
.section-day-tours-details { position:relative; padding:40px 0 0 0; display:block; }
.section-tripAdvisor { position:relative; padding:50px 0 0 0; display:block; }
.section-room-in-mother-page { position:relative; padding:5px 0 0 0; display:block; }
.section-restaurant { position:relative; padding:0; display:block; }
.section-reservation { position:relative; padding:0 0 35px 0; display:block; }
.section-hotel-descriptions { position:relative; padding: 0 0 0 0; display:block; }
#ancor2, #ancor3, #ancor4, #ancor5, #ancor6, #ancor7, #ancor8 { position:absolute; top:-78px; }
#section1 { display:block; height:100%; width:100%; border:0; margin-bottom:-83px; }
.section-hotel-descriptions.white-bg { background:#fff; }
.section.white-bg { background:#fff; }
.section-contact-section.white-bg { background:#fff; }
.section.header-section { display:block; height:100%; width:100%; margin-bottom:-80px; }
.other-top-heading h1{
    font-weight: 400;
    line-height: normal;
    text-shadow: 1px 1px 2px #000;
}
.other-top-heading p{
    font-weight: 400;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 25px;
    line-height: normal;
    text-shadow: 1px 1px 2px #000;
}

.bg-image-1 { background:url(https://www.utulivubungalow.com/images/full03.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg-image-2 { background:url(https://www.utulivubungalow.com/images/full04.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
.bg-image-3 { background:url(https://www.utulivubungalow.com/images/Mother-Page/Mother-Page-Cover-Page.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-4 { background:url(https://www.utulivubungalow.com/images/full08.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-Day-Tours { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/Day-Tours.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-jozani { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/JOZANI-FOREST-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-dolphin { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/KIZIMKAZI-DOLPHIN-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-sandbank { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/NAKUPENDA-SANDBANK-PICNIC.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-nungwi { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/NUNGWI-CULTURAL-VILLAGE-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-prison { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/PRISON-ISLAND-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-safariblue { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/SAFARI-BLUE-SEA-ADVENTURE.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-mnemba { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/SNORKELING-AT-MNEMBA-ATOLL.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-stonetown { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/STONE-TOWN-CITY-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-sunset { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/SUNSET-DHOW-CRUISE.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-tumbatu { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/TUMBATU-CULTURAL-VILLAGE-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-cookingclass { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/ZANZIBAR-TRADITIONAL-COOKING-CLASS.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-spicetour { background:url(https://www.utulivubungalow.com/images/Day-Tours/Background-Images/ZANZIBAR-SPICE-TOUR.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-superior-st-rooms { background:url(https://www.utulivubungalow.com/images/Rooms/Background-Images/Superior-Standard-Rooms.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-deluxe-gd-rooms { background:url(https://www.utulivubungalow.com/images/Rooms/Background-Images/Deluxe-Garden-Rooms.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-deluxe-dom-room { background:url(https://www.utulivubungalow.com/images/Rooms/Background-Images/Deluxe-Dom-Room.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.bg-image-safari-deals { background:url(https://www.utulivubungalow.com/images/Safari-Deals/Background-Images/Safari-Deals-Background.jpg) no-repeat center; -webkit-background-size: 100% auto; -moz-background-size: 100% auto; -o-background-size: 100% auto; background-size: 100% auto; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.nautical-1 { background:url(https://www.utulivubungalow.com/images/nautical01.png) no-repeat center top; background-size:1000px 500px; position:absolute; top:20px; left:50%; height:500px; width:1000px; margin-left:-500px; opacity:0.1 }
.nautical-4 { background:url(https://www.utulivubungalow.com/images/nautical04.png) no-repeat center top; background-size:1000px 500px; position:absolute; top:-90px; left:50%; height:500px; width:1000px; margin-left:-500px; opacity:0.1 }
.nautical-5 { background:url(https://www.utulivubungalow.com/images/nautical05.png) no-repeat center top; background-size:1000px 500px; position:absolute; top:-40px; left:50%; height:500px; width:1000px; margin-left:-485px; opacity:0.1 }
.nautical-7 { background:url(https://www.utulivubungalow.com/images/nautical04.png) no-repeat center top; background-size:1000px 500px; position:absolute; top:-140px; left:50%; height:500px; width:1000px; margin-left:-500px; opacity:0.1 }
.nautical-8 { background:url(https://www.utulivubungalow.com/images/nautical03.png) no-repeat center top; background-size:1000px 500px; position:absolute; top:-15px; left:50%; height:500px; width:1000px; margin-left:-660px; opacity:0.1 }

.parallax { background-attachment: fixed; background-repeat: repeat-y; background-position: center center; }
@media only screen and (min-width : 300px) and (max-width : 1024px) {
.parallax { background-attachment: initial; }
}

.overlay { display:block; position:absolute; top:0;  background:rgba(29, 29, 29, 0.4);  width:100%; height:100%; }

.break { display:block; clear:both; height:30px; width:100%; position:relative }
.tiny-break { display:block; clear:both; height:10px; width:100%; position:relative }
.big-break { display:block; clear:both; height:50px; width:100%; position:relative }

.vimeo-background { position: absolute; top: -15%; left: -15%; width: 130%; height: 130%; }
.touch .vimeo-background { display:none; }

.header-wrapper-room-in-mother-page { margin-top:0px; margin-bottom:35px; }
.header-wrapper { margin-top:0px; margin-bottom:50px; }
.header-wrapper-restaurant { margin-top:0px; margin-bottom:20px; }
.header-wrapper.no-plarge { margin-bottom:20px; }
.contact-page p {
    color: #000;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
}
#section2 .header-wrapper { margin-top:0; }
.tripadvisor { background:url(https://www.utulivubungalow.com/images/tripadvisor.png) no-repeat center; height:67.2px; width:100px; background-size:100px 67.2px; display:inline-block; }
.logo-wrapper { margin-top:15px; margin-bottom:20px; }
.contact-wrapper { margin-bottom:15px; position:relative; margin-top:-10px; }
/* =End Main Content
--------------------------------------------------------------------------------------------------------*/


/* =8. Column Grid
--------------------------------------------------------------------------------------------------------*/
.padding { padding:0 3px; }
.add-padding {padding:0 45px; }
.add-padding.left { padding-right:17px; }
.add-padding.right { padding-left:17px; }

.padding-10 { padding-top:10px; }
.padding-20 { padding-top:20px; }
.padding-25 { padding-top:25px; }
.padding-30 { padding-top:30px; }
.padding-60 { padding-top:60px; }

.margin-15 { margin-top:15px !important; }
.margin-20 { margin-top:20px !important; }
.margin-30 { margin-top:30px !important; }

.more-info {background:#fff; width:100%; padding:5px 15px; padding-top:5px; text-align:center; overflow:hidden; position:relative; border: 2px solid #d8d8d8; }
.day-tour-thumb h3{
    font-family: "Oswald",sans-serif;
    font-size: 24px;
    font-weight: 400;
    text-align: left;
}
.day-tour-thumb p.location{
    font-family: 'PT Sans', sans-serif;
    text-align: left;
    font-weight: 400;
    font-size: 13px;
    color: #000;
}

.day-tour-thumb p.thumb-description{
    font-size: 17px;
    color: #000;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    text-align: justify;
    line-height: normal;
}
.image-thumb-border img {
    border-bottom: 6px solid #d8d8d8;
}
.day-tour-details p.location{
    font-family: 'PT Sans', sans-serif;
    text-align: left;
    font-weight: 600;
    font-size: 17px;
    color: #000;
}

.day-tour-details p.details-description{
    font-size: 17px;
    color: #000;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    text-align: justify;
    line-height: normal;
}

.day-tour-details td{
    font-size: 17px;
    color: #000;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    line-height: normal;
}
.safari-tour-details h3{
    font-family: "Oswald",sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-align: left;
}
.safari-tour-details h4{
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
}
.safari-tour-details h4.overview{
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-align: left;
    text-transform: none;
}
.safari-tour-details h4.itinerary{
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
}
.safari-tour-details h5{
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 400;
    text-align: left;
    text-transform: none;
}
.safari-tour-details h5.include{
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 25px;
    font-weight: 600;
    text-align: left;
    text-transform: capitalize;
}
.safari-tour-details p.location{
    font-family: 'PT Sans', sans-serif;
    text-align: left;
    font-weight: 600;
    font-size: 17px;
    color: #000;
}

.safari-tour-details p.details-description{
    font-size: 17px;
    color: #000;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    text-align: justify;
    line-height: normal;
}

.arrow-left, .arrow-right { display:inline-block; float:left; width:45px; color:#2b2b2b; margin-top:8px; height:12px; background:url(https://www.utulivubungalow.com/images/arrow-left.png) 7px center no-repeat; background-size:18px 12px; }
.arrow-right { float:right; background:url(https://www.utulivubungalow.com/images/arrow-right.png) 20px center no-repeat; background-size:18px 12px;}
a:hover .arrow-left { background-position:left center; }
a:hover .arrow-right { background-position:right center; }
.custom-pagination .inactive a:hover .arrow-left { background-position: 7px center; }
.custom-pagination .inactive a:hover .arrow-right { background-position: 20px center; }
.custom-pagination { padding-top:36px !important; padding-bottom:0px !important; }
.custom-pagination h5 { margin-top:0; }
.custom-pagination .button { margin-top:0; }
.custom-pagination .inactive { opacity:0.2; }
.custom-pagination .inactive a { cursor:default !important; }

.widgets { padding-left:30px; }
.post .widgets { position:relative; margin-top:-10px; }
/* =End Column Grid
--------------------------------------------------------------------------------------------------------*/


/* =9. Images
--------------------------------------------------------------------------------------------------------*/
img { width:100%; display: block; max-width: 100%; z-index:9; box-shadow: #fff 0 0 0 }
.round img, .avatar img { border:0 none; border-radius:50%; }

.videos { width:1140px; height:650px; border:0;}
.videoWrapper { position:relative; padding-bottom:56.25%; /* 16:9 */ height:0; }
.videoWrapper iframe { position:absolute; top:0; left:0; width:100%; height:100%; }

.musicWrapper { position:relative; height:auto; margin-bottom:-6px; }
.musicWrapper iframe { width:100%; height:auto; }

.margin-wrapper { margin:0px; margin-bottom:35px; position:relative; }
.blog .margin-wrapper { margin-bottom:30px; }
.covering-image { position:absolute; left:0; top:0; width:100%; height:100%; border:0; background:rgba(29, 29, 29, 0.4); -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s;}
a:hover .covering-image { background:rgba(29, 29, 29, 0.6); -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; }

#close-button { background:url(https://www.utulivubungalow.com/images/bg-close-dark@2x.png) no-repeat center; background-size:24px 24px; position:absolute; right:15px; top:15px; height:24px; width:24px; cursor:pointer; }

a .info-box-content h3, a .info-box-content p { color:#fff !important; background:none !important; display:inline-block; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; white-space:nowrap;}
a .info-box-content p { display:block; margin-top:0px; }
a:hover .info-box-content p { -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; margin-top:5px; }
a .info-box-content h3::after { content:""; background:#fff; bottom:4px; display:block; left:0; height:2px; position:absolute; -webkit-transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s; width:100%; opacity:0; }
a:hover .info-box-content h3::after { left:0; width:100%; color:#fff; bottom:-9px; opacity:1; }

.left-side { position:absolute; left:35px; bottom:25px; }
.right-side { position:absolute; right:35px; bottom:25px; }

.border-wrapper { border:1px solid #d8d8d8; padding:25px 25px; border-radius:3px; margin-bottom:30px; text-align:center; }
.narrow-wrapper { padding:15px 45px; }
/* End Images
--------------------------------------------------------------------------------------------------------*/


/* =10. Icons
--------------------------------------------------------------------------------------------------------*/
.social-list { padding-bottom:20px; padding-top:0px; margin:0; cursor:default; font-size:0; }
.border-left-wrapper .social-list { padding-top:5px; padding-left:10px; display:inline-block; }
.social-list li { display:inline-block; padding:0 5px; }
.social-list.alignright li { padding:0 0 0 10px; }

.social-list li a i { color:#2b2b2b; font-size:18px; }

.more-info .social-list { padding-top:5px; padding-bottom:10px; }
.more-info .social-list li a i { font-size:18px; }
i.fa { margin-right:3px; color:#2b2b2b }
.social-list.alignright i.fa { margin-left:3px; }

.covering-image i.fa, .with-bg i.fa { color:#fff; }
.covering-image .bordered-content.on-map i.fa { color:#2b2b2b; font-size:12px; }
.blog-bottom i.fa, p.small.date i.fa { color:#999; margin-right:2px; }

.round-button { border-radius:51%; height:66px; width:66px; display:inline-block; text-align:center; border:2px solid #fff; position:relative; margin:15px 0 33px; background:#fff; }
.round-button i.fa { color:#2b2b2b; font-size:22px; padding:0; margin:0; padding-top:19px; padding-left:5px; }

.icons.tea-and-coffee { background:url(https://www.utulivubungalow.com/images/icons/Tea-and-Coffee.png) center no-repeat; background-size:36px 36px; }
.icons.laundry-service { background:url(https://www.utulivubungalow.com/images/icons/Laundry-Service.png) center no-repeat; background-size:36px 36px; }
.icons.Free-WI-FI { background:url(https://www.utulivubungalow.com/images/icons/Free-WI-FI.png) center no-repeat; background-size:36px 36px; }
.icons.Hammock { background:url(https://www.utulivubungalow.com/images/icons/Hammock.png) center no-repeat; background-size:70px 70px; width: 70px }
.icons.food-dome-serving { background:url(https://www.utulivubungalow.com/images/icons/food-dome-serving.png) center no-repeat; background-size:36px 36px; }
.icons.beach { background:url(https://www.utulivubungalow.com/images/icons/beach.png) center no-repeat; background-size:36px 36px; }
.icons.dumbell { background:url(https://www.utulivubungalow.com/images/icons/dumbell.png) center no-repeat; background-size:36px 36px; }
.icons.safe-2 { background:url(https://www.utulivubungalow.com/images/icons/safe-2.png) center no-repeat; background-size:36px 36px; }
.icons.hat-chef { background:url(https://www.utulivubungalow.com/images/icons/hat-chef.png) center no-repeat; background-size:36px 36px; }
.icons.snorkel-mask { background:url(https://www.utulivubungalow.com/images/icons/snorkel-mask.png) center no-repeat; background-size:36px 36px; }

.icons.map-pin-1 { background:url(https://www.utulivubungalow.com/images/icons/map-pin-1.png) center no-repeat; background-size:36px 36px; }
.icons.network { background:url(https://www.utulivubungalow.com/images/icons/network.png) center no-repeat; background-size:36px 36px; }
.icons.fax-machine { background:url(https://www.utulivubungalow.com/images/icons/fax-machine.png) center no-repeat; background-size:36px 36px; }
.icons.email-2 { background:url(https://www.utulivubungalow.com/images/icons/email-2.png) center no-repeat; background-size:36px 36px; }

.icons { position:relative; height:36px; width:36px; margin-top:14px; margin-bottom:10px; opacity:0.8; display:inline-block }
.centered .icons { float:none; display:inline-block; height:48px; width:48px; margin-top:5px; margin-bottom:0px; z-index:2; }
.next-to-icon { margin-left:73px; padding-bottom:10px; }
.icons.rounded { border:2px solid #2b2b2b; padding:45px; height:98px; width:98px; margin-bottom:10px; }
/* End Icons
--------------------------------------------------------------------------------------------------------*/


/* =11. Blog
--------------------------------------------------------------------------------------------------------*/
.blog-bottom { border-top:1px solid #f1f1f1; background:#fff; width:100%; padding:25px 35px 20px; margin-bottom:30px; position:relative; }
.avatar { width:45px; height:45px; float:left; margin-right:15px; }
.author-info .avatar { width:100px; height:100px; float:none; margin:10px 0 5px; display:inline-block; }
.author-info h4 { margin-bottom:5px; }

.comment { margin: 20px 30px 20px 0px; padding:30px 0px 10px; border-top: 1px solid #eee; position:relative }
.commenter-avatar { float: left; padding-right:30px; max-width:20%; }
.commenter-avatar > img { width: auto; }
.comment-content { float: left; max-width:80%; padding-right:20px; }
.comment-content h5 { margin-top:0; margin-bottom:5px; }

aside { padding-bottom:5px; }
.search-widget { margin-bottom:33px !important; position:relative }

article p { padding-bottom:15px; }
article .border-wrapper { margin:25px 0 40px; }
.setting-paragraph p {
    font-size: 17px;
    color: #000;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: normal;
}
.stars-rating .tripsadvisor_5 img {
    width: 94px;
    height: 26px;
    padding-left: 0;
}
.logo-wrapper h4{
    font-size: 25px;
    color: #000;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: normal;
}
.video-2-popup h2 {
    font-size: 36px;
    font-family: 'Helvetica Neue', sans-serif;
    font-weight: 400;
    text-align: center;
    line-height: normal;
    text-shadow: 1px 1px 2px #000;  
}
/* =End Blog
--------------------------------------------------------------------------------------------------------*/


/* =12. Footer
--------------------------------------------------------------------------------------------------------*/
footer { min-height:100px; margin:0px 0px 0 0px; background:#2b2b2b; width:100%; color:#888; }
footer .container { padding-top:39px; padding-bottom:39px; }
footer a { color:#fff; opacity:0.6; }
footer a:hover { color:#fff; opacity:1; }
footer i.fa-copyright { color:#FFF; }
footer i.fa-heart { color:red; }
footer .social-list { padding:0; }
footer .social-list li { padding:0 0 0 10px; }
footer .social-list li a i { color:#8d8d8d; font-size:16px; top:2px; position:relative }
/* End Footer
--------------------------------------------------------------------------------------------------------*/


/* =13. Lists
--------------------------------------------------------------------------------------------------------*/
ul.unordered-list, .hentry ul { list-style: circle; line-height:1.6; padding:0px 15px; margin-left:5px; text-align:left !important; margin-top:10px; }
ol { list-style:decimal; line-height:1.6; padding:0px 15px; margin-left:12px; }
ul.tag-list { margin-left:5px; }
ul.unordered-list li a, ol li a, ul.tag-list li a { border:0; color:#777; }
ul.unordered-list li a:hover, ol li a:hover, ul.tag-list li a:hover { border:0; color:#2b2b2b; }
ul.unordered-list li a::after:hover, ol li a::after:hover, ul.tag-list li a::after:hover { width:0; }

ul .small, ol .small { font-size:11px !important; text-transform:uppercase; font-weight:400; color:#888; letter-spacing:1px; font-family:"Oswald", Arial, Helvetica, sans-serif; padding-left:1px; font-style:normal !important; }
/* End Lists
--------------------------------------------------------------------------------------------------------*/


/* =14. Price Tables
--------------------------------------------------------------------------------------------------------*/
.price-table { text-align:center; background:#fff; padding:10px 10px; padding-bottom:10px; margin:0px 0 10px; width:100%; }
.price-table h3 { padding-bottom:10px; }
.price-table p.price { font-size:60px; color:#2b2b2b; margin-left:-10px; font-weight:400; padding-top:15px; margin-bottom:0; padding-bottom:0; font-family: 'Helvetica Neue', sans-serif; }
.price-table p.price span { font-size:18px; display:inline-block; padding-top:20px; padding-right:5px; font-weight:400; vertical-align:top }
.price-table.highlighted p.price { font-size:60px; }
.price-table.highlighted p.price span {  padding-top:25px; }
.line-through { text-decoration: line-through; color:#bbb }
.price-table .price-details { line-height:2.0 }
.heading:after { background:#fff; bottom:-5px; content:""; height:12px; left:50%; margin-left:-6px; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); width:12px; }
.heading:before { background:none repeat scroll 0 0 rgba(221, 221, 221, 1); bottom:-7px; content:""; height:12px; left:50%; position:absolute; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); width:12px; margin-left:-6px; }
.heading { padding:10px 0px 12px; margin-top:20px; position:relative; color:#2b2b2b; border-bottom:1px solid #d8d8d8; }
.safari-thumb-boarder img {border-bottom: 6px solid #d8d8d8;}
.price-table.highlighted .heading:before { background:none repeat scroll 0 0 rgba(43, 43, 43, 1); }
.price-table.highlighted .heading { border-bottom:2px solid #2b2b2b; }
.heading p.small { padding:5px; margin-bottom:-5px; background: rgba(0, 0, 0, 0.8); color: #FFF; font-size: 18px !important }
.day-tour-details .dominant {
    color: #388803;
}
.safari-tour-details .dominant {
    color: #388803;
}
.safari-tour-details .ssive {
    color: #b71c1c;
}
.safari-tour-details .unclassified {
    color: #000;
}
.modal-dialog {
    width: 90%;
}
/* =End Price Tables
--------------------------------------------------------------------------------------------------------*/


/* =15. Ajax
--------------------------------------------------------------------------------------------------------*/
.close-ajax { display: inline-block; cursor: pointer; background:url(https://www.utulivubungalow.com/images/icons/bg-close@2x.png) no-repeat center #fff; background-size:48px 48px; width:64px; height:64px; text-indent:-9999px; text-decoration:none; border:0; position:absolute; margin-left:-32px; left:50%; bottom:-75px; }
.close-ajax:hover {border:0 !important; }
.close-ajax:hover::after { width:0; }
#ajax-content .flex-next, #ajax-content .flex-prev { background-color:rgba(29, 29, 29, 0.4); }
#loading { min-height: 800px; text-align: center; vertical-align: middle; position: relative; }
#loading img { top: 100px; position: absolute; width:auto !important; margin:0 auto; display:inline-block }
.prev-ajax { background-image: url(https://www.utulivubungalow.com/images/icons/bg-prev@2x.png); background-size:48px 48px; background-color: transparent; border: none; height: 48px; width: 48px; box-shadow: none; left: -60px; top: 0; color: transparent; position: absolute; cursor: pointer; }
.next-ajax { background-image: url(https://www.utulivubungalow.com/images/icons/bg-next@2x.png); background-size:48px 48px; background-color: transparent; border: none; height: 48px; width: 48px; box-shadow: none; right: -60px; top: 0; color: transparent; position: absolute; cursor: pointer; }

.ajax-content { background:#f8f8f7; position:relative; margin-top:-110px; margin-bottom:60px; }
.ajax-content .container { padding-top:120px; padding-bottom:75px; margin-bottom:-35px; }
#ajax-anchor { top:-164px; position:relative; }
.ajax-content h3 { margin-bottom:3px; font-size:30px; }

.border-left-wrapper { padding-left:25px; }
.borderline { background:#d8d8d8; width:100%; height:1px; display:block; position:relative; margin:30px 0 25px 0; }
.col-lg-12 .borderline { margin:40px 0 30px 0; }
.bordered-content { background:#fff; padding:40px 45px 40px; position:relative; margin-bottom:30px;  }
.bordered-content.more-info { padding-top:35px; }
/* =End Ajax
--------------------------------------------------------------------------------------------------------*/


/* =16. Googlemaps
--------------------------------------------------------------------------------------------------------*/
#map { width:100%; height:495px; margin:0; border:0 }
#map:before, #map:after { background: none; content: ''; left: 0; position: absolute; top: 0; width: 100%; }
#map:after { bottom: 0; top: auto; }

.contact-map-overlay { display:block; position:absolute; top:0; background:#000; width:100%; height:100%; -webkit-transition: all 0.2s ease 0.0s; transition: all 0.2s ease 0.0s; opacity:0.5; z-index:1 }
#map-section { position:relative; }
/* End Googlemaps
--------------------------------------------------------------------------------------------------------*/

/* Full Gallery */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.modern-gallery img {
  display: block;
}

.gallery {
  position: relative;
  z-index: 2;
  padding: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.gallery.pop {
  -webkit-filter: blur(10px);
          filter: blur(10px);
}
.gallery figure {
  -ms-flex-preferred-size: 33.333%;
      flex-basis: 33.333%;
  padding: 2px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}
.gallery figure img {
  width: 100%;
  border-radius: 10px;
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.gallery figure figcaption {
  display: none;
}

.popup {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  -webkit-transition: opacity .5s ease-in-out .2s;
  transition: opacity .5s ease-in-out .2s;
}
.popup.pop {
  opacity: 1;
  -webkit-transition: opacity .2s ease-in-out 0s;
  transition: opacity .2s ease-in-out 0s;
}
.popup.pop figure {
  margin-top: 0;
  opacity: 1;
}
.popup figure {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  margin-top: 30px;
  opacity: 0;
  -webkit-animation: poppy 500ms linear both;
          animation: poppy 500ms linear both;
}
.popup figure img {
  position: relative;
  z-index: 2;
  border-radius: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4);
}
.popup figure figcaption {
  position: absolute;
  bottom: 50px;
  background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, 0.78));
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.78));
  z-index: 2;
  width: 100%;
  border-radius: 0 0 15px 15px;
  padding: 100px 20px 20px 20px;
  color: #fff;
    text-transform: uppercase;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 25px;
    text-align: center;
}
.popup figure figcaption small {
  font-size: 11px;
  display: block;
  text-transform: uppercase;
  margin-top: 12px;
  text-indent: 3px;
  opacity: .7;
  letter-spacing: 1px;
}
.popup figure .shadow {
  position: relative;
  z-index: 1;
  top: -15px;
  margin: 0 auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  width: 98%;
  height: 50px;
  opacity: .6;
  -webkit-filter: blur(15px) contrast(2);
          filter: blur(15px) contrast(2);
}
.popup .close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: url(#close);
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
.popup .close svg {
  width: 100%;
  height: 100%;
}

@-webkit-keyframes poppy {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    -webkit-transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
            transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
  }
  4.3% {
    -webkit-transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
            transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
  }
  4.7% {
    -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
            transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
  }
  6.81% {
    -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
            transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
  }
  8.61% {
    -webkit-transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
            transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
  }
  9.41% {
    -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
            transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
  }
  10.21% {
    -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
            transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
  }
  12.91% {
    -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
            transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
  }
  13.61% {
    -webkit-transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
            transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
  }
  14.11% {
    -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
            transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
  }
  17.22% {
    -webkit-transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
            transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
  }
  17.52% {
    -webkit-transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
            transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
  }
  18.72% {
    -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
            transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
  }
  21.32% {
    -webkit-transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
            transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
  }
  24.32% {
    -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
            transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
            transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
  }
  28.33% {
    -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
            transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
            transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
  }
  29.93% {
    -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
            transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
  }
  35.54% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
            transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
  }
  36.74% {
    -webkit-transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
            transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
  }
  39.44% {
    -webkit-transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
            transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
  }
  41.04% {
    -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
            transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
  }
  44.44% {
    -webkit-transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
            transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
  }
  52.15% {
    -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
            transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
  }
  59.86% {
    -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
            transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
  }
  61.66% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
  }
  63.26% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
  }
  75.28% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
            transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
  }
  83.98% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
  }
  85.49% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
  }
  90.69% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
  }
}

@keyframes poppy {
  0% {
    -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
            transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  3.4% {
    -webkit-transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
            transform: matrix3d(0.316, 0, 0, 0, 0, 0.407, 0, 0, 0, 0, 1, 0, -94.672, -91.573, 0, 1);
  }
  4.3% {
    -webkit-transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
            transform: matrix3d(0.408, 0, 0, 0, 0, 0.54, 0, 0, 0, 0, 1, 0, -122.527, -121.509, 0, 1);
  }
  4.7% {
    -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
            transform: matrix3d(0.45, 0, 0, 0, 0, 0.599, 0, 0, 0, 0, 1, 0, -134.908, -134.843, 0, 1);
  }
  6.81% {
    -webkit-transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
            transform: matrix3d(0.659, 0, 0, 0, 0, 0.893, 0, 0, 0, 0, 1, 0, -197.77, -200.879, 0, 1);
  }
  8.61% {
    -webkit-transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
            transform: matrix3d(0.82, 0, 0, 0, 0, 1.097, 0, 0, 0, 0, 1, 0, -245.972, -246.757, 0, 1);
  }
  9.41% {
    -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
            transform: matrix3d(0.883, 0, 0, 0, 0, 1.168, 0, 0, 0, 0, 1, 0, -265.038, -262.804, 0, 1);
  }
  10.21% {
    -webkit-transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
            transform: matrix3d(0.942, 0, 0, 0, 0, 1.226, 0, 0, 0, 0, 1, 0, -282.462, -275.93, 0, 1);
  }
  12.91% {
    -webkit-transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
            transform: matrix3d(1.094, 0, 0, 0, 0, 1.328, 0, 0, 0, 0, 1, 0, -328.332, -298.813, 0, 1);
  }
  13.61% {
    -webkit-transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
            transform: matrix3d(1.123, 0, 0, 0, 0, 1.332, 0, 0, 0, 0, 1, 0, -336.934, -299.783, 0, 1);
  }
  14.11% {
    -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
            transform: matrix3d(1.141, 0, 0, 0, 0, 1.331, 0, 0, 0, 0, 1, 0, -342.273, -299.395, 0, 1);
  }
  17.22% {
    -webkit-transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
            transform: matrix3d(1.205, 0, 0, 0, 0, 1.252, 0, 0, 0, 0, 1, 0, -361.606, -281.592, 0, 1);
  }
  17.52% {
    -webkit-transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
            transform: matrix3d(1.208, 0, 0, 0, 0, 1.239, 0, 0, 0, 0, 1, 0, -362.348, -278.88, 0, 1);
  }
  18.72% {
    -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
            transform: matrix3d(1.212, 0, 0, 0, 0, 1.187, 0, 0, 0, 0, 1, 0, -363.633, -267.15, 0, 1);
  }
  21.32% {
    -webkit-transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
            transform: matrix3d(1.196, 0, 0, 0, 0, 1.069, 0, 0, 0, 0, 1, 0, -358.864, -240.617, 0, 1);
  }
  24.32% {
    -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
            transform: matrix3d(1.151, 0, 0, 0, 0, 0.96, 0, 0, 0, 0, 1, 0, -345.164, -216.073, 0, 1);
  }
  25.23% {
    -webkit-transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
            transform: matrix3d(1.134, 0, 0, 0, 0, 0.938, 0, 0, 0, 0, 1, 0, -340.193, -210.948, 0, 1);
  }
  28.33% {
    -webkit-transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
            transform: matrix3d(1.075, 0, 0, 0, 0, 0.898, 0, 0, 0, 0, 1, 0, -322.647, -202.048, 0, 1);
  }
  29.03% {
    -webkit-transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
            transform: matrix3d(1.063, 0, 0, 0, 0, 0.897, 0, 0, 0, 0, 1, 0, -318.884, -201.771, 0, 1);
  }
  29.93% {
    -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
            transform: matrix3d(1.048, 0, 0, 0, 0, 0.899, 0, 0, 0, 0, 1, 0, -314.277, -202.202, 0, 1);
  }
  35.54% {
    -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
            transform: matrix3d(0.979, 0, 0, 0, 0, 0.962, 0, 0, 0, 0, 1, 0, -293.828, -216.499, 0, 1);
  }
  36.74% {
    -webkit-transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
            transform: matrix3d(0.972, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, -291.489, -220.242, 0, 1);
  }
  39.44% {
    -webkit-transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
            transform: matrix3d(0.962, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, -288.62, -227.228, 0, 1);
  }
  41.04% {
    -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
            transform: matrix3d(0.961, 0, 0, 0, 0, 1.022, 0, 0, 0, 0, 1, 0, -288.247, -229.999, 0, 1);
  }
  44.44% {
    -webkit-transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
            transform: matrix3d(0.966, 0, 0, 0, 0, 1.032, 0, 0, 0, 0, 1, 0, -289.763, -232.215, 0, 1);
  }
  52.15% {
    -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
            transform: matrix3d(0.991, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, -297.363, -226.449, 0, 1);
  }
  59.86% {
    -webkit-transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
            transform: matrix3d(1.006, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, -301.813, -222.759, 0, 1);
  }
  61.66% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, -302.102, -222.926, 0, 1);
  }
  63.26% {
    -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
            transform: matrix3d(1.007, 0, 0, 0, 0, 0.992, 0, 0, 0, 0, 1, 0, -302.171, -223.276, 0, 1);
  }
  75.28% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
            transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, -300.341, -225.696, 0, 1);
  }
  83.98% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.61, -225.049, 0, 1);
  }
  85.49% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -299.599, -224.94, 0, 1);
  }
  90.69% {
    -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
            transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, -299.705, -224.784, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -300, -225, 0, 1);
  }
}

/*----------------------- table -------------------*/
.table-bordered {
border: 1px solid #dddddd;
border-collapse: separate;
border-left: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

.table {
width: 100%;
margin-bottom: 20px;
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
display: table;
}

.widget.widget-table .table {
margin-bottom: 15px;
border: none;
}

.widget.widget-table .widget-content {
padding: 0;
}

.widget .widget-header + .widget-content {
border-top: none;
-webkit-border-top-left-radius: 0;
-webkit-border-top-right-radius: 0;
-moz-border-radius-topleft: 0;
-moz-border-radius-topright: 0;
border-top-left-radius: 0;
border-top-right-radius: 0;
}

.widget .widget-content {
padding: 20px 15px 15px;
background: #FFF;
border: 1px solid #D5D5D5;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

.widget .widget-header {
position: relative;
height: 40px;
line-height: 40px;
background: #E9E9E9;
background: -moz-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9));
background: -webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
background: linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
text-shadow: 0 1px 0 #fff;
border-radius: 5px 5px 0 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1),inset 0 1px 0 white,inset 0 -1px 0 rgba(255,255,255,0.7);
border-bottom: 1px solid #bababa;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
border: 1px solid #D5D5D5;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-webkit-background-clip: padding-box;
}

thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}

.widget .widget-header h6 {
    position: relative;
    left: 10px;
    display: inline-block;
    margin-right: 3em;
    font-size: 18px;
    font-family: 'PT Sans', sans-serif;
    font-weight: 600;
    color: #000;
    text-transform: uppercase;
    line-height: 18px;
    float: left;
    text-shadow: 1px 1px 2px rgb(255 255 255 / 50%);
}

.widget .widget-header [class^="icon-"], .widget .widget-header [class*=" icon-"] {
display: inline-block;
margin-left: 13px;
margin-right: -2px;
font-size: 16px;
color: #555;
vertical-align: middle;
}