/*
Theme Name: FBA
Theme URI: http://www.falsebehavinganimals.com
Description: Custom theme designed and built by False Behaving Animals
Version: 1.0
Author: False Behaving Animals
Author URI: http://falsebehavinganimals.com
*/
/* ----------------------------------------------------------------------------------------------------------
Placeholder (to be deleted later) ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------------------------
Start here ----------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------- */
/* Overall */
body,html{width:100%;height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
html {background: #000;}
body{background-color: transparent;color: white;}
p{font-weight: 200;}
h1,h2,h3,h4,h5,h6{font-family: 'HelveticaNeue-CondensedBold', sans-serif;color: #969696;}
.df{font-family: 'HelveticaNeue-CondensedBold',"HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;font-weight:600}
a{color: #696969;}
a:hover {color: #ffffff;text-decoration: none;}
hr{border-bottom: 1px solid #252525;border-top: 1px solid #000000; }
footer .navbar .nav > li > a {color:#696969}
.uppercase{text-transform: uppercase;}
.color1{color: #ffffff;}
.color2{color:#969696 !important; }
.vm {position: relative; top:50%;}
.btn{background-color: #222222;border-radius: 0px;border-color: #333333;background-image: none;color: #ffffff;box-shadow: none;text-shadow: none;}
.btn:hover{background-color: #969696; color: #000000}
.mobilePadding{margin-top: 110px; margin-bottom: 35px;padding-top: 25px;}
/* Home Page */
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1170px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
.background-images {z-index: 1;}
.background-images img {opacity: 0;}
.background-images img.active {opacity: .3;}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -585px; /* 50% */
}
}
.background-images {opacity: 1;}
.background-images:before {content: "";display: block;position: absolute;top: 0;bottom: 0;left: 0;right: 0;background: rgba(0,0,0,0.2);
}
.grayscale {
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.backstretch{z-index: 0 !important;opacity: 0.2; filter: alpha(20)}
.backstretch img{
filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.absolute-center {
width: 50%;
height: 30%;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
.fs50{font-size: 50px}
/* Main Menu */
.homeContainer .andLink {position: absolute; top: 20px; left: 40px; text-indent: -999px; height: 54px; width: 50px; z-index: 1000}
.andLink {position: absolute; top: 40px; left: 18px; text-indent: -999px; height: 54px; width: 50px; z-index: 1000}
.homeContainer {position: relative; top:50%; margin-top:-185px;}
#menu-main{background-image: url(../img/louisandco.png); background-size: 140px 114px; background-repeat: no-repeat;padding: 8px 50px 0 50px;background-position: -12px 3px; width: 410px }
.homeContainer #menu-main{background-image: url(../img/louisandco.png); background-size: 140px 114px; background-repeat: no-repeat;padding: 50px 50px 0 50px;background-position: -12px 3px; width: 410px }
#menu-main{list-style: none;}
#menu-main li a{font-size: 34px; line-height: 0.7em; text-shadow: 3px 3px 2px rgba(0,0,0,0.3); font-weight: normal}
#menu-main li{
-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-ms-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}
.page-template-page-news-php #menu-main > li:first-child, .contact #menu-main > li:first-child, .about #menu-main > li:first-child, .single-format-standard #menu-main > li:first-child, .search #menu-main > li:first-child, .archive #menu-main > li:first-child, .error404 #menu-main > li:first-child{margin-bottom: 20px;}
.news #menu-main, .about #menu-main, .contact #menu-main, .archive #menu-main, .error404 #menu-main, .search #menu-main, .single #menu-main{padding-top: 51px;}
.secondMenu{display: none;}
.page-template-page-images-php .secondMenu{display: block;}
#menu-main li:hover .sub-menu{
opacity: 1;
max-height: 200px;
-webkit-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-ms-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 500ms cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
-webkit-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-ms-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000); /* ease-in-out */
}
#menu-main > li:hover{padding: 5px 0 10px 0;}
.current-menu-item > a{color: #ffffff;}
.page-template-page-images-php #menu-main > li:first-child{position: relative;top:-15px;} /* move co to top */
.page-template-page-images-php #menu-main > li:first-child a {height: 54px; display: block;}
.page-template-page-images-php #menu-main > li:first-child:hover{padding: 0px;} /* co in menu */
.page-template-page-images-php .current-menu-item{position: relative;top:-12px;}
.page-template-page-images-php #menu-main > li.current-menu-item:hover{padding: 0px;}
.rightArrow a:before
{
content: "\f138";
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
display: inline;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
padding-right: 5px;
font-size: 15px;
}
.downloadArrow a:after
{
content: "\f078";
width: auto;
height: auto;
line-height: normal;
vertical-align: baseline;
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
margin-top: 0;
display: inline;
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
padding-left: 5px;
font-size: 12px;
}
#menu-home-small{padding-left: 44px;}
.galleria-loader{background: none;top:10px; position: fixed;right:10px;opacity: 0.8 !important; }
.page-template-page-images-php .current-menu-item .sub-menu{display: none }
.page-template-page-images-php .current-menu-item .sub-menu li{display: inline;margin-left:20px;}
/* Secondary Menu */
.page-template-page-images-php .secondMenu {position: absolute; top:80px; right:50px}
.page-template-page-images-php .secondMenu li {display: none;}
.page-template-page-images-php .secondMenu li a{color:#969696}
.page-template-page-images-php .secondMenu .current-menu-item {display: block;}
.page-template-page-images-php .secondMenu .current-menu-item > a {display: none;}
.page-template-page-images-php .secondMenu .current-menu-item .sub-menu{float: right;opacity: 1;height: auto;overflow: visible;position: relative;top:10px; display: block; font-size:18px; font-family: HelveticaNeue-CondensedBold, sans-serif;}
.widget-sidebar .current-menu-item > a {color: #000}
.news {background: #fff; overflow: hidden; color: rgb(105, 105, 105);}
.news #mobileAltMenu {background: #000}
.news a:hover {color: #000}
.news .widget-sidebar select {background-color: #fff; color: rgb(105, 105, 105); line-height: 20px; border-color:rgb(105, 105, 105);}
.news #menu-main a:hover {color: #fff;}
.single {background: #fff; overflow: hidden; color: rgb(105, 105, 105);}
.single #mobileAltMenu {background: #000}
.single a:hover {color: #000}
.single .widget-sidebar select {background-color: #fff; color: rgb(105, 105, 105); line-height: 20px; border-color:rgb(105, 105, 105);}
.single #menu-main a:hover {color: #fff;}
.category {background: #fff; overflow: hidden; color: rgb(105, 105, 105);}
.category #mobileAltMenu {background: #000}
.category a:hover {color: #000}
.category .widget-sidebar select {background-color: #fff; color: rgb(105, 105, 105); line-height: 20px; border-color:rgb(105, 105, 105);}
.category #menu-main a:hover {color: #fff;}
.archive {background: #fff; overflow: hidden; color: rgb(105, 105, 105);}
.archive #mobileAltMenu {background: #000}
.archive a:hover {color: #000}
.archive .widget-sidebar select {background-color: #fff; color: rgb(105, 105, 105); line-height: 20px; border-color:rgb(105, 105, 105);}
.archive #menu-main a:hover {color: #fff;}
/* SubMenu */
#menu-main li .sub-menu li a{font-size: 18px;}
.sub-menu li{list-style: none;line-height: 0.9em}
.sub-menu{margin: 0px;max-height: 0px; opacity:0; overflow: hidden;transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out; /* Firefox 4 */-webkit-transition: all .3s ease-in-out; /* Safari and Chrome */-o-transition: all .3s ease-in-out; /* Opera */}
/* Category Nav */
header{display: block;position: fixed;top: 0px;z-index: 999;background-color: black; background-color: rgba(0,0,0,0.85);width: 100%;height: 110px;overflow: hidden;border-bottom: 1px solid #252525;}
/* Mobile alternate menu */
#mobileAltMenu.navbar-inverse .navbar-inner {background: none; background-color: transparent; border: none;padding: 0px; box-shadow: none}
#mobileAltMenu .brand{padding: 20px 0 20px 0; margin-left:0}
.page-template-page-images-php #mobileAltMenu .current-menu-item {top:auto;}
/* Contact Form */
.contactForm input, .contactForm textarea, .wpcf7-form input, .wpcf7-form textarea{background-color: #222222;border-radius: 0px; border-color: #333333}
.contactForm input, .wpcf7-form input{height: 30px}
#map-canvas{height: 600px;}
#map-canvas img {max-width: none;}
#searchform{position: absolute;top:65px;right: 40px; }
#searchform button{background-color: transparent;border: none;color: #ffffff}
.page-template-page-images-php #searchform{display: none;}
.selected{color:#ffffff !important;}
span.wpcf7-not-valid-tip {left: 0;top:-10px;background: black;width: 100%;}
/* News Page */
.widget-sidebar {margin-top: 9px;}
.widget-sidebar h2 {font-size: 24px;}
.widget-sidebar ul{list-style: none;margin-left: 0px}
.widgettitle{line-height: 1em;}
.widget-sidebar select{ background: transparent;width: 268px;padding: 5px;font-size: 16px;line-height: 1;border: 1px solid;border-radius: 0;height: 34px;
background-color: #222222;border-color: #333333;background-image: url("../img/downArrow.png");background-repeat: no-repeat;background-position: 240px center;color: #969696;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
/*.pagination ul>li>a, .pagination ul>li>span {border-radius: 0;background-color: #222222;border-color: #333333;}
.pagination ul>li>a:hover, .pagination ul>.active>a, .pagination ul>.active>span {
background-color: #696969;
}*/
/* About */
/* Footer */
.socialIcons li a{background-color: #969696;border-radius: 25px;padding: 3px !important;color: #000000;width:25px; text-align: center;margin-top: 5px; margin-right:10px }
.socialIcons li a i{color: #000000}
.socialIcons li a:hover i{color: #ffffff}
footer .navbar-inverse .navbar-inner {background-color: #000000;background-color: rgba(0,0,0,0.85);background-image: none;}
footer .navbar .nav > li > a {padding: 10px 5px 10px 5px;}
/* single */
.single article img{margin-bottom: 5px;}
/* ----------------------------------------------------------------------------------------------------------
Interactive
---------------------------------------------------------------------------------------------------------- */
.transition {
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out; /* Firefox 4 */
-ms-transition: all .3s ease-in-out; /* Firefox 4 */
-webkit-transition: all .3s ease-in-out; /* Safari and Chrome */
-o-transition: all .3s ease-in-out; /* Opera */
}
/* ----------------------------------------------------------------------------------------------------------
Packery
---------------------------------------------------------------------------------------------------------- */
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.packery {
max-width: 100%;
top:110px;
}
/* clearfix */
.packery:after {
content: ' ';
display: block;
clear: both;
}
/* both item and item content change size */
.itemPack.is-expanded, .itemPack.is-expanded img{
/* width: 180px; */
width: 100%;
height: auto;
}
.itemPack:hover {
opacity: 0.8;
cursor: pointer;
}
.itemPack.is-expanded {
z-index: 2;
}
.itemPack { float: left;opacity: 1;margin:2px 2px;height:200px;width:auto;}
.itemPack img { display: block;width:auto;max-width: none; height: 200px;min-width: 100px;opacity: 0;transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; /* Firefox 4 */
-ms-transition: all 1s ease-in-out; /* Firefox 4 */
-webkit-transition: all 1s ease-in-out; /* Safari and Chrome */
-o-transition: all 1s ease-in-out; /* Opera */}
.is-hidden { display: none; }
.visited{opacity: 0.2;filter: alpha(20); filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
.isotope{width: 100%;height: 100%; overflow: visible !important}
/* ----------------------------------------------------------------------------------------------------------
Nprogress
---------------------------------------------------------------------------------------------------------- */
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
}
#nprogress .bar {
background: #ffffff;
position: fixed;
z-index: 100;
top: 110px;
left: 0;
width: 100%;
height: 2px;
display: none;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #ffffff, 0 0 5px #ffffff;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner, #progress .spinner {
display: block;
position: fixed;
z-index: 1000;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon, #progress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #ffffff;
border-left-color: #ffffff;
border-radius: 50%;
-webkit-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ----------------------------------------------------------------------------------------------------------
Isotope
---------------------------------------------------------------------------------------------------------- */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-ms-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;
}
/*
.isotope .isotope-item {
-webkit-transition-property: left, top, opacity;
-moz-transition-property: left, top, opacity;
-ms-transition-property: left, top, opacity;
-o-transition-property: left, top, opacity;
transition-property: left, top, opacity;
}
*/
.isotope{margin-top: 110px; margin-left: auto; margin-right: auto;}
/* ----------------------------------------------------------------------------------------------------------
Custom image slider
---------------------------------------------------------------------------------------------------------- */
body{overflow-y:visible !important;}
.video-content{width: 95% !important;height: 90% !important;max-width: 807px!important;max-height: 488px!important;}
@media (min-width: 1200px) {}
.blueimp-gallery>.prev, .blueimp-gallery>.next {
width: auto;
height: auto;
margin-top: 0px;
border: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
background: transparent;
}
.blueimp-gallery>.prev, .blueimp-gallery>.next, .blueimp-gallery>.close, .blueimp-gallery>.play-pause {
transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out; /* Firefox 4 */
-ms-transition: all .3s ease-in-out; /* Firefox 4 */
-webkit-transition: all .3s ease-in-out; /* Safari and Chrome */
-o-transition: all .3s ease-in-out; /* Opera */
opacity: .2;
}
.blueimp-gallery>.keyboard{ position: absolute; top: 50%; left: 50%; margin: -42px 0 0 -62px}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-closeBtn {
font-family: 'cross';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-closeBtn:before {
content: "\e000";
}
/* ----------------------------------------------------------------------------------------------------------
Responsive
---------------------------------------------------------------------------------------------------------- */
/* Large desktop */
@media (min-width: 1200px) {
.homeContainer{margin-left: 40px}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
p{font-size: 12px;line-height: 1.35em;}
.navbar-fixed-top, .navbar-fixed-bottom {position: fixed}
.widget-sidebar select{width: 228px;background-position-x: 200px;}
.homeContainer{margin-left: 40px}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
header{position: static;}
.mobilePadding, .isotope{margin-top: 0px;}
.homeContainer {position: relative; top:0; margin-top: 0px; height: 100%;}
#menu-main > li:hover {padding: 0;}
.sub-menu {display: none;}
footer .navbar {margin-top: 0;}
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
header {height: 145px;}
.page-template-page-images-php .current-menu-item, .page-template-page-images-php #menu-main > li.current-menu-item, .page-template-page-images-php .current-menu-item, .page-template-page-images-php #menu-main > li.current-menu-item:hover {position: relative;top: -28px; padding: 0px;}
#menu-main li:hover .sub-menu {height: 20px;}
.page-template-page-images-php .current-menu-item .sub-menu { margin-top:0px;display:block;height: 20px;
opacity: 1;}
.page-template-page-images-php .current-menu-item .sub-menu li {
margin-right: 3px;
margin-left: 0px;
}
/* mobile nav */
.page-template-page-news-php header, .single header, .page-template-page-contact-php header, .page-template-page-about-php header, .page-template-page-images-php header{display: none !important;}
.single .mth{margin-top: 0px !important;}
}
/* Landscape phones and down */
@media (max-width: 588px) {
body{padding: 0 20px 20px 20px;overflow-x: hidden}
#map-canvas{height: 300px;}
header{position: static;height: 135px;}
.mobilePadding, .isotope{margin-top: 0px;}
.itemPack { width:100%;}
#menu-main li a {font-size: 25px}
/* Testing - may need to remove */
#menu-main{background-size: 105px;background-position: -11px 5px; width: auto;padding: 40px 35px 0 34px;}
#menu-home-small {padding-left: 30px;}
.page-template-page-images-php .current-menu-item, .page-template-page-images-php #menu-main > li.current-menu-item, .page-template-page-images-php .current-menu-item, .page-template-page-images-php #menu-main > li.current-menu-item:hover {top: -22px;}
.page-template-page-images-php #menu-main > li:first-child {position: relative;top: -42px;}
footer {display: none;}
/* mobile nav */
.page-template-page-news-php header, .single header, .page-template-page-contact-php header, .page-template-page-about-php header, .page-template-page-images-php header{display: none !important;}
.single .mth{margin-top: 0px !important;}
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2) {
/* Retina-specific stuff here */
#menu-main{background-image: url(../img/louisandco@2x.png);}
}