.viewport {
display: -webkit-box;
display: -ms-box;
display: box;
overflow: hidden;
position: relative;
-webkit-perspective: 1000;
-webkit-transform: translateZ(0);
-webkit-backface-visibility: hidden;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-ms-box-orient: horizontal;
box-orient: horizontal; 
}
.mobile-sidebar {
background: #222;
display: block;
overflow: visible;
position: absolute;
width: 80%;
}
.mobile-sidebar.mobile-sidebar-left {
left: 0;
-webkit-transform: translate3d(-100%, 0, 0);
-moz-transform: translate3d(-100%, 0, 0);
-ms-transform: translate3d(-100%, 0, 0);
-o-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
.mobile-sidebar.mobile-sidebar-right {
right: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}
.m-pikabu-left-visible .mobile-sidebar.mobile-sidebar-left, 
.m-pikabu-right-visible .mobile-sidebar.mobile-sidebar-right {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.m-pikabu-left-visible .wrapper.mobile-sidebar-left, 
.m-pikabu-right-visible .wrapper.mobile-sidebar-right { position: absolute; }
.wrapper { 
width: 100%; 
-webkit-backface-visibility: hidden; 
}
@-moz-document url-prefix() { 
.wrapper {
float: left;
} 
}
.m-pikabu-left-visible .wrapper {
-webkit-transform: translate3d(80%, 0, 0);
-moz-transform: translate3d(80%, 0, 0);
-ms-transform: translate3d(80%, 0, 0);
-o-transform: translate3d(80%, 0, 0);
transform: translate3d(80%, 0, 0);
}
.m-pikabu-right-visible .wrapper {
-webkit-transform: translate3d(-80%, 0, 0);
-moz-transform: translate3d(-80%, 0, 0);
-ms-transform: translate3d(-80%, 0, 0);
-o-transform: translate3d(-80%, 0, 0);
transform: translate3d(-80%, 0, 0);
}
.wrapper,
.mobile-sidebar {
-webkit-transition: -webkit-transform 0.2s ease-in;
-moz-transition: -webkit-transform 0.2s ease-in;
-o-transition: -webkit-transform 0.2s ease-in;
transition: -webkit-transform 0.2s ease-in;
} .mobile-overlay { display: none; }
.m-pikabu-left-visible .mobile-overlay, 
.m-pikabu-right-visible .mobile-overlay {
cursor: pointer;
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 30;
}
.m-pikabu-overflow-scrolling .mobile-sidebar { overflow: auto; }
.m-pikabu-overflow-touch { -webkit-overflow-scrolling: touch; } .mobile-controls { 
background-color: #262626;
display: none; 
height: 45px; 
line-height: 45px;
white-space: nowrap;
width: 100%;
}
.mobile-controls a,
.mobile-controls a:hover { 
color: #FFF!important;
}
.mobile-nav-toggle {
background: url(//bunsal.com/wp-content/themes/macho/assets/images/sprite.png) no-repeat -22px -28px;
border-left: 1px solid #333;
display: block;
float: right;
margin-right: -1px;
padding: 0 20px 0 45px;
position: relative;
text-align: right;
}
.mobile-nav-toggle:hover { 
cursor: pointer; 
}
.mobile-pager a:hover,
.mobile-nav-toggle:hover,
.m-pikabu-right-visible .mobile-nav-toggle[data-role="right"] {
background-color: #222; 
} .mobile-pagination {
position: absolute;
left: 0;
top: 0;
}
.mobile-pager {
display: inline-block;
height: 45px;
width: 45px;
}
.mobile-pager a {
background: url(//bunsal.com/wp-content/themes/macho/assets/images/sprite.png) no-repeat -4px -629px;
border-right: 1px solid #333;
display: block;
height: 45px;
width: 45px;
}
.mobile-pager.next a {
background-position: -54px -629px;
margin-left: -4px;
} #mobile-nav {
display: block;
padding: 0;
z-index: 999;
margin: 0px;
}
#mobile-nav ul {
display: block;
}
#mobile-nav li {
border-top: 1px solid #2B2B2B;
display: block;
margin: 0 auto;
width: 85%;
}
#mobile-nav li:first-child {
border-top: none;
}
#mobile-nav ul.sub-menu li {
width: 95%;
margin-left: 5%;
}
#mobile-nav li a {
color: #8B8B8B!important;
display: block;
font-size: 18px;
font-size: 1.8rem;
height: 2.5em;
line-height: 2.5em;
text-decoration: none;
}
#mobile-nav li a:hover {
color: #FFF!important;
}
#mobile-nav li.current-menu-item a {
cursor: pointer;
} #mobile-search {
margin: 0 auto 10px;
width: 85%;
padding: 7.5% 0 0;
}
#mobile-search input[type="text"] {
background: #2B2B2B;
border: none;
border-radius: 4px;
margin: 0px;
cursor: pointer;
padding: 3px 15px 2px 45%;
font-size: 14px;
-webkit-transition: all .2s;
-moz-transition: all .2s;
-ms-transition: all .2s;     
-o-transition: all .2s;
}
@-moz-document url-prefix() { 
#mobile-search input[type="text"] {
padding: 10px 15px 10px 40%;
}
}
#mobile-search .button {
display: none;
}
#mobile-search input[type="text"]:focus {
background-position: 107% -630px; 
color: #FFF;
padding-left: 15px;
text-align: left;
}    @media only screen and (max-width : 768px) { .row.content,
.row.content.home-slider {
margin-bottom: 30px;
}
.content-left {
padding-right: 0px;
} header {
padding: 60px 0 0;
}
#hello-bar {
display: none!important;
}
.logo img {
margin-bottom: 0px;
}
.site-description {
margin-top: 20px;
}
.mobile-controls {
display: block;
} .row.footer,
.row.footer .eight.columns.centered.mobile-four { 
padding: 0px; 
}
.footer-widgets .row {
margin: 0px
}
#footer-widgets .footer-col-2 {
padding-right: 0px!important;
}
#footer-widgets .footer-col-3 {
display: none;
} .bean-direction-nav {
display: none;
}
.single-portfolio li.url {
display: none;
}
#filter {
left: 1.5%;
right: 1.5%;
}
.single-portfolio .bean-viewport,
.single-portfolio li.stacked-image { 
margin-bottom: 20px; 
}
.row.content.home-slider, 
.single-portfolio .row.content.slider {
margin-bottom: 30px;
} .testimonials {
min-height: 330px;
}
.testimonial {
top: 145%;
}
.avatar-list li a.active span.testimonial-icon {
background-image: none!important;
}
.page-template-template-portfolio-slider-php hr.divide.t {
margin-top: 30px;
margin-bottom: 40px;
}
hr.divide.t {
margin-top: 70px;
margin-bottom: 40px;
} section.type-post {
max-width: 100%;
}
blockquote { 
margin: 30px 0; 
}
pre { 
margin: 35px 0 35px!important; 
}
.entry-content ul, 
.entry-content ol { 
margin: 30px 0 30px 20px; 
}
.single-attachment .entry-content .entry-content-media img {
margin-bottom: 70px;
} .avatar,
.avatar img {
height: 40px;
margin-top: 7px;
width: 40px;
}
.comment-form label {
position: inherit;
}
.comment-form input.eight {
width: 100%;
}
p.logged-in-as {
display: none;
} ul.bean-contactform .button {
width: 100%;
} .bean-coming-soon .three.columns.mobile-two {
font-size: 60px!important;
margin: 0 auto;
width: 100%!important;
}
}  @media only screen and (max-width : 400px) { #mobile-nav li a { 
font-size: 16px; 
font-size: 1.6rem; 
}
#mobile-search input[type="text"] {
padding-left: 40%;
}
@-moz-document url-prefix() { 
#mobile-search input[type="text"] {
padding: 10px 15px 10px 35%;
}
} #footer-toggle.colophon { 
margin-top: 30px;
padding: 20px 10px; 
}
.single-portfolio #footer-toggle.colophon {
margin-top: 100px;
}
#footer-toggle.colophon p {
font-size: 15px;
line-height: 22px;
}
#footer-widgets .columns {
padding: 0px;
}    
#footer-widgets .widget {
margin-bottom: 60px;
}  
#footer-widgets .footer-col-3 {
display: block;
}
#footer-widgets .footer-col-3 .widget:last-child {
margin-bottom: 0px;
} #filter { 
left: 0; 
right: 0; 
}
.bean-viewport .slides li img { 
padding: 0 10px; 
}
.bean-viewport .bean-slide-caption {
right: 10px;
}
.single-portfolio .entry-title .pagination { 
display: none; 
}
.isotope-item { 
margin-bottom: 20px; 
padding: 0px;
}
.related .isotope-item { 
margin-bottom: 2.5%; 
padding: 0 1% 0 1%;
}
.toggle-icon { 
display: none; 
}
.four.columns.mobile-two { 
width: 100%!important;
} .testimonials {
min-height: 300px;
}
.testimonial {
padding: 0 6%;
}
.testimonial h1 {
margin-bottom: 0px;
}
.testimonial h1 p {
font-size: 22px!important;
line-height: 30px!important;
} .comment-meta {
font-size: 15px;
}
.comment-form input[type="submit"] {
width: 100%;
} .wpcf7-form select {
background-position: 96% 15px;
}
.wpcf7-form select:hover {
background-position: 96% -25px;
}
}  @media only screen and (max-width : 320px) {
#filter { 
padding: 20px;
}
#filter a.active {
background-image: none!important;
}
.related .isotope-item { 
margin-bottom: 2%; 
}
}  @media all and (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 192dpi) {  .toggle-icon,
.mobile-pager a,
#filter a.active,
.mobile-nav-toggle,
#hello-bar .close a,
.bean-direction-nav a {
background-image: url(//bunsal.com/wp-content/themes/macho/assets/images/retina/sprite@2x.png);
background-size: 100px 900px;
}
a.jp-play span,
a.jp-pause span,
.entry-content .mejs-controls .mejs-play button,
.entry-content .mejs-controls .mejs-pause button,
.entry-content .mejs-controls .mejs-volume-button button { 
background-image:url(//bunsal.com/wp-content/themes/macho/assets/images/retina/jplayer@2x.png);
background-size: 100px 250px; 
}
hr.divide {
background-image:url(//bunsal.com/wp-content/themes/macho/assets/images/retina/divide@2x.png);
background-size: 19px 10px; 
}
.avatar-list li a.active span.testimonial-icon {
background-image:url(//bunsal.com/wp-content/themes/macho/assets/images/retina/testimonial@2x.png);
background-size: 30px 25px; 
}
.wpcf7-form select {
background-image:url(//bunsal.com/wp-content/themes/macho/assets/css/images/retina/cvc@2x.png);
background-size: 42px 32px; 
}
} @media screen and (min-device-width : 414px) and (-webkit-device-pixel-ratio: 3) {  .toggle-icon,
.mobile-pager a,
#filter a.active,
.mobile-nav-toggle,
#hello-bar .close a,
.bean-direction-nav a {
background-image: url(//bunsal.com/wp-content/themes/macho/assets/images/retina/sprite@3x.png);
background-size: 100px 900px;
}
a.jp-play span,
a.jp-pause span,
.entry-content .mejs-controls .mejs-play button,
.entry-content .mejs-controls .mejs-pause button,
.entry-content .mejs-controls .mejs-volume-button button { 
background-image:url(//bunsal.com/wp-content/themes/macho/assets/images/retina/jplayer@3x.png);
background-size: 100px 250px; 
}
hr.divide {
background-image:url(//bunsal.com/wp-content/themes/macho/assets/images/retina/divide@3x.png);
background-size: 19px 10px; 
}
.avatar-list li a.active span.testimonial-icon {
background-image:url(//bunsal.com/wp-content/themes/macho/assets/images/retina/testimonial@3x.png);
background-size: 30px 25px; 
}
.wpcf7-form select {
background-image:url(//bunsal.com/wp-content/themes/macho/assets/css/images/retina/cvc@3x.png);
background-size: 42px 32px; 
}
}