/* =============================================================================
DESKTOP
========================================================================== */
.pad_top_header, .pad_top_header2 {
padding-top: 100px;
-webkit-transition: padding 0.3s;
-moz-transition: padding 0.3s;
transition: padding 0.3s;
}
.pad_top_header2 { padding-top: 100px; }
.pad_top_header.shrink {padding-top: 100px;}
.pad_top_header2.shrink {padding-top: 100px;}
.marg_top_header, .marg_top_header2 {
margin-top: 100px;
-webkit-transition: margin 0.3s;
-moz-transition: margin 0.3s;
transition: margin 0.3s;
}
.marg_top_header2 { margin-top: 100px; }
.marg_top_header.shrink { margin-top: 100px;}
.marg_top_header2.shrink { margin-top: 100px;}
.pos_top_header, .pos_top_header2 {
top: 100px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.pos_top_header2 { top: 100px; }
.pos_top_header.shrink { top: 100px;}
.pos_top_header2.shrink { top: 100px;}
.header_top_desktop {
position: absolute;
text-align: left;
width: 100%;
padding: 0px;
top: 0px;
z-index: 105;
height: 100px;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.header_top_desktop.shrink {
height: 100px;
}
.header_center {
margin: auto;
text-align: center;
height: 100%;
}
.header_center nav {
margin: auto;
display: inline-block;
vertical-align: middle;
height: 100%;
}
/* =============================================================================
EXTRA
========================================================================== */
.header_extra_wrapper{
display: inline-block;
vertical-align: middle;
position: absolute;
right: 0;
top: 0;
z-index: 1;
padding: 8px 18px 8px 18px;
}
.header_extra_wrapper *{
font-weight: 600;
}
.header_city{
font-weight: 100;
}
/* =============================================================================
LOGO
========================================================================== */
.header_logo_wrapper{
height: 100%;
position: relative;
display: inline-block;
vertical-align: middle;
text-align: center;
z-index: 1;
margin: 0 20px;
}
.header_logo_wrapper a{
height: 100%;
width: 100%;
display: inline-block;
vertical-align: middle;
}
.header_logo_wrapper .header_logo,
.header_logo_wrapper .DS_editable_img{
margin-top: 0px;
margin-right: 0px;
height: 100%;
}
/* =============================================================================
FOR ALERTS
========================================================================== */
.header_spacer_normal{
width: 100%;
position: relative;
height: 50px;
}
.header_spacer_alert{
height: 100px;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
.header_city{
display: none;
}
}
@media screen and (max-width: 979px) {
.desktop { display: none; }
.pad_top_header { padding-top: 60px;}
.marg_top_header { margin-top: 60px; }
}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 479px) {}/* =============================================================================
NAV
========================================================================== */
.header_nav1 ul{
margin: 0;
padding: 0;
display: inline-block;
vertical-align: middle;
}
.header_nav1 .nav_item{
position: relative;
display: inline-block;
padding: 0px;
margin: 0;
vertical-align: middle;
list-style: none;
}
.header_nav1 .nav_item:hover{
}
.header_nav1 .nav_item:hover h5{
color: #555;
-webkit-transition: background-color 200ms ease;
-moz-transition: background-color 200ms ease;
-o-transition: background-color 200ms ease;
transition: margin-bottom 200ms ease;
}
.header_nav1 .nav_item a{
display: block;
padding: 8px 18px 8px 18px;
text-align: center;
font-weight: 400;
}
.header_nav1 .nav_item a h5{
color: #333;
margin: 0 10px;
}
.header_nav1 .nav_active {
color: #fff;
border-bottom: 4px solid #555;
}
/* =============================================================================
DROPDOWN MENU
========================================================================== */
.header_nav1 .nav_dropdown_menu{
position: absolute;
float: left;
background: #fff;
padding: 0;
margin: 0;
width: 100%;
min-width: 150px;
display: none;
overflow: hidden;
z-index: 100;
}
.header_nav1 .nav_dropdown_item{
width: 100%;
display: block;
float: left;
}
.header_nav1 .nav_dropdown_item a{
padding: 5px 0;
width: 100%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
.header_nav1 .nav_dropdown_item a:hover h6{
color: #fff;
}
.header_nav1 .nav_dropdown_item:hover{
background: #555;
}
.header_nav1 .nav_dropdown_text{
text-align: center;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 979px) {}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 479px) {}/* =============================================================================
FOOTER Social
========================================================================== */
.header_social_wrapper1{
display: inline-block;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
z-index: 1;
padding: 8px 18px;
}
.header_social_wrapper1 .header_social_content{
float: left;
margin-right: 10px;
}
.header_social_wrapper1 .header_social_icon{
width: 30px;
height: 30px;
}
.header_social_wrapper1 .header_social_icon svg{
width: 30px;
height: 30px;
}
.header_social_wrapper1 .header_social_icon .SI_solid{
fill: #333;
}
.header_social_wrapper1 .header_social_icon .SI_stroke{
stroke: #333;
}
.header_social_wrapper1 .header_social_icon .SI_void{
fill: none !important;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 859px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 479px) {
}/* =============================================================================
WRAPPERS
========================================================================== */
#mobile_header1.mobile{
display: none;
}
#mobile_header1.header_top_mobile{
position: absolute;
text-align: left;
width: 100%;
padding: 0px;
top: 0px;
z-index: 100;
height: 60px;
background: rgba(255,255,255, .25);
}
#mobile_header1 #mobile_menu_back {
width: 300px;
position: fixed;
top: 0px;
bottom: 0px;
left: -310px;
background: rgba(255, 255, 255, 1);
z-index: 101;
}
#mobile_header1 #mobile_menu_wrap {
width: 300px;
position: fixed;
top: 0px;
left: -310px;
z-index: 102;
}
/* =============================================================================
SEARCH
========================================================================== */
#mobile_header1 .mobile_search{
height: 100%;
padding-left: 70px;
}
#mobile_header1 .mobile_search .search_wrapper{
height: 100%;
}
#mobile_header1 .mobile_search .search_wrapper.searching {
background: #fff;
}
#mobile_header1 .mobile_search .search_wrapper .search_box {
display: inline-block;
font-size: 24px;
padding: 0 10px;
width: 80%;
width: calc(100% - 70px);
height: 100%;
line-height: 60px;
vertical-align: middle;
letter-spacing: 1px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
}
#mobile_header1 .mobile_search .search_wrapper .search_box:focus{
outline: none;
}
#mobile_header1 .mobile_search .search_wrapper .search_icon {
width: 25px;
height: 25px;
display: inline-block;
margin-left: 20px;
margin-right: 20px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
#mobile_header1 .mobile_search .search_wrapper .search_icon svg{
width: 100%;
height: 100%;
margin: 0;
}
#mobile_header1 .mobile_search .search_wrapper .search_icon .icon_solid{
fill: #333;
}
#mobile_header1 .mobile_search .search_wrapper .search_icon.active .icon_solid{
fill: #edad91;
}
/* =============================================================================
CART
========================================================================== */
#mobile_header1 .mobile_header_bag_wrapper .cart_icon {
width: 25px;
height: 25px;
display: inline-block;
}
#mobile_header1 .mobile_header_bag_wrapper .cart_icon svg{
width: 100%;
height: 100%;
margin: 0;
}
#mobile_header1 .mobile_header_bag_wrapper .cart_icon .icon_solid{
fill: #333;
}
#mobile_header1 .mobile_header_bag_wrapper .cart_icon.active .icon_solid{
fill: #edad91;
}
/* =============================================================================
NAV
========================================================================== */
#mobile_header1 #mobile_menu {
clear: left;
list-style: none;
padding: 0;
margin-top: 60px;
}
#mobile_header1 .nav_item{
display: inline-block;
padding: 0px;
margin: 0;
vertical-align: middle;
width: 100%;
height: 60px;
list-style: none;
border-bottom: 1px solid #eee;
}
#mobile_header1 .nav_item .a{
display: block;
padding: 22px 20px 0px 20px;
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: background .4s cubic-bezier(0.8,0,0.22,1);
}
#mobile_header1 .mob_sub_menu_indicator {
position: absolute;
top: 0;
left: 100%;
width: 100%;
height: 100%;
background: #3a6997;
transition: all .4s cubic-bezier(0.8,0,0.22,1);
}
#mobile_header1 .a{
cursor: pointer;
}
#mobile_header1 .nav_item .label{
margin: 0 10px;
}
#mobile_header1 .nav_item > .a:hover{
}
#mobile_header1 .nav_item > .a:hover .label{
-webkit-transition: background-color 200ms ease;
-moz-transition: background-color 200ms ease;
-o-transition: background-color 200ms ease;
transition: all .4s cubic-bezier(0.8,0,0.22,1);
}
#mobile_header1 .nav_active {
}
#mobile_header1 .nav_active .mob_sub_menu_indicator{
left: 97%;
}
#mobile_header1 .menu{
list-style: none outside;
padding: 0;
text-align: left;
}
/* =============================================================================
SUB MENU
========================================================================== */
#mobile_header1 .mob_sub_menu_back {
display: block;
position: fixed;
width: 270px;
height: 100%;
top: 0px;
bottom: 0px;
left: 0px;
left: -300px;
background: #ddd;
z-index: 109;
}
#mobile_header1 .mob_sub_menu {
width: 270px;
position: fixed;
top: 0px;
left: 0px;
left: -300px;
bottom: 0;
overflow: auto;
z-index: 110;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 60px 10px 10px 10px;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}
#mobile_header1 .mob_sub_menu .menu{
padding:0;
margin: 0;
}
#mobile_header1 .mob_sub_menu .sub_menu_item{
width: 100%;
display: block;
float: left;
display: inline-block;
padding: 0px;
margin: 0;
vertical-align: middle;
width: 100%;
height: 70px;
list-style: none;
border-bottom: 1px solid rgba(255,255,255, .25);
}
#mobile_header1 .mob_sub_menu .sub_menu_item a{
padding: 5px 0;
width: 100%;
display: block;
padding: 22px 20px 0px 20px;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
transition: background .4s cubic-bezier(0.8,0,0.22,1);
}
#mobile_header1 .mob_sub_menu .sub_menu_item a .sub_menu_label{
margin: 0 10px;
}
#mobile_header1 .mob_sub_menu .sub_menu_item a:hover .sub_menu_label{
}
#mobile_header1 .mob_sub_menu .sub_menu_item:hover{
}
#mobile_header1 .sub_menu_label{
text-align: center;
}
.sub_menu_close svg{
width: 50px;
height: 50px;
}
.sub_menu_close .icon_solid{
fill: #fff;
fill: rgba(255,255,255, .5);
}
.sub_menu_close .icon_stroke{
stroke: #fff;
stroke: rgba(255,255,255, .5);
}
.sub_menu_close .icon_void{
fill: none !important;
}
.sub_menu_close:hover .icon_solid{
fill: #fff;
fill: rgba(255,255,255, 1);
}
.sub_menu_close:hover .icon_stroke{
stroke: #fff;
stroke: rgba(255,255,255, 1);
}
/* =============================================================================
MENU BTTN
========================================================================== */
#mobile_header1 .bttn_mobile_menu {
position: fixed;
top: 0;
z-index: 103;
float: left;
cursor: pointer;
opacity: 0.75;
filter: alpha(opacity=75); /* For IE8 and earlier */
background: rgba(255,255,255,.5);
padding: 15px;
height: 30px;
width: 34px;
}
#mobile_header1 .bttn_mobile_menu:hover {
transition: opacity .3s cubic-bezier(.5,.5,.5,.5);
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
#mobile_header1 .bttn_mobile_menu svg{
width: 30px;
height: 30px;
padding: 0;
margin: 0;
}
#mobile_header1 .bttn_mobile_menu .icon_solid{
fill: #333;
}
#mobile_header1 .bttn_mobile_menu .icon_stroke{
stroke: #333;
}
#mobile_header1 .bttn_mobile_menu_active{
background: transparent;
}
#mobile_header1 .bttn_mobile_menu_active .icon_solid{
fill: #222;
}
#mobile_header1 .bttn_mobile_menu_active .icon_stroke{
stroke: #222;
}
#mobile_header1 .bttn_mobile_menu .icon_void{
fill: none !important;
}
/* =============================================================================
LOGO
========================================================================== */
#mobile_header1 .mobile_header_logo_wrapper{
height: 60px;
display: block;
text-align: center;
margin: 0 auto;
}
#mobile_header1 .mobile_header_logo_wrapper .header_logo{
margin-top: 0px;
margin-right: 0px;
height: 100%;
}
.sub_menu_close{
position: absolute;
width: 340px;
padding-right: 10px;
top: 10px;
right: 0px;
color: #fff;
z-index: 91;
cursor: pointer;
font-size: 30px;
text-align: right;
}
/* =============================================================================
FOR ALERTS
========================================================================== */
#mobile_header1 .header_spacer_normal{
width: 100%;
position: relative;
height: 0px;
}
#mobile_header1 .header_spacer_alert{
height: 50px;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {}
@media screen and (min-width: 980px) {
/* -- ***NEEDED!!!*** - FIXES JS ERROR WHEN RESIZING-- */
#mobile_header1 #mobile_menu_back {
left: -310px !important;
}
#mobile_header1 #mobile_menu_wrap {
left: -310px !important;
}
}
@media screen and (max-width: 979px) {
#mobile_header1.mobile{ display: block; }
}
@media screen and (max-width: 859px) {
#mobile_header1 .mobile_search .search_wrapper .search_icon{
margin-left: 5px;
margin-right: 5px;
}
#mobile_header1 .mobile_search .search_wrapper .search_box{
font-size: 16px;
padding: 0;
padding-left: 10px;
width: 80%;
width: calc(100% - 40px);
letter-spacing: 0px;
}
}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 479px) {
#mobile_header1 .mobile_search .search_wrapper .search_icon{
margin-left: 0px;
margin-right: 0px;
}
}
@media screen and (max-height: 700px) {
#mobile_header1 .nav_item{
height: 60px;
}
#mobile_header1 .nav_item .a{
padding-top: 15px;
}
#mobile_header1 .mob_sub_menu .sub_menu_item{
height: 60px;
}
#mobile_header1 .mob_sub_menu .sub_menu_item a{
padding-top: 15px;
}
}/* =============================================================================
NAV
========================================================================== */
#mobile_menu {
clear: left;
list-style: none;
padding: 0;
padding-top: 60px;
position: relative;
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-y: scroll;
}
#mobile_menu::-webkit-scrollbar {
display: none;
}
#mobile_menu {
-ms-overflow-style: none;
}
.extra_right{
text-align: right;
position: absolute;
right: 10px;
top: -55px;
}
#mobile_header1 .header_nav1_2 .nav_item {
position: relative;
display: inline-block;
padding: 0px;
margin: 0;
vertical-align: middle;
height: 100%;
border-bottom-width: 0px;
width: auto;
}
.mobile_menu_item{
float: left;
text-align: left;
border-right: 4px solid transparent;
border-bottom: 0px;
margin: 2px 0 2px 0%;
padding: 4px 0 4px 5%;
width: 95%;
color: #000;
}
.mobile_menu_item:hover {
border-bottom: 0px;
border-right: 4px solid #ccc;
background: #ccc;
color: #333;
}
.mobile_menu_item_active {
border-top: 0px;
border-right: 4px solid #ccc !important;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 979px) {}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 479px) {
.mobile_menu_item{
font-size: 1.25em;
}
}/* =============================================================================
SIDE Social1
========================================================================== */
.mobile_social_wrapper1{
vertical-align: middle;
padding: 15px 5px 15px 0px;
}
.mobile_social_wrapper1 .header_social_content{
float: left;
margin-right: 1px;
}
.mobile_social_wrapper1 .header_social_content:first-of-type{
margin-left: 5px;
}
.mobile_social_wrapper1 .header_social_content:last-of-type{
margin-right: 0px;
}
.mobile_social_wrapper1 .header_social_icon{
width: 25px;
height: 25px;
}
.mobile_social_wrapper1 .header_social_icon svg{
width: 25px;
height: 25px;
}
.mobile_social_wrapper1 .header_social_icon .SI_solid{
fill: #fff;
}
.mobile_social_wrapper1 .header_social_icon .SI_stroke{
stroke: #fff;
}
.mobile_social_wrapper1 .header_social_icon .SI_void{
fill: none !important;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 859px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 479px) {
}/* =============================================================================
SIDE Social2
========================================================================== */
.mobile_social_wrapper2{
display: inline-block;
vertical-align: middle;
position: absolute;
right: 0;
top: 0;
z-index: 1;
padding: 15px 5px 15px 0px;
}
.mobile_social_wrapper2 .header_social_content{
float: left;
margin-right: 1px;
}
.mobile_social_wrapper2 .header_social_content:last-of-type{
margin-right: 0px;
}
.mobile_social_wrapper2 .header_social_icon{
width: 25px;
height: 25px;
}
.mobile_social_wrapper2 .header_social_icon svg{
width: 25px;
height: 25px;
}
.mobile_social_wrapper2 .header_social_icon .SI_solid{
fill: #333;
}
.mobile_social_wrapper2 .header_social_icon .SI_stroke{
stroke: #333;
}
.mobile_social_wrapper2 .header_social_icon .SI_void{
fill: none !important;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 859px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
.mobile_social_wrapper2 .social_networks{
display: none;
}
}
@media screen and (max-width: 479px) {
}/* =============================================================================
FOOTER
========================================================================== */
.footer1{
width: 100%;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 979px) {}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {
.footer{
position: relative !important;
z-index: 4 !important;
}
}
@media screen and (max-width: 479px) {}/* =============================================================================
EXTRA
========================================================================== */
.footer_extra p{
font-size: 12px;
}
.company_stamp {
display: table;
margin: 20px auto 10px auto;
height: 50px;
}
.copyright{
color: #333;
margin: 20px 0;
float: left;
}
.footer_signin {
margin: 20px 0 20px 10px;
float: left;
text-decoration: underline;
}
.footer_signin a {
color: #444;
}
.fiveone_stamp {
color: #333;
font-family: arial;
font-weight: 100;
text-align: center;
}
.fiveone_stamp a{
color: #444;
text-decoration: underline;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 859px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 479px) {
.footer_extra p{
font-size: .55em;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
}/* =============================================================================
FOOTER NAV
========================================================================== */
.footer_nav_item{
margin: 0 10px;
text-align: center;
display: inline-block;
vertical-align: middle;
border-bottom: 2px solid transparent;
}
.footer_nav_item h6{
color: #333;
font-family: arial;
font-weight: 600;
}
.footer_nav_item:hover h6{
color: #555;
}
.footer_nav_item:hover, .footer_nav_active{
border-bottom: 2px solid #555;
}
.footer_nav_active h6{
color: #555;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 979px) {
#footer_nav{ display: none; }
}
@media screen and (max-width: 859px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 479px) {
}/* =============================================================================
FOOTER ORG HRS
========================================================================== */
.footer_org_hrs_wrapper{
margin-top: 15px;
}
.footer_org_hrs_wrapper .DoW{
width: 30%;
float: left;
display: block;
}
.footer_org_hrs_wrapper .DoW p{
text-align: right;
}
.footer_org_hrs_wrapper .DoW_hrs{
width: 70%;
float: left;
display: block;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 979px) {}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 479px) {}/* =============================================================================
FOOTER Social
========================================================================== */
.footer_social1 .footer_social_item {
margin-bottom: 5px;
}
.footer_social1 .footer_social_icon{
width: 40px;
height: 40px;
margin-right: 20px;
display: inline-block;
vertical-align: middle;
}
.footer_social1 .footer_social_icon svg{
width: 40px;
height: 40px;
}
.footer_social1 .footer_social_icon .SI_solid{
fill: #333;
}
.footer_social1 .footer_social_icon .SI_stroke{
stroke: #333;
}
.footer_social1 .footer_social_icon .SI_void{
fill: none !important;
}
.footer_social1 .footer_social_item p {
display: inline-block;
vertical-align: middle;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 979px) {
}
@media screen and (max-width: 859px) {
}
@media screen and (max-width: 767px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 479px) {
}/* =============================================================================
GALLERY
========================================================================== */
.portfolio2_container{
position: relative;
}
.portfolio2_container ul{
list-style: none;
padding: 0;
margin: 0;
}
.portfolio2_container .portfolio_li{
width: 100%;
}
.portfolio2_container .portfolio_item_wrapper{
position: relative;
width: 100%;
display: inline-block;
}
.portfolio2_container .portfolio_item_wrapper:hover{
}
.portfolio2_container .portfolio_item_wrapper:hover .portfolio_image_wrapper{
}
.portfolio2_container ul li img{
}
.portfolio2_container ul li img:hover{
}
.portfolio2_container .img_wrapper {
width: 30%;
display: inline-block;
vertical-align: middle;
}
.portfolio2_container .details_wrapper {
width: 70%;
display: inline-block;
vertical-align: middle;
}
.portfolio2_container .details_inner{
}
.portfolio2_container .cta_button{
position: absolute;
bottom: 0;
right: 0;
background: #fff;
padding: 15px;
margin-top: 5px;
font-size: 1.6em;
}
/* =============================================================================
MAKE COVER IMG
========================================================================== */
.portfolio2_container .portfolio_image_wrapper {
position: relative;
display: block;
width: 100%;
height: 0px;
padding-bottom: 100%;
margin: 0;
overflow: hidden;
}
.portfolio2_container .portfolio_image_wrapper .portfolio_image_img{
position: absolute;
display: table-cell;
top: -9999px;
bottom: -9999px;
left: -9999px;
right: -9999px;
margin: auto;
}
.portfolio2_container .portfolio_image_wide .portfolio_image_img{
height: 100%;
max-width: none;
}
.portfolio2_container .portfolio_image_tall .portfolio_image_img{
width: 100%;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1600px) {}
@media screen and (max-width: 1400px) {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 979px) {}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 640px) {}
@media screen and (max-width: 479px) {}/* =============================================================================
PINTEREST LAYOUT
========================================================================== */
.pinterest_columns {
position: relative;
width: 100%;
}
.pinterest_list{
list-style-type: none;
position: relative; /** Needed to ensure items are laid out relative to this container **/
margin: 0;
padding: 0;
}
.pinterest_item {
display: none; /** Hide items initially to avoid a flicker effect **/
margin: 0px;
width: 33%;
padding: 0px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
overflow: hidden;
}
.pinterest_item_wrapper {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
min-height: 100px;
max-width: none;
}
.pinterest_item_wrapper a{
width: 100%;
height: 100%;
display: block;
}
.pinterest_item_wrapper:hover{
ransform: scale(1.1);
}
.pinterest_modify_wrapper {
position: absolute;
display: table-cell;
padding: 0;
width: 100%;
height: 100%;
z-index: 10;
}
.pinterest_modify_wrapper:hover {
transition: background-color .3s cubic-bezier(.5,.5,.5,.5);
background-color: rgba(0, 0, 0, 0.70);
}
.pinterest_modify_body a {
outline: 0;
}
.pinterest_modify_button_play{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: -30px;
width: 60px;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.pinterest_modify_button_play:hover{
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.pinterest_modify_button {
width: 30px;
margin: 5px 0 0 5px;
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
.pinterest_modify_button:hover{
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.pinterest_modify_button_active {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.pinterest_item_img {
float: none;
width: 100%;
max-width: none;
height: auto;
margin: 0 auto -5px auto;
clear: none;
color: rgb(0, 0, 0);
overflow: hidden;
}
/* =============================================================================
IMG OVERLAY
========================================================================== */
.gallery_image_details_wrapper{
position: absolute;
top: 0;
left: 0;
width: 98%;
text-align: right;
color: #bbb;
height: 60px;
padding-right: 2%;
padding-top: 5px;
font-size: .85em;
background: rgba(0,0,0,0.75);
background: -moz-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 74%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.75)), color-stop(0%, rgba(0,0,0,0.75)), color-stop(0%, rgba(0,0,0,0.75)), color-stop(74%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 74%, rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 74%, rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 74%, rgba(0,0,0,0) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 74%, rgba(0,0,0,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
}
.gallery_image_title_wrapper{
position: absolute;
bottom: 0;
left: 0;
width: 98%;
text-align: right;
padding: 5px 2% 5px 0;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+99&0+0,0.55+40,0.65+100 */
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(40%,rgba(0,0,0,0.55)), color-stop(99%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.55) 40%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
.gallery_image_title_wrapper *{
color: rgba(255,255,255, .7);
}
.gallery_image_title_wrapper .title{
font-size: 1.8em;
}
.gallery_image_title_wrapper .caption{
font-size: 1.2em;
}
/* =============================================================================
VIDEO GALLERY
========================================================================== */
.media_videos1{
margin: 10px 0;
}
.media_videos1 .video_thumb_wrap{
margin: auto;
display: block;
text-align: center;
margin-top: 20px;
loat: left;
}
.media_videos1 .video_thumb{
width: 480px;
height: calc(480px * .55);
overflow: hidden;
background-position: center;
background-size: cover;
loat: left;
position: relative;
margin: auto;
display: block;
text-align: center;
}
.media_videos1 .video_play_bttn{
position: absolute;
left: 50%;
margin-left: -30px;
top: 50%;
margin-top: -30px;
width: 60px;
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.media_videos1 .video_play_bttn:hover{
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1600px) {}
@media screen and (max-width: 1200px) {}
@media screen and (max-width: 979px) {}
@media screen and (max-width: 859px) {}
@media screen and (max-width: 767px) {
.pinterest_item {
width: 49%;
}
}
@media screen and (max-width: 640px) {
.pinterest_modify_wrapper {
background-color: rgba(0, 0, 0, 0.50);
}
.pinterest_modify_wrapper:hover {
transition: background-color 0s cubic-bezier(.5,.5,.5,.5);
background-color: rgba(0, 0, 0, 0.50);
}
.pinterest_modify_button {
opacity: 0.7;
filter: alpha(opacity=70); /* For IE8 and earlier */
}
.pinterest_modify_button {
width: 25px;
margin: 5px 0 0 5px;
}
.pinterest_modify_button_play{
margin-left: -20px;
margin-top: -20px;
width: 40px;
}
.media_videos1 .video_thumb{
width: 320px;
height: calc(320px * .55);
}
.media_videos1 .video_play_bttn{
margin-left: -20px;
margin-top: -20px;
width: 40px;
}
}
@media screen and (max-width: 479px) {
.pinterest_item {
width: 49%;
}
.media_videos1 .video_thumb{
width: 270px;
height: calc(270px * .55);
}
}/* =============================================================================
LightBox
========================================================================== */
.full_screen_dim_wrapper{
position: fixed;
width: 100%;
margin: 0px;
min-height: 100%;
min-height: 100vh;
background: rgba(0,0,0,0.75);
z-index: 190;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.full_screen_dim_wrapper .popup_close {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
margin: 0;
cursor: pointer;
z-index: 1;
}
.full_screen_dim_wrapper .lightbox_preloader{
margin: auto;
display: block;
border-radius: 500px;
-webkit-border-radius: 500px;
-moz-border-radius: 500px;
width: 70px;
padding: 20px;
background: #000;
position: relative;
top: 50%;
margin-top: -35px;
}
.lightbox_body{
position: absolute;
top: 0;
left: 50%;
width: 1100px;
min-height: 200px;
max-height: none;
height: 100vh;
margin-top: 0;
margin-left: -550px;
color: #fff;
}
.lightbox_body .lightbox_body_inner{
min-height: 200px;
max-height: none;
height: 100vh;
width: 100%;
padding: 10px 0;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: table;
}
/* --- ARROWS --- */
.lightbox_body .lightbox_body_inner .arrow_content_wrap{
width: 10%;
display: table-cell;
vertical-align: top;
padding: 0 10px;
}
.lightbox_body .lightbox_body_inner .arrow_content_wrap .media_arrow{
top: 50%;
width: 100%;
height: 100%;
opacity: .75;
cursor: pointer;
display: table;
}
.lightbox_body .lightbox_body_inner .arrow_content_wrap .media_arrow:hover{
opacity: 1;
ackground: rgba(0,0,0,.15);
}
.lightbox_body .lightbox_body_inner .arrow_content_wrap .media_arrow.arrow_left{}
.lightbox_body .lightbox_body_inner .arrow_content_wrap .media_arrow.arrow_right{}
.lightbox_body .lightbox_body_inner .arrow_content_wrap .media_arrow .media_arrow_inner{
display: table-cell;
vertical-align: middle;
}
.lightbox_body .lightbox_body_inner .arrow_content_wrap .media_arrow .media_arrow_inner img{
width: 40px;
margin-top: -20px;
display: block;
margin: auto;
}
.lightbox_body .lightbox_body_inner .all_content_wrap{
width: 80%;
display: table-cell;
vertical-align: middle;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap{
position: relative;
display: table;
width: 100%;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap[data-status="current"]{}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap[data-status="previous"],
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap[data-status="next"]{
display: none;
}
/* --- MEDIA --- */
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_content{
position: relative;
width: 100%;
display: table-cell;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_content.has_media_details{
width: 70%;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_content iframe{
width: 738px;
height: calc(738px * .543);
margin: 0 auto;
padding: 0;
display: block;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_content img{
max-height: 800px;
max-width: 100%;
display: block;
margin: auto;
}
/* --- MEDIA TEXT --- */
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap{
width: 30%;
display: table-cell;
vertical-align: top;
position: relative;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .info_content{
position: relative;
width: 100%;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .info_content .media_title{
font-size: 34px;
color: #fff;
line-height: 36px;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .info_content .media_caption{
margin-top: 10px;
margin-bottom: 50px;
overflow-y: scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
max-height: 350px;
font-size: 16px;
color: #ddd;
color: rgba(255,255,255,.6);
word-wrap: break-word;
line-height: 20px;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .info_content .media_caption::-webkit-scrollbar {
display: none;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .info_content .media_caption a{
color: #ddd;
color: rgba(255,255,255,.6);
text-decoration: underline;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .media_info_bottom{
position: absolute;
bottom: 0%;
right: 0%;
height: 50px;
width: 100%;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .media_capture_date{
position: absolute;
bottom: 0;
right: 0;
}
.lightbox_body .lightbox_body_inner .all_content_wrap .media_wrap .media_details_wrap .media_capture_date{
font-size: 14px;
color: #fff;
}
/* =============================================================================
----------///////// MEDIA QUERRIES /////////------------
========================================================================== */
@media screen and (max-width: 1200px) {
.lightbox_body{
width: 900px;
margin-left: -450px;
}
.lightbox_body .lightbox_body_inner{
ax-height: 700px;
}
.lightbox_body .lightbox_body_inner .media_wrap .media_content iframe{
width: 604px;
height: calc(604px * .543);
}
.lightbox_body .lightbox_body_inner .media_wrap .media_content img{
max-height: 700px;
}
}
@media screen and (max-width: 979px) {
.lightbox_body{
width: 800px;
margin-left: -400px;
}
.lightbox_body .lightbox_body_inner{}
.lightbox_body .lightbox_body_inner .media_arrow{}
.lightbox_body .lightbox_body_inner .media_wrap{
display: block;
}
.lightbox_body .lightbox_body_inner .media_wrap .media_content,
.lightbox_body .lightbox_body_inner .media_wrap .media_content.has_media_details{
width: 100%;
display: block;
}
.lightbox_body .lightbox_body_inner .media_wrap .media_content iframe{
width: 768px;
height: calc(768px * .543);
}
.lightbox_body .lightbox_body_inner .media_wrap .media_content img{
max-height: 600px;
}
.lightbox_body .lightbox_body_inner .media_wrap .media_details_wrap{
width: 100%;
display: block;
}
.lightbox_body .lightbox_body_inner .media_wrap .media_details_wrap .media_info_bottom{
height: 40px;
}
.lightbox_body .lightbox_body_inner .media_wrap .media_details_wrap .info_content .media_info_bottom .media_caption{}
}
@media screen and (max-width: 859px) {
.lightbox_body{
width: 600px;
margin-left: -300px;
}
.lightbox_body .lightbox_body_inner .media_content iframe{
width: 576px;
height: calc(576px * .543);
}
}
@media screen and (max-width: 767px) {
.lightbox_body .lightbox_body_inner .info_content .media_title{
font-size: 28px;
line-height: 32px;
}
.lightbox_body .lightbox_body_inner .info_content .media_caption{
font-size: 14px;
}
.lightbox_body .media_capture_date{
font-size: 12px;
}
}
@media screen and (max-width: 640px) {
.lightbox_body{
width: 400px;
margin-left: -200px;
}
.lightbox_body .lightbox_body_inner .media_content iframe{
width: 384px;
height: calc(384px * .543);
}
.lightbox_body .lightbox_body_inner .info_content .media_title{
font-size: 20px;
line-height: 22px;
}
.lightbox_body .lightbox_body_inner .info_content .media_caption{
font-size: 11px;
}
.lightbox_body .media_info_bottom{
height: 20px;
}
.lightbox_body .media_capture_date{
font-size: 10px;
}
.arrow_content_wrap{
width: 15%;
padding: 0 3px;
}
.lightbox_body .lightbox_body_inner .media_arrow .media_arrow_inner img{
width: 24px;
margin-top: -12px;
}
.all_content_wrap{
width: 70%;
}
}
@media screen and (max-width: 479px) {
.lightbox_body{
width: 300px;
margin-left: -150px;
}
.lightbox_body .lightbox_body_inner .media_content iframe{
width: 288px;
height: calc(288px * .543);
}
}
@media screen and (max-width: 349px) {
.lightbox_body{
width: 250px;
margin-left: -125px;
}
.lightbox_body .lightbox_body_inner{
padding-top: 50px;
}
.lightbox_body .lightbox_body_inner .media_content iframe{
width: 240px;
height: calc(240px * .543);
}
}